Fb fundraisers

package.json

@@ -32,7 +32,9 @@
  },
  "dependencies": {
  "@better-giving/assets": "1.0.18",
+ "@better-giving/fundraiser": "1.0.0-rc.7",
  "@better-giving/registration": "1.0.24",
+ "@better-giving/types": "1.0.0-rc.2",
  "@gsap/react": "2.1.1",
  "@headlessui/react": "2.1.0",
  "@hookform/error-message": "2.0.1",

src/App/App.tsx

@@ -5,6 +5,7 @@ import useScrollTop from "hooks/useScrollTop";
 import NProgress from "nprogress";
 import { adminRoute } from "pages/Admin";
 import { routes as blogRoutes } from "pages/Blog";
+import { fundsRoute } from "pages/Funds";
 import { legalRoutes } from "pages/Legal";
 import OAuthRedirector from "pages/OAuthRedirector";
 import { profileRoute } from "pages/Profile";
@@ -38,6 +39,7 @@ const widgetRoutes: RO[] = [
 const _appRoutes: RO[] = [
  adminRoute,
  regRoute,
+ fundsRoute,
  userDashboardRoute,
  ...blogRoutes,
  ...legalRoutes,

src/App/Header/UserMenu/EndowmentLink.tsx

@@ -20,28 +20,25 @@ export function BookmarkLink({ endowId }: IBookmarkLink) {
  error: <_Link id={endowId} route="profile" />,
  }}
  >
- {(endow) => <_Link {...endow} id={endowId} route="profile" />}
+ {(endow) => <_Link {...endow} id={endowId} route={appRoutes.profile} />}
  </QueryLoader>
  );
 }
 
 export function EndowmentLink({ endowID, logo, name }: UserEndow) {
- return <_Link id={endowID} logo={logo} name={name} route="admin" />;
+ return <_Link id={endowID} logo={logo} name={name} route={appRoutes.admin} />;
 }
 
 type LinkProps = {
- id: number;
+ id: number | string;
  name?: string;
  logo?: string;
- route: "admin" | "profile";
+ route: string;
 };
 const _Link = (props: LinkProps) => (
  <MenuItem
  as={Link}
- to={
- (props.route === "admin" ? appRoutes.admin : appRoutes.marketplace) +
- `/${props.id}`
- }
+ to={props.route + `/${props.id}`}
  className="hover:text-blue-d1 text-sm flex items-center gap-2"
  >
  <Image src={props.logo} className="object-cover h-[20px] w-[20px]" />

src/components/Icon/icons.ts

@@ -56,6 +56,7 @@ import {
  Search,
  Settings,
  Shield,
+ Split,
  Sprout,
  SquareArrowOutUpRight,
  Star,
@@ -130,6 +131,7 @@ export const icons = {
  Save: Save,
  Search,
  SecurityScan: Shield,
+ Split,
  Sprout,
  Star,
  StickyNote,

src/constants/routes.ts

@@ -25,6 +25,7 @@ export enum appRoutes {
  nonprofit_info = "/nonprofit",
  donor_info = "/donor",
  wp_plugin = "/wp-plugin",
+ funds = "/funds",
 }
 
 export const adminRoutes = {
@@ -38,6 +39,7 @@ export const adminRoutes = {
  settings: "settings",
  members: "members",
  media: "media",
+ funds: "funds",
 } as const;
 
 export enum donateWidgetRoutes {

src/helpers/uploadFiles.ts

@@ -3,7 +3,7 @@ import { version as v } from "services/helpers";
 import { isEmpty } from "./isEmpty";
 import { jwtToken } from "./jwt-token";
 
-export type Bucket = "endow-profiles" | "endow-reg" | "bg-user";
+export type Bucket = "endow-profiles" | "endow-reg" | "bg-user" | "bg-funds";
 export const bucketURL = "s3.amazonaws.com";
 
 const SPACES = /\s+/g;

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

@@ -0,0 +1,124 @@
+import type { FundItem as TFundItem } from "@better-giving/fundraiser";
+import Icon from "components/Icon";
+import Prompt from "components/Prompt";
+import { appRoutes } from "constants/routes";
+import { useAuthenticatedUser } from "contexts/Auth";
+import { useErrorContext } from "contexts/ErrorContext";
+import { useModalContext } from "contexts/ModalContext";
+import { Link } from "react-router-dom";
+import {
+ useApproveMutation,
+ useOptOutMutation,
+} from "services/aws/endow-funds";
+
+export const FundItem = (props: TFundItem & { endowId: number }) => {
+ const user = useAuthenticatedUser();
+ const isActive = new Date().toISOString() <= props.expiration && props.active;
+ const isEditor = user.funds.includes(props.id);
+ const [optOut, { isLoading: isOptingOut }] = useOptOutMutation();
+ const [approve, { isLoading: isApproving }] = useApproveMutation();
+ const { showModal } = useModalContext();
+ const { handleError } = useErrorContext();
+
+ const isApproved = props.approvers.includes(props.endowId);
+
+ return (
+ <div className="grid grid-cols-subgrid col-span-6 items-center rounded border border-gray-l4">
+ <img
+ src={props.logo}
+ className="col-start-1 row-span-2 object-cover w-28 aspect-square border-r border-gray-l4"
+ />
+ <Link
+ to={`${appRoutes.funds}/${props.id}`}
+ className="mr-4 pl-4 p-1.5 font-medium text-navy-l1 hover:text-blue-d1"
+ >
+ <span className="font-heading">{props.name}</span>
+
+ <span
+ className={`ml-1 relative bottom-px uppercase text-center text-2xs rounded-full px-3 py-0.5 ${
+ isActive ? "text-green bg-green-l4" : "text-red bg-red-l4"
+ }`}
+ >
+ {isActive ? "active" : "closed"}
+ </span>
+ </Link>
+
+ <div className="grid grid-cols-subgrid col-start-2 col-span-5 border-t border-gray-l4 gap-x-6 p-3 items-center">
+ <Link
+ aria-disabled={!isActive || !isEditor}
+ className={`flex items-center gap-x-1 text-sm hover:text-blue-d1 text-blue aria-disabled:pointer-events-none aria-disabled:text-gray ${
+ isEditor ? "" : "invisible"
+ }`}
+ to={`${appRoutes.funds}/${props.id}/edit`}
+ >
+ <Icon type="ArrowRight" size={16} />
+ <span>Edit</span>
+ </Link>
+ {/** fund item won't show once NPO opted out of it: so no need to hide this button */}
+ <button
+ className="font-heading bg-amber enabled:hover:bg-amber-d1 text-white rounded-full px-4 py-2 text-xs flex items-center gap-1 disabled:bg-gray-l1"
+ disabled={isOptingOut}
+ type="button"
+ onClick={async () => {
+ console.log(props.id);
+ try {
+ await optOut({
+ fundId: props.id,
+ endowId: props.endowId,
+ }).unwrap();
+ showModal(Prompt, {
+ type: "success",
+ children:
+ "You have successfully opted out of this fund. Changes will take effect shortly.",
+ });
+ } catch (err) {
+ handleError(err, { context: "opting out of fund" });
+ }
+ }}
+ >
+ <Icon
+ type={isOptingOut ? "Loading" : "Split"}
+ size={12}
+ className={isOptingOut ? "animate-spin" : "rotate-90"}
+ />
+ <span>{isOptingOut ? "Opting out.." : "Opt out"}</span>
+ </button>
+ {!isApproved ? (
+ <button
+ className="font-heading bg-blue-d1 text-white rounded-full px-4 py-2 text-xs flex items-center gap-1 disabled:bg-gray-l1"
+ disabled={isApproving}
+ type="button"
+ onClick={async () => {
+ console.log(props.id);
+ try {
+ await approve({
+ fundId: props.id,
+ endowId: props.endowId,
+ }).unwrap();
+ showModal(Prompt, {
+ type: "success",
+ children:
+ "You have successfully approved this fund. Changes will take effect shortly.",
+ });
+ } catch (err) {
+ handleError(err, { context: "approving fund" });
+ }
+ }}
+ >
+ <Icon
+ type={isApproving ? "Loading" : "Verified"}
+ size={16}
+ className={isApproving ? "animate-spin" : ""}
+ />
+ <span>{isApproving ? "Approving.." : "Approve"}</span>
+ </button>
+ ) : (
+ <div className="flex items-center gap-1 text-green">
+ <Icon type="Verified" className="size-4" />
+ <p className="text-xs">Approved</p>
+ </div>
+ )}
+ </div>
+ </div>
+ );
+};

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

@@ -0,0 +1,50 @@
+import ContentLoader from "components/ContentLoader";
+import QueryLoader from "components/QueryLoader";
+import { useFundsEndowMemberOfQuery } from "services/aws/endow-funds";
+import { useAdminContext } from "../../Context";
+import { FundItem } from "./FundItem";
+
+export function Funds() {
+ const { id } = useAdminContext();
+ const query = useFundsEndowMemberOfQuery({ endowId: id });
+ return (
+ <div className="grid gap-y-4 grid-cols-[auto_1fr_auto_auto_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} endowId={id} />
+ ))}
+ </>
+ )}
+ </QueryLoader>
+ </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/Settings/Form.tsx

@@ -39,6 +39,7 @@ export default function Form(props: Props) {
  hide_bg_tip: props.hide_bg_tip ?? false,
  programDonateDisabled: !(props.progDonationsAllowed ?? true),
  donateMethods: fill(props.donateMethods),
+ fundOptIn: props.fund_opt_in ?? false,
  },
  });
 
