@funnelsgrove/payments 0.1.17 → 0.1.19

package/dist/components/ManageSubscriptionScreen.d.ts

@@ -22,6 +22,8 @@ type ManageSubscription = RuntimeSubscription & {
 export declare function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId, plans, }: ManageSubscriptionScreenProps): import("react/jsx-runtime").JSX.Element;
 export declare const __manageSubscriptionScreenTestables: {
     resolveBillingDateLabel: (subscription: Pick<ManageSubscription, "cancelAtPeriodEnd" | "currentPeriodEnd" | "status">, options?: {
+        cancelled?: boolean;
         past?: boolean;
     }) => string;
+    resolveSubscriptionStatusLabel: (subscription: ManageSubscription) => string;
 };

package/dist/components/ManageSubscriptionScreen.js

@@ -4,9 +4,13 @@ import { useEffect, useMemo, useState } from 'react';
 import { apiService, buildPreviewManageSubscriptionsFallback, isPreviewFrameRuntime, runtimePublicConfig, useFunnel, } from '@funnelsgrove/runtime';
 import { getFallbackBillingPlans } from '../services/planCatalog.service.js';
 const pastSubscriptionsNote = 'Past subscriptions are already canceled or expired. Dates below are historical, not upcoming charges.';
+const cancelledSubscriptionsNote = 'These subscriptions are cancelled and remain active until the date shown below.';
+const getNormalizedStatus = (subscription) => subscription.status.trim().toLowerCase();
+const isCancelledActiveSubscription = (subscription) => {
+    return subscription.cancelAtPeriodEnd && getNormalizedStatus(subscription) !== 'canceled';
+};
 const isCancellableSubscription = (subscription) => {
-    const normalizedStatus = subscription.status.trim().toLowerCase();
-    return normalizedStatus !== 'canceled' && !subscription.cancelAtPeriodEnd;
+    return getNormalizedStatus(subscription) !== 'canceled' && !subscription.cancelAtPeriodEnd;
 };
 const formatDate = (value) => {
     if (!value) {
@@ -51,8 +55,8 @@ const resolveCreatedDate = (subscription) => {
     return formatDate(subscription.createdAt || subscription.currentPeriodStart);
 };
 const resolveBillingDateLabel = (subscription, options = {}) => {
-    const normalizedStatus = subscription.status.trim().toLowerCase();
-    if (subscription.cancelAtPeriodEnd) {
+    const normalizedStatus = getNormalizedStatus(subscription);
+    if (options.cancelled || subscription.cancelAtPeriodEnd) {
         return `Active until: ${formatDate(subscription.currentPeriodEnd)}`;
     }
     if (options.past && normalizedStatus === 'canceled') {
@@ -64,6 +68,16 @@ const resolveBillingDateLabel = (subscription, options = {}) => {
     return `Next charge: ${formatDate(subscription.currentPeriodEnd)}`;
 };
 const toManageSubscriptions = (subscriptions) => subscriptions;
+const resolveSubscriptionStatusLabel = (subscription) => {
+    if (isCancelledActiveSubscription(subscription)) {
+        return 'Cancelled';
+    }
+    const normalizedStatus = getNormalizedStatus(subscription);
+    if (!normalizedStatus) {
+        return 'Active';
+    }
+    return `${normalizedStatus.charAt(0).toUpperCase()}${normalizedStatus.slice(1)}`;
+};
 export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId, plans, }) {
     var _a, _b;
     const { attributes, completeStep, goToStep, setAnswer, setUser, user } = useFunnel();
@@ -114,7 +128,8 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
     }, [content.errorMessages.load]);
     const subscriptions = useMemo(() => { var _a; return toManageSubscriptions((_a = data === null || data === void 0 ? void 0 : data.subscriptions) !== null && _a !== void 0 ? _a : []); }, [data]);
     const activeSubscriptions = useMemo(() => subscriptions.filter(isCancellableSubscription), [subscriptions]);
-    const pastSubscriptions = useMemo(() => subscriptions.filter((subscription) => !isCancellableSubscription(subscription)), [subscriptions]);
+    const cancelledSubscriptions = useMemo(() => subscriptions.filter(isCancelledActiveSubscription), [subscriptions]);
+    const pastSubscriptions = useMemo(() => subscriptions.filter((subscription) => !isCancellableSubscription(subscription) && !isCancelledActiveSubscription(subscription)), [subscriptions]);
     const selectedSubscription = (_a = activeSubscriptions.find((subscription) => subscription.id === selectedSubscriptionId)) !== null && _a !== void 0 ? _a : null;
     const selectedReason = (_b = content.whyStage.reasons.find((reason) => reason.id === selectedReasonId)) !== null && _b !== void 0 ? _b : null;
     const handleSubscriptionSelected = (subscription) => {
@@ -192,11 +207,11 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
             setCancelInFlight(false);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("section", { className: 'manage-subscription', "data-node-id": nodeId || stepId, children: [stage === 'subscriptions' ? (_jsxs("div", { className: 'manage-subscription-inner', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.subscriptionsStage.title }), loading ? (_jsx("p", { className: 'manage-subscription-muted', children: content.subscriptionsStage.loadingLabel })) : null, error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, !loading && !error && subscriptions.length === 0 ? (_jsx("p", { className: 'manage-subscription-empty', children: content.subscriptionsStage.emptyLabel })) : null, !loading && activeSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Active Subscriptions', subscriptions: activeSubscriptions, plans: planList, onSelect: handleSubscriptionSelected })) : null, !loading && pastSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Past Subscriptions', subscriptions: pastSubscriptions, plans: planList, onSelect: handleSubscriptionSelected, description: pastSubscriptionsNote, past: true })) : null, _jsxs("p", { className: 'manage-subscription-support', children: [content.subscriptionsStage.supportPrefix, ' ', _jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail })] })] })) : null, stage === 'why' ? (_jsxs("div", { className: 'manage-subscription-inner', children: [_jsx("h1", { className: 'manage-subscription-title is-reason', children: content.whyStage.title }), _jsx("ul", { className: 'manage-subscription-reasons', role: 'list', "aria-label": content.whyStage.reasonsAriaLabel, children: content.whyStage.reasons.map((reason) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: 'manage-subscription-reason', onClick: () => handleReasonSelected(reason.id), children: [_jsx("span", { className: 'manage-subscription-reason-icon', "aria-hidden": true, children: reason.icon }), _jsx("span", { children: reason.label }), _jsx("span", { className: 'manage-subscription-reason-arrow', "aria-hidden": true, children: ">" })] }) }, reason.id))) })] })) : null, stage === 'confirm' ? (_jsxs("div", { className: 'manage-subscription-inner is-short', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.confirmStage.title }), error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', disabled: !selectedSubscription || !selectedReason || cancelInFlight, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs("section", { className: 'manage-subscription', "data-node-id": nodeId || stepId, children: [stage === 'subscriptions' ? (_jsxs("div", { className: 'manage-subscription-inner', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.subscriptionsStage.title }), loading ? (_jsx("p", { className: 'manage-subscription-muted', children: content.subscriptionsStage.loadingLabel })) : null, error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, !loading && !error && subscriptions.length === 0 ? (_jsx("p", { className: 'manage-subscription-empty', children: content.subscriptionsStage.emptyLabel })) : null, !loading && activeSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Active Subscriptions', subscriptions: activeSubscriptions, plans: planList, onSelect: handleSubscriptionSelected })) : null, !loading && cancelledSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Cancelled Subscriptions', subscriptions: cancelledSubscriptions, plans: planList, onSelect: handleSubscriptionSelected, description: cancelledSubscriptionsNote, cancelled: true })) : null, !loading && pastSubscriptions.length > 0 ? (_jsx(SubscriptionSection, { title: 'Past Subscriptions', subscriptions: pastSubscriptions, plans: planList, onSelect: handleSubscriptionSelected, description: pastSubscriptionsNote, past: true })) : null, _jsxs("p", { className: 'manage-subscription-support', children: [content.subscriptionsStage.supportPrefix, ' ', _jsx("a", { href: `mailto:${supportEmail}`, children: supportEmail })] })] })) : null, stage === 'why' ? (_jsxs("div", { className: 'manage-subscription-inner', children: [_jsx("h1", { className: 'manage-subscription-title is-reason', children: content.whyStage.title }), _jsx("ul", { className: 'manage-subscription-reasons', role: 'list', "aria-label": content.whyStage.reasonsAriaLabel, children: content.whyStage.reasons.map((reason) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: 'manage-subscription-reason', onClick: () => handleReasonSelected(reason.id), children: [_jsx("span", { className: 'manage-subscription-reason-icon', "aria-hidden": true, children: reason.icon }), _jsx("span", { children: reason.label }), _jsx("span", { className: 'manage-subscription-reason-arrow', "aria-hidden": true, children: ">" })] }) }, reason.id))) })] })) : null, stage === 'confirm' ? (_jsxs("div", { className: 'manage-subscription-inner is-short', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.confirmStage.title }), error ? _jsx("p", { className: 'manage-subscription-error', children: error }) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', disabled: !selectedSubscription || !selectedReason || cancelInFlight, onClick: () => {
                                     void handleCancelSubscription();
                                 }, children: cancelInFlight
                                     ? content.confirmStage.cancellingLabel
