SaFi Bank Space : FE: Phone and email (for onboarding)

Phone and email (and referral) input page of “sign up subflow“.

UML flows

screen is opened and app loads list of countries from CM (can trigger Err1) → code selector is populated
User edits fields and clicks continue → local validation is triggered (can trigger Err2)
App sends values to CM in sign-up request (can trigger Err3)
App navigates to next step of sub-flow (SMS OTP input page)

Back action - navigates to previous page of subflow (tone of voice selection) without any confirmation prompt.

Code

Description

Handle

Err1

CM update preference endpoint fails

TBD

Err2

Validation errors

Email not valid - common.error.emailNotValid

Phone not valid - common.error.phoneNotValid

Referral code not valid - common.error.referralNotValid

Err3

CM sign up endpoint fails

TBD

Warning: Figma UI does not represent current state → Figma phone input is not usable and there is no referral code input field in Figma

Tag	Description	Data
1	Appbar	Localization key - `onboarding.signUp.appbar`
2	Title	Localization key - `onboarding.emailPhone.text.title`
3	Description	Localization key - `onboarding.emailPhone.text.subtitle`
4	Email input	Localization key - `onboarding.emailPhone.text.email` asset - `icons/message.svg` optional
5	Phone input	Localization key - code - `onboarding.emailPhone.text.code` number - `onboarding.emailPhone.text.phone` asset - `icons/call.svg` mandatory
6	Referral input	Localization key - `onboarding.emailPhone.text.referral` asset - `icons/star.svg` optional
7	Action button	Localization key - `common.journey.text.continue` Action - signs up user with his phone+email and navigates to next step of sign up subflow