@funnelsgrove/payments 0.1.48 → 0.1.49

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import type { Stripe } from '@stripe/stripe-js';
+import { type StripeSubscriptionCheckoutAnalyticsContext } from '../../services/checkoutCompletionAnalytics.service.js';
 export type SharedStripeCheckoutSummaryRow = {
     id: string;
     label: string;
@@ -8,6 +9,8 @@ export type SharedStripeCheckoutSummaryRow = {
 };
 export type SharedStripeCheckoutDialogProps = {
     amountCents: number;
+    checkoutAnalytics?: StripeSubscriptionCheckoutAnalyticsContext | null;
+    checkoutSessionId?: string | null;
     clientSecret: string;
     closeAriaLabel: string;
     customerEmailEditable?: boolean;
@@ -41,4 +44,4 @@ export type SharedStripeCheckoutDialogProps = {
 };
 export declare function useApplePayQrFallbackAllowed(): boolean;
 export declare function useApplePayExpressCheckoutAllowed(): boolean;
-export declare function SharedStripeCheckoutDialog({ clientSecret, onClose, stripePromise, ...props }: SharedStripeCheckoutDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function SharedStripeCheckoutDialog({ checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise, ...props }: SharedStripeCheckoutDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/SharedStripeCheckoutDialog.js

@@ -16,6 +16,7 @@ import { CardCvcElement, CardExpiryElement, CardNumberElement, Elements, useElem
 import { ApplePaySubscribeButton } from './ApplePaySubscribeButton.js';
 import { PaymentBrandMark, SecurityLockIcon, StripeWordmark, } from './CheckoutBrandAssets.js';
 import { StripeExpressCheckoutButton } from './StripeExpressCheckoutButton.js';
+import { trackStripeSubscriptionCheckoutStarted, } from '../../services/checkoutCompletionAnalytics.service.js';
 const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 const defaultPaymentMethodLabels = ['Visa', 'Mastercard', 'PayPal', 'G Pay', 'Apple Pay'];
 const normalizeBillingName = (input) => {
@@ -244,7 +245,13 @@ function SharedStripeCheckoutForm({ amountCents, clientSecret, closeAriaLabel, c
                                                     } }) })] })] })] }), fieldError ? _jsx("p", { className: 'shared-stripe-checkout-error', children: fieldError }) : null, _jsx("button", { type: 'submit', className: 'shared-stripe-checkout-submit', disabled: !canSubmit, children: submitting ? processingLabel : submitLabel }), _jsxs("div", { className: 'shared-stripe-checkout-trust', children: [_jsxs("p", { className: 'shared-stripe-checkout-secure', children: [_jsx(SecurityLockIcon, { className: 'shared-stripe-checkout-secure-icon' }), _jsx("span", { children: secureLabel })] }), _jsxs("p", { className: 'shared-stripe-checkout-powered', children: [poweredByText ? _jsx("span", { children: poweredByText }) : null, showsStripeWordmark ? (_jsx(StripeWordmark, { className: 'shared-stripe-checkout-powered-mark' })) : null] })] }), paymentMethodLabels.length > 0 ? (_jsx("div", { className: 'shared-stripe-checkout-brands', "aria-hidden": 'true', children: paymentMethodLabels.map((label) => (_jsx(PaymentBrandMark, { label: label, className: 'shared-stripe-checkout-brand' }, label))) })) : null, legalNotice ? (_jsx("div", { className: 'shared-stripe-checkout-legal', children: legalNotice })) : null, renewalNotice ? (_jsx("div", { className: 'shared-stripe-checkout-renewal', children: renewalNotice })) : null] })] }));
 }
 export function SharedStripeCheckoutDialog(_a) {
-    var { clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["clientSecret", "onClose", "stripePromise"]);
+    var { checkoutAnalytics, checkoutSessionId, clientSecret, onClose, stripePromise } = _a, props = __rest(_a, ["checkoutAnalytics", "checkoutSessionId", "clientSecret", "onClose", "stripePromise"]);
+    useEffect(() => {
+        if (!checkoutAnalytics) {
+            return;
+        }
+        void trackStripeSubscriptionCheckoutStarted(Object.assign({ checkoutSessionId }, checkoutAnalytics));
+    }, [checkoutAnalytics, checkoutSessionId, clientSecret]);
     useEffect(() => {
         const handleKeyDown = (event) => {
             if (event.key === 'Escape') {

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

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
 import type { AvailablePaymentMethods, StripeCheckoutExpressCheckoutElementOptions } from '@stripe/stripe-js';
-import type { StripeSubscriptionCheckoutAnalyticsContext } from '../../services/checkoutCompletionAnalytics.service.js';
+import { type StripeSubscriptionCheckoutAnalyticsContext } from '../../services/checkoutCompletionAnalytics.service.js';
 import { type StripeSubscriptionCheckoutSession } from './useStripeSubscriptionCheckoutSession.js';
 export type WalletSubscriptionCheckoutRenderStateInput = {
     expressCheckoutAllowed: boolean;

package/dist/providers/stripe/WalletSubscriptionCheckoutSlot.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { StripeExpressCheckoutElement } from '../../components/shared/StripeExpressCheckoutElement.js';
+import { trackStripeSubscriptionCheckoutStarted, } from '../../services/checkoutCompletionAnalytics.service.js';
 import { isInactiveCheckoutSessionError, } from './useStripeSubscriptionCheckoutSession.js';
 export function getWalletSubscriptionCheckoutRenderState({ expressCheckoutAllowed, hasActiveClientSecret, hasStripePromise, suspended, walletAvailable, walletPreparing, }) {
     const shouldRenderExpressCheckout = !suspended &&
@@ -32,7 +33,8 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
         available: null,
         intentKey: session.intentKey,
     });
-    const autoWalletAttemptedIntentKeyRef = useRef(null);
+    const [walletCheckoutStartedAfterClickIntentKey, setWalletCheckoutStartedAfterClickIntentKey] = useState(null);
+    const walletCheckoutStartedAfterClickSessionIdRef = useRef(null);
     const slotDisabled = disabled || !session.configured;
     const walletAvailable = walletAvailability.intentKey === session.intentKey
         ? walletAvailability.available
@@ -66,31 +68,22 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
             });
     }, []);
     useEffect(() => {
-        if (slotDisabled ||
-            suspended ||
-            !expressCheckoutAllowed ||
-            walletAvailable === false ||
-            session.activeClientSecret) {
+        if (!walletCheckoutStartedAfterClickIntentKey ||
+            walletCheckoutStartedAfterClickIntentKey !== session.intentKey ||
+            !session.checkoutSessionId) {
             return;
         }
-        const requestKey = session.intentKey;
-        if (autoWalletAttemptedIntentKeyRef.current === requestKey) {
+        if (!checkoutAnalytics ||
+            walletCheckoutStartedAfterClickSessionIdRef.current === session.checkoutSessionId) {
             return;
         }
-        autoWalletAttemptedIntentKeyRef.current = requestKey;
-        void (async () => {
-            const readyClientSecret = await session.prepareWalletCheckout();
-            if (!readyClientSecret) {
-                reportWalletPreparationFailure(requestKey);
-            }
-        })();
+        walletCheckoutStartedAfterClickSessionIdRef.current = session.checkoutSessionId;
+        void trackStripeSubscriptionCheckoutStarted(Object.assign({ checkoutSessionId: session.checkoutSessionId }, checkoutAnalytics));
     }, [
-        expressCheckoutAllowed,
-        reportWalletPreparationFailure,
-        session,
-        slotDisabled,
-        suspended,
-        walletAvailable,
+        checkoutAnalytics,
+        session.checkoutSessionId,
+        session.intentKey,
+        walletCheckoutStartedAfterClickIntentKey,
     ]);
     const handleError = (message) => {
         if (isInactiveCheckoutSessionError(message)) {
@@ -115,8 +108,10 @@ export function WalletSubscriptionCheckoutSlot({ amountCents, availabilityPaymen
             await (onUnavailableClick === null || onUnavailableClick === void 0 ? void 0 : onUnavailableClick());
             return;
         }
+        setWalletCheckoutStartedAfterClickIntentKey(session.intentKey);
         const readyClientSecret = await session.prepareWalletCheckout();
         if (!readyClientSecret) {
+            setWalletCheckoutStartedAfterClickIntentKey(null);
             reportWalletPreparationFailure(session.intentKey);
         }
     };

package/dist/testing/walletCheckoutSmoke.d.ts

@@ -1,4 +1,4 @@
-export type WalletCheckoutSmokeProfileId = 'mobile-safari' | 'mobile-chrome';
+export type WalletCheckoutSmokeProfileId = 'mobile-safari' | 'mobile-chrome' | 'instagram-ios' | 'instagram-android';
 export type WalletCheckoutSmokeProfile = {
     id: WalletCheckoutSmokeProfileId;
     name: string;

package/dist/testing/walletCheckoutSmoke.js

@@ -22,6 +22,28 @@ export function buildWalletCheckoutSmokeProfiles() {
                 isMobile: true,
             },
         },
+        {
+            id: 'instagram-ios',
+            name: 'Instagram iOS in-app browser',
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Instagram 333.0.0.36.109 (iPhone16,2; iOS 17_5; en_US; en-US; scale=3.00; 1290x2796; 579418012)',
+            viewport: {
+                width: 390,
+                height: 844,
+                hasTouch: true,
+                isMobile: true,
+            },
+        },
+        {
+            id: 'instagram-android',
+            name: 'Instagram Android in-app browser',
+            userAgent: 'Mozilla/5.0 (Linux; Android 14; Pixel 8 Build/AP2A.240605.024; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/126.0.0.0 Mobile Safari/537.36 Instagram 333.0.0.39.92 Android (34/14; 420dpi; 1080x2400; Google/google; Pixel 8; shiba; shiba; en_US; 579418012)',
+            viewport: {
+                width: 412,
+                height: 915,
+                hasTouch: true,
+                isMobile: true,
+            },
+        },
     ];
 }
 export function evaluateWalletCheckoutSmokeSnapshot(snapshot) {

package/package.json

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