Merge branch 'npo-funds' into FB-fundraisers

src/constants/routes.ts

@@ -41,6 +41,7 @@ export const adminRoutes = {
   settings: "settings",
   members: "members",
   media: "media",
+  funds: "funds",
 } as const;
 
 export enum donateWidgetRoutes {

src/pages/Admin/Charity/Funds/Funds.tsx

@@ -0,0 +1,89 @@
+import ContentLoader from "components/ContentLoader";
+import Image from "components/Image";
+import QueryLoader from "components/QueryLoader";
+import { appRoutes } from "constants/routes";
+import { useAuthenticatedUser } from "contexts/Auth";
+import { Link } from "react-router-dom";
+import { useFundsEndowMemberOfQuery } from "services/aws/aws";
+import type { Fund } from "types/aws";
+import { useAdminContext } from "../../Context";
+
+export function Funds() {
+  const { id } = useAdminContext();
+  const query = useFundsEndowMemberOfQuery({ endowId: id });
+  return (
+    <div className="grid gap-y-4 grid-cols-[auto_auto_1fr_auto_auto] justify-items-start">
+      <h3 className="text-3xl mb-2 col-span-full">My Fundraisers</h3>
+
+      <QueryLoader
+        messages={{
+          loading: (
+            <>
+              <Skeleton />
+              <Skeleton />
+              <Skeleton />
+            </>
+          ),
+          error: "Failed to get fundraisers",
+          empty: "No fundraisers found.",
+        }}
+        queryState={query}
+      >
+        {(funds) => (
+          <>
+            {funds.map((fund) => (
+              <FundItem key={fund.id} {...fund} />
+            ))}
+          </>
+        )}
+      </QueryLoader>
+    </div>
+  );
+}
+
+const FundItem = (props: Fund.Card) => {
+  const user = useAuthenticatedUser();
+  const isActive = new Date().toISOString() <= props.expiration && props.active;
+  const isEditor = user.funds.includes(props.id);
+
+  return (
+    <div className="grid grid-cols-subgrid col-span-5 items-center gap-3 rounded border border-gray-l4">
+      <Image src={props.logo} className="object-cover h-full w-10" />
+      <span className="mr-4 p-1.5 font-medium text-navy-l1">{props.name}</span>
+      <p
+        className={`uppercase justify-self-start text-2xs rounded-full px-3 py-0.5 ${
+          isActive ? "text-green bg-green-l4" : "text-red bg-red-l4"
+        }`}
+      >
+        {isActive ? "active" : "closed"}
+      </p>
+      <Link
+        aria-disabled={!isActive || !isEditor}
+        className={`text-sm hover:text-blue-d1 text-blue uppercase p-3 aria-disabled:pointer-events-none aria-disabled:text-gray ${
+          isEditor ? "" : "invisible"
+        }`}
+        to={`${appRoutes.funds}/${props.id}/edit`}
+      >
+        edit
+      </Link>
+      <Link
+        className="text-sm hover:text-blue-d1 text-blue uppercase p-3"
+        to={`${appRoutes.funds}/${props.id}`}
+      >
+        view
+      </Link>
+    </div>
+  );
+};
+
+export function Skeleton() {
+  return (
+    <div
+      className="flex items-center gap-x-2 w-full col-span-full"
+      aria-disabled={true}
+    >
+      <ContentLoader className="size-10 rounded-full" />
+      <ContentLoader className="w-full h-10 rounded" />
+    </div>
+  );
+}

src/pages/Admin/Charity/Funds/index.ts

@@ -0,0 +1 @@
+export { Funds as Component } from "./Funds";

src/pages/Admin/Charity/index.tsx

@@ -35,6 +35,7 @@ export const charityRoute: RouteObject = {
       ],
     },
     { path: adminRoutes.widget_config, element: <EndowWidget /> },
+    { path: adminRoutes.funds, lazy: () => import("./Funds") },
     { index: true, lazy: () => import("./Dashboard") },
     ...mediaRoutes,
   ],

src/pages/Admin/constants.ts

@@ -95,6 +95,14 @@ const linkGroup3: LinkGroup = {
         size: 25,
       },
     },
+    {
+      title: "Fundraisers",
+      to: sidebarRoutes.funds,
+      icon: {
+        type: "Heart",
+        size: 20,
+      },
+    },
   ],
 };
 

src/pages/UserDashboard/routes.ts

@@ -16,7 +16,7 @@ export const linkGroups: LinkGroup[] = [
         to: routes.donations,
         icon: {
           type: "DollarCircle",
-          size: 22,
+          size: 21,
         },
       },
       {
@@ -40,7 +40,7 @@ export const linkGroups: LinkGroup[] = [
         to: routes.funds,
         icon: {
           type: "Heart",
-          size: 21,
+          size: 19,
         },
       },
     ],

src/services/aws/aws.ts

@@ -17,6 +17,7 @@ import type {
   EndowmentCard,
   EndowmentOption,
   EndowmentsQueryParams,
+  Fund,
   PaginatedAWSQueryRes,
 } from "types/aws";
 import { version as v } from "../helpers";
@@ -156,7 +157,14 @@ export const aws = createApi({
         }
       },
     }),
-
+    fundsEndowMemberOf: builder.query<Fund.Card[], { endowId: number }>({
+      providesTags: ["endowment"],
+      query: ({ endowId }) => {
+        return {
+          url: `${v(8)}/endowments/${endowId}/funds`,
+        };
+      },
+    }),
     endowment: builder.query<
       Endowment,
       IdOrSlug & { fields?: (keyof Endowment)[] }
@@ -251,6 +259,7 @@ export const {
   useDonationsQuery,
   useLazyDonationsQuery,
   useLazyEndowWithEinQuery,
+  useFundsEndowMemberOfQuery,
   endpoints: {
     endowmentCards: { useLazyQuery: useLazyEndowmentCardsQuery },
     endowmentOptions: { useLazyQuery: useLazyEndowmentOptionsQuery },

src/types/aws/ap/index.ts

@@ -297,7 +297,10 @@ export namespace Fund {
       | "members"
       | "target"
       | "approvers"
-    > {}
+    > {
+    /** iso | "9999-12-31T23:59:59.000Z" year 9999 */
+    expiration: string;
+  }
 
   export interface CardsPage {
     items: Card[];