@churchapps/apphelper 0.4.9 → 0.4.10

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export * from "./components";
 export * from "@churchapps/helpers";
 export * from "./pageComponents";
 export * from "./hooks";
+export * from "./donationComponents";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -19,4 +19,5 @@ __exportStar(require("./components"), exports);
 __exportStar(require("@churchapps/helpers"), exports);
 __exportStar(require("./pageComponents"), exports);
 __exportStar(require("./hooks"), exports);
+__exportStar(require("./donationComponents"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAA0B;AAC1B,+CAA6B;AAC7B,sDAAoC;AACpC,mDAAiC;AACjC,0CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAA0B;AAC1B,+CAA6B;AAC7B,sDAAoC;AACpC,mDAAiC;AACjC,0CAAwB;AACxB,uDAAqC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@churchapps/apphelper",
-  "version": "0.4.9",
+  "version": "0.4.10",
   "description": "Library of helper functions for React and NextJS ChurchApps",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ImageEditor.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, useRef } from "react";
 import Cropper from "react-cropper";
-import "cropperjs/dist/cropper.min.css";
+// import "cropperjs/dist/cropper.css"; // CSS import removed due to Next.js compatibility issues
 import { InputBox, SmallButton } from ".";
 import { Locale } from "../helpers";
 

package/src/donationComponents/components/BankForm.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import React from "react";
+import { FormControl, Grid, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+import type { SelectChangeEvent } 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 {
+      const 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

@@ -0,0 +1,104 @@
+"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 {
+      const 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

@@ -0,0 +1,260 @@
+"use client";
+
+ 
+import React from "react";
+import type { 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, FormControlLabel, Checkbox, FormGroup, Typography 
+} from "@mui/material";
+import type { SelectChangeEvent } 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) => {
+    const d = { ...donation } as StripeDonationInterface;
+    d.amount = checked ? fundsTotal + transactionFee : fundsTotal;
+    const showFee = checked ? transactionFee : 0;
+    setTotal(d.amount);
+    setPayFee(showFee);
+    setDonation(d);
+  };
+
+  const handleAutoPayFee = () => {
+    const d = { ...donation } as StripeDonationInterface;
+    d.amount = fundsTotal + transactionFee;
+    const showFee = transactionFee;
+    setTotal(d.amount);
+    setPayFee(showFee);
+    setDonation(d);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | SelectChangeEvent<string>) => {
+    setErrorMessage(null);
+    const d = { ...donation } as StripeDonationInterface;
+    const value = e.target.value;
+    switch (e.target.name) {
+      case "method":
+        d.id = value;
+        const 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;
+        const 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) => {
+    const 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;
+    const selectedFunds: any = [];
+    for (const fundDonation of fd) {
+      totalAmount += fundDonation.amount || 0;
+      const fund = funds.find((fund: FundInterface) => fund.id === fundDonation.fundId);
+      selectedFunds.push({ id: fundDonation.fundId, amount: fundDonation.amount || 0, name: fund.name });
+    }
+    const 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]);
+   
+  // 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

@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import { FundDonationInterface, FundInterface } from "@churchapps/helpers";
+import { FormControl, Grid, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+import type { SelectChangeEvent } 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 = () => {
+    const 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>) => {
+    const 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>
+    </>
+  );
+};
+