@funnelsgrove/payments 0.1.33 → 0.1.35

package/dist/index.d.ts

@@ -21,3 +21,4 @@ export * from './components/shared/StripeExpressCheckoutButton.js';
 export * from './components/shared/StripeExpressCheckoutElement.js';
 export * from './components/shared/StripePlanSelector.js';
 export * from './components/shared/walletPlatform.js';
+export * from './testing/walletCheckoutSmoke.js';

package/dist/index.js

@@ -21,3 +21,4 @@ export * from './components/shared/StripeExpressCheckoutButton.js';
 export * from './components/shared/StripeExpressCheckoutElement.js';
 export * from './components/shared/StripePlanSelector.js';
 export * from './components/shared/walletPlatform.js';
+export * from './testing/walletCheckoutSmoke.js';

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

@@ -7,13 +7,14 @@ export type WalletSubscriptionCheckoutRenderStateInput = {
     hasStripePromise: boolean;
     suspended: boolean;
     walletAvailable: boolean | null;
+    walletPreparing: boolean;
 };
 export type WalletSubscriptionCheckoutRenderState = {
     placeholderIsPreparing: boolean;
     shouldRenderExpressCheckout: boolean;
     shouldRenderPlaceholder: boolean;
 };
-export declare function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, }: WalletSubscriptionCheckoutRenderStateInput): WalletSubscriptionCheckoutRenderState;
+export declare function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, walletPreparing, }: WalletSubscriptionCheckoutRenderStateInput): WalletSubscriptionCheckoutRenderState;
 type WalletPlaceholderButtonProps = {
     className?: string;
     disabled: boolean;

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { StripeExpressCheckoutElement } from '../../components/shared/StripeExpressCheckoutElement.js';
 import { isInactiveCheckoutSessionError, } from './useStripeSubscriptionCheckoutSession.js';
-export function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, }) {
+export function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, walletPreparing, }) {
     const shouldRenderExpressCheckout = !suspended &&
         expressCheckoutAllowed &&
         walletAvailable !== false &&
@@ -14,7 +14,7 @@ export function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowe
         expressCheckoutAllowed &&
         walletAvailable === null;
     return {
-        placeholderIsPreparing: shouldRenderPlaceholder,
+        placeholderIsPreparing: shouldRenderPlaceholder && walletPreparing,
         shouldRenderExpressCheckout,
         shouldRenderPlaceholder,
     };
@@ -43,19 +43,28 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         hasStripePromise: Boolean(session.stripePromise),
         suspended,
         walletAvailable,
+        walletPreparing: session.loading.wallet,
     });
     const serverUpdateKey = session.activeClientSecret &&
         session.checkoutSessionId &&
         session.activePlanKey !== session.planKey
         ? session.planKey
         : null;
