Templates
Activate Card Screen
Activate Card Screen contains the following elements:
FormLayout component as a container, to handle input submission, scrolling, and loading.
Use the input component to capture the card information.
Functionality implementation
The functionality to activate the card is implemented by the following custom hook:
Add New Bank Account Screen
Handles the creation of new internal accounts. The support of creating additional accounts besides the primary dependes on the implemented BaaS and its requirements.
Rize: allows the creation of internal synthetic accounts. These accounts have no account number assigned, so the user should assign them a name. This only supports internal transfers.
Additional accounts are not supported for Galileo and Unit yet.
Cards Tab Screen
Default Cards Tab Screen contains the following elements:
SafeAreaLayout component as container, to handle pull to refresh, scroll and loading.
Debit card image: uses CardLayout component to display the available balance of the account associated to the debit card and the card image.
Debit card actions: Uses HorizontalActionButtonsList to handle debit card actions: send, request, lock and more.
Recent debit card transactions: uses HeaderList and TransactionsList components to display the 5 most recent debit card transactions.
RequestMoneySheet component (outside the SafeAreaLayout component): it is triggered when the Request button is pressed.
More Menu button uses an Action Bottom Menu component to display a collection of action buttons to handle debit card actions like: send money, request money, go to transactions, lock/unlock card, reset pin, report theft, replacement, report loss.
These card actions depend on the supported functionality of the implemented BaaS.
Some of the actions might need integrations with other modules. This cases are listed below:
Request a physical debit card when the card is virtual. The PiiOnboarding Module is needed for this functionality to allow the user to enter a different shipping address. Go to Request Physical Debit Card Linking to see the linking between this components.
Dashboard Tab Screen
Default Dashboard Tab Screen contains the following elements:
SafeAreaLayout component as a container, to handle pull to refresh, scroll and loading.
Physic card request: Uses BaseActionCard component to display and handle physic debit card status.
Primary account available balance: uses AccountCard component to display the primary account's available balance.
Recent Transactions: uses HeaderList and TransactionsList components to display the 5 most recent transactions of their primary account.
Direct transfer (inactive): Uses BaseActionCard component to redirect to Transfers screen.
My Accounts Tab Screen
My Accounts Tab contains the following elements:
SafeAreaLayout component as container, to handle pull to refresh, scroll, and loading.
Use the Header component to display a title and the option to add a new account.
Actions of my accounts (inactive): use the horizontal action buttons list to manage the actions of my accounts: send, request and more.
My Accounts: uses HeaderList and AccountsList components to display internal accounts.
RequestMoneySheet component (outside the SafeAreaLayout component): it is triggered when the Request button is pressed.s
My Account Details Screen
My Account Details Screen contains the following elements:
SafeAreaLayout component as a container, to handle pull to refresh, scroll and loading.
Use the Heading component to display the account name.
Use the Balance Row component to display the account's available balance.
Use the Account Number Row component to display the last 4 digits or full account number and functionality to copy account number to clipboard.
My Account Details Actions (Inactive): View the list of horizontal action buttons to manage my account actions: Submit, Request, and Report Problems.
Recent Transactions: uses the Header List and Transactions List components to display the 5 most recent transactions for the selected account.
RequestMoneySheet component (outside the SafeAreaLayout component): it is triggered when the Request button is pressed.
Transfers Menu Screen
This screen shows the options for the different transfers that can be made:
Transfers Between My Accounts
Transfers to Linker Account
ACH Transfer
Transfers Menu Screen contains the following elements:
FormLayout component as a container, to handle input submission, scrolling, and loading.
RequestMoneySheet component (outside the SafeAreaLayout component): it is triggered when the Request button is pressed.
HorizontalActionButtonList to manage the actions of the different transfers
Transfers Screen
Used to make transfers between accounts that lets the user choose the account where the transfer is coming from, which account goes to and the amount.
Transfers Screen contains the following elements:
FormLayout component as a container, to handle input submission, scrolling, and loading.
Dropdown component to display the accounts the to make the transfers from and to.
Input component to enter the amount.
RecurrentTransferForm component, to handle the extra elements (Inputs, Dropdwons, DatePickers) for the recurrent transfer configuration.
Transactions Activity Screen
Displays the list of transactions of an account and has the option to choose from which account the user wants to see the transactions.
Transactions Activity Screen contains the following elements:
SafeAreaLayout component as a container, to handle pull to refresh, scroll and loading. The list of transactions works with an infinite scroll.
Dropdown component to display the accounts the user has.
Search Input component to look for transactions by description.
TransactionsList component that renders the transactions array from its state.
Physical Card Request Process
This screen triggers the request of physical card and displays the success screen if the process was successful.
Customer Status Not Valid Screen
Screen that displays a default state view with type refresh. It uses the component StateView. When a customer status is not supported by the app this screen is displayed, so the user can press the Try Again button and refresh the customer data again.
Last updated