Molecules

List of Molecules

• Account Card

• Account Number Row

• Balances Row

• Compliance Checkboxes

• Compliance Name Input

• Header With Button

• Header With Menu

• Horizontal Action Button List

• Transaction Item

• Request Money Sheet

Account Card

Description

Displays account title and available balance inside a card, it also handles press event.

Props

All props are required.

Prop Name	Type	Description
title	string	Title displayed on the account card
availableBalance	string	The customer's available balance
onPress	() => void	Handler called when the account card is pressed
cardIcon	React.FC<SvgProps>	Icon displayed

Usage

<AccountCard
   title={`${customerFirstName}${strings.accounts.ownerAccount}`}
   availableBalance={primaryAccount.availableBalance}
   onPress={() => {
     navigate('MyAccountDetailsScreen', {
       account: primaryAccount,
     });
    }}
    cardIcon={ICONS.DebitCard}
/>

Account Number Row

Description

Receives a card data object and handles the fetch and display of the extended information of that card like, the available balance and card image.

Props

Prop Name	Type	Usage
leftIcon	string (optional)	Name of the icon displayed to the left of the component
leftText	string	Text displayed to the left
leftEvent	() => void (optional)	Function called when the left icon is pressed
rightIcon	string (optional)	Name of the icon displayed to the right of the component
rightEvent	() => void (optional)	Function called when the right icon is pressed
containerStyle	ViewStyle (optional)	Style applied to the container

Usage

<AccountNumberRow
   leftText={'Text Example'}
   leftEvent={() => setShowFullAccountNumber(!showFullAccountNumber)}
   rightEvent={() => }
/>

Balances Row

Description

Displays two elements, each one with title, subtitle, and spacing between.

Props

All props are optional.

Prop Name	Type	Description
leftTitle	string	Text displayed as left title
leftText	string	Left text
rightTitle	string	Text displayed as right title
rightText	string	Right Text
containerStyle	ViewStyle	Style applied to the container

Usage

<BalancesRow
   leftTitle={strings.accounts.availableBalance}
   leftText={'Left Text'}
   containerStyle={cardLayoutStyles(theme).marginBottom}
/>

Compliance Checkboxes

Description

Receives a compliance or legal documents array to display a checkbox component with the acknowledge text for each one, so the customer can accept that document.

Props

All props are optional.

Prop Name	Type	Description

Usage

// Some code

Use this component for documents that only require a checked checkbox. If the document requires e-sign from the third party service, use the Compliance Name Input component.

Compliance Name Input

Description

Receives compliance or legal documents array to display an input component with an acknowledge text for each one, so the customer needs to enter their name to accept that document.

Props

Prop Name	Type	Description

Usage

// Some code

Header With Button

Description

Uses the Heading component to add a title to the left, and the Button component to add a button with an icon to the right.

Props

Prop Name	Type	Description

Usage

// Some code

Header With Menu

Description

Modifies MainLayoutHeader component to leave Menu as default left icon for tab screens, and also handles the Drawer side menu's open and close actions.

Props

Prop Name	Type	Description

Usage

// Some code

Horizontal Action Button List

Description

Props

Prop Name	Type	Description

Usage

// Some code

Transaction Item

Description

Receives transaction information and displays a summary information per each transaction.

Props

Prop Name	Type	Description

Usage

// Some code

Request Money Sheet

Description

Displays an Action Bottom Sheet with the account number and routing number of the primary account, and also gives the option to copy that information to the clipboard. It wraps the ActionBottomSheet component from the core module.

Props

Prop Name	Type	Description

Usage

// Some code

Transfer Info

Receive the information of the account that sends and receives a transfer

Params Name	Type	Description
to	ItemTransferProps	Contains the information of the account that sends the transfer
from	ItemTransferProps	Contains the information of the account that receives the transfer

Item Transfer Info

Receives account information and displays a title, account type, and description

Params Name	Type	Description
title	string	Receives a string that will be displayed as the account title
type	string(optional)	It is an optional parameter in which, ideally, the type of account would be displayed.
description	string(optional)	It is an optional parameter in which ideally to show the last four digits of the account

Item Section Header Recurrent Transfer

Element of information displayed in the preview of a scheduled transfer

