@funnelsgrove/payments 0.1.30 → 0.1.32

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

@@ -1,6 +1,19 @@
 import { type ReactNode } from 'react';
 import type { AvailablePaymentMethods, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
 import { type StripeSubscriptionCheckoutSession } from './useStripeSubscriptionCheckoutSession.js';
+export type WalletSubscriptionCheckoutRenderStateInput = {
+    expressCheckoutAllowed: boolean;
+    hasActiveClientSecret: boolean;
+    hasStripePromise: boolean;
+    suspended: boolean;
+    walletAvailable: boolean | null;
+};
+export type WalletSubscriptionCheckoutRenderState = {
+    placeholderIsPreparing: boolean;
+    shouldRenderExpressCheckout: boolean;
+    shouldRenderPlaceholder: boolean;
+};
+export declare function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, }: WalletSubscriptionCheckoutRenderStateInput): WalletSubscriptionCheckoutRenderState;
 type WalletPlaceholderButtonProps = {
     className?: string;
     disabled: boolean;

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -3,6 +3,22 @@ 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, }) {
+    const shouldRenderExpressCheckout = !suspended &&
+        expressCheckoutAllowed &&
+        walletAvailable !== false &&
+        hasActiveClientSecret &&
+        hasStripePromise;
+    const shouldRenderPlaceholder = !shouldRenderExpressCheckout &&
+        !suspended &&
+        expressCheckoutAllowed &&
+        walletAvailable === null;
+    return {
+        placeholderIsPreparing: shouldRenderPlaceholder,
+        shouldRenderExpressCheckout,
+        shouldRenderPlaceholder,
+    };
+}
 export function WalletSubscriptionCheckoutLoadingPlaceholder({ className, label, }) {
     return (_jsxs("div", { className: [
             'wallet-subscription-checkout-slot__loading',
@@ -21,16 +37,13 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
     const walletAvailable = walletAvailability.intentKey === session.intentKey
         ? walletAvailability.available
         : null;
-    const shouldRenderExpressCheckout = !suspended &&
-        expressCheckoutAllowed &&
-        walletAvailable !== false &&
-        Boolean(session.activeClientSecret) &&
-        Boolean(session.stripePromise);
-    const shouldRenderPlaceholder = !shouldRenderExpressCheckout &&
-        !suspended &&
-        expressCheckoutAllowed &&
-        walletAvailable === null;
-    const placeholderIsPreparing = shouldRenderPlaceholder;
+    const { placeholderIsPreparing, shouldRenderExpressCheckout, shouldRenderPlaceholder, } = getWalletSubscriptionCheckoutRenderState({
+        expressCheckoutAllowed,
+        hasActiveClientSecret: Boolean(session.activeClientSecret),
+        hasStripePromise: Boolean(session.stripePromise),
+        suspended,
+        walletAvailable,
+    });
     const serverUpdateKey = session.activeClientSecret &&
         session.checkoutSessionId &&
         session.activePlanKey !== session.planKey

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

@@ -35,5 +35,10 @@ export type StripeSubscriptionCheckoutSession = {
     stripePromise: Promise<Stripe | null> | null;
     updateCheckoutSessionPlan: () => Promise<boolean>;
 };
+export type StripeSubscriptionCheckoutIntentKeyInput = Pick<StripeSubscriptionCheckoutSessionInput, 'checkoutMode' | 'couponId' | 'customerEmail' | 'returnUrl' | 'runtimeConfig' | 'userId'> & {
+    analyticsMetadata?: Record<string, unknown> | null;
+};
+export declare function buildStripeSubscriptionCheckoutIntentKey({ checkoutMode, couponId, customerEmail, returnUrl, runtimeConfig, userId, }: StripeSubscriptionCheckoutIntentKeyInput): string;
+export declare function shouldResetStripeSubscriptionCheckoutSessionForIntentKey(previousIntentKey: string | null, nextIntentKey: string): boolean;
 export declare function isInactiveCheckoutSessionError(message?: string | null): boolean;
 export declare function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMetadata, couponId, customerEmail, displayPlan, enabled, onError, plan, returnUrl, runtimeConfig, userId, }: StripeSubscriptionCheckoutSessionInput): StripeSubscriptionCheckoutSession;

package/dist/providers/stripe/useStripeSubscriptionCheckoutSession.js

@@ -1,5 +1,5 @@
 'use client';
-import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { createEmptyCheckoutPreparationLoading, } from '../paymentProvider.types.js';
 import { createStripeSubscriptionCheckout, getStripePromise, isStripeConfigured, updateStripeSubscriptionCheckoutPlan, } from '../../services/stripe.service.js';
 const getFriendlyStripeCheckoutError = (error) => {
@@ -9,6 +9,29 @@ const getFriendlyStripeCheckoutError = (error) => {
         : message;
 };
 const normalizeRuntimeConfigValue = (value) => (value === null || value === void 0 ? void 0 : value.trim()) || '';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+export function buildStripeSubscriptionCheckoutIntentKey({ checkoutMode, couponId, customerEmail, returnUrl, runtimeConfig, userId, }) {
+    const runtimeConfigSignature = [
+        normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.apiBaseUrl),
+        normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelId),
+        normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelVersionId),
+        normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey),
+    ].join('|');
+    const customerEmailSignature = normalizeRuntimeConfigValue(customerEmail);
+    const userIdSignature = normalizeRuntimeConfigValue(userId);
+    return [
+        'stripe',
+        checkoutMode,
+        runtimeConfigSignature,
+        customerEmailSignature,
+        userIdSignature,
+        (couponId === null || couponId === void 0 ? void 0 : couponId.trim()) || '',
+        returnUrl.trim(),
+    ].join('|');
+}
+export function shouldResetStripeSubscriptionCheckoutSessionForIntentKey(previousIntentKey, nextIntentKey) {
+    return previousIntentKey !== null && previousIntentKey !== nextIntentKey;
+}
 export function isInactiveCheckoutSessionError(message) {
     var _a;
     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 : '');
