Onboarding Part 1

web/components/Icons/DownloadIcon.tsx

@@ -8,8 +8,8 @@ const DownloadIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M4.46967 9.7803C4.76256 10.0732 5.23744 10.0732 5.53033 9.7803L9.2803 6.03033C9.5732 5.73744 9.5732 5.26256 9.2803 4.96967C8.9874 4.67678 8.5126 4.67678 8.2197 4.96967L5.75 7.43934V0.75C5.75 0.33579 5.41421 0 5 0C4.58579 0 4.25 0.33579 4.25 0.75V7.43934L1.78033 4.96967C1.48744 4.67678 1.01256 4.67678 0.71967 4.96967C0.42678 5.26256 0.42678 5.73744 0.71967 6.03033L4.46967 9.7803ZM0.75 12.0001C0.33579 12.0001 0 12.3359 0 12.7501C0 13.1643 0.33579 13.5001 0.75 13.5001H9.25C9.6642 13.5001 10 13.1643 10 12.7501C10 12.3359 9.6642 12.0001 9.25 12.0001H0.75Z"
         fill="#304CD1"
       />

web/components/Icons/ErrorTriangle.tsx

@@ -0,0 +1,16 @@
+export default function ErrorTriangle() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+    >
+      <path
+        d="M14.1782 13.9994H1.8229C1.58473 13.9994 1.36465 13.8723 1.24556 13.6661C1.12648 13.4598 1.12648 13.2057 1.24557 12.9994L7.4229 2.33273C7.54208 2.1268 7.76197 2 7.9999 2C8.23783 2 8.45772 2.1268 8.5769 2.33273L14.7542 12.9994C14.8733 13.2056 14.8733 13.4595 14.7544 13.6658C14.6355 13.872 14.4156 13.9991 14.1776 13.9994H14.1782ZM7.33423 10.6661V11.9994H7.95623H7.99957H8.0429H8.66623V10.6661H7.33423ZM7.33423 5.99939V9.33273H8.66757V5.99939H7.33423Z"
+        className="fill-[#FF3939]"
+      />
+    </svg>
+  );
+}

web/components/Icons/ImageIcon.tsx

@@ -8,8 +8,8 @@ const ImageIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M1.75 1.5C1.61193 1.5 1.5 1.61193 1.5 1.75V12.25C1.5 12.3881 1.61193 12.5 1.75 12.5H2.69087C2.70013 12.4897 2.70973 12.4795 2.71967 12.4696L8.79704 6.3922C9.45643 5.73281 10.5171 5.70631 11.2086 6.33195L14.5 9.3099V1.75C14.5 1.61193 14.3881 1.5 14.25 1.5H1.75ZM14.25 12.5H4.81056L9.85769 7.45286C9.95189 7.35867 10.1034 7.35488 10.2022 7.44426L14.5 11.3327V12.25C14.5 12.3881 14.3881 12.5 14.25 12.5ZM16 12.25V11.003V10.9972V1.75C16 0.7835 15.2165 0 14.25 0H1.75C0.783501 0 0 0.7835 0 1.75V12.25C0 13.2165 0.783502 14 1.75 14H14.25C15.2165 14 16 13.2165 16 12.25ZM5.5 5C5.5 5.27614 5.27614 5.5 5 5.5C4.72386 5.5 4.5 5.27614 4.5 5C4.5 4.72386 4.72386 4.5 5 4.5C5.27614 4.5 5.5 4.72386 5.5 5ZM7 5C7 6.10457 6.10457 7 5 7C3.89543 7 3 6.10457 3 5C3 3.89543 3.89543 3 5 3C6.10457 3 7 3.89543 7 5Z"
         fill="#666666"
       />

web/components/Icons/LeftChevronIcon.tsx

