@churchapps/apphelper 0.0.1

package/src/donationComponents/components/NonAuthDonationInner.tsx

@@ -0,0 +1,208 @@
+import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
+import React, { useState, useRef } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
+import { ErrorMessages, InputBox } from "../../components";
+import { ApiHelper, DateHelper } from "../../helpers";
+import { FundDonationInterface, FundInterface, PersonInterface, StripeDonationInterface, StripePaymentMethod, UserInterface } from "../../interfaces";
+import { FundDonations } from "./FundDonations";
+import { Grid, Alert, TextField, Button, FormControl, InputLabel, Select, MenuItem, PaperProps } from "@mui/material"
+import { DonationHelper } from "../../helpers/DonationHelper";
+
+interface Props { churchId: string, mainContainerCssProps?: PaperProps, showHeader?: boolean, recaptchaSiteKey: string }
+
+export const NonAuthDonationInner: React.FC<Props> = ({ mainContainerCssProps, showHeader = true, ...props }) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const formStyling = { style: { base: { fontSize: "18px" } } };
+  const [firstName, setFirstName] = React.useState("");
+  const [lastName, setLastName] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [amount, setAmount] = React.useState(0);
+  const [errors, setErrors] = React.useState([]);
+  const [fundDonations, setFundDonations] = React.useState<FundDonationInterface[]>([]);
+  const [funds, setFunds] = React.useState<FundInterface[]>([]);
+  const [donationComplete, setDonationComplete] = React.useState(false);
+  const [processing, setProcessing] = React.useState(false);
+  const [donationType, setDonationType] = useState<"once" | "recurring">("once");
+  const [interval, setInterval] = useState("one_month");
+  const [startDate, setStartDate] = useState(new Date().toDateString());
+  const [captchaResponse, setCaptchaResponse] = useState("");
+  const captchaRef = useRef(null);
+
+  const init = () => {
+    ApiHelper.get("/funds/churchId/" + props.churchId, "GivingApi").then(data => {
+      setFunds(data);
+      if (data.length) setFundDonations([{ fundId: data[0].id }]);
+    });
+  }
+
+  const handleCaptchaChange = (value: string) => {
+    const captchaToken = captchaRef.current.getValue();
+    ApiHelper.postAnonymous("/donate/captcha-verify", { token: captchaToken }, "GivingApi").then((data) => { setCaptchaResponse(data.response); })
+  }
+
+  const handleSave = async () => {
+    if (validate()) {
+      setProcessing(true);
+      ApiHelper.post("/users/loadOrCreate", { userEmail: email, firstName, lastName }, "MembershipApi")
+        .catch(ex => { setErrors([ex.toString()]); setProcessing(false); })
+        .then(async userData => {
+          const personData = { churchId: props.churchId, firstName, lastName, email };
+          const person = await ApiHelper.post("/people/loadOrCreate", personData, "MembershipApi")
+          saveCard(userData, person)
+        });
+    }
+  }
+
+  const saveCard = async (user: UserInterface, person: PersonInterface) => {
+    const cardData = elements.getElement(CardElement);
+    const stripePM = await stripe.createPaymentMethod({ type: "card", card: cardData });
+    if (stripePM.error) setErrors([stripePM.error.message]);
+    else {
+      const pm = { id: stripePM.paymentMethod.id, personId: person.id, email: email, name: person.name.display, churchId: props.churchId }
+      await ApiHelper.post("/paymentmethods/addcard", pm, "GivingApi").then(result => {
+        if (result?.raw?.message) {
+          setErrors([result.raw.message]);
+          setProcessing(false);
+        } else {
+          const d: { paymentMethod: StripePaymentMethod, customerId: string } = result;
+          saveDonation(d.paymentMethod, d.customerId, person);
+        }
+      });
+    }
+  }
+
+  const saveDonation = async (paymentMethod: StripePaymentMethod, customerId: string, person?: PersonInterface) => {
+    let donation: StripeDonationInterface = {
+      amount: amount,
+      id: paymentMethod.id,
+      customerId: customerId,
+      type: paymentMethod.type,
+      churchId: props.churchId,
+      funds: [],
+      person: {
+        id: person?.id,
+        email: person?.contactInfo?.email,
+        name: person?.name?.display
+      }
+    }
+
+    if (donationType === "recurring") {
+      donation.billing_cycle_anchor = + new Date();
+      donation.interval = DonationHelper.getInterval(interval);
+    }
+
+    for (const fundDonation of fundDonations) {
+      let fund = funds.find((fund: FundInterface) => fund.id === fundDonation.fundId);
+      donation.funds.push({ id: fundDonation.fundId, amount: fundDonation.amount || 0, name: fund.name });
+    }
+
+    const results = await ApiHelper.post("/donate/charge/", donation, "GivingApi");
+    if (results?.status === "succeeded" || results?.status === "pending" || results?.status === "active") {
+      setDonationComplete(true)
+    }
+    if (results?.raw?.message) {
+      setErrors([results?.raw?.message]);
+      setProcessing(false);
+    }
+    setProcessing(false);
+  }
+
+  const validate = () => {
+    const result = [];
+    if (!firstName) result.push("Please enter your first name.");
+    if (!lastName) result.push("Please enter your last name.");
+    if (!email) result.push("Please enter your email address.");
+    if (amount === 0) result.push("Amount cannot be $0");
+    if (result.length === 0) {
+      if (!email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) result.push("Please enter a valid email address");  //eslint-disable-line
+    }
+    //Todo - make sure the account doesn't exist. (loadOrCreate?)
+    setErrors(result);
+    return result.length === 0;
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+    const val = e.currentTarget.value;
+    switch (e.currentTarget.name) {
+      case "firstName": setFirstName(val); break;
+      case "lastName": setLastName(val); break;
+      case "email": setEmail(val); break;
+      case "startDate": setStartDate(val); break;
+      case "interval": setInterval(val); break;
+    }
+  }
+
+  const handleFundDonationsChange = (fd: FundDonationInterface[]) => {
+    setFundDonations(fd);
+    let totalAmount = 0;
+    let selectedFunds: any = [];
+    for (const fundDonation of fd) {
+      totalAmount += fundDonation.amount || 0;
+      let fund = funds.find((fund: FundInterface) => fund.id === fundDonation.fundId);
+      selectedFunds.push({ id: fundDonation.fundId, amount: fundDonation.amount || 0, name: fund.name });
+    }
+    setAmount(totalAmount);
+  }
+
+  const getFundList = () => {
+    if (funds) return (<>
+      <hr />
+      <h4>Funds</h4>
+      <FundDonations fundDonations={fundDonations} funds={funds} updatedFunction={handleFundDonationsChange} />
+    </>);
+  }
+
+  React.useEffect(init, []); //eslint-disable-line
+
+  if (donationComplete) return <Alert severity="success">Thank you for your donation.</Alert>
+  else return (
+    <InputBox headerIcon={showHeader ? "volunteer_activism" : ""} headerText={showHeader ? "Donate" : ""} saveFunction={handleSave} saveText="Donate" isSubmitting={processing || !captchaResponse || captchaResponse === "robot"} mainContainerCssProps={mainContainerCssProps}>
+      <ErrorMessages errors={errors} />
+      <Grid container spacing={3}>
+        <Grid item md={6} xs={12}>
+          <Button aria-label="single-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "once" ? "contained" : "outlined"} onClick={() => setDonationType("once")}>Make a Donation</Button>
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <Button aria-label="recurring-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "recurring" ? "contained" : "outlined"} onClick={() => setDonationType("recurring")}>Make a Recurring Donation</Button>
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <TextField fullWidth label="First Name" name="firstName" value={firstName} onChange={handleChange} />
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <TextField fullWidth label="Last Name" name="lastName" value={lastName} onChange={handleChange} />
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <TextField fullWidth label="Email" name="email" value={email} onChange={handleChange} />
+        </Grid>
+        <Grid item md={6} xs={12}>
+          <ReCAPTCHA sitekey={props.recaptchaSiteKey} ref={captchaRef} onChange={handleCaptchaChange} />
+        </Grid>
+      </Grid>
+      <div style={{ padding: 10, border: "1px solid #CCC", borderRadius: 5, marginTop: 10 }}>
+        <CardElement options={formStyling} />
+      </div>
+      {donationType === "recurring"
+        && <Grid container spacing={3} style={{marginTop:0}}>
+          <Grid item md={6} xs={12}>
+            <FormControl fullWidth>
+              <InputLabel>Frequency</InputLabel>
+              <Select label="Frequency" name="interval" aria-label="interval" value={interval} onChange={(e) => {setInterval(e.target.value) }}>
+                <MenuItem value="one_week">Weekly</MenuItem>
+                <MenuItem value="two_week">Bi-Weekly</MenuItem>
+                <MenuItem value="one_month">Monthly</MenuItem>
+                <MenuItem value="three_month">Quarterly</MenuItem>
+                <MenuItem value="one_year">Annually</MenuItem>
+              </Select>
+            </FormControl>
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <TextField fullWidth name="startDate" type="date" aria-label="startDate" label="Start Date" value={DateHelper.formatHtml5Date(new Date(startDate))} onChange={handleChange} />
+          </Grid>
+        </Grid>
+      }
+      {getFundList()}
+    </InputBox>
+  );
+}
+

