@churchapps/apphelper-donations
Version:
Donation components for ChurchApps AppHelper
97 lines • 6.58 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, 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 [gateway, setGateway] = useState(undefined);
useEffect(() => {
ApiHelper.get(`/donate/gateways/${UserHelper.currentUserChurch?.church?.id || ""}`, "GivingApi").then((response) => {
const gateways = Array.isArray(response?.gateways) ? response.gateways : [];
const stripeGateway = gateways.find((g) => g.provider?.toLowerCase() === "stripe");
if (stripeGateway)
setGateway(stripeGateway);
}).catch(() => {
setGateway(undefined);
});
}, []);
const handleEdit = (pm, verifyAccount) => (e) => {
e.preventDefault();
setEditPaymentMethod(pm || new StripePaymentMethod());
setVerify(verifyAccount || false);
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 = () => {
// Allow adding payment methods if user has admin permissions OR it's their own account
if (!UserHelper.checkAccess(Permissions.givingApi.settings.edit) &&
props.person?.id !== UserHelper.currentUserChurch?.person?.id)
return null;
return _jsx(MenuIcon, {});
};
const getEditOptions = (pm) => {
// Allow editing payment methods if user has admin permissions OR it's their own account
if (!UserHelper.checkAccess(Permissions.givingApi.settings.edit) &&
props.person?.id !== UserHelper.currentUserChurch?.person?.id)
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);
}, gateway: gateway })), editPaymentMethod.type === "bank" && (_jsx(BankForm, { bank: editPaymentMethod, showVerifyForm: verify, customerId: props.customerId, person: props.person, setMode: setMode, deletePayment: handleDelete, updateList: (message) => {
props.dataUpdate(message);
}, gateway: gateway }))] }));
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