-                                    : content.confirmStage.cancelLabel })] })) : null, stage === 'done' ? (_jsxs("div", { className: 'manage-subscription-inner is-short', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.doneStage.title }), _jsx("p", { className: 'manage-subscription-done-copy', children: content.doneStage.cancelledMessage }), cancelledActiveUntilDate ? (_jsxs("p", { className: 'manage-subscription-done-copy is-active-until', children: ["Active until: ", cancelledActiveUntilDate] })) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', onClick: () => {
+                                    : content.confirmStage.cancelLabel })] })) : null, stage === 'done' ? (_jsxs("div", { className: 'manage-subscription-inner is-short', children: [_jsx("h1", { className: 'manage-subscription-title', children: content.doneStage.title }), _jsx("p", { className: 'manage-subscription-done-status', children: "Cancelled" }), _jsx("p", { className: 'manage-subscription-done-copy', children: content.doneStage.cancelledMessage }), cancelledActiveUntilDate ? (_jsxs("p", { className: 'manage-subscription-done-copy is-active-until', children: ["Active until: ", cancelledActiveUntilDate] })) : null, _jsx("button", { type: 'button', className: 'manage-subscription-primary', onClick: () => {
                                     if (homeStepId) {
                                         goToStep(homeStepId);
                                         return;
@@ -204,8 +219,16 @@ export function ManageSubscriptionScreen({ stepId, content, homeStepId, nodeId,
                                     setStage('subscriptions');
                                 }, children: content.doneStage.returnHomeLabel })] })) : null] }), _jsx("style", { children: manageSubscriptionStyles })] }));
 }
