SaFi Bank Space : 🟢 3. [FE] [Same screen as in point 2] Type in Phone Number or Select from the Contact list

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

Role: User

Objective: want to manually input a phone number (my or any other) or select it from the contact list,

Reason: so that I can buy load from my SaFi account to top-up my mobile number or mobile number of anyone from my contacts

Functional requirements:

Access has to be granted to use the selection from contact list feature through the contact list icon.

UI requirements:

• input field of the data must be provided to the user

• contact list icon is displayed

• modal window with a search bar and list of user’s contacts is displayed

Process flow:

1. Phone number is added by user

or

1. Contacts button is tapped

2. Permission is asked for access

3. Permission granted

4. List populated with user’s contacts is loaded

5. Contact selected from the list

6. Contact’s phone number is added to the phone number numerical text box on “Buy Load”

Execution steps:

1. User is on “Buy Load“ screen

2. User adds phone number

Internal dependencies:

🟢 1. [FE] Select Load on Payment Screen or in Shortcut

External dependencies: -

Alternative scenarios:

1. User is on “Buy Load” screen

2. User taps contact list icon

3. Permission is asked for access

4. User grants access

5. Modal window with search bar & list of user’s contacts is displayed

6. User selects a contact

7. User is navigated to the “Buy Load” screen, where the phone number field is populated with the selected user’s number

Acceptance criteria:

• manual input of the data must be provided to the user

• input field for “Phone number” is available below the list of Telco providers (described in this user story >> SM-3764 - 2. [FE] Select Telco Provider from the List with Icons Done )

  • accepts only numeric characters

  • allows only 11 digits (no special character such as + sign is allowed)

  • an example of how the number should be written is displayed in the text field, the format is 0XXX XXX XXXX

  • phone number is automatically separated with blank spaces

  • if the phone number starts with 63 (prefix for Philippines) it will be automatically replaced by 0 (see attached video)

  • if the phone number starts with any digit, at 10th digit a zero is added to the beginning of the phone number (see attached video)

• user Is also able to select the icon for the contact list and upload the phone number of another user

• the device will ask user for permission to access the mobile contact list, it is a native functionality, the options are:

  • while using the app (user will allow this once and will be never asked again, the contact list will open automatically next time)

  • only this time (user will allow this only for this time, in the future he/she will be asked again, the contact list will not open automatically)

  • deny (user will not allow to open his/her contact list and will never be asked again)

• the modal window with a search bar and list of user’s contacts is displayed

• user is able to simply select a contact from his list and the phone number will be pre-populated

  • the field is still editable, even if the phone number was pre-populated from the contact list

ALT: if the user will not allow (by mistake or on purpose) the app to access the phone contact list:

1. User will try to click on the contact list icon anyway

2. New screen/pop-up (native functionality) appears with the message “SaFiBank does not have accss to your contacts. You can enable access in Settings”

   1. CTA Settings & Cancel

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