= {
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index d894c532a8..02c506bc4c 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -11,6 +11,7 @@ export enum appRoutes {
signup = "/signup",
profile = "/profile",
donate = "/donate",
+ donate_fund = "/donate-fund",
donate_thanks = "/donate-thanks",
stripe_payment_status = "/stripe-payment-status",
donate_widget = "/donate-widget",
@@ -25,6 +26,7 @@ export enum appRoutes {
nonprofit_info = "/nonprofit",
donor_info = "/donor",
wp_plugin = "/wp-plugin",
+ funds = "/funds",
about = "/about-us",
}
@@ -39,6 +41,7 @@ export const adminRoutes = {
settings: "settings",
members: "members",
media: "media",
+ funds: "funds",
} as const;
export enum donateWidgetRoutes {
diff --git a/src/helpers/uploadFile.ts b/src/helpers/uploadFile.ts
index 810cf31764..a6e1f0db5e 100644
--- a/src/helpers/uploadFile.ts
+++ b/src/helpers/uploadFile.ts
@@ -4,7 +4,7 @@ import { toast } from "sonner";
import { jwtToken } from "./jwt-token";
import { logger } from "./logger";
-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;
diff --git a/src/pages/Admin/Charity/Funds/FundItem.tsx b/src/pages/Admin/Charity/Funds/FundItem.tsx
new file mode 100644
index 0000000000..c2a05c861a
--- /dev/null
+++ b/src/pages/Admin/Charity/Funds/FundItem.tsx
@@ -0,0 +1,126 @@
+import type { FundItem as TFundItem } from "@better-giving/fundraiser";
+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 { ArrowRight, BadgeCheck, LoaderCircle, Split } from "lucide-react";
+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 (
+
+
+
+
{props.name}
+
+
+ {isActive ? "active" : "closed"}
+
+
+
+
+
+
+
Edit
+
+ {/** fund item won't show once NPO opted out of it: so no need to hide this button */}
+
+ {!isApproved ? (
+
+ ) : (
+
+ )}
+
+
+
Fundraisers
+
+
+
+
+
+
+ ),
+ error: "Failed to get fundraisers",
+ empty: "This NPO has not been included in any fundraisers",
+ }}
+ queryState={query}
+ >
+ {(funds) => (
+ <>
+ {funds.map((fund) => (
+
+ ))}
+
+ )}
+
+
+ );
+}
+
+export function Skeleton() {
+ return (
+
+
+
+
+ );
+}
diff --git a/src/pages/Admin/Charity/Funds/index.ts b/src/pages/Admin/Charity/Funds/index.ts
new file mode 100644
index 0000000000..0f4842aa81
--- /dev/null
+++ b/src/pages/Admin/Charity/Funds/index.ts
@@ -0,0 +1 @@
+export { Funds as Component } from "./Funds";
diff --git a/src/pages/Admin/Charity/Settings/Form.tsx b/src/pages/Admin/Charity/Settings/Form.tsx
index fa92c9652d..de1861d90d 100644
--- a/src/pages/Admin/Charity/Settings/Form.tsx
+++ b/src/pages/Admin/Charity/Settings/Form.tsx
@@ -43,6 +43,7 @@ export default function Form(props: Props) {
programDonateDisabled: !(props.progDonationsAllowed ?? true),
donateMethods: fill(props.donateMethods),
increments: props.increments ?? [],
+ fundOptIn: props.fund_opt_in ?? false,
target: toFormTarget(props.target),
},
});
@@ -76,6 +77,7 @@ export default function Form(props: Props) {
async ({
programDonateDisabled,
donateMethods,
+ fundOptIn,
target: fvTarget,
...fv
}) => {
@@ -87,6 +89,7 @@ export default function Form(props: Props) {
await updateEndow({
...fv,
+ fund_opt_in: fundOptIn,
target: toTarget(fvTarget),
progDonationsAllowed: !programDonateDisabled,
id: props.id,
@@ -152,6 +155,19 @@ export default function Form(props: Props) {
+
+
+ Allow Fundraisers to be created on behalf of your nonprofit
+
+
+ Fundraising functionality is optional for all Better Giving
+ nonprofits. By opting in, people will be able to create fundraisers on
+ your behalf. You will receive 100% of funds raised for fundraisers
+ specific to your organization, and a percentage split of fundraisers
+ involving multiple nonprofits (such as curated giving indexes).
+
+
Marketplace settings
;
diff --git a/src/pages/Admin/Charity/Settings/types.ts b/src/pages/Admin/Charity/Settings/types.ts
index acbeb7187f..3dd470ec09 100644
--- a/src/pages/Admin/Charity/Settings/types.ts
+++ b/src/pages/Admin/Charity/Settings/types.ts
@@ -34,6 +34,7 @@ export const schema = v.object({
({ requirement }) => `cannot exceed ${requirement} characters`
)
),
+ fundOptIn: v.boolean(),
hide_bg_tip: v.boolean(),
programDonateDisabled: v.boolean(),
increments: v.array(increment),
diff --git a/src/pages/Admin/Charity/index.tsx b/src/pages/Admin/Charity/index.tsx
index d4a81ab3e8..3351109cf8 100644
--- a/src/pages/Admin/Charity/index.tsx
+++ b/src/pages/Admin/Charity/index.tsx
@@ -35,6 +35,7 @@ export const charityRoute: RouteObject = {
],
},
{ path: adminRoutes.form_builder, element: },
+ { path: adminRoutes.funds, lazy: () => import("./Funds") },
{ index: true, lazy: () => import("./Dashboard") },
...mediaRoutes,
],
diff --git a/src/pages/Admin/constants.ts b/src/pages/Admin/constants.ts
index 09894a1136..217a049392 100644
--- a/src/pages/Admin/constants.ts
+++ b/src/pages/Admin/constants.ts
@@ -4,6 +4,7 @@ import {
Blocks,
CircleDollarSign,
CircleUserRound,
+ Heart,
Image,
LayoutDashboard,
ListCheck,
@@ -106,6 +107,14 @@ const linkGroup3: LinkGroup = {
size: 25,
},
},
+ {
+ title: "Fundraisers",
+ to: sidebarRoutes.funds,
+ icon: {
+ fn: Heart,
+ size: 21,
+ },
+ },
],
};
diff --git a/src/pages/Donate/Content.tsx b/src/pages/Donate/Content.tsx
index 37921d59e1..9ff7389e99 100644
--- a/src/pages/Donate/Content.tsx
+++ b/src/pages/Donate/Content.tsx
@@ -6,20 +6,16 @@ import { Steps } from "components/donation";
import { INTERCOM_HELP } from "constants/env";
import { appRoutes } from "constants/routes";
import { PRIVACY_POLICY } from "constants/urls";
-import { useRendered } from "hooks/use-rendered";
import { memo } from "react";
import { Link } from "react-router-dom";
-import type { DonationIntent } from "types/aws";
import FAQ from "./FAQ";
import OrgCard from "./OrgCard";
type Props = {
- intent?: DonationIntent.ToResume;
endowment: Endow;
};
-function Content({ intent, endowment }: Props) {
- useRendered();
+function Content({ endowment }: Props) {
return (
@@ -48,9 +44,8 @@ function Content({ intent, endowment }: Props) {
{
- window.history.replaceState({}, "");
- }, []);
-
const { id } = useParams<{ id: string }>();
const numId = idParamToNum(id);
@@ -42,7 +30,7 @@ export function Component() {
image={profile.logo}
url={`${BASE_URL}/donate/${profile.id}`}
/>
-
+
)}
diff --git a/src/pages/DonateThanks.tsx b/src/pages/DonateThanks.tsx
index 97195e9bb3..ba08515a52 100644
--- a/src/pages/DonateThanks.tsx
+++ b/src/pages/DonateThanks.tsx
@@ -52,11 +52,6 @@ export function Component() {
/>
- {state?.microdepositArrivalDate
- ? `The microdeposit is expected to arrive at your nominated bank account on ${new Date(
- state.microdepositArrivalDate * 1000
- )}. You can access the bank verification link from the "Pending" tab on your`
- : "If you need a receipt for your donation, please fill out the KYC form for this transaction on your"}{" "}
{widgetVersion ? (
My Donations
@@ -67,16 +62,6 @@ export function Component() {
page.
- {!userIsSignedIn(user) &&
- state?.guestDonor &&
- state?.bankVerificationUrl && (
-
- If you are not signed up yet, you may access the bank verification
- url by copying{" "}
- this link.
-
- )}
-
{!userIsSignedIn(user) && state?.guestDonor && (
);
diff --git a/src/pages/Funds/Cards/Card.tsx b/src/pages/Funds/Cards/Card.tsx
new file mode 100644
index 0000000000..21d9942f0e
--- /dev/null
+++ b/src/pages/Funds/Cards/Card.tsx
@@ -0,0 +1,77 @@
+import type { FundItem } from "@better-giving/fundraiser";
+import flying_character from "assets/images/flying-character.png";
+import Image from "components/Image";
+import { parseContent, toText } from "components/RichText";
+import VerifiedIcon from "components/VerifiedIcon";
+import { Target, toTarget } from "components/target";
+import { appRoutes } from "constants/routes";
+import { Link } from "react-router-dom";
+
+export default function Card({
+ name,
+ logo,
+ banner,
+ id,
+ description,
+ verified,
+ donation_total_usd,
+ target,
+}: FundItem) {
+ return (
+
+
+
+
e.currentTarget.classList.add("bg-blue-l3")}
+ />
+ e.currentTarget.classList.add("bg-blue-l3")}
+ />
+ {verified && (
+
+
+
+ )}
+
+
+
+ {/* nonprofit NAME */}
+
+ {name}
+
+
+
+ {toText(parseContent(description))}
+
+
+
+
+
+ {/** absolute so above whole `Link` card */}
+
+
{/** future: share button */}
+
+ Donate
+
+
{/** future: bookmark button */}
+
+
+ );
+}
diff --git a/src/pages/Funds/Cards/Cards.tsx b/src/pages/Funds/Cards/Cards.tsx
new file mode 100644
index 0000000000..460c8414f8
--- /dev/null
+++ b/src/pages/Funds/Cards/Cards.tsx
@@ -0,0 +1,58 @@
+import QueryLoader from "components/QueryLoader";
+import Card from "./Card";
+import useCards from "./useCards";
+
+interface Props {
+ classes?: string;
+ search: string;
+}
+
+export default function Cards({ classes = "", search }: Props) {
+ const {
+ hasMore,
+ isFetching,
+ isLoading,
+ isLoadingNextPage,
+ loadNextPage,
+ data,
+ isError,
+ } = useCards(search);
+ return (
+
+ {(funds) => (
+
+ {funds.map((fund) => (
+
+ ))}
+
+ {hasMore && (
+
+ )}
+
+ )}
+
+ );
+}
diff --git a/src/pages/Funds/Cards/index.ts b/src/pages/Funds/Cards/index.ts
new file mode 100644
index 0000000000..d70ef1788f
--- /dev/null
+++ b/src/pages/Funds/Cards/index.ts
@@ -0,0 +1 @@
+export { default } from "./Cards";
diff --git a/src/pages/Funds/Cards/useCards.ts b/src/pages/Funds/Cards/useCards.ts
new file mode 100644
index 0000000000..5a9447101f
--- /dev/null
+++ b/src/pages/Funds/Cards/useCards.ts
@@ -0,0 +1,62 @@
+import useDebouncer from "hooks/useDebouncer";
+import {
+ updateAwsQueryData,
+ useFundsQuery,
+ useLazyFundsQuery,
+} from "services/aws/funds";
+import { useSetter } from "store/accessors";
+
+export default function useCards(search: string) {
+ const [debouncedSearchText, isDebouncing] = useDebouncer(search, 500);
+ const dispatch = useSetter();
+
+ const {
+ isLoading,
+ isFetching,
+ isUninitialized,
+ data,
+ isError,
+ originalArgs,
+ } = useFundsQuery(
+ { query: debouncedSearchText, page: 1 },
+ { skip: isDebouncing }
+ );
+
+ const [loadMore, { isLoading: isLoadingNextPage }] = useLazyFundsQuery();
+
+ async function loadNextPage() {
+ //button is hidden when there's no more
+ if (
+ data?.page &&
+ originalArgs /** cards won't even show if no initial query is made */
+ ) {
+ const { data: newPage } = await loadMore({
+ ...originalArgs,
+ page: data.page + 1,
+ });
+
+ if (newPage) {
+ //pessimistic update to original cache data
+ dispatch(
+ updateAwsQueryData("funds", originalArgs, (prevResult) => {
+ prevResult.items.push(...newPage.items);
+ prevResult.page = newPage.page;
+ })
+ );
+ }
+ }
+ }
+
+ // initial assumption is that there's no more to load until we get first res from query
+ const hasMore = (data?.page || 0) < (data?.numPages || 0);
+
+ return {
+ hasMore,
+ isLoading: isLoading || isUninitialized,
+ isLoadingNextPage: isLoadingNextPage,
+ isFetching: isFetching || isUninitialized,
+ loadNextPage,
+ data,
+ isError,
+ };
+}
diff --git a/src/pages/Funds/CreateFund/CreateFund.tsx b/src/pages/Funds/CreateFund/CreateFund.tsx
new file mode 100644
index 0000000000..83375f3437
--- /dev/null
+++ b/src/pages/Funds/CreateFund/CreateFund.tsx
@@ -0,0 +1,269 @@
+import type { NewFund } from "@better-giving/fundraiser/schema";
+import { valibotResolver } from "@hookform/resolvers/valibot";
+import { ControlledImgEditor as ImgEditor } from "components/ImgEditor";
+import Prompt from "components/Prompt";
+import { RichText } from "components/RichText";
+import {
+ NativeCheckField as CheckField,
+ NativeField as Field,
+ Form,
+ Label,
+} from "components/form";
+import { appRoutes } from "constants/routes";
+import withAuth from "contexts/Auth";
+import { useErrorContext } from "contexts/ErrorContext";
+import { useModalContext } from "contexts/ModalContext";
+import { uploadFile } from "helpers/uploadFile";
+import {
+ type SubmitHandler,
+ useController,
+ useFieldArray,
+ useForm,
+} from "react-hook-form";
+import { Link } from "react-router-dom";
+import { useCreateFundMutation } from "services/aws/funds";
+import { GoalSelector, MAX_SIZE_IN_BYTES, VALID_MIME_TYPES } from "../common";
+import { Videos } from "../common/videos";
+import { EndowmentSelector } from "./EndowmentSelector";
+import { type FV, MAX_DESCRIPTION_CHAR, schema } from "./schema";
+
+export default withAuth(function CreateFund() {
+ const {
+ register,
+ control,
+ trigger,
+ resetField,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useForm
({
+ resolver: valibotResolver(schema),
+ defaultValues: {
+ name: "",
+ description: "",
+ logo: { preview: "", publicUrl: "" },
+ banner: { preview: "", publicUrl: "" },
+ featured: true,
+ members: [],
+ target: {
+ type: "smart",
+ },
+ videos: [],
+ },
+ });
+ const { field: banner } = useController({ control, name: "banner" });
+ const { field: logo } = useController({ control, name: "logo" });
+ const { field: members } = useController({
+ control,
+ name: "members",
+ });
+ const { field: targetType } = useController({
+ control,
+ name: "target.type",
+ });
+ const { field: desc } = useController({
+ control,
+ name: "description",
+ });
+
+ const videos = useFieldArray, "videos">({
+ control: control as any,
+ name: "videos",
+ });
+
+ const [createFund] = useCreateFundMutation();
+ const { handleError } = useErrorContext();
+ const { showModal } = useModalContext();
+
+ const onSubmit: SubmitHandler = async ({ banner, logo, ...fv }) => {
+ try {
+ if (!banner.file || !logo.file) {
+ throw `dev: banner must be required`;
+ }
+
+ showModal(Prompt, { type: "loading", children: "Creating fund..." });
+
+ const _banner = await uploadFile(banner.file, "bg-funds");
+ if (!_banner) return handleError("Failed to upload banner");
+ const _logo = await uploadFile(logo.file, "bg-funds");
+ if (!_logo) return handleError("Failed to upload logo");
+
+ const fund: NewFund = {
+ name: fv.name,
+ description: fv.description.value,
+ banner: _banner.publicUrl,
+ logo: _logo.publicUrl,
+ members: fv.members.map((m) => m.id),
+ featured: fv.featured,
+ target:
+ fv.target.type === "none"
+ ? `${0}`
+ : fv.target.type === "smart"
+ ? "smart"
+ : `${+fv.target.value}`, //fixedTarget is required when targetType is fixed
+ videos: fv.videos.map((v) => v.url),
+ };
+
+ if (fv.expiration) fund.expiration = fv.expiration;
+
+ const res = await createFund(fund).unwrap();
+
+ showModal(Prompt, {
+ type: "success",
+ children: (
+
+ Your{" "}
+
+ fund
+ {" "}
+ is created
+ {fv.featured ? (
+ <>
+ {" "}
+ and is now listed in{" "}
+ funds page
+
+ ) : (
+ ""
+ )}
+ !. To get access to this fund, kindly login again.
+
+ ),
+ });
+ } catch (err) {
+ handleError(err, { context: "creating fund" });
+ }
+ };
+
+ return (
+
+ );
+});
diff --git a/src/pages/Funds/CreateFund/EndowmentSelector/EndowmentSelector.tsx b/src/pages/Funds/CreateFund/EndowmentSelector/EndowmentSelector.tsx
new file mode 100644
index 0000000000..ce49ebb056
--- /dev/null
+++ b/src/pages/Funds/CreateFund/EndowmentSelector/EndowmentSelector.tsx
@@ -0,0 +1,108 @@
+import {
+ Combobox,
+ ComboboxInput,
+ Description,
+ Field,
+ Label,
+} from "@headlessui/react";
+import Image from "components/Image";
+import { Search, X } from "lucide-react";
+import { forwardRef, useState } from "react";
+import type { EndowOption } from "../schema";
+import { Options } from "./Options";
+
+type OnChange = (opts: EndowOption[]) => void;
+interface Props {
+ values: EndowOption[];
+ onChange: OnChange;
+ classes?: string;
+ disabled?: boolean;
+ error?: string;
+}
+
+type El = HTMLInputElement;
+
+export const EndowmentSelector = forwardRef((props, ref) => {
+ const [searchText, setSearchText] = useState("");
+
+ return (
+
+
+
+
+
+ {props.values.map((v) => (
+
+ props.onChange(
+ props.values.filter((v) => v.id !== thisOpt.id)
+ )
+ }
+ />
+ ))}
+
+
+
+ setSearchText(e.target.value)}
+ ref={ref}
+ />
+
+
+
{props.error}
+
+ Inclusion as an eligible Fundraiser Index nonprofit is optional for all
+ Better Giving Nonprofits. If you don't see a nonprofit of interest on
+ this list, it means that they have not opted-in at this time.
+
+
+ );
+});
+
+interface ISelectedOption extends EndowOption {
+ onDeselect: (thisOpt: EndowOption) => void;
+}
+
+function SelectedOption({ onDeselect, ...props }: ISelectedOption) {
+ return (
+
+
+ {props.name}
+
+
+ );
+}
diff --git a/src/pages/Funds/CreateFund/EndowmentSelector/Options.tsx b/src/pages/Funds/CreateFund/EndowmentSelector/Options.tsx
new file mode 100644
index 0000000000..3b5ea47a6b
--- /dev/null
+++ b/src/pages/Funds/CreateFund/EndowmentSelector/Options.tsx
@@ -0,0 +1,65 @@
+import { ComboboxOption, ComboboxOptions } from "@headlessui/react";
+import Image from "components/Image";
+import { ErrorStatus, Info, LoadingStatus } from "components/Status";
+import useDebouncer from "hooks/useDebouncer";
+import { useEndowmentCardsQuery } from "services/aws/aws";
+import type { EndowOption } from "../schema";
+
+interface Props {
+ searchText: string;
+ classes?: string;
+}
+
+export function Options({ classes = "", searchText }: Props) {
+ const [debouncedSearchText, isDebouncing] = useDebouncer(searchText, 200);
+
+ const endowments = useEndowmentCardsQuery({
+ query: debouncedSearchText,
+ page: "1",
+ fund_opt_in: "true",
+ });
+
+ if (endowments.isLoading || isDebouncing) {
+ return (
+
+ Loading options...
+
+ );
+ }
+
+ if (endowments.isError) {
+ return (
+
+ Failed to load endowments
+
+ );
+ }
+
+ const endows = endowments.data?.items;
+ if (!endows) return null;
+
+ if (endows.length === 0) {
+ return No endowments found;
+ }
+
+ return (
+
+ {endows.map((o) => (
+
+
+ {o.name}
+
+ ))}
+
+ );
+}
diff --git a/src/pages/Funds/CreateFund/EndowmentSelector/index.ts b/src/pages/Funds/CreateFund/EndowmentSelector/index.ts
new file mode 100644
index 0000000000..0a7aa11c3d
--- /dev/null
+++ b/src/pages/Funds/CreateFund/EndowmentSelector/index.ts
@@ -0,0 +1 @@
+export { EndowmentSelector } from "./EndowmentSelector";
diff --git a/src/pages/Funds/CreateFund/GoalSelector.tsx b/src/pages/Funds/CreateFund/GoalSelector.tsx
new file mode 100644
index 0000000000..65b06b6570
--- /dev/null
+++ b/src/pages/Funds/CreateFund/GoalSelector.tsx
@@ -0,0 +1,36 @@
+import { Field, Label, Radio, RadioGroup } from "@headlessui/react";
+import type { TargetType } from "../common";
+
+const options: { [T in TargetType]: string } = {
+ smart: "Use smart milestones",
+ none: "No goal or progress bar",
+ fixed: "Set my own goal",
+};
+
+interface Props {
+ value: TargetType;
+ onChange: (type: TargetType) => void;
+ classes?: string;
+}
+export default function GoalSelector(props: Props) {
+ return (
+
+ {Object.entries(options).map(([value, label]) => (
+
+
+
+
+
+
+ ))}
+
+ );
+}
diff --git a/src/pages/Funds/CreateFund/index.ts b/src/pages/Funds/CreateFund/index.ts
new file mode 100644
index 0000000000..99fb330beb
--- /dev/null
+++ b/src/pages/Funds/CreateFund/index.ts
@@ -0,0 +1 @@
+export { default as Component } from "./CreateFund";
diff --git a/src/pages/Funds/CreateFund/schema.ts b/src/pages/Funds/CreateFund/schema.ts
new file mode 100644
index 0000000000..fa25a7a114
--- /dev/null
+++ b/src/pages/Funds/CreateFund/schema.ts
@@ -0,0 +1,64 @@
+import { richTextContent } from "types/components";
+import * as v from "valibot";
+import { MAX_SIZE_IN_BYTES, VALID_MIME_TYPES, target } from "../common";
+import { video } from "../common/videos";
+
+const str = v.pipe(v.string("required"), v.trim());
+
+/** not set by user */
+const fileObject = v.object({
+ name: str,
+ publicUrl: str,
+});
+
+export const imgLink = v.object({
+ file: v.pipe(
+ v.file("required"),
+ v.mimeType(VALID_MIME_TYPES, "invalid type"),
+ v.maxSize(MAX_SIZE_IN_BYTES, "exceeds size limit")
+ ),
+ preview: v.pipe(str, v.url()),
+ ...fileObject.entries,
+});
+
+export const endowOption = v.object({
+ id: v.number(),
+ name: str,
+ logo: v.optional(v.pipe(str, v.url())),
+});
+
+export const MAX_DESCRIPTION_CHAR = 500;
+
+export const schema = v.object({
+ name: v.pipe(str, v.nonEmpty("required")),
+ description: richTextContent({
+ maxChars: MAX_DESCRIPTION_CHAR,
+ required: true,
+ }),
+ banner: imgLink,
+ logo: imgLink,
+ members: v.pipe(
+ v.array(endowOption),
+ v.minLength(1, "must contain at least one endowment"),
+ v.maxLength(10, "cannot contain more than 10 endowments")
+ ),
+ featured: v.boolean(),
+ expiration: v.optional(
+ v.lazy((val) => {
+ if (!val) return v.string();
+ return v.pipe(
+ str,
+ v.transform((val) => new Date(val)),
+ v.date("invalid date"),
+ v.minValue(new Date(), "must be in the future"),
+ v.transform((val) => val.toISOString())
+ );
+ })
+ ),
+ target,
+ videos: v.array(video),
+});
+
+export interface FundMember extends v.InferOutput {}
+export interface EndowOption extends FundMember {}
+export interface FV extends v.InferOutput {}
diff --git a/src/pages/Funds/CreateFund/useEndow.ts b/src/pages/Funds/CreateFund/useEndow.ts
new file mode 100644
index 0000000000..2383ad746a
--- /dev/null
+++ b/src/pages/Funds/CreateFund/useEndow.ts
@@ -0,0 +1,39 @@
+import type { Endow } from "@better-giving/endowment";
+import { useEffect } from "react";
+import { useLazyProfileQuery } from "services/aws/aws";
+import type { FundMember } from "./schema";
+
+export type TEndow = Pick;
+
+export function useEndow(
+ members: FundMember[],
+ onEndowSet: (endow: TEndow) => void
+) {
+ /** set donate settings for single endowment */
+ const [getEndow] = useLazyProfileQuery();
+ const configSource = `${members.at(0)?.id ?? 0}-${members.length}` as const;
+
+ useEffect(() => {
+ const [id, length] = configSource.split("-");
+ const numId = +id;
+ const numLength = +length;
+
+ if (numId === 0 || numLength === 0) return;
+ if (numLength > 1) return;
+
+ getEndow(
+ {
+ id: numId,
+ fields: ["hide_bg_tip", "name"],
+ },
+ true
+ )
+ .unwrap()
+ .then(({ hide_bg_tip, name }) => {
+ onEndowSet({
+ hide_bg_tip,
+ name,
+ });
+ });
+ }, [configSource, onEndowSet, getEndow]);
+}
diff --git a/src/pages/Funds/EditFund/EditFund.tsx b/src/pages/Funds/EditFund/EditFund.tsx
new file mode 100644
index 0000000000..3a1ecc1df9
--- /dev/null
+++ b/src/pages/Funds/EditFund/EditFund.tsx
@@ -0,0 +1,50 @@
+import { skipToken } from "@reduxjs/toolkit/query";
+import { ErrorStatus, LoadingStatus } from "components/Status";
+import withAuth from "contexts/Auth";
+import { CircleAlert } from "lucide-react";
+import { useParams } from "react-router-dom";
+import { useFundQuery } from "services/aws/funds";
+import { Form } from "./Form";
+
+const containerClass = "padded-container mt-8 grid content-start";
+export default withAuth(function EditFund({ user }) {
+ const { fundId = "" } = useParams();
+
+ const { data, isLoading, isError } = useFundQuery(fundId || skipToken);
+
+ if (isLoading) {
+ return (
+
+ Getting fund...
+
+ );
+ }
+
+ if (isError || !data) {
+ return (
+
+ Failed to get fund
+
+ );
+ }
+
+ if (!user.funds.includes(fundId)) {
+ return (
+
+ );
+ }
+
+ if (!data.active) {
+ return (
+
+
+
This fund is already closed
+
+ {props.featured ? (
+
Your fund is visible in the funds page
+ ) : (
+
+ Your endowment is not visible in the funds page
+
+ )}
+
+
+
+ View
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Funds/EditFund/index.ts b/src/pages/Funds/EditFund/index.ts
new file mode 100644
index 0000000000..bbdd2bec33
--- /dev/null
+++ b/src/pages/Funds/EditFund/index.ts
@@ -0,0 +1 @@
+export { default as Component } from "./EditFund";
diff --git a/src/pages/Funds/EditFund/schema.ts b/src/pages/Funds/EditFund/schema.ts
new file mode 100644
index 0000000000..e1346057be
--- /dev/null
+++ b/src/pages/Funds/EditFund/schema.ts
@@ -0,0 +1,39 @@
+import { richTextContent } from "types/components";
+import * as v from "valibot";
+import { MAX_SIZE_IN_BYTES, VALID_MIME_TYPES, target } from "../common";
+import { video } from "../common/videos";
+
+const str = v.pipe(v.string(), v.trim());
+
+/** not set by user */
+const fileObject = v.object({
+ name: str,
+ publicUrl: str,
+});
+
+export const imgLink = v.object({
+ file: v.optional(
+ v.pipe(
+ v.file("required"),
+ v.mimeType(VALID_MIME_TYPES, "invalid type"),
+ v.maxSize(MAX_SIZE_IN_BYTES, "exceeds size limit")
+ )
+ ),
+ preview: v.pipe(str, v.url()),
+ ...fileObject.entries,
+});
+
+export const MAX_DESCRIPTION_CHARS = 500;
+export const schema = v.object({
+ name: v.pipe(str, v.nonEmpty("required")),
+ description: richTextContent({
+ maxChars: MAX_DESCRIPTION_CHARS,
+ required: true,
+ }),
+ target,
+ videos: v.array(video),
+ banner: imgLink,
+ logo: imgLink,
+});
+
+export type FV = v.InferOutput;
diff --git a/src/pages/Funds/EditFund/useRhf.ts b/src/pages/Funds/EditFund/useRhf.ts
new file mode 100644
index 0000000000..3610bd207b
--- /dev/null
+++ b/src/pages/Funds/EditFund/useRhf.ts
@@ -0,0 +1,65 @@
+import type { SingleFund } from "@better-giving/fundraiser";
+import { valibotResolver } from "@hookform/resolvers/valibot";
+import { parseContent } from "components/RichText";
+import { useController, useFieldArray, useForm } from "react-hook-form";
+import { type FV, schema } from "./schema";
+
+export function useRhf(init: SingleFund) {
+ const {
+ register,
+ handleSubmit,
+ control,
+ trigger,
+ resetField,
+ formState: { isSubmitting, errors, isDirty, dirtyFields },
+ } = useForm({
+ resolver: valibotResolver(schema),
+ values: {
+ name: init.name,
+ description: parseContent(init.description),
+ target:
+ init.target === "0"
+ ? { type: "none" }
+ : init.target === "smart"
+ ? { type: "smart" }
+ : { type: "fixed", value: init.target },
+ logo: { name: "", preview: init.logo, publicUrl: init.logo },
+ banner: { name: "", preview: init.banner, publicUrl: init.banner },
+ videos: init.videos.map((v) => ({ url: v })),
+ },
+ });
+
+ const { field: targetType } = useController({
+ control,
+ name: "target.type",
+ });
+
+ const { field: desc } = useController({
+ control,
+ name: "description",
+ });
+
+ const { field: logo } = useController({ control, name: "logo" });
+ const { field: banner } = useController({ control, name: "banner" });
+ const videos = useFieldArray>({
+ control: control as any,
+ name: "videos",
+ });
+
+ return {
+ register,
+ handleSubmit,
+ isSubmitting,
+ errors,
+ isDirty,
+ dirtyFields,
+ trigger,
+ resetField,
+ //controllers
+ targetType,
+ logo,
+ banner,
+ desc,
+ videos,
+ };
+}
diff --git a/src/pages/Funds/Fund/FundContext.ts b/src/pages/Funds/Fund/FundContext.ts
new file mode 100644
index 0000000000..8d0d74ee09
--- /dev/null
+++ b/src/pages/Funds/Fund/FundContext.ts
@@ -0,0 +1,14 @@
+import type { SingleFund } from "@better-giving/fundraiser";
+import { isEmpty } from "helpers";
+import { createContext, useContext } from "react";
+
+export const FundContext = createContext({} as SingleFund);
+
+export const useFundContext = (): SingleFund => {
+ const val = useContext(FundContext);
+
+ if (isEmpty(Object.entries(val))) {
+ throw new Error("useFundContext should only be used inside FundContext");
+ }
+ return val;
+};
diff --git a/src/pages/Funds/Fund/PageError.tsx b/src/pages/Funds/Fund/PageError.tsx
new file mode 100644
index 0000000000..442c7997ae
--- /dev/null
+++ b/src/pages/Funds/Fund/PageError.tsx
@@ -0,0 +1,18 @@
+import { appRoutes } from "constants/routes";
+import { TriangleAlert } from "lucide-react";
+import { Link } from "react-router-dom";
+
+export default function PageError() {
+ return (
+
+
+ Failed to load nonprofit profile
+
+ Back to Marketplace
+
+
+ );
+}
diff --git a/src/pages/Funds/Fund/Skeleton.tsx b/src/pages/Funds/Fund/Skeleton.tsx
new file mode 100644
index 0000000000..b16a06bd9e
--- /dev/null
+++ b/src/pages/Funds/Fund/Skeleton.tsx
@@ -0,0 +1,12 @@
+import ContentLoader from "components/ContentLoader";
+
+export default function Skeleton() {
+ return (
+
+ );
+}
diff --git a/src/pages/Funds/Fund/index.tsx b/src/pages/Funds/Fund/index.tsx
new file mode 100644
index 0000000000..478285ef93
--- /dev/null
+++ b/src/pages/Funds/Fund/index.tsx
@@ -0,0 +1,179 @@
+import type { SingleFund } from "@better-giving/fundraiser";
+import { skipToken } from "@reduxjs/toolkit/query";
+import fallback_banner from "assets/images/fallback-banner.png";
+import flying_character from "assets/images/flying-character.png";
+import Image from "components/Image";
+import { RichText } from "components/RichText";
+import Seo from "components/Seo";
+import VerifiedIcon from "components/VerifiedIcon";
+import { Target, toTarget } from "components/target";
+import { APP_NAME, BASE_URL } from "constants/env";
+import { appRoutes } from "constants/routes";
+import { unpack } from "helpers";
+import { ArrowLeft } from "lucide-react";
+import { Link, useParams } from "react-router-dom";
+import { useFundQuery } from "services/aws/funds";
+import PageError from "./PageError";
+import Skeleton from "./Skeleton";
+import { Share } from "./share";
+import { Video } from "./video";
+
+const isClosed = (active: boolean, expiration?: string): boolean => {
+ const isExpired = expiration ? expiration < new Date().toISOString() : false;
+ return !active || isExpired;
+};
+
+export function Component() {
+ const { fundId = "" } = useParams();
+ const { isLoading, isError, data } = useFundQuery(fundId || skipToken);
+
+ if (isLoading) return ;
+ if (isError || !data) return ;
+
+ return (
+
+
+
+
+
+
+
+
Fundraisers
+
+
+
+
+
+ {data.verified && (
+
+ )}
+
+ {data.name}
+
+ {isClosed(data.active, data.expiration) && (
+
+ closed
+
+ )}
+
+
+
+ created by:
+
+
+ {data.creator || "dev@placeholder.com"}
+
+
+
+
+
+
+
+ {data.videos.map((v, idx) => (
+
+
+
+ ))}
+
+
+
+
+
+ Donations go to
+
+
+ {data.members.map((m) => (
+
+
+
+ {m.name}
+
+
+ ))}
+
+
+
+
+
+ Spread the word!
+
+
+ Encourage your friends to join in and contribute, making a collective
+ impact through donations.
+
+
+ {socials.map((s) => (
+
+ ))}
+
+
+ Share on {social.title}
+
+
+
+ Donate to {recipientName} fundraiser
+ on {social.handle}!{" "}
+ {`Every gift is invested to provide sustainable funding for nonprofits: Give once, give forever. Help join the cause: ${BASE_URL}.`}
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Funds/Funds.tsx b/src/pages/Funds/Funds.tsx
new file mode 100644
index 0000000000..844ebba4a4
--- /dev/null
+++ b/src/pages/Funds/Funds.tsx
@@ -0,0 +1,23 @@
+import { Search } from "lucide-react";
+import { useState } from "react";
+import Cards from "./Cards";
+
+export function Component() {
+ const [search, setSearch] = useState("");
+ return (
+
+
+
+ setSearch(e.target.value)}
+ className="w-full py-2 pr-3 placeholder:text-navy-l3 text-navy-d4 font-medium font-heading"
+ placeholder="Search fundraiser"
+ />
+
+
+
+ {fieldArray.fields.map((v, idx) => (
+ {
+ fieldArray.update(idx, { url });
+ }}
+ onDelete={(idx) => {
+ fieldArray.remove(idx);
+ }}
+ />
+ ))}
+
+ );
+}
diff --git a/src/pages/Funds/common/videos/types.ts b/src/pages/Funds/common/videos/types.ts
new file mode 100644
index 0000000000..e52c72d4cf
--- /dev/null
+++ b/src/pages/Funds/common/videos/types.ts
@@ -0,0 +1,16 @@
+import * as v from "valibot";
+const str = v.pipe(v.string("required"), v.trim());
+export const videoUrl = v.pipe(
+ str,
+ v.nonEmpty("required"),
+ v.url("invalid url")
+);
+export const video = v.object({
+ url: videoUrl,
+});
+
+export interface Video extends v.InferOutput {}
+
+export interface FV {
+ videos: Video[];
+}
diff --git a/src/pages/Funds/common/videos/video-modal.tsx b/src/pages/Funds/common/videos/video-modal.tsx
new file mode 100644
index 0000000000..e4e6d4375a
--- /dev/null
+++ b/src/pages/Funds/common/videos/video-modal.tsx
@@ -0,0 +1,76 @@
+import { valibotResolver } from "@hookform/resolvers/valibot";
+import Modal from "components/Modal";
+import { NativeField as Field } from "components/form";
+import { useModalContext } from "contexts/ModalContext";
+import { X } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { object } from "valibot";
+import { videoUrl } from "./types";
+
+interface IVideoModal {
+ onSubmit: (url: string) => void;
+ initUrl?: string;
+}
+
+export function VideoModal(props: IVideoModal) {
+ const { closeModal } = useModalContext();
+
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isDirty },
+ } = useForm({
+ resolver: valibotResolver(object({ url: videoUrl })),
+ defaultValues: { url: props.initUrl ?? "" },
+ });
+
+ return (
+ {
+ props.onSubmit(fv.url);
+ closeModal();
+ })}
+ className="fixed-center z-10 grid text-navy-d4 dark:text-white bg-white dark:bg-blue-d4 sm:w-full w-[90vw] sm:max-w-lg rounded overflow-hidden"
+ >
+
+
+ {props.initUrl ? "Edit" : "Add"} video
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Funds/common/videos/video-preview.tsx b/src/pages/Funds/common/videos/video-preview.tsx
new file mode 100644
index 0000000000..63ccae7b17
--- /dev/null
+++ b/src/pages/Funds/common/videos/video-preview.tsx
@@ -0,0 +1,68 @@
+import { useModalContext } from "contexts/ModalContext";
+import { Minus, Pencil } from "lucide-react";
+import type { ButtonHTMLAttributes } from "react";
+import ReactPlayer from "react-player";
+import type { Video } from "./types";
+import { VideoModal } from "./video-modal";
+
+interface IVideoPreview extends Video {
+ idx: number;
+ onEdit: (url: string, idx: number) => void;
+ onDelete: (idx: number) => void;
+}
+
+export function VideoPreview(props: IVideoPreview) {
+ const { showModal } = useModalContext();
+ return (
+
+
+
+ showModal(VideoModal, {
+ onSubmit: (url) => props.onEdit(url, props.idx),
+ initUrl: props.url,
+ })
+ }
+ >
+
+
+
props.onDelete(props.idx)}>
+
+
+
+ {/** render only thumbnails on lists */}
+ {/** @see https://github.com/CookPete/react-player/issues/145 */}
+
+ }
+ />
+
+
+
+
+
+
+
+
);
diff --git a/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Fundraisers.tsx b/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Fundraisers.tsx
new file mode 100644
index 0000000000..b96119e20b
--- /dev/null
+++ b/src/pages/Profile/Body/GeneralInfo/DetailsColumn/Fundraisers.tsx
@@ -0,0 +1,65 @@
+import type { FundItem } from "@better-giving/fundraiser";
+import { parseContent, toText } from "components/RichText";
+import { Target, toTarget } from "components/target";
+import { appRoutes } from "constants/routes";
+import { Link } from "react-router-dom";
+import { useFundsEndowMemberOfQuery } from "services/aws/endow-funds";
+
+interface Props {
+ endowId: number;
+ classes?: string;
+}
+/** fundraisers that `endowId` is the only member of (not an index fund) */
+export function Fundraisers({ endowId, classes = "" }: Props) {
+ const { data: funds = [] } = useFundsEndowMemberOfQuery({
+ endowId,
+ npoProfileFeatured: true,
+ });
+
+ if (funds.length === 0) return null;
+
+ return (
+
+
Fundraisers
+ {funds.map((f) => (
+
+ ))}
+
+ );
+}
+
+function Fund(props: FundItem) {
+ return (
+
+
+
+ {props.name}
+
+
+ {toText(parseContent(props.description))}
+
+
+
+ Donate
+
+
-
-
- );
-}
-
-function Unsuccessful({ recipientId }: { recipientId?: number }) {
- return (
-
-
-
- Donation unsuccessful
-
-
- Your donation was not successful, please try again.
-
-
- Back to the donation page
-
-
-
-
- Something went wrong
-
-
- An error occurred. Please retry your donation. If the problem persists,
- please get in touch with {EMAIL_SUPPORT}.
-
-
- Back to the donation page
-
-
+
+
{props.name}
+
+ {props.active ? "active" : "closed"}
+
+
+ edit
+
+
+ view
+
+
+
+
My Fundraisers
+
+ Create
+
+
+
+
+
+
+
+
+ ),
+ error: "Failed to get fundraisers",
+ empty: "You currently don't have any fundraisers",
+ }}
+ queryState={query}
+ >
+ {(funds) => (
+ <>
+ {funds.map((fund) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/src/pages/UserDashboard/Funds/index.ts b/src/pages/UserDashboard/Funds/index.ts
new file mode 100644
index 0000000000..0f4842aa81
--- /dev/null
+++ b/src/pages/UserDashboard/Funds/index.ts
@@ -0,0 +1 @@
+export { Funds as Component } from "./Funds";
diff --git a/src/pages/UserDashboard/UserDashboard.tsx b/src/pages/UserDashboard/UserDashboard.tsx
index c034a4309b..69ee98f8e6 100644
--- a/src/pages/UserDashboard/UserDashboard.tsx
+++ b/src/pages/UserDashboard/UserDashboard.tsx
@@ -2,7 +2,7 @@ import Seo from "components/Seo";
import { appRoutes } from "constants/routes";
import withAuth from "contexts/Auth";
import DashboardLayout from "layout/DashboardLayout";
-import type { RouteObject } from "react-router-dom";
+import { Outlet, type RouteObject } from "react-router-dom";
import Donations from "./Donations";
import EditProfile from "./EditProfile";
import Settings from "./Settings";
@@ -30,5 +30,10 @@ export const userDashboardRoute: RouteObject = {
{ path: routes.edit_profile, element: },
{ path: routes.donations, element: },
{ path: routes.settings, element: },
+ {
+ path: routes.funds,
+ element: ,
+ children: [{ index: true, lazy: () => import("./Funds") }],
+ },
],
};
diff --git a/src/pages/UserDashboard/routes.ts b/src/pages/UserDashboard/routes.ts
index 03ab3c6937..cd416935d7 100644
--- a/src/pages/UserDashboard/routes.ts
+++ b/src/pages/UserDashboard/routes.ts
@@ -1,10 +1,16 @@
import type { LinkGroup } from "layout/DashboardLayout";
-import { CircleDollarSign, CircleUserRound, Settings } from "lucide-react";
+import {
+ CircleDollarSign,
+ CircleUserRound,
+ Heart,
+ Settings,
+} from "lucide-react";
export const routes = {
index: "",
edit_profile: "edit-profile",
donations: "donations",
+ funds: "funds",
settings: "settings",
};
@@ -35,6 +41,14 @@ export const linkGroups: LinkGroup[] = [
size: 22,
},
},
+ {
+ title: "My fundraisers",
+ to: routes.funds,
+ icon: {
+ fn: Heart,
+ size: 21,
+ },
+ },
],
},
];
diff --git a/src/pages/Widget/Preview.tsx b/src/pages/Widget/Preview.tsx
index f710b6551b..f2041dfad1 100644
--- a/src/pages/Widget/Preview.tsx
+++ b/src/pages/Widget/Preview.tsx
@@ -24,7 +24,8 @@ export default function Preview({ classes = "", config }: Props) {
source: "bg-widget",
mode: "preview",
recipient: {
- ...endowment,
+ id: endowment.id.toString(),
+ name: endowment.name,
hide_bg_tip: data?.hide_bg_tip,
progDonationsAllowed: data?.progDonationsAllowed,
},
diff --git a/src/pages/donate-fund/content.tsx b/src/pages/donate-fund/content.tsx
new file mode 100644
index 0000000000..d72c188af4
--- /dev/null
+++ b/src/pages/donate-fund/content.tsx
@@ -0,0 +1,101 @@
+import type { SingleFund } from "@better-giving/fundraiser";
+import flying_character from "assets/images/flying-character.png";
+import ExtLink from "components/ExtLink";
+import { DappLogo } from "components/Image";
+import { Info } from "components/Status";
+import { Steps } from "components/donation";
+import { INTERCOM_HELP } from "constants/env";
+import { appRoutes } from "constants/routes";
+import { PRIVACY_POLICY } from "constants/urls";
+import { memo } from "react";
+import { Link } from "react-router-dom";
+import FAQ from "./faq";
+import { FundCard } from "./fund-card";
+
+const isClosed = (active: boolean, expiration?: string): boolean => {
+ const isExpired = expiration ? expiration < new Date().toISOString() : false;
+ return !active || isExpired;
+};
+
+function Content(fund: SingleFund) {
+ return (
+
+
+
+
+ Cancel
+
+
+
+
+
+
+ {/** small screen but space is still enough to render sidebar */}
+
+ {isClosed(fund.active, fund.expiration) ? (
+
+ This fund is already closed and can't accept any more donations
+
+ ) : (
+
+ )}
+
+
+
+
+ Need help? See{" "}
+
+ FAQs
+ {" "}
+ or contact us at our Help Center.
+
+
+ Have ideas for how we can build a better donation experience?{" "}
+ Send us feedback.
+
+
+ We respect your privacy. To learn more, check out our{" "}
+ Privacy Policy.
+
+
+
+
+
Frequently asked questions
+ {faqs(endowId).map((faq) => (
+
+ {({ open }) => (
+ <>
+
+
+ {faq.question}
+
+
+
+ {open && (
+
+ {faq.paragraphs.map((p, idx) => (
+ {p}
+ ))}
+
+ )}
+
+ )}
+
+ ))}
+
+ );
+}
+
+const faqs = (endowId: number) => [
+ {
+ id: 1,
+ question: "How does my donation work to benefit nonprofits?",
+ paragraphs: [
+
+ Donations are made to Altruistic Partners Empowering Society, DBA Better
+ Giving, a registered charitable 501(c)(3) (EIN 87-3758939).
+
,
+
+ For immediate donations, Better Giving grants out
+ the donations to the chosen nonprofit on a weekly basis.
+
,
+
+ For Sustainability Fund donations, these are
+ invested as a Board Managed quasi-endowment, and Better Giving grants
+ out 75% of the yield every quarter to the nonprofit, investing the other
+ 25% of the yield into the sustainability fund to mitigate against such
+ as inflation. In this way, donors can give today, but see the impact
+ continue into the future.
+
,
+ ],
+ },
+ {
+ id: 2,
+ question: "Can I receive a tax receipt?",
+ paragraphs: [
+ Yes, you can!
,
+
+ To the extent permitted by law in their own country or state, Donors are
+ entitled to a tax receipt for the full amount of their donation, which
+ includes any transaction fee they have incurred.
+
,
+
+ All Donors are encouraged to consult with their tax preparer regarding
+ the specific deductibility of their contribution(s).
+
,
+
+ Donors will need to provide KYD (know your donor) information including
+ name and address, and can download an annualized cumulative report of
+ all donations provided to nonprofits within Better Giving through their
+ 'My Donation' page. Donors can also request further copies of their tax
+ receipt.
+
,
+
+ To keep a permanent record of all your donations and print tax receipts,
+ create your own personal user account{" "}
+
+ here
+
+
,
+
+ Here is a short video showing how to do that:{" "}
+
+ https://youtu.be/74kEk7aQauA
+
+
,
+ ],
+ },
+ {
+ id: 3,
+ question: "How much does Better Giving charge?",
+ paragraphs: [
+
+ It is free to set up and use a Better Giving account. No subscriptions.
+ No upfront costs. No platform fees (unless a nonprofit has opted out of
+ offering donors a voluntary donation to Better Giving).
+
,
+ Payment processing fees from 3rd parties may apply.
,
+ ],
+ },
+ {
+ id: 4,
+ question: "How do I donate by Check?",
+ paragraphs: [
+
+ For gifts by check: Make your check out to{" "}
+
+ Altruistic Partners Empowering Society Inc
+
+ ,
write{" "}
+
+ endowment:{endowId}
+
+
+ donation split:__%
+ {" "}
+ in the memo section of the check, and send it to:{" "}
+
+ Miscellaneous Account Services
+
PNC Bank
+
P.O. Box 8108
+
Philadelphia, PA 19101-8108
+
+
,
+ ],
+ },
+];
+
+function Em({
+ classes = "",
+ children,
+ intensity = 1,
+}: PropsWithChildren & { intensity?: 1 | 2 | 3; classes?: string }) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/pages/donate-fund/fund-card.tsx b/src/pages/donate-fund/fund-card.tsx
new file mode 100644
index 0000000000..8ad2ca4674
--- /dev/null
+++ b/src/pages/donate-fund/fund-card.tsx
@@ -0,0 +1,45 @@
+import Image from "components/Image";
+import { parseContent, toText } from "components/RichText";
+import { Target } from "components/target";
+import { appRoutes } from "constants/routes";
+import { Link } from "react-router-dom";
+
+type Props = {
+ id: string;
+ progress: number;
+ name: string;
+ logo: string;
+ tagline?: string;
+ classes?: string;
+};
+export function FundCard({ classes = "", ...props }: Props) {
+ return (
+
+
+
+
+ {props.name}
+
+ {props.tagline && (
+
+ {toText(parseContent(props.tagline))}
+
+ )}
+
+
}
+ progress={props.progress}
+ target="smart"
+ classes="order-1 @xl/fund-card:order-2"
+ />
+