@churchapps/apphelper 0.1.3 → 0.1.4

package/src/donationComponents/components/PaymentMethods.tsx

@@ -1,135 +1,135 @@
-import React from "react";
-import { Stripe } from "@stripe/stripe-js";
-import { Elements } from "@stripe/react-stripe-js";
-import { CardForm, BankForm } from ".";
-import { DisplayBox, Loading } from "../../components";
-import { ApiHelper, UserHelper } from "../../helpers";
-import { PersonInterface, StripePaymentMethod, Permissions } from "../../interfaces";
-import { Icon, Table, TableBody, TableCell, TableRow, IconButton, Menu, MenuItem } from "@mui/material";
-
-interface Props { person: PersonInterface, customerId: string, paymentMethods: StripePaymentMethod[], stripePromise: Promise<Stripe>, appName: string, dataUpdate: (message?: string) => void }
-
-export const PaymentMethods: React.FC<Props> = (props) => {
-  const [editPaymentMethod, setEditPaymentMethod] = React.useState<StripePaymentMethod>(new StripePaymentMethod());
-  const [mode, setMode] = React.useState("display");
-  const [verify, setVerify] = React.useState<boolean>(false);
-
-  const handleEdit = (pm?: StripePaymentMethod, verifyAccount?: boolean) => (e: React.MouseEvent) => {
-    e.preventDefault();
-    setEditPaymentMethod(pm);
-    setVerify(verifyAccount)
-    setMode("edit");
-  }
-
-  const handleDelete = async () => {
-    let confirmed = window.confirm("Are you sure you want to delete this payment method?");
-    if (confirmed) {
-      ApiHelper.delete("/paymentmethods/" + editPaymentMethod.id + "/" + props.customerId, "GivingApi").then(() => {
-        setMode("display");
-        props.dataUpdate("Payment method deleted.");
-      })
-    }
-  }
-
-  const MenuIcon = () => {
-    const [anchorEl, setAnchorEl] = React.useState(null);
-    const open = Boolean(anchorEl);
-    const handleClick = (e: React.MouseEvent) => {
-      setAnchorEl(e.currentTarget);
-    };
-    const handleClose = () => {
-      setAnchorEl(null);
-    };
-    return (
-      <>
-        <IconButton
-          aria-label="add-button"
-          id="addBtnGroup"
-          aria-controls={open ? "add-menu" : undefined}
-          aria-expanded={open ? "true" : undefined}
-          aria-haspopup="true"
-          onClick={handleClick}
-        >
-          <Icon color="primary">add</Icon>
-        </IconButton>
-        <Menu
-          id="add-menu"
-          MenuListProps={{
-            "aria-labelledby": "addBtnGroup"
-          }}
-          anchorEl={anchorEl}
-          open={open}
-          onClose={handleClose}
-        >
-          <MenuItem aria-label="add-card" onClick={handleEdit(new StripePaymentMethod({ type: "card" }))}>
-            <Icon sx={{mr: "3px"}}>credit_card</Icon> Add Card
-          </MenuItem>
-          <MenuItem aria-label="add-bank" onClick={handleEdit(new StripePaymentMethod({ type: "bank" }))}>
-            <Icon sx={{mr: "3px"}}>account_balance</Icon> Add Bank
-          </MenuItem>
-        </Menu>
-      </>
-    );
-  }
-
-  const getNewContent = () => {
-    if (!UserHelper.checkAccess(Permissions.givingApi.settings.edit) && props.appName !== "B1App") return null;
-    return <MenuIcon />;
-  }
-
-  const getEditOptions = (pm: StripePaymentMethod) => {
-    if (!UserHelper.checkAccess(Permissions.givingApi.settings.edit) && props.appName !== "B1App") return null;
-    return <a aria-label="edit-button" onClick={handleEdit(pm)} href="about:blank"><Icon>edit</Icon></a>;
-  }
-
-  const getPMIcon = (type: string) => (type === "card" ? <Icon>credit_card</Icon> : <Icon>account_balance</Icon>)
-
-  const getPaymentRows = () => {
-    let rows: JSX.Element[] = [];
-
-    props.paymentMethods.forEach((method: StripePaymentMethod) => {
-      rows.push(
-        <TableRow key={method.id}>
-          <TableCell className="capitalize">{getPMIcon(method.type)} {method.name + " ****" + method.last4}</TableCell>
-          <TableCell>{method?.status === "new" && <a href="about:blank" aria-label="verify-account" onClick={handleEdit(method, true)}>Verify Account</a>}</TableCell>
-          <TableCell align="right">{getEditOptions(method)}</TableCell>
-        </TableRow>
-      );
-    });
-    return rows;
-  }
-
-  const PaymentMethodsTable = () => {
-    if (!props.paymentMethods) return <Loading></Loading>
-    if (props.paymentMethods.length) {
-      return (
-        <Table>
-          <TableBody>
-            {getPaymentRows()}
-          </TableBody>
-        </Table>
-      );
-    }
-    else return <div>No payment methods. Add a payment method to make a donation.</div>
-  }
-
-  const EditForm = () => (
-    <Elements stripe={props.stripePromise}>
-      {editPaymentMethod.type === "card" && <CardForm card={editPaymentMethod} customerId={props.customerId} person={props.person} setMode={setMode} deletePayment={handleDelete} updateList={(message) => { props.dataUpdate(message) }} />}
-      {editPaymentMethod.type === "bank" && <BankForm bank={editPaymentMethod} showVerifyForm={verify} customerId={props.customerId} person={props.person} setMode={setMode} deletePayment={handleDelete} updateList={(message) => { props.dataUpdate(message) }} />}
-    </Elements>
-  )
-
-  const PaymentMethods = () => {
-    if (mode === "display") {
-      return (
-        <DisplayBox aria-label="payment-methods-box" headerIcon="credit_card" headerText="Payment Methods" editContent={getNewContent()}>
-          <PaymentMethodsTable></PaymentMethodsTable>
-        </DisplayBox>
-      );
-    }
-    else return <EditForm></EditForm>;
-  }
-
-  return props.stripePromise ? <PaymentMethods></PaymentMethods> : null;
-}
+import React from "react";
+import { Stripe } from "@stripe/stripe-js";
+import { Elements } from "@stripe/react-stripe-js";
+import { CardForm, BankForm } from ".";
+import { DisplayBox, Loading } from "../../components";
+import { ApiHelper, UserHelper } from "../../helpers";
+import { PersonInterface, StripePaymentMethod, Permissions } from "../../interfaces";
+import { Icon, Table, TableBody, TableCell, TableRow, IconButton, Menu, MenuItem } from "@mui/material";
+
+interface Props { person: PersonInterface, customerId: string, paymentMethods: StripePaymentMethod[], stripePromise: Promise<Stripe>, appName: string, dataUpdate: (message?: string) => void }
+
+export const PaymentMethods: React.FC<Props> = (props) => {
+  const [editPaymentMethod, setEditPaymentMethod] = React.useState<StripePaymentMethod>(new StripePaymentMethod());
+  const [mode, setMode] = React.useState("display");
+  const [verify, setVerify] = React.useState<boolean>(false);
+
+  const handleEdit = (pm?: StripePaymentMethod, verifyAccount?: boolean) => (e: React.MouseEvent) => {
+    e.preventDefault();
+    setEditPaymentMethod(pm);
+    setVerify(verifyAccount)
+    setMode("edit");
+  }
+
+  const handleDelete = async () => {
+    let confirmed = window.confirm("Are you sure you want to delete this payment method?");
+    if (confirmed) {
+      ApiHelper.delete("/paymentmethods/" + editPaymentMethod.id + "/" + props.customerId, "GivingApi").then(() => {
+        setMode("display");
+        props.dataUpdate("Payment method deleted.");
+      })
+    }
+  }
+
+  const MenuIcon = () => {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (e: React.MouseEvent) => {
+      setAnchorEl(e.currentTarget);
+    };
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+    return (
+      <>
+        <IconButton
+          aria-label="add-button"
+          id="addBtnGroup"
+          aria-controls={open ? "add-menu" : undefined}
+          aria-expanded={open ? "true" : undefined}
+          aria-haspopup="true"
+          onClick={handleClick}
+        >
+          <Icon color="primary">add</Icon>
+        </IconButton>
+        <Menu
+          id="add-menu"
+          MenuListProps={{
+            "aria-labelledby": "addBtnGroup"
+          }}
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleClose}
+        >
+          <MenuItem aria-label="add-card" onClick={handleEdit(new StripePaymentMethod({ type: "card" }))}>
+            <Icon sx={{mr: "3px"}}>credit_card</Icon> Add Card
+          </MenuItem>
+          <MenuItem aria-label="add-bank" onClick={handleEdit(new StripePaymentMethod({ type: "bank" }))}>
+            <Icon sx={{mr: "3px"}}>account_balance</Icon> Add Bank
+          </MenuItem>
+        </Menu>
+      </>
+    );
+  }
+
+  const getNewContent = () => {
+    if (!UserHelper.checkAccess(Permissions.givingApi.settings.edit) && props.appName !== "B1App") return null;
+    return <MenuIcon />;
+  }
+
+  const getEditOptions = (pm: StripePaymentMethod) => {
+    if (!UserHelper.checkAccess(Permissions.givingApi.settings.edit) && props.appName !== "B1App") return null;
+    return <a aria-label="edit-button" onClick={handleEdit(pm)} href="about:blank"><Icon>edit</Icon></a>;
+  }
+
+  const getPMIcon = (type: string) => (type === "card" ? <Icon>credit_card</Icon> : <Icon>account_balance</Icon>)
+
+  const getPaymentRows = () => {
+    let rows: JSX.Element[] = [];
+
+    props.paymentMethods.forEach((method: StripePaymentMethod) => {
+      rows.push(
+        <TableRow key={method.id}>
+          <TableCell className="capitalize">{getPMIcon(method.type)} {method.name + " ****" + method.last4}</TableCell>
+          <TableCell>{method?.status === "new" && <a href="about:blank" aria-label="verify-account" onClick={handleEdit(method, true)}>Verify Account</a>}</TableCell>
+          <TableCell align="right">{getEditOptions(method)}</TableCell>
+        </TableRow>
+      );
+    });
+    return rows;
+  }
+
+  const PaymentMethodsTable = () => {
+    if (!props.paymentMethods) return <Loading></Loading>
+    if (props.paymentMethods.length) {
+      return (
+        <Table>
+          <TableBody>
+            {getPaymentRows()}
+          </TableBody>
+        </Table>
+      );
+    }
+    else return <div>No payment methods. Add a payment method to make a donation.</div>
+  }
+
+  const EditForm = () => (
+    <Elements stripe={props.stripePromise}>
+      {editPaymentMethod.type === "card" && <CardForm card={editPaymentMethod} customerId={props.customerId} person={props.person} setMode={setMode} deletePayment={handleDelete} updateList={(message) => { props.dataUpdate(message) }} />}
+      {editPaymentMethod.type === "bank" && <BankForm bank={editPaymentMethod} showVerifyForm={verify} customerId={props.customerId} person={props.person} setMode={setMode} deletePayment={handleDelete} updateList={(message) => { props.dataUpdate(message) }} />}
+    </Elements>
+  )
+
+  const PaymentMethods = () => {
+    if (mode === "display") {
+      return (
+        <DisplayBox aria-label="payment-methods-box" headerIcon="credit_card" headerText="Payment Methods" editContent={getNewContent()}>
+          <PaymentMethodsTable></PaymentMethodsTable>
+        </DisplayBox>
+      );
+    }
+    else return <EditForm></EditForm>;
+  }
+
+  return props.stripePromise ? <PaymentMethods></PaymentMethods> : null;
+}