-    const markWalletUnavailable = useCallback((intentKey) => {
+    const reportWalletAvailability = useCallback((intentKey, available) => {
         setWalletAvailability({
-            available: false,
+            available: available,
             intentKey,
         });
-        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(false);
+        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(available);
     }, [onAvailabilityChange]);
+    const reportWalletPreparationFailure = useCallback((intentKey) => {
+        setWalletAvailability((current) => current.intentKey === intentKey
+            ? current
+            : {
+                available: null,
+                intentKey,
+            });
+    }, []);
     useEffect(() => {
         if (slotDisabled ||
             suspended ||
@@ -72,12 +81,12 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         void (async () => {
             const readyClientSecret = await session.prepareWalletCheckout();
             if (!readyClientSecret) {
-                markWalletUnavailable(requestKey);
+                reportWalletPreparationFailure(requestKey);
             }
         })();
     }, [
         expressCheckoutAllowed,
-        markWalletUnavailable,
+        reportWalletPreparationFailure,
         session,
         slotDisabled,
         suspended,
@@ -96,11 +105,7 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         onError === null || onError === void 0 ? void 0 : onError(message);
     };
     const handleAvailabilityChange = (available) => {
-        setWalletAvailability({
-            available,
-            intentKey: session.intentKey,
-        });
-        onAvailabilityChange === null || onAvailabilityChange === void 0 ? void 0 : onAvailabilityChange(available);
+        reportWalletAvailability(session.intentKey, available);
     };
     const handlePlaceholderClick = async () => {
         if (slotDisabled || session.loading.wallet) {
@@ -112,9 +117,12 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         }
         const readyClientSecret = await session.prepareWalletCheckout();
         if (!readyClientSecret) {
-            markWalletUnavailable(session.intentKey);
+            reportWalletPreparationFailure(session.intentKey);
         }
     };
+    const placeholderRenderer = placeholderIsPreparing
+        ? renderPreparingPlaceholder !== null && renderPreparingPlaceholder !== void 0 ? renderPreparingPlaceholder : renderPlaceholder
+        : renderPlaceholder;
     return (_jsxs(_Fragment, { children: [shouldRenderPlaceholder || shouldRenderExpressCheckout ? (_jsxs("div", { className: [
                     'wallet-subscription-checkout-slot',
                     placeholderIsPreparing ? 'is-loading' : '',
@@ -123,7 +131,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, 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)({
+                        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: placeholderRenderer({
                             className,
                             disabled: slotDisabled,
                             label: placeholderLabel,

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.js

@@ -70,6 +70,10 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
     const activePlanKey = clientSecretIntentKey === intentKey ? clientSecretPlanKey : null;
     const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey), [checkoutMode, runtimeStripePublishableKey]);
     const previousIntentKeyRef = useRef(intentKey);
+    const analyticsMetadataRef = useRef(analyticsMetadata);
+    useEffect(() => {
+        analyticsMetadataRef.current = analyticsMetadata;
+    }, [analyticsMetadata]);
     const clearActiveCheckoutSession = useCallback(() => {
         requestIdRef.current += 1;
         creatingIntentRef.current = null;
@@ -129,7 +133,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
             try {
                 const response = await createStripeSubscriptionCheckout({
                     plan,
-                    analyticsMetadata,
+                    analyticsMetadata: analyticsMetadataRef.current,
                     couponId,
                     customerEmail,
                     returnUrl,
@@ -173,7 +177,6 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         return subscriptionRequest;
     }, [
         activeClientSecret,
-        analyticsMetadata,
         checkoutMode,
         clearActiveCheckoutSession,
         configured,
@@ -228,7 +231,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
             await updateStripeSubscriptionCheckoutPlan({
                 checkoutSessionId: activeCheckoutSessionId,
                 plan,
-                analyticsMetadata,
+                analyticsMetadata: analyticsMetadataRef.current,
                 couponId,
                 customerEmail,
                 user_id: userId,
@@ -245,7 +248,6 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
     }, [
         activeCheckoutSessionId,
         activePlanKey,
-        analyticsMetadata,
         checkoutMode,
         configured,
         couponId,
@@ -257,7 +259,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         setError,
         userId,
     ]);
-    return {
+    return useMemo(() => ({
         activeClientSecret,
         activePlanKey,
         checkoutSessionId: activeCheckoutSessionId,
@@ -275,5 +277,22 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         setError,
         stripePromise,
         updateCheckoutSessionPlan,
-    };
+    }), [
+        activeCheckoutSessionId,
+        activeClientSecret,
+        activePlanKey,
+        configured,
+        error,
+        intentKey,
+        loading,
+        planKey,
+        prepareCardCheckout,
+        prepareWalletCheckout,
+        reset,
+        restartCardCheckout,
+        restartWalletCheckout,
+        setError,
+        stripePromise,
+        updateCheckoutSessionPlan,
+    ]);
 }

package/dist/services/runtime-mode.service.d.ts

@@ -1 +1,7 @@
+import { type RuntimeMode } from '@funnelsgrove/runtime';
 export * from '@funnelsgrove/runtime';
+export type PaymentRuntimeConfig = {
+    funnelSdkPublishableKey?: string | null;
+};
+export declare const resolvePaymentRuntimeMode: (runtimeMode: RuntimeMode, runtimeConfig?: PaymentRuntimeConfig | null) => RuntimeMode;
+export declare const usePaymentRuntimeMode: (runtimeConfig?: PaymentRuntimeConfig | null) => RuntimeMode;

package/dist/services/runtime-mode.service.js

@@ -1 +1,13 @@
+import { useMemo } from 'react';
+import { useRuntimeMode } from '@funnelsgrove/runtime';
 export * from '@funnelsgrove/runtime';
+export const resolvePaymentRuntimeMode = (runtimeMode, runtimeConfig) => {
+    void runtimeConfig;
+    return runtimeMode;
+};
+export const usePaymentRuntimeMode = (runtimeConfig) => {
+    var _a;
+    const [runtimeMode] = useRuntimeMode();
+    const funnelSdkPublishableKey = (_a = runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey) !== null && _a !== void 0 ? _a : null;
+    return useMemo(() => resolvePaymentRuntimeMode(runtimeMode, { funnelSdkPublishableKey }), [funnelSdkPublishableKey, runtimeMode]);
+};

package/dist/testing/walletCheckoutSmoke.d.ts

@@ -0,0 +1,92 @@
+export type WalletCheckoutSmokeProfileId = 'mobile-safari' | 'mobile-chrome';
+export type WalletCheckoutSmokeProfile = {
+    id: WalletCheckoutSmokeProfileId;
+    name: string;
+    userAgent: string;
+    viewport: {
+        width: number;
+        height: number;
+        isMobile: boolean;
+        hasTouch: boolean;
+    };
+};
+export type WalletCheckoutSmokeSnapshot = {
+    blockingOverlayVisible: boolean;
+    cardFallbackVisible: boolean;
+    subscriptionRequestSucceeded: boolean;
+    walletSlotState: 'ready' | 'unavailable' | 'unknown';
+};
+export type WalletCheckoutSmokeEvaluation = {
+    failures: string[];
+    ok: boolean;
+};
+export type WalletCheckoutSmokeSelectors = {
+    blockingOverlay?: string;
+    cardFallback: string;
+    walletSlot: string;
+};
+export type WalletCheckoutSmokeOptions = {
+    profiles?: WalletCheckoutSmokeProfile[];
+    selectors: WalletCheckoutSmokeSelectors;
+    subscriptionRequestPath?: string;
+    timeoutMs?: number;
+    url: string;
+};
+export type WalletCheckoutSmokeProfileResult = WalletCheckoutSmokeEvaluation & {
+    profileId: WalletCheckoutSmokeProfileId;
+    snapshot: WalletCheckoutSmokeSnapshot;
+};
+export type WalletCheckoutSmokeResult = {
+    ok: boolean;
+    results: WalletCheckoutSmokeProfileResult[];
+};
+type PlaywrightPage = {
+    click: (selector: string, options?: {
+        timeout?: number;
+    }) => Promise<void>;
+    close?: () => Promise<void>;
+    goto: (url: string, options?: {
+        waitUntil?: 'domcontentloaded' | 'load' | 'networkidle';
+    }) => Promise<unknown>;
+    isVisible: (selector: string, options?: {
+        timeout?: number;
+    }) => Promise<boolean>;
+    waitForLoadState: (state?: 'domcontentloaded' | 'load' | 'networkidle', options?: {
+        timeout?: number;
+    }) => Promise<void>;
+    waitForResponse: (predicate: (response: {
+        status: () => number;
+        url: () => string;
+    }) => boolean, options?: {
+        timeout?: number;
+    }) => Promise<unknown>;
+    waitForSelector: (selector: string, options?: {
+        state?: 'attached' | 'detached' | 'hidden' | 'visible';
+        timeout?: number;
+    }) => Promise<unknown>;
+};
+type PlaywrightContext = {
+    close: () => Promise<void>;
+    newPage: () => Promise<PlaywrightPage>;
+};
+type PlaywrightBrowser = {
+    close: () => Promise<void>;
+    newContext: (options: {
+        hasTouch: boolean;
+        isMobile: boolean;
+        userAgent: string;
+        viewport: {
+            width: number;
+            height: number;
+        };
+    }) => Promise<PlaywrightContext>;
+};
+type PlaywrightChromium = {
+    launch: (options?: {
+        headless?: boolean;
+    }) => Promise<PlaywrightBrowser>;
+};
+export declare function buildWalletCheckoutSmokeProfiles(): WalletCheckoutSmokeProfile[];
+export declare function evaluateWalletCheckoutSmokeSnapshot(snapshot: WalletCheckoutSmokeSnapshot): WalletCheckoutSmokeEvaluation;
+export declare function runWalletCheckoutSmokeTest(chromium: PlaywrightChromium, options: WalletCheckoutSmokeOptions): Promise<WalletCheckoutSmokeResult>;
+export {};

package/dist/testing/walletCheckoutSmoke.js

@@ -0,0 +1,111 @@
+export function buildWalletCheckoutSmokeProfiles() {
+    return [
+        {
+            id: 'mobile-safari',
+            name: 'Mobile Safari',
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1',
+            viewport: {
+                width: 390,
+                height: 844,
+                hasTouch: true,
+                isMobile: true,
+            },
+        },
+        {
+            id: 'mobile-chrome',
+            name: 'Mobile Chrome',
+            userAgent: 'Mozilla/5.0 (Linux; Android 14; Pixel 8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36',
+            viewport: {
+                width: 412,
+                height: 915,
+                hasTouch: true,
+                isMobile: true,
+            },
+        },
+    ];
+}
+export function evaluateWalletCheckoutSmokeSnapshot(snapshot) {
+    const failures = [];
+    if (!snapshot.subscriptionRequestSucceeded) {
+        failures.push('subscription checkout session request did not succeed');
+    }
+    if (snapshot.walletSlotState === 'unknown') {
+        failures.push('wallet slot never reached Stripe readiness or known unavailable state');
+    }
+    if (!snapshot.cardFallbackVisible) {
+        failures.push('card fallback checkout is not visible');
+    }
+    if (snapshot.blockingOverlayVisible) {
+        failures.push('a blocking loader or modal is still visible');
+    }
+    return {
+        ok: failures.length === 0,
+        failures,
+    };
+}
+export async function runWalletCheckoutSmokeTest(chromium, options) {
+    var _a, _b, _c;
+    const profiles = (_a = options.profiles) !== null && _a !== void 0 ? _a : buildWalletCheckoutSmokeProfiles();
+    const timeoutMs = (_b = options.timeoutMs) !== null && _b !== void 0 ? _b : 15000;
+    const subscriptionRequestPath = (_c = options.subscriptionRequestPath) !== null && _c !== void 0 ? _c : '/sdk/public/payments/subscriptions';
+    const browser = await chromium.launch({ headless: true });
+    try {
+        const results = [];
+        for (const profile of profiles) {
+            const context = await browser.newContext({
+                hasTouch: profile.viewport.hasTouch,
+                isMobile: profile.viewport.isMobile,
+                userAgent: profile.userAgent,
+                viewport: {
+                    width: profile.viewport.width,
+                    height: profile.viewport.height,
+                },
+            });
+            try {
+                const page = await context.newPage();
+                const subscriptionResponse = page
+                    .waitForResponse((response) => response.url().includes(subscriptionRequestPath) &&
+                    response.status() >= 200 &&
+                    response.status() < 300, { timeout: timeoutMs })
+                    .then(() => true)
+                    .catch(() => false);
+                await page.goto(options.url, { waitUntil: 'domcontentloaded' });
+                await page.waitForLoadState('networkidle', { timeout: timeoutMs }).catch(() => undefined);
+                const walletSlotResolved = await Promise.race([
+                    page.waitForSelector(`${options.selectors.walletSlot}.has-express-checkout`, {
+                        timeout: timeoutMs,
+                    }).then(() => 'ready'),
+                    page.waitForSelector(options.selectors.walletSlot, {
+                        state: 'detached',
+                        timeout: timeoutMs,
+                    }).then(() => 'unavailable'),
+                ]).catch(() => 'unknown');
+                const snapshot = {
+                    blockingOverlayVisible: options.selectors.blockingOverlay
+                        ? await page.isVisible(options.selectors.blockingOverlay, { timeout: 500 }).catch(() => false)
+                        : false,
+                    cardFallbackVisible: await page
+                        .isVisible(options.selectors.cardFallback, { timeout: timeoutMs })
+                        .catch(() => false),
+                    subscriptionRequestSucceeded: await subscriptionResponse,
+                    walletSlotState: walletSlotResolved,
+                };
+                const evaluation = evaluateWalletCheckoutSmokeSnapshot(snapshot);
+                if (snapshot.cardFallbackVisible) {
+                    await page.click(options.selectors.cardFallback, { timeout: timeoutMs }).catch(() => undefined);
+                }
+                results.push(Object.assign(Object.assign({}, evaluation), { profileId: profile.id, snapshot }));
+            }
+            finally {
+                await context.close();
+            }
+        }
+        return {
+            ok: results.every((result) => result.ok),
+            results,
+        };
+    }
+    finally {
+        await browser.close();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",
@@ -23,10 +23,11 @@
     "build": "rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/fix-esm-relative-imports.mjs dist",
     "lint": "eslint .",
     "prepublishOnly": "npm run build",
+    "smoke:wallet": "npm run build && node scripts/wallet-checkout-smoke.mjs",
     "test:run": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@funnelsgrove/runtime": "0.1.14",
+    "@funnelsgrove/runtime": "^0.1.18",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",
     "react": "19.2.3",