@funnelsgrove/payments 0.1.0 → 0.1.2

package/dist/components/shared/SharedStripeCheckoutV2Dialog.js

@@ -0,0 +1,988 @@
+'use client';
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, } from 'react';
+import { CardCvcElement, CardExpiryElement, CardNumberElement, Elements, useElements, useStripe, } from '@stripe/react-stripe-js';
+import { PaymentBrandMark, SecurityLockIcon } from './CheckoutBrandAssets.js';
+import { StripeExpressCheckoutButton } from './StripeExpressCheckoutButton.js';
+import { getStripeWalletPaymentMethodOrder, usePlatformWalletPaymentMethods, } from './walletPlatform.js';
+const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'Maestro', 'Discover'];
+const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+const normalizeBillingName = (input) => {
+    var _a, _b, _c, _d;
+    const normalizedName = ((_a = input.name) === null || _a === void 0 ? void 0 : _a.trim()) || ((_b = input.fallback) === null || _b === void 0 ? void 0 : _b.trim());
+    if (normalizedName) {
+        return normalizedName;
+    }
+    const normalizedEmail = (_c = input.email) === null || _c === void 0 ? void 0 : _c.trim();
+    if (normalizedEmail) {
+        const localPart = (_d = normalizedEmail
+            .split('@')[0]) === null || _d === void 0 ? void 0 : _d.replace(/[._-]+/g, ' ').trim();
+        if (localPart) {
+            return localPart;
+        }
+    }
+    return 'Customer';
+};
+const isSuccessfulIntentStatus = (status) => {
+    return status === 'succeeded' || status === 'processing' || status === 'requires_capture';
+};
+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 stripeCardElementStyle = {
+    base: {
+        color: '#303136',
+        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+        fontSize: '18px',
+        fontSmoothing: 'antialiased',
+        fontWeight: '500',
+        '::placeholder': {
+            color: '#8c909a',
+        },
+    },
+    invalid: {
+        color: '#ff2544',
+        iconColor: '#ff2544',
+    },
+};
+const cardNumberElementOptions = {
+    placeholder: 'Credit or Debit Card Number',
+    showIcon: false,
+    style: stripeCardElementStyle,
+};
+const cardExpiryElementOptions = {
+    placeholder: 'Expiry Date',
+    style: stripeCardElementStyle,
+};
+const cardCvcElementOptions = {
+    placeholder: 'CVV/CVC',
+    style: stripeCardElementStyle,
+};
+function getFriendlyCardErrorMessage(error) {
+    return error instanceof Error && error.message
+        ? error.message
+        : 'Payment failed. Please review your card details and try again.';
+}
+function SharedStripeCheckoutV2Form({ amountCents, buttonColor, cardSubmitLabel, clientSecret, closeAriaLabel, countdownLabel, customerEmail, customerEmailEditable = false, customerEmailLabel = 'Email', customerEmailPlaceholder = 'Enter your email', customerEmailInvalidMessage = 'Enter a valid email address.', customerName, discountAmountLabel, discountLabel, discountPercent, initialWalletAvailable, nameOnCardPlaceholder = 'Name on card', onClose, onCustomerEmailChange, onCustomerEmailCommit, onError, onSuccess, paymentMethodLabels = defaultPaymentMethodLabels, promoActive, processingLabel, promoCode, promoCodeLabel, remainingSeconds, returnUrl, savedLabel, secureLabel, satisfactionLabel, satisfactionPercent, summaryLabel, themeColor, title, totalLabel, totalValue, walletButtonLabel, originalPriceLabel, originalPriceValue, }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    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 [error, setError] = useState(null);
+    const [cardNumberError, setCardNumberError] = useState(null);
+    const [cardExpiryError, setCardExpiryError] = useState(null);
+    const [cardCvcError, setCardCvcError] = useState(null);
+    const [emailDraft, setEmailDraft] = useState((customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '');
+    const [nameOnCard, setNameOnCard] = useState((customerName === null || customerName === void 0 ? void 0 : customerName.trim()) || '');
+    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 initialCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || '';
+    const resolvedCustomerEmail = customerEmailEditable
+        ? emailDraft.trim() || initialCustomerEmail
+        : initialCustomerEmail;
+    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',
+            },
+            emailRequired: true,
+            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 setSharedError = (message) => {
+        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');
+        }
+    };
+    useEffect(() => {
+        if (effectiveSelectedMethod !== 'card' || typeof window === 'undefined') {
+            return;
+        }
+        const resizeTimer = window.setTimeout(() => {
+            window.dispatchEvent(new Event('resize'));
+        }, 0);
+        return () => window.clearTimeout(resizeTimer);
+    }, [effectiveSelectedMethod]);
+    const ensureCustomerEmail = async () => {
+        const normalizedEmail = resolvedCustomerEmail.trim();
+        if (!normalizedEmail || !isValidEmail(normalizedEmail)) {
+            setSharedError(customerEmailInvalidMessage);
+            return null;
+        }
+        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 handleFieldError = (event, setFieldError) => {
+        var _a, _b, _c;
+        setFieldError((_b = (_a = event.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : null);
+        if ((_c = event.error) === null || _c === void 0 ? void 0 : _c.message) {
+            setSharedError(event.error.message);
+            return;
+        }
+        setSharedError(null);
+    };
+    const handleSubmit = async (event) => {
+        var _a;
+        event.preventDefault();
+        if (submitting) {
+            return;
+        }
+        if (!stripe || !elements) {
+            setSharedError('Payment form is not ready yet.');
+            return;
+        }
+        const cardNumberElement = elements.getElement(CardNumberElement);
+        if (!cardNumberElement) {
+            setSharedError('Payment form is not ready yet.');
+            return;
+        }
+        setSubmitting(true);
+        setSharedError(null);
+        try {
+            const syncedEmail = await ensureCustomerEmail();
+            if (!syncedEmail) {
+                setSubmitting(false);
+                return;
+            }
+            const result = await stripe.confirmCardPayment(clientSecret, {
+                payment_method: {
+                    card: cardNumberElement,
+                    billing_details: {
+                        email: syncedEmail || undefined,
+                        name: normalizeBillingName({
+                            email: syncedEmail,
+                            name: customerName,
+                            fallback: nameOnCard,
+                        }),
+                    },
+                },
+                return_url: returnUrl,
+            });
+            if (result.error) {
+                setSharedError(result.error.message || 'Payment failed.');
+                setSubmitting(false);
+                return;
+            }
+            if (typeof window !== 'undefined' &&
+                isSuccessfulIntentStatus((_a = result.paymentIntent) === null || _a === void 0 ? void 0 : _a.status)) {
+                onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+                window.location.assign(returnUrl);
+                return;
+            }
+            setSubmitting(false);
+        }
+        catch (submitError) {
+            setSharedError(getFriendlyCardErrorMessage(submitError));
+            setSubmitting(false);
+        }
+    };
+    const visibleError = error || cardNumberError || cardExpiryError || cardCvcError;
+    return (_jsxs("div", { className: 'shared-checkout-v2-shell', 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, _jsxs("p", { className: 'shared-checkout-v2-satisfaction', children: [_jsx("strong", { children: satisfactionPercent }), " ", satisfactionLabel] }), 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: [_jsxs("div", { className: [
+                            'shared-checkout-v2-methods',
+                            showWalletMethod ? '' : 'has-card-only',
+                        ]
+                            .filter(Boolean)
+                            .join(' '), role: 'tablist', "aria-label": 'Payment method', children: [showWalletMethod ? (_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 })] })) : null, _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))) })] })] }), _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(StripeExpressCheckoutButton, { amountCents: amountCents, availabilityPaymentMethods: walletPaymentMethods, beforeConfirm: ensureCustomerEmail, className: 'shared-checkout-v2-express-buttons', customerEmail: resolvedCustomerEmail, customerName: customerName, initialAvailable: initialWalletAvailable, keepInitialAvailableOnReady: initialWalletAvailable === true, onAvailabilityChange: handleWalletAvailabilityChange, onError: setSharedError, onSuccess: onSuccess, options: expressCheckoutOptions, returnUrl: returnUrl, summaryLabel: expressCheckoutSummaryLabel }), _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: [customerEmailEditable ? (_jsxs("label", { className: 'shared-checkout-v2-email-field', children: [_jsx("span", { children: customerEmailLabel }), _jsx("input", { type: 'email', autoComplete: 'email', className: 'shared-checkout-v2-email-input', inputMode: 'email', value: emailDraft, placeholder: customerEmailPlaceholder, onChange: (event) => {
+                                            setEmailDraft(event.target.value);
+                                            onCustomerEmailChange === null || onCustomerEmailChange === void 0 ? void 0 : onCustomerEmailChange(event.target.value);
+                                        } })] })) : null, _jsxs("div", { className: 'shared-checkout-v2-card-box', children: [_jsx("div", { className: 'shared-checkout-v2-card-number', children: _jsx(CardNumberElement, { options: cardNumberElementOptions, onChange: (event) => {
+                                                handleFieldError(event, setCardNumberError);
+                                            } }) }), _jsxs("div", { className: 'shared-checkout-v2-card-row', children: [_jsx("div", { className: 'shared-checkout-v2-card-half', children: _jsx(CardExpiryElement, { options: cardExpiryElementOptions, onChange: (event) => {
+                                                        handleFieldError(event, setCardExpiryError);
+                                                    } }) }), _jsxs("div", { className: 'shared-checkout-v2-card-half shared-checkout-v2-card-half--cvc', children: [_jsx(CardCvcElement, { options: cardCvcElementOptions, onChange: (event) => {
+                                                            handleFieldError(event, setCardCvcError);
+                                                        } }), _jsx("span", { className: 'shared-checkout-v2-cvc-info', "aria-hidden": 'true', children: "i" })] })] })] }), _jsx("input", { type: 'text', autoComplete: 'cc-name', className: 'shared-checkout-v2-name-input', value: nameOnCard, placeholder: nameOnCardPlaceholder, onChange: (event) => setNameOnCard(event.target.value) }), visibleError ? _jsx("p", { className: 'shared-checkout-v2-error', children: visibleError }) : null, _jsxs("button", { type: 'submit', className: 'shared-checkout-v2-card-submit', disabled: submitting, 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', children: [_jsx(SecurityLockIcon, { className: 'shared-checkout-v2-secure-pill-icon' }), secureLabel] })] })] })] }));
+}
+export function SharedStripeCheckoutV2Dialog(_a) {
+    var { clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["clientSecret", "onClose", "stripePromise"]);
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [onClose]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'shared-checkout-v2-overlay', children: _jsx("div", { className: 'shared-checkout-v2-dialog', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'shared-checkout-v2-title', children: _jsx(Elements, { stripe: stripePromise, options: {
+                            clientSecret,
+                        }, children: _jsx(SharedStripeCheckoutV2Form, Object.assign({}, props, { clientSecret: clientSecret, onClose: onClose })) }) }) }), _jsx("style", { children: sharedStripeCheckoutV2Styles })] }));
+}
+function SharedCheckoutSpecialOfferGift({ discountLabel, imageAlt, imageSrc, }) {
+    if (imageSrc) {
+        return (_jsxs("div", { className: 'shared-checkout-special-offer-gift shared-checkout-special-offer-gift--image', children: [_jsx("span", { className: 'shared-checkout-special-offer-gift-image', role: imageAlt ? 'img' : undefined, "aria-label": imageAlt || undefined, style: { backgroundImage: `url("${imageSrc}")` } }), _jsx("span", { className: 'shared-checkout-special-offer-image-discount', children: discountLabel })] }));
+    }
+    return (_jsxs("svg", { className: 'shared-checkout-special-offer-gift', viewBox: '0 0 260 190', fill: 'none', "aria-hidden": 'true', children: [_jsx("ellipse", { cx: '134', cy: '164', rx: '92', ry: '13', fill: '#dff7e7' }), _jsx("path", { d: 'M83 68h110a13 13 0 0 1 13 13v78H70V81a13 13 0 0 1 13-13Z', fill: '#e8f9df' }), _jsx("path", { d: 'M83 68h110a13 13 0 0 1 13 13v78H70V81a13 13 0 0 1 13-13Z', stroke: '#35a969', strokeWidth: '3' }), _jsx("path", { d: 'M124 68h28v91h-28V68Z', fill: '#39b86a' }), _jsx("path", { d: 'M66 87h144v25H66V87Z', fill: '#fff0a8' }), _jsx("path", { d: 'M66 87h144v25H66V87Z', stroke: '#35a969', strokeWidth: '3' }), _jsx("path", { d: 'M137 68c-16-3-36-16-32-29 3-11 18-13 31-5 11 8 10 21 1 34Z', fill: '#fff0a8', stroke: '#39b86a', strokeWidth: '8', strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsx("path", { d: 'M142 68c17-3 37-16 33-29-3-11-18-13-31-5-11 8-11 21-2 34Z', fill: '#fff0a8', stroke: '#39b86a', strokeWidth: '8', strokeLinecap: 'round', strokeLinejoin: 'round' }), _jsxs("g", { className: 'shared-checkout-special-offer-discount', children: [_jsx("rect", { x: '73', y: '111', width: '116', height: '48', rx: '9', fill: '#fff8d9', stroke: '#f2b84b', strokeWidth: '3' }), _jsx("circle", { cx: '88', cy: '135', r: '5', fill: '#f2b84b' }), _jsx("text", { x: '131', y: '135', fill: '#1f8f4d', fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', fontSize: '32', fontWeight: '900', letterSpacing: '0', textAnchor: 'middle', dominantBaseline: 'middle', children: discountLabel })] }), _jsx("path", { d: 'M220 69c8 3 12 8 15 16 3-8 7-13 15-16-8-3-12-8-15-16-3 8-7 13-15 16ZM213 118c5 2 8 5 10 10 2-5 5-8 10-10-5-2-8-5-10-10-2 5-5 8-10 10Z', fill: '#ffb84d' }), _jsx("path", { d: 'M45 76c6 2 10 6 12 12 2-6 6-10 12-12-6-2-10-6-12-12-2 6-6 10-12 12Z', fill: '#f56d78', opacity: '0.9' })] }));
+}
+export function SharedCheckoutSpecialOfferDialog({ buttonColor, buttonLabel, description, discountLabel, imageAlt, imageSrc, onAccept, themeColor, title, }) {
+    const checkoutStyle = {
+        '--shared-checkout-v2-theme-color': themeColor,
+        '--shared-checkout-v2-button-color': buttonColor,
+    };
+    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;
+}
+
+.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-methods.has-card-only {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0;
+}
+
+.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;
+  gap: 6px;
+}
+
+.shared-checkout-v2-tab-brand {
+  width: 30px;
+  height: 20px;
+}
+
+.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 {
+  gap: 10px;
+  padding: 2px 15px 5px;
+}
+
+.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 {
+  display: grid;
+  gap: 7px;
+  color: #25272a;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.shared-checkout-v2-email-input,
+.shared-checkout-v2-name-input {
+  width: 100%;
+  min-height: 56px;
+  box-sizing: border-box;
+  border: 1px solid #8f94a0;
+  border-radius: 14px;
+  background: #f6f7fc;
+  padding: 0 24px;
+  color: #303136;
+  font: inherit;
+  font-size: 19px;
+  font-weight: 500;
+  outline: none;
+}
+
+.shared-checkout-v2-email-input::placeholder,
+.shared-checkout-v2-name-input::placeholder {
+  color: #8c909a;
+}
+
+.shared-checkout-v2-card-box {
+  overflow: hidden;
+  border: 1px solid #8f94a0;
+  border-radius: 14px;
+  background: #f6f7fc;
+}
+
+.shared-checkout-v2-card-number,
+.shared-checkout-v2-card-half {
+  position: relative;
+  min-height: 56px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: 0 24px;
+}
+
+.shared-checkout-v2-card-number > div,
+.shared-checkout-v2-card-half > div {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+}
+
+.shared-checkout-v2-card-number {
+  border-bottom: 1px solid #8f94a0;
+}
+
+.shared-checkout-v2-card-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+}
+
+.shared-checkout-v2-card-half:first-child {
+  border-right: 1px solid #8f94a0;
+}
+
+.shared-checkout-v2-card-half--cvc {
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.shared-checkout-v2-card-half--cvc > div {
+  flex: 1;
+}
+
+.shared-checkout-v2-cvc-info {
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #8c909a;
+  color: #fff;
+  font-size: 16px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.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-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);
+}
+
+.shared-checkout-special-offer-gift-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1;
+  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: 15px;
+  }
+}
+`;