SaFi Bank Space : 🟢 2. [FE] View Logos of Bill Providers & select a Provider

Key parent P fe story points be story points story points Status
SM-3041 Epic Bill Payment (ECPay) Medium 2.0 0.0 2.0 Done

Role: User

Objective: want to select bill provider from the list of providers of a before specified category

Reason: so that I can settle a bill from my SaFi account

Functional requirements:

The list of providers for each category needs to be specified by client.

Bill providers have to be mapped to the correct categories.
In the future new billers need to be added manually into the list (from SaFi side).

UI requirements:

Process flow:

  1. Provider category listed

  2. Providers in the category listed

Bill Payments

Execution steps:

  1. After selecting a category, the user is presented with the providers of the category

  2. On the providers' list, the user can search for a provider

    1. Search suggests providers based on if the added letters are matching any part of the provider’s name

Internal dependencies:

🟣1. Choose "Pay bill" option & select the category

External dependencies:

Categories list

Gcash mapping

Alternative scenarios: -

Acceptance criteria:

  • After a category of bill providers has been selected, a list of bill providers is displayed (as separate tiles, not as a drop-down list)

    • new billers need to be added manually

  • a search bar is available to the user, so he/she can type the name of the bill provider and easily find the provider within the selected category:

    • When user starts typing the name of a bill merchant, the app behavior is that all merchants which contain the letters added must appear as suggestions under the search field:
      For example: when the user starts typing a merchant name that starts with ‘co…’, the app shows all merchants that CONTAIN (not that start with) the letters ‘co’

  • User can choose a bill provider by clicking on one of the tiles

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