use registration package

package.json

@@ -32,7 +32,7 @@
   },
   "dependencies": {
     "@better-giving/assets": "1.0.18",
-    "@better-giving/registration": "1.0.1",
+    "@better-giving/registration": "1.0.8",
     "@gsap/react": "2.1.1",
     "@headlessui/react": "2.1.0",
     "@hookform/error-message": "2.0.1",

src/pages/Application/Loaded.tsx

@@ -1,34 +1,39 @@
+import type { Application } from "@better-giving/registration/approval";
+import { isIrs501c3, isRejected } from "@better-giving/registration/models";
 import ExtLink from "components/ExtLink";
 import Icon from "components/Icon";
 import { appRoutes } from "constants/routes";
 import { useModalContext } from "contexts/ModalContext";
 import type { PropsWithChildren } from "react";
 import { Link } from "react-router-dom";
-import type { ApplicationDetails } from "types/aws";
 import Container from "./Container";
 import Prompt from "./Prompt";
 
 const NA = "Not provided";
 
-export default function Loaded(props: ApplicationDetails) {
+export default function Loaded(props: Application) {
   const { showModal } = useModalContext();
-  const { ContactPerson: c, Registration: r, WiseRecipient: w } = props;
-  const doc = r.Documentation;
 
   const review = (verdict: "approve" | "reject") => () => {
-    showModal(Prompt, { verdict, uuid: c.PK, orgName: r.OrganizationName });
+    showModal(Prompt, {
+      verdict,
+      uuid: props.id,
+      orgName: props.contact.org_name,
+    });
   };
 
   const prevVerdict =
-    r.RegistrationStatus === "Active" || r.RegistrationStatus === "Rejected"
-      ? r.RegistrationStatus
-      : null;
+    props.status === "02"
+      ? "approved"
+      : props.status === "03"
+        ? "rejected"
+        : null;
 
-  const claim = doc.DocType === "Non-FSA" ? doc.Claim : undefined;
+  const claim = isIrs501c3(props.docs) ? props.docs.claim : null;
 
   return (
     <>
-      <h3 className="text-lg">{r.OrganizationName}</h3>
+      <h3 className="text-lg">{props.contact.org_name}</h3>
       {claim && (
         <ExtLink
           className="-mt-7 justify-self-start text-sm rounded text-blue-d1 hover:underline"
@@ -40,68 +45,72 @@ export default function Loaded(props: ApplicationDetails) {
       {prevVerdict && (
         <div
           className={`${
-            prevVerdict === "Active" ? "bg-green" : "bg-red"
+            prevVerdict === "approved" ? "bg-green" : "bg-red"
           } text-white px-2 py-1 text-xs uppercase rounded justify-self-start -mt-3 lg:-mt-6`}
         >
-          {prevVerdict === "Active" ? "Approved" : "Rejected"}
+          {prevVerdict === "approved" ? "Approved" : "Rejected"}
         </div>
       )}
-      {r.RegistrationStatus === "Rejected" && (
+      {isRejected(props.submission) && (
         <div className="flex max-sm:flex-col gap-x-4">
           <span className="text-sm font-semibold uppercase">
             Rejection reason:
           </span>
-          <span className="uppercase text-sm">{r.RejectionReason}</span>
+          <span className="uppercase text-sm">
+            {props.submission.rejection}
+          </span>
         </div>
       )}
       <div className="flex max-sm:flex-col gap-x-4">
         <span className="text-sm font-semibold uppercase">Application ID:</span>
-        <span className="text-sm">{r.PK}</span>
+        <span className="text-sm">{props.id}</span>
       </div>
       <div className="flex max-sm:flex-col gap-x-4 -mt-2 lg:-mt-4">
         <span className="text-sm font-semibold uppercase">Date submitted:</span>
         <span className="uppercase text-sm">
-          {new Date(r.RegistrationDate).toLocaleDateString()}
+          {new Date(props.created_at).toLocaleDateString()}
         </span>
       </div>
 
       <Container title="nonprofit application">
         <div className="grid sm:grid-cols-[auto_auto_1fr]">
-          {doc.DocType === "FSA" ? (
-            <Row label="Registration No.">{doc.RegistrationNumber}</Row>
+          {!isIrs501c3(props.docs) ? (
+            <Row label="Registration No.">{props.docs.registration_number}</Row>
           ) : (
-            <Row label="EIN">{doc.EIN}</Row>
+            <Row label="EIN">{props.docs.ein}</Row>
           )}
-          <Row label="HQ Country">{r.HqCountry}</Row>
+          <Row label="HQ Country">{props.org.hq_country}</Row>
           <Row label="Countries active in">
-            {r.ActiveInCountries.join(", ")}
+            {props.org.active_in_countries?.join(", ") ?? "N/A"}
+          </Row>
+          <Row label="UN SDG">{props.org.un_sdg.join(", ")}</Row>
+          <Row label="Contact name">
+            {props.contact.first_name + " " + props.contact.last_name}
           </Row>
-          <Row label="UN SDG">{r.UN_SDG.join(", ")}</Row>
-          <Row label="Contact name">{c.FirstName + " " + c.LastName}</Row>
-          <Row label="Contact email">{c.Email}</Row>
-          {doc.DocType === "FSA" && (
+          <Row label="Contact email">{props.registrant_id}</Row>
+          {!isIrs501c3(props.docs) && (
             <>
               <Row label="Contact national ID">
-                <DocLink url={doc.ProofOfIdentity.publicUrl} />
+                <DocLink url={props.docs.proof_of_identity.publicUrl} />
               </Row>
               <Row label="Nonprofit registration doc">
-                <DocLink url={doc.ProofOfRegistration.publicUrl} />
+                <DocLink url={props.docs.proof_of_reg.publicUrl} />
               </Row>
               <Row label="Fiscal sponsorship agreement">
-                <DocLink url={doc.SignedFiscalSponsorshipAgreement ?? ""} />
+                <DocLink url={props.docs.fsa_signed_doc_url ?? ""} />
               </Row>
             </>
           )}
         </div>
       </Container>
       <Container title="Banking details">
         <dl className="grid sm:grid-cols-[auto_auto_1fr]">
-          <Row label="Bank name">{w?.bankName || NA}</Row>
-          <Row label="Address">{w?.address || NA}</Row>
-          <Row label="Account number">{w?.accountNumber || NA}</Row>
-          <Row label="Account holder name">{w?.accountName || NA}</Row>
+          <Row label="Bank name">{props.bank?.bankName || NA}</Row>
+          <Row label="Address">{props.bank?.address || NA}</Row>
+          <Row label="Account number">{props.bank?.accountNumber || NA}</Row>
+          <Row label="Account holder name">{props.bank?.accountName || NA}</Row>
           <Row label="Bank statement document">
-            <DocLink url={r.BankStatementFile.publicUrl} />
+            <DocLink url={props.banking.bank_statement.publicUrl} />
           </Row>
         </dl>
       </Container>

src/pages/Application/Prompt.tsx

@@ -41,10 +41,10 @@ export default function Prompt({ verdict, orgName, uuid }: Props) {
   const onSubmit: SubmitHandler<FV> = async (fv) => {
     setModalOption("isDismissible", false);
     const result = await review({
-      PK: uuid,
+      id: uuid,
       ...(verdict === "approve"
         ? { verdict: "approved" }
-        : { verdict: "rejected", rejectionReason: fv.reason ?? "" }),
+        : { verdict: "rejected", reason: fv.reason ?? "" }),
     });
 
     if ("error" in result) {

src/pages/Applications/Applications.tsx

@@ -48,7 +48,7 @@ function Applications() {
       />
       <QueryLoader
         queryState={{
-          data: data?.Items,
+          data: data?.items,
           isLoading,
           isFetching,
           isError: isError,

src/pages/Applications/Filter/constants.ts

@@ -1,8 +1,8 @@
-import type { RegistrationStatus } from "types/aws";
+import type { Status } from "@better-giving/registration/models";
 import type { OptionType } from "types/components";
 
-export const statuses: OptionType<RegistrationStatus>[] = [
-  { label: "Rejected", value: "Rejected" },
-  { label: "Under Review", value: "Under Review" },
-  { label: "Approved", value: "Active" },
+export const statuses: OptionType<Exclude<Status, "01">>[] = [
+  { label: "Rejected", value: "04" },
+  { label: "Under Review", value: "02" },
+  { label: "Approved", value: "03" },
 ];

src/pages/Applications/Filter/types.ts

@@ -1,10 +1,10 @@
-import type { RegistrationStatus } from "types/aws";
+import type { Status } from "@better-giving/registration/models";
 import type { Country, OptionType } from "types/components";
 
 export type FormValues = {
   startDate: string;
   endDate: string;
-  status: OptionType<RegistrationStatus>;
+  status: OptionType<Exclude<Status, "01">>;
   hqCountry: Country;
   //meta
   donorAddress: string;

src/pages/Applications/Table.tsx

@@ -1,10 +1,13 @@
+import {
+  type Status as TStatus,
+  isIrs501c3,
+} from "@better-giving/registration/models";
 import { HeaderButton } from "components/HeaderButton";
 import Icon from "components/Icon";
 import TableSection, { Cells } from "components/TableSection";
 import { appRoutes } from "constants/routes";
 import useSort from "hooks/useSort";
 import { Link } from "react-router-dom";
-import type { RegistrationStatus } from "types/aws";
 import LoadMoreBtn from "./LoadMoreBtn";
 import type { TableProps } from "./types";
 
@@ -18,7 +21,7 @@ export default function Table({
 }: TableProps) {
   const { handleHeaderClick, sorted, sortDirection, sortKey } = useSort(
     applications,
-    "RegistrationDate"
+    "created_at"
   );
 
   return (
@@ -35,23 +38,23 @@ export default function Table({
         >
           <td className="w-4">type</td>
           <HeaderButton
-            onClick={handleHeaderClick("OrganizationName")}
+            onClick={handleHeaderClick("org_name")}
             _activeSortKey={sortKey}
             _sortKey="OrganizationName"
             _sortDirection={sortDirection}
           >
             Nonprofit Name
           </HeaderButton>
           <HeaderButton
-            onClick={handleHeaderClick("RegistrationDate")}
+            onClick={handleHeaderClick("created_at")}
             _activeSortKey={sortKey}
             _sortKey="RegistrationDate"
             _sortDirection={sortDirection}
           >
             Date Submitted
           </HeaderButton>
           <HeaderButton
-            onClick={handleHeaderClick("HqCountry")}
+            onClick={handleHeaderClick("hq_country")}
             _activeSortKey={sortKey}
             _sortKey="HqCountry"
             _sortDirection={sortDirection}
@@ -60,7 +63,7 @@ export default function Table({
           </HeaderButton>
           <HeaderButton
             style={{ justifyContent: "center" }}
-            onClick={handleHeaderClick("RegistrationStatus")}
+            onClick={handleHeaderClick("status")}
             _activeSortKey={sortKey}
             _sortKey="RegistrationStatus"
             _sortDirection={sortDirection}
@@ -79,26 +82,23 @@ export default function Table({
         {sorted
           .map((row) => (
             <Cells
-              key={row.PK}
+              key={row.id}
               type="td"
               cellClass={`p-3 border-t border-blue-l2 max-w-[256px] truncate ${
                 hasMore ? "" : "first:rounded-bl last:rounded-br"
               }`}
             >
               <span className="text-xs font-bold upppercase">
-                {row.Documentation.DocType === "Non-FSA" &&
-                row.Documentation.Claim
-                  ? "Claim"
-                  : "New"}
+                {isIrs501c3(row.docs) && row.docs.claim ? "Claim" : "New"}
               </span>
-              <>{row.OrganizationName}</>
-              <>{new Date(row.RegistrationDate).toLocaleDateString()}</>
-              <>{row.HqCountry}</>
+              <>{row.org_name}</>
+              <>{new Date(row.created_at).toLocaleDateString()}</>
+              <>{row.hq_country}</>
               <td className="text-center">
-                <Status status={row.RegistrationStatus} />
+                <Status status={row.status} />
               </td>
               <Link
-                to={appRoutes.applications + `/${row.PK}`}
+                to={appRoutes.applications + `/${row.id}`}
                 className="text-center w-full inline-block hover:text-blue-d1"
               >
                 <Icon
@@ -132,21 +132,21 @@ export default function Table({
   );
 }
 
-const bg: { [key in RegistrationStatus]: string } = {
-  Active: "bg-green",
-  "Under Review": "bg-gray-d1",
-  Rejected: "bg-red",
-  Inactive: "bg-gray-d1",
+const bg: { [key in TStatus]: string } = {
+  "03": "bg-green",
+  "02": "bg-gray-d1",
+  "04": "bg-red",
+  "01": "bg-gray-d1",
 };
 
-const text: { [key in RegistrationStatus]: string } = {
-  Active: "Approved",
-  "Under Review": "Pending",
-  Rejected: "Rejected",
-  Inactive: "Incomplete",
+const text: { [key in TStatus]: string } = {
+  "03": "Approved",
+  "02": "Pending",
+  "04": "Rejected",
+  "01": "Incomplete",
 };
 
-function Status({ status }: { status: RegistrationStatus }) {
+function Status({ status }: { status: TStatus }) {
   return (
     <p
       className={`${bg[status]} rounded px-3 py-1 inline-block uppercase text-xs text-white`}

src/pages/Applications/types.ts

@@ -1,7 +1,7 @@
-import type { Application } from "types/aws";
+import type { ApplicationItem } from "@better-giving/registration/approval";
 
 export type TableProps = {
-  applications: Application[];
+  applications: ApplicationItem[];
   classes?: string;
   onLoadMore(): void;
   hasMore: boolean;