@churchapps/apphelper-donations
Version:
Donation components for ChurchApps AppHelper
120 lines • 8.59 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { FormControl, Grid, InputLabel, MenuItem, Select, TextField } from "@mui/material";
import { useStripe } from "@stripe/react-stripe-js";
import { InputBox, ErrorMessages } from "@churchapps/apphelper";
import { ApiHelper } from "@churchapps/helpers";
import { Locale } from "../helpers";
export const BankForm = (props) => {
const stripe = useStripe();
const [bankAccount, setBankAccount] = useState({ account_holder_name: props.bank.account_holder_name, account_holder_type: props.bank.account_holder_type, country: "US", currency: "usd" });
const [paymentMethod] = useState({ customerId: props.customerId, personId: props.person.id, email: props.person.contactInfo.email, name: props.person.name.display });
const [updateBankData] = useState({ 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 } });
const [verifyBankData, setVerifyBankData] = useState({ paymentMethodId: props.bank.id, customerId: props.customerId, amountData: { amounts: [] } });
const [showSave, setShowSave] = useState(true);
const [errorMessage, setErrorMessage] = useState(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) => {
const bankData = { ...bankAccount };
const inputData = { [e.target.name]: e.target.value };
setBankAccount({ ...bankData, ...inputData });
setShowSave(true);
};
const handleKeyPress = (e) => {
const pattern = /^\d+$/;
if (!pattern.test(e.key))
e.preventDefault();
};
const handleVerify = (e) => {
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 (_jsxs(_Fragment, { children: [_jsx("p", { children: Locale.label("donation.bankForm.twoDeposits") }), _jsxs(Grid, { container: true, columnSpacing: 2, children: [_jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsx(TextField, { fullWidth: true, "aria-label": "amount1", label: Locale.label("donation.bankForm.firstDeposit"), name: "amount1", placeholder: "00", inputProps: { maxLength: 2 }, onChange: handleVerify, onKeyPress: handleKeyPress }) }), _jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsx(TextField, { fullWidth: true, "aria-label": "amount2", label: Locale.label("donation.bankForm.secondDeposit"), name: "amount2", placeholder: "00", inputProps: { maxLength: 2 }, onChange: handleVerify, onKeyPress: handleKeyPress }) })] })] }));
}
else {
let accountDetails = _jsx(_Fragment, {});
if (!props.bank.id) {
accountDetails = (_jsxs(Grid, { container: true, spacing: 3, children: [_jsx(Grid, { size: { xs: 12, md: 6 }, style: { marginBottom: "20px" }, children: _jsx(TextField, { fullWidth: true, label: Locale.label("donation.bankForm.routingNumber"), type: "number", name: "routing_number", "aria-label": "routing-number", placeholder: "Routing Number", className: "form-control", onChange: handleChange }) }), _jsx(Grid, { size: { xs: 12, md: 6 }, style: { marginBottom: "20px" }, children: _jsx(TextField, { fullWidth: true, label: Locale.label("donation.bankForm.accountNumber"), type: "number", name: "account_number", "aria-label": "account-number", placeholder: "Account Number", className: "form-control", onChange: handleChange }) })] }));
}
return (_jsxs(_Fragment, { children: [_jsxs(Grid, { container: true, spacing: 3, children: [_jsx(Grid, { size: { xs: 12, md: 6 }, style: { marginBottom: "20px" }, children: _jsx(TextField, { fullWidth: true, label: "Account Holder Name", name: "account_holder_name", required: true, "aria-label": "account-holder-name", placeholder: "Account Holder Name", value: bankAccount.account_holder_name, className: "form-control", onChange: handleChange }) }), _jsx(Grid, { size: { xs: 12, md: 6 }, style: { marginBottom: "20px" }, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: Locale.label("donation.bankForm.name") }), _jsxs(Select, { label: Locale.label("donation.bankForm.name"), name: "account_holder_type", "aria-label": "account-holder-type", value: bankAccount.account_holder_type, onChange: handleChange, children: [_jsx(MenuItem, { value: "individual", children: Locale.label("donation.bankForm.individual") }), _jsx(MenuItem, { value: "company", children: Locale.label("donation.bankForm.company") })] })] }) })] }), accountDetails] }));
}
};
return (_jsxs(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, children: [errorMessage && _jsx(ErrorMessages, { errors: [errorMessage] }), _jsxs("div", { children: [!props.bank.id && _jsx("p", { children: Locale.label("donation.bankForm.needVerified") }), getForm()] })] }));
};
//# sourceMappingURL=BankForm.js.map