package/src/donationComponents/components/PaymentMethods.tsx

@@ -0,0 +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;
+}

package/src/donationComponents/components/RecurringDonations.tsx

@@ -0,0 +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} />
+    );
+  }
+}

package/src/donationComponents/components/RecurringDonationsEdit.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { ApiHelper } from "../../helpers";
+import { InputBox } from "../../components";
+import { StripePaymentMethod, SubscriptionInterface } from "../../interfaces";
+import { FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } 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 = () => {
+    let sub = { ...editSubscription } as SubscriptionInterface;
+    const pmFound = props.paymentMethods.find((pm: StripePaymentMethod) => pm.id === sub.id);
+    if (!pmFound) {
+      let 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("Recurring donation updated."))
+  }
+
+  const handleDelete = () => {
+    const conf = window.confirm("Are you sure you want to delete this recurring donation?");
+    if (!conf) return;
+    let 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("Recurring donation canceled."));
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    let sub = { ...editSubscription } as SubscriptionInterface;
+    let value = e.target.value;
+    switch (e.target.name) {
+      case "method":
+        let 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 item md={6} xs={12}>
+          <FormControl fullWidth>
+            <InputLabel>Method</InputLabel>
+            <Select label="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 item md={6} xs={12}>
+          <FormControl fullWidth>
+            <InputLabel>Frequency</InputLabel>
+            <Select label="Frequency" name="interval" aria-label="interval" value={interval} onChange={handleChange}>
+              <MenuItem value="one_week">Weekly</MenuItem>
+              <MenuItem value="two_week">Bi-Weekly</MenuItem>
+              <MenuItem value="one_month">Monthly</MenuItem>
+              <MenuItem value="three_month">Quarterly</MenuItem>
+              <MenuItem value="one_year">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="Edit Recurring Donation" ariaLabelSave="save-button" ariaLabelDelete="delete-button" cancelFunction={handleCancel} deleteFunction={handleDelete} saveFunction={handleSave}>
+      {getFields()}
+    </InputBox>
+  );
+}

