@funnelsgrove/payments 0.1.36 → 0.1.38

package/README.md

@@ -2,6 +2,11 @@
 
 Shared billing and checkout helpers for funnels.
 
+Detailed implementation docs:
+
+- [Shared Payments](../../docs/funnel-sdk/shared-payments.md)
+- [Funnel API payment endpoints](../../docs/funnel-sdk/funnel-api.md#checkout-endpoints)
+
 ## Build And Publish
 
 - Build distributable output with `npm run build --workspace @funnelsgrove/payments`.

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './services/planCatalog.service.js';
 export * from './services/runtimeBillingPlanCatalog.service.js';
 export * from './services/paywallOffer.service.js';
 export * from './services/stripe.service.js';
+export * from './services/checkoutCompletionAnalytics.service.js';
 export * from './hooks/useResolvedPaywallPlans.js';
 export * from './providers/paymentProvider.types.js';
 export * from './providers/stripe/useStripeSubscriptionCheckoutSession.js';
@@ -14,7 +15,6 @@ export * from './providers/stripe/GooglePaySubscriptionCheckoutSlot.js';
 export { ManageSubscriptionScreen, type ManageSubscriptionContent, type ManageSubscriptionScreenProps, } from './components/ManageSubscriptionScreen.js';
 export * from './components/shared/SharedStripeCheckoutDialog.js';
 export * from './components/shared/SharedStripeCheckoutV2Dialog.js';
-export * from './components/shared/PaywallSubscriptionCheckout.js';
 export * from './components/shared/ApplePaySubscribeButton.js';
 export * from './components/shared/GooglePaySubscribeButton.js';
 export * from './components/shared/StripeCheckoutExpressCheckoutButton.js';

package/dist/index.js

@@ -5,6 +5,7 @@ export * from './services/planCatalog.service.js';
 export * from './services/runtimeBillingPlanCatalog.service.js';
 export * from './services/paywallOffer.service.js';
 export * from './services/stripe.service.js';
+export * from './services/checkoutCompletionAnalytics.service.js';
 export * from './hooks/useResolvedPaywallPlans.js';
 export * from './providers/paymentProvider.types.js';
 export * from './providers/stripe/useStripeSubscriptionCheckoutSession.js';
@@ -14,7 +15,6 @@ export * from './providers/stripe/GooglePaySubscriptionCheckoutSlot.js';
 export { ManageSubscriptionScreen, } from './components/ManageSubscriptionScreen.js';
 export * from './components/shared/SharedStripeCheckoutDialog.js';
 export * from './components/shared/SharedStripeCheckoutV2Dialog.js';
-export * from './components/shared/PaywallSubscriptionCheckout.js';
 export * from './components/shared/ApplePaySubscribeButton.js';
 export * from './components/shared/GooglePaySubscribeButton.js';
 export * from './components/shared/StripeCheckoutExpressCheckoutButton.js';

package/dist/services/checkoutCompletionAnalytics.service.d.ts

@@ -0,0 +1,12 @@
+import type { RuntimeMode } from '@funnelsgrove/runtime';
+import { type StripeRuntimeConfigOverrides } from './stripe.service.js';
+export type TrackPaidStripeSubscriptionCheckoutCompletedInput = {
+    checkoutSessionId?: string | null;
+    environment?: RuntimeMode;
+    metadata?: Record<string, unknown> | null;
+    runtimeConfig?: StripeRuntimeConfigOverrides;
+    stepId?: string;
+    stepName?: string;
+};
+export type TrackPaidStripeSubscriptionCheckoutCompletedResult = 'already_tracked' | 'missing_checkout_session' | 'tracked' | 'unpaid';
+export declare function trackPaidStripeSubscriptionCheckoutCompleted(input: TrackPaidStripeSubscriptionCheckoutCompletedInput): Promise<TrackPaidStripeSubscriptionCheckoutCompletedResult>;

package/dist/services/checkoutCompletionAnalytics.service.js

@@ -0,0 +1,74 @@
+import { publicAnalyticsSdk, } from '@funnelsgrove/analytics';
+import { verifyStripeSubscriptionCheckoutPayment, } from './stripe.service.js';
+const asRecord = (value) => {
+    return value && typeof value === 'object' && !Array.isArray(value)
+        ? value
+        : {};
+};
+const activeCheckoutCompletionKeys = new Set();
+const buildCheckoutCompletedStorageKey = (checkoutSessionId, runtimeConfig) => {
+    var _a;
+    const funnelId = ((_a = runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelId) === null || _a === void 0 ? void 0 : _a.trim()) || 'unknown_funnel';
+    return `funnelsgrove:checkout_completed:${funnelId}:${checkoutSessionId}`;
+};
+const hasTrackedCheckoutSession = (checkoutSessionId, runtimeConfig) => {
+    var _a;
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    try {
+        return Boolean((_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.getItem(buildCheckoutCompletedStorageKey(checkoutSessionId, runtimeConfig)));
+    }
+    catch (_b) {
+        return false;
+    }
+};
+const markCheckoutSessionTracked = (checkoutSessionId, runtimeConfig) => {
+    var _a;
+    if (typeof window === 'undefined') {
+        return;
+    }
+    try {
+        (_a = window.sessionStorage) === null || _a === void 0 ? void 0 : _a.setItem(buildCheckoutCompletedStorageKey(checkoutSessionId, runtimeConfig), '1');
+    }
+    catch (_b) {
+        // A stable checkout-session event id still protects provider-side dedupe.
+    }
+};
+export async function trackPaidStripeSubscriptionCheckoutCompleted(input) {
+    var _a;
+    const checkoutSessionId = ((_a = input.checkoutSessionId) === null || _a === void 0 ? void 0 : _a.trim()) || '';
+    if (!checkoutSessionId) {
+        return 'missing_checkout_session';
+    }
+    const completionKey = buildCheckoutCompletedStorageKey(checkoutSessionId, input.runtimeConfig);
+    if (activeCheckoutCompletionKeys.has(completionKey) ||
+        hasTrackedCheckoutSession(checkoutSessionId, input.runtimeConfig)) {
+        return 'already_tracked';
+    }
+    activeCheckoutCompletionKeys.add(completionKey);
+    try {
+        const checkoutStatus = await verifyStripeSubscriptionCheckoutPayment({
+            checkoutSessionId,
+            environment: input.environment,
+            runtimeConfig: input.runtimeConfig,
+        });
+        if (!checkoutStatus.paid) {
+            return 'unpaid';
+        }
+        const analyticsMetadata = asRecord(checkoutStatus.analyticsMetadata);
+        const conversionInput = {
+            eventId: checkoutSessionId,
+            stepId: input.stepId,
+            stepName: input.stepName,
+            metadata: Object.assign(Object.assign(Object.assign({}, asRecord(input.metadata)), analyticsMetadata), { checkoutSessionId, checkout_session_id: checkoutSessionId, checkout_session_status: checkoutStatus.status || undefined, payment_status: checkoutStatus.paymentStatus || undefined, environment: checkoutStatus.environment || input.environment || analyticsMetadata.environment }),
+        };
+        publicAnalyticsSdk.trackCheckoutCompleted(conversionInput);
+        markCheckoutSessionTracked(checkoutSessionId, input.runtimeConfig);
+        await publicAnalyticsSdk.flush().catch(() => 0);
+        return 'tracked';
+    }
+    finally {
+        activeCheckoutCompletionKeys.delete(completionKey);
+    }
+}

package/dist/services/stripe.service.d.ts

@@ -119,8 +119,22 @@ type UpdateSubscriptionCheckoutPlanResponse = {
     checkoutSessionId: string;
     environment?: 'test' | 'live';
 };
+export type VerifySubscriptionCheckoutPaymentInput = {
+    checkoutSessionId: string;
+    environment?: RuntimeMode;
+    runtimeConfig?: StripeRuntimeConfigOverrides;
+};
+export type VerifySubscriptionCheckoutPaymentResponse = {
+    checkoutSessionId: string;
+    paid: boolean;
+    paymentStatus?: string | null;
+    status?: string | null;
+    environment?: 'test' | 'live';
+    analyticsMetadata?: Record<string, unknown>;
+};
 export declare function createStripeSubscriptionCheckout(input: CreateSubscriptionCheckoutInput): Promise<CreateSubscriptionCheckoutResponse>;
 export declare function updateStripeSubscriptionCheckoutPlan(input: UpdateSubscriptionCheckoutPlanInput): Promise<UpdateSubscriptionCheckoutPlanResponse>;
+export declare function verifyStripeSubscriptionCheckoutPayment(input: VerifySubscriptionCheckoutPaymentInput): Promise<VerifySubscriptionCheckoutPaymentResponse>;
 type CreateCheckoutSessionInput = {
     plan: CheckoutSessionPlanInput;
     successUrl: string;

package/dist/services/stripe.service.js

@@ -714,6 +714,31 @@ export async function updateStripeSubscriptionCheckoutPlan(input) {
     }
     return (await response.json());
 }
+export async function verifyStripeSubscriptionCheckoutPayment(input) {
+    const checkoutSessionId = input.checkoutSessionId.trim();
+    if (!checkoutSessionId) {
+        throw new Error('checkoutSessionId is required');
+    }
+    const runtimeConfig = resolveStripeRuntimeConfig(input.runtimeConfig);
+    const response = await fetch(buildStripeRuntimeApiUrl('/sdk/public/payments/subscriptions/checkout-session-status', runtimeConfig), {
+        method: 'POST',
+        headers: buildStripeRuntimeHeaders(runtimeConfig, {
+            'Content-Type': 'application/json',
+        }),
+        body: JSON.stringify({
+            publishableKey: runtimeConfig.funnelSdkPublishableKey || undefined,
+            funnelId: runtimeConfig.funnelId || undefined,
+            funnelVersionId: runtimeConfig.funnelVersionId || undefined,
+            checkoutSessionId,
+            environment: input.environment || undefined,
+        }),
+    });
+    if (!response.ok) {
+        const errorMessage = await parseErrorMessage(response, 'Unable to verify subscription checkout');
+        throw new Error(errorMessage);
+    }
+    return (await response.json());
+}
 export async function createStripeCheckoutSession(input) {
     var _a, _b, _c, _d, _e;
     const recurring = resolveCheckoutPlanRecurringConfig(input.plan);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",
@@ -27,6 +27,7 @@
     "test:run": "vitest run --passWithNoTests"
   },
   "dependencies": {
+    "@funnelsgrove/analytics": "^0.1.13",
     "@funnelsgrove/runtime": "^0.1.18",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",

package/dist/components/shared/PaywallSubscriptionCheckout.d.ts

@@ -1,146 +0,0 @@
-import { type FormEvent } from 'react';
-import type { RuntimeMode } from '@funnelsgrove/runtime';
-import type { StripeRuntimeConfigOverrides, PaywallPlan } from '../../services/stripe.service.js';
-import type { PaywallDisplayPlan } from '../../services/paywallOffer.service.js';
-import { type PlatformWalletPaymentMethod } from './walletPlatform.js';
-import { type StripeSubscriptionCheckoutSession } from '../../providers/stripe/useStripeSubscriptionCheckoutSession.js';
-export type PaywallSubscriptionCheckoutContent = {
-    title: string;
-    closeAriaLabel: string;
-    walletButtonLabel: string;
-    customerEmailLabel: string;
-    customerEmailPlaceholder: string;
-    customerEmailInvalidMessage: string;
-    walletEmailPromptTitle: string;
-    walletEmailPromptDescription: string;
-    walletEmailPromptSubmitLabel: string;
-    walletEmailPromptCancelLabel: string;
-    countdownLabel: string;
-    satisfactionPercent: string;
-    satisfactionLabel: string;
-    originalPriceLabel: string;
-    discountRowLabelTemplate: string;
-    promoCodeLabel: string;
-    savedLabelTemplate: string;
-    totalLabel: string;
-    cardSubmitLabel: string;
-    paypalLabel: string;
-    paypalButtonLabel: string;
-    processingLabel: string;
-    secureLabel: string;
-    paymentMethodLabels: readonly string[];
-    specialOffer: {
-        image?: {
-            src?: string;
-            alt?: string;
-        };
-        discountLabel: string;
-        title: string;
-        description: string;
-        buttonLabel: string;
-    };
-};
-export type PaywallSubscriptionPaymentStackContent = {
-    cardButtonLabel: string;
-    googlePayPlaceholderLabel: string;
-    metaLabels: readonly string[];
-    stripeUnavailableNote: string;
-    supportText: string;
-    walletPlaceholderLabel: string;
-};
-type PaywallCheckoutCloseDiscountState = {
-    stage: string;
-    status: string;
-};
-export type UsePaywallSubscriptionCheckoutControllerInput = {
-    analyticsMetadata?: Record<string, unknown> | null;
-    appliedDiscountAmountCents: number;
-    checkoutDiscountPercent: number;
-    checkoutMode: RuntimeMode;
-    checkoutPromoActive: boolean;
-    content: PaywallSubscriptionCheckoutContent;
-    customerEmailEditable: boolean;
-    customerName?: string | null;
-    discountState?: PaywallCheckoutCloseDiscountState | null;
-    initialCustomerEmail?: string | null;
-    onCheckoutCompleted?: () => Promise<void> | void;
-    onCheckoutStarted?: () => Promise<void> | void;
-    onCustomerEmailCommit: (email: string) => Promise<string>;
-    onFirstCheckoutClosed?: () => void;
-    plan: PaywallPlan | null;
-    returnUrl: string;
-    runtimeConfig?: StripeRuntimeConfigOverrides;
-    selectedDisplayPlan: PaywallDisplayPlan | null;
-    supportEmail: string;
-    userId?: string | null;
-    getReturnUrl?: (checkoutSessionId?: string | null) => string;
-};
-export type PaywallSubscriptionCheckoutController = {
-    checkoutDialogOpen: boolean;
-    checkoutDialogReady: boolean;
-    checkoutDisabled: boolean;
-    checkoutDiscountAmountLabel: string;
-    checkoutDiscountLabel: string;
-    checkoutInitialWalletAvailable: boolean | null;
-    checkoutSavedLabel: string;
-    checkoutSession: StripeSubscriptionCheckoutSession;
-    checkoutSuccessReturnUrl: string;
-    checkoutSummaryLabel: string;
-    checkoutTotalValue: string;
-    closeCheckoutDialog: () => void;
-    commitCheckoutEmail: (draftEmail: string) => Promise<string>;
-    customerEmail: string;
-    customerEmailEditable: boolean;
-    customerName: string;
-    error: string | null;
-    handleApplePayAvailabilityChange: (available: boolean) => void;
-    handleGooglePayAvailabilityChange: (available: boolean) => void;
-    openCardCheckoutFromUnavailableWallet: () => Promise<void>;
-    preparePaywallWalletCheckout: () => Promise<string | null>;
-    setCheckoutEmail: (value: string) => void;
-    startCheckout: () => Promise<void>;
-    supportEmail: string;
-    trackCheckoutCompleted: () => Promise<void>;
-    walletEmailPromptCancel: () => void;
-    walletEmailPromptDraft: string;
-    walletEmailPromptError: string | null;
-    walletEmailPromptOpen: boolean;
-    walletEmailPromptSubmit: (event: FormEvent<HTMLFormElement>) => Promise<void>;
-    walletPaymentMethods: readonly PlatformWalletPaymentMethod[];
-    setWalletEmailPromptDraft: (value: string) => void;
-};
-export declare function usePaywallSubscriptionCheckoutController({ analyticsMetadata, appliedDiscountAmountCents, checkoutDiscountPercent, checkoutMode, checkoutPromoActive, content, customerEmailEditable, customerName, discountState, getReturnUrl, initialCustomerEmail, onCheckoutCompleted, onCheckoutStarted, onCustomerEmailCommit, onFirstCheckoutClosed, plan, returnUrl, runtimeConfig, selectedDisplayPlan, supportEmail, userId, }: UsePaywallSubscriptionCheckoutControllerInput): PaywallSubscriptionCheckoutController;
-export type PaywallSubscriptionCheckoutDialogsProps = {
-    buttonColor?: string;
-    content: PaywallSubscriptionCheckoutContent;
-    controller: PaywallSubscriptionCheckoutController;
-    discountPercent: number;
-    promoActive: boolean;
-    promoDisplayName: string;
-    remainingSeconds: number;
-    selectedDisplayPlan: PaywallDisplayPlan | null;
-    specialOfferDialogOpen: boolean;
-    themeColor?: string;
-    onSpecialOfferAccept: () => void;
-};
-export declare function PaywallSubscriptionCheckoutDialogs({ buttonColor, content, controller, discountPercent, promoActive, promoDisplayName, remainingSeconds, selectedDisplayPlan, specialOfferDialogOpen, themeColor, onSpecialOfferAccept, }: PaywallSubscriptionCheckoutDialogsProps): import("react/jsx-runtime").JSX.Element;
-export type PaywallSubscriptionPaymentStackProps = {
-    applePayButtonClassName?: string;
-    applePayShellClassName?: string;
-    cardButtonClassName?: string;
-    className?: string;
-    content: PaywallSubscriptionPaymentStackContent;
-    controller: PaywallSubscriptionCheckoutController;
-    disclaimerClassName?: string;
-    errorClassName?: string;
-    googlePayButtonClassName?: string;
-    googlePayShellClassName?: string;
-    metaClassName?: string;
-    noteClassName?: string;
-    paymentDisclaimer: string;
-    selectedDisplayPlan: PaywallDisplayPlan | null;
-    supportClassName?: string;
-    walletSuspended: boolean;
-};
-export declare function PaywallSubscriptionPaymentStack({ applePayButtonClassName, applePayShellClassName, cardButtonClassName, className, content, controller, disclaimerClassName, errorClassName, googlePayButtonClassName, googlePayShellClassName, metaClassName, noteClassName, paymentDisclaimer, selectedDisplayPlan, supportClassName, walletSuspended, }: PaywallSubscriptionPaymentStackProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/shared/PaywallSubscriptionCheckout.js

@@ -1,340 +0,0 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ApplePaySubscriptionCheckoutSlot, } from '../../providers/stripe/ApplePaySubscriptionCheckoutSlot.js';
-import { GooglePaySubscriptionCheckoutSlot, } from '../../providers/stripe/GooglePaySubscriptionCheckoutSlot.js';
-import { SharedCheckoutSpecialOfferDialog, SharedStripeCheckoutV2Dialog, } from './SharedStripeCheckoutV2Dialog.js';
-import { usePlatformWalletPaymentMethods } from './walletPlatform.js';
-import { useStripeSubscriptionCheckoutSession, } from '../../providers/stripe/useStripeSubscriptionCheckoutSession.js';
-const checkoutCurrencyFormatter = new Intl.NumberFormat('en-US', {
-    currency: 'USD',
-    maximumFractionDigits: 2,
-    minimumFractionDigits: 2,
-    style: 'currency',
-});
-function formatCheckoutAmount(amountCents) {
-    return checkoutCurrencyFormatter.format(amountCents / 100);
-}
-function getErrorMessage(error, fallback) {
-    return error instanceof Error && error.message ? error.message : fallback;
-}
-export function usePaywallSubscriptionCheckoutController({ analyticsMetadata, appliedDiscountAmountCents, checkoutDiscountPercent, checkoutMode, checkoutPromoActive, content, customerEmailEditable, customerName, discountState, getReturnUrl, initialCustomerEmail, onCheckoutCompleted, onCheckoutStarted, onCustomerEmailCommit, onFirstCheckoutClosed, plan, returnUrl, runtimeConfig, selectedDisplayPlan, supportEmail, userId, }) {
-    var _a, _b, _c, _d;
-    const walletPaymentMethods = usePlatformWalletPaymentMethods();
-    const [checkoutDialogOpen, setCheckoutDialogOpen] = useState(false);
-    const [checkoutEmail, setCheckoutEmail] = useState((_a = initialCustomerEmail === null || initialCustomerEmail === void 0 ? void 0 : initialCustomerEmail.trim()) !== null && _a !== void 0 ? _a : '');
-    const [error, setError] = useState(null);
-    const [paywallWalletAvailability, setPaywallWalletAvailability] = useState({
-        intentKey: '',
-        methods: {},
-    });
-    const [walletEmailPromptOpen, setWalletEmailPromptOpen] = useState(false);
-    const [walletEmailPromptDraft, setWalletEmailPromptDraft] = useState('');
-    const [walletEmailPromptError, setWalletEmailPromptError] = useState(null);
-    const walletEmailResolverRef = useRef(null);
-    const checkoutSummaryLabel = ((_b = selectedDisplayPlan === null || selectedDisplayPlan === void 0 ? void 0 : selectedDisplayPlan.checkoutSummaryLabel) === null || _b === void 0 ? void 0 : _b.trim()) || (selectedDisplayPlan === null || selectedDisplayPlan === void 0 ? void 0 : selectedDisplayPlan.title) || 'Selected plan';
-    const checkoutDiscountLabel = checkoutPromoActive
-        ? content.discountRowLabelTemplate.replace('{percent}', String(checkoutDiscountPercent))
-        : '';
-    const checkoutDiscountAmountLabel = checkoutPromoActive
-        ? `-${formatCheckoutAmount(appliedDiscountAmountCents)}`
-        : '';
-    const checkoutSavedLabel = checkoutPromoActive
-        ? content.savedLabelTemplate
-            .replace('{amount}', formatCheckoutAmount(appliedDiscountAmountCents))
-            .replace('{percent}', String(checkoutDiscountPercent))
-        : '';
-    const checkoutTotalValue = useMemo(() => {
-        var _a;
-        if (!selectedDisplayPlan) {
-            return '';
-        }
-        return ((_a = selectedDisplayPlan.priceLabel.split('/')[0]) === null || _a === void 0 ? void 0 : _a.trim()) || selectedDisplayPlan.priceLabel;
-    }, [selectedDisplayPlan]);
-    const successReturnUrl = useMemo(() => (getReturnUrl === null || getReturnUrl === void 0 ? void 0 : getReturnUrl()) || returnUrl, [getReturnUrl, returnUrl]);
-    const checkoutSession = useStripeSubscriptionCheckoutSession({
-        analyticsMetadata,
-        checkoutMode,
-        couponId: checkoutPromoActive ? (_c = selectedDisplayPlan === null || selectedDisplayPlan === void 0 ? void 0 : selectedDisplayPlan.couponId) !== null && _c !== void 0 ? _c : null : null,
-        customerEmail: checkoutEmail || initialCustomerEmail,
-        displayPlan: selectedDisplayPlan,
-        onError: setError,
-        plan,
-        returnUrl: successReturnUrl,
-        runtimeConfig,
-        userId,
-    });
-    const checkoutDisabled = !checkoutSession.configured || !plan || !selectedDisplayPlan || !userId;
-    const checkoutDialogReady = checkoutDialogOpen &&
-        Boolean(checkoutSession.activeClientSecret) &&
-        Boolean(checkoutSession.stripePromise) &&
-        Boolean(selectedDisplayPlan);
-    const checkoutSuccessReturnUrl = useMemo(() => (getReturnUrl === null || getReturnUrl === void 0 ? void 0 : getReturnUrl(checkoutSession.checkoutSessionId)) || returnUrl, [checkoutSession.checkoutSessionId, getReturnUrl, returnUrl]);
-    const currentPaywallWalletAvailability = paywallWalletAvailability.intentKey === checkoutSession.intentKey
-        ? paywallWalletAvailability.methods
-        : {};
-    const checkoutInitialWalletAvailable = walletPaymentMethods.some((method) => currentPaywallWalletAvailability[method] === true)
-        ? true
-        : null;
-    useEffect(() => {
-        const timeoutId = window.setTimeout(() => {
-            var _a;
-            setCheckoutEmail((_a = initialCustomerEmail === null || initialCustomerEmail === void 0 ? void 0 : initialCustomerEmail.trim()) !== null && _a !== void 0 ? _a : '');
-        }, 0);
-        return () => window.clearTimeout(timeoutId);
-    }, [initialCustomerEmail]);
-    useEffect(() => {
-        return () => {
-            var _a;
-            (_a = walletEmailResolverRef.current) === null || _a === void 0 ? void 0 : _a.call(walletEmailResolverRef, null);
-            walletEmailResolverRef.current = null;
-        };
-    }, []);
-    const updatePaywallWalletAvailability = (method, available) => {
-        setPaywallWalletAvailability((current) => {
-            const currentMethods = current.intentKey === checkoutSession.intentKey ? current.methods : {};
-            return {
-                intentKey: checkoutSession.intentKey,
-                methods: Object.assign(Object.assign({}, currentMethods), { [method]: available }),
-            };
-        });
-    };
-    const handleApplePayAvailabilityChange = (available) => updatePaywallWalletAvailability('applePay', available);
-    const handleGooglePayAvailabilityChange = (available) => updatePaywallWalletAvailability('googlePay', available);
-    const trackCheckoutStarted = async () => {
-        await (onCheckoutStarted === null || onCheckoutStarted === void 0 ? void 0 : onCheckoutStarted());
-    };
-    const startCheckout = async () => {
-        if (checkoutDisabled || checkoutSession.loading.card) {
-            return;
-        }
-        await trackCheckoutStarted();
-        if (checkoutSession.activeClientSecret) {
-            setCheckoutDialogOpen(true);
-            return;
-        }
-        const readyClientSecret = await checkoutSession.prepareCardCheckout();
-        if (readyClientSecret) {
-            setCheckoutDialogOpen(true);
-        }
-    };
-    const trackCheckoutCompleted = async () => {
-        await (onCheckoutCompleted === null || onCheckoutCompleted === void 0 ? void 0 : onCheckoutCompleted());
-    };
-    const commitCheckoutEmail = async (draftEmail) => {
-        var _a;
-        const normalizedEmail = draftEmail.trim();
-        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedEmail)) {
-            throw new Error(content.customerEmailInvalidMessage);
-        }
-        if (normalizedEmail === ((_a = initialCustomerEmail === null || initialCustomerEmail === void 0 ? void 0 : initialCustomerEmail.trim()) !== null && _a !== void 0 ? _a : '')) {
-            setCheckoutEmail(normalizedEmail);
-            return normalizedEmail;
-        }
-        const syncedEmail = await onCustomerEmailCommit(normalizedEmail);
-        const committedEmail = syncedEmail.trim() || normalizedEmail;
-        setCheckoutEmail(committedEmail);
-        return committedEmail;
-    };
-    const resolveWalletEmailPrompt = useCallback((email) => {
-        var _a;
-        (_a = walletEmailResolverRef.current) === null || _a === void 0 ? void 0 : _a.call(walletEmailResolverRef, email);
-        walletEmailResolverRef.current = null;
-    }, []);
-    const requestWalletEmail = useCallback(async () => {
-        setWalletEmailPromptDraft(checkoutEmail.trim() || (initialCustomerEmail === null || initialCustomerEmail === void 0 ? void 0 : initialCustomerEmail.trim()) || '');
-        setWalletEmailPromptError(null);
-        setWalletEmailPromptOpen(true);
-        return await new Promise((resolve) => {
-            walletEmailResolverRef.current = resolve;
-        });
-    }, [checkoutEmail, initialCustomerEmail]);
-    const walletEmailPromptSubmit = async (event) => {
-        event.preventDefault();
-        try {
-            const committedEmail = await commitCheckoutEmail(walletEmailPromptDraft);
-            setWalletEmailPromptOpen(false);
-            setWalletEmailPromptError(null);
-            resolveWalletEmailPrompt(committedEmail);
-        }
-        catch (submitError) {
-            setWalletEmailPromptError(getErrorMessage(submitError, content.customerEmailInvalidMessage));
-        }
-    };
-    const walletEmailPromptCancel = () => {
-        setWalletEmailPromptOpen(false);
-        setWalletEmailPromptError(null);
-        resolveWalletEmailPrompt(null);
-    };
-    const preparePaywallWalletCheckout = async () => {
-        await trackCheckoutStarted();
-        const normalizedEmail = checkoutEmail.trim() || (initialCustomerEmail === null || initialCustomerEmail === void 0 ? void 0 : initialCustomerEmail.trim()) || '';
-        if (!normalizedEmail) {
-            return await requestWalletEmail();
-        }
-        return normalizedEmail;
-    };
-    const openCardCheckoutFromUnavailableWallet = async () => {
-        var _a;
-        if (checkoutDisabled || checkoutSession.loading.card) {
-            return;
-        }
-        await trackCheckoutStarted();
-        const readyClientSecret = (_a = checkoutSession.activeClientSecret) !== null && _a !== void 0 ? _a : await checkoutSession.prepareCardCheckout();
-        if (readyClientSecret) {
-            setCheckoutDialogOpen(true);
-        }
-    };
-    const closeCheckoutDialog = () => {
-        setCheckoutDialogOpen(false);
-        setError(null);
-        if ((discountState === null || discountState === void 0 ? void 0 : discountState.stage) === 'first' && discountState.status === 'active') {
-            onFirstCheckoutClosed === null || onFirstCheckoutClosed === void 0 ? void 0 : onFirstCheckoutClosed();
-        }
-    };
-    return {
-        checkoutDialogOpen,
-        checkoutDialogReady,
-        checkoutDisabled,
-        checkoutDiscountAmountLabel,
-        checkoutDiscountLabel,
-        checkoutInitialWalletAvailable,
-        checkoutSavedLabel,
-        checkoutSession,
-        checkoutSuccessReturnUrl,
-        checkoutSummaryLabel,
-        checkoutTotalValue,
-        closeCheckoutDialog,
-        commitCheckoutEmail,
-        customerEmail: checkoutEmail,
-        customerEmailEditable,
-        customerName: (_d = customerName === null || customerName === void 0 ? void 0 : customerName.trim()) !== null && _d !== void 0 ? _d : '',
-        error,
-        handleApplePayAvailabilityChange,
-        handleGooglePayAvailabilityChange,
-        openCardCheckoutFromUnavailableWallet,
-        preparePaywallWalletCheckout,
-        setCheckoutEmail,
-        startCheckout,
-        supportEmail,
-        trackCheckoutCompleted,
-        walletEmailPromptCancel,
-        walletEmailPromptDraft,
-        walletEmailPromptError,
-        walletEmailPromptOpen,
-        walletEmailPromptSubmit,
-        walletPaymentMethods,
-        setWalletEmailPromptDraft,
-    };
-}
-export function PaywallSubscriptionCheckoutDialogs({ buttonColor = 'var(--color-secondary-text)', content, controller, discountPercent, promoActive, promoDisplayName, remainingSeconds, selectedDisplayPlan, specialOfferDialogOpen, themeColor = 'var(--color-secondary-text)', onSpecialOfferAccept, }) {
-    var _a, _b;
-    return (_jsxs(_Fragment, { children: [controller.checkoutDialogOpen &&
-                controller.checkoutSession.activeClientSecret &&
-                controller.checkoutSession.stripePromise &&
-                selectedDisplayPlan ? (_jsx(SharedStripeCheckoutV2Dialog, { amountCents: selectedDisplayPlan.amountCents, buttonColor: buttonColor, cardSubmitLabel: content.cardSubmitLabel, clientSecret: controller.checkoutSession.activeClientSecret, closeAriaLabel: content.closeAriaLabel, countdownLabel: content.countdownLabel, customerEmail: controller.customerEmail, customerEmailEditable: controller.customerEmailEditable, customerEmailLabel: content.customerEmailLabel, customerEmailPlaceholder: content.customerEmailPlaceholder, customerEmailInvalidMessage: content.customerEmailInvalidMessage, customerName: controller.customerName, discountAmountLabel: controller.checkoutDiscountAmountLabel, discountLabel: controller.checkoutDiscountLabel, discountPercent: discountPercent, initialWalletAvailable: controller.checkoutInitialWalletAvailable, onClose: controller.closeCheckoutDialog, onCustomerEmailChange: controller.setCheckoutEmail, onCustomerEmailCommit: controller.commitCheckoutEmail, onError: controller.checkoutSession.setError, onSuccess: controller.trackCheckoutCompleted, paymentMethodLabels: content.paymentMethodLabels, paypalButtonLabel: content.paypalButtonLabel, paypalLabel: content.paypalLabel, promoActive: promoActive, promoCode: promoDisplayName, promoCodeLabel: content.promoCodeLabel, processingLabel: content.processingLabel, remainingSeconds: remainingSeconds, returnUrl: controller.checkoutSuccessReturnUrl, savedLabel: controller.checkoutSavedLabel, secureLabel: content.secureLabel, satisfactionLabel: content.satisfactionLabel, satisfactionPercent: content.satisfactionPercent, stripePromise: controller.checkoutSession.stripePromise, summaryLabel: controller.checkoutSummaryLabel, themeColor: themeColor, title: content.title, totalLabel: content.totalLabel, totalValue: controller.checkoutTotalValue, walletButtonLabel: content.walletButtonLabel, originalPriceLabel: content.originalPriceLabel, originalPriceValue: selectedDisplayPlan.basePriceLabel })) : null, specialOfferDialogOpen ? (_jsx(SharedCheckoutSpecialOfferDialog, { buttonColor: buttonColor, buttonLabel: content.specialOffer.buttonLabel, description: content.specialOffer.description, discountLabel: content.specialOffer.discountLabel, imageAlt: (_a = content.specialOffer.image) === null || _a === void 0 ? void 0 : _a.alt, imageSrc: (_b = content.specialOffer.image) === null || _b === void 0 ? void 0 : _b.src, onAccept: onSpecialOfferAccept, themeColor: themeColor, title: content.specialOffer.title })) : null, controller.walletEmailPromptOpen ? (_jsx(PaywallWalletEmailPromptDialog, { content: content, draftEmail: controller.walletEmailPromptDraft, error: controller.walletEmailPromptError, onCancel: controller.walletEmailPromptCancel, onChange: controller.setWalletEmailPromptDraft, onSubmit: controller.walletEmailPromptSubmit })) : null] }));
-}
-export function PaywallSubscriptionPaymentStack({ applePayButtonClassName, applePayShellClassName, cardButtonClassName, className, content, controller, disclaimerClassName, errorClassName, googlePayButtonClassName, googlePayShellClassName, metaClassName, noteClassName, paymentDisclaimer, selectedDisplayPlan, supportClassName, walletSuspended, }) {
-    const suspended = controller.checkoutDialogReady || walletSuspended;
-    return (_jsxs("section", { className: className, children: [controller.walletPaymentMethods.includes('applePay') ? (_jsx("div", { className: applePayShellClassName, children: selectedDisplayPlan ? (_jsx(ApplePaySubscriptionCheckoutSlot, { amountCents: selectedDisplayPlan.amountCents, beforeConfirm: controller.preparePaywallWalletCheckout, className: applePayButtonClassName, customerEmail: controller.customerEmail, customerName: controller.customerName, disabled: controller.checkoutDisabled, onAvailabilityChange: controller.handleApplePayAvailabilityChange, onSuccess: controller.trackCheckoutCompleted, onUnavailableClick: controller.openCardCheckoutFromUnavailableWallet, placeholderLabel: content.walletPlaceholderLabel, returnUrl: controller.checkoutSuccessReturnUrl, session: controller.checkoutSession, summaryLabel: controller.checkoutSummaryLabel, suspended: suspended })) : null })) : null, controller.walletPaymentMethods.includes('googlePay') ? (_jsx("div", { className: googlePayShellClassName, children: selectedDisplayPlan ? (_jsx(GooglePaySubscriptionCheckoutSlot, { amountCents: selectedDisplayPlan.amountCents, beforeConfirm: controller.preparePaywallWalletCheckout, className: googlePayButtonClassName, customerEmail: controller.customerEmail, customerName: controller.customerName, disabled: controller.checkoutDisabled, onAvailabilityChange: controller.handleGooglePayAvailabilityChange, onSuccess: controller.trackCheckoutCompleted, onUnavailableClick: controller.openCardCheckoutFromUnavailableWallet, placeholderLabel: content.googlePayPlaceholderLabel, returnUrl: controller.checkoutSuccessReturnUrl, session: controller.checkoutSession, summaryLabel: controller.checkoutSummaryLabel, suspended: suspended })) : null })) : null, _jsx("button", { type: 'button', className: cardButtonClassName, onClick: () => void controller.startCheckout(), disabled: controller.checkoutDisabled || controller.checkoutSession.loading.card, children: content.cardButtonLabel }), _jsx("p", { className: metaClassName, children: content.metaLabels.join(' · ') }), _jsx("p", { className: disclaimerClassName, children: paymentDisclaimer }), _jsxs("p", { className: supportClassName, children: [content.supportText, ' ', _jsx("a", { href: `mailto:${controller.supportEmail}`, children: controller.supportEmail })] }), !controller.checkoutSession.configured ? (_jsx("p", { className: noteClassName, children: content.stripeUnavailableNote })) : null, controller.error ? _jsx("p", { className: errorClassName, children: controller.error }) : null] }));
-}
-function PaywallWalletEmailPromptDialog({ content, draftEmail, error, onCancel, onChange, onSubmit, }) {
-    return (_jsxs("div", { className: 'paywall-wallet-email-prompt-backdrop', role: 'presentation', children: [_jsxs("form", { className: 'paywall-wallet-email-prompt', role: 'dialog', "aria-modal": 'true', "aria-labelledby": 'paywall-wallet-email-prompt-title', onSubmit: (event) => void onSubmit(event), children: [_jsx("h2", { id: 'paywall-wallet-email-prompt-title', children: content.walletEmailPromptTitle }), _jsx("p", { children: content.walletEmailPromptDescription }), _jsxs("label", { children: [_jsx("span", { children: content.customerEmailLabel }), _jsx("input", { type: 'email', inputMode: 'email', autoComplete: 'email', value: draftEmail, onChange: (event) => onChange(event.currentTarget.value), placeholder: content.customerEmailPlaceholder, autoFocus: true })] }), error ? _jsx("p", { className: 'paywall-wallet-email-prompt-error', children: error }) : null, _jsxs("div", { className: 'paywall-wallet-email-prompt-actions', children: [_jsx("button", { type: 'button', onClick: onCancel, children: content.walletEmailPromptCancelLabel }), _jsx("button", { type: 'submit', children: content.walletEmailPromptSubmitLabel })] })] }), _jsx("style", { children: paywallWalletEmailPromptStyles })] }));
-}
-const paywallWalletEmailPromptStyles = `
-.paywall-wallet-email-prompt-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  background: rgb(13 17 32 / 42%);
-}
-
-.paywall-wallet-email-prompt {
-  box-sizing: border-box;
-  width: min(100%, 360px);
-  border-radius: 20px;
-  background: #fff;
-  padding: 22px;
-  box-shadow: 0 18px 48px rgb(19 27 47 / 26%);
-  color: #111827;
-}
-
-.paywall-wallet-email-prompt h2 {
-  margin: 0;
-  color: #111827;
-  font-size: 22px;
-  font-weight: 800;
-  line-height: 1.15;
-  letter-spacing: 0;
-}
-
-.paywall-wallet-email-prompt p {
-  margin: 10px 0 0;
-  color: #4b5563;
-  font-size: 15px;
-  font-weight: 500;
-  line-height: 1.45;
-}
-
-.paywall-wallet-email-prompt label {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 18px;
-  color: #374151;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-.paywall-wallet-email-prompt input {
-  min-height: 48px;
-  border: 1px solid #d8deea;
-  border-radius: 12px;
-  padding: 0 14px;
-  color: #111827;
-  font: inherit;
-  font-size: 16px;
-  font-weight: 500;
-  outline: none;
-}
-
-.paywall-wallet-email-prompt input:focus {
-  border-color: var(--color-secondary-text);
-  box-shadow: 0 0 0 3px rgb(63 81 181 / 12%);
-}
-
-.paywall-wallet-email-prompt-error {
-  color: #c03232 !important;
-}
-
-.paywall-wallet-email-prompt-actions {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 10px;
-  margin-top: 18px;
-}
-
-.paywall-wallet-email-prompt-actions button {
-  min-height: 48px;
-  border-radius: 14px;
-  border: 0;
-  font-size: 15px;
-  font-weight: 800;
-  cursor: pointer;
-}
-
-.paywall-wallet-email-prompt-actions button[type='button'] {
-  background: #f2f5fb;
-  color: #4b5563;
-}
-
-.paywall-wallet-email-prompt-actions button[type='submit'] {
-  background: var(--color-secondary-text);
-  color: #fff;
-}
-`;