package/src/donationComponents/components/RecurringDonations.tsx

@@ -1,121 +1,121 @@
-import React from "react";
-import { DisplayBox } from "../../components";
-import { ApiHelper, UserHelper, CurrencyHelper, DateHelper } from "../../helpers";
-import { Permissions, SubscriptionInterface } from "../../interfaces";
-import { RecurringDonationsEdit } from ".";
-import { Icon, Table, TableBody, TableCell, TableRow, TableHead } from "@mui/material";
-
-interface Props { customerId: string, paymentMethods: any[], appName: string, dataUpdate: (message?: string) => void, };
-
-export const RecurringDonations: React.FC<Props> = (props) => {
-  const [subscriptions, setSubscriptions] = React.useState<SubscriptionInterface[]>([]);
-  const [mode, setMode] = React.useState("display");
-  const [editSubscription, setEditSubscription] = React.useState<SubscriptionInterface>();
-
-  const loadData = () => {
-    if (props.customerId) {
-      ApiHelper.get("/customers/" + props.customerId + "/subscriptions", "GivingApi").then(subResult => {
-        const subs: SubscriptionInterface[] = [];
-        const requests = subResult.data?.map((s: any) => ApiHelper.get("/subscriptionfunds?subscriptionId=" + s.id, "GivingApi").then(subFunds => {
-          s.funds = subFunds;
-          subs.push(s);
-        }));
-        return requests && Promise.all(requests).then(() => {
-          setSubscriptions(subs);
-        });
-      });
-    }
-  }
-
-  const handleUpdate = (message: string) => {
-    loadData();
-    setMode("display");
-    if (message) props.dataUpdate(message);
-  }
-
-  const handleEdit = (sub: SubscriptionInterface) => (e: React.MouseEvent) => {
-    e.preventDefault();
-    setEditSubscription(sub);
-    setMode("edit");
-  }
-
-  const getPaymentMethod = (sub: SubscriptionInterface) => {
-    const pm = props.paymentMethods.find((pm: any) => pm.id === (sub.default_payment_method || sub.default_source));
-    if (!pm) return <span style={{ color: "red" }}>Payment method not found.</span>;
-    return `${pm.name} ****${pm.last4}`;
-  }
-
-  const getInterval = (subscription: SubscriptionInterface) => {
-    let interval = subscription.plan.interval_count + " " + subscription.plan.interval;
-    return subscription.plan.interval_count > 1 ? interval + "s" : interval;
-  }
-
-  const getFunds = (subscription: SubscriptionInterface) => {
-    let result: JSX.Element[] = [];
-    subscription.funds.forEach((fund: any) => {
-      result.push(
-        <div key={subscription.id + fund.id}>
-          {fund.name} <span style={{ float: "right" }}>{CurrencyHelper.formatCurrency(fund.amount)}</span>
-        </div>
-      );
-    });
-    const total = (subscription.plan.amount / 100);
-    result.push(
-      <div key={subscription.id + "-total"} style={{ borderTop: "solid #dee2e6 1px" }}>
-        Total <span style={{ float: "right" }}>{CurrencyHelper.formatCurrency(total)}</span>
-      </div>
-    );
-    return result;
-  }
-
-  const getEditOptions = (sub: SubscriptionInterface) => {
-    if ((!UserHelper.checkAccess(Permissions.givingApi.settings.edit) && props.appName !== "B1App") || props?.paymentMethods?.length === 0) return null;
-    return <a aria-label="edit-button" onClick={handleEdit(sub)} href="about:blank"><Icon>edit</Icon></a>;
-  }
-
-  const getTableHeader = () => {
-    let result: JSX.Element[] = [];
-    result.push(<TableRow key="header" sx={{textAlign: "left"}}><TableCell><b>Start Date</b></TableCell><TableCell><b>Amount</b></TableCell><TableCell><b>Interval</b></TableCell><TableCell><b>Payment Method</b></TableCell>{props?.paymentMethods?.length > 0 && <TableCell></TableCell>}</TableRow>);
-    return result;
-  }
-
-  const getTableRows = () => {
-    let rows: JSX.Element[] = [];
-
-    subscriptions.forEach((sub: any) => {
-      rows.push(
-        <TableRow key={sub.id}>
-          <TableCell>{DateHelper.prettyDate(new Date(sub.billing_cycle_anchor * 1000))}</TableCell>
-          <TableCell>{getFunds(sub)}</TableCell>
-          <TableCell>Every {getInterval(sub)}</TableCell>
-          <TableCell className="capitalize">{getPaymentMethod(sub)}</TableCell>
-          <TableCell align="right">{getEditOptions(sub)}</TableCell>
-        </TableRow>
-      );
-    });
-    return rows;
-  }
-
-  const getSubscriptionsTable = () => (
-    <Table>
-      <TableHead>{getTableHeader()}</TableHead>
-      <TableBody>{getTableRows()}</TableBody>
-    </Table>
-  )
-
-  React.useEffect(loadData, []); //eslint-disable-line
-
-  if (!subscriptions.length) return null;
-  if (mode === "display") {
-    return (
-      <DisplayBox data-cy="recurring-donations" headerIcon="restart_alt" headerText="Recurring Donations">
-        {getSubscriptionsTable()}
-      </DisplayBox>
-    );
-  }
-  if (mode === "edit" && editSubscription) {
-    return (
-      <RecurringDonationsEdit customerId={props.customerId} paymentMethods={props.paymentMethods} editSubscription={editSubscription} subscriptionUpdated={handleUpdate} />
-    );
-  }
-}
+import React from "react";
+import { DisplayBox } from "../../components";
+import { ApiHelper, UserHelper, CurrencyHelper, DateHelper } from "../../helpers";
+import { Permissions, SubscriptionInterface } from "../../interfaces";
+import { RecurringDonationsEdit } from ".";
+import { Icon, Table, TableBody, TableCell, TableRow, TableHead } from "@mui/material";
+
+interface Props { customerId: string, paymentMethods: any[], appName: string, dataUpdate: (message?: string) => void, };
+
+export const RecurringDonations: React.FC<Props> = (props) => {
+  const [subscriptions, setSubscriptions] = React.useState<SubscriptionInterface[]>([]);
+  const [mode, setMode] = React.useState("display");
+  const [editSubscription, setEditSubscription] = React.useState<SubscriptionInterface>();
+
+  const loadData = () => {
+    if (props.customerId) {
+      ApiHelper.get("/customers/" + props.customerId + "/subscriptions", "GivingApi").then(subResult => {
+        const subs: SubscriptionInterface[] = [];
+        const requests = subResult.data?.map((s: any) => ApiHelper.get("/subscriptionfunds?subscriptionId=" + s.id, "GivingApi").then(subFunds => {
+          s.funds = subFunds;
+          subs.push(s);
+        }));
+        return requests && Promise.all(requests).then(() => {
+          setSubscriptions(subs);
+        });
+      });
+    }
+  }
+
+  const handleUpdate = (message: string) => {
+    loadData();
+    setMode("display");
+    if (message) props.dataUpdate(message);
+  }
+
+  const handleEdit = (sub: SubscriptionInterface) => (e: React.MouseEvent) => {
+    e.preventDefault();
+    setEditSubscription(sub);
+    setMode("edit");
+  }
+
+  const getPaymentMethod = (sub: SubscriptionInterface) => {
+    const pm = props.paymentMethods.find((pm: any) => pm.id === (sub.default_payment_method || sub.default_source));
+    if (!pm) return <span style={{ color: "red" }}>Payment method not found.</span>;
+    return `${pm.name} ****${pm.last4}`;
+  }
+
+  const getInterval = (subscription: SubscriptionInterface) => {
+    let interval = subscription.plan.interval_count + " " + subscription.plan.interval;
+    return subscription.plan.interval_count > 1 ? interval + "s" : interval;
+  }
+
+  const getFunds = (subscription: SubscriptionInterface) => {
+    let result: JSX.Element[] = [];
+    subscription.funds.forEach((fund: any) => {
+      result.push(
+        <div key={subscription.id + fund.id}>
+          {fund.name} <span style={{ float: "right" }}>{CurrencyHelper.formatCurrency(fund.amount)}</span>
+        </div>
+      );
+    });
+    const total = (subscription.plan.amount / 100);
+    result.push(
+      <div key={subscription.id + "-total"} style={{ borderTop: "solid #dee2e6 1px" }}>
+        Total <span style={{ float: "right" }}>{CurrencyHelper.formatCurrency(total)}</span>
+      </div>
+    );
+    return result;
+  }
+
+  const getEditOptions = (sub: SubscriptionInterface) => {
+    if ((!UserHelper.checkAccess(Permissions.givingApi.settings.edit) && props.appName !== "B1App") || props?.paymentMethods?.length === 0) return null;
+    return <a aria-label="edit-button" onClick={handleEdit(sub)} href="about:blank"><Icon>edit</Icon></a>;
+  }
+
+  const getTableHeader = () => {
+    let result: JSX.Element[] = [];
+    result.push(<TableRow key="header" sx={{textAlign: "left"}}><TableCell><b>Start Date</b></TableCell><TableCell><b>Amount</b></TableCell><TableCell><b>Interval</b></TableCell><TableCell><b>Payment Method</b></TableCell>{props?.paymentMethods?.length > 0 && <TableCell></TableCell>}</TableRow>);
+    return result;
+  }
+
+  const getTableRows = () => {
+    let rows: JSX.Element[] = [];
+
+    subscriptions.forEach((sub: any) => {
+      rows.push(
+        <TableRow key={sub.id}>
+          <TableCell>{DateHelper.prettyDate(new Date(sub.billing_cycle_anchor * 1000))}</TableCell>
+          <TableCell>{getFunds(sub)}</TableCell>
+          <TableCell>Every {getInterval(sub)}</TableCell>
+          <TableCell className="capitalize">{getPaymentMethod(sub)}</TableCell>
+          <TableCell align="right">{getEditOptions(sub)}</TableCell>
+        </TableRow>
+      );
+    });
+    return rows;
+  }
+
+  const getSubscriptionsTable = () => (
+    <Table>
+      <TableHead>{getTableHeader()}</TableHead>
+      <TableBody>{getTableRows()}</TableBody>
+    </Table>
+  )
+
+  React.useEffect(loadData, []); //eslint-disable-line
+
+  if (!subscriptions.length) return null;
+  if (mode === "display") {
+    return (
+      <DisplayBox data-cy="recurring-donations" headerIcon="restart_alt" headerText="Recurring Donations">
+        {getSubscriptionsTable()}
+      </DisplayBox>
+    );
+  }
+  if (mode === "edit" && editSubscription) {
+    return (
+      <RecurringDonationsEdit customerId={props.customerId} paymentMethods={props.paymentMethods} editSubscription={editSubscription} subscriptionUpdated={handleUpdate} />
+    );
+  }
+}