package/src/donationComponents/components/index.tsx

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

package/src/donationComponents/modals/DonationPreviewModal.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { DateHelper, CurrencyHelper } from "../../helpers";
+import { StripeDonationInterface } from "../../interfaces";
+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;
+    let result = `${count} ${interval}`;
+    return count > 1 ? result + "s" : result;
+  }
+
+  return (
+    <Dialog open={props.show} {...props}>
+      <DialogTitle>Donation Preview</DialogTitle>
+      <DialogContent>
+        <Table>
+          <TableBody>
+            <TableRow><TableCell>Name:</TableCell><TableCell>{props.donation.person.name}</TableCell></TableRow>
+            <TableRow><TableCell>Payment Method:</TableCell><TableCell className="capitalize">{props.paymentMethodName}</TableCell></TableRow>
+            <TableRow><TableCell>Type:</TableCell><TableCell>{donationType[props.donationType]}</TableCell></TableRow>
+            {props.donationType === "once"
+              && <TableRow><TableCell>Donation Date:</TableCell><TableCell>{DateHelper.formatHtml5Date(new Date(props.donation.billing_cycle_anchor))}</TableCell></TableRow>
+            }
+            <TableRow><TableCell>Notes:</TableCell><TableCell>{props.donation.notes}</TableCell></TableRow>
+            {props.donationType === "recurring"
+              && <>
+                <TableRow><TableCell>Starting On:</TableCell><TableCell>{DateHelper.formatHtml5Date(new Date(props.donation.billing_cycle_anchor))}</TableCell></TableRow>
+                <TableRow><TableCell>Recurring Every:</TableCell><TableCell className="capitalize">{formatInterval()}</TableCell></TableRow>
+              </>
+            }
+            <TableRow><TableCell>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>Transaction Fee:</TableCell><TableCell>{CurrencyHelper.formatCurrency(props.payFee)}</TableCell></TableRow>}
+            <TableRow><TableCell>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">Cancel</Button>
+        <Button onClick={handleClick} variant="contained" aria-label="donate-button" disabled={isLoading}>Donate</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

package/src/helpers/AnalyticsHelper.ts

@@ -0,0 +1,33 @@
+import ReactGA from "react-ga4";
+import { CommonEnvironmentHelper } from "./CommonEnvironmentHelper";
+import { UserHelper } from "./UserHelper";
+
+export class AnalyticsHelper {
+
+  static init = () => {
+    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
+      ReactGA.initialize([{trackingId: CommonEnvironmentHelper.GoogleAnalyticsTag}]);
+      AnalyticsHelper.logPageView();
+    }
+  }
+
+  static logPageView = () => {
+    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
+      this.setChurchKey();
+      ReactGA.send({ hitType: "pageview", page: window.location.pathname + window.location.search });
+    }
+  }
+
+  static logEvent = (category: string, action: string, label?:string) => {
+    if (CommonEnvironmentHelper.GoogleAnalyticsTag !== "" && typeof(window)!=="undefined") {
+      this.setChurchKey();
+      ReactGA.event({ category, action, label });
+    }
+  }
+
+  private static setChurchKey = () => {
+    const churchKey = UserHelper?.currentUserChurch?.church?.subDomain;
+    if (churchKey) ReactGA.set({church_key: churchKey });
+  }
+
+}