@@ -9,8 +9,8 @@ const LeftChevronIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M11.3381 18.9631C10.7889 19.5122 9.89855 19.5122 9.34938 18.9631L1.38063 10.9944C0.831458 10.4452 0.831458 9.5548 1.38063 9.00563L9.34938 1.03688C9.89855 0.487708 10.7889 0.487708 11.3381 1.03688C11.8872 1.58605 11.8872 2.47645 11.3381 3.02561L4.36373 10L11.3381 16.9744C11.8872 17.5236 11.8872 18.4139 11.3381 18.9631Z"
       />
     </svg>

web/components/Icons/LinkIcon.tsx

@@ -8,8 +8,8 @@ const LinkIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M6.77518 2.27518C6.6427 2.41735 6.57057 2.6054 6.574 2.7997C6.57743 2.994 6.65614 3.17938 6.79355 3.3168C6.93097 3.45421 7.11635 3.53292 7.31065 3.53635C7.50495 3.53978 7.693 3.46766 7.83518 3.33518L9.08518 2.08518C9.27098 1.89936 9.49158 1.75195 9.73438 1.65139C9.97718 1.55082 10.2374 1.49906 10.5002 1.49906C10.763 1.49906 11.0232 1.55082 11.266 1.65139C11.5088 1.75195 11.7294 1.89936 11.9152 2.08518C12.101 2.271 12.2484 2.4916 12.349 2.73438C12.4495 2.97717 12.5013 3.23739 12.5013 3.50018C12.5013 3.76297 12.4495 4.02318 12.349 4.26597C12.2484 4.50875 12.101 4.72935 11.9152 4.91518L9.41518 7.41518C9.22938 7.60113 9.00888 7.74865 8.76606 7.84929C8.52326 7.94994 8.26301 8.00175 8.00018 8.00175C7.73734 8.00175 7.47709 7.94994 7.23429 7.84929C6.9915 7.74865 6.77092 7.60113 6.58518 7.41518C6.443 7.2827 6.25495 7.21057 6.06065 7.214C5.86635 7.21743 5.68097 7.29614 5.54355 7.43355C5.40614 7.57097 5.32743 7.75635 5.324 7.95065C5.32057 8.14495 5.3927 8.333 5.52518 8.47518C5.85019 8.80022 6.23604 9.05808 6.6607 9.23398C7.08536 9.40988 7.54052 9.50038 8.00018 9.50038C8.45983 9.50038 8.91499 9.40988 9.33968 9.23398C9.76428 9.05808 10.1502 8.80022 10.4752 8.47518L12.9752 5.97518C13.6316 5.31876 14.0004 4.42848 14.0004 3.50018C14.0004 2.57187 13.6316 1.68159 12.9752 1.02518C12.3188 0.368763 11.4285 0 10.5002 0C9.57188 0 8.68159 0.368763 8.02517 1.02518L6.77518 2.27518ZM2.08518 11.9152C1.89922 11.7294 1.7517 11.5089 1.65106 11.2661C1.55041 11.0233 1.4986 10.763 1.4986 10.5002C1.4986 10.2374 1.55041 9.97708 1.65106 9.73428C1.7517 9.49148 1.89922 9.27088 2.08518 9.08518L4.58518 6.58518C4.77092 6.39922 4.9915 6.2517 5.23429 6.15106C5.47709 6.05041 5.73734 5.9986 6.00018 5.9986C6.26301 5.9986 6.52326 6.05041 6.76606 6.15106C7.00885 6.2517 7.22943 6.39922 7.41518 6.58518C7.55735 6.71766 7.7454 6.78978 7.9397 6.78635C8.134 6.78292 8.31938 6.70421 8.4568 6.5668C8.59421 6.42938 8.67292 6.244 8.67635 6.0497C8.67978 5.8554 8.60766 5.66735 8.47518 5.52518C8.15017 5.20013 7.76431 4.94229 7.33965 4.76638C6.91499 4.59047 6.45983 4.49992 6.00018 4.49992C5.54052 4.49992 5.08536 4.59047 4.6607 4.76638C4.23604 4.94229 3.85019 5.20013 3.52518 5.52518L1.02518 8.02517C0.368763 8.68159 0 9.57188 0 10.5002C0 11.4285 0.368763 12.3188 1.02518 12.9752C1.68159 13.6316 2.57187 14.0004 3.50018 14.0004C4.42848 14.0004 5.31876 13.6316 5.97518 12.9752L7.22518 11.7252C7.35766 11.583 7.42978 11.395 7.42635 11.2007C7.42292 11.0064 7.34421 10.821 7.2068 10.6836C7.06938 10.5462 6.884 10.4674 6.6897 10.464C6.4954 10.4606 6.30735 10.5327 6.16518 10.6652L4.91518 11.9152C4.72943 12.1011 4.50885 12.2487 4.26606 12.3493C4.02326 12.45 3.76301 12.5018 3.50018 12.5018C3.23734 12.5018 2.97709 12.45 2.73429 12.3493C2.4915 12.2487 2.27092 12.1011 2.08518 11.9152Z"
         fill="#304CD1"
       />

