@churchapps/apphelper 0.0.1

package/src/donationComponents/components/BankForm.tsx

@@ -0,0 +1,159 @@
+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 } from "../../helpers";
+import { PersonInterface, StripePaymentMethod, PaymentMethodInterface, StripeBankAccountInterface, StripeBankAccountUpdateInterface, StripeBankAccountVerifyInterface } from "../../interfaces";
+
+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("Routing and account number are required.")
+    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("Bank account added. Verify your bank account to make a donation.");
+              props.setMode("display");
+            }
+          });
+        }
+      });
+    }
+    setShowSave(true);
+  }
+
+  const updateBank = () => {
+    if (bankAccount.account_holder_name === "") setErrorMessage("Account holder name is required.");
+    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("Bank account 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("Bank account 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>Enter the two deposits you received in your account to finish verifying your bank account.</p>
+        <Grid container columnSpacing={2}>
+          <Grid item md={6} xs={12}>
+            <TextField fullWidth aria-label="amount1" label="First Deposit" name="amount1" placeholder="00" inputProps={{ maxLength: 2 }} onChange={handleVerify} onKeyPress={handleKeyPress} />
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <TextField fullWidth aria-label="amount2" label="Second Deposit" 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 item md={6} xs={12} style={{ marginBottom: "20px" }}>
+            <TextField fullWidth label="Routing Number" type="number" name="routing_number" aria-label="routing-number" placeholder="Routing Number" className="form-control" onChange={handleChange} />
+          </Grid>
+          <Grid item md={6} xs={12} style={{ marginBottom: "20px" }}>
+            <TextField fullWidth label="Account Number" 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 item md={6} xs={12} 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 item md={6} xs={12} style={{ marginBottom: "20px" }}>
+            <FormControl fullWidth>
+              <InputLabel>Account Holder Type</InputLabel>
+              <Select label="Account Holder Type" name="account_holder_type" aria-label="account-holder-type" value={bankAccount.account_holder_type} onChange={handleChange}>
+                <MenuItem value="individual">Individual</MenuItem>
+                <MenuItem value="company">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>Bank accounts will need to be verified before making any donations. Your account will receive two small deposits in approximately 1-3 business days. You will need to enter those deposit amounts to finish verifying your account by selecting the verify account link next to your bank account under the payment methods section.</p>}
+        {getForm()}
+      </div>
+    </InputBox>
+  );
+
+}

package/src/donationComponents/components/CardForm.tsx

