@tagadapay/plugin-sdk 2.7.20 → 2.7.22

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

@@ -3,16 +3,54 @@
  * Handles post-purchase offers with automatic caching
  */
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { PostPurchasesResource } from '../../core/resources/postPurchases';
 import { useTagadaContext } from '../providers/TagadaProvider';
-import { getGlobalApiClient } from './useApiQuery';
+import { getGlobalApiClient, getGlobalApiClientOrNull } from './useApiQuery';
 export function usePostPurchasesQuery(options) {
+    console.log('usePostPurchasesQuery');
     const { orderId, enabled = true, autoInitializeCheckout = false } = options;
     const queryClient = useQueryClient();
-    const { session } = useTagadaContext();
+    const { session, isSessionInitialized, apiService } = useTagadaContext();
+    // Track if token is available on API service
+    const [hasToken, setHasToken] = useState(() => apiService.getCurrentToken() !== null);
+    // Update token availability when session is initialized
+    useEffect(() => {
+        if (isSessionInitialized) {
+            const checkToken = () => {
+                const token = apiService.getCurrentToken();
+                const tokenAvailable = token !== null;
+                setHasToken(tokenAvailable);
+                // Also ensure API client has the token
+                const apiClient = getGlobalApiClientOrNull();
+                if (apiClient && token) {
+                    apiClient.updateToken(token);
+                }
+                return tokenAvailable;
+            };
+            // Check immediately
+            if (checkToken()) {
+                return; // Token is available, no need to poll
+            }
+            // Poll for token if not immediately available (handles async token setting)
+            const interval = setInterval(() => {
+                if (checkToken()) {
+                    clearInterval(interval);
+                }
+            }, 100); // Check every 100ms
+            return () => clearInterval(interval);
+        }
+    }, [isSessionInitialized, apiService]);
     // State for checkout sessions per offer
     const [checkoutSessions, setCheckoutSessions] = useState({});
+    // Ref to track checkout sessions for synchronous access
+    const checkoutSessionsRef = useRef({});
+    // Ref to track offers being initialized to prevent duplicate initialization
+    const initializingOffers = useRef(new Set());
+    // Keep ref in sync with state
+    useEffect(() => {
+        checkoutSessionsRef.current = checkoutSessions;
+    }, [checkoutSessions]);
     // Create post purchases resource client
     const postPurchasesResource = useMemo(() => {
         try {
@@ -70,28 +108,102 @@ export function usePostPurchasesQuery(options) {
             throw error;
         }
     }, [postPurchasesResource]);
+    // Initialize checkout session for an offer
+    const initializeOfferCheckout = useCallback(async (offerId) => {
+        try {
+            // Check if customer ID is available
+            if (!session?.customerId) {
+                throw new Error('Customer ID is required. Make sure the session is properly initialized.');
+            }
+            // Check if already initializing to avoid race conditions
+            if (initializingOffers.current.has(offerId)) {
+                return; // Already initializing, skip
+            }
+            // Check if already initialized using ref for synchronous access
+            if (checkoutSessionsRef.current[offerId]?.checkoutSessionId) {
+                return; // Already initialized, exit early
+            }
+            // Mark as initializing
+            initializingOffers.current.add(offerId);
+            try {
+                // Initialize checkout session
+                const initResult = await postPurchasesResource.initCheckoutSession(offerId, orderId, session.customerId);
+                if (!initResult.checkoutSessionId) {
+                    throw new Error('Failed to initialize checkout session');
+                }
+                const sessionId = initResult.checkoutSessionId;
+                // Initialize session state
+                setCheckoutSessions(prev => {
+                    // Double-check we're not overwriting an existing session
+                    if (prev[offerId]?.checkoutSessionId) {
+                        return prev;
+                    }
+                    return {
+                        ...prev,
+                        [offerId]: {
+                            checkoutSessionId: sessionId,
+                            orderSummary: null,
+                            selectedVariants: {},
+                            loadingVariants: {},
+                            isUpdatingSummary: false,
+                        }
+                    };
+                });
+                // Fetch order summary with variant options
+                await fetchOrderSummary(offerId, sessionId);
+            }
+            finally {
+                // Remove from initializing set
+                initializingOffers.current.delete(offerId);
+            }
+        }
+        catch (error) {
+            // Remove from initializing set on error
+            initializingOffers.current.delete(offerId);
+            console.error(`[SDK] Failed to initialize checkout for offer ${offerId}:`, error);
+            throw error;
+        }
+    }, [session?.customerId, orderId, postPurchasesResource, fetchOrderSummary]);
     // Main post-purchase offers query
     const { data: offers = [], isLoading, error, refetch, } = useQuery({
         queryKey: ['post-purchase-offers', orderId],
-        queryFn: () => postPurchasesResource.getPostPurchaseOffers(orderId),
-        enabled: enabled && !!orderId,
+        queryFn: async () => {
+            // Double-check token is available before making the request
+            const token = apiService.getCurrentToken();
+            if (!token) {
+                throw new Error('No authentication token available. Please wait for session initialization.');
+            }
+            // Ensure API client has the token
+            const apiClient = getGlobalApiClientOrNull();
+            if (apiClient && token) {
+                apiClient.updateToken(token);
+            }
+            return postPurchasesResource.getPostPurchaseOffers(orderId);
+        },
+        enabled: enabled && !!orderId && isSessionInitialized && hasToken, // Wait for CMS token/session to be ready AND token to be set on API client
         staleTime: 30000, // 30 seconds
         refetchOnWindowFocus: false,
+        retry: (failureCount, error) => {
+            // Retry if token is not available yet (might be a timing issue)
+            if (error instanceof Error && error.message.includes('No authentication token')) {
+                return failureCount < 3; // Retry up to 3 times
+            }
+            return false; // Don't retry other errors
+        },
     });
     // Auto-initialize checkout sessions if enabled
     useEffect(() => {
-        if (autoInitializeCheckout && offers.length > 0) {
+        if (autoInitializeCheckout && offers.length > 0 && session?.customerId && isSessionInitialized) {
             // Initialize checkout sessions for all offers
             offers.forEach((offer) => {
-                try {
-                    // This is a placeholder - in a full implementation, you'd call initializeOfferCheckout
-                }
-                catch (_error) {
-                    // Error handling removed
-                }
+                // The initializeOfferCheckout function will check if already initialized or initializing
+                void initializeOfferCheckout(offer.id).catch((error) => {
+                    // Log errors but don't throw - auto-initialization failures shouldn't break the UI
+                    console.error(`[SDK] Failed to auto-initialize checkout for offer ${offer.id}:`, error);
+                });
             });
         }
-    }, [autoInitializeCheckout, offers]);
+    }, [autoInitializeCheckout, offers, session?.customerId, isSessionInitialized, initializeOfferCheckout]);
     // Accept offer mutation
     const acceptMutation = useMutation({
         mutationFn: ({ offerId, items }) => {
@@ -201,40 +313,14 @@ export function usePostPurchasesQuery(options) {
         getCheckoutSessionState: (offerId) => {
             return checkoutSessions[offerId] || null;
         },
-        initializeOfferCheckout: async (offerId) => {
-            try {
-                // Check if customer ID is available
-                if (!session?.customerId) {
-                    throw new Error('Customer ID is required. Make sure the session is properly initialized.');
-                }
-                // Initialize checkout session
-                const initResult = await postPurchasesResource.initCheckoutSession(offerId, orderId, session.customerId);
-                if (!initResult.checkoutSessionId) {
-                    throw new Error('Failed to initialize checkout session');
-                }
-                const sessionId = initResult.checkoutSessionId;
-                // Initialize session state
-                setCheckoutSessions(prev => ({
-                    ...prev,
-                    [offerId]: {
-                        checkoutSessionId: sessionId,
-                        orderSummary: null,
-                        selectedVariants: {},
-                        loadingVariants: {},
-                        isUpdatingSummary: false,
-                    }
-                }));
-                // Fetch order summary with variant options
-                await fetchOrderSummary(offerId, sessionId);
-            }
-            catch (_error) {
-                throw _error;
-            }
-        },
+        initializeOfferCheckout,
         getAvailableVariants: (offerId, productId) => {
             const sessionState = checkoutSessions[offerId];
+            console.log('sessionState', sessionState);
             if (!sessionState?.orderSummary?.options?.[productId])
                 return [];
+            console.log('getAvailableVariants', offerId, productId);
+            console.log('sessionState.orderSummary.options', sessionState.orderSummary.options);
             return sessionState.orderSummary.options[productId].map((variant) => ({
                 variantId: variant.id,
                 variantName: variant.name,

package/dist/v2/react/index.d.ts

@@ -55,6 +55,7 @@ export type { ExtractedAddress, GooglePlaceDetails, GooglePrediction, UseGoogleA
 export type { ISOCountry, ISORegion, UseISODataResult } from './hooks/useISOData';
 export type { UsePluginConfigOptions, UsePluginConfigResult } from './hooks/usePluginConfig';
 export type { TranslateFunction, UseTranslationOptions, UseTranslationResult } from './hooks/useTranslation';
+export { FunnelEventType } from '../core/resources/funnel';
 export type { UseCheckoutQueryOptions as UseCheckoutOptions, UseCheckoutQueryResult as UseCheckoutResult } from './hooks/useCheckoutQuery';
 export type { UseDiscountsQueryOptions as UseDiscountsOptions, UseDiscountsQueryResult as UseDiscountsResult } from './hooks/useDiscountsQuery';
 export type { FunnelEvent, FunnelNavigationAction, FunnelNavigationResult, SimpleFunnelContext, UseFunnelOptions, UseFunnelResult } from './hooks/useFunnel';

package/dist/v2/react/index.js

@@ -44,5 +44,7 @@ export { useTranslation } from './hooks/useTranslation';
 export { useVipOffersQuery as useVipOffers } from './hooks/useVipOffersQuery';
 // Funnel hooks
 export { useFunnel, useSimpleFunnel } from './hooks/useFunnel';
+// TanStack Query types
+export { FunnelEventType } from '../core/resources/funnel';
 // Re-export utilities from main react
 export { formatMoney } from '../../react/utils/money';

package/dist/v2/react/providers/TagadaProvider.d.ts

@@ -26,6 +26,14 @@ interface TagadaContextValue {
         lastUpdated: Date | null;
     };
     updateCheckoutDebugData: (data: any, error?: Error | null, isLoading?: boolean) => void;
+    debugFunnel: {
+        isActive: boolean;
+        data: any;
+        error: Error | null;
+        isLoading: boolean;
+        lastUpdated: Date | null;
+    };
+    updateFunnelDebugData: (data: any, error?: Error | null, isLoading?: boolean) => void;
     refreshCoordinator: {
         registerCheckoutRefresh: (refreshFn: () => Promise<void>, name?: string) => void;
         registerOrderBumpRefresh: (refreshFn: () => Promise<void>) => void;

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

@@ -295,6 +295,13 @@ rawPluginConfig, }) {
         isLoading: false,
         lastUpdated: null,
     });
+    const [debugFunnel, setDebugFunnel] = useState({
+        isActive: false,
+        data: null,
+        error: null,
+        isLoading: false,
+        lastUpdated: null,
+    });
     // Initialize auth state
     const [auth, setAuth] = useState({
         isAuthenticated: false,
@@ -480,6 +487,65 @@ rawPluginConfig, }) {
             setIsLoading(false);
         }
     }, [apiService, hasAttemptedAnonymousToken, initializeSession, finalDebugMode, isActiveInstance, instanceId]);
+    // Initialize token from storage or create anonymous token (extracted to stable callback)
+    const initializeToken = useCallback(async () => {
+        if (!isActiveInstance) {
+            console.log(`🚫 [TagadaProvider] Instance ${instanceId} is not active, skipping token initialization`);
+            return;
+        }
+        try {
+            console.debug('[SDK] Initializing token...');
+            setIsLoading(true);
+            // Check for existing token
+            const existingToken = getClientToken();
+            let tokenToUse = null;
+            // Check URL params for token
+            const urlParams = new URLSearchParams(window.location.search);
+            const queryToken = urlParams.get('token');
+            if (queryToken) {
+                console.debug('[SDK] Found token in URL params');
+                tokenToUse = queryToken;
+                setClientToken(queryToken);
+            }
+            else if (existingToken && !isTokenExpired(existingToken)) {
+                console.debug('[SDK] Using existing token from storage');
+                tokenToUse = existingToken;
+            }
+            else {
+                console.debug('[SDK] No valid token found');
+                // Determine storeId for anonymous token
+                const targetStoreId = storeId || 'default-store';
+                await createAnonymousToken(targetStoreId);
+                return;
+            }
+            if (tokenToUse) {
+                setToken(tokenToUse);
+                // Update the API service with the token
+                apiService.updateToken(tokenToUse);
+                // IMPORTANT: Immediately sync token to API client
+                apiClient.updateToken(tokenToUse);
+                console.log('[SDK] Token immediately synced to ApiClient:', tokenToUse.substring(0, 8) + '...');
+                // Decode token to get session data
+                const decodedSession = decodeJWTClient(tokenToUse);
+                if (decodedSession) {
+                    setSession(decodedSession);
+                    // Initialize session with API call
+                    await initializeSession(decodedSession);
+                }
+                else {
+                    console.error('[SDK] Failed to decode token');
+                    setIsInitialized(true);
+                    setIsSessionInitialized(false); // Session failed to initialize
+                    setIsLoading(false);
+                }
+            }
+        }
+        catch (error) {
+            console.error('[SDK] Error initializing token:', error);
+            setIsInitialized(true);
+            setIsLoading(false);
+        }
+    }, [apiService, apiClient, storeId, createAnonymousToken, initializeSession, isActiveInstance, instanceId]);
     // Initialize token from storage or create anonymous token
     // This runs in the background after phases 1 & 2 complete, but doesn't block rendering
     useEffect(() => {
@@ -500,62 +566,23 @@ rawPluginConfig, }) {
             return;
         }
         isInitializing.current = true;
-        const initializeToken = async () => {
-            try {
-                console.debug('[SDK] Initializing token...');
-                setIsLoading(true);
-                // Check for existing token
-                const existingToken = getClientToken();
-                let tokenToUse = null;
-                // Check URL params for token
-                const urlParams = new URLSearchParams(window.location.search);
-                const queryToken = urlParams.get('token');
-                if (queryToken) {
-                    console.debug('[SDK] Found token in URL params');
-                    tokenToUse = queryToken;
-                    setClientToken(queryToken);
-                }
-                else if (existingToken && !isTokenExpired(existingToken)) {
-                    console.debug('[SDK] Using existing token from storage');
-                    tokenToUse = existingToken;
-                }
-                else {
-                    console.debug('[SDK] No valid token found');
-                    // Determine storeId for anonymous token
-                    const targetStoreId = storeId || 'default-store';
-                    await createAnonymousToken(targetStoreId);
-                    return;
-                }
-                if (tokenToUse) {
-                    setToken(tokenToUse);
-                    // Update the API service with the token
-                    apiService.updateToken(tokenToUse);
-                    // IMPORTANT: Immediately sync token to API client
-                    apiClient.updateToken(tokenToUse);
-                    console.log('[SDK] Token immediately synced to ApiClient:', tokenToUse.substring(0, 8) + '...');
-                    // Decode token to get session data
-                    const decodedSession = decodeJWTClient(tokenToUse);
-                    if (decodedSession) {
-                        setSession(decodedSession);
-                        // Initialize session with API call
-                        await initializeSession(decodedSession);
-                    }
-                    else {
-                        console.error('[SDK] Failed to decode token');
-                        setIsInitialized(true);
-                        setIsSessionInitialized(false); // Session failed to initialize
-                        setIsLoading(false);
-                    }
-                }
-            }
-            catch (error) {
-                console.error('[SDK] Error initializing token:', error);
-                setIsInitialized(true);
-                setIsLoading(false);
-            }
-        };
         void initializeToken();
-    }, [storeId, createAnonymousToken, initializeSession, configLoading, isActiveInstance, instanceId]);
+    }, [storeId, initializeToken, configLoading, isActiveInstance, instanceId]);
+    // Listen for storage changes (e.g., token updated in another tab)
+    useEffect(() => {
+        if (!isActiveInstance) {
+            return;
+        }
+        function onStorage() {
+            // Re-run initialization when token may have changed in another tab
+            isInitializing.current = false;
+            void initializeToken();
+        }
+        window.addEventListener('storage', onStorage);
+        return () => {
+            window.removeEventListener('storage', onStorage);
+        };
+    }, [initializeToken, isActiveInstance]);
     // Update auth state when customer/session changes
     useEffect(() => {
         setAuth({
@@ -671,6 +698,16 @@ rawPluginConfig, }) {
         pluginConfigLoading: configLoading,
         debugCheckout,
         updateCheckoutDebugData: memoizedUpdateDebugData,
+        debugFunnel,
+        updateFunnelDebugData: (data, error, isLoading) => {
+            setDebugFunnel({
+                isActive: true,
+                data,
+                error: error ?? null,
+                isLoading: isLoading ?? false,
+                lastUpdated: new Date(),
+            });
+        },
         refreshCoordinator,
         money: memoizedMoneyUtils,
     }), [
@@ -685,6 +722,8 @@ rawPluginConfig, }) {
         isLoading,
         isInitialized,
         isSessionInitialized,
+        debugCheckout,
+        debugFunnel,
         finalDebugMode,
         pluginConfig,
         configLoading,

package/package.json

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