@churchapps/apphelper 0.4.6 → 0.4.8

package/src/donationComponents/components/NonAuthDonationInner.tsx

@@ -1,295 +0,0 @@
-"use client";
-
-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, CurrencyHelper, Locale } from "../../helpers";
-import { FundDonationInterface, FundInterface, PersonInterface, StripeDonationInterface, StripePaymentMethod, UserInterface, ChurchInterface } from "@churchapps/helpers";
-import { FundDonations } from "./FundDonations";
-import { Grid, Alert, TextField, Button, FormControl, InputLabel, Select, MenuItem, PaperProps, FormGroup, FormControlLabel, Checkbox, Typography } from "@mui/material"
-import { DonationHelper } from "../../helpers/DonationHelper";
-
-interface Props { churchId: string, mainContainerCssProps?: PaperProps, showHeader?: boolean, recaptchaSiteKey: string, churchLogo?: 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 [fundsTotal, setFundsTotal] = React.useState<number>(0);
-  const [transactionFee, setTransactionFee] = React.useState<number>(0);
-  const [total, setTotal] = React.useState<number>(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 [church, setChurch] = useState<ChurchInterface>();
-  const [gateway, setGateway] = React.useState(null);
-  const [searchParams, setSearchParams] = React.useState<any>();
-  const captchaRef = useRef(null);
-  
-  const getUrlParam = (param: string) => {
-      if (typeof window === "undefined") return null;
-      const urlParams = new URLSearchParams(window.location.search);
-      return urlParams.get(param);
-    }
-    
-    const init = () => {
-    const fundId = getUrlParam("fundId");
-    const amount = getUrlParam("amount");
-    setSearchParams({ fundId, amount });
-
-    ApiHelper.get("/funds/churchId/" + props.churchId, "GivingApi").then(data => {
-      setFunds(data);
-      if (fundId && fundId !== "") {
-        const selectedFund = data.find((f: FundInterface) => f.id === fundId);
-        if (selectedFund) {
-          setFundDonations([{ fundId: selectedFund.id, amount: (amount && amount !== "") ? parseFloat(amount) : 0}]);
-        }
-      } else if (data.length) {
-        setFundDonations([{ fundId: data[0].id }]);
-    }
-    });
-    ApiHelper.get("/churches/" + props.churchId, "MembershipApi").then(data => {
-      setChurch(data);
-    });
-    ApiHelper.get("/gateways/churchId/" + props.churchId, "GivingApi").then(data => {
-      if (data.length !== 0) setGateway(data[0]);
-    });
-  }
-
-  const handleCaptchaChange = (value: string) => {
-    const captchaToken = captchaRef.current.getValue();
-    ApiHelper.postAnonymous("/donate/captcha-verify", { token: captchaToken }, "GivingApi").then((data) => { setCaptchaResponse(data.response); })
-  }
-
-  const handleCheckChange = (e: React.SyntheticEvent<Element, Event>, checked: boolean) => {
-    let totalPayAmount = checked ? fundsTotal + transactionFee : fundsTotal;
-    setTotal(totalPayAmount);
-  }
-
-  // const handleAutoPayFee = () => {
-  //   let totalPayAmount = fundsTotal + transactionFee;
-  //   setTotal(totalPayAmount);
-  // }
-
-  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]); setProcessing(false); }
-    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: total,
-      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(startDate);
-      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 churchObj = {
-      name: church.name,
-      subDomain: church.subDomain,
-      churchURL: typeof window !== "undefined" && window.location.origin,
-      logo: props?.churchLogo
-    }
-
-    let results;
-    if (donationType === "once") results = await ApiHelper.post("/donate/charge/", { ...donation, church: churchObj }, "GivingApi");
-    if (donationType === "recurring") results = await ApiHelper.post("/donate/subscribe/", { ...donation, church: churchObj }, "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(Locale.label("donation.donationForm.validate.firstName"));
-    if (!lastName) result.push(Locale.label("donation.donationForm.validate.lastName"));
-    if (!email) result.push(Locale.label("donation.donationForm.validate.email"));
-    if (fundsTotal === 0) result.push(Locale.label("donation.donationForm.validate.amount"));
-    if (result.length === 0) {
-      if (!email.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w+)+$/)) result.push(Locale.label("donation.donationForm.validate.validEmail"));  //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 = async (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 });
-    }
-    setFundsTotal(totalAmount);
-    setTotal(totalAmount);
-
-    const fee = await getTransactionFee(totalAmount);
-    setTransactionFee(fee);
-
-    if (gateway && gateway.payFees === true) {
-      setTotal(totalAmount + fee);
-    }
-  }
-
-  const getTransactionFee = async (amount: number) => {
-    if (amount > 0) {
-      try {
-        const response = await ApiHelper.post("/donate/fee?churchId=" + props.churchId, { type: "creditCard", amount }, "GivingApi");
-        return response.calculatedFee;
-      } catch (error) {
-        console.log("Error calculating transaction fee: ", error);
-        return 0;
-      }
-    } else {
-      return 0;
-    }
-  }
-
-  const getFundList = () => {
-    if (funds) return (<>
-      <hr />
-      <h4>{Locale.label("donation.donationForm.funds")}</h4>
-      <FundDonations fundDonations={fundDonations} funds={funds} params={searchParams} updatedFunction={handleFundDonationsChange} />
-    </>);
-  }
-
-  React.useEffect(init, []); //eslint-disable-line
-
-  // React.useEffect(() => { gateway && gateway.payFees === true && handleAutoPayFee() }, [fundDonations]);
-
-  if (donationComplete) return <Alert severity="success">{Locale.label("donation.donationForm.thankYou")}</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 size={{ xs: 12, md: 6 }}>
-          <Button aria-label="single-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "once" ? "contained" : "outlined"} onClick={() => setDonationType("once")}>{Locale.label("donation.donationForm.make")}</Button>
-        </Grid>
-        <Grid size={{ xs: 12, md: 6 }}>
-          <Button aria-label="recurring-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "recurring" ? "contained" : "outlined"} onClick={() => setDonationType("recurring")}>{Locale.label("donation.donationForm.makeRecurring")}</Button>
-        </Grid>
-        <Grid size={{ xs: 12, md: 6 }}>
-          <TextField fullWidth label={Locale.label("person.firstName")} name="firstName" value={firstName} onChange={handleChange} />
-        </Grid>
-        <Grid size={{ xs: 12, md: 6 }}>
-          <TextField fullWidth label={Locale.label("person.lastName")} name="lastName" value={lastName} onChange={handleChange} />
-        </Grid>
-        <Grid size={{ xs: 12, md: 6 }}>
-          <TextField fullWidth label={Locale.label("person.email")} name="email" value={email} onChange={handleChange} />
-        </Grid>
-        <Grid size={{ xs: 12, md: 6 }}>
-          <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 size={{ xs: 12, md: 6 }}>
-            <FormControl fullWidth>
-              <InputLabel>{Locale.label("donation.donationForm.frequency")}</InputLabel>
-              <Select label="Frequency" name="interval" aria-label="interval" value={interval} onChange={(e) => { setInterval(e.target.value) }}>
-                <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 size={{ xs: 12, md: 6 }}>
-            <TextField fullWidth name="startDate" type="date" aria-label="startDate" label={Locale.label("donation.donationForm.startDate")} value={DateHelper.formatHtml5Date(new Date(startDate))} onChange={handleChange} />
-          </Grid>
-        </Grid>
-      }
-      {getFundList()}
-      <div>
-        {fundsTotal > 0
-          && <>
-            {(gateway && gateway.payFees === true)
-              ? <Typography fontSize={14} fontStyle="italic">*{Locale.label("donation.donationForm.fees").replace("{}", CurrencyHelper.formatCurrency(transactionFee))}</Typography>
-              : (
-                <FormGroup>
-                  <FormControlLabel control={<Checkbox />} name="transaction-fee" label={Locale.label("donation.donationForm.cover").replace("{}", CurrencyHelper.formatCurrency(transactionFee))} onChange={handleCheckChange} />
-                </FormGroup>
-              )}
-            <p>Total Donation Amount: ${total}</p>
-          </>
-        }
-      </div>
-    </InputBox>
-  );
-}

package/src/donationComponents/components/PaymentMethods.tsx

@@ -1,137 +0,0 @@
-"use client";
-
-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, 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 () => {
-    let 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 = () => {
-    let 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

@@ -1,123 +0,0 @@
-"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) => {
-    let interval = subscription.plan.interval_count + " " + subscription.plan.interval;
-    return subscription.plan.interval_count > 1 ? interval + "s" : interval;
-  }
-
-  const getFunds = (subscription: SubscriptionInterface) => {
-    let 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 = () => {
-    let 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 = () => {
-    let 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

@@ -1,95 +0,0 @@
-"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, 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(Locale.label("donation.donationForm.recurringUpdated")))
-  }
-
-  const handleDelete = () => {
-    const conf = window.confirm(Locale.label("donation.donationForm.confirmDelete"));
-    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(Locale.label("donation.donationForm.cancelled")));
-  }
-
-  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 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

@@ -1,9 +0,0 @@
-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/index.ts

@@ -1,3 +0,0 @@
-export { FundDonations } from "./components/FundDonations";
-export { NonAuthDonation } from "./components/NonAuthDonation";
-export { DonationPage } from "./DonationPage";