web/components/Icons/PersonIcon.tsx

@@ -8,8 +8,8 @@ const PersonIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M8.50006 4.00023C8.50006 4.66327 8.23666 5.29915 7.76783 5.76799C7.29899 6.23684 6.6631 6.50023 6.00006 6.50023C5.33702 6.50023 4.70114 6.23684 4.2323 5.76799C3.76345 5.29915 3.50006 4.66327 3.50006 4.00023C3.50006 3.33719 3.76345 2.7013 4.2323 2.23246C4.70114 1.76362 5.33702 1.50023 6.00006 1.50023C6.6631 1.50023 7.29899 1.76362 7.76783 2.23246C8.23666 2.7013 8.50006 3.33719 8.50006 4.00023ZM8.56106 7.07323C9.19236 6.54687 9.64616 5.83881 9.86086 5.04537C10.0755 4.25192 10.0404 3.41163 9.76046 2.63881C9.48056 1.86599 8.96936 1.19816 8.29646 0.726167C7.62351 0.254187 6.82151 0.000976562 5.99956 0.000976562C5.17761 0.000976562 4.37561 0.254187 3.70268 0.726167C3.02975 1.19816 2.51855 1.86599 2.23865 2.63881C1.95874 3.41163 1.9237 4.25192 2.13831 5.04537C2.35292 5.83881 2.80675 6.54687 3.43806 7.07323C2.45365 7.53863 1.61433 8.26298 1.00996 9.16873C0.405593 10.0745 0.0589229 11.1275 0.00706294 12.2152C0.00224294 12.4112 0.074343 12.6013 0.207943 12.7447C0.341533 12.8882 0.525993 12.9737 0.721833 12.9828C0.917663 12.992 1.10929 12.9241 1.25568 12.7937C1.40207 12.6633 1.49159 12.4808 1.50506 12.2852C1.55958 11.1297 2.05696 10.0396 2.89397 9.24123C3.73097 8.44276 4.8433 7.9973 6.00006 7.9973C7.15682 7.9973 8.26916 8.44276 9.10616 9.24123C9.94316 10.0396 10.4406 11.1297 10.4951 12.2852C10.4976 12.3851 10.5199 12.4834 10.5609 12.5745C10.6019 12.6656 10.6607 12.7476 10.7338 12.8156C10.8069 12.8837 10.8929 12.9365 10.9866 12.9709C11.0804 13.0053 11.1801 13.0206 11.2799 13.0159C11.3797 13.0113 11.4775 12.9867 11.5677 12.9437C11.6578 12.9007 11.7385 12.8402 11.8049 12.7656C11.8714 12.691 11.9222 12.6039 11.9545 12.5094C11.9869 12.4149 12 12.3148 11.9931 12.2152C11.9411 11.1274 11.5943 10.0743 10.9898 9.16853C10.3852 8.26278 9.54566 7.53849 8.56106 7.07323Z"
         fill="#666666"
       />

