@datalayer/core 1.0.20 → 1.0.22

package/lib/components/checkout/StripeCheckout.js

@@ -1,38 +1,221 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { createElement, useCallback, useEffect, useState } from 'react';
-import { Button, Flash, FormControl, Spinner, Text } from '@primer/react';
+import { createElement, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { CardElement, Elements, useElements, useStripe, } from '@stripe/react-stripe-js';
+import { Button, Flash, FormControl, Label, ProgressBar, Spinner, Text, useTheme, } from '@primer/react';
+import { DotFillIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { useCache } from '../../hooks/index.js';
+const PLAN_INCLUDED_RUNS_DEFAULTS = {
+    starter: 500,
+    free: 500,
+    team: 5000,
+    pro: 5000,
+    enterprise: 50000,
+};
+const asNumber = (value) => {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+};
+const asPositiveNumber = (value) => {
+    const parsed = asNumber(value);
+    return parsed !== null && parsed > 0 ? parsed : null;
+};
+const asNonNegativeNumber = (value) => {
+    const parsed = asNumber(value);
+    return parsed !== null && parsed >= 0 ? parsed : null;
+};
+const buildUsageSegments = (used, total) => {
+    const safeUsed = Math.max(0, used);
+    const safeTotal = Math.max(0, total);
+    const denominator = Math.max(1, safeUsed, safeTotal);
+    const inQuota = Math.min(safeUsed, safeTotal);
+    const remaining = Math.max(0, safeTotal - safeUsed);
+    const over = Math.max(0, safeUsed - safeTotal);
+    return {
+        inQuotaPct: (inQuota / denominator) * 100,
+        remainingPct: (remaining / denominator) * 100,
+        overPct: (over / denominator) * 100,
+    };
+};
+function StripePaymentForm({ clientSecret, intentType = 'payment', onPaymentSucceeded, }) {
+    const stripe = useStripe();
+    const elements = useElements();
+    const { colorScheme, resolvedColorScheme } = useTheme();
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [errorMessage, setErrorMessage] = useState(null);
+    const themeIsDark = useMemo(() => {
+        const scheme = (resolvedColorScheme || colorScheme || '').toLowerCase();
+        if (scheme.includes('dark')) {
+            return true;
+        }
+        if (scheme.includes('light')) {
+            return false;
+        }
+        return false;
+    }, [colorScheme, resolvedColorScheme]);
+    const cardOptions = useMemo(() => {
+        const rootStyles = typeof window !== 'undefined'
+            ? getComputedStyle(document.documentElement)
+            : null;
+        const detectDarkMode = () => {
+            if (themeIsDark) {
+                return true;
+            }
+            if (typeof window === 'undefined' || typeof document === 'undefined') {
+                return false;
+            }
+            const candidates = [
+                document.documentElement,
+                document.body,
+            ];
+            for (const el of candidates) {
+                const mode = el?.getAttribute('data-color-mode');
+                if (mode === 'dark') {
+                    return true;
+                }
+                if (mode === 'light') {
+                    return false;
+                }
+            }
+            for (const el of candidates) {
+                const darkTheme = el?.getAttribute('data-dark-theme');
+                if (darkTheme &&
+                    darkTheme !== 'light' &&
+                    (el?.getAttribute('data-color-mode') || 'auto') === 'auto' &&
+                    window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                    return true;
+                }
+            }
+            return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        };
+        const isDarkMode = detectDarkMode();
+        const fontFamily = rootStyles?.getPropertyValue('--base-text-font-family')?.trim() ||
+            'system-ui, -apple-system, Segoe UI, sans-serif';
+        // Stripe's CardElement renders in an iframe that does not inherit our CSS
+        // variables, so reading them from documentElement does not always reflect
+        // the active theme. Use explicit dark/light values so typed characters are
+        // always readable.
+        const baseColor = isDarkMode ? '#f0f6fc' : '#1f2328';
+        const mutedColor = isDarkMode ? '#8b949e' : '#59636e';
+        return {
+            style: {
+                base: {
+                    color: baseColor,
+                    iconColor: mutedColor,
+                    fontFamily,
+                    fontSize: '16px',
+                    '::placeholder': {
+                        color: mutedColor,
+                    },
+                    ':-webkit-autofill': {
+                        color: baseColor,
+                    },
+                },
+                invalid: {
+                    color: '#d1242f',
+                    iconColor: '#d1242f',
+                },
+            },
+        };
+    }, [themeIsDark]);
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        if (!stripe || !elements) {
+            return;
+        }
+        const card = elements.getElement(CardElement);
+        if (!card) {
+            setErrorMessage('Payment form is not ready yet. Please try again.');
+            return;
+        }
+        setIsSubmitting(true);
+        setErrorMessage(null);
+        if (intentType === 'setup') {
+            const result = await stripe.confirmCardSetup(clientSecret, {
+                payment_method: {
+                    card,
+                },
+            });
+            if (result.error) {
+                setErrorMessage(result.error.message || 'Payment failed. Please try again.');
+                setIsSubmitting(false);
+                return;
+            }
+            if (result.setupIntent?.status === 'succeeded') {
+                onPaymentSucceeded();
+            }
+        }
+        else {
+            const result = await stripe.confirmCardPayment(clientSecret, {
+                payment_method: {
+                    card,
+                },
+            });
+            if (result.error) {
+                setErrorMessage(result.error.message || 'Payment failed. Please try again.');
+                setIsSubmitting(false);
+                return;
+            }
+            if (result.paymentIntent?.status === 'succeeded') {
+                onPaymentSucceeded();
+            }
+        }
+        setIsSubmitting(false);
+    }, [clientSecret, elements, onPaymentSucceeded, stripe]);
+    return (_jsxs(Box, { as: "form", onSubmit: handleSubmit, sx: { display: 'grid', gap: 3 }, children: [_jsx(CardElement, { options: cardOptions, onReady: element => {
+                    try {
+                        element.focus();
+                    }
+                    catch {
+                        // no-op: focus may fail if the element is unmounted.
+                    }
+                } }), errorMessage && _jsx(Flash, { variant: "danger", children: errorMessage }), _jsx(Button, { variant: "primary", type: "submit", disabled: !stripe || isSubmitting, children: isSubmitting ? 'Processing payment...' : 'Pay now' })] }));
+}
 /**
  * Stripe checkout.
  */
