SaFi Bank Space : FE: Subscription selection page (for onboarding subs flow)

Created by Martin Vodila (Unlicensed), last modified on Nov 25, 2022

Page with subscription plan comparison/selection.

UML flows

Scenarios

  1. screen is opened and subscription plans are loaded from PM (product manager) - can trigger Err1

  2. user can ready and compare available plans (default shown plan is most expensive one)

  3. user picks plan and clicks action button

  4. subscription request is sent to PM (can trigger Err2)

  5. user plan is saved and app waits for ably event “customer onboarded“

  6. once this event is received app reloads customer data from CM

    1. for active state → app navigates user to “Final congrats“ page

    2. for other states → app waits for new ably event “customer onboarded“

Back action - exits subscription subflow without any confirmation prompt.

Code

Description

Handle

Err1

PM endpoint for plans failed

TBD

Err2

PM endpoint for subscription failed

TBD

Err3

CM endpoint for customer data failed

TBD

Elements

Tag

Description

Data

1

Title

Localization key - onboarding.subscription.choosePlan

2

Plans tabs

plan.name

3

Plan cost

Localization key - subscription.subscriptionPlan.month+

plan.monthlyAmount

4

Plan market value

Localization key - subscription.subscriptionPlan.onAverage+

plan.marketValue

5

Plan inclusions title

Localization key - subscription.subscriptionPlan.planInclusions

6

Plan inclusions text

Localization key - subscription.subscriptionPlan.atmWithDrawal + plan.subscriptionOperations.atmWithdrawal.freePlanCount

Localization key - subscription.subscriptionPlan.cashIn + plan.subscriptionOperations.cashIn.freePlanCount

Localization key - subscription.subscriptionPlan.transfer + plan.subscriptionOperations.transfer.freePlanCount

Localization key - subscription.subscriptionPlan.topUp + plan.subscriptionOperations.topUp.freePlanCount

Localization key - subscription.subscriptionPlan.debitCard + plan.subscriptionOperations.debitCard.freePlanCount

Localization key - subscription.subscriptionPlan.remittanceService + plan.subscriptionOperations.remittanceService.freePlanCount

Localization key - subscription.subscriptionPlan.availableCredit

7

Marketing info

Localization key - onboarding.subscription.freeInfo +
plan.monthlyAmount

8

Action button

Localization key - onboarding.subscription.intro.action

Action - navigates to subscription plan selection page

Attachments:

plantuml_1662665822209.png (image/png)
plantuml_1662665822209.svg (image/svg+xml)
plantuml_1662665822209 (text/plain)
image-20221125-082419.png (image/png)
image-20221123-145043.png (image/png)
image-20221101-102121.png (image/png)
image-20220913-135822.png (image/png)
image-20221024-190008.png (image/png)
image-20221024-193454.png (image/png)
image-20221024-193612.png (image/png)
image-20221102-065420.png (image/png)
image-20221123-153839.png (image/png)
plantuml_1662665822209.svg (image/svg+xml)
plantuml_1662665822209 (text/plain)
plantuml_1662665822209.png (image/png)
image-20221125-101925.png (image/png)
image-20221125-102028.png (image/png)
image-20221125-102044.png (image/png)