Onboarding Flow

[nthnluu]

We need to create a page that walks businesses through the process of adding their business to Hollar.

Docs

• Google Maps Geocoding API
• MUI Autocomplete with Custom Input Component
• HTML Input Types
• HTML Autocomplete Modes
• Forms in React

Overview

This page will be a similar layout to the onboarding page we have currently. Each step on the onboarding flow is focused on a particular piece of info we need: we want to avoid showing too many fields on one page since long forms tend to overwhelm users.

We want to make use of built-in browser form validation while also keeping track of the user data for each step. Therefore, each step of the onboarding flow will have its own form component.

In the top-level page component...

• We want to store the current page (aka the onboarding step they're on) and the user's form data formData in a useState() hook.
• We will update the current page in order to navigate the user forward/backward in the flow. Prevent users from pressing the back button if they're on the first page.
• The formData state will be initialized with the following object:

{ "name":"", "street_address":"", "city":"", "state":"", "zipCode":"" }

There will be a field in this object representing the values all the text fields. We initialize the form with blank values, but as the user updates the text fields, this object will change. This object allows us to hold the user's inputs across multiple forms and serves as a single source of truth for the onboarding flow.

For each step...

1. User fills out form
   • Each field's value is defined by the respective field in formData
   • Whenever the value changes, we have to update formData accordingly
2. User submits form
3. Browser validates form and submits if it passes
4. On submit, we move to the next step.

Onboarding steps

1. What is the name of your business?

• This step should have some helper text saying "By continuing you agree to the following Terms of Service and Privacy Policy"

2. Choose the category that fits your business best

• This step should present options as they type.
• They must choose a category from the list in order to continue

3. Add a location

• Click here for a demo on how this should work
• This step should have one address field shown by default and a button to reveal a space to add unit and suite numbers.
• The street address field should show address suggestions from the Places API and autofill the form with the data when an option is clicked.
• When the "continue" button is clicked, make a request to the Google Maps Geocoding API to find the lat and long. Check to see if the address returned matches the one the user entered. If it does, continue onto the next step. Otherwise, show an error to the user.

4. Verify info

• Display the data a user entered so they may review it. Make it such that if a user clicked on a field, it takes them back to the appropriate step in the onboarding flow to edit their data.
• When the submit button is pressed, send the form data state to the Cloud Function endpoint and await a response.

Notes

• I already started work on the AddressAutocomplete component, but it needs work.

• You should use the data-driven UI approach I've used in the past. It helps reduce redundancy and ensures consistency. For example, you could model the onboarding flow as such: const onboardingSteps = [{ title: "What is the name of your business?", form: <StepOneFormComponent formData={formData} setFormData={setFormData}/> }]

and use onboardingSteps.map((step, index) => <div key={index}> ... </div>) to render the UI.

• Each TextInput's value corresponds with a value in formData. Whenever we change the value, we should update the respective field in formData by calling setFormData(). Check out this CodePen for an example of how this works. Here is a drawing showing an overview of how to implement this.

• Submitting a form will run built-in browser validation (it'll alert users if something is required, an email isn't formatted correctly, etc.) and if it passes, we can navigate the user forward.

• Use the TextInput component from /components/forms for text fields.

TextInput Props:

• required: Defines whether an input is required.
• label: The next label at the top of the text input
• id: The UNIQUE identifier for the field
• autocomplete: Defines the behavior of built-in browser autocomplete. Refer to the Docs section for what you can use here.
• value: The current value of the field (should point to the respective field on the form data state)
• onChange: Called whenever the field is updated. Text can be extracted from event.target.value and should update a respective field in formData.
• type: Defines the type of value the input allows. Refer to Docs.
• error: When true, turns text field red
• helper: Small text beneath the input field

[nthnluu]

Here is the code you need to execute in order to call the createBusiness Cloud Function:

  const addBusiness = fb.functions().httpsCallable('createBusiness');
        addBusiness({
            "name": "Brightside Barbershop",
            "address": "10277 University Ave",
            "city": "San Diego",
            "state": "CA",
            "zipCode": "90210",
            "created_by": "12",
            "lat": -12.7,
            "long": 97.2
        })
            .then(() => {
                console.log("done!")
            })
            .catch(error => console.log(error))

[itshyyde]

I've setup the form to have a more logical flow, I'll work on implementing the Cloud Function while you work on the Google Location API.

[itshyyde]

I made a function called setBusiness that handles the reference to the createBusiness cloud function.