SaFi Bank Space : FE: Customer phone number change (profile)

Created by Martin Vodila (Unlicensed) on Nov 28, 2022

Flow pages of “phone change flow from user profile“.

UML flows

Scenarios

  1. Bottom sheet “starting prompt” is shown to user and he can either:

    1. decide to continue

    2. abort flow → this will terminate whole phone change flow

  2. phone input screen is opened and app loads list of countries from CM (can trigger Err1) → code selector is populated

  3. User edits fields and clicks continue → local validation is triggered (can trigger Err2)

  4. App sends values to CM in phone change request (can trigger Err3)

  5. App navigates to next step - SMS OTP input page

  6. SMS OTP input page is opened and user waits for SMS to come

  7. If SMS is not received, user can trigger new code (can trigger Err4)

  8. User edits field and clicks continue (or automatically after last character filled)

  9. App sends values to CM in verify-otp request (can trigger Err5)

  10. Flow finishes

Back action - moves back to previous page without any confirmation prompt. (or closes bottom sheets when displayed)

Code

Description

Handle

Err1

CM country catalog endpoint fails

TBD

Err2

Validation errors

Phone not valid - common.error.phoneNotValid

Err3

CM change phone endpoint fails

TBD

Err4

CM resend sms otp endpoint fails

TBD

Err5

CM verify sms otp endpoint fails

TBD

Elements

Tag

Description

Data

1

Appbar

Localization key - onboarding.profile.emailChangeTitle

2

Title

Localization key - onboarding.profile.phoneChangeTitle

3

Phone number field

Localization key -

code - onboarding.emailPhone.text.code

number - onboarding.emailPhone.text.phone

asset - icons/call.svg

mandatory

4

Action button

Localization key -common.journey.text.continue

Action - saves phone and navigates to SMS OTP check page

Tag

Description

Data

1

Appbar

Localization key - onboarding.profile.phoneChangeAppbar

2

Title

Localization key - onboarding.verifyPhone.text.title

3

Description

Localization key - onboarding.verifyPhone.text.subtitle

4

SMS resend

Localization key -

non action part - onboarding.verifyPhone.text.notReceived1

action part - onboarding.verifyPhone.text.notReceived2

5

Action button

Localization key - common.journey.text.continue

Action - verifies phone number with SMS OTP code and ends the flow

Starting prompt

Tag

Description

Data

1

Title

Localization key - onboarding.profile.prompt.phoneChangeTitle

2

Description

Localization key - onboarding.profile.prompt.phoneChangeDescription

3

Positive action button

Localization key -onboarding.profile.prompt.actionPositive

Action - navigates to phone input page

4

Negative action button

Localization key -common.journey.text.cancel

Action - terminates flow

Attachments:

plantuml_1662665822209.png (image/png)
plantuml_1662665822209 (text/plain)
plantuml_1662665822209.svg (image/svg+xml)
image-20221128-104858.png (image/png)
image-20221025-200347.png (image/png)
image-20221025-194135.png (image/png)
image-20221024-193612.png (image/png)
image-20221024-193454.png (image/png)
image-20221024-190008.png (image/png)
image-20220913-135822.png (image/png)
image-20221025-191755.png (image/png)
plantuml_1662665822209.svg (image/svg+xml)
plantuml_1662665822209 (text/plain)
plantuml_1662665822209.png (image/png)
image-20221128-135128.png (image/png)
image-20221128-135207.png (image/png)
image-20221128-135721.png (image/png)
image-20221128-140707.png (image/png)