@churchapps/apphelper-donations
Version:
Donation components for ChurchApps AppHelper
68 lines • 5.09 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import { ApiHelper } from "@churchapps/helpers";
import { NonAuthDonationInner } from "./NonAuthDonationInner";
import { PayPalNonAuthDonationInner } from "./PayPalNonAuthDonationInner";
import { DonationHelper } from "../helpers";
import { FormControl, InputLabel, Select, MenuItem, Box, Typography, ToggleButtonGroup, ToggleButton } from "@mui/material";
export const NonAuthDonation = ({ mainContainerCssProps, showHeader, ...props }) => {
const [stripePromise, setStripe] = useState(null);
const [availableGateways, setAvailableGateways] = useState([]);
const [selectedGateway, setSelectedGateway] = useState("stripe");
const [paymentType, setPaymentType] = useState("card");
const [loading, setLoading] = useState(true);
const init = () => {
ApiHelper.get(`/donate/gateways/${props.churchId}`, "GivingApi").then((response) => {
const gateways = Array.isArray(response?.gateways) ? response.gateways : [];
const enabledGateways = gateways.filter((gateway) => gateway && gateway.enabled !== false);
setAvailableGateways(enabledGateways);
if (enabledGateways.length > 0) {
const defaultGateway = DonationHelper.findGatewayByProvider(enabledGateways, "stripe") || enabledGateways[0];
setSelectedGateway(DonationHelper.normalizeProvider(defaultGateway?.provider));
const stripeGateway = DonationHelper.findGatewayByProvider(enabledGateways, "stripe");
if (stripeGateway?.publicKey) {
setStripe(loadStripe(stripeGateway.publicKey));
}
}
setLoading(false);
});
};
const handleGatewayChange = (event) => {
setSelectedGateway(event.target.value);
};
useEffect(init, []); //eslint-disable-line
if (loading) {
return _jsx(Box, { sx: { p: 3 }, children: _jsx(Typography, { children: "Loading payment options..." }) });
}
if (availableGateways.length === 0) {
return _jsx(Box, { sx: { p: 3 }, children: _jsx(Typography, { children: "No payment gateways available for this church." }) });
}
const renderGatewaySelector = () => {
if (availableGateways.length <= 1)
return null;
return (_jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: "Payment Method" }), _jsx(Select, { value: selectedGateway, label: "Payment Method", onChange: handleGatewayChange, children: availableGateways.map((gateway) => (_jsx(MenuItem, { value: DonationHelper.normalizeProvider(gateway.provider), children: DonationHelper.isProvider(gateway.provider, "stripe") ? "Credit Card (Stripe)" : "Credit Card (PayPal)" }, gateway.id))) })] }) }));
};
const renderPaymentTypeSelector = () => {
// Only show if Stripe is available (ACH requires Stripe)
// Only show ACH if the currency is USD
const stripeGateway = DonationHelper.findGatewayByProvider(availableGateways, "stripe");
const currency = stripeGateway?.currency || "usd";
if (!stripeGateway || selectedGateway !== "stripe")
return null;
return (_jsx(Box, { sx: { mb: 3 }, children: _jsxs(ToggleButtonGroup, { value: paymentType, exclusive: true, onChange: (_, value) => value && setPaymentType(value), fullWidth: true, size: "small", children: [_jsx(ToggleButton, { value: "card", children: "Credit/Debit Card" }), currency === "usd" && _jsx(ToggleButton, { value: "bank", children: "Bank Account (ACH)" })] }) }));
};
const renderDonationForm = () => {
if (selectedGateway === "paypal") {
const paypalGateway = DonationHelper.findGatewayByProvider(availableGateways, "paypal");
return (_jsx(PayPalNonAuthDonationInner, { churchId: props.churchId, mainContainerCssProps: mainContainerCssProps, showHeader: false, recaptchaSiteKey: props.recaptchaSiteKey, churchLogo: props?.churchLogo, paypalClientId: paypalGateway?.publicKey || null }));
}
else {
return (_jsx(Elements, { stripe: stripePromise, children: _jsx(NonAuthDonationInner, { churchId: props.churchId, mainContainerCssProps: mainContainerCssProps, showHeader: false, recaptchaSiteKey: props.recaptchaSiteKey, churchLogo: props?.churchLogo, paymentType: paymentType }) }));
}
};
return (_jsxs(Box, { children: [showHeader && (_jsx(Box, { sx: { mb: 2 }, children: _jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: "Donate" }) })), renderGatewaySelector(), renderPaymentTypeSelector(), renderDonationForm(), _jsx(Box, { sx: { marginTop: "15px", fontSize: "14px" }, children: _jsx("a", { href: "/my/donate", style: { color: "#1976d2" }, children: "Login to manage existing donations" }) })] }));
};
//# sourceMappingURL=NonAuthDonation.js.map