@funnelsgrove/payments 0.15.7 → 0.15.10

package/dist/providers/stripe/components/SharedStripeCheckoutV2Dialog.js

@@ -10,17 +10,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import { CheckoutProvider, PaymentElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
-import { PaymentBrandMark, SecurityLockIcon } from './CheckoutBrandAssets.js';
-import { StripeCheckoutExpressCheckoutButton } from './StripeCheckoutExpressCheckoutButton.js';
-import { getUnsupportedCheckoutCountryMessage, normalizeSupportedCheckoutCountries, } from './checkoutCountries.js';
-import { isInactiveCheckoutSessionError } from '../hooks/useStripeSubscriptionCheckoutSession.js';
-import { getStripeWalletPaymentMethodOrder, usePlatformWalletPaymentMethods, } from './walletPlatform.js';
-import { queueStripeSubscriptionCheckoutStarted, trackPaidStripeSubscriptionCheckoutCompleted, trackStripeSubscriptionPaymentInfoSubmitted, } from '../services/checkoutCompletionAnalytics.service.js';
-import { trackCheckoutCanceled, trackCheckoutFailureShown, } from '../../../services/checkoutObservability.service.js';
-const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'Maestro', 'Discover'];
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo } from 'react';
+import { CheckoutProvider } from '@stripe/react-stripe-js/checkout';
+import { normalizeSupportedCheckoutCountries } from './checkoutCountries.js';
+import { queueStripeSubscriptionCheckoutStarted } from '../services/checkoutCompletionAnalytics.service.js';
+import { trackCheckoutCanceled } from '../../../services/checkoutObservability.service.js';
+import { SharedStripeCheckoutV2CheckoutSessionForm, getFixedSupportedBillingCountry } from './SharedStripeCheckoutV2Form.internal.js';
+import { sharedStripeCheckoutV2Styles } from './SharedStripeCheckoutV2.styles.js';
 const stripeCheckoutV2Appearance = {
     labels: 'above',
     inputs: 'spaced',
@@ -42,306 +39,6 @@ const stripeCheckoutV2Appearance = {
     },
 };
 const compactStripeCheckoutV2Appearance = Object.assign(Object.assign({}, stripeCheckoutV2Appearance), { variables: Object.assign(Object.assign({}, stripeCheckoutV2Appearance.variables), { borderRadius: '14px', colorPrimary: '#1687f8' }) });
