@churchapps/apphelper 0.4.9 → 0.4.10

package/src/donationComponents/components/FundDonations.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import React from "react";
+import { FundDonation } from ".";
+import { FundDonationInterface, FundInterface } from "@churchapps/helpers";
+import { Locale } from "../../helpers";
+
+interface Props { fundDonations: FundDonationInterface[], funds: FundInterface[], params?: any, updatedFunction: (fundDonations: FundDonationInterface[]) => void }
+
+export const FundDonations: React.FC<Props> = (props) => {
+  const handleUpdated = (fundDonation: FundDonationInterface, index: number) => {
+    const fundDonations = [...props.fundDonations];
+    fundDonations[index] = fundDonation;
+    props.updatedFunction(fundDonations);
+  };
+
+  const addRow = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const fundDonations = [...props.fundDonations];
+    const fd = { fundId: props.funds[0].id } as FundDonationInterface;
+    fundDonations.push(fd);
+    props.updatedFunction(fundDonations);
+  };
+
+  const getRows = () => {
+    const result = [];
+    for (let i = 0; i < props.fundDonations.length; i++) {
+      const fd = props.fundDonations[i];
+      result.push(<FundDonation fundDonation={fd} funds={props.funds} updatedFunction={handleUpdated} params={props?.params} key={i} index={i} />);
+    }
+
+    return result;
+  };
+
+  return (
+    <>
+      {getRows()}
+      {(!props?.params?.fundId || props?.params?.fundId === "") &&
+        <a href="about:blank" aria-label="add-fund-donation" className="text-decoration" style={{ display: "block", marginBottom: "15px" }} onClick={addRow}>{Locale.label("donation.fundDonations.addMore")}</a>
+      }
+    </>
+  );
+};
+