-export function StripeCheckout({ checkoutPortal, }) {
-    const { useCreateCheckoutSession, useStripePrices } = useCache();
+export function StripeCheckout({ checkoutPortal, appearance, accountUid, showStatusUsageSummary = false, onCheckoutSuccess, }) {
+    const { useCreateTopUpPaymentIntent, useCreateSubscriptionPaymentIntent, useSubscriptionPlans, useTopUpPrices, useSubscriptionStatus, useCancelSubscription, useResumeSubscription, } = useCache();
     const [stripe, setStripe] = useState(null);
-    const [components, setComponents] = useState(null);
-    const [items, setItems] = useState(null);
+    const [paymentClientSecret, setPaymentClientSecret] = useState(null);
     const [product, setProduct] = useState(null);
+    const [subscriptionPlan, setSubscriptionPlan] = useState(null);
     const [checkout, setCheckout] = useState(false);
+    const [checkoutType, setCheckoutType] = useState('topup');
+    const [cancelViewOpen, setCancelViewOpen] = useState(false);
+    const [isConfirmingCancel, setIsConfirmingCancel] = useState(false);
+    const [isResumingTransition, setIsResumingTransition] = useState(false);
+    const [paymentMessage, setPaymentMessage] = useState(null);
+    const [resumeConfirmationMessage, setResumeConfirmationMessage] = useState(null);
+    const [isReturningFromCheckout, setIsReturningFromCheckout] = useState(false);
+    const [topUpConfirmation, setTopUpConfirmation] = useState(null);
+    const [pendingTopUpTarget, setPendingTopUpTarget] = useState(null);
+    const topUpPurchaseRef = useRef(null);
     // Get Stripe prices using TanStack Query hook
-    const { data: pricesData } = useStripePrices();
-    // Update items when prices data changes
-    useEffect(() => {
-        if (pricesData) {
-            setItems(pricesData);
+    const { data: pricesData, isPending: isTopUpPricesPending, isError: isTopUpPricesError, error: topUpPricesError, } = useTopUpPrices();
+    const items = useMemo(() => {
+        if (Array.isArray(pricesData)) {
+            return pricesData;
         }
+        return [];
     }, [pricesData]);
+    const sortedTopUpItems = useMemo(() => [...(items ?? [])].sort((left, right) => Number(left.amount || 0) - Number(right.amount || 0)), [items]);
+    const { data: plansData } = useSubscriptionPlans({ accountUid });
+    const plans = useMemo(() => plansData ?? [], [plansData]);
+    const { data: subscriptionResp, refetch: refetchSubscriptionStatus, isFetching: isSubscriptionStatusRefreshing, } = useSubscriptionStatus({ accountUid });
+    const cancelSubscriptionMutation = useCancelSubscription({ accountUid });
+    const resumeSubscriptionMutation = useResumeSubscription({ accountUid });
     // Get checkout session mutation
-    const checkoutSessionMutation = useCreateCheckoutSession();
-    // Load stripe components.
-    useEffect(() => {
-        import('@stripe/react-stripe-js').then(module => {
-            setComponents(module);
-        });
-    }, []);
+    const topUpPaymentIntentMutation = useCreateTopUpPaymentIntent({
+        accountUid,
+    });
+    const subscriptionPaymentIntentMutation = useCreateSubscriptionPaymentIntent({
+        accountUid,
+    });
     // Load stripe API
     useEffect(() => {
         if (checkoutPortal?.metadata?.stripe_key) {
@@ -41,51 +224,929 @@ export function StripeCheckout({ checkoutPortal, }) {
             });
         }
     }, [checkoutPortal?.metadata?.stripe_key]);
-    const fetchClientSecret = useCallback(async () => {
-        const location = document.location;
-        // Create a Checkout Session using TanStack Query mutation
-        const result = await checkoutSessionMutation.mutateAsync({
-            product,
-            location,
-        });
-        return result;
-    }, [checkoutSessionMutation, product]);
-    const options = { fetchClientSecret };
+    const paymentOptions = useMemo(() => {
+        if (!paymentClientSecret) {
+            return null;
+        }
+        return {
+            clientSecret: paymentClientSecret,
+            ...(appearance ? { appearance } : {}),
+        };
+    }, [appearance, paymentClientSecret]);
+    const elementsAppearanceKey = useMemo(() => {
+        if (!appearance) {
+            return 'default';
+        }
+        try {
+            return JSON.stringify(appearance);
+        }
+        catch {
+            return String(appearance?.theme ?? 'default');
+        }
+    }, [appearance]);
+    const onPaymentSucceeded = useCallback(async () => {
+        setCheckout(false);
+        setPaymentClientSecret(null);
+        setProduct(null);
+        setSubscriptionPlan(null);
+        setPaymentMessage(null);
+        setIsReturningFromCheckout(true);
+        if (checkoutType === 'resume') {
+            try {
+                const resp = await resumeSubscriptionMutation.mutateAsync();
+                setPaymentMessage(resp?.message || 'Payment confirmed and plan resumed successfully.');
+                onCheckoutSuccess?.({ checkoutType: 'resume' });
+            }
+            catch (error) {
+                setPaymentMessage(error instanceof Error
+                    ? error.message
+                    : 'Payment confirmed, but unable to resume your plan right now.');
+            }
+            setIsReturningFromCheckout(false);
+            return;
+        }
+        if (checkoutType === 'subscription') {
+            // Poll plan status briefly so the UI flips to paid state as soon
+            // as Stripe + backend snapshot are ready.
+            for (let attempt = 0; attempt < 5; attempt += 1) {
+                try {
+                    await refetchSubscriptionStatus();
+                }
+                catch {
+                    // Keep the success message even if refresh fails transiently.
+                }
+                if (attempt < 4) {
+                    await new Promise(resolve => setTimeout(resolve, 1200));
+                }
+            }
+            setPaymentMessage('Plan payment confirmed. Your plan status may take a few seconds to refresh.');
+            onCheckoutSuccess?.({ checkoutType: 'subscription' });
+        }
+        else {
+            const topUpPurchase = topUpPurchaseRef.current;
+            const purchasedCredits = topUpPurchase?.purchasedCredits || 0;
+            if (topUpPurchase && topUpPurchase.purchasedCredits > 0) {
+                const targetWalletBalance = topUpPurchase.oldWalletBalance + topUpPurchase.purchasedCredits;
+                setTopUpConfirmation({
+                    purchasedCredits: topUpPurchase.purchasedCredits,
+                    oldWalletBalance: topUpPurchase.oldWalletBalance,
+                    newWalletBalance: targetWalletBalance,
+                    oldAvailableCredits: topUpPurchase.oldAvailableCredits,
+                    newAvailableCredits: topUpPurchase.oldAvailableCredits + topUpPurchase.purchasedCredits,
+                });
+                setPendingTopUpTarget({
+                    targetWalletBalance,
+                });
+            }
+            for (let attempt = 0; attempt < 5; attempt += 1) {
+                try {
+                    await refetchSubscriptionStatus();
+                }
+                catch {
+                    // Keep confirmation visible even if refresh fails transiently.
+                }
+                if (attempt < 4) {
+                    await new Promise(resolve => setTimeout(resolve, 800));
+                }
+            }
+            setPaymentMessage('Payment confirmed. Credits update may take a few seconds.');
+            onCheckoutSuccess?.({
+                checkoutType: 'topup',
+                purchasedCredits,
+            });
+            topUpPurchaseRef.current = null;
+        }
+        setIsReturningFromCheckout(false);
+    }, [
+        checkoutType,
+        onCheckoutSuccess,
+        refetchSubscriptionStatus,
+        resumeSubscriptionMutation,
+    ]);
+    const subscription = subscriptionResp?.plan || null;
+    const availablePlans = useMemo(() => {
+        const byId = new Map();
+        const add = (plan) => {
+            const id = plan?.id;
+            if (!id || typeof id !== 'string') {
+                return;
+            }
+            byId.set(id, {
+                id,
+                name: String(plan?.name || id),
+                amount: Number(plan?.amount || 0),
+                currency: String(plan?.currency || 'usd'),
+                interval: plan?.interval,
+                included_runs: typeof plan?.included_runs === 'number'
+                    ? plan.included_runs
+                    : undefined,
+            });
+        };
+        plans.forEach(add);
+        (subscriptionResp?.available_plans || []).forEach(add);
+        return Array.from(byId.values());
+    }, [plans, subscriptionResp?.available_plans]);
+    const subscriptionStatus = subscription?.status || 'unknown';
+    const normalizedSubscriptionStatus = String(subscriptionStatus).toLowerCase();
+    const isPendingSubscriptionCheckout = normalizedSubscriptionStatus === 'incomplete';
+    const rawCurrentSubscriptionPlan = isPendingSubscriptionCheckout
+        ? 'Free'
+        : subscription?.plan_name || 'Free';
+    const currentSubscriptionPlan = useMemo(() => {
+        const raw = String(rawCurrentSubscriptionPlan || 'Free');
+        const byId = availablePlans.find(plan => plan.id === raw);
+        const resolved = byId?.name || raw;
+        // Always present plan names with a trailing " Plan" for consistency with
+        // other surfaces (e.g. /settings/plans/overview).
+        return /\bplan$/i.test(resolved) ? resolved : `${resolved} Plan`;
+    }, [availablePlans, rawCurrentSubscriptionPlan]);
+    const currentPlanDetails = useMemo(() => {
+        const byPlanId = availablePlans.find(plan => plan.id && plan.id === subscription?.plan_id);
+        if (byPlanId) {
+            return byPlanId;
+        }
+        const normalizedCurrentPlanName = String(currentSubscriptionPlan).toLowerCase();
+        return (availablePlans.find(plan => plan.name &&
+            normalizedCurrentPlanName.includes(plan.name.toLowerCase())) || null);
+    }, [availablePlans, currentSubscriptionPlan, subscription?.plan_id]);
+    const currentPlanPriceLabel = useMemo(() => {
+        if (!currentPlanDetails) {
+            return 'N/A';
+        }
+        const amount = Number(currentPlanDetails.amount || 0);
+        const currency = currentPlanDetails.currency || 'usd';
+        const formatted = new Intl.NumberFormat(undefined, {
+            style: 'currency',
+            currency,
+        }).format(amount / 100);
+        return `${formatted}${currentPlanDetails.interval ? ` / ${currentPlanDetails.interval}` : ''}`;
+    }, [currentPlanDetails]);
+    const subscriptionPeriodEndLabel = useMemo(() => {
+        const rawEnd = subscription?.current_period_end;
+        if (!rawEnd) {
+            return 'N/A';
+        }
+        const parsed = new Date(rawEnd);
+        if (Number.isNaN(parsed.getTime())) {
+            return String(rawEnd);
+        }
+        return new Intl.DateTimeFormat(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+        }).format(parsed);
+    }, [subscription?.current_period_end]);
+    const subscriptionPortalUrl = subscriptionResp?.portal?.url || checkoutPortal?.url;
+    const isStripeTestConfiguration = useMemo(() => {
+        const stripeKey = String(checkoutPortal?.metadata?.stripe_key || '').trim();
+        if (stripeKey.startsWith('pk_test_')) {
+            return true;
+        }
+        const portalUrl = String(checkoutPortal?.url || '').toLowerCase();
+        return portalUrl.includes('/test_');
+    }, [checkoutPortal]);
+    const isCancellationScheduled = Boolean(subscription?.cancel_at_period_end);
+    const isIncompleteSubscription = normalizedSubscriptionStatus === 'incomplete';
+    const displaySubscriptionStatus = isCancellationScheduled
+        ? 'cancelled'
+        : String(currentSubscriptionPlan).toLowerCase().includes('free') ||
+            String(currentSubscriptionPlan).toLowerCase().includes('trial') ||
+            String(currentSubscriptionPlan).toLowerCase() === 'unknown' ||
+            String(currentSubscriptionPlan).toLowerCase() === 'none'
+            ? null
+            : normalizedSubscriptionStatus &&
+                normalizedSubscriptionStatus !== 'unknown'
+                ? String(subscriptionStatus).replaceAll('_', ' ')
+                : null;
+    const normalizedPlanName = String(currentSubscriptionPlan).toLowerCase();
+    const planIncludedRuns = asPositiveNumber(plans.find(plan => plan.name && normalizedPlanName.includes(plan.name.toLowerCase()))?.included_runs);
+    const defaultIncludedRuns = planIncludedRuns ||
+        Object.entries(PLAN_INCLUDED_RUNS_DEFAULTS).find(([planKey]) => normalizedPlanName.includes(planKey))?.[1] ||
+        null;
+    const resolvedIncludedRuns = asPositiveNumber(subscription?.included_runs) || defaultIncludedRuns;
+    const usedRuns = asNonNegativeNumber(subscription?.current_runs) ||
+        asNonNegativeNumber(subscription?.used_runs) ||
+        0;
+    const walletIsQuota = Boolean(subscription?.wallet_is_quota);
+    const walletBalanceRaw = asNonNegativeNumber(subscription?.wallet_balance) || 0;
+    const walletQuota = asPositiveNumber(subscription?.wallet_quota);
+    const usedCredits = asNonNegativeNumber(subscription?.current_credits) ||
+        asNonNegativeNumber(subscription?.used_credits) ||
+        0;
+    const includedCredits = walletIsQuota
+        ? (walletQuota ?? 0)
+        : Math.max(0, usedCredits + walletBalanceRaw);
+    const remainingCredits = walletIsQuota
+        ? Math.max(0, includedCredits - usedCredits)
+        : Math.max(0, walletBalanceRaw);
+    const runsTotal = resolvedIncludedRuns ?? 0;
+    const runsSegments = useMemo(() => buildUsageSegments(usedRuns, runsTotal), [usedRuns, runsTotal]);
+    const periodStartDate = useMemo(() => {
+        const rawStart = subscription?.current_period_start;
+        if (!rawStart) {
+            return null;
+        }
+        const parsed = new Date(rawStart);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    }, [subscription?.current_period_start]);
+    const periodEndDate = useMemo(() => {
+        const rawEnd = subscription?.current_period_end;
+        if (!rawEnd) {
+            return null;
+        }
+        const parsed = new Date(rawEnd);
+        return Number.isNaN(parsed.getTime()) ? null : parsed;
+    }, [subscription?.current_period_end]);
+    const periodProgress = useMemo(() => {
+        if (!periodStartDate || !periodEndDate) {
+            return null;
+        }
+        const startMs = periodStartDate.getTime();
+        const endMs = periodEndDate.getTime();
+        if (endMs <= startMs) {
+            return null;
+        }
+        const nowMs = Date.now();
+        const totalMs = endMs - startMs;
+        const elapsedMs = Math.min(Math.max(nowMs - startMs, 0), totalMs);
+        const remainingMs = Math.max(endMs - nowMs, 0);
+        const msPerDay = 24 * 60 * 60 * 1000;
+        const totalDays = Math.max(1, Math.ceil(totalMs / msPerDay));
+        const elapsedDays = Math.min(totalDays, Math.floor(elapsedMs / msPerDay));
+        const remainingDays = Math.max(0, Math.ceil(remainingMs / msPerDay));
+        return {
+            elapsedPct: (elapsedMs / totalMs) * 100,
+            remainingPct: (remainingMs / totalMs) * 100,
+            totalDays,
+            elapsedDays,
+            remainingDays,
+        };
+    }, [periodEndDate, periodStartDate]);
+    const walletBalance = walletIsQuota
+        ? Math.max(0, remainingCredits)
+        : Math.max(0, walletBalanceRaw);
+    const displayedWalletBalance = pendingTopUpTarget
+        ? Math.max(walletBalance, pendingTopUpTarget.targetWalletBalance)
+        : walletBalance;
+    const displayedAvailableCredits = pendingTopUpTarget
+        ? Math.max(remainingCredits, pendingTopUpTarget.targetWalletBalance)
+        : remainingCredits;
+    const isRunsOverQuota = runsTotal > 0 && usedRuns > runsTotal;
+    const hasBillablePlan = useMemo(() => {
+        const normalizedPlan = String(currentSubscriptionPlan).toLowerCase();
+        const freeLike = normalizedPlan.includes('free') ||
+            normalizedPlan.includes('trial') ||
+            normalizedPlan === 'unknown' ||
+            normalizedPlan === 'none';
+        return !freeLike;
+    }, [currentSubscriptionPlan]);
+    const isPaidSubscription = useMemo(() => {
+        const normalizedStatus = String(subscriptionStatus).toLowerCase();
+        if (!hasBillablePlan) {
+            return false;
+        }
+        if (normalizedStatus.includes('incomplete') ||
+            normalizedStatus.includes('canceled') ||
+            normalizedStatus.includes('cancelled') ||
+            normalizedStatus.includes('free') ||
+            normalizedStatus === 'unknown') {
+            return false;
+        }
+        return ['active', 'trialing', 'past_due', 'paid'].includes(normalizedStatus);
+    }, [hasBillablePlan, subscriptionStatus]);
+    const canCancelSubscription = useMemo(() => {
+        if (!hasBillablePlan) {
+            return false;
+        }
+        const status = String(subscriptionStatus).toLowerCase();
+        const nonCancelable = isCancellationScheduled ||
+            status.includes('incomplete_expired') ||
+            status.includes('canceled') ||
+            status.includes('cancelled') ||
+            status.includes('free') ||
+            status === 'unknown';
+        return !nonCancelable;
+    }, [hasBillablePlan, subscriptionStatus, isCancellationScheduled]);
+    const isCancelActionPending = cancelSubscriptionMutation.isPending || isConfirmingCancel;
+    const isResumeActionPending = resumeSubscriptionMutation.isPending || isResumingTransition;
+    const showResumeAction = isCancellationScheduled && !isCancelActionPending;
+    useEffect(() => {
+        if (isResumingTransition && !isCancellationScheduled) {
+            setIsResumingTransition(false);
+        }
+    }, [isCancellationScheduled, isResumingTransition]);
+    useEffect(() => {
+        if (isPaidSubscription && paymentMessage) {
+            setPaymentMessage(null);
+        }
+    }, [isPaidSubscription, paymentMessage]);
+    useEffect(() => {
+        if (!isPaidSubscription && !subscriptionPlan && plans.length > 0) {
+            setSubscriptionPlan(plans[0]);
+        }
+    }, [isPaidSubscription, plans, subscriptionPlan]);
+    useEffect(() => {
+        if (!product && sortedTopUpItems.length > 0) {
+            const secondCard = sortedTopUpItems.length > 1 ? sortedTopUpItems[1] : sortedTopUpItems[0];
+            setProduct(secondCard);
+        }
+    }, [product, sortedTopUpItems]);
+    useEffect(() => {
+        if (!pendingTopUpTarget) {
+            return;
+        }
+        if (walletBalance >= pendingTopUpTarget.targetWalletBalance) {
+            setPendingTopUpTarget(null);
+        }
+    }, [pendingTopUpTarget, walletBalance]);
+    // Auto-open the in-app cancel/downgrade view when the page is opened with
+    // `?action=downgrade` (e.g. from the Plan Overview "Downgrade" CTA).
+    // When opened with `?action=resume`, immediately trigger the resume flow.
+    const autoActionTriggeredRef = useRef(false);
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (autoActionTriggeredRef.current) {
+            return;
+        }
+        try {
+            const params = new URLSearchParams(window.location.search);
+            const action = params.get('action');
+            if (action === 'downgrade' && isPaidSubscription) {
+                autoActionTriggeredRef.current = true;
+                setCancelViewOpen(true);
+            }
+            else if (action === 'resume' && isCancellationScheduled) {
+                autoActionTriggeredRef.current = true;
+                void onResumeSubscription();
+            }
+        }
+        catch (_error) {
+            // Ignore malformed URLs.
+        }
+    }, [isPaidSubscription, isCancellationScheduled]);
+    const startCheckout = useCallback(async () => {
+        if (!product) {
+            return;
+        }
+        topUpPurchaseRef.current = {
+            purchasedCredits: Math.max(0, Number(product.credits || 0)),
+            oldWalletBalance: displayedWalletBalance,
+            oldAvailableCredits: displayedAvailableCredits,
+        };
+        setTopUpConfirmation(null);
+        setPaymentMessage(null);
+        setCheckoutType('topup');
+        setCheckout(true);
+        try {
+            const clientSecret = await topUpPaymentIntentMutation.mutateAsync({
+                product,
+            });
+            if (!clientSecret) {
+                setPaymentClientSecret(null);
+                setCheckout(false);
+                setPaymentMessage('Unable to initialize Stripe checkout. Please try again.');
+                return;
+            }
+            setPaymentClientSecret(clientSecret);
+        }
+        catch (error) {
+            const detail = error instanceof Error
+                ? error.message
+                : 'Unable to initialize Stripe checkout. Please try again.';
+            topUpPurchaseRef.current = null;
+            setPaymentClientSecret(null);
+            setCheckout(false);
+            setPaymentMessage(detail);
+        }
+    }, [
+        displayedAvailableCredits,
+        displayedWalletBalance,
+        topUpPaymentIntentMutation,
+        product,
+    ]);
+    const startSubscriptionCheckout = useCallback(async (planOverride) => {
+        const selectedPlan = planOverride ?? subscriptionPlan;
+        if (!selectedPlan) {
+            setPaymentMessage('Select a monthly plan first.');
+            return;
+        }
+        setPaymentMessage(null);
+        try {
+            const clientSecret = await subscriptionPaymentIntentMutation.mutateAsync({
+                plan: selectedPlan,
+            });
+            if (!clientSecret) {
+                setPaymentClientSecret(null);
+                setCheckout(false);
+                setPaymentMessage('Unable to initialize Stripe checkout. Please try again.');
+                return;
+            }
+            setSubscriptionPlan(selectedPlan);
+            setPaymentClientSecret(clientSecret);
+            setCheckoutType('subscription');
+            setCheckout(true);
+        }
+        catch (error) {
+            const detail = error instanceof Error
+                ? error.message
+                : 'Unable to initialize Stripe checkout. Please try again.';
+            setPaymentClientSecret(null);
+            setCheckout(false);
+            setPaymentMessage(detail);
+        }
+    }, [subscriptionPaymentIntentMutation, subscriptionPlan]);
+    const pendingSubscriptionPlan = useMemo(() => {
+        const teamLikePlan = plans.find(plan => String(plan?.name || '')
+            .toLowerCase()
+            .includes('team'));
+        return teamLikePlan || plans[0] || null;
+    }, [plans]);
+    const startPendingSubscriptionCheckout = useCallback(() => {
+        if (!pendingSubscriptionPlan) {
+            setPaymentMessage('Select a monthly plan first.');
+            return;
+        }
+        void startSubscriptionCheckout(pendingSubscriptionPlan);
+    }, [pendingSubscriptionPlan, startSubscriptionCheckout]);
+    const openPortal = useCallback((url) => {
+        if (!url) {
+            return;
+        }
+        window.open(url, '_blank', 'noreferrer');
+    }, []);
+    const cancelStripeCheckout = useCallback(() => {
+        setCheckout(false);
+        setPaymentClientSecret(null);
+        setPaymentMessage(null);
+    }, []);
+    const onCancelSubscription = useCallback(() => {
+        setPaymentMessage(null);
+        setResumeConfirmationMessage(null);
+        setCancelViewOpen(true);
+    }, []);
+    const onAbortCancelView = useCallback(() => {
+        setCancelViewOpen(false);
+    }, []);
+    const onConfirmCancelSubscription = useCallback(async () => {
+        setPaymentMessage(null);
+        setIsConfirmingCancel(true);
+        try {
+            const resp = await cancelSubscriptionMutation.mutateAsync();
+            if (resp?.success === false) {
+                throw new Error(resp?.message || 'Unable to update your plan right now.');
+            }
+            const responseStatus = String(resp?.status || '').toLowerCase();
+            const responseCancelAtPeriodEnd = Boolean(resp?.cancel_at_period_end);
+            const isNowCanceled = responseStatus.includes('canceled') ||
+                responseStatus.includes('cancelled');
+            const datedMessage = responseCancelAtPeriodEnd && subscriptionPeriodEndLabel
+                ? `Plan will switch to Free at the end of the current period on ${subscriptionPeriodEndLabel}.`
+                : null;
+            setPaymentMessage((isNowCanceled ? 'Pending plan change canceled.' : datedMessage) ||
+                resp?.message ||
+                'Plan change requested successfully.');
+            setCancelViewOpen(false);
+            setIsConfirmingCancel(false);
+            // Refresh plan status in the background so UI feedback is immediate.
+            void (async () => {
+                for (let attempt = 0; attempt < 5; attempt += 1) {
+                    try {
+                        await refetchSubscriptionStatus();
+                    }
+                    catch {
+                        // Ignore transient refetch errors and keep trying.
+                    }
+                    if (attempt < 4) {
+                        await new Promise(resolve => setTimeout(resolve, 800));
+                    }
+                }
+            })();
+        }
+        catch (error) {
+            setIsConfirmingCancel(false);
+            setPaymentMessage(error instanceof Error
+                ? error.message
+                : 'Unable to update your plan right now.');
+        }
+    }, [
+        cancelSubscriptionMutation,
+        refetchSubscriptionStatus,
+        subscriptionPeriodEndLabel,
+    ]);
+    const onResumeSubscription = useCallback(async () => {
+        setPaymentMessage(null);
+        setResumeConfirmationMessage(null);
+        setIsResumingTransition(true);
+        try {
+            const resp = await resumeSubscriptionMutation.mutateAsync();
+            if (resp?.success === false) {
+                throw new Error(resp?.message || 'Unable to resume your plan right now.');
+            }
+            setCheckout(false);
+            setPaymentClientSecret(null);
+            setPaymentMessage(null);
+            const periodEndText = subscriptionPeriodEndLabel && subscriptionPeriodEndLabel !== 'N/A'
+                ? ` through ${subscriptionPeriodEndLabel}`
+                : '';
+            setResumeConfirmationMessage(`Resume complete. Your plan remains active${periodEndText} and will renew automatically after that date.`);
+            setIsResumingTransition(false);
+            // Refresh plan status in the background so success feedback appears fast.
+            void (async () => {
+                for (let attempt = 0; attempt < 5; attempt += 1) {
+                    try {
+                        await refetchSubscriptionStatus();
+                    }
+                    catch {
+                        // Ignore transient refetch errors and keep trying.
+                    }
+                    if (attempt < 4) {
+                        await new Promise(resolve => setTimeout(resolve, 800));
+                    }
+                }
+            })();
+        }
+        catch (error) {
+            setIsResumingTransition(false);
+            setPaymentMessage(error instanceof Error
+                ? error.message
+                : 'Unable to resume your plan right now.');
+        }
+    }, [
+        refetchSubscriptionStatus,
+        resumeSubscriptionMutation,
+        subscriptionPeriodEndLabel,
+    ]);
+    const onRefreshSubscriptionStatus = useCallback(async () => {
+        setPaymentMessage(null);
+        try {
+            await refetchSubscriptionStatus();
+            setPaymentMessage('Plan status refreshed.');
+        }
+        catch (error) {
+            setPaymentMessage(error instanceof Error
+                ? error.message
+                : 'Unable to refresh plan status right now.');
+        }
+    }, [refetchSubscriptionStatus]);
+    const selectedCheckoutLabel = useMemo(() => {
+        if (checkoutType === 'subscription' && subscriptionPlan) {
+            const amount = new Intl.NumberFormat(undefined, {
+                style: 'currency',
+                currency: subscriptionPlan.currency,
+            }).format((subscriptionPlan.amount || 0) / 100);
+            return `${subscriptionPlan.name} (${amount}${subscriptionPlan.interval ? ` / ${subscriptionPlan.interval}` : ''})`;
+        }
+        if (checkoutType === 'topup' && product) {
+            const amount = new Intl.NumberFormat(undefined, {
+                style: 'currency',
+                currency: product.currency,
+            }).format((product.amount || 0) / 100);
+            return `${product.name} (${amount}, ${product.credits} credits)`;
+        }
+        return null;
+    }, [checkoutType, product, subscriptionPlan]);
+    const sectionTitleSx = {
+        fontSize: 2,
+        fontWeight: 'bold',
+        marginBottom: 'var(--stack-gap-normal)',
+    };
+    const shouldShowMonthlySubscriptionSection = !isPaidSubscription || isIncompleteSubscription;
+    const monthlySubscriptionSection = shouldShowMonthlySubscriptionSection ? (_jsxs(Box, { sx: {
+            borderTop: 'none',
+            paddingTop: 0,
+        }, children: [_jsx(Text, { as: "h3", sx: sectionTitleSx, children: "Choose a monthly plan" }), isIncompleteSubscription ? (_jsxs(_Fragment, { children: [_jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "A pending plan change already exists. Complete payment or cancel it from the billing portal before creating a new one." }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 'var(--stack-gap-condensed)',
+                            flexWrap: 'wrap',
+                            marginTop: 'var(--stack-gap-normal)',
+                        }, children: [_jsx(Button, { variant: "primary", onClick: startPendingSubscriptionCheckout, disabled: subscriptionPaymentIntentMutation.isPending ||
+                                    checkout ||
+                                    !pendingSubscriptionPlan, children: subscriptionPaymentIntentMutation.isPending
+                                    ? 'Preparing checkout...'
+                                    : 'Continue pending payment' }), _jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Cancel pending plan change" })] })] })) : !isPaidSubscription ? (_jsxs(_Fragment, { children: [_jsxs(Box, { role: "radiogroup", sx: {
+                            display: 'grid',
+                            gap: 'var(--stack-gap-condensed)',
+                            maxHeight: '260px',
+                            overflowY: 'auto',
+                            marginBottom: 'var(--stack-gap-normal)',
+                        }, children: [plans.map(plan => (_jsx(Box, { role: "radio", "aria-labelledby": `subscription-plan-${plan.id}`, "aria-checked": subscriptionPlan?.id === plan.id, onClick: () => setSubscriptionPlan(plan), sx: {
+                                    borderStyle: 'solid',
+                                    borderRadius: 'var(--borderRadius-medium)',
+                                    borderWidth: 'var(--borderWidth-thick)',
+                                    borderColor: subscriptionPlan?.id === plan.id
+                                        ? 'var(--borderColor-accent-emphasis)'
+                                        : 'var(--borderColor-default)',
+                                    padding: 'var(--stack-padding-condensed)',
+                                    cursor: 'pointer',
+                                }, children: _jsxs(FormControl, { sx: { alignItems: 'center' }, children: [_jsx(FormControl.Label, { id: `subscription-plan-${plan.id}`, sx: { alignSelf: 'center' }, children: plan.name }), _jsxs(Text, { as: "p", children: [new Intl.NumberFormat(undefined, {
+                                                    style: 'currency',
+                                                    currency: plan.currency,
+                                                }).format((plan.amount || 0) / 100), plan.interval ? ` / ${plan.interval}` : ''] }), typeof plan.included_runs === 'number' && (_jsxs(Text, { as: "p", children: [plan.included_runs, " included runs"] }))] }) }, plan.id))), plans.length === 0 && (_jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "No monthly plans available right now." }))] }), _jsx(Button, { variant: "primary", onClick: () => void startSubscriptionCheckout(), disabled: !subscriptionPlan ||
+                            subscriptionPaymentIntentMutation.isPending ||
+                            checkout, children: subscriptionPaymentIntentMutation.isPending
+                            ? 'Preparing Team plan checkout...'
+                            : 'Update to Team Plan' })] })) : null] })) : null;
+    const topUpSection = (_jsxs(Box, { children: [_jsx(Text, { as: "h3", sx: sectionTitleSx, children: "Topup your wallet with credits" }), _jsx(Box, { role: "radiogroup", sx: {
+                    display: 'grid',
+                    gap: 'var(--stack-gap-normal)',
+                    gridTemplateColumns: Array(sortedTopUpItems.length)
+                        .fill('1fr')
+                        .join(' '),
+                    padding: 0,
+                    marginBottom: 'var(--stack-gap-normal)',
+                }, children: sortedTopUpItems.map(item => (_jsx(Box, { role: "radio", "aria-labelledby": `checkout-price-${item.id}`, "aria-checked": product?.id === item.id, onClick: () => {
+                        setProduct(item);
+                    }, sx: {
+                        borderStyle: 'solid',
+                        borderRadius: 'var(--borderRadius-medium)',
+                        borderWidth: 'var(--borderWidth-thick)',
+                        borderColor: product?.id === item.id
+                            ? 'var(--borderColor-accent-emphasis)'
+                            : 'var(--borderColor-default)',
+                        padding: 'var(--stack-padding-condensed)',
+                        cursor: 'pointer',
+                    }, children: _jsxs(FormControl, { sx: {
+                            alignItems: 'center',
+                        }, children: [_jsx(FormControl.Label, { id: `checkout-price-${item.id}`, sx: { alignSelf: 'center' }, children: item.name }), _jsx(Text, { as: "p", children: new Intl.NumberFormat(undefined, {
+                                    style: 'currency',
+                                    currency: item.currency,
+                                }).format(item.amount / 100) }), _jsxs(Text, { as: "p", children: [item.credits, " credits"] })] }) }, item.id))) }), _jsx(Button, { variant: "primary", onClick: () => {
+                    void startCheckout();
+                }, disabled: product === null || topUpPaymentIntentMutation.isPending || checkout, sx: { float: 'right' }, children: topUpPaymentIntentMutation.isPending
+                    ? 'Preparing top-up checkout...'
+                    : 'Checkout' }), topUpConfirmation ? (_jsxs(Flash, { variant: "success", sx: { mt: 3 }, children: [_jsxs(Text, { as: "p", sx: { fontWeight: 'bold' }, children: ["Top-up confirmed: +", topUpConfirmation.purchasedCredits.toLocaleString(), " credits"] }), _jsx(Text, { as: "p", children: `Wallet balance: ${topUpConfirmation.oldWalletBalance.toLocaleString()} to ${topUpConfirmation.newWalletBalance.toLocaleString()}` }), _jsx(Text, { as: "p", children: `Available credits: ${topUpConfirmation.oldAvailableCredits.toLocaleString()} to ${topUpConfirmation.newAvailableCredits.toLocaleString()}` })] })) : null] }));
+    const topCards = showStatusUsageSummary && !isPaidSubscription ? (_jsx(Box, { sx: {
+            marginBottom: 'var(--stack-gap-normal)',
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 'var(--borderRadius-medium)',
+            backgroundColor: 'canvas.default',
+            padding: 'var(--stack-padding-normal)',
+            display: 'grid',
+            gap: 'var(--stack-gap-normal)',
+        }, children: _jsx(Box, { sx: {
+                display: 'grid',
+                gap: 'var(--stack-gap-normal)',
+                gridTemplateColumns: ['1fr'],
+                alignItems: 'start',
+            }, children: _jsxs(Box, { children: [_jsx(Text, { as: "h3", sx: {
+                            fontWeight: 'bold',
+                            marginBottom: 'var(--stack-gap-condensed)',
+                        }, children: "Plan status" }), _jsxs(Text, { as: "p", children: ["Plan: ", String(currentSubscriptionPlan)] }), isPendingSubscriptionCheckout && (_jsx(Flash, { variant: "warning", sx: { marginTop: 'var(--stack-gap-condensed)' }, children: "Upgrade pending payment. Your Team plan is not active until card payment succeeds." })), currentPlanPriceLabel !== 'N/A' && (_jsxs(Text, { as: "p", children: ["Price: ", currentPlanPriceLabel] })), displaySubscriptionStatus && (_jsxs(Text, { as: "p", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Status: ", displaySubscriptionStatus] })), _jsxs(Box, { sx: {
+                            marginBottom: 'var(--stack-gap-normal)',
+                            border: '1px solid',
+                            borderColor: 'border.muted',
+                            borderRadius: 'var(--borderRadius-medium)',
+                            backgroundColor: 'canvas.subtle',
+                            padding: 'var(--stack-padding-condensed)',
+                            display: 'grid',
+                            gap: 'var(--stack-gap-condensed)',
+                        }, children: [_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    gap: 2,
+                                }, children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: "Current usage" }), _jsx(Label, { size: "small", children: String(currentSubscriptionPlan) })] }), _jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: {
+                                            marginBottom: 'var(--stack-gap-condensed)',
+                                            color: isRunsOverQuota ? 'danger.fg' : 'fg.default',
+                                            fontWeight: isRunsOverQuota ? 'bold' : 'normal',
+                                        }, children: ["Runs: ", usedRuns.toLocaleString(), " /", ' ', runsTotal.toLocaleString()] }), _jsxs(ProgressBar, { barSize: "small", "aria-label": "Runs usage", "aria-valuenow": runsSegments.inQuotaPct + runsSegments.overPct, children: [_jsx(ProgressBar.Item, { progress: runsSegments.inQuotaPct, style: {
+                                                    backgroundColor: 'var(--bgColor-success-emphasis)',
+                                                }, "aria-label": `Used in quota: ${runsSegments.inQuotaPct.toFixed(1)}%` }), _jsx(ProgressBar.Item, { progress: runsSegments.remainingPct, style: {
+                                                    backgroundColor: 'var(--bgColor-accent-emphasis)',
+                                                }, "aria-label": `Remaining: ${runsSegments.remainingPct.toFixed(1)}%` }), _jsx(ProgressBar.Item, { progress: runsSegments.overPct, style: {
+                                                    backgroundColor: 'var(--bgColor-danger-emphasis)',
+                                                }, "aria-label": `Over quota: ${runsSegments.overPct.toFixed(1)}%` })] }), _jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 3,
+                                            mt: 1,
+                                            flexWrap: 'wrap',
+                                        }, children: [_jsxs(Box, { sx: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: 1,
+                                                }, children: [_jsx(DotFillIcon, { fill: "var(--bgColor-success-emphasis)" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Used in quota" })] }), _jsxs(Box, { sx: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: 1,
+                                                }, children: [_jsx(DotFillIcon, { fill: "var(--bgColor-accent-emphasis)" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Remaining" })] }), _jsxs(Box, { sx: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: 1,
+                                                }, children: [_jsx(DotFillIcon, { fill: "var(--bgColor-danger-emphasis)" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Over quota" })] })] })] }), periodProgress ? (_jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Usage period days: ", periodProgress.elapsedDays, " /", ' ', periodProgress.totalDays] }), _jsxs(ProgressBar, { barSize: "small", "aria-label": "Usage period progress", "aria-valuenow": periodProgress.elapsedPct, children: [_jsx(ProgressBar.Item, { progress: periodProgress.elapsedPct, style: {
+                                                    backgroundColor: 'var(--bgColor-success-emphasis)',
+                                                }, "aria-label": `Elapsed: ${periodProgress.elapsedPct.toFixed(1)}%` }), _jsx(ProgressBar.Item, { progress: periodProgress.remainingPct, style: {
+                                                    backgroundColor: 'var(--bgColor-accent-emphasis)',
+                                                }, "aria-label": `Remaining: ${periodProgress.remainingPct.toFixed(1)}%` })] }), _jsxs(Text, { as: "p", sx: {
+                                            color: 'fg.muted',
+                                            fontSize: 0,
+                                            marginTop: 'var(--stack-gap-condensed)',
+                                        }, children: [periodProgress.remainingDays, " day(s) remaining in current period"] })] })) : null, _jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Wallet balance: ", displayedWalletBalance.toLocaleString()] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted' }, children: ["Spent credits in current period:", ' ', usedCredits.toLocaleString(undefined, {
+                                                minimumFractionDigits: 2,
+                                                maximumFractionDigits: 2,
+                                            })] }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "Wallet credits are additive on renewal and top-ups." })] })] }), isCancellationScheduled && (_jsxs(Flash, { variant: "warning", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Plan will switch to Free at the end of the current period on", ' ', subscriptionPeriodEndLabel, "."] })), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 'var(--stack-gap-condensed)',
+                            flexWrap: 'wrap',
+                        }, children: [subscriptionPortalUrl && (_jsx(Button, { variant: "default", onClick: () => openPortal(subscriptionPortalUrl), children: "Open Stripe billing portal" })), _jsx(Button, { variant: "default", onClick: () => void onRefreshSubscriptionStatus(), disabled: isSubscriptionStatusRefreshing, children: isSubscriptionStatusRefreshing
+                                    ? 'Refreshing status...'
+                                    : 'Refresh status' }), canCancelSubscription && !cancelViewOpen && (_jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Downgrade to Free Plan" })), isIncompleteSubscription && !cancelViewOpen && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", onClick: startPendingSubscriptionCheckout, disabled: subscriptionPaymentIntentMutation.isPending ||
+                                            checkout ||
+                                            !pendingSubscriptionPlan, children: subscriptionPaymentIntentMutation.isPending
+                                            ? 'Preparing checkout...'
+                                            : 'Continue pending payment' }), _jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Cancel pending plan change" })] })), showResumeAction && (_jsx(Button, { variant: "primary", onClick: () => void onResumeSubscription(), disabled: isResumeActionPending, leadingVisual: () => isResumeActionPending ? _jsx(Spinner, { size: "small" }) : undefined, children: isResumeActionPending ? 'Resuming...' : 'Resume plan' }))] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', marginTop: 'var(--stack-gap-normal)' }, children: ["Next step:", ' ', isCancellationScheduled
+                                ? 'Your plan is already scheduled to switch at period end. You can keep using it until then.'
+                                : isIncompleteSubscription
+                                    ? 'Your payment is pending. Open the in-app cancel view below to cancel this plan change or continue with payment.'
+                                    : isPaidSubscription
+                                        ? 'Keep your plan active. You can top-up credits any time.'
+                                        : 'Top-up credits are available on Free and Team plans.'] }), cancelViewOpen && (_jsxs(Box, { sx: {
+                            marginTop: 'var(--stack-gap-normal)',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 'var(--borderRadius-medium)',
+                            backgroundColor: 'canvas.subtle',
+                            padding: 'var(--stack-padding-normal)',
+                            display: 'grid',
+                            gap: 'var(--stack-gap-condensed)',
+                        }, children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: isIncompleteSubscription
+                                    ? 'Cancel pending plan change'
+                                    : 'Downgrade to Free Plan' }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: isIncompleteSubscription
+                                    ? 'This pending plan change will be canceled immediately.'
+                                    : 'Your plan will switch at the end of the current usage period.' }), _jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    gap: 'var(--stack-gap-condensed)',
+                                    flexWrap: 'wrap',
+                                }, children: [_jsx(Button, { variant: "danger", onClick: () => void onConfirmCancelSubscription(), disabled: isCancelActionPending, leadingVisual: () => isCancelActionPending ? (_jsx(Spinner, { size: "small" })) : undefined, children: isCancelActionPending
+                                            ? isIncompleteSubscription
+                                                ? 'Canceling pending plan change...'
+                                                : 'Waiting for confirmation...'
+                                            : isIncompleteSubscription
+                                                ? 'Confirm cancel pending plan change'
+                                                : 'Confirm downgrade' }), _jsx(Button, { variant: "default", onClick: onAbortCancelView, disabled: isCancelActionPending, children: isIncompleteSubscription
+                                            ? 'Keep pending plan change'
+                                            : 'Keep current plan' })] })] }))] }) }) })) : null;
+    const currentPlanSection = isPaidSubscription ? (_jsx(Box, { sx: {
+            borderRight: ['none', '1px solid'],
+            borderColor: 'border.muted',
+            paddingRight: ['0', 'var(--stack-gap-normal)'],
+            alignSelf: 'stretch',
+        }, children: _jsxs(Box, { sx: {
+                borderTop: 'none',
+                paddingTop: 0,
+                display: 'grid',
+                gap: 'var(--stack-gap-condensed)',
+            }, children: [_jsx(Text, { as: "h3", sx: sectionTitleSx, children: "Current plan" }), _jsx(Text, { as: "h4", sx: { fontSize: 3, fontWeight: 'bold' }, children: String(currentSubscriptionPlan) }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted' }, children: ["You are currently on ", String(currentSubscriptionPlan), "."] }), currentPlanPriceLabel !== 'N/A' && (_jsx(Text, { as: "p", sx: { fontWeight: 'bold', fontSize: 2 }, children: currentPlanPriceLabel })), displaySubscriptionStatus && (_jsx(Box, { sx: { display: 'inline-flex', alignItems: 'center' }, children: _jsx(Label, { variant: "success", children: displaySubscriptionStatus }) })), isCancellationScheduled ? (_jsxs(Flash, { variant: "warning", sx: { marginTop: 'var(--stack-gap-condensed)' }, children: ["Your downgrade to Free Plan is scheduled at period end on", ' ', subscriptionPeriodEndLabel, "."] })) : null, !isCancellationScheduled || showResumeAction ? (_jsx(Text, { as: "p", sx: { color: 'fg.muted', marginTop: 'var(--stack-gap-condensed)' }, children: showResumeAction
+                        ? 'Possible action: Resume Team Plan.'
+                        : 'Possible action: Downgrade to Free Plan.' })) : null, _jsxs(Box, { sx: {
+                        display: 'flex',
+                        gap: 'var(--stack-gap-condensed)',
+                        flexWrap: 'wrap',
+                    }, children: [canCancelSubscription && !cancelViewOpen && (_jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Downgrade to Free Plan" })), showResumeAction && (_jsx(Button, { variant: "primary", onClick: () => void onResumeSubscription(), disabled: isResumeActionPending, leadingVisual: () => isResumeActionPending ? _jsx(Spinner, { size: "small" }) : undefined, children: isResumeActionPending ? 'Resuming...' : 'Resume plan' }))] }), cancelViewOpen && (_jsxs(Box, { sx: {
+                        marginTop: 'var(--stack-gap-normal)',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 'var(--borderRadius-medium)',
+                        backgroundColor: 'canvas.subtle',
+                        padding: 'var(--stack-padding-normal)',
+                        display: 'grid',
+                        gap: 'var(--stack-gap-condensed)',
+                    }, children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: "Downgrade to Free Plan" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "Your plan will switch at the end of the current usage period." }), _jsxs(Box, { sx: {
+                                display: 'flex',
+                                gap: 'var(--stack-gap-condensed)',
+                                flexWrap: 'wrap',
+                            }, children: [_jsx(Button, { variant: "danger", onClick: () => void onConfirmCancelSubscription(), disabled: isCancelActionPending, leadingVisual: () => isCancelActionPending ? _jsx(Spinner, { size: "small" }) : undefined, children: isCancelActionPending
+                                        ? 'Waiting for confirmation...'
+                                        : 'Confirm downgrade' }), _jsx(Button, { variant: "default", onClick: onAbortCancelView, disabled: isCancelActionPending, children: "Keep current plan" })] })] }))] }) })) : null;
     let view = (_jsx(Box, { sx: { minHeight: '40px' }, children: _jsx(Spinner, {}) }));
