Templates

List of Templates

• Confirm Onboarding Info Screen

• Edit Onboarding Info Screen

• Enter Address

• Enter Address Suggestion

• Enter Birth Date

• Enter Names

• Enter SSN

Confirm Onboarding Info Screen

Description

This screen displays a user's personal information for different scenarios based on the routeType provided.

Functionality

This screen uses the useEditProfile custom hook to collect the user info and display it.

Params

Param Name	Type	Description
routeType	'onboarding' | 'editProfile' | 'shippingAddress'	Indicates the action that triggered the confirmation screen. Based on the types: onboarding triggers information confirmation during onboarding. editProfile triggers personal details view with the option to edit profile. shippingAddress triggers the address view with the option to edit it.
headerTitle	string (optional)	Screen header title. If it's not provided, there are different titles for each routeType.
title	string (optional)	Screen title. If it's not provided, there are different titles for each routeType.
subtitle	string (optional)	Screen subtitle. If it's not provided, there are different titles for each routeType.
section	string (optional)	Screen section text. If it's not provided, there are different titles for each routeType.

Edit Onboarding Info Screen

Description

This screen allows the user to edit their personal information for different scenarios based on the routeType provided.

Functionality

This screen uses the useEditProfile custom hook to send the updated personal information.

Params

Param Name	Type	Description
routeType	'onboarding' | 'editProfile' | 'shippingAddress'	Indicates the action that triggered the edit info screen. Based on the types: onboarding triggers information editing during onboarding. editProfile triggers personal details editing with the option to edit profile. shippingAddress triggers the address edit view.
headerTitle	string (optional)	Screen header title. If it's not provided, there are different titles for each routeType.
title	string (optional)	Screen title. If it's not provided, there are different titles for each routeType.
subtitle	string (optional)	Screen subtitle. If it's not provided, there are different titles for each routeType.
section	string (optional)	Screen section text. If it's not provided, there are different titles for each routeType.

Enter Address Suggestion

Description

This screen allows the user to write an address to an input and choose from a list of suggestions.

Enter Address contains the following elements:

• FormLayout component as a container, to handle input submission and loading.

• Address Suggestion Input component to capture the customer's address, and provides a list of address to choose from.

Params

Param Name	Type	Description
routeType	'onboarding' | 'editProfile' | 'shippingAddress'	Indicates the action that triggered the edit info screen. Based on the types: onboarding triggers information editing during onboarding. editProfile triggers personal details editing with the option to edit profile. shippingAddress triggers the address edit view.
headerTitle	string (optional)	Screen header title. If it's not provided, there are different titles for each routeType.
title	string (optional)	Screen title. If it's not provided, there are different titles for each routeType.
subtitle	string (optional)	Screen subtitle. If it's not provided, there are different titles for each routeType.
section	string (optional)	Screen section text. If it's not provided, there are different titles for each routeType.

Confirm Address

Description

Screen that displays the user's address entered on the previous screen and is also able edit it, so it can be saved to their personal information.

Confirm Address contains the following elements:

• FormLayout component as a container, to handle input submission and loading.

• Input component to capture the customer's address information.

• Dropdown component to display the country.

Params

Param Name	Type	Description
routeType	'onboarding' | 'editProfile' | 'shippingAddress'	Indicates the action that triggered the edit info screen. Based on the types: onboarding triggers information editing during onboarding. editProfile triggers personal details editing with the option to edit profile. shippingAddress triggers the address edit view.
headerTitle	string (optional)	Screen header title. If it's not provided, there are different titles for each routeType.
title	string (optional)	Screen title. If it's not provided, there are different titles for each routeType.
subtitle	string (optional)	Screen subtitle. If it's not provided, there are different titles for each routeType.
section	string (optional)	Screen section text. If it's not provided, there are different titles for each routeType.

Enter Birth Date

Description

This screen lets the user enter the birth date so it can be saved to their personal information.

Enter Birth Date contains the following elements:

• Form Layout component as a container, to handle input submission and loading.

• Date Picker component for the date.

Enter Names

Description

This screen allows the user to enter their names so it can be saved to their personal information.

Enter Names contains the following elements:

• Form Layout component as a container, to handle input submission and loading.

• Input component to capture the customer's names.

Enter SSN

Description

This screen lets the user enter the SSN so it can be saved to their personal information.

Enter SSN contains the following elements:

• Form Layout component as a container, to handle input submission and loading.

• Input component to capture the customer's SSN.