@@ -63,7 +64,7 @@ export default function Form(props: Props) {
  reset();
  }}
  onSubmit={handleSubmit(
- async ({ programDonateDisabled, donateMethods, ...fv }) => {
+ async ({ programDonateDisabled, donateMethods, fundOptIn, ...fv }) => {
  if (props.id === BG_ID && fv.hide_bg_tip === false) {
  return displayError(
  "BG donation flow should not show BG tip screen"
@@ -72,6 +73,7 @@ export default function Form(props: Props) {
 
  await updateEndow({
  ...fv,
+ fund_opt_in: fundOptIn,
  progDonationsAllowed: !programDonateDisabled,
  id: props.id,
  donateMethods: donateMethods

src/pages/Admin/Charity/Settings/Settings.tsx

@@ -1,20 +1,21 @@
 import { FormError, FormSkeleton } from "components/admin";
 import { useEndowment } from "services/aws/useEndowment";
+import type { EndowmentSettingsAttributes } from "types/aws";
 import { useAdminContext } from "../../Context";
 import Form from "./Form";
 
+type K = EndowmentSettingsAttributes;
+const fields = Object.keys({
+ receiptMsg: "",
+ hide_bg_tip: "",
+ progDonationsAllowed: "",
+ donateMethods: "",
+ fund_opt_in: "",
+} satisfies { [k in K]: "" }) as K[];
+
 export default function Settings() {
  const { id } = useAdminContext();
- const {
- data: endow,
- isLoading,
- isError,
- } = useEndowment({ id }, [
- "receiptMsg",
- "hide_bg_tip",
- "progDonationsAllowed",
- "donateMethods",
- ]);
+ const { data: endow, isLoading, isError } = useEndowment({ id }, fields);
 
  if (isLoading) {
  return <FormSkeleton classes="max-w-4xl justify-self-center mt-6" />;

src/pages/Admin/Charity/Settings/types.ts

@@ -3,6 +3,7 @@ import type { TDonateMethod } from "types/components";
 export type FV = {
  receiptMsg: string;
  hide_bg_tip: boolean;
+ fundOptIn: boolean;
  programDonateDisabled: boolean;
  donateMethods: TDonateMethod[];
 };

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: 21,
+ },
+ },
  ],
 };