+    // While the Stripe payment form is shown, disable interaction with the
+    // status / plan picker cards behind it so the only available action is the
+    // "Cancel" button next to the form.
+    const disabledTopCards = topCards ? (_jsx(Box, { "aria-disabled": "true", sx: {
+            pointerEvents: 'none',
+            opacity: 0.5,
+            userSelect: 'none',
+        }, children: topCards })) : null;
     if (checkout) {
-        if (stripe && components) {
-            view = createElement(Box, { id: 'checkout', sx: { flex: '1 1 auto' } }, createElement(components.EmbeddedCheckoutProvider, { stripe, options }, createElement(components.EmbeddedCheckout)));
+        if (stripe && paymentOptions && paymentClientSecret) {
+            view = createElement(Box, { id: 'checkout', sx: { flex: '1 1 auto', display: 'grid', gap: 3 } }, createElement(Box, {
+                sx: {
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 'var(--borderRadius-medium)',
+                    backgroundColor: 'canvas.default',
+                    padding: 'var(--stack-padding-normal)',
+                    display: 'flex',
+                    gap: 'var(--stack-gap-normal)',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    flexWrap: 'wrap',
+                },
+            }, createElement(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                    gap: 2,
+                },
+            }, createElement(Text, { as: 'p' }, 'Selected for checkout:'), selectedCheckoutLabel
+                ? createElement(Label, {
+                    variant: checkoutType === 'topup' ? 'success' : 'accent',
+                }, selectedCheckoutLabel)
+                : null), createElement(Button, { variant: 'default', onClick: cancelStripeCheckout }, 'Cancel')), null, createElement(Elements, {
+                key: `${checkoutType}-${paymentClientSecret ?? 'none'}-${elementsAppearanceKey}`,
+                stripe,
+                options: paymentOptions,
+            }, createElement(Box, {
+                sx: {
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 'var(--borderRadius-medium)',
+                    backgroundColor: 'canvas.default',
+                    padding: 'var(--stack-padding-normal)',
+                    width: '100%',
+                    maxWidth: '720px',
+                    margin: '0 auto',
+                },
+            }, createElement(StripePaymentForm, {
+                clientSecret: paymentClientSecret,
+                intentType: checkoutType === 'resume' ? 'setup' : 'payment',
+                onPaymentSucceeded,
+            }))), disabledTopCards);
+        }
+        else {
+            view = (_jsxs(Box, { sx: { flex: '1 1 auto', display: 'grid', gap: 3 }, children: [_jsxs(Box, { sx: {
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 'var(--borderRadius-medium)',
+                            backgroundColor: 'canvas.default',
+                            padding: 'var(--stack-padding-normal)',
+                            display: 'flex',
+                            gap: 'var(--stack-gap-normal)',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            flexWrap: 'wrap',
+                        }, children: [_jsx(Text, { as: "p", children: "Preparing Stripe checkout\u2026" }), _jsx(Button, { variant: "default", onClick: cancelStripeCheckout, children: "Cancel" })] }), disabledTopCards] }));
         }
     }