-const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
-const formatCountdown = (remainingSeconds) => {
-    const normalizedSeconds = Number.isFinite(remainingSeconds)
-        ? Math.max(0, Math.floor(remainingSeconds))
-        : 0;
-    const minutes = Math.floor(normalizedSeconds / 60);
-    const seconds = normalizedSeconds % 60;
-    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-};
-const getFixedSupportedBillingCountry = (supportedCountries) => supportedCountries.length === 1 ? supportedCountries[0] : null;
-const checkoutCountryLabels = {
-    US: 'United States',
-};
-const getCheckoutCountryLabel = (countryCode) => { var _a; return (_a = checkoutCountryLabels[countryCode]) !== null && _a !== void 0 ? _a : countryCode; };
-function getFriendlyCardErrorMessage(error) {
-    return error instanceof Error && error.message
-        ? error.message
-        : 'Payment failed. Please review your card details and try again.';
-}
-function SharedStripeCheckoutV2CheckoutSessionForm({ amountCents, buttonColor, cardSubmitLabel, closeAriaLabel, countdownLabel, checkoutAnalytics, checkoutSessionId, customerEmail, customerEmailEditable = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onInactiveCheckoutSession, onPaymentInfoSubmitted, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, supportedCountries, themeColor, title, totalLabel, totalValue, unsupportedCountryMessage, walletButtonLabel, originalPriceLabel, originalPriceValue, variant = 'standard', }) {
-    const checkoutState = useCheckout();
-    const walletPaymentMethods = usePlatformWalletPaymentMethods();
-    const [selectedMethod, setSelectedMethod] = useState('wallet');
-    const [walletAvailable, setWalletAvailable] = useState(initialWalletAvailable !== null && initialWalletAvailable !== void 0 ? initialWalletAvailable : null);
-    const effectiveWalletAvailable = initialWalletAvailable === true && walletAvailable !== false
-        ? true
-        : walletAvailable;
-    const [submitting, setSubmitting] = useState(false);
-    const submitInFlightRef = useRef(false);
-    const [paymentElementReady, setPaymentElementReady] = useState(false);
-    const [paymentElementComplete, setPaymentElementComplete] = useState(false);
-    const [error, setError] = useState(null);
-    const [billingCountry, setBillingCountry] = useState(null);
-    const initialCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '';
-    const [emailDraft, setEmailDraft] = useState(initialCustomerEmail);
-    const normalizedSupportedCountries = useMemo(() => normalizeSupportedCheckoutCountries(supportedCountries), [supportedCountries]);
-    const fixedBillingCountry = getFixedSupportedBillingCountry(normalizedSupportedCountries);
-    const fixedBillingCountryLabel = fixedBillingCountry
-        ? getCheckoutCountryLabel(fixedBillingCountry)
-        : null;
-    const cardBrandLabels = useMemo(() => paymentMethodLabels.length > 0 ? paymentMethodLabels : defaultPaymentMethodLabels, [paymentMethodLabels]);
-    const normalizedPromoCode = promoCode.trim();
-    const showPromo = promoActive !== null && promoActive !== void 0 ? promoActive : (discountPercent > 0 && normalizedPromoCode.length > 0);
-    const countdownValue = formatCountdown(remainingSeconds);
-    const resolvedCustomerEmail = customerEmailEditable
-        ? emailDraft.trim() || initialCustomerEmail
-        : initialCustomerEmail;
-    const emailFieldClassName = [
-        'shared-checkout-v2-email-field',
-        customerEmailEditable ? '' : 'is-disabled',
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const checkoutStyle = {
-        '--shared-checkout-v2-theme-color': themeColor,
-        '--shared-checkout-v2-button-color': buttonColor,
-    };
-    const expressCheckoutSummaryLabel = (summaryLabel === null || summaryLabel === void 0 ? void 0 : summaryLabel.trim()) || discountLabel || title;
-    const walletAriaLabel = walletPaymentMethods
-        .map((method) => method === 'applePay' ? walletButtonLabel : 'Google Pay')
-        .join(' / ');
-    const showWalletMethod = effectiveWalletAvailable !== false && walletPaymentMethods.length > 0;
-    const effectiveSelectedMethod = showWalletMethod && selectedMethod === 'wallet' ? 'wallet' : 'card';
-    const expressCheckoutOptions = useMemo(() => {
-        return {
-            buttonHeight: 55,
-            buttonTheme: {
-                applePay: 'black',
-                googlePay: 'black',
-            },
-            buttonType: {
-                applePay: 'subscribe',
-                googlePay: 'subscribe',
-            },
-            layout: {
-                maxColumns: 1,
-                maxRows: 2,
-                overflow: 'auto',
-            },
-            paymentMethodOrder: getStripeWalletPaymentMethodOrder(walletPaymentMethods),
-            paymentMethods: {
-                amazonPay: 'never',
-                applePay: walletPaymentMethods.includes('applePay') ? 'always' : 'never',
-                googlePay: walletPaymentMethods.includes('googlePay') ? 'always' : 'never',
-                klarna: 'never',
-                link: 'never',
-                paypal: 'never',
-            },
-        };
-    }, [walletPaymentMethods]);
-    const paymentElementOptions = useMemo(() => {
-        return {
-            fields: {
-                billingDetails: {
-                    name: 'never',
-                    email: 'never',
-                    address: {
-                        country: fixedBillingCountry ? 'never' : 'auto',
-                    },
-                },
-            },
-            layout: 'tabs',
-            wallets: {
-                applePay: 'never',
-                googlePay: 'never',
-                link: 'never',
-            },
-        };
-    }, [fixedBillingCountry]);
-    const handleInactiveCheckoutSession = () => {
-        setError(null);
-        onInactiveCheckoutSession === null || onInactiveCheckoutSession === void 0 ? void 0 : onInactiveCheckoutSession();
-    };
-    const setSharedError = (message, alreadyTracked = false, providerError) => {
-        if (isInactiveCheckoutSessionError(message)) {
-            handleInactiveCheckoutSession();
-            return;
-        }
-        if (message && checkoutAnalytics && !alreadyTracked) {
-            trackCheckoutFailureShown({
-                analytics: checkoutAnalytics,
-                checkoutSessionId,
-                errorMessage: message,
-                failureStage: 'card_form',
-                paymentMethod: 'card',
-                provider: 'stripe',
-                providerDeclineCode: providerError === null || providerError === void 0 ? void 0 : providerError.decline_code,
-                providerErrorCode: providerError === null || providerError === void 0 ? void 0 : providerError.code,
-                providerErrorType: providerError === null || providerError === void 0 ? void 0 : providerError.type,
-            });
-        }
-        setError(message);
-        onError === null || onError === void 0 ? void 0 : onError(message);
-    };
-    const selectWalletMethod = () => {
-        if (showWalletMethod) {
-            setSelectedMethod('wallet');
-        }
-    };
-    const selectCardMethod = () => setSelectedMethod('card');
-    const handleWalletAvailabilityChange = (available) => {
-        setWalletAvailable(available);
-        if (!available && selectedMethod === 'wallet') {
-            setSelectedMethod('card');
-        }
-    };
-    const getBillingCountryError = (country) => getUnsupportedCheckoutCountryMessage({
-        billingCountry: country,
-        message: unsupportedCountryMessage,
-        supportedCountries: normalizedSupportedCountries,
-    });
-    const handlePaymentElementChange = (event) => {
-        var _a, _b;
-        setPaymentElementComplete(event.complete);
-        setBillingCountry((_b = (_a = event.value.billingDetails) === null || _a === void 0 ? void 0 : _a.address.country) !== null && _b !== void 0 ? _b : fixedBillingCountry);
-    };
-    const trackCheckoutSuccess = async () => {
-        if (checkoutAnalytics) {
-            await trackPaidStripeSubscriptionCheckoutCompleted(Object.assign({ checkoutSessionId }, checkoutAnalytics));
-        }
-        await (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess());
-    };
-    const trackPaymentInfoSubmitted = async () => {
-        if (checkoutAnalytics) {
-            await trackStripeSubscriptionPaymentInfoSubmitted(Object.assign({ checkoutSessionId }, checkoutAnalytics)).catch(() => 'analytics_rejected');
-        }
-        await (onPaymentInfoSubmitted === null || onPaymentInfoSubmitted === void 0 ? void 0 : onPaymentInfoSubmitted());
-    };
-    useEffect(() => {
-        if (effectiveSelectedMethod !== 'card' || typeof window === 'undefined') {
-            return;
-        }
-        const resizeTimer = window.setTimeout(() => {
-            window.dispatchEvent(new Event('resize'));
-        }, 0);
-        return () => window.clearTimeout(resizeTimer);
-    }, [effectiveSelectedMethod]);
-    const commitCustomerEmail = async (normalizedEmail) => {
-        if (!customerEmailEditable || !onCustomerEmailCommit) {
-            return normalizedEmail;
-        }
-        const committedEmail = await onCustomerEmailCommit(normalizedEmail);
-        const nextEmail = typeof committedEmail === 'string' && committedEmail.trim()
-            ? committedEmail.trim()
-            : normalizedEmail;
-        setEmailDraft(nextEmail);
-        onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(nextEmail);
-        return nextEmail;
-    };
-    const commitEmailDraftIfValid = (value) => {
-        const normalizedEmail = value.trim();
-        if (!customerEmailEditable || !onCustomerEmailCommit) {
-            return;
-        }
-        if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
-            return;
-        }
-        void commitCustomerEmail(normalizedEmail).catch((commitError) => {
-            setSharedError(getFriendlyCardErrorMessage(commitError));
-        });
-    };
-    const ensureCustomerEmail = async () => {
-        const normalizedEmail = resolvedCustomerEmail.trim();
-        if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
-            setSharedError(customerEmailInvalidMessage);
-            return null;
-        }
-        return commitCustomerEmail(normalizedEmail);
-    };
-    const handleSubmit = async (event) => {
-        event.preventDefault();
-        if (submitInFlightRef.current) {
-            return;
-        }
-        const billingCountryError = getBillingCountryError(billingCountry !== null && billingCountry !== void 0 ? billingCountry : fixedBillingCountry);
-        if (billingCountryError) {
-            setSharedError(billingCountryError);
-            return;
-        }
-        if (checkoutState.type !== 'success') {
-            setSharedError(checkoutState.type === 'error'
-                ? checkoutState.error.message
-                : 'Payment form is not ready yet.');
-            return;
-        }
-        if (!paymentElementReady) {
-            setSharedError('Payment form is not ready yet.', true);
-            return;
-        }
-        submitInFlightRef.current = true;
-        setSubmitting(true);
-        setSharedError(null);
-        const finishSubmitting = () => {
-            submitInFlightRef.current = false;
-            setSubmitting(false);
-        };
-        try {
-            const syncedEmail = await ensureCustomerEmail();
-            if (!syncedEmail) {
-                finishSubmitting();
-                return;
-            }
-            if (paymentElementComplete) {
-                await trackPaymentInfoSubmitted();
-            }
-            const result = await checkoutState.checkout.confirm({
-                redirect: 'if_required',
-            });
-            if (result.type === 'error') {
-                const message = result.error.message || 'Payment failed.';
-                setSharedError(message, false, result.error);
-                finishSubmitting();
-                return;
-            }
-            if (typeof window !== 'undefined') {
-                await trackCheckoutSuccess();
-                window.location.assign(returnUrl);
-                return;
-            }
-            finishSubmitting();
-        }
-        catch (submitError) {
-            setSharedError(getFriendlyCardErrorMessage(submitError));
-            finishSubmitting();
-        }
-    };
-    const visibleError = error;
-    return (_jsxs("div", { className: 'shared-checkout-v2-shell', "data-variant": variant, style: checkoutStyle, children: [_jsxs("header", { className: 'shared-checkout-v2-header', children: [_jsx("button", { type: 'button', className: 'shared-checkout-v2-close', onClick: onClose, "aria-label": closeAriaLabel, children: _jsx("span", { "aria-hidden": 'true' }) }), _jsx("h2", { id: 'shared-checkout-v2-title', children: title })] }), _jsxs("section", { className: 'shared-checkout-v2-summary', children: [showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-countdown', children: [discountPercent, "% ", countdownLabel, " ", countdownValue, " min"] })) : null, variant === 'standard' ? (_jsxs("p", { className: 'shared-checkout-v2-satisfaction', children: [_jsx("strong", { children: satisfactionPercent }), " ", satisfactionLabel] })) : null, showPromo ? (_jsxs("div", { className: 'shared-checkout-v2-price-stack', children: [_jsxs("div", { className: 'shared-checkout-v2-price-row is-muted', children: [_jsx("span", { children: originalPriceLabel }), _jsx("span", { className: 'shared-checkout-v2-strike', children: originalPriceValue })] }), _jsxs("div", { className: 'shared-checkout-v2-price-row is-discount', children: [_jsx("strong", { children: discountLabel }), _jsx("strong", { children: discountAmountLabel })] }), _jsxs("div", { className: 'shared-checkout-v2-promo', children: [_jsx("span", { children: promoCodeLabel }), _jsx("strong", { children: normalizedPromoCode })] })] })) : null, _jsxs("div", { className: [
-                            'shared-checkout-v2-total',
-                            showPromo ? '' : 'is-plain',
-                        ]
-                            .filter(Boolean)
-                            .join(' '), children: [_jsx("span", { children: totalLabel }), _jsxs("strong", { children: [_jsx("svg", { viewBox: '0 0 24 24', "aria-hidden": 'true', children: _jsx("path", { d: 'M20.6 13.4 12.4 21.6a2.2 2.2 0 0 1-3.1 0L2.4 14.7a2.2 2.2 0 0 1-.6-1.6V5.4a2 2 0 0 1 2-2h7.7a2.2 2.2 0 0 1 1.6.6l7.5 7.5a1.4 1.4 0 0 1 0 1.9ZM7.2 8.1a1.2 1.2 0 1 0 0-2.4 1.2 1.2 0 0 0 0 2.4Z' }) }), totalValue] })] }), showPromo ? (_jsxs("p", { className: 'shared-checkout-v2-saved', children: [_jsx("span", { "aria-hidden": 'true', children: "\uD83D\uDD25" }), savedLabel] })) : null] }), _jsxs("form", { className: 'shared-checkout-v2-payment', onSubmit: (event) => void handleSubmit(event), children: [showWalletMethod ? (_jsxs("div", { className: 'shared-checkout-v2-methods', role: 'tablist', "aria-label": 'Payment method', children: [_jsxs("button", { type: 'button', className: [
-                                    'shared-checkout-v2-method',
-                                    effectiveSelectedMethod === 'wallet' ? 'is-selected' : '',
-                                ]
-                                    .filter(Boolean)
-                                    .join(' '), onClick: selectWalletMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'wallet', children: [_jsxs("span", { className: 'shared-checkout-v2-tab-wallets', "aria-hidden": 'true', children: [walletPaymentMethods.includes('applePay') ? (_jsx(PaymentBrandMark, { label: 'Apple Pay', className: 'shared-checkout-v2-tab-wallet' })) : null, walletPaymentMethods.includes('googlePay') ? (_jsx(PaymentBrandMark, { label: 'Google Pay', className: 'shared-checkout-v2-tab-wallet' })) : null] }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] }), _jsxs("button", { type: 'button', className: [
-                                    'shared-checkout-v2-method',
-                                    effectiveSelectedMethod === 'card' ? 'is-selected' : '',
-                                ]
-                                    .filter(Boolean)
-                                    .join(' '), onClick: selectCardMethod, role: 'tab', "aria-selected": effectiveSelectedMethod === 'card', children: [_jsx("strong", { children: "Credit card" }), _jsx("span", { className: 'shared-checkout-v2-tab-brands', "aria-hidden": 'true', children: cardBrandLabels.slice(0, 4).map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-tab-brand' }, label))) })] })] })) : null, _jsxs("div", { hidden: effectiveSelectedMethod !== 'wallet', className: [
-                            'shared-checkout-v2-wallet-panel',
-                            effectiveSelectedMethod === 'wallet' ? 'is-visible' : '',
-                        ]
-                            .filter(Boolean)
-                            .join(' '), children: [_jsxs("p", { className: 'shared-checkout-v2-secure-pill', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] }), _jsxs("div", { className: 'shared-checkout-v2-wallet-shell', "aria-label": walletAriaLabel, children: [_jsx(StripeCheckoutExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, checkoutAnalytics: checkoutAnalytics, checkoutSessionId: checkoutSessionId, className: 'shared-checkout-v2-express-buttons', confirmEmail: false, customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onError: (message) => setSharedError(message, true), onPaymentInfoSubmitted: onPaymentInfoSubmitted, onPaymentRejected: () => setSelectedMethod('card'), onSuccess: trackCheckoutSuccess, options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel, supportedCountries: normalizedSupportedCountries, unsupportedCountryMessage: unsupportedCountryMessage }), _jsx("span", { className: 'shared-checkout-v2-sr-only', children: walletAriaLabel })] })] }), _jsxs("div", { hidden: effectiveSelectedMethod !== 'card', className: [
-                            'shared-checkout-v2-card-panel',
-                            effectiveSelectedMethod === 'card' ? 'is-visible' : '',
-                        ]
-                            .filter(Boolean)
-                            .join(' '), children: [_jsxs("div", { className: 'shared-checkout-v2-card-box', children: [_jsxs("label", { className: emailFieldClassName, children: [_jsx("span", { className: 'shared-checkout-v2-email-label', children: customerEmailLabel }), _jsx("span", { className: 'shared-checkout-v2-email-control', children: _jsx("input", { type: 'email', autoComplete: 'email', className: 'shared-checkout-v2-email-input', disabled: !customerEmailEditable, inputMode: 'email', readOnly: !customerEmailEditable, value: customerEmailEditable ? emailDraft : initialCustomerEmail, placeholder: customerEmailPlaceholder, onBlur: (event) => commitEmailDraftIfValid(event.currentTarget.value), onChange: (event) => {
-                                                        if (!customerEmailEditable) {
-                                                            return;
-                                                        }
-                                                        setEmailDraft(event.target.value);
-                                                        onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
-                                                    } }) })] }), _jsx(PaymentElement, { options: paymentElementOptions, onChange: handlePaymentElementChange, onReady: () => setPaymentElementReady(true) }), fixedBillingCountry && fixedBillingCountryLabel ? (_jsxs("label", { className: 'shared-checkout-v2-country-field', children: [_jsx("span", { className: 'shared-checkout-v2-country-label', children: "Country" }), _jsx("span", { className: 'shared-checkout-v2-country-control', children: _jsx("select", { "aria-label": 'Country', className: 'shared-checkout-v2-country-select', value: fixedBillingCountry, onChange: () => setBillingCountry(fixedBillingCountry), children: _jsx("option", { value: fixedBillingCountry, children: fixedBillingCountryLabel }) }) })] })) : null] }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting || !paymentElementReady, children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-card-submit-icon' }), submitting ? processingLabel : cardSubmitLabel] }), _jsx("div", { className: 'shared-checkout-v2-card-brands', "aria-hidden": 'true', children: cardBrandLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-checkout-v2-card-brand' }, label))) }), _jsxs("p", { className: 'shared-checkout-v2-secure-pill shared-checkout-v2-secure-pill--card', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
-}
 function CheckoutSessionProvider({ children, clientSecret, fixedBillingCountry, stripePromise, variant, }) {
     const providerChildren = children;
     const checkoutProviderOptions = useMemo(() => (Object.assign(Object.assign({ clientSecret }, (fixedBillingCountry
@@ -406,784 +103,3 @@ export function SharedCheckoutSpecialOfferDialog({ buttonColor, buttonLabel, des
     };
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-special-offer-overlay', style: checkoutStyle, children: _jsxs("section", { className: 'shared-checkout-special-offer-dialog', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-special-offer-title', children: [_jsx(SharedCheckoutSpecialOfferGift, { discountLabel: discountLabel, imageAlt: imageAlt, imageSrc: imageSrc }), _jsx("h2", { id: 'shared-checkout-special-offer-title', children: title }), _jsx("p", { children: description }), _jsx("button", { type: 'button', className: 'shared-checkout-special-offer-button', onClick: onAccept, children: buttonLabel })] }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
 }
-const sharedStripeCheckoutV2Styles = `
-.shared-checkout-v2-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 110;
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  overflow: hidden;
-  background: #fff;
-}
-
-.shared-checkout-v2-dialog {
-  width: min(100%, 430px);
-  height: 100svh;
-  max-height: 100svh;
-  overflow: hidden;
-  background: #fff;
-}
-
-@media (min-width: 640px) {
-  .shared-checkout-v2-overlay:has(.shared-checkout-v2-dialog[data-variant='compact']) {
-    align-items: center;
-    padding: 24px;
-    background: rgb(0 0 0 / 48%);
-  }
-
-  .shared-checkout-v2-dialog[data-variant='compact'] {
-    width: min(100%, 520px);
-    height: auto;
-    max-height: calc(100svh - 48px);
-    border-radius: 24px;
-    box-shadow: 0 24px 70px rgb(0 0 0 / 28%);
-  }
-}
-
-.shared-checkout-v2-shell[data-variant='compact'] {
-  height: auto;
-  max-height: min(100svh, 760px);
-}
-
-.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header {
-  min-height: 88px;
-  padding: 0 72px;
-}
-
-.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-header h2 {
-  font-size: 27px;
-}
-
-.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-close {
-  right: 22px;
-  left: auto;
-}
-
-.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-summary {
-  padding: 0 36px;
-}
-
-.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total {
-  min-height: 82px;
-  border: 1px solid #ececef;
-  border-radius: 16px;
-  padding: 0 22px;
-  background: #fbfbfc;
-}
-
-.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-total svg {
-  display: none;
-}
-
-.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-payment {
-  padding-right: 36px;
-  padding-left: 36px;
-}
-
-.shared-checkout-v2-shell[data-variant='compact'] .shared-checkout-v2-card-submit {
-  border-radius: 14px;
-  background: var(--shared-checkout-v2-button-color);
-  text-transform: none;
-}
-
-.shared-checkout-v2-shell {
-  height: 100%;
-  max-height: 100svh;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
-  background: #fff;
-  color: #303136;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-}
-
-.shared-checkout-v2-header {
-  position: relative;
-  min-height: 70px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 56px;
-  background: #fff;
-}
-
-.shared-checkout-v2-header h2 {
-  margin: 0;
-  color: #020203;
-  font-size: 24px;
-  font-weight: 900;
-  line-height: 1.15;
-  letter-spacing: 0;
-  text-align: center;
-}
-
-.shared-checkout-v2-close {
-  position: absolute;
-  left: 16px;
-  top: 50%;
-  width: 40px;
-  height: 40px;
-  border: 0;
-  border-radius: 999px;
-  background: #f2f2f3;
-  color: #aaa;
-  transform: translateY(-50%);
-  cursor: pointer;
-}
-
-.shared-checkout-v2-close span,
-.shared-checkout-v2-close span::after {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 28px;
-  height: 4px;
-  border-radius: 999px;
-  background: currentColor;
-  content: '';
-}
-
-.shared-checkout-v2-close span {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.shared-checkout-v2-close span::after {
-  transform: translate(-50%, -50%) rotate(90deg);
-}
-
-.shared-checkout-v2-summary {
-  padding: 0 17px 0;
-  background: #fff;
-}
-
-.shared-checkout-v2-countdown {
-  margin: 0;
-  min-height: 37px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 12px;
-  background: color-mix(in srgb, var(--shared-checkout-v2-theme-color) 10%, #fff);
-  color: var(--shared-checkout-v2-theme-color);
-  font-size: 16px;
-  font-weight: 900;
-  line-height: 1.2;
-  letter-spacing: 0;
-  text-align: center;
-}
-
-.shared-checkout-v2-satisfaction {
-  margin: 17px 0 21px;
-  color: #2f3034;
-  font-size: 19px;
-  font-weight: 800;
-  line-height: 1.15;
-  letter-spacing: 0;
-  text-align: center;
-}
-
-.shared-checkout-v2-satisfaction strong {
-  color: var(--shared-checkout-v2-theme-color);
-}
-
-.shared-checkout-v2-price-stack {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.shared-checkout-v2-price-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  font-size: 18px;
-  line-height: 1.2;
-  letter-spacing: 0;
-}
-
-.shared-checkout-v2-price-row.is-muted {
-  color: #9d9d9f;
-  font-size: 17px;
-  font-weight: 500;
-}
-
-.shared-checkout-v2-strike {
-  text-decoration-line: line-through;
-  text-decoration-thickness: 2px;
-}
-
-.shared-checkout-v2-price-row.is-discount {
-  color: #040508;
-  font-size: 17px;
-  font-weight: 900;
-}
-
-.shared-checkout-v2-price-row.is-discount strong:last-child {
-  color: #ff2544;
-}
-
-.shared-checkout-v2-promo {
-  min-height: 42px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  border-radius: 13px;
-  background: #f0f0f0;
-  padding: 0 14px;
-  color: #8d8d90;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 1.1;
-}
-
-.shared-checkout-v2-promo strong {
-  color: #050609;
-  font-weight: 900;
-}
-
-.shared-checkout-v2-total {
-  margin-top: 20px;
-  min-height: 76px;
-  border-top: 1px solid #dedede;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  color: #303136;
-}
-
-.shared-checkout-v2-total span {
-  font-size: 23px;
-  font-weight: 800;
-  line-height: 1;
-}
-
-.shared-checkout-v2-total strong {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  color: #303136;
-  font-size: 25px;
-  font-weight: 900;
-  line-height: 1;
-}
-
-.shared-checkout-v2-total svg {
-  width: 25px;
-  height: 25px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linejoin: round;
-}
-
-.shared-checkout-v2-total.is-plain {
-  margin-top: 0;
-}
-
-.shared-checkout-v2-saved {
-  width: fit-content;
-  min-height: 36px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  margin: -8px 0 9px auto;
-  border-radius: 12px;
-  background: #ffdce3;
-  padding: 0 14px;
-  color: #ff2544;
-  font-size: 14px;
-  font-weight: 900;
-  line-height: 1.1;
-  letter-spacing: 0;
-}
-
-.shared-checkout-v2-payment {
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  background: #f2f2f3;
-  padding: 9px 17px 32px;
-}
-
-.shared-checkout-v2-methods {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 42px;
-}
-
-.shared-checkout-v2-method {
-  min-width: 0;
-  min-height: 74px;
-  box-sizing: border-box;
-  border: 2px solid #e6e7eb;
-  border-radius: 13px;
-  background: #fff;
-  color: #344376;
-  padding: 9px 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  cursor: pointer;
-}
-
-.shared-checkout-v2-method.is-selected {
-  border: 3px solid #050505;
-}
-
-.shared-checkout-v2-tab-wallet {
-  width: 58px;
-  height: 36px;
-}
-
-.shared-checkout-v2-tab-wallet svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.shared-checkout-v2-tab-wallets {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-
-.shared-checkout-v2-method strong {
-  color: #344376;
-  font-size: 20px;
-  font-weight: 900;
-  line-height: 1;
-  letter-spacing: 0;
-}
-
-.shared-checkout-v2-tab-brands {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  max-width: 100%;
-  gap: 4px;
-}
-
-.shared-checkout-v2-tab-brand {
-  min-width: 0;
-  width: 24px;
-  height: 15px;
-}
-
-.shared-checkout-v2-tab-brand svg {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.shared-checkout-v2-wallet-panel,
-.shared-checkout-v2-card-panel {
-  display: flex;
-  flex-direction: column;
-  height: 0;
-  overflow: hidden;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.shared-checkout-v2-wallet-panel[hidden],
-.shared-checkout-v2-card-panel[hidden] {
-  display: none;
-}
-
-.shared-checkout-v2-wallet-panel {
-  align-items: center;
-  gap: 22px;
-  padding-top: 5px;
-}
-
-.shared-checkout-v2-secure-pill {
-  width: fit-content;
-  min-height: 47px;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  margin: 0 auto;
-  border-radius: 12px;
-  background: #dcffd0;
-  padding: 0 22px;
-  color: #207733;
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.1;
-  letter-spacing: 0;
-}
-
-.shared-checkout-v2-secure-pill-icon {
-  width: 24px;
-  height: 24px;
-  flex: none;
-  color: #147232;
-}
-
-.shared-checkout-v2-wallet-shell {
-  width: 100%;
-  min-height: 124px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.shared-checkout-v2-express-buttons {
-  width: 100%;
-}
-
-.shared-checkout-v2-card-panel {
-  position: relative;
-  gap: 10px;
-  margin-inline: -17px;
-  background: #f2f2f3;
-  padding: 16px 32px 92px;
-}
-
-.shared-checkout-v2-wallet-panel.is-visible,
-.shared-checkout-v2-card-panel.is-visible {
-  height: auto;
-  overflow: visible;
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.shared-checkout-v2-wallet-panel:not(.is-visible),
-.shared-checkout-v2-card-panel:not(.is-visible) {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-.shared-checkout-v2-email-field {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  margin-bottom: 14px;
-  padding: 0;
-  color: #303136;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.2;
-}
-
-.shared-checkout-v2-email-field.is-disabled {
-  cursor: default;
-}
-
-.shared-checkout-v2-email-label {
-  padding: 0 14px;
-  color: #303136;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.2;
-}
-
-.shared-checkout-v2-email-control {
-  min-height: 50px;
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  border: 1px solid #dedede;
-  background: #fff;
-  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
-  padding: 0 14px;
-}
-
-.shared-checkout-v2-email-input {
-  width: 100%;
-  min-height: 48px;
-  box-sizing: border-box;
-  border: 0;
-  background: transparent;
-  padding: 0;
-  color: #303136;
-  font: inherit;
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 1.2;
-  outline: none;
-}
-
-.shared-checkout-v2-email-input:disabled {
-  color: #74767c;
-  opacity: 1;
-  -webkit-text-fill-color: #74767c;
-}
-
-.shared-checkout-v2-email-input::placeholder {
-  color: #8c909a;
-}
-
-.shared-checkout-v2-card-box {
-  overflow: visible;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  box-shadow: none;
-}
-
-.shared-checkout-v2-country-field {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-  margin: 14px 0 0;
-  color: #303136;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.2;
-}
-
-.shared-checkout-v2-country-label {
-  padding: 0 14px;
-}
-
-.shared-checkout-v2-country-control {
-  position: relative;
-  display: block;
-}
-
-.shared-checkout-v2-country-control::after {
-  position: absolute;
-  right: 17px;
-  top: 50%;
-  width: 8px;
-  height: 8px;
-  border-right: 2px solid #6f7380;
-  border-bottom: 2px solid #6f7380;
-  content: '';
-  pointer-events: none;
-  transform: translateY(-65%) rotate(45deg);
-}
-
-.shared-checkout-v2-country-select {
-  width: 100%;
-  min-height: 50px;
-  box-sizing: border-box;
-  appearance: none;
-  border: 1px solid #dedede;
-  border-radius: 0;
-  background: #fff;
-  box-shadow: 0 1px 2px rgb(16 24 40 / 8%);
-  color: #303136;
-  font: inherit;
-  font-size: 18px;
-  font-weight: 400;
-  line-height: 1.2;
-  outline: none;
-  padding: 0 44px 0 14px;
-}
-
-.shared-checkout-v2-error {
-  margin: 0;
-  color: #c43737;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.35;
-}
-
-.shared-checkout-v2-card-submit {
-  min-height: 60px;
-  border: 0;
-  border-radius: 11px;
-  background: var(--shared-checkout-v2-button-color);
-  color: #fff;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 14px;
-  font-size: 22px;
-  font-weight: 900;
-  line-height: 1;
-  letter-spacing: 0;
-  cursor: pointer;
-}
-
-.shared-checkout-v2-card-submit:disabled {
-  cursor: wait;
-  opacity: 0.72;
-}
-
-.shared-checkout-v2-card-submit-icon {
-  width: 26px;
-  height: 26px;
-}
-
-.shared-checkout-v2-card-brands {
-  min-height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  opacity: 0.95;
-}
-
-.shared-checkout-v2-card-brand {
-  width: 42px;
-  height: 25px;
-}
-
-.shared-checkout-v2-secure-pill--card {
-  position: absolute;
-  left: 50%;
-  bottom: 16px;
-  transform: translateX(-50%);
-  white-space: nowrap;
-}
-
-.shared-checkout-v2-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.shared-checkout-special-offer-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 120;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 22px;
-  background: rgb(0 0 0 / 48%);
-}
-
-.shared-checkout-special-offer-dialog {
-  width: min(100%, 386px);
-  box-sizing: border-box;
-  border-radius: 14px;
-  background: #fff;
-  padding: 55px 26px 28px;
-  color: #303136;
-  text-align: center;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-}
-
-.shared-checkout-special-offer-gift {
-  display: block;
-  width: min(100%, 260px);
-  height: auto;
-  margin: 0 auto 22px;
-}
-
-.shared-checkout-special-offer-gift--image {
-  position: relative;
-  width: min(100%, 250px);
-  aspect-ratio: 1;
-}
-
-.shared-checkout-special-offer-gift-image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  user-select: none;
-}
-
-.shared-checkout-special-offer-image-discount {
-  position: absolute;
-  top: 69%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: #1f8f4d;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  font-size: 34px;
-  font-weight: 900;
-  line-height: 1;
-  letter-spacing: 0;
-  pointer-events: none;
-  white-space: nowrap;
-}
-
-.shared-checkout-special-offer-dialog h2 {
-  margin: 0;
-  color: #303136;
-  font-size: 36px;
-  font-weight: 900;
-  line-height: 1.1;
-  letter-spacing: 0;
-}
-
-.shared-checkout-special-offer-dialog p {
-  margin: 26px 0 32px;
-  color: #77787e;
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 1.18;
-  letter-spacing: 0;
-}
-
-.shared-checkout-special-offer-button {
-  width: 100%;
-  min-height: 76px;
-  border: 0;
-  border-radius: 12px;
-  background: var(--shared-checkout-v2-button-color);
-  color: #fff;
-  font-size: 23px;
-  font-weight: 900;
-  line-height: 1;
-  letter-spacing: 0;
-  cursor: pointer;
-}
-
-@media (max-width: 429px) {
-  .shared-checkout-v2-header {
-    min-height: 64px;
-  }
-
-  .shared-checkout-v2-header h2 {
-    font-size: 24px;
-  }
-
-  .shared-checkout-v2-summary {
-    padding-inline: 17px;
-  }
-
-  .shared-checkout-v2-satisfaction {
-    font-size: 19px;
-  }
-
-  .shared-checkout-v2-methods {
-    gap: 42px;
-  }
-
-  .shared-checkout-v2-method strong {
-    font-size: 19px;
-  }
-
-  .shared-checkout-v2-card-panel {
-    padding-inline: 32px;
-  }
-}
-`;