web/components/Icons/SmallDownChevron.tsx

@@ -1,5 +1,5 @@
 export default function SmallDownChevron() {
-	return (
+  return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="17"
@@ -8,11 +8,11 @@ export default function SmallDownChevron() {
       fill="none"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M13.0384 6.71967C13.3313 7.01256 13.3313 7.48744 13.0384 7.78033L8.78838 12.0303C8.49549 12.3232 8.02061 12.3232 7.72772 12.0303L3.47772 7.78033C3.18483 7.48744 3.18483 7.01256 3.47772 6.71967C3.77061 6.42678 4.24549 6.42678 4.53838 6.71967L8.25805 10.4393L11.9778 6.71967C12.2707 6.42678 12.7455 6.42678 13.0384 6.71967Z"
         className="fill-dark-gray"
       />
     </svg>
   );
-}
+}

web/components/Onboarding/ErrorToast.tsx

@@ -0,0 +1,39 @@
+import ErrorTriangle from "@components/Icons/ErrorTriangle";
+import { useState } from "react";
+
+interface Props {
+  text?: string;
+}
+
+export default function ErrorToast({ text }: Props) {
+  const [closed, setClosed] = useState(false);
+
+  return (
+    <>
+      {!closed && (
+        <div className="flex p-2 items-center justify-between rounded border border-[#E60606]">
+          <ErrorTriangle />
+          <p className="text-[#E60606]">
+            {text || "Please fill in all required fields."}
+          </p>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+            className="cursor-pointer"
+            onClick={() => setClosed(true)}
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M0.720011 0.720152C0.860631 0.579702 1.05126 0.500812 1.25001 0.500812C1.44876 0.500812 1.63938 0.579702 1.78001 0.720152L5.00001 3.94015L8.22001 0.720152C8.28871 0.646462 8.37151 0.587362 8.46351 0.546372C8.55551 0.505382 8.65481 0.483342 8.75551 0.481562C8.85621 0.479782 8.95621 0.498312 9.04961 0.536032C9.14301 0.573752 9.22781 0.629892 9.29901 0.701112C9.37031 0.772332 9.42641 0.857172 9.46411 0.950552C9.50181 1.04394 9.52041 1.14397 9.51861 1.24467C9.51681 1.34538 9.49481 1.44469 9.45381 1.53669C9.41281 1.62869 9.35371 1.71149 9.28001 1.78015L6.06001 5.00015L9.28001 8.22015C9.35371 8.28885 9.41281 8.37165 9.45381 8.46365C9.49481 8.55565 9.51681 8.65495 9.51861 8.75565C9.52041 8.85635 9.50181 8.95635 9.46411 9.04975C9.42641 9.14315 9.37031 9.22795 9.29901 9.29915C9.22781 9.37045 9.14301 9.42655 9.04961 9.46425C8.95621 9.50195 8.85621 9.52055 8.75551 9.51875C8.65481 9.51695 8.55551 9.49495 8.46351 9.45395C8.37151 9.41295 8.28871 9.35385 8.22001 9.28015L5.00001 6.06015L1.78001 9.28015C1.63783 9.41265 1.44978 9.48475 1.25548 9.48135C1.06118 9.47785 0.875801 9.39915 0.738381 9.26175C0.600971 9.12435 0.522261 8.93895 0.518831 8.74465C0.515401 8.55035 0.587531 8.36235 0.720011 8.22015L3.94001 5.00015L0.720011 1.78015C0.579561 1.63953 0.500671 1.4489 0.500671 1.25015C0.500671 1.0514 0.579561 0.860782 0.720011 0.720152Z"
+              fill="#E60606"
+            />
+          </svg>
+        </div>
+      )}
+    </>
+  );
+}

web/components/Onboarding/GetStarted.tsx