-function SubscriptionSection({ title, subscriptions, plans, onSelect, description, past = false, }) {
-    return (_jsxs("section", { className: 'manage-subscription-section', "aria-label": title, children: [_jsx("h2", { children: title }), description ? _jsx("p", { className: 'manage-subscription-section-note', children: description }) : null, _jsx("ul", { className: 'manage-subscription-list', role: 'list', children: subscriptions.map((subscription) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: past ? 'manage-subscription-row is-past' : 'manage-subscription-row', disabled: past, onClick: () => onSelect(subscription), children: [_jsx("span", { className: 'manage-subscription-radio', "aria-hidden": true }), _jsxs("span", { className: 'manage-subscription-row-title', children: ["Subscription #", formatSubscriptionNumber(subscription)] }), _jsx("span", { className: 'manage-subscription-row-plan', children: resolvePlanLine(subscription, plans) }), _jsxs("span", { className: 'manage-subscription-row-meta', children: [_jsx("span", { children: resolveBillingDateLabel(subscription, { past }) }), _jsxs("span", { children: ["Created at: ", resolveCreatedDate(subscription)] })] })] }) }, subscription.id))) })] }));
+function SubscriptionSection({ title, subscriptions, plans, onSelect, description, cancelled = false, past = false, }) {
+    const isDisabled = cancelled || past;
+    const rowClassName = cancelled
+        ? 'manage-subscription-row is-cancelled'
+        : past
+            ? 'manage-subscription-row is-past'
+            : 'manage-subscription-row';
+    return (_jsxs("section", { className: 'manage-subscription-section', "aria-label": title, children: [_jsx("h2", { children: title }), description ? _jsx("p", { className: 'manage-subscription-section-note', children: description }) : null, _jsx("ul", { className: 'manage-subscription-list', role: 'list', children: subscriptions.map((subscription) => (_jsx("li", { children: _jsxs("button", { type: 'button', className: rowClassName, disabled: isDisabled, onClick: () => onSelect(subscription), children: [_jsx("span", { className: 'manage-subscription-radio', "aria-hidden": true }), _jsxs("span", { className: 'manage-subscription-row-heading', children: [_jsxs("span", { className: 'manage-subscription-row-title', children: ["Subscription #", formatSubscriptionNumber(subscription)] }), _jsx("span", { className: 'manage-subscription-row-status', children: resolveSubscriptionStatusLabel(subscription) })] }), _jsx("span", { className: 'manage-subscription-row-plan', children: resolvePlanLine(subscription, plans) }), _jsxs("span", { className: 'manage-subscription-row-meta', children: [_jsx("span", { className: cancelled ? 'is-active-until' : undefined, children: cancelled
+                                            ? resolveBillingDateLabel(subscription, { cancelled })
+                                            : resolveBillingDateLabel(subscription, { past }) }), _jsxs("span", { children: ["Created at: ", resolveCreatedDate(subscription)] })] })] }) }, subscription.id))) })] }));
 }
 const manageSubscriptionStyles = `
 .manage-subscription {
@@ -295,6 +318,11 @@ const manageSubscriptionStyles = `
   opacity: 0.82;
 }
 
