@churchapps/apphelper 0.4.6 → 0.4.8

package/src/donationComponents/DonationPage.tsx

@@ -1,214 +0,0 @@
-"use client";
-
-import React from "react";
-import { loadStripe, Stripe } from "@stripe/stripe-js";
-import { DonationForm, RecurringDonations, PaymentMethods } from "./components";
-import { DisplayBox, ExportLink, Loading } from "../components";
-import { ApiHelper, DateHelper, UniqueIdHelper, CurrencyHelper, Locale } from "../helpers";
-import { DonationInterface, PersonInterface, StripePaymentMethod, ChurchInterface } from "@churchapps/helpers";
-// import { Link } from "react-router-dom"
-import { Table, TableBody, TableRow, TableCell, TableHead, Alert, Button, Icon, Link, Menu, MenuItem } from "@mui/material"
-import { useMountedState } from "../hooks/useMountedState";
-
-interface Props { personId: string, appName?: string, church?: ChurchInterface, churchLogo?: string }
-
-export const DonationPage: React.FC<Props> = (props) => {
-  const [donations, setDonations] = React.useState<DonationInterface[]>(null);
-  const [stripePromise, setStripe] = React.useState<Promise<Stripe>>(null);
-  const [paymentMethods, setPaymentMethods] = React.useState<StripePaymentMethod[]>(null);
-  const [customerId, setCustomerId] = React.useState(null);
-  const [person, setPerson] = React.useState<PersonInterface>(null);
-  const [message, setMessage] = React.useState<string>(null);
-  const [appName, setAppName] = React.useState<string>("");
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const isMounted = useMountedState();
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  }
-
-  const loadPaymentMethods = async () => {
-    try {
-      const data = await ApiHelper.get("/paymentmethods/personid/" + props.personId, "GivingApi");
-      if (!data.length) {
-        setPaymentMethods([]);
-        return;
-      }
-      
-      const cards = data[0].cards.data.map((card: any) => new StripePaymentMethod(card));
-      const banks = data[0].banks.data.map((bank: any) => new StripePaymentMethod(bank));
-      setCustomerId(data[0].customer.id);
-      setPaymentMethods(cards.concat(banks));
-    } catch (error) {
-      console.error("Error loading payment methods:", error);
-      setPaymentMethods([]);
-    }
-  }
-
-  const loadPersonData = async () => {
-    try {
-      const data = await ApiHelper.get("/people/" + props.personId, "MembershipApi");
-      setPerson(data);
-    } catch (error) {
-      console.error("Error loading person data:", error);
-    }
-  }
-
-  const loadStripeData = async (gatewayData: any) => {
-    if (!gatewayData.length || !gatewayData[0]?.publicKey) {
-      setPaymentMethods([]);
-      return;
-    }
-    
-    setStripe(loadStripe(gatewayData[0].publicKey));
-    await Promise.all([
-      loadPersonData(),
-      loadPaymentMethods()
-    ]);
-  }
-
-  const loadData = async () => {
-    if (props?.appName) setAppName(props.appName);
-    if (UniqueIdHelper.isMissing(props.personId)) return;
-    
-    try {
-      const [donationsData, gatewaysData] = await Promise.all([
-        ApiHelper.get("/donations?personId=" + props.personId, "GivingApi"),
-        ApiHelper.get("/gateways", "GivingApi")
-      ]);
-      
-      setDonations(donationsData);
-      await loadStripeData(gatewaysData);
-    } catch (error) {
-      console.error("Error loading donation data:", error);
-      setDonations([]);
-      setPaymentMethods([]);
-    }
-  }
-
-  const handleDataUpdate = (message?: string) => {
-    setMessage(message)
-    setPaymentMethods(null);
-    loadData();
-  }
-
-  const getEditContent = () => {
-    const result: React.ReactElement[] = [];
-    const date = new Date();
-    const currentY = date.getFullYear();
-    const lastY = date.getFullYear() - 1;
-
-    const current_year = (donations.length>0) ? donations.filter(d => new Date(d.donationDate || "2000-01-01").getFullYear() === currentY) : [];
-    const last_year = (donations.length>0) ? donations.filter(d => new Date(d.donationDate || "2000-01-01").getFullYear() === lastY) : [];
-    const customHeaders = [
-      { label: "amount", key: "amount" },
-      { label: "donationDate", key: "donationDate" },
-      { label: "fundName", key: "fund.name" },
-      { label: "method", key: "method"},
-      { label: "methodDetails", key: "methodDetails"},
-    ]
-
-    result.push(<>
-      <Button
-        id="download-button"
-        aria-controls={open ? "download-menu" : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? "true" : undefined}
-        onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-          setAnchorEl(e.currentTarget);
-        }}
-      >
-        <Icon>download</Icon>
-      </Button>
-      <Menu
-        id="download-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        MenuListProps={{ 'aria-labelledby': "download-button" }}
-      >
-        <MenuItem onClick={handleClose} dense><ExportLink data={current_year} filename="current_year_donations" customHeaders={customHeaders} text="Current Year (CSV)" icon="table_chart" /></MenuItem>
-        <MenuItem onClick={handleClose} dense><Link href={"/donations/print/" + person?.id}><Button><Icon>print</Icon> &nbsp; Current Year (PRINT)</Button></Link></MenuItem>
-        <MenuItem onClick={handleClose} dense><ExportLink data={last_year} filename="last_year_donations" customHeaders={customHeaders} text="Last Year (CSV)" icon="table_chart" /></MenuItem>
-        <MenuItem onClick={handleClose} dense><Link href={"/donations/print/" + person?.id + "?prev=1"}><Button><Icon>print</Icon> &nbsp; Last Year (PRINT)</Button></Link></MenuItem>
-      </Menu>
-    </>);
-
-    return result;
-  }
-
-  const getRows = () => {
-    let rows: React.ReactElement[] = [];
-
-    if (donations.length === 0) {
-      rows.push(<TableRow key="0"><TableCell>{Locale.label("donation.page.willAppear")}</TableCell></TableRow>);
-      return rows;
-    }
-
-    for (let i = 0; i < donations.length; i++) {
-      let d = donations[i];
-      rows.push(
-        <TableRow key={i}>
-          {appName !== "B1App" && <TableCell><Link href={"/donations/" + d.batchId}>{d.batchId}</Link></TableCell>}
-          <TableCell>{DateHelper.prettyDate(new Date(d.donationDate))}</TableCell>
-          <TableCell>{d.method} - {d.methodDetails}</TableCell>
-          <TableCell>{d.fund.name}</TableCell>
-          <TableCell>{CurrencyHelper.formatCurrency(d.fund.amount)}</TableCell>
-        </TableRow>
-      );
-    }
-    return rows;
-  }
-
-  const getTableHeader = () => {
-    const rows: React.ReactElement[] = []
-
-    if (donations.length > 0) {
-      rows.push(
-        <TableRow key="header" sx={{textAlign: "left"}}>
-          {appName !== "B1App" && <th>{Locale.label("donation.page.batch")}</th>}
-          <th>{Locale.label("donation.page.date")}</th>
-          <th>{Locale.label("donation.page.method")}</th>
-          <th>{Locale.label("donation.page.fund")}</th>
-          <th>{Locale.label("donation.page.amount")}</th>
-        </TableRow>
-      );
-    }
-
-    return rows;
-  }
-
-  React.useEffect(() => {
-    loadData();
-  }, [props.personId]); //eslint-disable-line
-
-  const getTable = () => {
-    if (!donations) return <Loading />;
-    else return (<Table>
-      <TableHead>{getTableHeader()}</TableHead>
-      <TableBody>{getRows()}</TableBody>
-    </Table>);
-  }
-
-  const getPaymentMethodComponents = () => {
-    if (!paymentMethods || !donations) return <Loading />;
-    else return (
-      <>
-        <DonationForm person={person} customerId={customerId} paymentMethods={paymentMethods} stripePromise={stripePromise} donationSuccess={handleDataUpdate} church={props?.church} churchLogo={props?.churchLogo} />
-        <DisplayBox headerIcon="payments" headerText="Donations" editContent={getEditContent()}>
-          {getTable()}
-        </DisplayBox>
-        <RecurringDonations customerId={customerId} paymentMethods={paymentMethods} appName={appName} dataUpdate={handleDataUpdate} />
-        <PaymentMethods person={person} customerId={customerId} paymentMethods={paymentMethods} appName={appName} stripePromise={stripePromise} dataUpdate={handleDataUpdate} />
-      </>
-    );
-  }
-
-  return (
-    <>
-      {paymentMethods && message && <Alert severity="success">{message}</Alert>}
-      {getPaymentMethodComponents()}
-    </>
-  );
-}

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>
-  );
-
-}