@tagadapay/plugin-sdk 2.8.10 → 3.0.1

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

@@ -0,0 +1,733 @@
+/**
+ * useFunnel Hook (v2) - TanStack Query-based funnel navigation
+ *
+ * Modern implementation using TanStack Query for state management
+ * and the v2 ApiClient for API calls.
+ */
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FunnelActionType, FunnelResource } from '../../core/resources/funnel';
+import { useTagadaContext } from '../providers/TagadaProvider';
+import { getGlobalApiClient } from './useApiQuery';
+// Query keys for funnel operations
+const funnelQueryKeys = {
+    session: (sessionId) => ['funnel', 'session', sessionId],
+    context: (sessionId) => ['funnel', 'context', sessionId],
+};
+/**
+ * React Hook for Funnel Navigation (Plugin SDK v2)
+ *
+ * Modern funnel navigation using TanStack Query for state management
+ * and the v2 ApiClient architecture.
+ */
+export function useFunnel(options = {}) {
+    const { auth, store, debugMode, updateFunnelDebugData, pluginConfig, environment } = useTagadaContext();
+    const queryClient = useQueryClient();
+    const apiClient = getGlobalApiClient();
+    const funnelResource = useMemo(() => new FunnelResource(apiClient), [apiClient]);
+    // Debug log only once on mount
+    const hasLoggedInit = useRef(false);
+    useEffect(() => {
+        if (!hasLoggedInit.current) {
+            console.log('🔍 [useFunnel] Hook initialized with:', {
+                hasPluginConfig: !!pluginConfig,
+                hasStaticResources: !!pluginConfig?.staticResources,
+                staticResourcesKeys: pluginConfig?.staticResources ? Object.keys(pluginConfig.staticResources) : [],
+                environmentType: environment.environment,
+            });
+            hasLoggedInit.current = true;
+        }
+    }, []); // Empty deps - log only once
+    /**
+     * Helper to merge backend context with local static resources
+     * Allows mocking static resources in local development via resources.static.json
+     */
+    const enrichContext = useCallback((ctx) => {
+        console.log('🔍 [useFunnel] enrichContext called:', {
+            sdkEnvironment: environment.environment,
+            backendEnvironment: ctx.environment,
+            hasLocalStaticResources: !!pluginConfig?.staticResources,
+            localStaticResourcesKeys: pluginConfig?.staticResources ? Object.keys(pluginConfig.staticResources) : [],
+            backendStaticKeys: ctx.static ? Object.keys(ctx.static) : [],
+        });
+        // Only use local static resources in local environment (based on SDK detection, not backend)
+        if (environment.environment !== 'local') {
+            console.log('⚠️ [useFunnel] Not in local environment, skipping local static resources');
+            return ctx;
+        }
+        // If we have local static resources (from resources.static.json), merge them
+        // Backend resources take precedence
+        const localStaticResources = pluginConfig?.staticResources || {};
+        if (Object.keys(localStaticResources).length === 0) {
+            console.log('⚠️ [useFunnel] No local static resources found in pluginConfig');
+            return ctx;
+        }
+        console.log('✅ [useFunnel] Merging local static resources:', localStaticResources);
+        const enriched = {
+            ...ctx,
+            static: {
+                ...localStaticResources,
+                ...(ctx.static || {})
+            }
+        };
+        console.log('✅ [useFunnel] Enriched context.static:', enriched.static);
+        return enriched;
+    }, [pluginConfig, environment.environment]);
+    // Local state
+    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);
+    // ✅ Track if initialization is currently in progress to prevent duplicate calls
+    const isInitializingRef = useRef(false);
+    // ✅ Track if we've already initialized for this component instance (guards against React Strict Mode)
+    const hasInitializedOnceRef = useRef(false);
+    // 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 - 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
+     */
+    const fetchFunnelDebugData = useCallback(async (sessionId) => {
+        if (!debugMode) {
+            console.log('🐛 [useFunnel V2] Debug mode is OFF, skipping debug data fetch');
+            return;
+        }
+        console.log('🐛 [useFunnel V2] Fetching debug data for session:', sessionId);
+        try {
+            const response = await funnelResource.getSession(sessionId, undefined, true);
+            console.log('🐛 [useFunnel V2] Debug data response:', response);
+            if (response.success && response.debugData) {
+                updateFunnelDebugData(response.debugData, null, false);
+                console.log('🐛 [useFunnel V2] Debug data updated successfully:', response.debugData);
+            }
+            else {
+                console.warn('🐛 [useFunnel V2] No debug data in response');
+            }
+        }
+        catch (error) {
+            console.error('🐛 [useFunnel V2] Failed to fetch funnel debug data:', error);
+        }
+    }, [funnelResource, debugMode, updateFunnelDebugData]);
+    // Session query - only enabled when we have a session ID
+    const { data: sessionData, isLoading: isSessionLoading, error: sessionError, refetch: refetchSession } = useQuery({
+        queryKey: funnelQueryKeys.session(context?.sessionId || ''),
+        queryFn: async () => {
+            if (!context?.sessionId) {
+                return null;
+            }
+            console.log('🌐 [useFunnel] Fetching session:', context.sessionId);
+            const response = await funnelResource.getSession(context.sessionId);
+            if (response.success && response.context) {
+                return enrichContext(response.context);
+            }
+            throw new Error(response.error || 'Failed to fetch session');
+        },
+        enabled: !!context?.sessionId && (options.enabled !== false),
+        staleTime: 30000, // 30 seconds
+        gcTime: 5 * 60 * 1000, // 5 minutes
+        refetchOnWindowFocus: false,
+        refetchOnMount: false, // Prevent refetch on mount if data exists in cache
+        retry: 1, // Only retry once to avoid multiple failed requests
+    });
+    // Initialize session mutation
+    const initializeMutation = useMutation({
+        mutationFn: async (entryStepId) => {
+            console.log('🚀 [useFunnel] initializeMutation.mutationFn called');
+            // ✅ Prevent duplicate initialization calls
+            if (isInitializingRef.current) {
+                console.log('🔒 [useFunnel] Initialization already in progress, throwing error');
+                throw new Error('Initialization already in progress');
+            }
+            console.log('✅ [useFunnel] Starting initialization process');
+            isInitializingRef.current = true;
+            if (!auth.session?.customerId || !store?.id) {
+                isInitializingRef.current = false;
+                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 = currentUrlParams.get('funnelSessionId') || undefined;
+            if (existingSessionId) {
+                console.log(`🍪 Funnel: Found session ID in URL params: ${existingSessionId}`);
+            }
+            else {
+                // Fallback to cookie for same-domain scenarios
+                const funnelSessionCookie = document.cookie
+                    .split('; ')
+                    .find(row => row.startsWith('tgd-funnel-session-id='));
+                existingSessionId = funnelSessionCookie ? funnelSessionCookie.split('=')[1] : undefined;
+                if (existingSessionId) {
+                    console.log(`🍪 Funnel: Found existing session in cookie: ${existingSessionId}`);
+                }
+            }
+            // 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 = {
+                customerId: auth.session.customerId,
+                storeId: store.id,
+                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
+                currentUrl // Include current URL for step tracking
+            };
+            // Only include funnelId if it's provided (for backend fallback)
+            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 enrichContext(response.context);
+            }
+            else {
+                throw new Error(response.error || 'Failed to initialize funnel session');
+            }
+        },
+        onSuccess: (newContext) => {
+            // ✅ Reset initialization flag
+            isInitializingRef.current = false;
+            // Context is already enriched by mutationFn return, but safe to ensure
+            const enrichedContext = enrichContext(newContext);
+            setContext(enrichedContext);
+            setInitializationError(null);
+            // Set session cookie for persistence across page reloads
+            setSessionCookie(enrichedContext.sessionId);
+            console.log(`✅ Funnel: Session initialized/loaded successfully`);
+            console.log(`   - Session ID: ${enrichedContext.sessionId}`);
+            console.log(`   - Funnel ID: ${enrichedContext.funnelId}`);
+            console.log(`   - Current Step: ${enrichedContext.currentStepId}`);
+            // Fetch debug data if in debug mode
+            if (debugMode) {
+                void fetchFunnelDebugData(enrichedContext.sessionId);
+            }
+            // Set the session query data directly (no need to refetch since initialize already returns full context)
+            queryClient.setQueryData(funnelQueryKeys.session(enrichedContext.sessionId), enrichedContext);
+            console.log(`✅ Funnel: Session query data populated from initialize response (no additional request needed)`);
+        },
+        onError: (error) => {
+            // ✅ Reset initialization flag on error
+            isInitializingRef.current = false;
+            const errorObj = error instanceof Error ? error : new Error(String(error));
+            setInitializationError(errorObj);
+            console.error('Error initializing funnel session:', error);
+            if (options.onError) {
+                options.onError(errorObj);
+            }
+        }
+    });
+    // Navigate mutation
+    const navigateMutation = useMutation({
+        mutationFn: async (event) => {
+            if (!context) {
+                throw new Error('Funnel session not initialized');
+            }
+            if (!context.sessionId) {
+                throw new Error('Funnel session ID missing - session may be corrupted');
+            }
+            // ✅ Automatically include currentUrl for URL-to-Step mapping
+            // User can override by providing event.currentUrl explicitly
+            const currentUrl = event.currentUrl || (typeof window !== 'undefined' ? window.location.href : undefined);
+            if (currentUrl) {
+            }
+            const requestBody = {
+                sessionId: context.sessionId,
+                event: {
+                    type: event.type,
+                    data: event.data,
+                    timestamp: event.timestamp || new Date().toISOString(),
+                    currentUrl: event.currentUrl // Preserve user override if provided
+                },
+                contextUpdates: {
+                    lastActivityAt: Date.now()
+                },
+                currentUrl, // ✅ Send to backend for URL→Step mapping
+                funnelId: effectiveFunnelId || options.funnelId // ✅ Send for session recovery
+            };
+            const response = await funnelResource.navigate(requestBody);
+            if (response.success && response.result) {
+                return response.result;
+            }
+            else {
+                throw new Error(response.error || 'Navigation failed');
+            }
+        },
+        onSuccess: (result) => {
+            if (!context)
+                return;
+            // 🔄 Handle session recovery (if backend created a new session)
+            let recoveredSessionId;
+            if (result.sessionId && result.sessionId !== context.sessionId) {
+                console.warn(`🔄 Funnel: Session recovered! Old: ${context.sessionId}, New: ${result.sessionId}`);
+                recoveredSessionId = result.sessionId;
+            }
+            // Update local context
+            const newContext = {
+                ...context,
+                sessionId: recoveredSessionId || context.sessionId, // ✅ Use recovered session ID if provided
+                currentStepId: result.stepId,
+                previousStepId: context.currentStepId,
+                lastActivityAt: Date.now(),
+                metadata: {
+                    ...context.metadata,
+                    lastEvent: 'navigation',
+                    lastTransition: new Date().toISOString(),
+                    ...(recoveredSessionId ? { recovered: true, oldSessionId: context.sessionId } : {})
+                }
+            };
+            const enrichedContext = enrichContext(newContext);
+            setContext(enrichedContext);
+            // Update cookie with new session ID if recovered
+            if (recoveredSessionId) {
+                document.cookie = `funnelSessionId=${recoveredSessionId}; path=/; max-age=86400; SameSite=Lax`;
+                console.log(`🍪 Funnel: Updated cookie with recovered session ID: ${recoveredSessionId}`);
+            }
+            // Create typed navigation result
+            const navigationResult = {
+                stepId: result.stepId,
+                action: {
+                    type: 'redirect', // Default action type
+                    url: result.url
+                },
+                context: enrichedContext,
+                tracking: result.tracking
+            };
+            // Handle navigation callback with override capability
+            let shouldPerformDefaultNavigation = true;
+            if (options.onNavigate) {
+                const callbackResult = options.onNavigate(navigationResult);
+                if (callbackResult === false) {
+                    shouldPerformDefaultNavigation = false;
+                }
+            }
+            // Perform default navigation if not overridden
+            if (shouldPerformDefaultNavigation && navigationResult.action.url) {
+                // Add URL parameters for cross-domain session continuity
+                const urlWithParams = addSessionParams(navigationResult.action.url, enrichedContext.sessionId, effectiveFunnelId || options.funnelId);
+                const updatedAction = { ...navigationResult.action, url: urlWithParams };
+                performNavigation(updatedAction);
+            }
+            // Skip background refreshes if we are navigating away (full page reload)
+            // This prevents "lingering" requests from the old page context
+            const isFullNavigation = shouldPerformDefaultNavigation &&
+                navigationResult.action.url &&
+                (navigationResult.action.type === 'redirect' || navigationResult.action.type === 'replace');
+            if (!isFullNavigation) {
+                // Fetch debug data if in debug mode
+                if (debugMode) {
+                    void fetchFunnelDebugData(enrichedContext.sessionId);
+                }
+                // Invalidate and refetch session data
+                void queryClient.invalidateQueries({
+                    queryKey: funnelQueryKeys.session(enrichedContext.sessionId)
+                });
+            }
+        },
+        onError: (error) => {
+            console.error('Funnel navigation error:', error);
+            if (options.onError) {
+                options.onError(error instanceof Error ? error : new Error(String(error)));
+            }
+        }
+    });
+    // Update context mutation
+    const updateContextMutation = useMutation({
+        mutationFn: async (updates) => {
+            if (!context) {
+                throw new Error('Funnel session not initialized');
+            }
+            const requestBody = {
+                contextUpdates: updates
+            };
+            const response = await funnelResource.updateContext(context.sessionId, requestBody);
+            if (response.success) {
+                return updates;
+            }
+            else {
+                throw new Error(response.error || 'Context update failed');
+            }
+        },
+        onSuccess: (updates) => {
+            if (!context)
+                return;
+            const updatedContext = {
+                ...context,
+                ...updates,
+                lastActivityAt: Date.now()
+            };
+            const enrichedContext = enrichContext(updatedContext);
+            setContext(enrichedContext);
+            console.log(`🍪 Funnel: Updated context for step ${context.currentStepId}`);
+            // Invalidate session query
+            void queryClient.invalidateQueries({
+                queryKey: funnelQueryKeys.session(context.sessionId)
+            });
+        },
+        onError: (error) => {
+            console.error('Error updating funnel context:', error);
+            if (options.onError) {
+                options.onError(error instanceof Error ? error : new Error(String(error)));
+            }
+        }
+    });
+    // End session mutation
+    const endSessionMutation = useMutation({
+        mutationFn: async () => {
+            if (!context)
+                return;
+            await funnelResource.endSession(context.sessionId);
+        },
+        onSuccess: () => {
+            if (!context)
+                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)
+            });
+        },
+        onError: (error) => {
+            console.error('Error ending funnel session:', error);
+            // Don't throw here - session ending is best effort
+        }
+    });
+    /**
+     * Set funnel session cookie
+     */
+    const setSessionCookie = useCallback((sessionId) => {
+        const maxAge = 24 * 60 * 60; // 24 hours
+        const expires = new Date(Date.now() + maxAge * 1000).toUTCString();
+        // Set cookie for same-domain scenarios
+        document.cookie = `tgd-funnel-session-id=${sessionId}; path=/; expires=${expires}; SameSite=Lax`;
+        console.log(`🍪 Funnel: Set session cookie: ${sessionId}`);
+    }, []);
+    /**
+     * Add session parameters to URL for cross-domain continuity
+     */
+    const addSessionParams = useCallback((url, sessionId, funnelId) => {
+        try {
+            // Handle relative URLs by using current origin
+            const urlObj = url.startsWith('http')
+                ? new URL(url)
+                : new URL(url, window.location.origin);
+            urlObj.searchParams.set('funnelSessionId', sessionId);
+            if (funnelId) {
+                urlObj.searchParams.set('funnelId', funnelId);
+            }
+            return urlObj.toString();
+        }
+        catch (error) {
+            console.warn('Failed to add session params to URL:', error);
+            return url; // Return original URL if parsing fails
+        }
+    }, []);
+    /**
+     * Perform navigation based on action type
+     */
+    const performNavigation = useCallback((action) => {
+        if (!action.url)
+            return;
+        // Handle relative URLs by making them absolute
+        let targetUrl = action.url;
+        if (targetUrl.startsWith('/') && !targetUrl.startsWith('//')) {
+            // Relative URL - use current origin
+            targetUrl = window.location.origin + targetUrl;
+        }
+        switch (action.type) {
+            case 'redirect':
+                window.location.href = targetUrl;
+                break;
+            case 'replace':
+                window.location.replace(targetUrl);
+                break;
+            case 'push':
+                window.history.pushState({}, '', targetUrl);
+                // Trigger a popstate event to update React Router
+                window.dispatchEvent(new PopStateEvent('popstate'));
+                break;
+            case 'external':
+                window.open(targetUrl, '_blank');
+                break;
+            case 'none':
+                // No navigation needed
+                break;
+            default:
+                console.warn(`Unknown navigation action type: ${action.type}`);
+                break;
+        }
+    }, []);
+    // Public API methods
+    const initializeSession = useCallback(async (entryStepId) => {
+        // ✅ Check ref before even starting (prevents React StrictMode double-invocation)
+        if (isInitializingRef.current) {
+            console.log('⏭️  Funnel: initializeSession called but already initializing');
+            return;
+        }
+        setInitializationAttempted(true);
+        await initializeMutation.mutateAsync(entryStepId);
+    }, [initializeMutation]);
+    const next = useCallback(async (event) => {
+        return navigateMutation.mutateAsync(event);
+    }, [navigateMutation]);
+    const goToStep = useCallback(async (stepId) => {
+        return next({
+            type: FunnelActionType.DIRECT_NAVIGATION,
+            data: { targetStepId: stepId },
+            timestamp: new Date().toISOString()
+        });
+    }, [next]);
+    const updateContext = useCallback(async (updates) => {
+        await updateContextMutation.mutateAsync(updates);
+    }, [updateContextMutation]);
+    const endSession = useCallback(async () => {
+        await endSessionMutation.mutateAsync();
+    }, [endSessionMutation]);
+    const retryInitialization = useCallback(async () => {
+        setInitializationAttempted(false);
+        setInitializationError(null);
+        await initializeSession();
+    }, [initializeSession]);
+    /**
+     * 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(() => {
+        // Skip if auto-initialize is disabled
+        const autoInit = options.autoInitialize ?? true; // Default to true
+        if (!autoInit) {
+            return;
+        }
+        // Skip if required dependencies are not available
+        if (!auth.session?.customerId || !store?.id) {
+            return;
+        }
+        // Skip if already initializing (check both mutation state and ref)
+        if (initializeMutation.isPending || isInitializingRef.current) {
+            console.log('🔒 [useFunnel] Skipping initialization - already in progress');
+            return;
+        }
+        // Determine if we have an explicit funnelId request (URL has priority)
+        const explicitFunnelId = urlFunnelId || options.funnelId;
+        // Case 1: No session exists yet - need to initialize
+        if (!context) {
+            // Check if we've already attempted initialization OR already initialized once
+            // The hasInitializedOnceRef guards against React Strict Mode double-mounting
+            if (!initializationAttempted && !hasInitializedOnceRef.current) {
+                console.log('🚀 [useFunnel] Initializing funnel session for the first time');
+                setInitializationAttempted(true);
+                hasInitializedOnceRef.current = true; // Mark as initialized to prevent React Strict Mode duplicate
+                initializeSession().catch(error => {
+                    console.error('❌ Funnel: Auto-initialization failed:', error);
+                    hasInitializedOnceRef.current = false; // Reset on error to allow retry
+                });
+            }
+            else {
+                console.log('🔒 [useFunnel] Skipping initialization - already attempted or initialized once');
+            }
+            return;
+        }
+        // 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) {
+            // Check if we've already processed this funnelId to prevent loops
+            if (lastProcessedUrlFunnelIdRef.current === explicitFunnelId) {
+                return;
+            }
+            console.log(`🔄 Funnel: Switching from funnel ${context.funnelId} to ${explicitFunnelId}`);
+            // 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
+            initializeSession().catch(error => {
+                console.error('❌ Funnel: Failed to reset session:', error);
+            });
+        }
+    }, [
+        options.autoInitialize,
+        options.funnelId,
+        urlFunnelId,
+        context?.funnelId,
+        context?.sessionId,
+        initializationAttempted,
+        auth.session?.customerId,
+        store?.id,
+        initializeMutation.isPending,
+        initializeSession,
+        hasExistingSessionCookie,
+        queryClient
+    ]);
+    // Sync session data from query to local state
+    // Use a ref to track the last synced session ID to prevent loops
+    const lastSyncedSessionIdRef = useRef(null);
+    useEffect(() => {
+        if (sessionData && sessionData.sessionId !== lastSyncedSessionIdRef.current) {
+            setContext(sessionData);
+            lastSyncedSessionIdRef.current = sessionData.sessionId;
+            // Debug: Log the full context after sync
+            console.log('📦 [useFunnel] Context synced and updated:', {
+                sessionId: sessionData.sessionId,
+                currentStepId: sessionData.currentStepId,
+                hasStatic: !!sessionData.static,
+                staticKeys: sessionData.static ? Object.keys(sessionData.static) : [],
+                static: sessionData.static,
+                fullContext: sessionData,
+            });
+        }
+    }, [sessionData]); // Remove context from deps to prevent loop
+    // Debug: Log context whenever it changes
+    useEffect(() => {
+        if (context) {
+            console.log('🔄 [useFunnel] Context updated:', {
+                sessionId: context.sessionId,
+                currentStepId: context.currentStepId,
+                hasStatic: !!context.static,
+                staticKeys: context.static ? Object.keys(context.static) : [],
+                static: context.static,
+            });
+        }
+    }, [context]);
+    const isLoading = initializeMutation.isPending || navigateMutation.isPending || updateContextMutation.isPending;
+    const isInitialized = !!context;
+    const isNavigating = navigateMutation.isPending; // Explicit navigation state
+    return {
+        next,
+        goToStep,
+        updateContext,
+        currentStep: {
+            id: currentStepId || 'unknown'
+        },
+        context,
+        isLoading,
+        isInitialized,
+        isNavigating, // Expose isNavigating
+        initializeSession,
+        endSession,
+        retryInitialization,
+        initializationError,
+        isSessionLoading,
+        sessionError,
+        refetch: () => void refetchSession()
+    };
+}
+/**
+ * Simplified funnel hook for basic step tracking (v2)
+ */
+export function useSimpleFunnel(funnelId, initialStepId) {
+    const funnel = useFunnel({
+        funnelId,
+        currentStepId: initialStepId,
+        autoInitialize: true
+    });
+    return {
+        currentStepId: funnel.currentStep.id,
+        next: funnel.next,
+        goToStep: funnel.goToStep,
+        isLoading: funnel.isLoading,
+        context: funnel.context
+    };
+}