diff --git a/packages/donations/src/components/MultiGatewayDonationForm.tsx b/packages/donations/src/components/MultiGatewayDonationForm.tsx index dbb84f0..e4ae654 100644 --- a/packages/donations/src/components/MultiGatewayDonationForm.tsx +++ b/packages/donations/src/components/MultiGatewayDonationForm.tsx @@ -88,7 +88,8 @@ export const MultiGatewayDonationForm: React.FC = (props) => { interval: "month" }, funds: [], - gatewayId: props?.paymentMethods?.length > 0 ? props.paymentMethods[0].gatewayId : selectedGatewayObj?.id + gatewayId: props?.paymentMethods?.length > 0 ? props.paymentMethods[0].gatewayId : selectedGatewayObj?.id, + currency: selectedGatewayObj?.currency || "usd" }); const loadFunds = useCallback(async () => { @@ -144,6 +145,7 @@ export const MultiGatewayDonationForm: React.FC = (props) => { d.provider = value as "stripe" | "paypal"; 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) { @@ -272,7 +274,7 @@ export const MultiGatewayDonationForm: React.FC = (props) => { try { const response = await ApiHelper.post( "/donate/fee?churchId=" + (props?.church?.id || ""), - { amount, provider, gatewayId: activeGatewayId }, + { amount, provider, gatewayId: activeGatewayId, currency: gateway?.currency || "USD" }, "GivingApi" ); return response.calculatedFee; @@ -346,9 +348,9 @@ export const MultiGatewayDonationForm: React.FC = (props) => { const nextProvider = prev.provider || (selectedGateway as "stripe" | "paypal"); const nextGatewayId = selectedGatewayObj?.id || prev.gatewayId; if (nextProvider === prev.provider && nextGatewayId === prev.gatewayId) return prev; - return { ...prev, provider: nextProvider, gatewayId: nextGatewayId }; + return { ...prev, provider: nextProvider, gatewayId: nextGatewayId, currency: selectedGatewayObj?.currency || "usd" }; }); - }, [selectedGateway, selectedGatewayObj?.id]); + }, [selectedGateway, selectedGatewayObj?.id, selectedGatewayObj?.currency]); // Cleanup timeout on unmount useEffect(() => { @@ -566,26 +568,26 @@ export const MultiGatewayDonationForm: React.FC = (props) => { {funds && fundDonations && ( <>

{Locale.label("donation.donationForm.fund")}

- + )} {fundsTotal > 0 && ( <> {(gateway?.payFees === true) ? ( - *{Locale.label("donation.donationForm.fees").replace("{}", CurrencyHelper.formatCurrency(transactionFee))} + *{Locale.label("donation.donationForm.fees").replace("{}", CurrencyHelper.formatCurrencyWithLocale(transactionFee, gateway?.currency || "USD"))} ) : ( } name="transaction-fee" - label={Locale.label("donation.donationForm.cover").replace("{}", CurrencyHelper.formatCurrency(transactionFee))} + label={Locale.label("donation.donationForm.cover").replace("{}", CurrencyHelper.formatCurrencyWithLocale(transactionFee, gateway?.currency || "USD"))} onChange={handleCheckChange} /> )} -

{Locale.label("donation.donationForm.total")}: ${total}

+

{Locale.label("donation.donationForm.total")}: {CurrencyHelper.formatCurrencyWithLocale(total, gateway?.currency || "USD")}

)} = ({ mainContainerCssProps, showHe 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 ( @@ -98,7 +100,7 @@ export const NonAuthDonation: React.FC = ({ mainContainerCssProps, showHe size="small" > Credit/Debit Card - Bank Account (ACH) + {currency === "usd" && Bank Account (ACH)} ); diff --git a/packages/donations/src/helpers/DonationInterface.ts b/packages/donations/src/helpers/DonationInterface.ts index 6a09cc8..073b7f9 100644 --- a/packages/donations/src/helpers/DonationInterface.ts +++ b/packages/donations/src/helpers/DonationInterface.ts @@ -19,4 +19,5 @@ export interface MultiGatewayDonationInterface { }; funds?: FundDonationInterface[]; notes?: string; + currency?: string; } diff --git a/packages/donations/src/modals/DonationPreviewModal.tsx b/packages/donations/src/modals/DonationPreviewModal.tsx index 4d7d836..6c9b186 100644 --- a/packages/donations/src/modals/DonationPreviewModal.tsx +++ b/packages/donations/src/modals/DonationPreviewModal.tsx @@ -61,9 +61,9 @@ export const DonationPreviewModal: React.FC = (props) => { {Locale.label("donation.preview.every")}:{formatInterval()} } - {Locale.label("donation.preview.funds")}:{props.donation.funds?.map((fund: any) =>

{CurrencyHelper.formatCurrency(fund.amount)} - {fund.name}

)}
- {props.payFee > 0 && {Locale.label("donation.preview.fee")}:{CurrencyHelper.formatCurrency(props.payFee)}} - {Locale.label("donation.preview.total")}:

{CurrencyHelper.formatCurrency(props.donation.amount || 0)}

+ {Locale.label("donation.preview.funds")}:{props.donation.funds?.map((fund: any) =>

{CurrencyHelper.formatCurrencyWithLocale(fund.amount, props.donation?.currency || "usd")} - {fund.name}

)}
+ {props.payFee > 0 && {Locale.label("donation.preview.fee")}:{CurrencyHelper.formatCurrencyWithLocale(props.payFee, props.donation?.currency || "usd")}} + {Locale.label("donation.preview.total")}:

{CurrencyHelper.formatCurrencyWithLocale(props.donation.amount || 0, props.donation?.currency || "usd")}

diff --git a/playground/src/pages/DonationPage.tsx b/playground/src/pages/DonationPage.tsx index b0063ae..134af06 100644 --- a/playground/src/pages/DonationPage.tsx +++ b/playground/src/pages/DonationPage.tsx @@ -44,6 +44,7 @@ export default function DonationPage() { provider: g.provider, publicKey: g.publicKey, enabled: g.enabled !== false, + currency: g?.currency || "usd", })); setPaymentGateways(pg);