Params Name	Type	Description
title	string	Title that will be displayed in each section of the header of a scheduled transfer
subtitle	string	Subtitle that will be displayed in each section of the header of a scheduled transfer
stylesTitle	StyleProp<TextStyle>	Custom styles for the title of each section
stylesSubtitle	StyleProp<TextStyle>	Custom styles for the subtitle of each section

Item Details Recurrent Transfer Upcoming

Component to display the information of a recurring transfer, it also contains buttons with the actions of deactivating or activating, deleting, editing and canceling

Params Name	Type	Description
withFullInfo	boolean(optional)	When true is sent, it will show the information of the scheduled transfer, when false is sent, it will show the information of a transfer that will be executed in a certain time range
amount	string	This field will receive the amount for which a transfer was scheduled
memo	string	This field shows the memo defined by the user when scheduling a transfer
frequency	string(optional)	This field shows the memo defined by the user when scheduling a transfer
sendOn	string	This field will receive the day of the month in which the transfer will be executed
endOn	string(optional)	When there is a transfer end date
transferId	string	Receives the unique identifier of the transfer
recurrentTransferStatus	string	Receives the position in the array of scheduled transfers
indexInArray	number	Receives the position in the array of scheduled transfers
backgroundColor	string(optional)	Background color of the card of a scheduled transfer
onPressEdit	(itemTransfer: GetRecurrentTransferDetails)=>void(optional)	Event that works to edit the data of a transfer
onPressDelete	(itemTransfer: GetRecurrentTransferDetails)=>void(optional)	Event that to eliminate the transfers, receives the transfer id as a parameter
onPressActive	()=>void(optional)	Used to activate or deactivate a transfer
onPressCancel	(transferId: string)=>void(optional)	Event that is executed when a transfer is canceled receives the id of the transfer as a parameter

Item Empty List With Icon

When a user has not made any transfers, the empty component is displayed

Params Name	Type	Description
title	string	empty state title
subtitle	string	A message or subtitle to display to the user
stylesTitle	StyleProp<TextStyle>	Custom styles for the title of each section
stylesSubtitle	StyleProp<TextStyle>	Custom styles for the subtitle of each section

Item Details Recurrent Transfer

Params Name	Type	Description
accountName	string	Sending account name
accountTo	string	Number of the account that sends
accountNameTo	string	Receiving account name
accountFrom	string	Receiving account number
onPressActive	()=>void(optional)	Used to activate or deactivate a transfer
onPressDelete	(itemTransfer: GetRecurrentTransferDetails)=>void(optional)	Event that to eliminate the transfers, receives the transfer id as a parameter
onPressEdit	(itemTransfer: GetRecurrentTransferDetails)=>void(optional)	Event that works to edit the data of a transfer
accountStatus	string(optional)	Contains the possible statuses of a transfer: Active, Inactive, Cancelled, Ended
isActive	boolean	Boolean to determine the status of a transfer if it is true it is active if it is false it is inactive
endOn	string(optional)	This field will receive the day of the month in which the transfer will be executed
backgroundColor	string(optional)	Background color of the card of a scheduled transfer

Item Account General Info

Params Name	Type	Description
accountTo	string	Number of the account that sends
accountFromName	string	Sending account name
accountFrom	string	Receiving account number
accountNameTo	string	Receiving account name

Filters Schedule Transfers Sheep

Modal that allows you to filter by status, frequency and amount

Params Name	Type	Description
sheetRef	React.RefObject<IHandles>	ref that allows to open or close the modal of the filters
onPressCancel	()=>void	Method that allows clearing the filters and closing the modal
onPressFilters	( filters: OptionsFilters, formatFilters: FormatFilters ) => void	Method that receives the selected filters in the modal

Delete Recurrent Transfer Sheet

Params Name	Type	Description
sheetRef	React.RefObject<IHandles>	ref that allows to open or close the modal of the filters
onPressDelete	(transferId?: string) => void	Method that allows to delete a transfer, receives as a parameter the id of the transfer to be deleted
subTitle	string(optional)	Subtitle modal
iconLeft	string(optional)	Icon Left
amount	string	Receive the amount of the transfer
memo	string	Receives the memo assigned to the transfer
frequency	string	Receives the frequency at which the transfer will be executed
accountName	string	Receives the name of the account that sent the transfer