[FE] First Half of Onboarding

[parkerra]

Overview

When new Caregivers are signing up, after they create an account they have to input additional information about themselves and their household, sign waivers, and request items as needed. Since onboarding is multiple screens, it has been broken up into two tickets. The tasks for this ticket include the Let's Get Started page (Page 1), Liability Waiver (Page 3), Shipping Address (Page 5), and Best Way to Contact page (Page 6).

Link to Figma: https://www.figma.com/design/1eq6iy7h2Cd7rYTxPB4s5P/Motherhood-Beyond-Bars-%2F-Spr2022-(Copy)?node-id=6212-1439&node-type=CANVAS&t=IzQT02xW96dasVs1-0

Requirements

• Create two branches: one for the ticket and one for shared components. For shared components, created as many PRs as needed so that components can be merged into main for other devs to use
• Create components (see below) to be reused throughout the codebase and use them throughout the pages
  • For any components that someone else needs to make block out the positioning for the component to be added later. For example, for the Logo at the top and side of the page, leave room for the logo to be added later
  • Push these as they're completed so that they can be used by other devs! And pull the branch to local as new components are added
• Use the components to build the pages in the description, they should be stateful and have error checking. Each page should be its own file in web/pages/caregiver/onboarding.tsx under web/components/Onboarding/[PageName].tsx, the state should be kept track of in /onboarding.tsx
  • When the user finishes filling out the last page (Preferred Contact), use the endpoint in db/actions/shared/Caregiver.ts to update the caregiver using the ID from auth.auth.currentUser

Components

Create the following components on your dedicated component branch in the directory web/components, these components are used throughout this ticket, along with #123 and #124, and will be merged into frontend branches as they are completed. Remember, components should be mobile friendly! See components/atoms/Button.tsx and components/atoms/TextInput.tsx for examples

• Dropdown (create components/atoms/Dropdown.tsx) - use React Dropdown (https://www.npmjs.com/package/react-dropdown) to create a reusable dropdown component (see State field in Shipping Address page for styling)
• Date Picker (create components/atoms/DatePicker.tsx) - use React DatePicker (https://www.npmjs.com/package/react-datepicker), see Date in Liability Waiver page for styling
  • Ideally users should be able to type in a date and/or use the calendar, but if there is not enough time for typing in the date that can can be added later
• Checkbox Text (create components/molecules/CheckboxText.tsx) - use Checkbox component (created in [FE] Second Half of Onboarding #123, use empty button as placeholder) to create a checkbox with text where users can click the div with the text to toggle the checkbox on and off, see Liability Waiver and Shipping Address for styling
• Progress Bar (create components/atoms/ProgressBar.tsx)
• Back Button (create components/atoms/BackButton.tsx) - should extend Button component
• Scroll to focus when keyboard is up (create lib/utils/KeyboardScoll.ts) - when a user hits a textbox at the bottom of the page, the screen should scroll up on mobile to prevent the keyboard from covering submit buttons and other textboxes at the bottom of the page. This will be reused throughout the codebase

General

• User inputs should update the pages state
• The Continue/Next button should be disabled if the user has errors
• Inputs should have error states if the user leaves requires fields blank or inputs incorrect information

Important Information

• Make pages for mobile first, then extend them to Desktop
  • Use Tailwind's reactive design breakpoints to style for both mobile and web: https://tailwindcss.com/docs/responsive-design
• Use DevTools to resize the screen for different screen sizes including tablets both vertically and horizontally
• Test this on your phone, it's important for making sure the keyboard doesn't cover anything and native components look alright!

Testing on Phone

Run the program on your computer using npm run dev, then on your phone on different common browsers (Google Chrome, Firefox, and Safari if iPhone), go to https://[your IP address]:[port (probably 3000)]/page. Example: https://123.45.67.89:3000/login. Make sure both your phone and laptop are connected to the same WiFi.

How to find your computer's IP Address:

• Windows: ipconfig then scroll to Wireless LAN adapter Wi-Fi -> IPv4 Address
• Mac: ipconfig getifaddr en0

Don't hesitate to Slack me if you need any help or have any questions :D We can message or jump into a Huddle meeting as needed!