-    else if (items) {
+    else if (isReturningFromCheckout) {
+        view = (_jsxs(Box, { sx: { flex: '1 1 auto', display: 'grid', gap: 3 }, children: [_jsxs(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 'var(--borderRadius-medium)',
+                        backgroundColor: 'canvas.default',
+                        padding: 'var(--stack-padding-normal)',
+                        display: 'flex',
+                        gap: 'var(--stack-gap-normal)',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        flexWrap: 'wrap',
+                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { as: "p", children: "Refreshing plan status\u2026" })] }), disabledTopCards] }));
+    }
+    else if (isTopUpPricesPending) {
+        view = (_jsx(Box, { sx: { minHeight: '40px', display: 'grid', placeItems: 'center' }, children: _jsx(Spinner, {}) }));
+    }
+    else if (isTopUpPricesError) {
+        view = (_jsxs(Box, { children: [topCards, _jsx(Flash, { variant: "danger", children: topUpPricesError instanceof Error
+                        ? topUpPricesError.message
+                        : 'Unable to fetch the available products. Please try again later.' })] }));
+    }
+    else {
         view = items.length ? (_jsxs(Box, { sx: { flex: '1 1 auto' }, onKeyDown: event => {
                 if (product && event.key === 'Enter') {
-                    setCheckout(true);
+                    void startCheckout();
                 }
-            }, children: [_jsx(Text, { as: "h3", children: "Choose a credits package" }), _jsx(Box, { role: "radiogroup", sx: {
+            }, children: [_jsxs(Box, { sx: {
+                        marginTop: 'var(--stack-gap-normal)',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 'var(--borderRadius-medium)',
+                        backgroundColor: 'canvas.default',
+                        padding: 'var(--stack-padding-normal)',
                         display: 'grid',
                         gap: 'var(--stack-gap-normal)',
-                        gridTemplateColumns: Array(items.length).fill('1fr').join(' '),
-                        padding: 'var(--stack-padding-normal) 0',
-                    }, children: items.map(item => (_jsx(Box, { role: "radio", "aria-labelledby": `checkout-price-${item.id}`, "aria-checked": product?.id === item.id, onClick: () => {
-                            setProduct(item);
-                        }, sx: {
-                            borderStyle: 'solid',
-                            borderRadius: 'var(--borderRadius-medium)',
-                            borderWidth: 'var(--borderWidth-thick)',
-                            borderColor: product?.id === item.id
-                                ? 'var(--borderColor-accent-emphasis)'
-                                : 'var(--borderColor-default)',
-                            padding: 'var(--stack-padding-condensed)',
-                            cursor: 'pointer',
-                        }, children: _jsxs(FormControl, { sx: {
-                                alignItems: 'center',
-                            }, children: [_jsx(FormControl.Label, { id: `checkout-price-${item.id}`, sx: { alignSelf: 'center' }, children: item.name }), _jsx(Text, { as: "p", children: new Intl.NumberFormat(undefined, {
-                                        style: 'currency',
-                                        currency: item.currency,
-                                    }).format(item.amount / 100) }), _jsxs(Text, { as: "p", children: [item.credits, " credits"] })] }, item.id) }))) }), _jsx(Button, { variant: "primary", onClick: () => {
-                        setCheckout(true);
-                    }, disabled: product === null, sx: { float: 'right' }, children: "Checkout" })] })) : (_jsx(Box, { children: _jsx(Flash, { variant: "danger", children: "Unable to fetch the available products. Please try again later." }) }));
+                        gridTemplateColumns: shouldShowMonthlySubscriptionSection || currentPlanSection
+                            ? ['1fr', 'minmax(0, 1fr) minmax(0, 1fr)']
+                            : ['1fr'],
+                        alignItems: 'stretch',
+                    }, children: [shouldShowMonthlySubscriptionSection ? (_jsx(Box, { sx: {
+                                borderRight: ['none', '1px solid'],
+                                borderColor: 'border.muted',
+                                paddingRight: ['0', 'var(--stack-gap-normal)'],
+                                alignSelf: 'stretch',
+                            }, children: monthlySubscriptionSection })) : null, currentPlanSection, _jsx(Box, { sx: {
+                                paddingLeft: shouldShowMonthlySubscriptionSection || currentPlanSection
+                                    ? ['0', 'var(--stack-gap-normal)']
+                                    : 0,
+                            }, children: topUpSection }), isStripeTestConfiguration ? (_jsx(Box, { sx: {
+                                gridColumn: ['1', '1 / -1'],
+                                borderTop: '1px solid',
+                                borderColor: 'border.muted',
+                                paddingTop: 'var(--stack-gap-normal)',
+                            }, children: _jsx(Label, { variant: "attention", children: "Stripe test configuration" }) })) : null] }), resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: resumeConfirmationMessage })), paymentMessage && !resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: paymentMessage })), topCards] })) : (_jsxs(Box, { children: [resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: resumeConfirmationMessage })), paymentMessage && !resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: paymentMessage })), topCards, _jsx(Flash, { variant: "default", children: "No products are available yet." })] }));
     }
     return view;
 }