@tagadapay/plugin-sdk 2.8.8 → 2.8.9

package/dist/v2/react/hooks/useFunnel.js

@@ -5,7 +5,7 @@
  * and the v2 ApiClient for API calls.
  */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FunnelActionType, FunnelResource } from '../../core/resources/funnel';
 import { useTagadaContext } from '../providers/TagadaProvider';
 import { getGlobalApiClient } from './useApiQuery';
@@ -20,7 +20,7 @@ const funnelQueryKeys = {
  * Modern funnel navigation using TanStack Query for state management
  * and the v2 ApiClient architecture.
  */
-export function useFunnel(options) {
+export function useFunnel(options = {}) {
     const { auth, store, debugMode, updateFunnelDebugData } = useTagadaContext();
     const queryClient = useQueryClient();
     const apiClient = getGlobalApiClient();
@@ -29,10 +29,53 @@ export function useFunnel(options) {
     const [context, setContext] = useState(null);
     const [initializationAttempted, setInitializationAttempted] = useState(false);
     const [initializationError, setInitializationError] = useState(null);
+    // Track the last processed URL funnelId to avoid re-processing on context changes
+    const lastProcessedUrlFunnelIdRef = useRef(undefined);
+    // Check if we have an existing session in cookies (to avoid unnecessary re-initialization)
+    const hasExistingSessionCookie = useMemo(() => {
+        if (typeof document === 'undefined')
+            return false;
+        const funnelSessionCookie = document.cookie
+            .split('; ')
+            .find(row => row.startsWith('tgd-funnel-session-id='));
+        return !!funnelSessionCookie;
+    }, []); // Only check once on mount
     const currentStepId = options.currentStepId || context?.currentStepId;
-    // Check for URL parameter overrides
-    const urlParams = typeof window !== 'undefined' ? new URLSearchParams(window.location.search) : new URLSearchParams();
-    const urlFunnelId = urlParams.get('funnelId') || undefined;
+    // Check for URL parameter overrides - recalculate on every render to detect URL changes
+    // This is cheap and ensures we always have the latest URL params
+    const [currentUrl, setCurrentUrl] = useState(() => typeof window !== 'undefined' ? window.location.href : '');
+    // Listen for URL changes (navigation)
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const updateUrl = () => {
+            setCurrentUrl(window.location.href);
+        };
+        // Listen for popstate (back/forward buttons) and pushState/replaceState
+        window.addEventListener('popstate', updateUrl);
+        // Also update on any navigation
+        const originalPushState = window.history.pushState;
+        const originalReplaceState = window.history.replaceState;
+        window.history.pushState = function (...args) {
+            originalPushState.apply(window.history, args);
+            updateUrl();
+        };
+        window.history.replaceState = function (...args) {
+            originalReplaceState.apply(window.history, args);
+            updateUrl();
+        };
+        return () => {
+            window.removeEventListener('popstate', updateUrl);
+            window.history.pushState = originalPushState;
+            window.history.replaceState = originalReplaceState;
+        };
+    }, []);
+    const urlFunnelId = useMemo(() => {
+        if (typeof window === 'undefined')
+            return undefined;
+        const params = new URLSearchParams(window.location.search);
+        return params.get('funnelId') || undefined;
+    }, [currentUrl]); // Re-compute when URL changes
     const effectiveFunnelId = urlFunnelId || options.funnelId;
     /**
      * Fetch debug data for the funnel debugger
@@ -66,13 +109,8 @@ export function useFunnel(options) {
                 console.warn('🍪 Funnel: No session ID available for query');
                 return null;
             }
-            // ✅ Automatically include currentUrl for session sync on page load/refresh
-            const currentUrl = typeof window !== 'undefined' ? window.location.href : undefined;
             console.log(`🍪 Funnel: Fetching session data for ID: ${context.sessionId}`);
-            if (currentUrl) {
-                console.log(`🍪 Funnel: Including current URL for sync: ${currentUrl}`);
-            }
-            const response = await funnelResource.getSession(context.sessionId, currentUrl);
+            const response = await funnelResource.getSession(context.sessionId);
             console.log(`🍪 Funnel: Session fetch response:`, response);
             if (response.success && response.context) {
                 return response.context;
@@ -90,8 +128,14 @@ export function useFunnel(options) {
             if (!auth.session?.customerId || !store?.id) {
                 throw new Error('Authentication required for funnel session');
             }
+            // Get CURRENT URL params (not cached) to ensure we have latest values
+            const currentUrlParams = typeof window !== 'undefined'
+                ? new URLSearchParams(window.location.search)
+                : new URLSearchParams();
+            const currentUrlFunnelId = currentUrlParams.get('funnelId') || undefined;
+            const currentEffectiveFunnelId = currentUrlFunnelId || options.funnelId;
             // Check for existing session ID in URL parameters
-            let existingSessionId = urlParams.get('funnelSessionId') || undefined;
+            let existingSessionId = currentUrlParams.get('funnelSessionId') || undefined;
             if (existingSessionId) {
                 console.log(`🍪 Funnel: Found session ID in URL params: ${existingSessionId}`);
             }
@@ -102,11 +146,23 @@ export function useFunnel(options) {
                     .find(row => row.startsWith('tgd-funnel-session-id='));
                 existingSessionId = funnelSessionCookie ? funnelSessionCookie.split('=')[1] : undefined;
                 if (existingSessionId) {
-                    console.log(`🍪 Funnel: Found session in cookie: ${existingSessionId}`);
+                    console.log(`🍪 Funnel: Found existing session in cookie: ${existingSessionId}`);
                 }
             }
-            if (!existingSessionId) {
-                console.log(`🍪 Funnel: No existing session found in URL params or cookie`);
+            // Log initialization strategy
+            console.log(`🍪 Funnel: Initialize request:`);
+            console.log(`   - Existing session ID: ${existingSessionId || 'none'}`);
+            console.log(`   - URL funnelId: ${currentUrlFunnelId || 'none'}`);
+            console.log(`   - Hook funnelId: ${options.funnelId || 'none'}`);
+            console.log(`   - Effective funnelId to send: ${currentEffectiveFunnelId || 'none (will use existing or backend default)'}`);
+            if (existingSessionId && !currentEffectiveFunnelId) {
+                console.log(`   → Strategy: REUSE existing session from cookie`);
+            }
+            else if (existingSessionId && currentEffectiveFunnelId) {
+                console.log(`   → Strategy: VALIDATE existing session matches funnelId, or create new`);
+            }
+            else {
+                console.log(`   → Strategy: CREATE new session`);
             }
             // Send minimal CMS session data
             const cmsSessionData = {
@@ -115,17 +171,35 @@ export function useFunnel(options) {
                 sessionId: auth.session.sessionId,
                 accountId: auth.session.accountId
             };
+            // Get current URL for session synchronization
+            const currentUrl = typeof window !== 'undefined' ? window.location.href : undefined;
             // Call API to initialize session - backend will restore existing or create new
             const requestBody = {
                 cmsSession: cmsSessionData,
                 entryStepId, // Optional override
-                existingSessionId // Pass existing session ID from URL or cookie
+                existingSessionId, // Pass existing session ID from URL or cookie
+                currentUrl // Include current URL for step tracking
             };
             // Only include funnelId if it's provided (for backend fallback)
-            if (effectiveFunnelId) {
-                requestBody.funnelId = effectiveFunnelId;
+            if (currentEffectiveFunnelId) {
+                requestBody.funnelId = currentEffectiveFunnelId;
             }
+            console.log(`📤 Funnel: Sending initialize request to backend:`);
+            console.log(`   Request body:`, JSON.stringify({
+                ...requestBody,
+                cmsSession: { ...cmsSessionData, sessionId: `${cmsSessionData.sessionId.substring(0, 20)}...` }
+            }, null, 2));
             const response = await funnelResource.initialize(requestBody);
+            console.log(`📥 Funnel: Received response from backend:`);
+            console.log(`   Success: ${response.success}`);
+            if (response.context) {
+                console.log(`   Returned session ID: ${response.context.sessionId}`);
+                console.log(`   Returned funnel ID: ${response.context.funnelId}`);
+                console.log(`   Is same session? ${response.context.sessionId === existingSessionId ? '✅ YES (reused)' : '❌ NO (new session created)'}`);
+            }
+            if (response.error) {
+                console.log(`   Error: ${response.error}`);
+            }
             if (response.success && response.context) {
                 return response.context;
             }
@@ -138,7 +212,10 @@ export function useFunnel(options) {
             setInitializationError(null);
             // Set session cookie for persistence across page reloads
             setSessionCookie(newContext.sessionId);
-            console.log(`🍪 Funnel: Initialized session for funnel ${effectiveFunnelId || 'default'}`, newContext);
+            console.log(`✅ Funnel: Session initialized/loaded successfully`);
+            console.log(`   - Session ID: ${newContext.sessionId}`);
+            console.log(`   - Funnel ID: ${newContext.funnelId}`);
+            console.log(`   - Current Step: ${newContext.currentStepId}`);
             // Fetch debug data if in debug mode
             if (debugMode) {
                 void fetchFunnelDebugData(newContext.sessionId);
@@ -317,6 +394,8 @@ export function useFunnel(options) {
                 return;
             console.log(`🍪 Funnel: Ended session ${context.sessionId}`);
             setContext(null);
+            // Reset the processed URL funnelId ref to allow re-initialization
+            lastProcessedUrlFunnelIdRef.current = undefined;
             // Clear queries
             queryClient.removeQueries({
                 queryKey: funnelQueryKeys.session(context.sessionId)
@@ -421,29 +500,127 @@ export function useFunnel(options) {
         setInitializationError(null);
         await initializeSession();
     }, [initializeSession]);
-    // Auto-initialize if requested and not already initialized
+    /**
+     * Auto-initialization effect
+     *
+     * Handles funnel session initialization with the following logic:
+     * 1. If no session exists => Initialize with URL funnelId or hook funnelId or backend default
+     * 2. If session exists + explicit funnelId provided that differs => Reset and create new
+     * 3. If session exists + no funnelId provided => Keep existing session
+     *
+     * IMPORTANT: Only resets session if an EXPLICIT funnelId is provided that differs
+     * from the current session. If no funnelId is provided, keeps the existing session.
+     *
+     * Priority: URL funnelId > Hook funnelId > Existing session funnelId > Backend default
+     */
     useEffect(() => {
-        if (options.autoInitialize &&
-            !context &&
-            !initializationAttempted &&
-            !initializationError &&
-            auth.session?.customerId &&
-            store?.id &&
-            !initializeMutation.isPending) {
-            console.log('🍪 Funnel: Auto-initializing session...');
+        console.log('🔍 Funnel: Auto-init effect triggered');
+        console.log(`   - autoInitialize: ${options.autoInitialize ?? true}`);
+        console.log(`   - hasAuth: ${!!auth.session?.customerId}`);
+        console.log(`   - hasStore: ${!!store?.id}`);
+        console.log(`   - isPending: ${initializeMutation.isPending}`);
+        console.log(`   - hasContext: ${!!context}`);
+        console.log(`   - context.sessionId: ${context?.sessionId || 'none'}`);
+        console.log(`   - context.funnelId: ${context?.funnelId || 'none'}`);
+        console.log(`   - urlFunnelId: ${urlFunnelId || 'none'}`);
+        console.log(`   - options.funnelId: ${options.funnelId || 'none'}`);
+        console.log(`   - initializationAttempted: ${initializationAttempted}`);
+        console.log(`   - hasExistingSessionCookie: ${hasExistingSessionCookie}`);
+        // Skip if auto-initialize is disabled
+        const autoInit = options.autoInitialize ?? true; // Default to true
+        if (!autoInit) {
+            console.log('⏭️  Funnel: Skipping - auto-initialize disabled');
+            return;
+        }
+        // Skip if required dependencies are not available
+        if (!auth.session?.customerId || !store?.id) {
+            console.log('⏭️  Funnel: Skipping - missing auth or store');
+            return;
+        }
+        // Skip if already initializing
+        if (initializeMutation.isPending) {
+            console.log('⏭️  Funnel: Skipping - already initializing');
+            return;
+        }
+        // Determine if we have an explicit funnelId request (URL has priority)
+        const explicitFunnelId = urlFunnelId || options.funnelId;
+        console.log(`   - explicitFunnelId: ${explicitFunnelId || 'none'}`);
+        // Case 1: No session exists yet - need to initialize
+        if (!context) {
+            console.log('📍 Funnel: Case 1 - No context exists');
+            // Check if we've already attempted initialization
+            if (!initializationAttempted) {
+                if (hasExistingSessionCookie) {
+                    console.log('🍪 Funnel: Loading existing session from cookie...');
+                }
+                else {
+                    console.log('🍪 Funnel: No session found - creating new session...');
+                }
+                if (explicitFunnelId) {
+                    console.log(`   with funnelId: ${explicitFunnelId}`);
+                }
+                setInitializationAttempted(true);
+                initializeSession().catch(error => {
+                    console.error('❌ Funnel: Auto-initialization failed:', error);
+                });
+            }
+            else {
+                console.log('⏭️  Funnel: Skipping - already attempted initialization');
+            }
+            return;
+        }
+        console.log('📍 Funnel: Case 2 - Context exists, checking for reset needs');
+        // Case 2: Session exists - check if we need to reset it
+        // ONLY reset if an explicit funnelId is provided AND it differs from current session
+        if (explicitFunnelId && context.funnelId && explicitFunnelId !== context.funnelId) {
+            console.log(`🔍 Funnel: Mismatch check - explicitFunnelId: ${explicitFunnelId}, context.funnelId: ${context.funnelId}`);
+            // Check if we've already processed this funnelId to prevent loops
+            if (lastProcessedUrlFunnelIdRef.current === explicitFunnelId) {
+                console.log('⏭️  Funnel: Skipping - already processed this funnelId');
+                return;
+            }
+            console.log(`🔄 Funnel: Explicit funnelId mismatch detected!`);
+            console.log(`   Current session funnelId: ${context.funnelId}`);
+            console.log(`   Requested funnelId: ${explicitFunnelId}`);
+            console.log(`   Resetting session...`);
+            // Mark this funnelId as processed
+            lastProcessedUrlFunnelIdRef.current = explicitFunnelId;
+            // Clear existing session
+            setContext(null);
+            setInitializationAttempted(false);
+            setInitializationError(null);
+            // Clear session cookie
+            document.cookie = 'tgd-funnel-session-id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
+            // Clear queries for old session
+            queryClient.removeQueries({
+                queryKey: funnelQueryKeys.session(context.sessionId)
+            });
+            // Initialize new session with correct funnelId
+            console.log(`🍪 Funnel: Creating new session with funnelId: ${explicitFunnelId}`);
             initializeSession().catch(error => {
-                console.error('Auto-initialization failed - will not retry:', error);
+                console.error('❌ Funnel: Failed to reset session:', error);
             });
         }
+        else {
+            // Case 3: Session exists and no conflicting funnelId - keep using it
+            console.log('✅ Funnel: Case 3 - Keeping existing session (no reset needed)');
+            console.log(`   - explicitFunnelId: ${explicitFunnelId || 'none (will keep existing)'}`);
+            console.log(`   - context.funnelId: ${context.funnelId}`);
+            console.log(`   - Match or no explicit request: keeping session ${context.sessionId}`);
+        }
     }, [
         options.autoInitialize,
-        context,
+        options.funnelId,
+        urlFunnelId,
+        context?.funnelId,
+        context?.sessionId,
         initializationAttempted,
-        initializationError,
         auth.session?.customerId,
         store?.id,
         initializeMutation.isPending,
-        initializeSession
+        initializeSession,
+        hasExistingSessionCookie,
+        queryClient
     ]);
     // Sync session data from query to local state
     useEffect(() => {

package/dist/v2/react/hooks/useGoogleAutocomplete.js

@@ -15,6 +15,7 @@ export function useGoogleAutocomplete(options) {
     const autocompleteServiceRef = useRef(null);
     const placesServiceRef = useRef(null);
     const scriptLoadedRef = useRef(false);
+    const debounceTimeoutRef = useRef(null);
     // Inject Google Maps script
     useEffect(() => {
         if (!apiKey) {
@@ -97,25 +98,32 @@ export function useGoogleAutocomplete(options) {
             setPredictions([]);
             return;
         }
-        setIsLoading(true);
-        const request = {
-            input,
-            ...(countryRestriction && {
-                componentRestrictions: { country: countryRestriction.toLowerCase() },
-            }),
-        };
-        autocompleteServiceRef.current.getPlacePredictions(request, (results, status) => {
-            setIsLoading(false);
-            if (status === window.google.maps.places.PlacesServiceStatus.OK && results) {
-                setPredictions(results);
-            }
-            else {
-                setPredictions([]);
-                if (status !== window.google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
-                    // Prediction failed but not zero results
+        // Clear existing timeout
+        if (debounceTimeoutRef.current) {
+            clearTimeout(debounceTimeoutRef.current);
+        }
+        // Set new timeout
+        debounceTimeoutRef.current = setTimeout(() => {
+            setIsLoading(true);
+            const request = {
+                input,
+                ...(countryRestriction && {
+                    componentRestrictions: { country: countryRestriction.toLowerCase() },
+                }),
+            };
+            autocompleteServiceRef.current.getPlacePredictions(request, (results, status) => {
+                setIsLoading(false);
+                if (status === window.google.maps.places.PlacesServiceStatus.OK && results) {
+                    setPredictions(results);
                 }
-            }
-        });
+                else {
+                    setPredictions([]);
+                    if (status !== window.google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
+                        // Prediction failed but not zero results
+                    }
+                }
+            });
+        }, 300); // 300ms debounce
     }, [initializeServices, isScriptLoaded]);
     // Get detailed place information
     const getPlaceDetails = useCallback((placeId) => {

package/dist/v2/react/hooks/useISOData.js

@@ -25,8 +25,10 @@ export function useISOData(language = 'en', autoImport = true, disputeSetting =
     }, [language, autoImport]);
     const data = useMemo(() => {
         try {
+            console.log('[SDK] Loading ISO data for language:', language, 'autoImport:', autoImport);
             // Get countries from pre-built data with language support
             const countriesArray = getCountries(language);
+            console.log('[SDK] Loaded countries count:', countriesArray.length);
             // Transform to our expected format (Record<string, ISOCountry>)
             const countries = {};
             countriesArray.forEach((country) => {
@@ -85,8 +87,8 @@ export function useISOData(language = 'en', autoImport = true, disputeSetting =
                 registeredLanguages,
             };
         }
-        catch (_error) {
-            // Error handling removed
+        catch (error) {
+            console.error('[SDK] Error loading ISO data:', error);
             return {
                 countries: {},
                 getRegions: () => [],

package/dist/v2/react/hooks/useOffersQuery.d.ts

@@ -2,8 +2,8 @@
  * Offers Hook using TanStack Query
  * Handles offers with automatic caching
  */
-import { Offer } from '../../core/resources/offers';
-import { CheckoutSessionState, OrderSummary, CurrencyOptions } from '../../core/resources/postPurchases';
+import { Offer, OfferSummary } from '../../core/resources/offers';
+import { CurrencyOptions, OrderSummary } from '../../core/resources/postPurchases';
 export interface UseOffersQueryOptions {
     /**
      * Array of offer IDs to fetch
@@ -18,32 +18,27 @@ export interface UseOffersQueryOptions {
      * Return URL for checkout sessions
      */
     returnUrl?: string;
+    /**
+     * Order ID to associate with the offers (required for payments)
+     */
+    orderId?: string;
 }
 export interface UseOffersQueryResult {
     offers: Offer[];
     isLoading: boolean;
     error: Error | null;
-    refetch: () => Promise<void>;
-    createCheckoutSession: (offerId: string, options?: {
-        returnUrl?: string;
-    }) => Promise<{
-        checkoutUrl: string;
-    }>;
+    /**
+     * Pay for an offer
+     * Initializes a checkout session and pays it
+     */
     payOffer: (offerId: string, orderId?: string) => Promise<void>;
-    transformToCheckout: (offerId: string, options?: {
-        returnUrl?: string;
-    }) => Promise<{
-        checkoutUrl: string;
-    }>;
-    getOffer: (offerId: string) => Offer | undefined;
-    getTotalValue: () => number;
-    getTotalSavings: () => number;
-    payWithCheckoutSession: (checkoutSessionId: string, orderId?: string) => Promise<void>;
-    initCheckoutSession: (offerId: string, orderId: string, customerId?: string) => Promise<{
-        checkoutSessionId: string;
-    }>;
-    getCheckoutSessionState: (offerId: string) => CheckoutSessionState | null;
-    initializeOfferCheckout: (offerId: string) => Promise<void>;
+    /**
+     * Preview an offer's price/summary
+     */
+    preview: (offerId: string) => Promise<OrderSummary | OfferSummary | null>;
+    /**
+     * Get available variants for a product in an offer
+     */
     getAvailableVariants: (offerId: string, productId: string) => {
         variantId: string;
         variantName: string;
@@ -53,13 +48,13 @@ export interface UseOffersQueryResult {
         priceId: string;
         currencyOptions: CurrencyOptions;
     }[];
-    selectVariant: (offerId: string, productId: string, variantId: string) => Promise<void>;
-    getOrderSummary: (offerId: string) => OrderSummary | null;
+    /**
+     * Select a variant for a product in an offer
+     */
+    selectVariant: (offerId: string, productId: string, variantId: string) => Promise<OrderSummary | null>;
+    /**
+     * Check if variants are loading for a product
+     */
     isLoadingVariants: (offerId: string, productId: string) => boolean;
-    isUpdatingOrderSummary: (offerId: string) => boolean;
-    confirmPurchase: (offerId: string, options?: {
-        draft?: boolean;
-        returnUrl?: string;
-    }) => Promise<void>;
 }
 export declare function useOffersQuery(options?: UseOffersQueryOptions): UseOffersQueryResult;