Templates

List of 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.

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

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.

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

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.

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

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.

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

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.

PreviousOrganisms NextHooks

Last updated 1 year ago

Was this helpful?