use new types

package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@better-giving/assets": "1.0.18",
+    "@better-giving/registration": "1.0.1",
     "@gsap/react": "2.1.1",
     "@headlessui/react": "2.1.0",
     "@hookform/error-message": "2.0.1",
@@ -65,6 +66,7 @@
     "react-router-dom": "6.23.0",
     "swiper": "11.1.4",
     "type-fest": "4.20.0",
+    "valibot": "0.42.0",
     "yup": "1.4.0"
   },
   "devDependencies": {

src/pages/Registration/Resume/useSubmit.ts

@@ -25,7 +25,7 @@ export default function useSubmit() {
       storeRegistrationReference(reference);
 
       const { state, nextStep } = getRegistrationState(data);
-      const init = state.data.init;
+      const init = state.data;
 
       navigate(`../${regRoutes.steps}/${nextStep}`, { state: init });
     } catch (err) {

src/pages/Registration/Steps/Banking/Banking.tsx

@@ -27,7 +27,7 @@ function Banking() {
           </span>
         </p>
         <ExtLink
-          href={data.banking.BankStatementFile.publicUrl}
+          href={data.banking.bank_statement.publicUrl}
           className="flex items-center gap-2 text-blue hover:text-blue-d1"
         >
           <Icon type="ExternalLink" />

src/pages/Registration/Steps/Banking/useSubmit.ts

@@ -19,9 +19,9 @@ export default function useSubmit() {
       });
 
       await updateReg({
-        reference: data.init.reference,
+        id: data.init.id,
         type: "banking",
-        BankStatementFile: bankStatementPreview.bankStatementFile[0],
+        bank_statement: bankStatementPreview.bankStatementFile[0],
         wise_recipient_id: recipient.id,
       }).unwrap();
 

src/pages/Registration/Steps/ContactDetails/Form/index.tsx

@@ -23,30 +23,35 @@ export default function Form({ classes = "" }: { classes?: string }) {
       </p>
       <h3 className="mb-4">Personal information</h3>
       <Field<FV>
-        name="FirstName"
+        name="first_name"
         label="First name"
         placeholder="e.g. John"
         required
         classes={{ container: "mb-4" }}
       />
       <Field<FV>
-        name="LastName"
+        name="last_name"
         label="Last name"
         placeholder="e.g. Doe"
         required
         classes={{ container: "mb-4" }}
       />
       <Field<FV>
-        name="PhoneNumber"
+        name="contact_number"
         label="Phone number"
         placeholder="000000000"
         required={false}
         classes={{ container: "mb-4" }}
       />
-      <Field<FV> name="Email" label="E-mail address" required disabled />
+      <Field<FV>
+        name="registrant_id"
+        label="E-mail address"
+        required
+        disabled
+      />
       <h3 className="mt-8 mb-4">Organization information</h3>
       <Field<FV>
-        name="OrganizationName"
+        name="org_name"
         label="Name of your organization"
         placeholder="Organization name"
         classes={{ container: "mb-4" }}
@@ -55,15 +60,15 @@ export default function Form({ classes = "" }: { classes?: string }) {
       <Label required className="mb-2">
         What's your role within the organization?
       </Label>
-      <Selector<FV, "Role", ContactRoles>
-        name="Role"
+      <Selector<FV, "org_role", ContactRoles>
+        name="org_role"
         options={roleOptions}
         classes={{ options: "text-sm" }}
       >
         {({ value }) =>
           value === "other" && (
             <Field<FV>
-              name="OtherRole"
+              name="other_role"
               label="Specify your role"
               required
               classes={{ container: "mt-4" }}
@@ -76,24 +81,24 @@ export default function Form({ classes = "" }: { classes?: string }) {
       <Label required className="mb-2">
         How did you find about us?
       </Label>
-      <Selector<FV, "ReferralMethod", ReferralMethods>
-        name="ReferralMethod"
+      <Selector<FV, "referral_method", ReferralMethods>
+        name="referral_method"
         options={referralOptions}
         classes={{ options: "text-sm" }}
       >
         {({ value }) => (
           <>
             {value === "other" && (
               <Field<FV>
-                name="OtherReferralMethod"
+                name="other_referral_method"
                 label="Please provide additional information"
                 required
                 classes={{ container: "mt-4" }}
               />
             )}
             {value === "referral" && (
               <Field<FV>
-                name="ReferralCode"
+                name="referral_code"
                 label="Referral Code"
                 required
                 classes={{ container: "mt-4" }}
@@ -103,7 +108,7 @@ export default function Form({ classes = "" }: { classes?: string }) {
         )}
       </Selector>
       <Field<FV>
-        name="Goals"
+        name="goals"
         label="Goals"
         placeholder={`What is your goal working with ${APP_NAME}?`}
         classes={{ container: "mt-4" }}

src/pages/Registration/Steps/ContactDetails/Form/useSubmit.ts

@@ -24,24 +24,14 @@ export default function useSubmit() {
       return navigate(`../${steps.orgDetails}`, { state: init }); // go to latest step
     }
 
+    const { org_role, referral_method, id, registrant_id, ...rest } = fv;
+
     const result = await updateReg({
-      type: "contact-details",
-      reference: fv.PK,
-      ContactPerson: {
-        FirstName: fv.FirstName,
-        LastName: fv.LastName,
-        Email: fv.Email,
-        Goals: fv.Goals,
-        PhoneNumber: fv.PhoneNumber,
-        ReferralMethod: fv.ReferralMethod.value,
-        OtherReferralMethod: fv.OtherReferralMethod,
-        ReferralCode: fv.ReferralCode,
-        Role: fv.Role.value,
-        OtherRole: fv.OtherRole,
-      },
-      Registration: {
-        OrganizationName: fv.OrganizationName,
-      },
+      type: "contact",
+      ...rest,
+      org_role: org_role.value,
+      referral_method: referral_method.value,
+      id,
     });
 
     if ("error" in result) {

src/pages/Registration/Steps/ContactDetails/index.tsx

@@ -21,26 +21,27 @@ function ContactDetails() {
     defaultValues: contact
       ? {
           ...contact,
-          PK: init.reference,
-          Role: toRoleOption(contact.Role),
-          ReferralMethod: toReferralOption(
-            contact.ReferralMethod === "angel-alliance"
+          id: init.id,
+          registrant_id: init.registrant_id,
+          org_role: toRoleOption(contact.org_role),
+          referral_method: toReferralOption(
+            contact.referral_method === "better-giving-alliance"
               ? "better-giving-alliance"
-              : contact.ReferralMethod
+              : contact.referral_method
           ),
-          OrganizationName: contact.orgName,
         }
       : {
-          PK: init.reference,
-          Email: init.email,
-          Role: { value: "", label: roles[""] },
-          ReferralMethod: {
+          id: init.id,
+          registrant_id: init.registrant_id,
+          org_role: { value: "", label: roles[""] },
+          referral_method: {
             value: "",
             label: referralMethods[""],
           },
-          FirstName: firstName,
-          LastName: lastName,
-          OrganizationName: init.claim?.name,
+          first_name: firstName,
+          last_name: lastName,
+          org_name: init.claim?.name ?? "",
+          goals: "",
         },
   });
 

src/pages/Registration/Steps/ContactDetails/schema.ts

@@ -7,8 +7,8 @@ import { type ObjectSchema, object, string } from "yup";
 import type { FormValues } from "./types";
 
 type Key = keyof FormValues;
-const roleKey: Key = "Role";
-const referralMethodKey: Key = "ReferralMethod";
+const roleKey: Key = "org_role";
+const referralMethodKey: Key = "referral_method";
 
 const otherRole = string()
   .trim()
@@ -28,14 +28,14 @@ const otherReferralMethod = (referralMethod: ReferralMethods) =>
     );
 
 export const schema = object<any, SchemaShape<FormValues>>({
-  OrganizationName: requiredString.trim(),
-  FirstName: requiredString.trim(),
-  LastName: requiredString.trim(),
+  org_name: requiredString.trim(),
+  first_name: requiredString.trim(),
+  last_name: requiredString.trim(),
   //email: disabled: already validated at signup
-  Goals: requiredString.trim(),
-  Role: optionType({ required: true }),
-  ReferralMethod: optionType({ required: true }),
-  OtherReferralMethod: otherReferralMethod("other"),
-  ReferralCode: otherReferralMethod("referral"),
-  OtherRole: otherRole,
+  goals: requiredString.trim(),
+  org_role: optionType({ required: true }),
+  referral_method: optionType({ required: true }),
+  other_referral_method: otherReferralMethod("other"),
+  referral_code: otherReferralMethod("referral"),
+  other_role: otherRole,
 }) as ObjectSchema<FormValues>;

src/pages/Registration/Steps/ContactDetails/types.ts

@@ -1,18 +1,11 @@
 import type { OverrideProperties } from "type-fest";
-import type {
-  ContactDetails,
-  ContactRoles,
-  InitContact,
-  OrgDataForStep1,
-  ReferralMethods,
-} from "types/aws";
+import type { ContactRoles, ReferralMethods, RegV2 } from "types/aws";
 import type { OptionType } from "types/components";
 
 export type FormValues = OverrideProperties<
-  ContactDetails & OrgDataForStep1,
+  RegV2.Contact & Pick<RegV2.Init, "registrant_id" | "id">,
   {
-    Role: OptionType<ContactRoles>;
-    ReferralMethod: OptionType<ReferralMethods>;
+    org_role: OptionType<ContactRoles>;
+    referral_method: OptionType<ReferralMethods>;
   }
-> &
-  Pick<InitContact, "Email" | "PK">;
+>;

src/pages/Registration/Steps/Dashboard/EndowmentStatus.tsx

@@ -3,14 +3,13 @@ import LoadText from "components/LoadText";
 import { steps } from "pages/Registration/routes";
 import type { MouseEventHandler } from "react";
 import { Link } from "react-router-dom";
-import type { RegistrationStatus } from "types/aws";
+import type { RegV2 } from "types/aws";
 import { useRegState } from "../StepGuard";
 
 type Props = {
   isSubmitting: boolean;
-  status: Exclude<RegistrationStatus, "Active">;
+  status: Exclude<RegV2.Submission, object>;
   onSubmit: MouseEventHandler<HTMLButtonElement>;
-  endowId?: number;
   classes?: string;
 };
 
@@ -23,7 +22,7 @@ export default function EndowmentStatus({
   const { data } = useRegState<3>();
 
   switch (status) {
-    case "Rejected":
+    case "rejected":
       return (
         <div className={`max-sm:grid text-red dark:text-red-l3 ${classes}`}>
           <p className="mb-6 max-sm:grid justify-items-center gap-2">
@@ -47,7 +46,7 @@ export default function EndowmentStatus({
         </div>
       );
 
-    case "Under Review":
+    case "in-review":
       return (
         <div
           className={`max-sm:grid justify-items-center gap-2 text-navy-l1 dark:text-navy-l2 ${classes}`}

src/pages/Registration/Steps/Dashboard/index.tsx

@@ -2,7 +2,7 @@ import Prompt from "components/Prompt";
 import { regRoutes } from "constants/routes";
 import { useErrorContext } from "contexts/ErrorContext";
 import { useModalContext } from "contexts/ModalContext";
-import type { CompleteRegistration } from "pages/Registration/types";
+import type { CompleteReg } from "pages/Registration/types";
 import { Navigate } from "react-router-dom";
 import { useSubmitMutation } from "services/aws/registration";
 import { useRegState, withStepGuard } from "../StepGuard";
@@ -16,9 +16,9 @@ function Dashboard() {
   const { showModal } = useModalContext();
   const { handleError } = useErrorContext();
 
-  const submit = async ({ init }: CompleteRegistration) => {
+  const submit = async ({ init }: CompleteReg) => {
     try {
-      await submitApplication(init.reference).unwrap();
+      await submitApplication(init.id).unwrap();
       if (window.hasOwnProperty("lintrk")) {
         (window as any).lintrk("track", { conversion_id: 12807754 });
       }
@@ -37,10 +37,10 @@ function Dashboard() {
     }
   };
 
-  const { status } = data;
-  const isStepDisabled = isSubmitting || status === "Under Review";
+  const { submission } = data;
+  const isStepDisabled = isSubmitting || submission === "in-review";
 
-  if (status === "Active") {
+  if (typeof submission === "object") {
     return <Navigate to={`../../${regRoutes.success}`} state={data} />;
   }
 
@@ -61,8 +61,7 @@ function Dashboard() {
       <EndowmentStatus
         isSubmitting={isSubmitting}
         onSubmit={() => submit(data)}
-        status={status}
-        endowId={data.endowId}
+        status={submission}
         classes="mt-6"
       />
     </div>

src/pages/Registration/Steps/Documentation/Documentation.tsx

@@ -1,3 +1,4 @@
+import { isIrs501c3 } from "types/aws";
 import { useRegState, withStepGuard } from "../StepGuard";
 import FSADocumentation from "./FSA";
 import NonFSA from "./NonFSA";
@@ -6,16 +7,16 @@ function Documentation() {
   const { data } = useRegState<4>();
 
   //documentation is previously completed
-  if (data.documentation && data.documentation.DocType === "FSA") {
-    return <FSADocumentation doc={data.documentation} />;
+  if (data.docs && !isIrs501c3(data.docs)) {
+    return <FSADocumentation doc={data.docs} />;
   }
 
-  if (data.documentation && data.documentation.DocType === "Non-FSA") {
-    return <NonFSA doc={data.documentation} />;
+  if (data.docs && isIrs501c3(data.docs)) {
+    return <NonFSA doc={data.docs} />;
   }
 
   //if not previously completed, depend on fsaInquiry
-  if (data.fsaInquiry.AuthorizedToReceiveTaxDeductibleDonations) {
+  if (data.irs501c3) {
     return <NonFSA doc={undefined} />;
   }