diff --git a/web/components/Onboarding/GetStarted.tsx b/web/components/Onboarding/GetStarted.tsx index 8ed8c39..49b9431 100644 --- 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 ( -
-
+
+
info@motherhoodbeyond.org{" "} or call us at 678-404-1397.

+
diff --git a/web/components/Onboarding/LiabilityWaiver.tsx b/web/components/Onboarding/LiabilityWaiver.tsx index 06ab373..c96d379 100644 --- 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>; + form: UseFormReturn; } -export default function LiabilityWaiverPage({ setPage }: Props) { +export default function LiabilityWaiverPage({ setPage, form }: Props) { return ( -
+

Liability Waiver

-
- {/* Waiver here */} +

+ {/* 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) { {/* TODO: */}

+
); diff --git a/web/components/Onboarding/PreferredContact.tsx b/web/components/Onboarding/PreferredContact.tsx index 5000b8f..4412ac9 100644 --- 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>; + form: UseFormReturn; } -export default function PreferredContactPage({ setPage }: Props) { - return
; +export default function PreferredContactPage({ setPage, form }: Props) { + return ( +
+

+ What’s the best way to contact you? +

+ + + +
+
+ ); } diff --git a/web/components/Onboarding/ShippingAddress.tsx b/web/components/Onboarding/ShippingAddress.tsx index 6e0000a..742ced8 100644 --- 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>; + form: UseFormReturn; } -export default function ShippingAddressPage({ setPage }: Props) { - return
; +export default function ShippingAddressPage({ setPage, form }: Props) { + return ( +
+

+ Shipping Address +

+

Let us know where we can deliver your requested supplies!

+
+ + +
+
+ + +
+
+ + +
+
+ + {/* TODO: replace with */} +
+
+ ); } diff --git a/web/lib/types/users.ts b/web/lib/types/users.ts index 18fc313..cf905f7 100644 --- 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 index f83c7de..b7aaa26 100644 --- 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(); return ( -
- {page > 0 && ( -
- setPage((prev) => Math.max(0, prev - 1))} +
+
+ + + motherhood + + + beyond bars + + + Caregiver + +
+
+
+ {page > 0 && ( +
+ setPage((prev) => Math.max(0, prev - 1))} + /> + +
+ )} + { + page == 0 ? ( + + ) : page == 1 ? ( + + ) : page == 2 ? ( + + ) : page == 3 ? ( + + ) : page == 4 ? ( + + ) : page == 5 ? ( + + ) : null + // Save data and route to next page + } +
- )} - { - page == 0 ? ( - - ) : page == 1 ? ( - - ) : page == 2 ? ( - - ) : page == 3 ? ( - - ) : page == 4 ? ( - - ) : page == 5 ? ( - - ) : null - // Save data and route to next page - } -
); } diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 1bda2e3..1a6d437 100644 --- 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],