@churchapps/apphelper-donations
Version:
Donation components for ChurchApps AppHelper
87 lines • 5.28 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { DisplayBox } from "@churchapps/apphelper";
import { ApiHelper, UserHelper, CurrencyHelper, DateHelper } from "@churchapps/helpers";
import { Locale } from "../helpers";
import { Permissions } from "@churchapps/helpers";
import { RecurringDonationsEdit } from ".";
import { Icon, Table, TableBody, TableCell, TableRow, TableHead } from "@mui/material";
;
export const RecurringDonations = (props) => {
const [subscriptions, setSubscriptions] = useState([]);
const [mode, setMode] = useState("display");
const [editSubscription, setEditSubscription] = useState();
const loadData = () => {
if (props.customerId) {
ApiHelper.get("/customers/" + props.customerId + "/subscriptions", "GivingApi").then((subResult) => {
const subs = [];
const requests = subResult.data?.map((s) => ApiHelper.get("/subscriptionfunds?subscriptionId=" + s.id, "GivingApi").then((subFunds) => {
s.funds = subFunds;
subs.push(s);
}));
return requests && Promise.all(requests).then(() => {
setSubscriptions(subs);
});
});
}
};
const handleUpdate = (message) => {
loadData();
setMode("display");
if (message)
props.dataUpdate(message);
};
const handleEdit = (sub) => (e) => {
e.preventDefault();
setEditSubscription(sub);
setMode("edit");
};
const getPaymentMethod = (sub) => {
const pm = props.paymentMethods.find((pm) => pm.id === (sub.default_payment_method || sub.default_source));
if (!pm)
return _jsx("span", { style: { color: "red" }, children: Locale.label("donation.recurring.notFound") });
return `${pm.name} ****${pm.last4}`;
};
const getInterval = (subscription) => {
const interval = subscription.plan.interval_count + " " + subscription.plan.interval;
return subscription.plan.interval_count > 1 ? interval + "s" : interval;
};
const getFunds = (subscription) => {
const result = [];
subscription.funds.forEach((fund) => {
result.push(_jsxs("div", { children: [fund.name, " ", _jsx("span", { style: { float: "right" }, children: CurrencyHelper.formatCurrency(fund.amount) })] }, subscription.id + fund.id));
});
const total = (subscription.plan.amount / 100);
result.push(_jsxs("div", { style: { borderTop: "solid #dee2e6 1px" }, children: ["Total ", _jsx("span", { style: { float: "right" }, children: CurrencyHelper.formatCurrency(total) })] }, subscription.id + "-total"));
return result;
};
const getEditOptions = (sub) => {
if ((!UserHelper.checkAccess(Permissions.givingApi.settings.edit) && props.appName !== "B1App") || props?.paymentMethods?.length === 0)
return null;
return _jsx("button", { type: "button", "aria-label": "edit-button", onClick: handleEdit(sub), style: { background: "none", border: "none", cursor: "pointer", color: "#3b82f6" }, children: _jsx(Icon, { children: "edit" }) });
};
const getTableHeader = () => {
const result = [];
result.push(_jsxs(TableRow, { sx: { textAlign: "left" }, children: [_jsx(TableCell, { children: _jsx("b", { children: Locale.label("donation.recurring.startDate") }) }), _jsx(TableCell, { children: _jsx("b", { children: Locale.label("donation.recurring.amount") }) }), _jsx(TableCell, { children: _jsx("b", { children: Locale.label("donation.recurring.interval") }) }), _jsx(TableCell, { children: _jsx("b", { children: Locale.label("donation.recurring.paymentMethod") }) }), props?.paymentMethods?.length > 0 && _jsx(TableCell, {})] }, "header"));
return result;
};
const getTableRows = () => {
const rows = [];
subscriptions.forEach((sub) => {
rows.push(_jsxs(TableRow, { children: [_jsx(TableCell, { children: DateHelper.prettyDate(new Date(sub.billing_cycle_anchor * 1000)) }), _jsx(TableCell, { children: getFunds(sub) }), _jsxs(TableCell, { children: [Locale.label("donation.recurring.every"), " ", getInterval(sub)] }), _jsx(TableCell, { className: "capitalize", children: getPaymentMethod(sub) }), _jsx(TableCell, { align: "right", children: getEditOptions(sub) })] }, sub.id));
});
return rows;
};
const getSubscriptionsTable = () => (_jsxs(Table, { children: [_jsx(TableHead, { children: getTableHeader() }), _jsx(TableBody, { children: getTableRows() })] }));
useEffect(loadData, []); //eslint-disable-line
if (!subscriptions.length)
return null;
if (mode === "display") {
return (_jsx(DisplayBox, { "data-testid": "recurring-donations", headerIcon: "restart_alt", headerText: "Recurring Donations", children: getSubscriptionsTable() }));
}
if (mode === "edit" && editSubscription) {
return (_jsx(RecurringDonationsEdit, { customerId: props.customerId, paymentMethods: props.paymentMethods, editSubscription: editSubscription, subscriptionUpdated: handleUpdate }));
}
};
//# sourceMappingURL=RecurringDonations.js.map