@churchapps/apphelper 0.11.0 → 0.13.0

package/dist/donations/components/KingdomFundingTokenForm.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useCallback, forwardRef, useImperativeHandle } from "react";
+import { Box, CircularProgress, Typography } from "@mui/material";
+import { Locale } from "../helpers";
+// CSS strings for each CardFormStyles field to match MUI outlined TextField
+// accept.blue labelType options: "floating" | "static-left" | "static-top" | "hidden"
+const inputBase = "font-family: 'Roboto','Helvetica','Arial',sans-serif; font-size: 1rem; color: rgba(0,0,0,0.87); border: 1px solid rgba(0,0,0,0.23); border-radius: 4px; padding: 16.5px 14px; background: #fff; outline: none; box-sizing: border-box; transition: border-color 200ms cubic-bezier(0.0,0,0.2,1);";
+const tokenFormStyles = {
+    container: "display: flex; flex-wrap: wrap; gap: 12px; width: 100%; align-items: flex-end;",
+    card: inputBase + " flex: 1 0 100%; width: 100%;",
+    expiryContainer: "display: flex; align-items: flex-end; gap: 4px;",
+    expiryMonth: inputBase + " width: 64px; text-align: center;",
+    expirySeparator: "font-size: 1.25rem; color: rgba(0,0,0,0.4); padding: 16.5px 0; line-height: 1;",
+    expiryYear: inputBase + " width: 64px; text-align: center;",
+    cvv2: inputBase + " width: 90px;",
+    labels: "font-family: 'Roboto','Helvetica','Arial',sans-serif; font-size: 0.75rem; color: rgba(0,0,0,0.6);",
+    labelType: "floating"
+};
+export const KingdomFundingTokenForm = forwardRef(({ tokenizationKey, sandbox = false }, ref) => {
+    const containerRef = useRef(null);
+    const hostedTokenizationRef = useRef(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const initCalledRef = useRef(false);
+    const destroyTokenization = useCallback(() => {
+        if (hostedTokenizationRef.current) {
+            try {
+                // destroy() returns a Promise that often rejects with undefined when the
+                // iframe was never fully initialized (e.g. unmount during loading).
+                // Swallow both sync throws and the async rejection so it doesn't surface
+                // as an Unhandled Promise Rejection in the console.
+                const result = hostedTokenizationRef.current.destroy();
+                if (result && typeof result.catch === "function") {
+                    result.catch(() => { });
+                }
+            }
+            catch (_e) { /* ignore */ }
+            hostedTokenizationRef.current = null;
+        }
+        // Clear any leftover iframes in the container
+        if (containerRef.current) {
+            containerRef.current.innerHTML = "";
+        }
+    }, []);
+    const initTokenization = useCallback(() => {
+        if (initCalledRef.current)
+            return;
+        try {
+            const HostedTokenization = window.HostedTokenization;
+            if (!HostedTokenization) {
+                setError(Locale.label("donation.kingdomFunding.paymentFormNotAvailable"));
+                setLoading(false);
+                return;
+            }
+            // Clean up any previous instance first
+            destroyTokenization();
+            const containerId = "kf-token-container";
+            if (containerRef.current) {
+                containerRef.current.id = containerId;
+            }
+            initCalledRef.current = true;
+            hostedTokenizationRef.current = new HostedTokenization(tokenizationKey, {
+                target: `#${containerId}`,
+                styles: tokenFormStyles
+            });
+            setLoading(false);
+        }
+        catch (_e) {
+            setError(Locale.label("donation.kingdomFunding.failedToInitPaymentForm"));
+            setLoading(false);
+        }
+    }, [tokenizationKey, destroyTokenization]);
+    useEffect(() => {
+        initCalledRef.current = false;
+        if (!tokenizationKey) {
+            setError(Locale.label("donation.kingdomFunding.missingTokenizationKey"));
+            setLoading(false);
+            return;
+        }
+        const scriptUrl = sandbox
+            ? "https://tokenization.sandbox.accept.blue/tokenization/v0.3"
+            : "https://tokenization.accept.blue/tokenization/v0.3";
+        // Check if script already loaded
+        if (window.HostedTokenization) {
+            initTokenization();
+            return () => { destroyTokenization(); initCalledRef.current = false; };
+        }
+        const existingScript = document.querySelector(`script[src="${scriptUrl}"]`);
+        if (existingScript) {
+            const onLoad = () => { initTokenization(); };
+            if (window.HostedTokenization) {
+                initTokenization();
+            }
+            else {
+                existingScript.addEventListener("load", onLoad);
+            }
+            return () => {
+                existingScript.removeEventListener("load", onLoad);
+                destroyTokenization();
+                initCalledRef.current = false;
+            };
+        }
+        const script = document.createElement("script");
+        script.src = scriptUrl;
+        script.async = true;
+        script.onload = () => { initTokenization(); };
+        script.onerror = () => {
+            setError(Locale.label("donation.kingdomFunding.failedToLoadPaymentForm"));
+            setLoading(false);
+        };
+        document.head.appendChild(script);
+        return () => {
+            destroyTokenization();
+            initCalledRef.current = false;
+        };
+    }, [tokenizationKey, sandbox, initTokenization, destroyTokenization]);
+    useImperativeHandle(ref, () => ({
+        getNonce: async () => {
+            if (!hostedTokenizationRef.current) {
+                throw new Error(Locale.label("donation.kingdomFunding.paymentFormNotInitialized"));
+            }
+            const result = await hostedTokenizationRef.current.getNonceToken();
+            if (!result?.nonce) {
+                throw new Error(result?.error || Locale.label("donation.kingdomFunding.failedToTokenizeCard"));
+            }
+            // Normalize expiry year to 4-digit (accept.blue API requires 2020-9999)
+            let expYear = result.expiryYear ? Number(result.expiryYear) : 0;
+            if (expYear > 0 && expYear < 100)
+                expYear += 2000;
+            return {
+                nonce: result.nonce,
+                last4: result.last4 || "",
+                cardType: result.cardType || "",
+                expiryMonth: result.expiryMonth ? String(result.expiryMonth) : "",
+                expiryYear: expYear ? String(expYear) : "",
+                maskedCard: result.maskedCard || ""
+            };
+        }
+    }));
+    if (error) {
+        return _jsx(Typography, { color: "error", sx: { py: 2 }, children: error });
+    }
+    return (_jsxs(Box, { children: [loading && (_jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1, py: 2 }, children: [_jsx(CircularProgress, { size: 20 }), _jsx(Typography, { variant: "body2", children: Locale.label("donation.kingdomFunding.loadingPaymentForm") })] })), _jsx("div", { ref: containerRef, style: { minHeight: loading ? 0 : undefined } })] }));
+});
+KingdomFundingTokenForm.displayName = "KingdomFundingTokenForm";
+//# sourceMappingURL=KingdomFundingTokenForm.js.map

