@churchapps/apphelper-donations
Version:
Donation components for ChurchApps AppHelper
78 lines • 5.59 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { CardForm, BankForm } from ".";
import { DisplayBox, Loading } from "@churchapps/apphelper";
import { ApiHelper, UserHelper } from "@churchapps/helpers";
import { Locale, StripePaymentMethod } from "../helpers";
import { Permissions } from "@churchapps/helpers";
import { Icon, Table, TableBody, TableCell, TableRow, IconButton, Menu, MenuItem } from "@mui/material";
export const PaymentMethods = (props) => {
const [editPaymentMethod, setEditPaymentMethod] = useState(new StripePaymentMethod());
const [mode, setMode] = useState("display");
const [verify, setVerify] = useState(false);
const handleEdit = (pm, verifyAccount) => (e) => {
e.preventDefault();
setEditPaymentMethod(pm);
setVerify(verifyAccount);
setMode("edit");
};
const handleDelete = async () => {
const confirmed = window.confirm(Locale.label("donation.paymentMethods.confirmDelete"));
if (confirmed) {
ApiHelper.delete("/paymentmethods/" + editPaymentMethod.id + "/" + props.customerId, "GivingApi").then(() => {
setMode("display");
props.dataUpdate(Locale.label("donation.paymentMethods.deleted"));
});
}
};
const MenuIcon = () => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (e) => {
setAnchorEl(e.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "aria-label": "add-button", id: "addBtnGroup", "aria-controls": open ? "add-menu" : undefined, "aria-expanded": open ? "true" : undefined, "aria-haspopup": "true", onClick: handleClick, children: _jsx(Icon, { color: "primary", children: "add" }) }), _jsxs(Menu, { id: "add-menu", MenuListProps: { "aria-labelledby": "addBtnGroup" }, anchorEl: anchorEl, open: open, onClose: handleClose, children: [_jsxs(MenuItem, { "aria-label": "add-card", onClick: handleEdit(new StripePaymentMethod({ type: "card" })), children: [_jsx(Icon, { sx: { mr: "3px" }, children: "credit_card" }), " ", Locale.label("donation.paymentMethods.addCard")] }), _jsxs(MenuItem, { "aria-label": "add-bank", onClick: handleEdit(new StripePaymentMethod({ type: "bank" })), children: [_jsx(Icon, { sx: { mr: "3px" }, children: "account_balance" }), " ", Locale.label("donation.paymentMethods.addBank")] })] })] }));
};
const getNewContent = () => {
if (!UserHelper.checkAccess(Permissions.givingApi.settings.edit) && props.appName !== "B1App")
return null;
return _jsx(MenuIcon, {});
};
const getEditOptions = (pm) => {
if (!UserHelper.checkAccess(Permissions.givingApi.settings.edit) && props.appName !== "B1App")
return null;
return _jsx("button", { type: "button", "aria-label": "edit-button", onClick: handleEdit(pm), style: { background: "none", border: "none", cursor: "pointer", color: "#3b82f6" }, children: _jsx(Icon, { children: "edit" }) });
};
const getPMIcon = (type) => (type === "card" ? _jsx(Icon, { children: "credit_card" }) : _jsx(Icon, { children: "account_balance" }));
const getPaymentRows = () => {
const rows = [];
props.paymentMethods.forEach((method) => {
rows.push(_jsxs(TableRow, { children: [_jsxs(TableCell, { className: "capitalize", children: [getPMIcon(method.type), " ", method.name + " ****" + method.last4] }), _jsx(TableCell, { children: method?.status === "new" && _jsx("button", { type: "button", "aria-label": "verify-account", onClick: handleEdit(method, true), style: { background: "none", border: "none", cursor: "pointer", color: "#3b82f6", textDecoration: "underline" }, children: Locale.label("donation.paymentMethods.verify") }) }), _jsx(TableCell, { align: "right", children: getEditOptions(method) })] }, method.id));
});
return rows;
};
const PaymentMethodsTable = () => {
if (!props.paymentMethods)
return _jsx(Loading, {});
if (props.paymentMethods.length) {
return (_jsx(Table, { children: _jsx(TableBody, { children: getPaymentRows() }) }));
}
else
return _jsx("div", { children: Locale.label("donation.paymentMethods.noMethod") });
};
const EditForm = () => (_jsxs(Elements, { stripe: props.stripePromise, children: [editPaymentMethod.type === "card" && _jsx(CardForm, { card: editPaymentMethod, customerId: props.customerId, person: props.person, setMode: setMode, deletePayment: handleDelete, updateList: (message) => { props.dataUpdate(message); } }), editPaymentMethod.type === "bank" && _jsx(BankForm, { bank: editPaymentMethod, showVerifyForm: verify, customerId: props.customerId, person: props.person, setMode: setMode, deletePayment: handleDelete, updateList: (message) => { props.dataUpdate(message); } })] }));
const PaymentMethods = () => {
if (mode === "display") {
return (_jsx(DisplayBox, { "aria-label": "payment-methods-box", headerIcon: "credit_card", headerText: "Payment Methods", editContent: getNewContent(), children: _jsx(PaymentMethodsTable, {}) }));
}
else
return _jsx(EditForm, {});
};
return props.stripePromise ? _jsx(PaymentMethods, {}) : null;
};
//# sourceMappingURL=PaymentMethods.js.map