SaFi Bank Space : 🟢 4. [FE] Select Load Type & Product SKU [per Telco provider]

Key	parent	P	fe story points	be story points	story points	Status
SM-3766	Digital Goods: Mobile Top-up Airtime Load (Paynamics)		5.0	0.0	5.0	Done

Role: User

Objective: want to select type of load and a specific product from the list,

Reason: so that I can buy load and top-up a mobile number with the desired amount by a specific telco provider

Functional requirements:

Paynamics is not allowing direct input of the amount - the user should choose from the options = Product SKU. This is common in Phillippines and users should be well aware of this.

UI requirements:

• type of load is displayed as a switcher with different options (products) to be displayed

• product SKU is displayed as a separate component with all the details (except for Load, only amount is displayed)

• the list of products is scrollable (vertically) and should be displayed in a grid

  • 3 items in a row for Load

  • 1 item in a row for Data and Call & Text (scrollable)

Process flow:

1. Paynamics provides the load options

2. One can be selected by the user

3. The mobile number will receive a top-up of the product SKU amount

Execution steps:

1. User taps on “Continue” button on the “Buy Load” screen

2. List of Product SKUs is displayed

3. User selects an option

4. User is redirected to the “Review” screen

Internal dependencies:

🟢 2. [FE] Select Telco Provider from the List with Icons

External dependencies:

Paynamics

Alternative scenarios: -

Acceptance criteria:

• on the top of the screen there is a switcher with different options/types of load:

  • Load

  • Data

  • Call & Text

• Search bar is available (search through the amount, description and Product SKU)

• once the user selects one of the types of load a list of Products should be displayed

  • each Telco provider offers different options/SKUs (see attached .pdf file from page 15)

• only one product can be selected at a time
  Load:

• the subtitle “Select amount” is followed by the list of amounts

• for the type of product “Load” the list of products is displayed as tiles (3 in a row) only with information about the amount (no description, no product SKU)

• top 12 options (most used amounts) are displayed

• a “show more” link is displayed and after the user taps on it it will show all options (amounts) in ascending order

• there is a box with information about the validity of the load “Valid for 365 days” - after money is loaded the credit can be used for 365 days
  Data and Call & Text

• on the top of the list is a category “Recently purchased” - which displays last purchased products followed by “All products”

• for the type of product “Data” and “Call & Text” the list of products is displayed vertically as separate tiles with the following details:

  • Product SKU is on the top

  • the amount

  • the product description is displayed (max 2 rows)

  • if the user selects one product, it will expand to the full length of the description

• if the Product SKU includes an amount range, always choose the minimum (e.g. autoloadmax 51 to 150 - choose 51)

• CTA button “Continue” is displayed and sticky on the bottom of the screen, will redirected the user to a Review screen

Links to wireframes/UI: https://www.figma.com/file/dkDQHRa1zq7tU58MiL6hBR/SaFi---UI---MVP-(Shared)?node-id=9925%3A62092