@@ -24,26 +47,17 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
     const [runtimeStripePublishableKey, setRuntimeStripePublishableKey] = useState(null);
     const creatingIntentRef = useRef(null);
     const requestIdRef = useRef(0);
-    const runtimeConfigSignature = [
-        normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.apiBaseUrl),
-        normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelId),
-        normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelVersionId),
-        normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey),
-    ].join('|');
-    const customerEmailSignature = normalizeRuntimeConfigValue(customerEmail);
-    const userIdSignature = normalizeRuntimeConfigValue(userId);
     const configured = enabled &&
         (isStripeConfigured(checkoutMode) ||
             Boolean(normalizeRuntimeConfigValue(runtimeConfig === null || runtimeConfig === void 0 ? void 0 : runtimeConfig.funnelSdkPublishableKey)));
-    const intentKey = [
-        'stripe',
+    const intentKey = buildStripeSubscriptionCheckoutIntentKey({
         checkoutMode,
-        runtimeConfigSignature,
-        customerEmailSignature,
-        userIdSignature,
-        (couponId === null || couponId === void 0 ? void 0 : couponId.trim()) || '',
-        returnUrl.trim(),
-    ].join('|');
+        couponId,
+        customerEmail,
+        returnUrl,
+        runtimeConfig,
+        userId,
+    });
     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 : '',
@@ -55,6 +69,7 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
     const activeCheckoutSessionId = clientSecretIntentKey === intentKey ? checkoutSessionId : null;
     const activePlanKey = clientSecretIntentKey === intentKey ? clientSecretPlanKey : null;
     const stripePromise = useMemo(() => getStripePromise(checkoutMode, runtimeStripePublishableKey), [checkoutMode, runtimeStripePublishableKey]);
+    const previousIntentKeyRef = useRef(intentKey);
     const clearActiveCheckoutSession = useCallback(() => {
         requestIdRef.current += 1;
         creatingIntentRef.current = null;
@@ -79,8 +94,12 @@ export function useStripeSubscriptionCheckoutSession({ checkoutMode, analyticsMe
         setRuntimeStripePublishableKey(null);
         setError(null);
     }, [clearActiveCheckoutSession, setError]);
-    useEffect(() => {
-        reset();
+    useIsomorphicLayoutEffect(() => {
+        const previousIntentKey = previousIntentKeyRef.current;
+        previousIntentKeyRef.current = intentKey;
+        if (shouldResetStripeSubscriptionCheckoutSessionForIntentKey(previousIntentKey, intentKey)) {
+            reset();
+        }
     }, [intentKey, reset]);
     const setSourceLoading = useCallback((source, value) => {
         setLoading((current) => current[source] === value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "type": "module",
   "private": false,
   "main": "./dist/index.js",