Templates

List of Templates

• Activate Card Screen

• Add New Bank Account Screen

• Cards Tab Screen

• Compliance Document Viewer Screen

• Customer Complete Enrollment

• Dashboard Tab Screen

• My Account Details Screen

• My Accounts Tab Screen

• Outbound Accounts

• Physical Card Request Process

• Set Pin Screen

• Statements Screen

• Transactions Activity Screen

• Transfers Screen

• Transfers Menu Screen

• Physical Card Request Process

• CustomerStatusNotValidScreen

Activate Card Screen

Elements

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:

• useActivateCard

Add New Bank Account Screen

Description

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.

Elements

If your app will support external accounts connection through an aggregator, it is recommended to add the AggregatorDispatcher component to this screen, so the user can also connect a new account in this screen.

Add New Bank Account Screen contains the following elements:

• SafeAreaLayout component as a container, to handle loading states.

• ActionButton component to trigger the FormLayout component that contains an Input component to enter the new account name

Cards Tab Screen

Elements

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.

Functionality

The debit card action buttons functionality is handled by the following custom hooks:

• useLockAndUnlock
• useReissueCard
• usePhysicalCardRequest

Dashboard Tab Screen

First Tab

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

Elements

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

Elements

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

Elements

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

Elements

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.

Confirmation Screen

When making an ACH transfer, the confirmation is via a verification code sent to the user's phone number. This process of confirmation is made up of the following 3 screens:

• Request Authorization Code: The user is able to choose how they would like to receive the code (only available via text message at the moment).

• Enter the Verification Code: Screen where the user enters the code sent to their phone number.

• Success Screen: Screen that show the process was successful.

Transactions Activity Screen

Elements

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

Description

This screen triggers the request of physical card and displays the success screen if the process was successful.

Functionality

The functionality of requesting the physical card is handled by the usePhysicalCardRequest custom hook.

Customer Status Not Valid Screen

Description

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.

Functionality

The action of fetch customer data is handled by the thunk fetchCustomer.