package/src/donationComponents/components/PaymentMethods.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import React from "react";
+import type { Stripe } from "@stripe/stripe-js";
+import { Elements } from "@stripe/react-stripe-js";
+import { CardForm, BankForm } from ".";
+import { DisplayBox, Loading } from "../../components";
+import { ApiHelper, Locale, UserHelper } from "../../helpers";
+import { PersonInterface, StripePaymentMethod, Permissions } from "@churchapps/helpers";
+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 () => {
+    const confirmed = window.confirm(Locale.label("donation.paymentMethods.confirmDelete"));
+    if (confirmed) {
+      ApiHelper.delete("/paymentmethods/" + editPaymentMethod.id + "/" + props.customerId, "GivingApi").then(() => {
+        setMode("display");
+        props.dataUpdate(Locale.label("donation.paymentMethods.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> {Locale.label("donation.paymentMethods.addCard")}
+          </MenuItem>
+          <MenuItem aria-label="add-bank" onClick={handleEdit(new StripePaymentMethod({ type: "bank" }))}>
+            <Icon sx={{ mr: "3px" }}>account_balance</Icon> {Locale.label("donation.paymentMethods.addBank")}
+          </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 = () => {
+    const rows: React.ReactElement[] = [];
+
+    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)}>{Locale.label("donation.paymentMethods.verify")}</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>{Locale.label("donation.paymentMethods.noMethod")}</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

@@ -0,0 +1,117 @@
+"use client";
+
+import React from "react";
+import { DisplayBox } from "../../components";
+import { ApiHelper, UserHelper, CurrencyHelper, DateHelper, Locale } from "../../helpers";
+import { Permissions, SubscriptionInterface } from "@churchapps/helpers";
+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" }}>{Locale.label("donation.recurring.notFound")}</span>;
+    return `${pm.name} ****${pm.last4}`;
+  };
+
+  const getInterval = (subscription: SubscriptionInterface) => {
+    const interval = subscription.plan.interval_count + " " + subscription.plan.interval;
+    return subscription.plan.interval_count > 1 ? interval + "s" : interval;
+  };
+
+  const getFunds = (subscription: SubscriptionInterface) => {
+    const result: React.ReactElement[] = [];
+    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 = () => {
+    const result: React.ReactElement[] = [];
+    result.push(<TableRow key="header" sx={{ textAlign: "left" }}><TableCell><b>{Locale.label("donation.recurring.startDate")}</b></TableCell><TableCell><b>{Locale.label("donation.recurring.amount")}</b></TableCell><TableCell><b>{Locale.label("donation.recurring.interval")}</b></TableCell><TableCell><b>{Locale.label("donation.recurring.paymentMethod")}</b></TableCell>{props?.paymentMethods?.length > 0 && <TableCell></TableCell>}</TableRow>);
+    return result;
+  };
+
+  const getTableRows = () => {
+    const rows: React.ReactElement[] = [];
+
+    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>{Locale.label("donation.recurring.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-testid="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} />
+    );
+  }
+};

package/src/donationComponents/components/RecurringDonationsEdit.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import React from "react";
+import { ApiHelper, Locale } from "../../helpers";
+import { InputBox } from "../../components";
+import { StripePaymentMethod, SubscriptionInterface } from "@churchapps/helpers";
+import { FormControl, Grid, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+import type { SelectChangeEvent } from "@mui/material";
+import { DonationHelper } from "../../helpers";
+
+interface Props { subscriptionUpdated: (message?: string) => void, customerId: string, paymentMethods: StripePaymentMethod[], editSubscription: SubscriptionInterface };
+
+export const RecurringDonationsEdit: React.FC<Props> = (props) => {
+  const [editSubscription, setEditSubscription] = React.useState<SubscriptionInterface>(props.editSubscription);
+  const [interval, setInterval] = React.useState("one_month");
+
+  const handleCancel = () => { props.subscriptionUpdated(); };
+  const handleSave = () => {
+    const sub = { ...editSubscription } as SubscriptionInterface;
+    const pmFound = props.paymentMethods.find((pm: StripePaymentMethod) => pm.id === sub.id);
+    if (!pmFound) {
+      const pm = props.paymentMethods[0];
+      sub.default_payment_method = pm.type === "card" ? pm.id : null;
+      sub.default_source = pm.type === "bank" ? pm.id : null;
+    }
+    ApiHelper.post("/subscriptions", [sub], "GivingApi").then(() => props.subscriptionUpdated(Locale.label("donation.donationForm.recurringUpdated")));
+  };
+
+  const handleDelete = () => {
+    const conf = window.confirm(Locale.label("donation.donationForm.confirmDelete"));
+    if (!conf) return;
+    const promises = [];
+    promises.push(ApiHelper.delete("/subscriptions/" + props.editSubscription.id, "GivingApi"));
+    promises.push(ApiHelper.delete("/subscriptionfunds/subscription/" + props.editSubscription.id, "GivingApi"));
+    Promise.all(promises).then(() => props.subscriptionUpdated(Locale.label("donation.donationForm.cancelled")));
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    const sub = { ...editSubscription } as SubscriptionInterface;
+    const value = e.target.value;
+    switch (e.target.name) {
+      case "method":
+        const pm = props.paymentMethods.find((pm: StripePaymentMethod) => pm.id === value);
+        sub.default_payment_method = pm.type === "card" ? value : null;
+        sub.default_source = pm.type === "bank" ? value : null;
+        break;
+      case "interval":
+        setInterval(value);
+        const inter = DonationHelper.getInterval(value);
+        sub.plan.interval_count = inter.interval_count;
+        sub.plan.interval = inter.interval;
+        break;
+    }
+    setEditSubscription(sub);
+  };
+
+  const getFields = () => (
+    <>
+      <Grid container spacing={3}>
+        <Grid size={{ xs: 12, md: 6 }}>
+          <FormControl fullWidth>
+            <InputLabel>{Locale.label("donation.donationForm.method")}</InputLabel>
+            <Select label={Locale.label("donation.donationForm.method")} name="method" aria-label="method" value={editSubscription.default_payment_method || editSubscription.default_source} className="capitalize" onChange={handleChange}>
+              {props.paymentMethods.map((paymentMethod: any, i: number) => <MenuItem key={i} value={paymentMethod.id}>{paymentMethod.name} ****{paymentMethod.last4}</MenuItem>)}
+            </Select>
+          </FormControl>
+        </Grid>
+        <Grid size={{ xs: 12, md: 6 }}>
+          <FormControl fullWidth>
+            <InputLabel>{Locale.label("donation.donationForm.frequency")}</InputLabel>
+            <Select label={Locale.label("donation.donationForm.frequency")} name="interval" aria-label="interval" value={interval} onChange={handleChange}>
+              <MenuItem value="one_week">{Locale.label("donation.donationForm.weekly")}</MenuItem>
+              <MenuItem value="two_week">{Locale.label("donation.donationForm.biWeekly")}</MenuItem>
+              <MenuItem value="one_month">{Locale.label("donation.donationForm.monthly")}</MenuItem>
+              <MenuItem value="three_month">{Locale.label("donation.donationForm.quarterly")}</MenuItem>
+              <MenuItem value="one_year">{Locale.label("donation.donationForm.annually")}</MenuItem>
+            </Select>
+          </FormControl>
+        </Grid>
+      </Grid>
+    </>
+  );
+
+  React.useEffect(() => {
+    if (props.editSubscription) {
+      const keyName = DonationHelper.getIntervalKeyName(props.editSubscription.plan.interval_count, props.editSubscription.plan.interval);
+      setInterval(keyName);
+    }
+  }, [props.editSubscription]);
+
+  return (
+    <InputBox aria-label="person-details-box" headerIcon="person" headerText={Locale.label("donation.donationForm.editRecurring")} ariaLabelSave="save-button" ariaLabelDelete="delete-button" cancelFunction={handleCancel} deleteFunction={handleDelete} saveFunction={handleSave}>
+      {getFields()}
+    </InputBox>
+  );
+};

package/src/donationComponents/components/index.tsx

@@ -0,0 +1,8 @@
+export { BankForm } from "./BankForm";
+export { CardForm } from "./CardForm";
+export { DonationForm } from "./DonationForm";
+export { FundDonation } from "./FundDonation";
+export { FundDonations } from "./FundDonations";
+export { PaymentMethods } from "./PaymentMethods";
+export { RecurringDonations } from "./RecurringDonations";
+export { RecurringDonationsEdit } from "./RecurringDonationsEdit";

package/src/donationComponents/index.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export { DonationPreviewModal } from "./modals/DonationPreviewModal";

package/src/donationComponents/modals/DonationPreviewModal.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import React from "react";
+import { DateHelper, CurrencyHelper, Locale } from "../../helpers";
+import { StripeDonationInterface } from "@churchapps/helpers";
+import {
+ Table, TableBody, TableRow, TableCell, Dialog, DialogTitle, DialogContent, DialogActions, Button 
+} from "@mui/material";
+
+interface Props {
+  show: boolean;
+  onHide: () => void;
+  handleDonate: (message: string) => void;
+  donation: StripeDonationInterface;
+  donationType: string;
+  paymentMethodName: string;
+  funds: any;
+  payFee: number;
+}
+
+export const DonationPreviewModal: React.FC<Props> = (props) => {
+  const donationType: any = { once: "One-time Donation", recurring: "Recurring Donation" };
+  const [isLoading, setLoading] = React.useState<boolean>(false);
+
+  const handleClick = () => {
+    setLoading(true);
+    let message = "Thank you for your donation.";
+    if (props.donationType === "recurring") message = "Recurring donation created. " + message;
+    props.handleDonate(message);
+  };
+
+  const formatInterval = () => {
+    const count = props.donation.interval.interval_count;
+    const interval = props.donation.interval.interval;
+    const result = `${count} ${interval}`;
+    return count > 1 ? result + "s" : result;
+  };
+
+  return (
+    <Dialog open={props.show} {...props}>
+      <DialogTitle>Donation Preview</DialogTitle>
+      <DialogContent>
+        <Table>
+          <TableBody>
+            <TableRow><TableCell>{Locale.label("person.name")}:</TableCell><TableCell>{props.donation.person.name}</TableCell></TableRow>
+            <TableRow><TableCell>{Locale.label("donation.preview.method")}:</TableCell><TableCell className="capitalize">{props.paymentMethodName}</TableCell></TableRow>
+            <TableRow><TableCell>{Locale.label("donation.preview.type")}:</TableCell><TableCell>{donationType[props.donationType]}</TableCell></TableRow>
+            {props.donationType === "once"
+              && <TableRow><TableCell>{Locale.label("donation.preview.date")}:</TableCell><TableCell>{DateHelper.formatHtml5Date(new Date(props.donation.billing_cycle_anchor))}</TableCell></TableRow>
+            }
+            <TableRow><TableCell>{Locale.label("donation.preview.weekly")}:</TableCell><TableCell>{props.donation.notes}</TableCell></TableRow>
+            {props.donationType === "recurring"
+              && <>
+                <TableRow><TableCell>{Locale.label("donation.preview.startingOn")}:</TableCell><TableCell>{DateHelper.formatHtml5Date(new Date(props.donation.billing_cycle_anchor))}</TableCell></TableRow>
+                <TableRow><TableCell>{Locale.label("donation.preview.every")}:</TableCell><TableCell className="capitalize">{formatInterval()}</TableCell></TableRow>
+              </>
+            }
+            <TableRow><TableCell>{Locale.label("donation.preview.funds")}:</TableCell><TableCell>{props.donation.funds.map((fund: any, i: number) => <p key={i}>{CurrencyHelper.formatCurrency(fund.amount)} - {fund.name}</p>)}</TableCell></TableRow>
+            {props.payFee > 0 && <TableRow><TableCell>{Locale.label("donation.preview.fee")}:</TableCell><TableCell>{CurrencyHelper.formatCurrency(props.payFee)}</TableCell></TableRow>}
+            <TableRow><TableCell>{Locale.label("donation.preview.total")}:</TableCell><TableCell><h4>{CurrencyHelper.formatCurrency(props.donation.amount)}</h4></TableCell></TableRow>
+          </TableBody>
+        </Table>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={props.onHide} variant="outlined" aria-label="cancel-button">{Locale.label("donation.common.cancel")}</Button>
+        <Button onClick={handleClick} variant="contained" aria-label="donate-button" disabled={isLoading}>{Locale.label("donation.preview.donate")}</Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

package/src/index.ts

@@ -3,3 +3,4 @@ export * from "./components";
 export * from "@churchapps/helpers";
 export * from "./pageComponents";
 export * from "./hooks";
+export * from "./donationComponents";