@tagadapay/plugin-sdk 3.0.14 → 3.0.15

package/dist/v2/core/client.d.ts

@@ -58,6 +58,7 @@ export declare class TagadaClient {
     private tokenPromise;
     private tokenResolver;
     private boundHandleStorageChange;
+    private boundHandlePageshow;
     private readonly config;
     private instanceId;
     private isInitializingSession;

package/dist/v2/core/client.js

@@ -26,6 +26,29 @@ export class TagadaClient {
         this.config = config;
         this.instanceId = Math.random().toString(36).substr(2, 9);
         this.boundHandleStorageChange = this.handleStorageChange.bind(this);
+        this.boundHandlePageshow = (event) => {
+            if (event.persisted) {
+                if (this.state.debugMode) {
+                    console.log(`[TagadaClient ${this.instanceId}] Page restored from BFcache (back button), re-initializing funnel...`);
+                }
+                // If we have an active session and store, we only need to re-initialize the funnel
+                // This ensures tracking is correct and the session is fresh on the backend
+                if (this.funnel && this.state.session && this.state.store) {
+                    this.funnel.resetInitialization();
+                    const accountId = this.getAccountId();
+                    const urlParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
+                    const funnelId = urlParams.get('funnelId') || undefined;
+                    this.funnel.autoInitialize({ customerId: this.state.session.customerId, sessionId: this.state.session.sessionId }, { id: this.state.store.id, accountId }, funnelId).catch((err) => {
+                        console.error('[TagadaClient] Funnel re-initialization failed:', err);
+                    });
+                }
+                else {
+                    // If state is missing, perform a full initialization
+                    this.sessionInitRetryCount = 0;
+                    this.initialize();
+                }
+            }
+        };
         console.log(`[TagadaClient ${this.instanceId}] Initializing...`);
         console.log(`[TagadaClient ${this.instanceId}] Config:`, {
             debugMode: config.debugMode,
@@ -115,6 +138,7 @@ export class TagadaClient {
         // Listen for storage changes (cross-tab sync)
         if (typeof window !== 'undefined') {
             window.addEventListener('storage', this.boundHandleStorageChange);
+            window.addEventListener('pageshow', this.boundHandlePageshow);
         }
         // Setup config hot-reload listener (for live config editing)
         this.setupConfigHotReload();
@@ -127,6 +151,7 @@ export class TagadaClient {
     destroy() {
         if (typeof window !== 'undefined') {
             window.removeEventListener('storage', this.boundHandleStorageChange);
+            window.removeEventListener('pageshow', this.boundHandlePageshow);
         }
         if (this.state.debugMode) {
             console.log(`[TagadaClient ${this.instanceId}] Destroyed`);

package/dist/v2/core/funnelClient.d.ts

@@ -50,6 +50,15 @@ export declare class FunnelClient {
      * Get current state
      */
     getState(): FunnelState;
+    /**
+     * Get the session ID that would be used for initialization (URL params or cookie)
+     * This allows getting the session ID even before the client is fully initialized.
+     */
+    getDetectedSessionId(): string | null;
+    /**
+     * Reset initialization state (used for back-button restores)
+     */
+    resetInitialization(): void;
     /**
      * Initialize session with automatic detection (cookies, URL, etc.)
      */

package/dist/v2/core/funnelClient.js

@@ -92,6 +92,37 @@ export class FunnelClient {
     getState() {
         return this.state;
     }
+    /**
+     * Get the session ID that would be used for initialization (URL params or cookie)
+     * This allows getting the session ID even before the client is fully initialized.
+     */
+    getDetectedSessionId() {
+        // Priority 1: Already initialized session
+        if (this.state.context?.sessionId) {
+            return this.state.context.sessionId;
+        }
+        if (typeof window === 'undefined')
+            return null;
+        // Priority 2: URL params
+        const params = new URLSearchParams(window.location.search);
+        const urlSessionId = params.get('funnelSessionId');
+        if (urlSessionId)
+            return urlSessionId;
+        // Priority 3: Cookie
+        return getFunnelSessionCookie() || null;
+    }
+    /**
+     * Reset initialization state (used for back-button restores)
+     */
+    resetInitialization() {
+        this.initializationAttempted = false;
+        this.isInitializing = false;
+        // Clear context to force a fresh autoInitialize call to hit the backend
+        this.updateState({
+            context: null,
+            isInitialized: false,
+        });
+    }
     /**
      * Initialize session with automatic detection (cookies, URL, etc.)
      */
@@ -106,15 +137,12 @@ export class FunnelClient {
         this.isInitializing = true;
         this.updateState({ isLoading: true, error: null });
         try {
-            // URL params
+            // 🎯 Get detected session ID
+            const existingSessionId = this.getDetectedSessionId();
+            // URL params for funnelId
             const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
             const urlFunnelId = params.get('funnelId');
             const effectiveFunnelId = urlFunnelId || funnelId;
-            let existingSessionId = params.get('funnelSessionId');
-            // Cookie fallback
-            if (!existingSessionId) {
-                existingSessionId = getFunnelSessionCookie() || null;
-            }
             // 🎯 Read funnel tracking data from injected HTML
             const injectedFunnelId = getAssignedFunnelId(); // Funnel ID from server
             const funnelVariantId = getAssignedFunnelVariant(); // A/B test variant ID

package/dist/v2/core/resources/checkout.d.ts

@@ -209,6 +209,38 @@ export declare class CheckoutResource {
         customerId: string;
         status: 'processing';
     }>;
+    /**
+     * Preload checkout session (ultra-fast background pre-computation) ⚡⚡⚡
+     *
+     * This is the recommended way to handle cart changes or "Buy Now" intent.
+     * It pre-computes everything (checkoutToken, navigation URL, CMS session)
+     * before the user even clicks the checkout button.
+     *
+     * The SDK automatically gets funnelSessionId from FunnelClient if provided.
+     * Only FunnelClient knows how to properly extract funnelSessionId (from state, URL, cookies, etc.)
+     *
+     * @param params - Checkout and funnel parameters
+     * @param getFunnelSessionId - Optional function to get funnelSessionId from FunnelClient
+     *                             This maintains separation of concerns - only FunnelClient knows how to get it
+     *
+     * @returns { checkoutToken, customerId, navigationUrl }
+     */
+    preloadCheckout(params: CheckoutInitParams & {
+        funnelSessionId?: string;
+        currentUrl?: string;
+        funnelStepId?: string;
+        funnelVariantId?: string;
+        navigationEvent?: string | {
+            type: string;
+            data?: any;
+        };
+        navigationOptions?: any;
+    }, getFunnelSessionId?: () => string | null | undefined): Promise<{
+        checkoutToken: string;
+        customerId: string;
+        navigationUrl: string | null;
+        funnelStepId?: string;
+    }>;
     /**
      * Check async checkout processing status (instant, no waiting)
      * Perfect for polling or checking if background job completed

package/dist/v2/core/resources/checkout.js

@@ -33,6 +33,44 @@ export class CheckoutResource {
     async initCheckoutAsync(params) {
         return this.apiClient.post('/api/v1/checkout/session/init-async', params);
     }
+    /**
+     * Preload checkout session (ultra-fast background pre-computation) ⚡⚡⚡
+     *
+     * This is the recommended way to handle cart changes or "Buy Now" intent.
+     * It pre-computes everything (checkoutToken, navigation URL, CMS session)
+     * before the user even clicks the checkout button.
+     *
+     * The SDK automatically gets funnelSessionId from FunnelClient if provided.
+     * Only FunnelClient knows how to properly extract funnelSessionId (from state, URL, cookies, etc.)
+     *
+     * @param params - Checkout and funnel parameters
+     * @param getFunnelSessionId - Optional function to get funnelSessionId from FunnelClient
+     *                             This maintains separation of concerns - only FunnelClient knows how to get it
+     *
+     * @returns { checkoutToken, customerId, navigationUrl }
+     */
+    async preloadCheckout(params, getFunnelSessionId) {
+        // ⚡ GET FUNNEL SESSION ID: Only FunnelClient knows how to properly get it
+        // Priority: explicit param > FunnelClient > backend fallback (via currentUrl)
+        let funnelSessionId = params.funnelSessionId;
+        if (!funnelSessionId && getFunnelSessionId) {
+            // Let FunnelClient handle extraction (from state, URL, cookies, etc.)
+            funnelSessionId = getFunnelSessionId() || undefined;
+        }
+        // Format navigationEvent if it's a string
+        const navigationEvent = typeof params.navigationEvent === 'string'
+            ? { type: params.navigationEvent }
+            : params.navigationEvent;
+        // Build request - backend will also try to extract from currentUrl if not provided
+        const requestParams = {
+            ...params,
+            ...(funnelSessionId && { funnelSessionId }),
+            ...(navigationEvent && { navigationEvent }),
+            // Ensure currentUrl is always set for backend extraction fallback
+            currentUrl: params.currentUrl || (typeof window !== 'undefined' ? window.location.href : undefined),
+        };
+        return this.apiClient.post('/api/v1/checkout/session/preload', requestParams);
+    }
     /**
      * Check async checkout processing status (instant, no waiting)
      * Perfect for polling or checking if background job completed

package/dist/v2/core/resources/funnel.d.ts

@@ -430,6 +430,7 @@ export interface SimpleFunnelContext<TCustom = {}> {
      * For backward compatibility and flexible unstructured data
      */
     metadata?: Record<string, any>;
+    script?: string;
 }
 export interface FunnelInitializeRequest {
     cmsSession: {

package/dist/v2/react/providers/TagadaProvider.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * TagadaProvider - Main provider component for the Tagada Pay React SDK
  */
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { ApiService } from '../../../react/services/apiService';
 import { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits, } from '../../../react/utils/money';
 import { TagadaClient } from '../../core/client';
@@ -211,6 +211,8 @@ export function TagadaProvider({ children, environment, customApiConfig, debugMo
         formatSimpleMoney,
     }), []);
     const [isDebugDrawerOpen, setIsDebugDrawerOpen] = useState(false);
+    // Track last injected script to prevent duplicate execution
+    const lastInjectedScriptRef = useRef(null);
     // Funnel Methods
     const funnelMethods = useMemo(() => {
         if (!client.funnel) {
@@ -283,6 +285,63 @@ export function TagadaProvider({ children, environment, customApiConfig, debugMo
             },
         };
     }, [client, state.auth.session, state.store, funnelId, onNavigate]);
+    // Inject funnel script into the page
+    useEffect(() => {
+        // Only run in browser environment
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const scriptContent = funnelState.context?.script;
+        const scriptId = 'tagada-funnel-script';
+        if (!scriptContent || !scriptContent.trim()) {
+            // Clear ref if script is removed
+            lastInjectedScriptRef.current = null;
+            // Remove existing script if it exists
+            const existingScript = document.getElementById(scriptId);
+            if (existingScript) {
+                existingScript.remove();
+            }
+            return;
+        }
+        // Extract script content (remove <script> tags if present)
+        let scriptBody = scriptContent.trim();
+        // Check if script is wrapped in <script> tags
+        const scriptTagMatch = scriptBody.match(/^<script[^>]*>([\s\S]*)<\/script>$/i);
+        if (scriptTagMatch) {
+            scriptBody = scriptTagMatch[1].trim();
+        }
+        // Skip if script body is empty after extraction
+        if (!scriptBody) {
+            return;
+        }
+        // Prevent duplicate injection of the same script content
+        // This handles React StrictMode double-execution in development
+        if (lastInjectedScriptRef.current === scriptBody) {
+            return;
+        }
+        // Remove existing script if it exists (for script updates)
+        const existingScript = document.getElementById(scriptId);
+        if (existingScript) {
+            existingScript.remove();
+        }
+        // Create and inject new script element
+        const scriptElement = document.createElement('script');
+        scriptElement.id = scriptId;
+        scriptElement.textContent = scriptBody;
+        document.body.appendChild(scriptElement);
+        // Track this script content to prevent re-injection (handles React StrictMode double-execution)
+        lastInjectedScriptRef.current = scriptBody;
+        // Cleanup: remove script element but keep ref to prevent re-injection on StrictMode second run
+        return () => {
+            const scriptToRemove = document.getElementById(scriptId);
+            if (scriptToRemove) {
+                scriptToRemove.remove();
+            }
+            // Note: We intentionally DON'T clear lastInjectedScriptRef here
+            // This prevents React StrictMode from re-injecting the same script on the second run
+            // The ref will be cleared when script content actually changes (next effect run)
+        };
+    }, [funnelState.context?.script]);
     const contextValue = {
         client,
         ...state,
@@ -301,6 +360,7 @@ export function TagadaProvider({ children, environment, customApiConfig, debugMo
         refreshCoordinator,
         money: moneyUtils,
     };
+    console.log('contextValue', contextValue, contextValue.funnel.currentStep);
     // Query Client
     const [queryClient] = useState(() => new QueryClient({
         defaultOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tagadapay/plugin-sdk",
-  "version": "3.0.14",
+  "version": "3.0.15",
   "description": "Modern React SDK for building Tagada Pay plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",