Fb fundraisers

package.json

@@ -32,7 +32,9 @@
   },
   "dependencies": {
     "@better-giving/assets": "1.0.18",
+    "@better-giving/donation": "1.0.1",
     "@better-giving/endowment": "1.0.29",
+    "@better-giving/fundraiser": "1.0.5",
     "@better-giving/registration": "1.0.24",
     "@better-giving/schemas": "1.0.1",
     "@better-giving/types": "1.0.1",
@@ -58,7 +60,6 @@
     "nprogress": "0.2.0",
     "qrcode.react": "3.1.0",
     "quill": "2.0.2",
-    "quill-delta": "5.1.0",
     "react": "18.2.0",
     "react-chariot-connect": "1.0.8",
     "react-csv": "2.2.2",

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";
@@ -39,6 +40,7 @@ const widgetRoutes: RO[] = [
 const _appRoutes: RO[] = [
   adminRoute,
   regRoute,
+  fundsRoute,
   userDashboardRoute,
   ...blogRoutes,
   ...legalRoutes,
@@ -93,6 +95,10 @@ const _appRoutes: RO[] = [
 
 const rootRoutes: RO[] = [
   { path: `${appRoutes.donate}/:id`, lazy: () => import("pages/Donate") },
+  {
+    path: `${appRoutes.donate_fund}/:id`,
+    lazy: () => import("pages/donate-fund"),
+  },
   //outlet-value: isInWidget/widgetVersion
   { element: <Layout />, children: _appRoutes },
   {

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/App/constants.ts

@@ -15,6 +15,11 @@ const HEADER_LINKS: Link[] = [
     href: appRoutes.marketplace,
     end: true,
   },
+  {
+    title: "Fundraisers",
+    href: appRoutes.funds,
+    end: true,
+  },
   {
     title: "Blog",
     href: appRoutes.blog,

src/components/RichText/helpers.ts

@@ -1,21 +1,32 @@
-import Delta from "quill-delta";
+import Quill, { Delta } from "quill/core";
 import type { RichTextContent } from "types/components";
 
+const quill = new Quill(document.createElement("div"));
+
 export const parseContent = (content?: string): RichTextContent => {
   if (!content) return { length: 0, value: "" };
   try {
     const ops = JSON.parse(content);
     const delta = new Delta(ops);
     return { value: content, length: delta.length() - 1 };
   } catch (_) {
-    return { length: 0, value: "" };
+    return { length: content.length, value: content };
   }
 };
 
 export const toDelta = (content: RichTextContent): Delta => {
   try {
     return new Delta(JSON.parse(content.value));
   } catch (_) {
-    return new Delta();
+    return new Delta([{ insert: content.value }]);
+  }
+};
+
+export const toText = (content: RichTextContent): string => {
+  try {
+    quill.setContents(toDelta(content));
+    return quill.getText();
+  } catch (_) {
+    return content.value;
   }
 };

src/components/RichText/index.ts

@@ -1,3 +1,3 @@
 export * from "./RichTextEditor";
-export { parseContent } from "./helpers";
+export { parseContent, toDelta, toText } from "./helpers";
 export { RichText } from "./RichText";

src/components/VerifiedIcon.tsx

@@ -6,7 +6,7 @@ export default function VerifiedIcon({ size, classes = "" }: Props) {
   return (
     <Tooltip
       tip={
-        <Content className="bg-navy-d4 text-white px-4 py-2 rounded text-sm shadow-md">
+        <Content className="bg-navy-d4 text-white px-4 py-2 rounded text-sm shadow-md z-10">
           Verified
           <Arrow className="fill-navy-d4" />
         </Content>

src/components/donation/Steps/DonateMethods/Crypto/Form.test.tsx

@@ -28,7 +28,7 @@ describe("Crypto form: initial load", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "" },
+      recipient: { id: "0", name: "" },
       mode: "live",
     };
 
@@ -43,7 +43,7 @@ describe("Crypto form: initial load", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "", progDonationsAllowed: false },
+      recipient: { id: "0", name: "", progDonationsAllowed: false },
       mode: "live",
     };
 
@@ -62,7 +62,7 @@ describe("Crypto form: initial load", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "" },
+      recipient: { id: "0", name: "" },
       mode: "live",
     };
 
@@ -96,7 +96,7 @@ describe("Crypto form: initial load", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "" },
+      recipient: { id: "0", name: "" },
       mode: "live",
     };
 
@@ -120,7 +120,7 @@ describe("Crypto form: initial load", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "" },
+      recipient: { id: "0", name: "" },
       mode: "live",
     };
 

src/components/donation/Steps/DonateMethods/Crypto/Form.tsx

@@ -55,7 +55,7 @@ export default function Form(props: CryptoFormStep) {
       {(props.init.recipient.progDonationsAllowed ?? true) && (
         <ProgramSelector
           classes="my-2"
-          endowId={props.init.recipient.id}
+          endowId={+props.init.recipient.id}
           program={program.value}
           onChange={program.onChange}
         />

src/components/donation/Steps/DonateMethods/Daf/Form.test.tsx

@@ -23,7 +23,7 @@ describe("DAF form test", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "" },
+      recipient: { id: "0", name: "" },
       mode: "live",
     };
 
@@ -39,7 +39,7 @@ describe("DAF form test", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "", progDonationsAllowed: false },
+      recipient: { id: "0", name: "", progDonationsAllowed: false },
       mode: "live",
     };
     render(<_Form init={init} step="donate-form" />);
@@ -53,7 +53,7 @@ describe("DAF form test", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "" },
+      recipient: { id: "0", name: "" },
       mode: "live",
     };
     const details: DafDonationDetails = {
@@ -75,7 +75,7 @@ describe("DAF form test", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "", progDonationsAllowed: false },
+      recipient: { id: "0", name: "", progDonationsAllowed: false },
       mode: "live",
     };
     render(<_Form init={init} step="donate-form" />);

src/components/donation/Steps/DonateMethods/Daf/Form.tsx

@@ -55,7 +55,7 @@ export default function Form(props: Props) {
 
       {(props.init.recipient.progDonationsAllowed ?? true) && (
         <ProgramSelector
-          endowId={props.init.recipient.id}
+          endowId={+props.init.recipient.id}
           program={rhf.program.value}
           onChange={rhf.program.onChange}
         />

src/components/donation/Steps/DonateMethods/Stocks/Form.test.tsx

@@ -23,7 +23,7 @@ describe("stocks form test", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "" },
+      recipient: { id: "0", name: "" },
       mode: "live",
     };
     render(<_Form init={init} step="donate-form" />);
@@ -42,7 +42,7 @@ describe("stocks form test", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "", progDonationsAllowed: false },
+      recipient: { id: "0", name: "", progDonationsAllowed: false },
       mode: "live",
     };
     render(<_Form init={init} step="donate-form" />);
@@ -55,7 +55,7 @@ describe("stocks form test", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "" },
+      recipient: { id: "0", name: "" },
       mode: "live",
     };
     const details: StocksDonationDetails = {
@@ -84,7 +84,7 @@ describe("stocks form test", () => {
     const init: Init = {
       source: "bg-marketplace",
       config: null,
-      recipient: { id: 0, name: "", progDonationsAllowed: false },
+      recipient: { id: "0", name: "", progDonationsAllowed: false },
       mode: "live",
     };
     render(<_Form init={init} step="donate-form" />);

src/components/donation/Steps/DonateMethods/Stocks/Form.tsx

@@ -87,7 +87,7 @@ export default function Form(props: StockFormStep) {
       {(props.init.recipient.progDonationsAllowed ?? true) && (
         <ProgramSelector
           classes="mt-6 mb-4"
-          endowId={props.init.recipient.id}
+          endowId={+props.init.recipient.id}
           program={program.value}
           onChange={program.onChange}
         />

src/components/donation/Steps/DonateMethods/Stripe/Form.test.tsx

@@ -23,7 +23,7 @@ const init: Init = {
   source: "bg-marketplace",
   mode: "live",
   recipient: {
-    id: 123456,
+    id: "123456",
     name: "Example Endowment",
   },
   config: null,
@@ -93,7 +93,7 @@ describe("Stripe form test", () => {
       source: "bg-marketplace",
       mode: "live",
       recipient: {
-        id: 123456,
+        id: "123456",
         name: "Example Endowment",
         progDonationsAllowed: false,
       },

src/components/donation/Steps/DonateMethods/Stripe/Form.tsx

@@ -89,7 +89,7 @@ function Form({ currencies, defaultCurr, ...props }: FormProps) {
       {(props.init.recipient.progDonationsAllowed ?? true) && (
         <ProgramSelector
           classes="mt-4"
-          endowId={props.init.recipient.id}
+          endowId={+props.init.recipient.id}
           program={rhf.program.value}
           onChange={rhf.program.onChange}
         />

src/components/donation/Steps/Steps.test.tsx

@@ -24,7 +24,7 @@ describe("donation flow", () => {
     const state: DonationState = {
       step: "donate-form",
       init: {
-        recipient: { id: 1, name: "test" },
+        recipient: { id: "1", name: "test" },
         source: "bg-marketplace",
         mode: "live",
         config: null,
@@ -53,7 +53,7 @@ describe("donation flow", () => {
     const state: DonationState = {
       step: "donate-form",
       init: {
-        recipient: { id: 1, name: "test", hide_bg_tip: true },
+        recipient: { id: "1", name: "test", hide_bg_tip: true },
         source: "bg-marketplace",
         mode: "live",
         config: null,
@@ -86,7 +86,7 @@ describe("donation flow", () => {
     const state: DonationState = {
       step: "tip",
       init: {
-        recipient: { id: 1, name: "test" },
+        recipient: { id: "1", name: "test" },
         source: "bg-marketplace",
         mode: "live",
         config: null,
@@ -129,7 +129,7 @@ describe("donation flow", () => {
     const state: DonationState = {
       step: "tip",
       init: {
-        recipient: { id: 1, name: "test" },
+        recipient: { id: "1", name: "test" },
         source: "bg-marketplace",
         mode: "live",
         config: null,