Build an onboarding page

You have made all relevant data fields for onboarding available through the internal API. Now you want to build an onboarding page that surfaces the onboarding information, shop requirements checklist, and marketplace terms to merchants. The onboarding page will provide dynamic feedback to merchants on the state of their marketplace onboarding.

In this tutorial, you'll learn how to create components to usher merchants through the onboarding process, including pre-onboarding information, a marketplace requirements checklist, and an onboarding page.

A gif showing a multi-step channel onboarding flow

What you'll learn

After finishing this tutorial, you'll have learned how to do the following:

  • Surface information to merchants before they start the onboarding process

  • Create a component for a checklist of marketplace requirements

  • Build an onboarding page to display information dynamically to merchants

Requirements

You've completed the Add shop requirements tutorial.

Step 1: Create the information component

The first step in you onboarding flow surfaces important information that a merchant should know before starting the onboarding process.

  1. In the pages/admin folder, create a file called onboarding.js

  2. In pages/admin/onboarding.js, create an OnboardingInfoCard component that renders an OnboardingInfo component inside an OnboardingCard component.

    The component should accept properties to indicate whether the onboarding info is completed, and the state of the onboarding card. The component should also trigger the completeOnboardingInfo mutation that you created, when the action is clicked.

Step 2: Create the requirements checklist component

The second step in the onboarding flow is the requirements checklist. The checklist displays each marketplace requirement and indicates whether the shop meets the requirement. Merchants should not be able to continue onboarding until they meet all requirements.

  1. Create an adminComponents folder at the project root to hold common components for the channel app.

  2. In adminComponents, create a checklist.js file with a Checklist component.

    The component should accept properties to indicate whether each requirement is met, and return an OnboardingChecklist component that links out to the admin sections relevant to each requirement.

  3. In the adminComponents folder, create an index.js file and export the checklist component from the adminComponents module.

  4. In pages/admin/onboarding.js, create an OnboardingChecklistCard component that returns an OnboardingCard containing the Checklist component that you created.

    The component should accept properties to indicate whether each requirement is met, as well as the status for the onboarding card.

Step 3: Create the terms component

In this step, you'll surface the marketplace terms and conditions to the merchant, and prompt them to accept the terms. Merchants shouldn't be able to complete onboarding until they have accepted the terms and conditions.

The component contains a link to the marketplace terms and conditions, with an action that allows the merchant to accept the terms and fires the acceptTerms mutation.

In pages/admin/onboarding.js create an OnboardingTermsCard component that returns an OnboardingCard component with a link to the marketplace terms and conditions.

It should accept a property to indicate whether the terms have been accepted, as well as a state for the onboarding card.

Step 4: Build the onboarding page

In this tutorial, you've built components for each step of the onboarding flow. You can now combine these components to build the onboarding page.

  1. Add a simple LoadingState component that has a similar structure to the onboarding page.

  2. In pages/admin/onboarding.js create an Onboarding component and export it as the default from the file. The component should query for information about the merchant’s onboarding progress and whether they meet each eligibility requirement.

    You can use the data to render an OnboardingPage that contains the components you've created in this tutorial.

    You can return the LoadingState component created above if the query is loading.

You can access your channel onboarding page by visiting the /admin/onboarding path in your channel app. The page should look something like the following:

An image of the channel app onboarding page with the first step active

  1. Update the Onboarding component’s OnboardingPage action to trigger the completeOnboarding mutation, then redirect to the channel app homepage.

  2. Update the Onboarding component to redirect to the channel homepage if the onboarding is already completed.

    You'll also continue rendering the LoadingState if the onboarding is completed, to prevent flashing the completed onboarding page before the redirect.

You can access the onboarding page by visiting the /admin/onboarding path in your channel app.

Next steps

  • Learn how to create a settings page for merchants who have completed the onboarding flow.