Templates
Confirm Onboarding Info Screen
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.
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
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.
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
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.
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
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.
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
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
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
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.
Last updated
Was this helpful?