@funnelsgrove/payments 0.7.4 → 0.7.5

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.d.ts

@@ -1,3 +1,4 @@
+import type { FunnelSdkRuntimeConfigOverrides, FunnelStepType, RuntimeMode } from '@funnelsgrove/runtime';
 import { type PrepareSolidgateCheckoutInput, type SolidgateCheckoutPreparation } from '../services/solidgate.service.js';
 export type SolidgateCheckoutDialogState = 'loading' | 'ready' | 'submitting' | 'verifying' | 'success' | 'recoverable_error' | 'expired';
 export type SolidgateCheckoutDialogContent = {
@@ -15,6 +16,7 @@ export type SolidgateCheckoutDialogContent = {
 export type SolidgateCheckoutDialogProps = {
     open: boolean;
     request: Omit<PrepareSolidgateCheckoutInput, 'signal'>;
+    checkoutAnalytics?: SolidgateCheckoutAnalyticsContext | null;
     content?: Partial<SolidgateCheckoutDialogContent>;
     onClose: () => void;
     onSuccess?: (checkout: SolidgateCheckoutPreparation) => void | Promise<void>;
@@ -22,4 +24,14 @@ export type SolidgateCheckoutDialogProps = {
     onError?: (message: string) => void;
     onStateChange?: (state: SolidgateCheckoutDialogState) => void;
 };
-export declare function SolidgateCheckoutDialog({ open, request, content, onClose, onSuccess, onRetry, onError, onStateChange, }: SolidgateCheckoutDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export type SolidgateCheckoutAnalyticsContext = {
+    environment?: RuntimeMode;
+    featureFlags?: Record<string, string | null | undefined>;
+    metadata?: Record<string, unknown> | null;
+    runtimeConfig?: FunnelSdkRuntimeConfigOverrides;
+    stepId: string;
+    stepName: string;
+    stepType: Extract<FunnelStepType, 'checkout' | 'paywall_offer' | 'upsell_offer'>;
+    stepContractVersion: number;
+};
+export declare function SolidgateCheckoutDialog({ open, request, checkoutAnalytics, content, onClose, onSuccess, onRetry, onError, onStateChange, }: SolidgateCheckoutDialogProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/providers/solidgate/components/SolidgateCheckoutDialog.js

@@ -1,5 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { publicAnalyticsSdk } from '@funnelsgrove/analytics';
 import { Suspense, lazy, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { pollSolidgateCheckoutStatus, prepareSolidgateCheckout, } from '../services/solidgate.service.js';
 const SolidgatePayment = lazy(async () => ({
@@ -22,6 +23,32 @@ const initialView = {
     checkout: null,
     canResumeVerification: false,
 };
+const trackSolidgateCheckoutEvent = async (eventName, attemptId, context) => {
+    var _a;
+    if (!context) {
+        return;
+    }
+    const input = {
+        eventId: eventName === 'checkout_started' ? attemptId : `add_payment_info:${attemptId}`,
+        featureFlags: context.featureFlags,
+        stepId: context.stepId,
+        stepName: context.stepName,
+        stepType: context.stepType,
+        stepContractVersion: context.stepContractVersion,
+        metadata: Object.assign(Object.assign({}, (context.metadata || {})), { checkoutSessionId: attemptId, checkout_session_id: attemptId, environment: context.environment || ((_a = context.metadata) === null || _a === void 0 ? void 0 : _a.environment), payment_provider: 'solidgate' }),
+    };
+    try {
+        const trackedEventId = eventName === 'checkout_started'
+            ? publicAnalyticsSdk.trackCheckoutStarted(input)
+            : publicAnalyticsSdk.trackPaymentInfoSubmitted(input);
+        if (trackedEventId) {
+            await publicAnalyticsSdk.flush().catch(() => 0);
+        }
+    }
+    catch (_b) {
+        // Analytics must never prevent payment.
+    }
+};
 const isAbortError = (error) => (error instanceof DOMException && error.name === 'AbortError');
 const safeDestroyPaymentForm = (instance) => {
     var _a;
@@ -40,39 +67,44 @@ const safeDestroyPaymentForm = (instance) => {
 };
 function SolidgatePaymentForm({ checkout, hidden, loadingLabel, onError, onMounted, onSubmit, onVerify, }) {
     const instanceRef = useRef(null);
+    const applePayContainerRef = useRef(null);
+    const googlePayContainerRef = useRef(null);
     useEffect(() => () => {
         safeDestroyPaymentForm(instanceRef.current);
         instanceRef.current = null;
     }, [checkout.attemptId]);
-    return (_jsx("div", { className: hidden ? 'hidden' : 'block', "data-solidgate-attempt-id": checkout.attemptId, "aria-hidden": hidden || undefined, children: _jsx(Suspense, { fallback: (_jsx("p", { role: 'status', className: 'text-sm text-muted-foreground', children: loadingLabel })), children: _jsx(SolidgatePayment, { merchantData: checkout.initialization.merchantData, width: '100%', formParams: { isSolidLogoVisible: true }, onReadyPaymentInstance: (instance) => {
-                    if (instanceRef.current && instanceRef.current !== instance) {
-                        try {
-                            instanceRef.current.unsubscribeAll();
+    return (_jsxs("div", { className: hidden ? 'hidden' : 'block', "data-solidgate-attempt-id": checkout.attemptId, "aria-hidden": hidden || undefined, children: [_jsxs("div", { className: 'mb-3 grid gap-3', children: [_jsx("div", { ref: applePayContainerRef, "data-solidgate-wallet": 'apple-pay' }), _jsx("div", { ref: googlePayContainerRef, "data-solidgate-wallet": 'google-pay' })] }), _jsx(Suspense, { fallback: (_jsx("p", { role: 'status', className: 'text-sm text-muted-foreground', children: loadingLabel })), children: _jsx(SolidgatePayment, { merchantData: checkout.initialization.merchantData, width: '100%', formParams: { isSolidLogoVisible: true }, applePayContainerRef: applePayContainerRef, googlePayContainerRef: googlePayContainerRef, onReadyPaymentInstance: (instance) => {
+                        if (instanceRef.current && instanceRef.current !== instance) {
+                            try {
+                                instanceRef.current.unsubscribeAll();
+                            }
+                            catch (_a) {
+                                // The active instance remains usable even if stale-listener cleanup fails.
+                            }
                         }
-                        catch (_a) {
-                            // The active instance remains usable even if stale-listener cleanup fails.
-                        }
-                    }
-                    instanceRef.current = instance;
-                }, onMounted: onMounted, onSubmit: onSubmit, onVerify: onVerify, onSuccess: onVerify, onFail: onVerify, onError: onError }, checkout.attemptId) }) }));
+                        instanceRef.current = instance;
+                    }, onMounted: onMounted, onSubmit: onSubmit, onVerify: onVerify, onSuccess: onVerify, onFail: onVerify, onError: onError }, checkout.attemptId) })] }));
 }
-export function SolidgateCheckoutDialog({ open, request, content, onClose, onSuccess, onRetry, onError, onStateChange, }) {
+export function SolidgateCheckoutDialog({ open, request, checkoutAnalytics, content, onClose, onSuccess, onRetry, onError, onStateChange, }) {
     const copy = useMemo(() => (Object.assign(Object.assign({}, defaultContent), content)), [content]);
     const [view, setView] = useState(initialView);
     const prepareAbortRef = useRef(null);
     const statusAbortRef = useRef(null);
     const successAttemptRef = useRef(null);
+    const paymentInfoAttemptRef = useRef(null);
+    const checkoutAnalyticsRef = useRef(checkoutAnalytics);
     const closeButtonRef = useRef(null);
     const copyRef = useRef(copy);
     const onErrorRef = useRef(onError);
     const onStateChangeRef = useRef(onStateChange);
     const onSuccessRef = useRef(onSuccess);
     useEffect(() => {
+        checkoutAnalyticsRef.current = checkoutAnalytics;
         copyRef.current = copy;
         onErrorRef.current = onError;
         onStateChangeRef.current = onStateChange;
         onSuccessRef.current = onSuccess;
-    }, [copy, onError, onStateChange, onSuccess]);
+    }, [checkoutAnalytics, copy, onError, onStateChange, onSuccess]);
     const { discountKeyOrProviderId, failUrl, funnelEndUserId, funnelId, idempotencyKey, offerSetId, projectBillingPlanId, returnUrl, runtimeConfig, successUrl, } = request;
     const { apiBaseUrl, funnelId: runtimeFunnelId, funnelSdkPublishableKey, funnelVersionId, } = runtimeConfig || {};
     const hasRuntimeConfig = runtimeConfig !== undefined;
@@ -125,6 +157,7 @@ export function SolidgateCheckoutDialog({ open, request, content, onClose, onSuc
         (_d = statusAbortRef.current) === null || _d === void 0 ? void 0 : _d.abort();
         prepareAbortRef.current = controller;
         successAttemptRef.current = null;
+        paymentInfoAttemptRef.current = null;
         queueMicrotask(() => {
             if (!controller.signal.aborted) {
                 setState(initialView);
@@ -134,6 +167,7 @@ export function SolidgateCheckoutDialog({ open, request, content, onClose, onSuc
             .then((checkout) => {
             if (!controller.signal.aborted) {
                 setState({ state: 'ready', checkout, canResumeVerification: false });
+                void trackSolidgateCheckoutEvent('checkout_started', checkout.attemptId, checkoutAnalyticsRef.current);
             }
         })
             .catch((error) => {
@@ -242,7 +276,14 @@ export function SolidgateCheckoutDialog({ open, request, content, onClose, onSuc
                         if (view.state === 'loading') {
                             setState(Object.assign(Object.assign({}, view), { state: 'ready' }));
                         }
-                    }, onSubmit: () => setState(Object.assign(Object.assign({}, view), { state: 'submitting' })), onVerify: () => void verifyCanonicalStatus(), onError: () => {
+                    }, onSubmit: () => {
+                        var _a, _b, _c;
+                        if (paymentInfoAttemptRef.current !== ((_a = view.checkout) === null || _a === void 0 ? void 0 : _a.attemptId)) {
+                            paymentInfoAttemptRef.current = ((_b = view.checkout) === null || _b === void 0 ? void 0 : _b.attemptId) || null;
+                            void trackSolidgateCheckoutEvent('add_payment_info', ((_c = view.checkout) === null || _c === void 0 ? void 0 : _c.attemptId) || '', checkoutAnalyticsRef.current);
+                        }
+                        setState(Object.assign(Object.assign({}, view), { state: 'submitting' }));
+                    }, onVerify: () => void verifyCanonicalStatus(), onError: () => {
                         var _a;
                         setState(Object.assign(Object.assign({}, view), { state: 'recoverable_error', canResumeVerification: false }));
                         (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, copyRef.current.error);

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

@@ -5,6 +5,7 @@ import type { RuntimeMode } from '@funnelsgrove/runtime';
 import { type RemoteProjectBillingPlan } from '../../../services/planCatalog.service.js';
 export type PaywallPlan = {
     id: string;
+    projectPlanId?: string;
     offerSetId?: string;
     offerSetKey?: string;
     title: string;

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

@@ -6,6 +6,8 @@ export type ResolvedPublishedBillingRuntime = {
     revisionId: string | null;
     mode: RuntimeMode;
     offerSetId: string;
+    paymentProfileId: string | null;
+    provider: 'stripe' | 'solidgate';
     experimentId: string | null;
     variantKey: string | null;
     experiments: readonly FunnelExperimentDefinition[];

package/dist/services/publishedBillingRuntime.service.js

@@ -2,7 +2,7 @@ import { resolveGeneratedOfferSetRuntime, resolvePublishedOfferSetSelection, res
 import { buildBillingDiscountCatalog } from './paywallOffer.service.js';
 import { buildConfigPaywallPlans, } from '../providers/stripe/services/stripe.service.js';
 export const resolvePublishedBillingRuntime = ({ config, featureFlags, mode, search = '', defaultOfferSetId, baseCatalogsByMode, fallbackDiscounts, resolvedExperiments = resolvePublishedRuntimeExperiments(config), }) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const offerSets = (_a = config === null || config === void 0 ? void 0 : config.offerSets) !== null && _a !== void 0 ? _a : [];
     const selection = resolvePublishedOfferSetSelection({
         offerSets,
@@ -26,6 +26,8 @@ export const resolvePublishedBillingRuntime = ({ config, featureFlags, mode, sea
         revisionId: (_b = config === null || config === void 0 ? void 0 : config.revisionId) !== null && _b !== void 0 ? _b : null,
         mode,
         offerSetId: selection.offerSetId,
+        paymentProfileId: ((_d = (_c = runtime.offerSet) === null || _c === void 0 ? void 0 : _c.paymentProfileId) === null || _d === void 0 ? void 0 : _d.trim()) || null,
+        provider: runtime.getPaymentProvider(mode),
         experimentId: selection.experimentId,
         variantKey: selection.variantKey,
         experiments: resolvedExperiments.experiments,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funnelsgrove/payments",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/The-Solid-Grove/funnelsgrove.git",
@@ -32,8 +32,8 @@
     "test:run": "vitest run --passWithNoTests"
   },
   "dependencies": {
-    "@funnelsgrove/analytics": "^0.1.52",
-    "@funnelsgrove/runtime": "^0.7.3",
+    "@funnelsgrove/analytics": "^0.1.61",
+    "@funnelsgrove/runtime": "^0.7.12",
     "@solidgate/react-sdk": "1.34.0",
     "@stripe/react-stripe-js": "^5.6.0",
     "@stripe/stripe-js": "^8.7.0",