package/dist/donations/components/KingdomFundingTokenForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KingdomFundingTokenForm.js","sourceRoot":"","sources":["../../../src/donations/components/KingdomFundingTokenForm.tsx"],"names":[],"mappings":"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"}

package/dist/donations/components/MultiGatewayDonationForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiGatewayDonationForm.d.ts","sourceRoot":"","sources":["../../../src/donations/components/MultiGatewayDonationForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAQhD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAiC,MAAM,YAAY,CAAC;AAC/F,OAAO,EAAE,eAAe,EAAwC,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAiB7G,UAAU,KAAK;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6jBpD,CAAC"}
+{"version":3,"file":"MultiGatewayDonationForm.d.ts","sourceRoot":"","sources":["../../../src/donations/components/MultiGatewayDonationForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAOhD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAiC,MAAM,YAAY,CAAC;AAG/F,OAAO,EAAE,eAAe,EAAwC,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAkB7G,UAAU,KAAK;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,aAAa,EAAE,CAAC;IAChC,eAAe,EAAE,cAAc,EAAE,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IAChC,eAAe,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAijBD,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAKpD,CAAC"}

package/dist/donations/components/MultiGatewayDonationForm.js

@@ -4,14 +4,16 @@ import { useCallback, useState, useEffect, useMemo, useRef } from "react";
 import { useStripe } from "@stripe/react-stripe-js";
 import { InputBox, ErrorMessages } from "../..";
 import { FundDonations } from ".";
-import { PayPalHostedFields } from "./PayPalHostedFields";
 import { DonationPreviewModal } from "../modals/DonationPreviewModal";
 import { ApiHelper, CurrencyHelper, DateHelper } from "@churchapps/helpers";
 import { Locale, DonationHelper } from "../helpers";
-import { Grid, InputLabel, MenuItem, Select, TextField, FormControl, Button, FormControlLabel, Checkbox, FormGroup, Typography, Alert } from "@mui/material";
-export const MultiGatewayDonationForm = (props) => {
+import { getPaymentProvider } from "../providers";
+import { Grid, Icon, InputLabel, MenuItem, Select, TextField, FormControl, Button, FormControlLabel, Checkbox, FormGroup, Typography, Alert } from "@mui/material";
+const MultiGatewayDonationInner = (props) => {
     const stripe = useStripe();
     const [errorMessage, setErrorMessage] = useState();
+    const [saveCard, setSaveCard] = useState(false);
+    const [useNewCard, setUseNewCard] = useState(false);
     const [fundDonations, setFundDonations] = useState();
     const [funds, setFunds] = useState([]);
     const [fundsLoaded, setFundsLoaded] = useState(false);
@@ -19,8 +21,9 @@ export const MultiGatewayDonationForm = (props) => {
     const [transactionFee, setTransactionFee] = useState(0);
     const [payFee, setPayFee] = useState(0);
     const [total, setTotal] = useState(0);
-    const [paymentMethodName, setPaymentMethodName] = useState(props?.paymentMethods?.length > 0 ? `${props.paymentMethods[0].name} ${props.paymentMethods[0].last4 ? `****${props.paymentMethods[0].last4}` : props.paymentMethods[0].email || ''}` : "");
-    const [selectedGateway, setSelectedGateway] = useState(DonationHelper.normalizeProvider(props?.paymentGateways?.find(g => g.enabled !== false)?.provider || "stripe"));
+    const [paymentMethodName, setPaymentMethodName] = useState(props?.paymentMethods?.length > 0 ? `${props.paymentMethods[0].name} ${props.paymentMethods[0].last4 ? `****${props.paymentMethods[0].last4}` : props.paymentMethods[0].email || ""}` : "");
+    const [selectedGateway] = useState(DonationHelper.normalizeProvider(props?.paymentGateways?.find(g => g.enabled !== false)?.provider || "stripe"));
+    const paymentProvider = useMemo(() => getPaymentProvider(selectedGateway), [selectedGateway]);
     const selectedGatewayObj = useMemo(() => {
         return (props.paymentGateways.find((g) => DonationHelper.normalizeProvider(g.provider) === selectedGateway) || null);
     }, [props.paymentGateways, selectedGateway]);
@@ -28,11 +31,7 @@ export const MultiGatewayDonationForm = (props) => {
     const [showDonationPreviewModal, setShowDonationPreviewModal] = useState(false);
     const [interval, setInterval] = useState("one_month");
     const [gateway, setGateway] = useState(selectedGatewayObj);
-    const paypalClientId = useMemo(() => {
-        const gw = props.paymentGateways.find(g => DonationHelper.isProvider(g.provider, "paypal"));
-        return gw?.publicKey || "";
-    }, [props.paymentGateways]);
-    const hostedRef = useRef(null);
+    const entryRef = useRef(null);
     const feeTimeoutRef = useRef(null);
     const [donation, setDonation] = useState({
         id: props?.paymentMethods?.length > 0 ? props.paymentMethods[0].id : "",
@@ -110,35 +109,17 @@ export const MultiGatewayDonationForm = (props) => {
         const d = { ...donation };
         const value = e.target.value;
         switch (e.target.name) {
-            case "gateway":
-                setSelectedGateway(value);
-                d.provider = value;
-                const matchedGateway = props.paymentGateways.find(g => DonationHelper.normalizeProvider(g.provider) === value);
-                d.gatewayId = matchedGateway?.id;
-                d.currency = matchedGateway?.currency || "usd";
-                // Reset payment method when changing gateways
-                const availableMethods = props.paymentMethods.filter(pm => DonationHelper.normalizeProvider(pm.provider) === value);
-                if (availableMethods.length > 0) {
-                    d.id = availableMethods[0].id;
-                    d.type = availableMethods[0].type;
-                    setPaymentMethodName(`${availableMethods[0].name} ${availableMethods[0].last4 ? `****${availableMethods[0].last4}` : availableMethods[0].email || ''}`);
-                }
-                else {
-                    d.id = "";
-                    if (value === "paypal")
-                        d.type = "paypal";
-                }
-                break;
-            case "method":
+            case "method": {
                 d.id = value;
                 const pm = props.paymentMethods.find(pm => pm.id === value);
                 if (pm) {
                     d.type = pm.type;
                     d.provider = DonationHelper.normalizeProvider(pm.provider);
                     d.gatewayId = pm.gatewayId || gateway?.id || selectedGatewayObj?.id;
-                    setPaymentMethodName(`${pm.name} ${pm.last4 ? `****${pm.last4}` : pm.email || ''}`);
+                    setPaymentMethodName(`${pm.name} ${pm.last4 ? `****${pm.last4}` : pm.email || ""}`);
                 }
                 break;
+            }
             case "type":
                 setDonationType(value);
                 break;
@@ -152,15 +133,16 @@ export const MultiGatewayDonationForm = (props) => {
             case "notes":
                 d.notes = value;
                 break;
-            case "transaction-fee":
+            case "transaction-fee": {
                 const element = e.target;
                 d.amount = element.checked ? fundsTotal + transactionFee : fundsTotal;
                 const showFee = element.checked ? transactionFee : 0;
                 setTotal(d.amount);
                 setPayFee(showFee);
+            }
         }
         setDonation(d);
-    }, [donation, props.paymentMethods, fundsTotal, transactionFee, gateway?.id, props.paymentGateways, selectedGatewayObj?.id]);
+    }, [donation, props.paymentMethods, fundsTotal, transactionFee, gateway?.id, selectedGatewayObj?.id]);
     const handleCancel = useCallback(() => { setDonationType(undefined); }, []);
     const handleDonationSelect = useCallback((type) => {
         const dt = donationType === type ? undefined : type;
@@ -168,67 +150,79 @@ export const MultiGatewayDonationForm = (props) => {
     }, [donationType]);
     const handleSingleDonationClick = useCallback(() => handleDonationSelect("once"), [handleDonationSelect]);
     const handleRecurringDonationClick = useCallback(() => handleDonationSelect("recurring"), [handleDonationSelect]);
-    const makeDonation = useCallback(async (message) => {
-        let results;
-        const churchObj = {
+    // Snapshot of the gift in flight, in the shape every provider adapter expects.
+    const buildContext = useCallback(() => ({
+        provider: selectedGateway,
+        gatewayId: donation.gatewayId || gateway?.id || selectedGatewayObj?.id,
+        churchId: props?.church?.id || "",
+        amount: total,
+        funds: (donation.funds || []).map((f) => ({ id: f.id, amount: f.amount })),
+        person: {
+            id: donation.person?.id || "",
+            email: donation.person?.email || "",
+            name: donation.person?.name || ""
+        },
+        notes: donation?.notes || "",
+        church: {
             name: props?.church?.name || "",
             subDomain: props?.church?.subDomain || "",
             churchURL: typeof window !== "undefined" ? window.location.origin : "",
             logo: props?.churchLogo || ""
-        };
-        // If using PayPal without a saved method, try Hosted Fields
-        if (selectedGateway === "paypal" && (!donation.id || donation.id === "") && paypalClientId) {
+        },
+        recurring: donationType === "recurring",
+        interval: donation.interval,
+        billingCycleAnchor: donation.billing_cycle_anchor,
+        saveCard,
+        customerId: props.customerId,
+        currency: donation.currency
+    }), [
+        donation, total, donationType, saveCard, selectedGateway, gateway?.id, selectedGatewayObj?.id, props.church?.id, props.church?.name, props.church?.subDomain, props.churchLogo, props.customerId
+    ]);
+    const makeDonation = useCallback(async (message) => {
+        const ctx = buildContext();
+        // Capture a new payment if the provider needs one (no saved-card support, or
+        // the user is entering a fresh card); otherwise charge the chosen saved method.
+        const needsToken = !!paymentProvider.MemberEntry
+            && (!paymentProvider.capabilities.savedCard || useNewCard || !donation.id || donation.id === "");
+        let token;
+        if (needsToken) {
             try {
-                const payload = await hostedRef.current?.submit();
-                const orderId = payload?.orderId || payload?.id || "";
-                if (orderId) {
-                    // Capture and persist via unified /donate/charge endpoint for PayPal
-                    const compactFunds = (donation.funds || []).map((f) => ({ id: f.id, amount: f.amount }));
-                    results = await ApiHelper.post("/donate/charge", {
-                        provider: "paypal",
-                        gatewayId: selectedGatewayObj?.id,
-                        id: orderId,
-                        churchId: props?.church?.id || "",
-                        amount: total,
-                        funds: compactFunds,
-                        person: donation.person,
-                        notes: donation?.notes || ""
-                    }, "GivingApi");
-                }
+                token = await entryRef.current.tokenize();
             }
             catch (e) {
-                console.warn("Hosted Fields submit failed, falling back to standard flow.", e);
+                setShowDonationPreviewModal(false);
+                setErrorMessage("Failed to process payment: " + (e.message || "Unknown error"));
+                return;
             }
         }
-        // Standard flow (Stripe or saved payment method)
-        if (!results) {
-            const payload = {
-                ...donation,
-                provider: donation.provider || selectedGateway,
-                gatewayId: donation.gatewayId || gateway?.id || selectedGatewayObj?.id,
-                church: churchObj
-            };
-            if (donationType === "once")
-                results = await ApiHelper.post("/donate/charge", payload, "GivingApi");
-            if (donationType === "recurring")
-                results = await ApiHelper.post("/donate/subscribe", payload, "GivingApi");
+        else {
+            token = { id: donation.id, type: donation.type, saved: true };
+        }
+        const { endpoint, body } = paymentProvider.buildChargeRequest(ctx, token);
+        let results = await ApiHelper.post(endpoint, body, "GivingApi");
+        // Terminal: a freshly-tokenized payment must never silently retry on a falsy
+        // response, or we'd double-charge.
+        if (needsToken && !results) {
+            setShowDonationPreviewModal(false);
+            setErrorMessage(Locale.label("donation.kingdomFunding.unexpectedError"));
+            return;
         }
-        // Handle 3D Secure authentication if required (Stripe only)
-        if (selectedGateway === "stripe") {
-            const threeDSResult = await DonationHelper.handle3DSIfRequired(results, stripe);
-            if (threeDSResult.requiresAction) {
+        if (paymentProvider.finalizeResult) {
+            const fin = await paymentProvider.finalizeResult(results, { stripe });
+            if (fin.requiresAction) {
                 setShowDonationPreviewModal(false);
-                if (threeDSResult.success) {
+                if (fin.success) {
                     setDonationType(undefined);
                     props.donationSuccess(message);
                 }
                 else {
-                    setErrorMessage(Locale.label("donation.common.error") + ": " + threeDSResult.error);
+                    setErrorMessage(Locale.label("donation.common.error") + ": " + fin.error);
                 }
                 return;
             }
+            results = fin.result;
         }
-        if (results?.status === "succeeded" || results?.status === "pending" || results?.status === "active" || results?.status === "processing" || results?.status === "CREATED") {
+        if (results?.status === "succeeded" || results?.status === "pending" || results?.status === "active" || results?.status === "processing" || results?.status === "CREATED" || results?.status === "Approved") {
             setShowDonationPreviewModal(false);
             setDonationType(undefined);
             props.donationSuccess(message);
@@ -237,7 +231,7 @@ export const MultiGatewayDonationForm = (props) => {
             setShowDonationPreviewModal(false);
             setErrorMessage(Locale.label("donation.common.error") + ": " + (results?.raw?.message || results?.message));
         }
-    }, [donation, donationType, gateway?.id, paypalClientId, props.church?.name, props.church?.subDomain, props.churchLogo, props.donationSuccess, selectedGateway, selectedGatewayObj?.id, total, stripe]);
+    }, [buildContext, paymentProvider, donation.id, donation.type, useNewCard, stripe, props.donationSuccess]);
     const getTransactionFee = useCallback(async (amount, activeGatewayId, provider = "stripe", paymentMethodType) => {
         if (amount > 0) {
             try {
@@ -322,7 +316,10 @@ export const MultiGatewayDonationForm = (props) => {
         };
     }, []);
     const availablePaymentMethods = props.paymentMethods.filter(pm => DonationHelper.normalizeProvider(pm.provider) === selectedGateway);
-    const availableGateways = props.paymentGateways.filter(g => g.enabled !== false);
+    // Show the provider's inline entry widget when there's no saved method to use:
+    // PayPal (no vault) always; Kingdom Funding when adding a new card or none saved.
+    const showInlineEntry = !!paymentProvider.MemberEntry
+        && (!paymentProvider.capabilities.savedCard || useNewCard || availablePaymentMethods.length === 0);
     if (!fundsLoaded) {
         return _jsx(Alert, { severity: "info", children: "Loading donation settings\u2026" });
     }
@@ -330,6 +327,7 @@ export const MultiGatewayDonationForm = (props) => {
         return (_jsx(Alert, { severity: "warning", children: "No donation funds have been configured for this church. Please contact your administrator." }));
     }
     else {
+        const MemberEntry = paymentProvider.MemberEntry;
         return (_jsxs(_Fragment, { children: [_jsx(DonationPreviewModal, { show: showDonationPreviewModal, onHide: () => setShowDonationPreviewModal(false), handleDonate: makeDonation, donation: {
                         ...donation,
                         person: {
@@ -337,39 +335,37 @@ export const MultiGatewayDonationForm = (props) => {
                             email: donation.person?.email || "",
                             name: donation.person?.name || ""
                         }
-                    }, donationType: donationType || "", payFee: payFee, paymentMethodName: paymentMethodName, funds: funds }), _jsxs(InputBox, { id: "donation-form", "aria-label": "donation-box", headerIcon: "volunteer_activism", headerText: Locale.label("donation.donationForm.donate"), ariaLabelSave: "save-button", cancelFunction: donationType ? handleCancel : undefined, saveFunction: donationType ? handleSave : undefined, saveText: Locale.label("donation.donationForm.preview"), children: [_jsxs(Grid, { id: "donation-type-selector", container: true, spacing: 3, children: [_jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsx(Button, { id: "single-donation-button", "aria-label": "single-donation", size: "small", fullWidth: true, style: { minHeight: "50px" }, variant: donationType === "once" ? "contained" : "outlined", onClick: handleSingleDonationClick, children: Locale.label("donation.donationForm.make") }) }), _jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsx(Button, { id: "recurring-donation-button", "aria-label": "recurring-donation", size: "small", fullWidth: true, style: { minHeight: "50px" }, variant: donationType === "recurring" ? "contained" : "outlined", onClick: handleRecurringDonationClick, children: Locale.label("donation.donationForm.makeRecurring") }) })] }), donationType && (_jsxs("div", { id: "donation-details", style: { marginTop: "20px" }, children: [_jsxs(Grid, { container: true, spacing: 3, children: [availableGateways.length > 1 && (_jsx(Grid, { size: { xs: 12 }, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: "Payment Provider" }), _jsx(Select, { id: "gateway-select", label: "Payment Provider", name: "gateway", "aria-label": "gateway", value: selectedGateway, onChange: handleChange, children: availableGateways.map((gw) => (_jsx(MenuItem, { value: DonationHelper.normalizeProvider(gw.provider), children: DonationHelper.isProvider(gw.provider, "stripe") ? "Stripe" : "PayPal" }, gw.provider))) })] }) })), selectedGateway !== "paypal" || availablePaymentMethods.length > 0 ? (_jsx(Grid, { size: { xs: 12 }, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: Locale.label("donation.donationForm.method") }), _jsx(Select, { id: "payment-method-select", label: Locale.label("donation.donationForm.method"), name: "method", "aria-label": "method", value: donation.id, className: "capitalize", onChange: handleChange, children: availablePaymentMethods.map((paymentMethod) => (_jsxs(MenuItem, { value: paymentMethod.id, children: [paymentMethod.name, " ", paymentMethod.last4 ? `****${paymentMethod.last4}` : paymentMethod.email || ''] }, paymentMethod.id))) })] }) })) : (_jsxs(Grid, { size: { xs: 12 }, children: [_jsx(Typography, { variant: "subtitle1", sx: { mb: 1 }, children: "Enter card details (PayPal Hosted Fields)" }), _jsx(PayPalHostedFields, { ref: hostedRef, clientId: paypalClientId, getClientToken: async () => {
-                                                        try {
-                                                            const resp = await ApiHelper.post("/donate/client-token", {
-                                                                churchId: props?.church?.id || "",
-                                                                provider: "paypal",
-                                                                gatewayId: selectedGatewayObj?.id || gateway?.id
-                                                            }, "GivingApi");
-                                                            const token = resp?.clientToken || resp?.token || resp?.result || resp;
-                                                            return typeof token === "string" && token.length > 0 ? token : "";
-                                                        }
-                                                        catch {
-                                                            return "";
+                    }, donationType: donationType || "", payFee: payFee, paymentMethodName: paymentMethodName, funds: funds }), _jsxs(InputBox, { id: "donation-form", "aria-label": "donation-box", headerIcon: "volunteer_activism", headerText: Locale.label("donation.donationForm.donate"), ariaLabelSave: "save-button", cancelFunction: donationType ? handleCancel : undefined, saveFunction: donationType ? handleSave : undefined, saveText: Locale.label("donation.donationForm.preview"), children: [_jsxs(Grid, { id: "donation-type-selector", container: true, spacing: 3, children: [_jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsx(Button, { id: "single-donation-button", "aria-label": "single-donation", size: "small", fullWidth: true, style: { minHeight: "50px" }, variant: donationType === "once" ? "contained" : "outlined", onClick: handleSingleDonationClick, children: Locale.label("donation.donationForm.make") }) }), _jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsx(Button, { id: "recurring-donation-button", "aria-label": "recurring-donation", size: "small", fullWidth: true, style: { minHeight: "50px" }, variant: donationType === "recurring" ? "contained" : "outlined", onClick: handleRecurringDonationClick, children: Locale.label("donation.donationForm.makeRecurring") }) })] }), donationType && (_jsxs("div", { id: "donation-details", style: { marginTop: "20px" }, children: [_jsx(Grid, { container: true, spacing: 3, children: !showInlineEntry ? (_jsx(Grid, { size: { xs: 12 }, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: Locale.label("donation.donationForm.method") }), _jsxs(Select, { id: "payment-method-select", label: Locale.label("donation.donationForm.method"), name: "method", "aria-label": "method", value: donation.id, className: "capitalize", onChange: (e) => {
+                                                        if (e.target.value === "__new__") {
+                                                            setUseNewCard(true);
+                                                            setPaymentMethodName("New card");
+                                                            const d = { ...donation };
+                                                            d.id = "";
+                                                            setDonation(d);
                                                         }
-                                                    }, createOrder: async () => {
-                                                        try {
-                                                            const fundsPayload = (donation?.funds || [])
-                                                                .filter((f) => (f.amount || 0) > 0 && f.id)
-                                                                .map((f) => ({ id: f.id, amount: f.amount || 0 }));
-                                                            const response = await ApiHelper.post("/donate/create-order", {
-                                                                churchId: props?.church?.id || "",
-                                                                provider: "paypal",
-                                                                gatewayId: selectedGatewayObj?.id || gateway?.id,
-                                                                amount: total,
-                                                                currency: (selectedGatewayObj?.currency || gateway?.currency || "USD").toUpperCase(),
-                                                                funds: fundsPayload,
-                                                                notes: donation?.notes || ""
-                                                            }, "GivingApi");
-                                                            return response?.id || response?.orderId || "";
+                                                        else {
+                                                            // Switching back to a saved card after picking "Enter new card"
+                                                            // must clear useNewCard, otherwise the submit handler still
+                                                            // tries to tokenize a card the iframe never collected.
+                                                            setUseNewCard(false);
+                                                            handleChange(e);
                                                         }
-                                                        catch (_e) {
-                                                            return "";
-                                                        }
-                                                    } })] }))] }), donationType === "recurring" && (_jsxs(Grid, { container: true, spacing: 3, style: { marginTop: 10 }, children: [_jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsx(TextField, { id: "start-date-field", fullWidth: true, name: "date", type: "date", "aria-label": "date", label: Locale.label("donation.donationForm.startDate"), value: DateHelper.formatHtml5Date(new Date(donation.billing_cycle_anchor || Date.now())), onChange: handleChange, onKeyDown: handleKeyDown }) }), _jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: Locale.label("donation.donationForm.frequency") }), _jsxs(Select, { id: "frequency-select", label: Locale.label("donation.donationForm.frequency"), name: "interval", "aria-label": "interval", value: interval, onChange: handleChange, children: [_jsx(MenuItem, { value: "one_week", children: Locale.label("donation.donationForm.weekly") }), _jsx(MenuItem, { value: "two_week", children: Locale.label("donation.donationForm.biWeekly") }), _jsx(MenuItem, { value: "one_month", children: Locale.label("donation.donationForm.monthly") }), _jsx(MenuItem, { value: "three_month", children: Locale.label("donation.donationForm.quarterly") }), _jsx(MenuItem, { value: "one_year", children: Locale.label("donation.donationForm.annually") })] })] }) })] })), _jsxs("div", { id: "fund-selection", className: "form-group", children: [funds && fundDonations && (_jsxs(_Fragment, { children: [_jsx("h4", { children: Locale.label("donation.donationForm.fund") }), _jsx(FundDonations, { fundDonations: fundDonations, funds: funds, updatedFunction: handleFundDonationsChange, currency: gateway?.currency })] })), fundsTotal > 0 && (_jsxs(_Fragment, { children: [(gateway?.payFees === true) ? (_jsxs(Typography, { fontSize: 14, fontStyle: "italic", children: ["*", Locale.label("donation.donationForm.fees").replace("{}", CurrencyHelper.formatCurrencyWithLocale(transactionFee, gateway?.currency || "USD"))] })) : (_jsx(FormGroup, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, {}), name: "transaction-fee", label: Locale.label("donation.donationForm.cover").replace("{}", CurrencyHelper.formatCurrencyWithLocale(transactionFee, gateway?.currency || "USD")), onChange: handleCheckChange }) })), _jsxs("p", { children: [Locale.label("donation.donationForm.total"), ": ", CurrencyHelper.formatCurrencyWithLocale(total, gateway?.currency || "USD")] })] })), _jsx(TextField, { id: "donation-notes", fullWidth: true, label: "Memo (optional)", multiline: true, "aria-label": "note", name: "notes", value: donation.notes || "", onChange: handleChange, onKeyDown: handleKeyDown })] }), errorMessage && _jsx(ErrorMessages, { errors: [errorMessage] })] }))] })] }));
+                                                    }, children: [availablePaymentMethods.map((paymentMethod) => (_jsxs(MenuItem, { value: paymentMethod.id, children: [paymentMethod.name, " ", paymentMethod.last4 ? `****${paymentMethod.last4}` : paymentMethod.email || ""] }, paymentMethod.id))), paymentProvider.capabilities.memberNewCard && (_jsxs(MenuItem, { value: "__new__", children: [_jsx(Icon, { sx: { mr: 1, fontSize: 18 }, children: "add_circle" }), " Enter new card"] }))] })] }) })) : (_jsx(Grid, { size: { xs: 12 }, children: selectedGatewayObj?.publicKey && MemberEntry ? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "subtitle1", sx: { mb: 1 }, children: Locale.label("donation.kingdomFunding.enterCardDetails") }), _jsx(MemberEntry, { ref: entryRef, gateway: selectedGatewayObj, getContext: buildContext }), paymentProvider.capabilities.savedCard && props.person?.id && (_jsx(FormGroup, { sx: { mt: 1 }, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: saveCard, onChange: (e) => setSaveCard(e.target.checked) }), label: "Save this card for future donations" }) })), paymentProvider.capabilities.savedCard && availablePaymentMethods.length > 0 && (_jsx(Button, { size: "small", sx: { mt: 1 }, onClick: () => {
+                                                        setUseNewCard(false);
+                                                        const d = { ...donation };
+                                                        d.id = availablePaymentMethods[0].id;
+                                                        d.type = availablePaymentMethods[0].type;
+                                                        setDonation(d);
+                                                        setPaymentMethodName(`${availablePaymentMethods[0].name} ${availablePaymentMethods[0].last4 ? `****${availablePaymentMethods[0].last4}` : ""}`);
+                                                    }, children: "Use a saved payment method instead" }))] })) : (_jsx(Alert, { severity: "warning", children: Locale.label("donation.kingdomFunding.gatewayConfigMissing") })) })) }), donationType === "recurring" && (_jsxs(Grid, { container: true, spacing: 3, style: { marginTop: 10 }, children: [_jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsx(TextField, { id: "start-date-field", fullWidth: true, name: "date", type: "date", "aria-label": "date", label: Locale.label("donation.donationForm.startDate"), value: DateHelper.formatHtml5Date(new Date(donation.billing_cycle_anchor || Date.now())), onChange: handleChange, onKeyDown: handleKeyDown }) }), _jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: Locale.label("donation.donationForm.frequency") }), _jsxs(Select, { id: "frequency-select", label: Locale.label("donation.donationForm.frequency"), name: "interval", "aria-label": "interval", value: interval, onChange: handleChange, children: [_jsx(MenuItem, { value: "one_week", children: Locale.label("donation.donationForm.weekly") }), _jsx(MenuItem, { value: "two_week", children: Locale.label("donation.donationForm.biWeekly") }), _jsx(MenuItem, { value: "one_month", children: Locale.label("donation.donationForm.monthly") }), _jsx(MenuItem, { value: "three_month", children: Locale.label("donation.donationForm.quarterly") }), _jsx(MenuItem, { value: "one_year", children: Locale.label("donation.donationForm.annually") })] })] }) })] })), _jsxs("div", { id: "fund-selection", className: "form-group", children: [funds && fundDonations && (_jsxs(_Fragment, { children: [_jsx("h4", { children: Locale.label("donation.donationForm.fund") }), _jsx(FundDonations, { fundDonations: fundDonations, funds: funds, updatedFunction: handleFundDonationsChange, currency: gateway?.currency })] })), fundsTotal > 0 && (_jsxs(_Fragment, { children: [(gateway?.payFees === true) ? (_jsxs(Typography, { fontSize: 14, fontStyle: "italic", children: ["*", Locale.label("donation.donationForm.fees").replace("{}", CurrencyHelper.formatCurrencyWithLocale(transactionFee, gateway?.currency || "USD"))] })) : (_jsx(FormGroup, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, {}), name: "transaction-fee", label: Locale.label("donation.donationForm.cover").replace("{}", CurrencyHelper.formatCurrencyWithLocale(transactionFee, gateway?.currency || "USD")), onChange: handleCheckChange }) })), _jsxs("p", { children: [Locale.label("donation.donationForm.total"), ": ", CurrencyHelper.formatCurrencyWithLocale(total, gateway?.currency || "USD")] })] })), _jsx(TextField, { id: "donation-notes", fullWidth: true, label: Locale.label("donation.kingdomFunding.memo"), multiline: true, "aria-label": "note", name: "notes", value: donation.notes || "", onChange: handleChange, onKeyDown: handleKeyDown })] }), errorMessage && _jsx(ErrorMessages, { errors: [errorMessage] })] }))] })] }));
     }
 };
+// Public member donation form. Applies the resolved provider's SDK wrapper
+// (Stripe -> <Elements>, so 3DS works) around the provider-agnostic inner form.
+export const MultiGatewayDonationForm = (props) => {
+    const provider = getPaymentProvider(props?.paymentGateways?.find(g => g.enabled !== false)?.provider || "stripe");
+    const Wrapper = provider.MemberWrapper;
+    const inner = _jsx(MultiGatewayDonationInner, { ...props });
+    return Wrapper ? _jsx(Wrapper, { stripePromise: props.stripePromise, children: inner }) : inner;
+};
 //# sourceMappingURL=MultiGatewayDonationForm.js.map