@churchapps/apphelper 0.4.7 → 0.4.9

package/src/donationComponents/components/BankForm.tsx

@@ -1,161 +0,0 @@
-"use client";
-
-import React from "react";
-import { FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material"
-import { useStripe } from "@stripe/react-stripe-js";
-import { InputBox, ErrorMessages } from "../../components";
-import { ApiHelper, Locale } from "../../helpers";
-import { PersonInterface, StripePaymentMethod, PaymentMethodInterface, StripeBankAccountInterface, StripeBankAccountUpdateInterface, StripeBankAccountVerifyInterface } from "@churchapps/helpers";
-
-interface Props { bank: StripePaymentMethod, showVerifyForm: boolean, customerId: string, person: PersonInterface, setMode: any, deletePayment: any, updateList: (message?: string) => void }
-
-export const BankForm: React.FC<Props> = (props) => {
-  const stripe = useStripe();
-  const [bankAccount, setBankAccount] = React.useState<StripeBankAccountInterface>({ account_holder_name: props.bank.account_holder_name, account_holder_type: props.bank.account_holder_type, country: "US", currency: "usd" } as StripeBankAccountInterface);
-  const [paymentMethod] = React.useState<PaymentMethodInterface>({ customerId: props.customerId, personId: props.person.id, email: props.person.contactInfo.email, name: props.person.name.display });
-  const [updateBankData] = React.useState<StripeBankAccountUpdateInterface>({ paymentMethodId: props.bank.id, customerId: props.customerId, personId: props.person.id, bankData: { account_holder_name: props.bank.account_holder_name, account_holder_type: props.bank.account_holder_type } } as StripeBankAccountUpdateInterface);
-  const [verifyBankData, setVerifyBankData] = React.useState<StripeBankAccountVerifyInterface>({ paymentMethodId: props.bank.id, customerId: props.customerId, amountData: { amounts: [] } });
-  const [showSave, setShowSave] = React.useState<boolean>(true);
-  const [errorMessage, setErrorMessage] = React.useState<string>(null);
-  const saveDisabled = () => { }
-  const handleCancel = () => { props.setMode("display"); }
-  const handleDelete = () => { props.deletePayment(); }
-  const handleSave = () => {
-    setShowSave(false);
-    if (props.showVerifyForm) verifyBank();
-    else props.bank.id ? updateBank() : createBank();
-  }
-
-  const createBank = async () => {
-    if (!bankAccount.routing_number || !bankAccount.account_number) setErrorMessage(Locale.label("donation.bankForm.validate.accountNumber"))
-    else {
-      await stripe.createToken("bank_account", bankAccount).then(response => {
-        if (response?.error?.message) setErrorMessage(response.error.message);
-        else {
-          const pm = { ...paymentMethod };
-          pm.id = response.token.id;
-          ApiHelper.post("/paymentmethods/addbankaccount", pm, "GivingApi").then(result => {
-            if (result?.raw?.message) setErrorMessage(result.raw.message);
-            else {
-              props.updateList(Locale.label("donation.bankForm.added"));
-              props.setMode("display");
-            }
-          });
-        }
-      });
-    }
-    setShowSave(true);
-  }
-
-  const updateBank = () => {
-    if (bankAccount.account_holder_name === "") setErrorMessage(Locale.label("donation.bankForm.validate.holderName"));
-    else {
-      let bank = { ...updateBankData };
-      bank.bankData.account_holder_name = bankAccount.account_holder_name;
-      bank.bankData.account_holder_type = bankAccount.account_holder_type;
-      ApiHelper.post("/paymentmethods/updatebank", bank, "GivingApi").then(response => {
-        if (response?.raw?.message) setErrorMessage(response.raw.message);
-        else {
-          props.updateList(Locale.label("donation.bankForm.updated"));
-          props.setMode("display");
-        }
-      });
-    }
-    setShowSave(true);
-  }
-
-  const verifyBank = () => {
-    const amounts = verifyBankData?.amountData?.amounts;
-    if (amounts && amounts.length === 2 && amounts[0] !== "" && amounts[1] !== "") {
-      ApiHelper.post("/paymentmethods/verifyBank", verifyBankData, "GivingApi").then(response => {
-        if (response?.raw?.message) setErrorMessage(response.raw.message);
-        else {
-          props.updateList(Locale.label("donation.bankForm.verified"));
-          props.setMode("display");
-        }
-      });
-    }
-    else setErrorMessage("Both deposit amounts are required.");
-    setShowSave(true);
-  }
-
-  const getHeaderText = () => props.bank.id
-    ? `${props.bank.name.toUpperCase()} ****${props.bank.last4}`
-    : "Add New Bank Account"
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    const bankData = { ...bankAccount };
-    const inputData = { [e.target.name]: e.target.value };
-    setBankAccount({ ...bankData, ...inputData });
-    setShowSave(true);
-  }
-
-  const handleKeyPress = (e: React.KeyboardEvent<any>) => {
-    const pattern = /^\d+$/;
-    if (!pattern.test(e.key)) e.preventDefault();
-  }
-
-  const handleVerify = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const verifyData = { ...verifyBankData };
-    if (e.currentTarget.name === "amount1") verifyData.amountData.amounts[0] = e.currentTarget.value;
-    if (e.currentTarget.name === "amount2") verifyData.amountData.amounts[1] = e.currentTarget.value;
-    setVerifyBankData(verifyData);
-  }
-
-  const getForm = () => {
-    if (props.showVerifyForm) {
-      return (<>
-        <p>{Locale.label("donation.bankForm.twoDeposits")}</p>
-        <Grid container columnSpacing={2}>
-          <Grid size={{ xs: 12, md: 6 }}>
-            <TextField fullWidth aria-label="amount1" label={Locale.label("donation.bankForm.firstDeposit")} name="amount1" placeholder="00" inputProps={{ maxLength: 2 }} onChange={handleVerify} onKeyPress={handleKeyPress} />
-          </Grid>
-          <Grid size={{ xs: 12, md: 6 }}>
-            <TextField fullWidth aria-label="amount2" label={Locale.label("donation.bankForm.secondDeposit")} name="amount2" placeholder="00" inputProps={{ maxLength: 2 }} onChange={handleVerify} onKeyPress={handleKeyPress} />
-          </Grid>
-        </Grid>
-      </>);
-
-    } else {
-      let accountDetails = <></>
-      if (!props.bank.id) accountDetails = (
-        <Grid container spacing={3}>
-          <Grid size={{ xs: 12, md: 6 }} style={{ marginBottom: "20px" }}>
-            <TextField fullWidth label={Locale.label("donation.bankForm.routingNumber")} type="number" name="routing_number" aria-label="routing-number" placeholder="Routing Number" className="form-control" onChange={handleChange} />
-          </Grid>
-          <Grid size={{ xs: 12, md: 6 }} style={{ marginBottom: "20px" }}>
-            <TextField fullWidth label={Locale.label("donation.bankForm.accountNumber")} type="number" name="account_number" aria-label="account-number" placeholder="Account Number" className="form-control" onChange={handleChange} />
-          </Grid>
-        </Grid>
-      );
-      return (<>
-        <Grid container spacing={3}>
-          <Grid size={{ xs: 12, md: 6 }} style={{ marginBottom: "20px" }}>
-            <TextField fullWidth label="Account Holder Name" name="account_holder_name" required aria-label="account-holder-name" placeholder="Account Holder Name" value={bankAccount.account_holder_name} className="form-control" onChange={handleChange} />
-          </Grid>
-          <Grid size={{ xs: 12, md: 6 }} style={{ marginBottom: "20px" }}>
-            <FormControl fullWidth>
-              <InputLabel>{Locale.label("donation.bankForm.name")}</InputLabel>
-              <Select label={Locale.label("donation.bankForm.name")} name="account_holder_type" aria-label="account-holder-type" value={bankAccount.account_holder_type} onChange={handleChange}>
-                <MenuItem value="individual">{Locale.label("donation.bankForm.individual")}</MenuItem>
-                <MenuItem value="company">{Locale.label("donation.bankForm.company")}</MenuItem>
-              </Select>
-            </FormControl>
-          </Grid>
-        </Grid>
-        {accountDetails}
-      </>);
-    }
-  }
-
-  return (
-    <InputBox headerIcon="volunteer_activism" headerText={getHeaderText()} ariaLabelSave="save-button" ariaLabelDelete="delete-button" cancelFunction={handleCancel} saveFunction={showSave ? handleSave : saveDisabled} deleteFunction={props.bank.id && !props.showVerifyForm ? handleDelete : undefined}>
-      {errorMessage && <ErrorMessages errors={[errorMessage]}></ErrorMessages>}
-      <div>
-        {!props.bank.id && <p>{Locale.label("donation.bankForm.needVerified")}</p>}
-        {getForm()}
-      </div>
-    </InputBox>
-  );
-
-}