+.manage-subscription-row.is-cancelled {
+  border-left-color: var(--color-warning, #f28100);
+  cursor: default;
+}
+
 .manage-subscription-radio {
   width: 14px;
   height: 14px;
@@ -303,12 +331,31 @@ const manageSubscriptionStyles = `
   display: block;
 }
 
+.manage-subscription-row-heading {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
 .manage-subscription-row-title {
   font-size: 15px;
   line-height: 1.25;
   font-weight: 800;
 }
 
+.manage-subscription-row-status {
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);
+  color: var(--color-warning, #f28100);
+  padding: 3px 8px;
+  font-size: 10px;
+  line-height: 1.2;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
 .manage-subscription-row-plan {
   font-size: 13px;
   line-height: 1.2;
@@ -326,6 +373,11 @@ const manageSubscriptionStyles = `
   line-height: 1.3;
 }
 
+.manage-subscription-row-meta .is-active-until {
+  color: var(--color-text, #262729);
+  font-weight: 800;
+}
+
 .manage-subscription-support {
   margin: 30px 0 0;
   color: var(--color-text, #262729);
@@ -371,6 +423,19 @@ const manageSubscriptionStyles = `
   font-weight: 800;
 }
 
+.manage-subscription-done-status {
+  width: fit-content;
+  margin: 14px auto 0;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--color-warning, #f28100) 16%, var(--color-surface, #fff) 84%);
+  color: var(--color-warning, #f28100);
+  padding: 4px 10px;
+  font-size: 11px;
+  line-height: 1.2;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+
 .manage-subscription-reasons {
   margin: 18px 0 0;
   padding: 0;
@@ -446,4 +511,5 @@ const manageSubscriptionStyles = `
 `;
 export const __manageSubscriptionScreenTestables = {
     resolveBillingDateLabel,
+    resolveSubscriptionStatusLabel,
 };

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

@@ -11,8 +11,10 @@ export type StripeCheckoutExpressCheckoutButtonProps = {
     availabilityPaymentMethods?: readonly (keyof AvailablePaymentMethods)[];
     initialAvailable?: boolean | null;
     keepInitialAvailableOnReady?: boolean;
+    serverUpdateKey?: string | null;
+    onServerUpdate?: () => Promise<boolean>;
     onAvailabilityChange?: (available: boolean) => void;
     onError?: (message: string | null) => void;
     onSuccess?: () => void;
 };
-export declare function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, customerEmail, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, onAvailabilityChange, onError, onSuccess, }: StripeCheckoutExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, customerEmail, className, options, availabilityPaymentMethods, initialAvailable, keepInitialAvailableOnReady, serverUpdateKey, onServerUpdate, onAvailabilityChange, onError, onSuccess, }: StripeCheckoutExpressCheckoutButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/StripeCheckoutExpressCheckoutButton.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ExpressCheckoutElement, useCheckout, } from '@stripe/react-stripe-js/checkout';
 const buildDefaultOptions = () => ({
     buttonHeight: 55,
@@ -25,9 +25,12 @@ const buildDefaultOptions = () => ({
         paypal: 'never',
     },
 });
-export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, customerEmail, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, onAvailabilityChange, onError, onSuccess, }) {
+export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl, customerEmail, className, options, availabilityPaymentMethods = ['applePay'], initialAvailable, keepInitialAvailableOnReady = false, serverUpdateKey, onServerUpdate, onAvailabilityChange, onError, onSuccess, }) {
     const checkoutState = useCheckout();
+    const appliedServerUpdateKeyRef = useRef('');
+    const serverUpdatePromiseRef = useRef(null);
     const [walletAvailable, setWalletAvailable] = useState(initialAvailable !== null && initialAvailable !== void 0 ? initialAvailable : null);
+    const normalizedServerUpdateKey = (serverUpdateKey === null || serverUpdateKey === void 0 ? void 0 : serverUpdateKey.trim()) || '';
     const effectiveWalletAvailable = initialAvailable === true && walletAvailable !== false
         ? true
         : walletAvailable;
@@ -36,6 +39,52 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl,
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return Object.assign(Object.assign(Object.assign({}, baseOptions), (options !== null && options !== void 0 ? options : {})), { buttonTheme: Object.assign(Object.assign({}, ((_a = baseOptions.buttonTheme) !== null && _a !== void 0 ? _a : {})), ((_b = options === null || options === void 0 ? void 0 : options.buttonTheme) !== null && _b !== void 0 ? _b : {})), buttonType: Object.assign(Object.assign({}, ((_c = baseOptions.buttonType) !== null && _c !== void 0 ? _c : {})), ((_d = options === null || options === void 0 ? void 0 : options.buttonType) !== null && _d !== void 0 ? _d : {})), layout: Object.assign(Object.assign({}, ((_e = baseOptions.layout) !== null && _e !== void 0 ? _e : {})), ((_f = options === null || options === void 0 ? void 0 : options.layout) !== null && _f !== void 0 ? _f : {})), paymentMethods: Object.assign(Object.assign({}, ((_g = baseOptions.paymentMethods) !== null && _g !== void 0 ? _g : {})), ((_h = options === null || options === void 0 ? void 0 : options.paymentMethods) !== null && _h !== void 0 ? _h : {})), paymentMethodOrder: (_j = options === null || options === void 0 ? void 0 : options.paymentMethodOrder) !== null && _j !== void 0 ? _j : baseOptions.paymentMethodOrder });
     }, [baseOptions, options]);
+    const ensureServerUpdated = useCallback(async () => {
+        if (!normalizedServerUpdateKey) {
+            return true;
+        }
+        if (appliedServerUpdateKeyRef.current === normalizedServerUpdateKey) {
+            return true;
+        }
+        if (!onServerUpdate || checkoutState.type !== 'success') {
+            return false;
+        }
+        if (serverUpdatePromiseRef.current) {
+            return serverUpdatePromiseRef.current;
+        }
+        const updatePromise = (async () => {
+            const updateResult = await checkoutState.checkout.runServerUpdate(async () => {
+                const updated = await onServerUpdate();
+                if (!updated) {
+                    throw new Error('Unable to update checkout session.');
+                }
+            });
+            if (updateResult.type === 'error') {
+                onError === null || onError === void 0 ? void 0 : onError(updateResult.error.message || 'Unable to update checkout session.');
+                return false;
+            }
+            appliedServerUpdateKeyRef.current = normalizedServerUpdateKey;
+            onError === null || onError === void 0 ? void 0 : onError(null);
+            return true;
+        })();
+        serverUpdatePromiseRef.current = updatePromise;
+        try {
+            return await updatePromise;
+        }
+        finally {
+            serverUpdatePromiseRef.current = null;
+        }
+    }, [checkoutState, normalizedServerUpdateKey, onError, onServerUpdate]);
+    useEffect(() => {
+        if (!normalizedServerUpdateKey) {
+            appliedServerUpdateKeyRef.current = '';
+            return;
+        }
+        if (checkoutState.type !== 'success' || !onServerUpdate) {
+            return;
+        }
+        void ensureServerUpdated();
+    }, [checkoutState.type, ensureServerUpdated, normalizedServerUpdateKey, onServerUpdate]);
     const handleConfirm = async (event) => {
         if (checkoutState.type !== 'success') {
             const message = checkoutState.type === 'error'
@@ -46,6 +95,13 @@ export function StripeCheckoutExpressCheckoutButton({ beforeConfirm, returnUrl,
             return;
         }
         onError === null || onError === void 0 ? void 0 : onError(null);
+        const updated = await ensureServerUpdated();
+        if (!updated) {
+            const message = 'Unable to update checkout session.';
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            event.paymentFailed({ reason: 'fail', message });
+            return;
+        }
         let preparedCustomerEmail = (customerEmail === null || customerEmail === void 0 ? void 0 : customerEmail.trim()) || null;
         if (beforeConfirm) {
             try {

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -31,6 +31,11 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         expressCheckoutAllowed &&
         walletAvailable === null;
     const placeholderIsPreparing = shouldRenderPlaceholder;
+    const serverUpdateKey = session.activeClientSecret &&
+        session.checkoutSessionId &&
+        session.activePlanKey !== session.planKey
+        ? session.planKey
+        : null;
     const markWalletUnavailable = useCallback((intentKey) => {
         setWalletAvailability({
             available: false,
@@ -105,7 +110,7 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
                     .filter(Boolean)
                     .join(' '), "aria-busy": placeholderIsPreparing || undefined, children: [shouldRenderExpressCheckout &&
                         session.activeClientSecret &&
-                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onError: handleError, onSuccess: onSuccess, options: options, returnUrl: returnUrl, stripePromise: session.stripePromise, summaryLabel: summaryLabel }, session.activeClientSecret)) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: (renderPreparingPlaceholder !== null && renderPreparingPlaceholder !== void 0 ? renderPreparingPlaceholder : renderPlaceholder)({
+                        session.stripePromise ? (_jsx(StripeExpressCheckoutElement, { amountCents: amountCents, availabilityPaymentMethods: [availabilityPaymentMethod], beforeConfirm: beforeConfirm, className: className, clientSecret: session.activeClientSecret, customerEmail: customerEmail, customerName: customerName, onAvailabilityChange: handleAvailabilityChange, onError: handleError, onSuccess: onSuccess, options: options, returnUrl: returnUrl, serverUpdateKey: serverUpdateKey, stripePromise: session.stripePromise, summaryLabel: summaryLabel, onServerUpdate: session.updateCheckoutSessionPlan })) : null, shouldRenderPlaceholder ? (_jsx("div", { className: 'wallet-subscription-checkout-slot__placeholder', children: (renderPreparingPlaceholder !== null && renderPreparingPlaceholder !== void 0 ? renderPreparingPlaceholder : renderPlaceholder)({
                             className,
                             disabled: slotDisabled,
                             label: placeholderLabel,

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.d.ts

@@ -17,6 +17,8 @@ export type StripeSubscriptionCheckoutSessionInput = {
 };
 export type StripeSubscriptionCheckoutSession = {
     activeClientSecret: string | null;
+    activePlanKey: string | null;
+    checkoutSessionId: string | null;
     configured: boolean;
     error: string | null;
     intentKey: string;
@@ -27,8 +29,10 @@ export type StripeSubscriptionCheckoutSession = {
     reset: () => void;
     restartCardCheckout: () => Promise<string | null>;
     restartWalletCheckout: () => Promise<string | null>;
+    planKey: string;
     setError: (message: string | null) => void;
     stripePromise: Promise<Stripe | null> | null;
+    updateCheckoutSessionPlan: () => Promise<boolean>;
 };
 export declare function isInactiveCheckoutSessionError(message?: string | null): boolean;
 export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.js

@@ -1,7 +1,7 @@
 'use client';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { createEmptyCheckoutPreparationLoading, } from '../paymentProvider.types.js';
-import { createStripeSubscriptionCheckout, getStripePromise, isStripeConfigured, } from '../../services/stripe.service.js';
+import { createStripeSubscriptionCheckout, getStripePromise, isStripeConfigured, updateStripeSubscriptionCheckoutPlan, } from '../../services/stripe.service.js';
 const getFriendlyStripeCheckoutError = (error) => {
     const message = error instanceof Error ? error.message : 'Unable to initialize checkout';
     return message === 'Internal server error'
@@ -14,9 +14,11 @@ export function isInactiveCheckoutSessionError(message) {
     return /\bcheckout session\b.*\bno longer active\b/i.test((_a = message === null || message === void 0 ? void 0 : message.trim()) !== null && _a !== void 0 ? _a : '');
 }
 export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, customerEmail, displayPlan, enabled = true, onError, plan, returnUrl, runtimeConfig, userId, }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const [clientSecret, setClientSecret] = useState(null);
     const [clientSecretIntentKey, setClientSecretIntentKey] = useState(null);
+    const [checkoutSessionId, setCheckoutSessionId] = useState(null);
+    const [clientSecretPlanKey, setClientSecretPlanKey] = useState(null);
     const [error, setErrorState] = useState(null);
     const [loading, setLoading] = useState(createEmptyCheckoutPreparationLoading);
     const [runtimeStripePublishableKey, setRuntimeStripePublishableKey] = useState(null);
@@ -35,20 +37,27 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
         'stripe',
         checkoutMode,
         runtimeConfigSignature,
-        (_a = plan === null || plan === void 0 ? void 0 : plan.id) !== null && _a !== void 0 ? _a : '',
-        (_b = plan === null || plan === void 0 ? void 0 : plan.amountCents) !== null && _b !== void 0 ? _b : '',
-        (_c = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.id) !== null && _c !== void 0 ? _c : '',
-        (_d = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.amountCents) !== null && _d !== void 0 ? _d : '',
         (couponId === null || couponId === void 0 ? void 0 : couponId.trim()) || '',
         returnUrl.trim(),
     ].join('|');
+    const planKey = [
+        (_a = plan === null || plan === void 0 ? void 0 : plan.id) !== null && _a !== void 0 ? _a : '',
+        (_b = plan === null || plan === void 0 ? void 0 : plan.providerPlanId) !== null && _b !== void 0 ? _b : '',
+        (_c = plan === null || plan === void 0 ? void 0 : plan.amountCents) !== null && _c !== void 0 ? _c : '',
+        (_d = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.id) !== null && _d !== void 0 ? _d : '',
+        (_e = displayPlan === null || displayPlan === void 0 ? void 0 : displayPlan.amountCents) !== null && _e !== void 0 ? _e : '',
+    ].join('|');
     const activeClientSecret = clientSecretIntentKey === intentKey ? clientSecret : null;
+    const activeCheckoutSessionId = clientSecretIntentKey === intentKey ? checkoutSessionId : null;
+    const activePlanKey = clientSecretIntentKey === intentKey ? clientSecretPlanKey : null;
     const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey), [checkoutMode, runtimeStripePublishableKey]);
     const clearActiveCheckoutSession = useCallback(() => {
         requestIdRef.current += 1;
         creatingIntentRef.current = null;
         setClientSecret(null);
         setClientSecretIntentKey(null);
+        setCheckoutSessionId(null);
+        setClientSecretPlanKey(null);
     }, []);
     const setError = useCallback((message) => {
         if (isInactiveCheckoutSessionError(message)) {
@@ -89,10 +98,11 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
             clearActiveCheckoutSession();
         }
         const requestKey = intentKey;
+        const requestPlanKey = planKey;
         const requestId = requestIdRef.current + 1;
         requestIdRef.current = requestId;
         const subscriptionRequest = (async () => {
-            var _a, _b, _c, _d, _e, _f, _g;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             try {
                 const response = await createStripeSubscriptionCheckout({
                     plan,
@@ -113,18 +123,20 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
                 }
                 setClientSecret(response.clientSecret);
                 setClientSecretIntentKey(requestKey);
+                setCheckoutSessionId(((_d = response.checkoutSessionId) === null || _d === void 0 ? void 0 : _d.trim()) || null);
+                setClientSecretPlanKey(requestPlanKey);
                 return response.clientSecret;
             }
             catch (subscriptionError) {
-                if (((_d = creatingIntentRef.current) === null || _d === void 0 ? void 0 : _d.key) === requestKey &&
-                    ((_e = creatingIntentRef.current) === null || _e === void 0 ? void 0 : _e.id) === requestId) {
+                if (((_e = creatingIntentRef.current) === null || _e === void 0 ? void 0 : _e.key) === requestKey &&
+                    ((_f = creatingIntentRef.current) === null || _f === void 0 ? void 0 : _f.id) === requestId) {
                     setError(getFriendlyStripeCheckoutError(subscriptionError));
                 }
                 return null;
             }
             finally {
-                if (((_f = creatingIntentRef.current) === null || _f === void 0 ? void 0 : _f.key) === requestKey &&
-                    ((_g = creatingIntentRef.current) === null || _g === void 0 ? void 0 : _g.id) === requestId) {
+                if (((_g = creatingIntentRef.current) === null || _g === void 0 ? void 0 : _g.key) === requestKey &&
+                    ((_h = creatingIntentRef.current) === null || _h === void 0 ? void 0 : _h.id) === requestId) {
                     creatingIntentRef.current = null;
                 }
             }
@@ -145,6 +157,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
         displayPlan,
         intentKey,
         plan,
+        planKey,
         returnUrl,
         runtimeConfig,
         setError,
@@ -178,8 +191,49 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
     const prepareWalletCheckout = useCallback(() => prepareCheckout('wallet'), [prepareCheckout]);
     const restartCardCheckout = useCallback(() => prepareCheckout('card', { forceNew: true }), [prepareCheckout]);
     const restartWalletCheckout = useCallback(() => prepareCheckout('wallet', { forceNew: true }), [prepareCheckout]);
+    const updateCheckoutSessionPlan = useCallback(async () => {
+        if (!configured || !plan || !displayPlan || !activeCheckoutSessionId) {
+            return false;
+        }
+        if (activePlanKey === planKey) {
+            return true;
+        }
+        setError(null);
+        try {
+            await updateStripeSubscriptionCheckoutPlan({
+                checkoutSessionId: activeCheckoutSessionId,
+                plan,
+                couponId,
+                customerEmail,
+                user_id: userId,
+                environment: checkoutMode,
+                runtimeConfig,
+            });
+            setClientSecretPlanKey(planKey);
+            return true;
+        }
+        catch (subscriptionError) {
+            setError(getFriendlyStripeCheckoutError(subscriptionError));
+            return false;
+        }
+    }, [
+        activeCheckoutSessionId,
+        activePlanKey,
+        checkoutMode,
+        configured,
+        couponId,
+        customerEmail,
+        displayPlan,
+        plan,
+        planKey,
+        runtimeConfig,
+        setError,
+        userId,
+    ]);
     return {
         activeClientSecret,
+        activePlanKey,
+        checkoutSessionId: activeCheckoutSessionId,
         configured,
         error,
         intentKey,
@@ -190,7 +244,9 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, couponId, c
         reset,
         restartCardCheckout,
         restartWalletCheckout,
+        planKey,
         setError,
         stripePromise,
+        updateCheckoutSessionPlan,
     };
 }

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

@@ -80,7 +80,21 @@ type CreateSubscriptionCheckoutResponse = {
     stripePublishableKey?: string;
     environment?: 'test' | 'live';
 };
+type UpdateSubscriptionCheckoutPlanInput = {
+    checkoutSessionId: string;
+    plan: CheckoutSessionPlanInput;
+    couponId?: string | null;
+    customerEmail?: string | null;
+    user_id?: string | null;
+    environment?: RuntimeMode;
+    runtimeConfig?: StripeRuntimeConfigOverrides;
+};
+type UpdateSubscriptionCheckoutPlanResponse = {
+    checkoutSessionId: string;
+    environment?: 'test' | 'live';
+};
 export declare function createStripeSubscriptionCheckout(input: CreateSubscriptionCheckoutInput): Promise<CreateSubscriptionCheckoutResponse>;
+export declare function updateStripeSubscriptionCheckoutPlan(input: UpdateSubscriptionCheckoutPlanInput): Promise<UpdateSubscriptionCheckoutPlanResponse>;
 type CreateCheckoutSessionInput = {
     plan: CheckoutSessionPlanInput;
     successUrl: string;

package/dist/services/stripe.service.js

@@ -588,6 +588,42 @@ export async function createStripeSubscriptionCheckout(input) {
     }
     return (await response.json());
 }
+export async function updateStripeSubscriptionCheckoutPlan(input) {
+    var _a, _b, _c, _d, _e;
+    const recurring = resolveCheckoutPlanRecurringConfig(input.plan);
+    if (!recurring) {
+        throw new Error('Unable to resolve the recurring interval for the selected plan');
+    }
+    const runtimeConfig = resolveStripeRuntimeConfig(input.runtimeConfig);
+    const response = await fetch(buildStripeRuntimeApiUrl('/sdk/public/payments/subscriptions/update-plan', 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: input.checkoutSessionId.trim(),
+            planId: getPaywallPlanSelectionValue(input.plan),
+            providerPlanId: ((_a = input.plan.providerPlanId) === null || _a === void 0 ? void 0 : _a.trim()) || undefined,
+            title: input.plan.title,
+            description: ((_b = input.plan.description) === null || _b === void 0 ? void 0 : _b.trim()) || undefined,
+            amountCents: input.plan.amountCents,
+            billingInterval: recurring.interval,
+            billingIntervalCount: recurring.intervalCount,
+            couponId: ((_c = input.couponId) === null || _c === void 0 ? void 0 : _c.trim()) || undefined,
+            customerEmail: ((_d = input.customerEmail) === null || _d === void 0 ? void 0 : _d.trim()) || undefined,
+            user_id: ((_e = input.user_id) === null || _e === void 0 ? void 0 : _e.trim()) || undefined,
+            environment: input.environment || undefined,
+        }),
+    });
+    if (!response.ok) {
+        const errorMessage = await parseErrorMessage(response, 'Unable to update 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.17",
+  "version": "0.1.19",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",