create onboarding pt1; need form logic

GTBitsOfGood · Sep 14, 2024 · ace09ae · ace09ae
1 parent 9b88cbf
commit ace09ae
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 38 deletions.
diff --git a/web/components/Onboarding/GetStarted.tsx b/web/components/Onboarding/GetStarted.tsx
@@ -7,8 +7,8 @@ interface Props {
 
 export default function GetStartedPage({ setPage }: Props) {
   return (
-    <div className="flex flex-col">
-      <div className="flex flex-col shrink-0 py-7 gap-4 items-center justify-center bg-onboarding-background">
+    <div className="flex flex-col flex-grow">
+      <div className="lg:hidden flex flex-col shrink-0 py-7 gap-4 items-center justify-center bg-onboarding-background">
         <img
           src="/MBBLogo.svg"
           className="stroke-[2.1px] object-contain sm:stroke-[3px]"
@@ -31,6 +31,7 @@ export default function GetStartedPage({ setPage }: Props) {
           <strong className="font-semibold">[email protected]</strong>{" "}
           or call us at <strong className="font-semibold">678-404-1397</strong>.
         </p>
+        <div className="flex-grow" />
         <Button type="primary" text="Get Started" onClick={() => setPage(1)} />
       </div>
     </div>

diff --git a/web/components/Onboarding/LiabilityWaiver.tsx b/web/components/Onboarding/LiabilityWaiver.tsx
@@ -1,20 +1,23 @@
 import Button from "@components/atoms/Button";
 import TextInput from "@components/atoms/TextInput";
+import { OnboardingFormData } from "@lib/types/users";
 import { Dispatch, SetStateAction, useState } from "react";
+import { UseFormReturn } from "react-hook-form";
 
 interface Props {
   setPage: Dispatch<SetStateAction<number>>;
+  form: UseFormReturn<OnboardingFormData>;
 }
 
-export default function LiabilityWaiverPage({ setPage }: Props) {
+export default function LiabilityWaiverPage({ setPage, form }: Props) {
   return (
-    <div className="flex flex-col px-6 gap-3">
+    <div className="flex flex-col px-6 gap-3 flex-grow">
       <h1 className="text-primary-text text-2xl font-bold font-opensans">
         Liability Waiver
       </h1>
-      <div className="bg-[#C4C4C4] overflow-auto shrink-0 pt-2 px-3">
-        {/* Waiver here */}
+      <div className="bg-secondary-background border border-light-gray overflow-auto shrink-0 pt-2 px-3 max-h-[300px]">
         <p>
+          {/* TODO: Full Waiver here */}
           PARTICIPANT RELEASE AND WAIVER OF LIABILITY In consideration for the
           willingness of Motherhood Beyond Bars (“Organization”) to accept the
           individual signing below (“Participant”), as a participant in its
@@ -41,6 +44,7 @@ export default function LiabilityWaiverPage({ setPage }: Props) {
         <label>Date</label>
         <TextInput /> {/* TODO: <DatePicker /> */}
       </div>
+      <div className="flex-grow" />
       <Button text="Next" onClick={() => setPage((prev) => prev + 1)} />
     </div>
   );

diff --git a/web/components/Onboarding/PreferredContact.tsx b/web/components/Onboarding/PreferredContact.tsx
@@ -1,9 +1,26 @@
-import { useState } from "react";
+import Button from "@components/atoms/Button";
+import { OnboardingFormData } from "@lib/types/users";
+import { Dispatch, SetStateAction } from "react";
+import { UseFormReturn } from "react-hook-form";
 
 interface Props {
-  setPage: (arg0: any) => any;
+  setPage: Dispatch<SetStateAction<number>>;
+  form: UseFormReturn<OnboardingFormData>;
 }
 
-export default function PreferredContactPage({ setPage }: Props) {
-  return <div></div>;
+export default function PreferredContactPage({ setPage, form }: Props) {
+  return (
+    <div className="flex flex-col px-6 gap-3 flex-grow">
+      <h1 className="text-primary-text text-2xl font-bold font-opensans">
+        What’s the best way to contact you?
+      </h1>
+      <input type="radio" />
+      <input type="radio" />
+      <input type="radio" />
+      <div className="flex-grow" />
+      <Button text="Finish" onClick={() => {
+        // TODO: submit form data
+      }} />
+    </div>
+  );
 }
diff --git a/web/components/Onboarding/ShippingAddress.tsx b/web/components/Onboarding/ShippingAddress.tsx
@@ -1,9 +1,49 @@
-import { useState } from "react";
+import Button from "@components/atoms/Button";
+import TextInput from "@components/atoms/TextInput";
+import { OnboardingFormData } from "@lib/types/users";
+import { Dispatch, SetStateAction } from "react";
+import { UseFormReturn } from "react-hook-form";
 
 interface Props {
-  setPage: (arg0: any) => any;
+  setPage: Dispatch<SetStateAction<number>>;
+  form: UseFormReturn<OnboardingFormData>;
 }
 
-export default function ShippingAddressPage({ setPage }: Props) {
-  return <div></div>;
+export default function ShippingAddressPage({ setPage, form }: Props) {
+  return (
+    <div className="flex flex-col px-6 gap-3 flex-grow">
+      <h1 className="text-primary-text text-2xl font-bold font-opensans">
+        Shipping Address
+      </h1>
+      <p>Let us know where we can deliver your requested supplies!</p>
+      <div>
+        <label>Street Address</label>
+        <TextInput
+          placeholder="Street number and name"
+          formValue={form.register("address")}
+        />
+      </div>
+      <div>
+        <label>
+          Apartment/Suite <span className="text-dark-gray">(Optional)</span>
+        </label>
+        <TextInput placeholder="Apartment number, suite number" />
+      </div>
+      <div>
+        <label>City</label>
+        <TextInput />
+      </div>
+      <div>
+        <label>State</label>
+        <select /> {/* TODO: replace with Dropdown */}
+      </div>
+      <div>
+        <label>Zip Code</label>
+        <TextInput />
+      </div>
+      <input type="checkbox" /> {/* TODO: replace with <CheckboxText /> */}
+      <div className="flex-grow" />
+      <Button text="Next" onClick={() => setPage((prev) => prev + 1)} />
+    </div>
+  );
 }
diff --git a/web/lib/types/users.ts b/web/lib/types/users.ts
@@ -24,3 +24,9 @@ export type Caregiver = Account & {
   contact: string;
   babies: DocumentReference[];
 };
+
+export type OnboardingFormData = Omit<
+  Caregiver,
+  "id" | "email" | "password" | "firstName" | "lastName" | "phoneNumber" | 'babies'
+>;
+
diff --git a/web/pages/caregiver/onboarding.tsx b/web/pages/caregiver/onboarding.tsx
@@ -9,39 +9,64 @@ import PreferredContactPage from "@components/Onboarding/PreferredContact";
 import BackButton from "@components/atoms/BackButton";
 import ProgressBar from "@components/atoms/ProgressBar";
 import Button from "@components/atoms/Button";
+import { OnboardingFormData } from "@lib/types/users";
+import { useForm } from "react-hook-form";
 
 export default function CaregiverOnboarding() {
   // Page 0 - Let's Get Started, Page 1 - Household Information, Page 2 - Liability Waiver,
   // Page 3 - Request Items, Page 4 - Shipping Address, Page 5 - Contact Page
   const [page, setPage] = useState(0);
+  const form = useForm<OnboardingFormData>();
 
   return (
-    <div className="flex flex-col w-full gap-7">
-      {page > 0 && (
-        <div className="flex bg-white sticky top-0 items-center justify-between px-7 py-[1.125rem]">
-          <BackButton
-            onClick={() => setPage((prev) => Math.max(0, prev - 1))}
+    <div className="flex w-full">
+      <div className="hidden lg:flex grow flex-col shrink-0 py-7 px-6 gap-4 items-center justify-center bg-onboarding-background2">
+        <img
+          src="/MBBLogo.svg"
+          className="stroke-[2.1px] object-contain sm:stroke-[3px]"
+        />
+        <span className="text-white text-4xl font-bold uppercase tracking-[1.08px]">
+          motherhood
+        </span>
+        <span className="text-white text-4xl font-bold uppercase tracking-[1.08px]">
+          beyond bars
+        </span>
+        <span className="text-white text-[2rem] font-opensans tracking-[0.96px]">
+          Caregiver
+        </span>
+      </div>
+      <div className="flex lg:items-center justify-center grow">
+        <div className="flex flex-col lg:max-w-[600px] gap-7">
+          {page > 0 && (
+            <div className="flex bg-white sticky top-0 items-center justify-between px-7 py-[1.125rem]">
+              <BackButton
+                onClick={() => setPage((prev) => Math.max(0, prev - 1))}
+              />
+              <ProgressBar progress={(page / 5) * 100} />
+            </div>
+          )}
+          {
+            page == 0 ? (
+              <GetStartedPage setPage={setPage} />
+            ) : page == 1 ? (
+              <HouseholdInfoPage setPage={setPage} />
+            ) : page == 2 ? (
+              <LiabilityWaiverPage setPage={setPage} form={form} />
+            ) : page == 3 ? (
+              <RequestItemsPage setPage={setPage} />
+            ) : page == 4 ? (
+              <ShippingAddressPage setPage={setPage} form={form} />
+            ) : page == 5 ? (
+              <PreferredContactPage setPage={setPage} form={form} />
+            ) : null
+            // Save data and route to next page
+          }
+          <Button
+            text="debug next"
+            onClick={() => setPage((prev) => Math.min(5, prev + 1))}
           />
-          <ProgressBar progress={(page / 5) * 100} />
         </div>
-      )}
-      {
-        page == 0 ? (
-          <GetStartedPage setPage={setPage} />
-        ) : page == 1 ? (
-          <HouseholdInfoPage setPage={setPage} />
-        ) : page == 2 ? (
-          <LiabilityWaiverPage setPage={setPage} />
-        ) : page == 3 ? (
-          <RequestItemsPage setPage={setPage} />
-        ) : page == 4 ? (
-          <ShippingAddressPage setPage={setPage} />
-        ) : page == 5 ? (
-          <PreferredContactPage setPage={setPage} />
-        ) : null
-        // Save data and route to next page
-      }
-      <Button text="debug next" onClick={() => setPage((prev) => Math.min(5, prev + 1))} />
+      </div>
     </div>
   );
 }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -16,6 +16,8 @@ module.exports = {
           "radial-gradient(115.79% 108.31% at 24.4% 30.17%, #EDB1CB 0.01%, #B14378 92.53%)",
         "onboarding-background":
           "radial-gradient(147.14% 98.02% at 24.4% 30.17%, #EDB1CB 0%, #B14378 100%)",
+        "onboarding-background2":
+          "radial-gradient(86.27% 87.14% at 24.4% 30.17%, #EDB1CB 0.01%, #B14378 79.82%)",
       },
       fontFamily: {
         sans: ["Open Sans", ...defaultTheme.fontFamily.sans],