@@ -1,9 +1,38 @@
-import { useState } from "react";
+import { Dispatch, SetStateAction } from "react";
+import Button from "@components/atoms/Button";
 
 interface Props {
-  setPage: (arg0: any) => any;
+  setPage: Dispatch<SetStateAction<number>>;
 }
 
 export default function GetStartedPage({ setPage }: Props) {
-  return <div></div>;
+  return (
+    <div className="flex flex-col w-[90%] sm:w-[60%] py-6 px-2 sm:p-7 gap-[1.125rem]">
+      <h1 className="text-primary-text text-2xl font-bold font-opensans sm:text-center">
+        Let&#39;s get started
+      </h1>
+      <p className="sm:text-center">
+        Motherhood Beyond Bars is here to provide whole family support for
+        mothers, infants, and caregivers like yourself!
+      </p>
+      <p className="sm:text-center">
+        Before we get started, we&#39;ll need to collect some information to
+        best meet your needs. If you have any questions, please email us at{" "}
+        <strong className="font-semibold">
+          info@
+          <wbr />
+          mother
+          <wbr />
+          hood
+          <wbr />
+          beyond
+          <wbr />
+          .org
+        </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>
+  );
 }

web/components/Onboarding/LiabilityWaiver.tsx

@@ -1,9 +1,109 @@
-import { useState } from "react";
+import { Dispatch, SetStateAction } from "react";
+import { Controller, UseFormReturn } from "react-hook-form";
+
+import { OnboardingFormData } from "@lib/types/users";
+
+import Button from "@components/atoms/Button";
+import DatePicker from "@components/atoms/DatePicker";
+import TextInput from "@components/atoms/TextInput";
+import CheckboxText from "@components/molecules/CheckboxText";
+import ErrorToast from "./ErrorToast";
 
 interface Props {
-  setPage: (arg0: any) => any;
+  setPage: Dispatch<SetStateAction<number>>;
+  form: UseFormReturn<OnboardingFormData>;
 }
 
