[FE] Second 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 Household Information page (Page 2) and Request Items (Page 4).

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
  • For the Request Items page specifically, since this page is long on mobile, make sure that the page scrolls down as the user advances though it (clicks cards or text boxes at the bottom of the screen) so that the keyboard doesn't cover any content and that the user can see the next items.

Components

Create the following components on your dedicated component branch in the directory web/components, these components are used throughout this ticket, along with #122 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

• Text Area (create components/atoms/TextArea.tsx) - shouldn't be too large by default, users should be able to extend downwards but not outwards, see Additional requests or items in Request Items page for styling
• Icon Button (edit `components/atoms/Button.tsx) - style the ability to add an icon to a button, see Do you have your own car seat? modal in Request Items page for styling
• Checkbox (create components/atoms/Checkbox.tsx) - create only a checkbox component that is clickable, has a state for being checked or unchecked, and a disabled checked state
  • This will be used in other components throughout the codebase
• Checkbox cards (create components/molecule/CheckboxCard.tsx) - Use checkbox component to create reusable checkbox cards, see Request Items page for styling. Remember that these need to be styled for both mobile and web, and that the user should be able to click anywhere on the card to toggle the checkbox on and off
• Modal (create components/atoms/Modal.tsx) - create the outline of a modal, so a div that wraps a modal where the contents of the modal are determined outside of the component. The screen should become dark when the modal appears, and the modal should have a close function where it will close the modal if the user clicks in the dark area. See Do you have your own car seat? modal in Request Items page for styling

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!