package/src/donationComponents/components/CardForm.tsx

@@ -1,106 +0,0 @@
-"use client";
-
-import React, { useEffect } from "react";
-import { Grid, TextField } from "@mui/material"
-import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
-import { InputBox, ErrorMessages } from "../../components";
-import { ApiHelper, Locale } from "../../helpers";
-import { PersonInterface, StripePaymentMethod, PaymentMethodInterface, StripeCardUpdateInterface } from "@churchapps/helpers";
-
-interface Props { card: StripePaymentMethod, customerId: string, person: PersonInterface, setMode: any, deletePayment: any, updateList: (message: string) => void }
-
-export const CardForm: React.FC<Props> = (props) => {
-  const stripe = useStripe();
-  const elements = useElements();
-  const formStyling = { style: { base: { fontSize: "18px" } } };
-  const [showSave, setShowSave] = React.useState(true);
-  const [paymentMethod] = React.useState<PaymentMethodInterface>({ id: props.card.id, customerId: props.customerId, personId: props.person.id, email: props.person.contactInfo.email, name: props.person.name.display });
-  const [cardUpdate, setCardUpdate] = React.useState<StripeCardUpdateInterface>({ personId: props.person.id, paymentMethodId: props.card.id, cardData: { card: {} } } as StripeCardUpdateInterface);
-  const [errorMessage, setErrorMessage] = React.useState<string>(null);
-  const handleCancel = () => { props.setMode("display"); }
-  const handleSave = () => { setShowSave(false); props.card.id ? updateCard() : createCard(); }
-  const saveDisabled = () => { }
-  const handleDelete = () => { props.deletePayment(); }
-
-  const handleKeyPress = (e: React.KeyboardEvent<any>) => {
-    const pattern = /^\d+$/;
-    if (!pattern.test(e.key)) e.preventDefault();
-  }
-
-  useEffect(() => {
-    setCardUpdate({ ...cardUpdate, cardData: { card: { exp_year: props.card?.exp_year?.toString().slice(2) || "", exp_month: props.card?.exp_month || "" } } });
-  }, []) //eslint-disable-line
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const card = { ...cardUpdate };
-    if (e.currentTarget.name === "exp_month") card.cardData.card.exp_month = e.currentTarget.value;
-    if (e.currentTarget.name === "exp_year") card.cardData.card.exp_year = e.currentTarget.value;
-    setCardUpdate(card);
-    setShowSave(true);
-  }
-
-  const createCard = async () => {
-    const cardData = elements.getElement(CardElement);
-    const stripePM = await stripe.createPaymentMethod({
-      type: "card",
-      card: cardData
-    });
-    if (stripePM.error) {
-      setErrorMessage(stripePM.error.message);
-      setShowSave(true);
-    } else {
-      let pm = { ...paymentMethod };
-      pm.id = stripePM.paymentMethod.id;
-      await ApiHelper.post("/paymentmethods/addcard", pm, "GivingApi").then(result => {
-        if (result?.raw?.message) {
-          setErrorMessage(result.raw.message);
-          setShowSave(true);
-        }
-        else {
-          props.updateList(Locale.label("donation.cardForm.added"));
-          props.setMode("display");
-        }
-      });
-    }
-  }
-
-  const updateCard = async () => {
-    if (!cardUpdate.cardData.card.exp_month || !cardUpdate.cardData.card.exp_year) setErrorMessage("Expiration month and year cannot be blank.");
-    else {
-      await ApiHelper.post("/paymentmethods/updatecard", cardUpdate, "GivingApi").then(result => {
-        if (result?.raw?.message) {
-          setErrorMessage(result.raw.message);
-          setShowSave(true);
-        }
-        else {
-          props.updateList(Locale.label("donation.cardForm.updated"));
-          props.setMode("display");
-        }
-      });
-    }
-  }
-
-  const getHeaderText = () => props.card.id
-    ? `${props.card.name.toUpperCase()} ****${props.card.last4}`
-    : Locale.label("donation.cardForm.addNew")
-
-  return (
-    <InputBox headerIcon="volunteer_activism" headerText={getHeaderText()} ariaLabelSave="save-button" ariaLabelDelete="delete-button" cancelFunction={handleCancel} saveFunction={showSave ? handleSave : saveDisabled} deleteFunction={props.card.id ? handleDelete : undefined}>
-      {errorMessage && <ErrorMessages errors={[errorMessage]}></ErrorMessages>}
-      <div>
-        {!props.card.id
-          ? <CardElement options={formStyling} />
-          : <Grid container spacing={3}>
-            <Grid size={{ xs: 12, md: 6 }}>
-              <TextField fullWidth aria-label="card-exp-month" label={Locale.label("donation.cardForm.expirationMonth")} name="exp_month" value={cardUpdate.cardData.card.exp_month} placeholder="MM" inputProps={{ maxLength: 2 }} onChange={handleChange} onKeyPress={handleKeyPress} />
-            </Grid>
-            <Grid size={{ xs: 12, md: 6 }}>
-              <TextField fullWidth aria-label="card-exp-year" label={Locale.label("donation.cardForm.expirationYear")} name="exp_year" value={cardUpdate.cardData.card.exp_year} placeholder="YY" inputProps={{ maxLength: 2 }} onChange={handleChange} onKeyPress={handleKeyPress} />
-            </Grid>
-          </Grid>
-        }
-      </div>
-    </InputBox>
-  );
-
-}