@@ -0,0 +1,104 @@
+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 } from "../../helpers";
+import { PersonInterface, StripePaymentMethod, PaymentMethodInterface, StripeCardUpdateInterface } from "../../interfaces";
+
+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("Card added successfully");
+          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("Card updated successfully");
+          props.setMode("display");
+        }
+      });
+    }
+  }
+
+  const getHeaderText = () => props.card.id
+    ? `${props.card.name.toUpperCase()} ****${props.card.last4}`
+    : "Add New Card"
+
+  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 item md={6} xs={12}>
+              <TextField fullWidth aria-label="card-exp-month" label="Card Expiration Month:" name="exp_month" value={cardUpdate.cardData.card.exp_month} placeholder="MM" inputProps={{ maxLength: 2 }} onChange={handleChange} onKeyPress={handleKeyPress} />
+            </Grid>
+            <Grid item md={6} xs={12}>
+              <TextField fullWidth aria-label="card-exp-year" label="Card Expiration Year:" 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,228 @@
+/* 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 } from "../../helpers";
+import { PersonInterface, StripePaymentMethod, StripeDonationInterface, FundDonationInterface, FundInterface } from "../../interfaces";
+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, churchName?: 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;
+    console.log(e.target.name, 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("Donation amount must be greater than $0.50");
+    else setShowDonationPreviewModal(true);
+  }
+  const handleDonationSelect = (type: string) => {
+    let dt = donationType === type ? null : type;
+    setDonationType(dt);
+  }
+
+  const makeDonation = async (message: string) => {
+    let results;
+    if (donationType === "once") results = await ApiHelper.post("/donate/charge/", donation, "GivingApi");
+    if (donationType === "recurring") results = await ApiHelper.post("/donate/subscribe/", {...donation, churchName: props?.churchName, churchURL: typeof window !== "undefined" && window.location.origin}, "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("Error: " + results?.raw?.message);
+    }
+  }
+
+  const handleFundDonationsChange = (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;
+    setDonation(d);
+    setFundsTotal(totalAmount);
+    setTotal(totalAmount);
+    setTransactionFee(getTransactionFee(totalAmount));
+  }
+
+  const getTransactionFee = (amount: number) => {
+    const fixedFee = 0.30;
+    const fixedPercent = 0.029;
+    return Math.round(((amount + fixedFee) / (1 - fixedPercent) - amount) * 100) / 100;
+  }
+
+  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="Donate" ariaLabelSave="save-button" cancelFunction={donationType ? handleCancel : undefined} saveFunction={donationType ? handleSave : undefined} saveText="Preview Donation">
+        <Grid container spacing={3}>
+          <Grid item md={6} xs={12}>
+            <Button aria-label="single-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "once" ? "contained" : "outlined"} onClick={() => handleDonationSelect("once")}>Make a Donation</Button>
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <Button aria-label="recurring-donation" size="small" fullWidth style={{ minHeight: "50px" }} variant={donationType === "recurring" ? "contained" : "outlined"} onClick={() => handleDonationSelect("recurring")}>Make a Recurring Donation</Button>
+          </Grid>
+        </Grid>
+        {donationType
+          && <div style={{ marginTop: "20px" }}>
+            <Grid container spacing={3}>
+              <Grid item md={12} xs={12}>
+                <FormControl fullWidth>
+                  <InputLabel>Method</InputLabel>
+                  <Select label="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 item md={6} xs={12}>
+                  <TextField fullWidth name="date" type="date" aria-label="date" label="Start Date" value={DateHelper.formatHtml5Date(new Date(donation.billing_cycle_anchor))} onChange={handleChange} onKeyDown={handleKeyDown} />
+                </Grid>
+                <Grid item md={6} xs={12}>
+                  <FormControl fullWidth>
+                    <InputLabel>Frequency</InputLabel>
+                    <Select label="Frequency" name="interval" aria-label="interval" value={interval} onChange={handleChange}>
+                      <MenuItem value="one_week">Weekly</MenuItem>
+                      <MenuItem value="two_week">Bi-Weekly</MenuItem>
+                      <MenuItem value="one_month">Monthly</MenuItem>
+                      <MenuItem value="three_month">Quarterly</MenuItem>
+                      <MenuItem value="one_year">Annually</MenuItem>
+                    </Select>
+                  </FormControl>
+                </Grid>
+              </Grid>
+            }
+            <div className="form-group">
+              {funds && fundDonations
+                && <>
+                  <h4>Fund</h4>
+                  <FundDonations fundDonations={fundDonations} funds={funds} updatedFunction={handleFundDonationsChange} />
+                </>
+              }
+              {fundsTotal > 0
+                && <>
+                  {(gateway && gateway.payFees === true) ? <Typography fontSize={14} fontStyle="italic">*Transaction fees of {CurrencyHelper.formatCurrency(transactionFee)} are applied.</Typography> : (
+                    <FormGroup>
+                      <FormControlLabel control={<Checkbox />} name="transaction-fee" label={`I'll generously add ${CurrencyHelper.formatCurrency(transactionFee)} to cover the transaction fees so you can keep 100% of my donation.`} onChange={handleCheckChange} />
+                    </FormGroup>
+                  )}
+                  <p>Total Donation Amount: ${total}</p>
+                </>
+              }
+              <TextField fullWidth label="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,49 @@
+import React from "react";
+import { FundDonationInterface, FundInterface } from "../../interfaces";
+import { FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material"
+
+interface Props {
+  fundDonation: FundDonationInterface,
+  funds: FundInterface[],
+  index: number,
+  updatedFunction: (fundDonation: FundDonationInterface, index: number) => void
+}
+
+export const FundDonation: React.FC<Props> = (props) => {
+
+  const getOptions = () => {
+    let result = [];
+    for (let i = 0; i < props.funds.length; i++) result.push(<MenuItem key={i} value={props.funds[i].id}>{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 item md={6} xs={12}>
+        <TextField fullWidth name="amount" label="Amount" type="number" aria-label="amount" lang="en-150" value={props.fundDonation.amount || ""} onChange={handleChange} />
+      </Grid>
+      <Grid item md={6} xs={12}>
+        <FormControl fullWidth>
+          <InputLabel>Fund</InputLabel>
+          <Select fullWidth label="Fund" name="fund" aria-label="fund" value={props.fundDonation.fundId} onChange={handleChange}>
+            {getOptions()}
+          </Select>
+        </FormControl>
+      </Grid>
+    </Grid>
+  );
+}
+

package/src/donationComponents/components/FundDonations.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { FundDonation } from ".";
+import { FundDonationInterface, FundInterface } from "../../interfaces";
+
+interface Props { fundDonations: FundDonationInterface[], funds: FundInterface[], 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} key={i} index={i} />)
+    }
+
+    return result;
+  }
+
+  return (
+    <>
+      {getRows()}
+      <a href="about:blank" aria-label="add-fund-donation" className="text-decoration" style={{ display: "block", marginBottom: "15px" }} onClick={addRow}>Add more</a>
+    </>
+  );
+}
+

package/src/donationComponents/components/NonAuthDonation.tsx

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