-export default function LiabilityWaiverPage({ setPage }: Props) {
-  return <div></div>;
+export default function LiabilityWaiverPage({ setPage, form }: Props) {
+  const agreeError = form.getFieldState("agreedToWaiver").error;
+  const dateError = form.getFieldState("agreedDate").error;
+  const signatureError = form.getFieldState("agreedSignature").error;
+  const hasError = !!(agreeError || dateError || signatureError);
+
+  return (
+    <div className="flex flex-col px-6 gap-3 flex-grow sm:items-center mb-8">
+      {/* TODO replace with Error banner and fix formatting */}
+      {agreeError && <ErrorToast text="Must agree to the Liability Waiver" />}
+      <h1 className="text-primary-text text-2xl font-bold font-opensans sm:text-center sm:mt-8">
+        Liability Waiver
+      </h1>
+      {/* TODO Pull waivers from database */}
+      <div className="bg-secondary-background border border-light-gray overflow-auto shrink-0 pt-2 px-3 max-h-[300px] sm:w-[80%]">
+        <p>
+          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
+          Infant and Caregiver Support program or Reentry and Reunification
+          program (the “Program”), and in consideration for Participant
+          accepting the Donated Items (as defined below), and for other good and
+          valuable consideration, the receipt and sufficiency of which are
+          acknowledged, Participant does freely, voluntarily and without duress
+          execute the following Release for and on behalf of him or herself and
+          his or her heirs, successors, beneficiaries and assigns: 1. Donated
+          Items. Participant acknowledges receipt from Organization of items,
+          including those described in the attached document, which may be
+          provided at any time during the Program (“Donated Items”).
+          Organization is providing the Donated Items at no charge. Participant
+          voluntarily accepts the Donated Items “As-Is.”
+        </p>
+      </div>
+      <Controller
+        control={form.control}
+        name="agreedToWaiver"
+        defaultValue={false}
+        rules={{
+          validate: (v) => (!v ? "Must aggree to the Liability Waiver" : true),
+        }}
+        render={({ field: { name, onBlur, onChange, ref, value } }) => (
+          <CheckboxText
+            label="I agree to the Liability Waiver"
+            value={value}
+            onChange={(v) => onChange(v)}
+          />
+        )}
+      />
+      <div className="sm:w-[60%]">
+        <div className="mb-2">
+          <TextInput
+            label="Signature"
+            error={form.formState.errors.agreedSignature?.message}
+            formValue={form.register("agreedSignature", {
+              validate: (v) => (!v ? "Address cannot be empty" : true),
+            })}
+          />
+        </div>
+        <div className="mb-2">
+          {/* TODO set default date to today */}
+          <Controller
+            control={form.control}
+            name="agreedDate"
+            rules={{
+              validate: (v) => (!v ? "Date cannot be empty" : true),
+            }}
+            render={({ field: { name, onBlur, onChange, ref, value } }) => (
+              <DatePicker
+                label="Date"
+                value={value}
+                onChange={(v) => onChange(v)}
+                error={form.formState.errors.agreedDate?.message}
+              />
+            )}
+          />
+        </div>
+
+        <Button
+          text="Next"
+          disabled={!!hasError}
+          onClick={async () => {
+            const isValid = await form.trigger(undefined, {
+              shouldFocus: true,
+            });
+            if (!isValid) return;
+
+            setPage((prev) => prev + 1);
+          }}
+        />
+      </div>
+    </div>
+  );
 }

web/components/Onboarding/PreferredContact.tsx

@@ -1,9 +1,78 @@
 import { useState } from "react";
+import { UseFormReturn } from "react-hook-form";
+
+import { updateCaregiver } from "db/actions/shared/Caregiver";
+import { auth } from "db/firebase";
+
+import { OnboardingFormData } from "@lib/types/users";
+
+import Button from "@components/atoms/Button";
 
 interface Props {
-  setPage: (arg0: any) => any;
+  form: UseFormReturn<OnboardingFormData>;
 }
 
-export default function PreferredContactPage({ setPage }: Props) {
-  return <div></div>;
+export default function PreferredContactPage({ form }: Props) {
+  const [submitting, setSubmitting] = useState(false);
+
+  return (
+    <div className="flex flex-col px-6 gap-3 flex-grow sm:justify-center sm:items-center text-base font-normal text-primary-text font-opensans">
+      <h1 className="text-2xl font-bold sm:text-center">
+        What&#39;s the best way to contact you?
+      </h1>
+      <div className="flex flex-col gap-2 mb-4">
+        <div className="flex items-center gap-2">
+          <input
+            type="radio"
+            id="email"
+            value="email"
+            {...form.register("contact")}
+          />
+          <label htmlFor="email">Email</label>
+        </div>
+        <div className="flex items-center gap-2">
+          <input
+            type="radio"
+            id="phone"
+            value="phone"
+            defaultValue="phone"
+            {...form.register("contact")}
+          />
+          <label htmlFor="phone">Phone</label>
+        </div>
+        <div className="flex items-center gap-2">
+          <input
+            type="radio"
+            id="text"
+            value="text"
+            {...form.register("contact")}
+          />
+          <label htmlFor="text">Text</label>
+        </div>
+      </div>
+      {/* TODO make sure this works with all info */}
+      <Button
+        text="Finish"
+        disabled={submitting}
+        onClick={async () => {
+          const {
+            saveAddress,
+            agreedToWaiver,
+            agreedDate,
+            agreedSignature,
+            ...caregiverUpdate
+          } = form.getValues();
+
+          if (!auth.currentUser) return;
+
+          setSubmitting(true);
+          try {
+            await updateCaregiver(auth.currentUser?.uid, caregiverUpdate);
+          } finally {
+            setSubmitting(false);
+          }
+        }}
+      />
+    </div>
+  );
 }