package/src/donationComponents/components/DonationForm.tsx

@@ -1,255 +0,0 @@
-"use client";
-
-/* eslint-disable multiline-ternary */
-import React from "react";
-import { Stripe } from "@stripe/stripe-js";
-import { InputBox, ErrorMessages } from "../../components";
-import { FundDonations } from ".";
-import { DonationPreviewModal } from "../modals/DonationPreviewModal";
-import { ApiHelper, CurrencyHelper, DateHelper, Locale } from "../../helpers";
-import { PersonInterface, StripePaymentMethod, StripeDonationInterface, FundDonationInterface, FundInterface, ChurchInterface } from "@churchapps/helpers";
-import { Grid, InputLabel, MenuItem, Select, TextField, FormControl, Button, SelectChangeEvent, FormControlLabel, Checkbox, FormGroup, Typography } from "@mui/material"
-import { DonationHelper } from "../../helpers";
-
-interface Props { person: PersonInterface, customerId: string, paymentMethods: StripePaymentMethod[], stripePromise: Promise<Stripe>, donationSuccess: (message: string) => void, church?: ChurchInterface, churchLogo?: string }
-
-export const DonationForm: React.FC<Props> = (props) => {
-  const [errorMessage, setErrorMessage] = React.useState<string>();
-  const [fundDonations, setFundDonations] = React.useState<FundDonationInterface[]>();
-  const [funds, setFunds] = React.useState<FundInterface[]>([]);
-  const [fundsTotal, setFundsTotal] = React.useState<number>(0);
-  const [transactionFee, setTransactionFee] = React.useState<number>(0);
-  const [payFee, setPayFee] = React.useState<number>(0);
-  const [total, setTotal] = React.useState<number>(0);
-  const [paymentMethodName, setPaymentMethodName] = React.useState<string>(`${props?.paymentMethods[0]?.name} ****${props?.paymentMethods[0]?.last4}`);
-  const [donationType, setDonationType] = React.useState<string>();
-  const [showDonationPreviewModal, setShowDonationPreviewModal] = React.useState<boolean>(false);
-  const [interval, setInterval] = React.useState("one_month");
-  const [gateway, setGateway] = React.useState(null);
-  const [donation, setDonation] = React.useState<StripeDonationInterface>({
-    id: props?.paymentMethods[0]?.id,
-    type: props?.paymentMethods[0]?.type,
-    customerId: props.customerId,
-    person: {
-      id: props.person?.id,
-      email: props.person?.contactInfo.email,
-      name: props.person?.name.display
-    },
-    amount: 0,
-    billing_cycle_anchor: + new Date(),
-    interval: {
-      interval_count: 1,
-      interval: "month"
-    },
-    funds: []
-  });
-
-  const loadData = () => {
-    ApiHelper.get("/funds", "GivingApi").then(data => {
-      setFunds(data);
-      if (data.length) setFundDonations([{ fundId: data[0].id }]);
-    });
-    ApiHelper.get("/gateways", "GivingApi").then((data) => {
-      if (data.length !== 0) setGateway(data[0]);
-    });
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSave(); } }
-
-  const handleCheckChange = (e: React.SyntheticEvent<Element, Event>, checked: boolean) => {
-    let d = { ...donation } as StripeDonationInterface;
-    d.amount = checked ? fundsTotal + transactionFee : fundsTotal;
-    let showFee = checked ? transactionFee : 0;
-    setTotal(d.amount);
-    setPayFee(showFee);
-    setDonation(d);
-  }
-
-  const handleAutoPayFee = () => {
-    let d = { ...donation } as StripeDonationInterface;
-    d.amount = fundsTotal + transactionFee;
-    let showFee = transactionFee;
-    setTotal(d.amount);
-    setPayFee(showFee);
-    setDonation(d);
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    setErrorMessage(null);
-    let d = { ...donation } as StripeDonationInterface;
-    let value = e.target.value;
-    switch (e.target.name) {
-      case "method":
-        d.id = value;
-        let pm = props.paymentMethods.find(pm => pm.id === value);
-        d.type = pm.type;
-        setPaymentMethodName(`${pm.name} ****${pm.last4}`);
-        break;
-      case "type": setDonationType(value); break;
-      case "date": d.billing_cycle_anchor = + new Date(value); break;
-      case "interval":
-        setInterval(value);
-        d.interval = DonationHelper.getInterval(value);
-        break;
-      case "notes": d.notes = value; break;
-      case "transaction-fee":
-        const element = e.target as HTMLInputElement
-        d.amount = element.checked ? fundsTotal + transactionFee : fundsTotal;
-        let showFee = element.checked ? transactionFee : 0;
-        setTotal(d.amount);
-        setPayFee(showFee);
-    }
-    setDonation(d);
-  }
-
-  const handleCancel = () => { setDonationType(null); }
-  const handleSave = () => {
-    if (donation.amount < .5) setErrorMessage(Locale.label("donation.donationForm.tooLow"));
-    else setShowDonationPreviewModal(true);
-  }
-  const handleDonationSelect = (type: string) => {
-    let dt = donationType === type ? null : type;
-    setDonationType(dt);
-  }
-
-  const makeDonation = async (message: string) => {
-    let results;
-
-    const churchObj = {
-      name: props?.church?.name,
-      subDomain: props?.church?.subDomain,
-      churchURL: typeof window !== "undefined" && window.location.origin,
-      logo: props?.churchLogo
-    }
-
-    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") {
-      setShowDonationPreviewModal(false);
-      setDonationType(null);
-      props.donationSuccess(message);
-    }
-    if (results?.raw?.message) {
-      setShowDonationPreviewModal(false);
-      setErrorMessage(Locale.label("donation.common.error") + ": " + results?.raw?.message);
-    }
-  }
-
-  const handleFundDonationsChange = async (fd: FundDonationInterface[]) => {
-    setErrorMessage(null);
-    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 });
-    }
-    let d = { ...donation };
-    d.amount = totalAmount;
-    d.funds = selectedFunds;
-    setFundsTotal(totalAmount);
-    
-    const fee = await getTransactionFee(totalAmount);
-    setTransactionFee(fee);
-    
-    if (gateway && gateway.payFees === true) {
-      d.amount = totalAmount + fee;
-      setPayFee(fee);
-    }
-    setTotal(d.amount);
-    setDonation(d)
-  }
-
-  const getTransactionFee = async (amount: number) => {
-    if (amount > 0) {
-      let dt: string = "";
-      if (donation.type === "card") dt = "creditCard";
-      if (donation.type === "bank") dt = "ach";
-      try {
-        const response = await ApiHelper.post("/donate/fee?churchId=" + props?.church?.id, { type: dt, amount }, "GivingApi");
-        return response.calculatedFee;
-      } catch (error) {
-        console.log("Error calculating transaction fee: ", error);
-        return 0;
-      }
-    } else {
-      return 0;
-    }
-  }
-
-  React.useEffect(loadData, [props.person?.id]);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  // React.useEffect(() => { gateway && gateway.payFees === true && handleAutoPayFee() }, [fundDonations]);
-
-  if (!funds.length || !props?.paymentMethods[0]?.id) return null;
-  else return (
-    <>
-      <DonationPreviewModal show={showDonationPreviewModal} onHide={() => setShowDonationPreviewModal(false)} handleDonate={makeDonation} donation={donation} donationType={donationType} payFee={payFee} paymentMethodName={paymentMethodName} funds={funds} />
-      <InputBox id="donationBox" aria-label="donation-box" headerIcon="volunteer_activism" headerText={Locale.label("donation.donationForm.donate")} ariaLabelSave="save-button" cancelFunction={donationType ? handleCancel : undefined} saveFunction={donationType ? handleSave : undefined} saveText={Locale.label("donation.donationForm.preview")}>
-        <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={() => handleDonationSelect("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={() => handleDonationSelect("recurring")}>{Locale.label("donation.donationForm.makeRecurring")}</Button>
-          </Grid>
-        </Grid>
-        {donationType
-          && <div style={{ marginTop: "20px" }}>
-            <Grid container spacing={3}>
-              <Grid size={12}>
-                <FormControl fullWidth>
-                  <InputLabel>{Locale.label("donation.donationForm.method")}</InputLabel>
-                  <Select label={Locale.label("donation.donationForm.method")} name="method" aria-label="method" value={donation.id} 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>
-            {donationType === "recurring"
-              && <Grid container spacing={3} style={{marginTop:10}}>
-                <Grid size={{ xs: 12, md: 6 }}>
-                  <TextField fullWidth name="date" type="date" aria-label="date" label={Locale.label("donation.donationForm.startDate")} value={DateHelper.formatHtml5Date(new Date(donation.billing_cycle_anchor))} onChange={handleChange} onKeyDown={handleKeyDown} />
-                </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>
-            }
-            <div className="form-group">
-              {funds && fundDonations
-                && <>
-                  <h4>{Locale.label("donation.donationForm.fund")}</h4>
-                  <FundDonations fundDonations={fundDonations} funds={funds} updatedFunction={handleFundDonationsChange} />
-                </>
-              }
-              {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>{Locale.label("donation.donationForm.total")}: ${total}</p>
-                </>
-              }
-              <TextField fullWidth label={Locale.label("donation.donationForm.notes")} multiline aria-label="note" name="notes" value={donation.notes || ""} onChange={handleChange} onKeyDown={handleKeyDown} />
-            </div>
-            {errorMessage && <ErrorMessages errors={[errorMessage]}></ErrorMessages>}
-          </div>
-        }
-      </InputBox>
-    </>
-  );
-}

package/src/donationComponents/components/FundDonation.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import React from "react";
-import { FundDonationInterface, FundInterface } from "@churchapps/helpers";
-import { FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material"
-import { Locale } from "../../helpers";
-
-interface Props {
-  fundDonation: FundDonationInterface,
-  funds: FundInterface[],
-  index: number,
-  updatedFunction: (fundDonation: FundDonationInterface, index: number) => void,
-  params?: any,
-}
-
-export const FundDonation: React.FC<Props> = (props) => {
-
-  const getOptions = () => {
-    let result = [];
-    for (let i = 0; i < props.funds.length; i++) {
-      const getDisabled = (props?.params?.fundId && props.params.fundId !== "") ? props.params.fundId !== props.funds[i].id : false;
-      result.push(<MenuItem key={i} value={props.funds[i].id} disabled={getDisabled}>{props.funds[i].name}</MenuItem>);
-    }
-    return result;
-  }
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
-    let fd = { ...props.fundDonation }
-    switch (e.target.name) {
-      case "amount":
-        fd.amount = parseFloat(e.target.value.replace("$", "").replace(",", ""));
-        break;
-      case "fund":
-        fd.fundId = e.target.value;
-        break;
-    }
-    props.updatedFunction(fd, props.index);
-  }
-
-  return (
-    <>
-      <Grid container spacing={3}>
-        <Grid size={{ xs: 12, md: 6 }}>
-          <TextField fullWidth name="amount" label={Locale.label("donation.fundDonations.amount")} type="number" disabled={props.params?.amount && props.params.amount !== ""} aria-label="amount" lang="en-150" value={props.fundDonation.amount || ""} onChange={handleChange} />
-        </Grid>
-        <Grid size={{ xs: 12, md: 6 }}>
-          <FormControl fullWidth>
-            <InputLabel>{Locale.label("donation.fundDonations.fund")}</InputLabel>
-            <Select fullWidth label={Locale.label("donation.fundDonations.fund")} name="fund" aria-label="fund" value={props.fundDonation.fundId} onChange={handleChange}>
-              {getOptions()}
-            </Select>
-          </FormControl>
-        </Grid>
-      </Grid>
-    </>
-  );
-}
-

package/src/donationComponents/components/FundDonations.tsx

@@ -1,44 +0,0 @@
-"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) => {
-    let fundDonations = [...props.fundDonations];
-    fundDonations[index] = fundDonation;
-    props.updatedFunction(fundDonations);
-  }
-
-  const addRow = (e: React.MouseEvent) => {
-    e.preventDefault();
-    let fundDonations = [...props.fundDonations];
-    let fd = { fundId: props.funds[0].id } as FundDonationInterface;
-    fundDonations.push(fd);
-    props.updatedFunction(fundDonations);
-  }
-
-  const getRows = () => {
-    let result = [];
-    for (let i = 0; i < props.fundDonations.length; i++) {
-      let 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/NonAuthDonation.tsx

@@ -1,33 +0,0 @@
-"use client";
-
-import React from "react";
-import { Elements } from "@stripe/react-stripe-js";
-import { loadStripe, Stripe } from "@stripe/stripe-js";
-import { ApiHelper } from "../../helpers";
-import { NonAuthDonationInner } from "./NonAuthDonationInner";
-import { PaperProps } from "@mui/material";
-
-interface Props { churchId: string, mainContainerCssProps?: PaperProps, showHeader?: boolean, recaptchaSiteKey: string, churchLogo?: string }
-
-export const NonAuthDonation: React.FC<Props> = ({ mainContainerCssProps, showHeader, ...props }) => {
-  const [stripePromise, setStripe] = React.useState<Promise<Stripe>>(null);
-
-  const init = () => {
-    ApiHelper.get("/gateways/churchId/" + props.churchId, "GivingApi").then(data => {
-      if (data.length && data[0]?.publicKey) {
-        setStripe(loadStripe(data[0].publicKey));
-      }
-    });
-  }
-
-  React.useEffect(init, []); //eslint-disable-line
-
-  return (
-    <>
-      <Elements stripe={stripePromise}>
-        <NonAuthDonationInner churchId={props.churchId} mainContainerCssProps={mainContainerCssProps} showHeader={showHeader} recaptchaSiteKey={props.recaptchaSiteKey} churchLogo={props?.churchLogo} />
-      </Elements>
-    </>
-  );
-}
-