@tagadapay/plugin-sdk 2.8.8 → 2.8.10

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

@@ -2,19 +2,31 @@
  * Offers Hook using TanStack Query
  * Handles offers with automatic caching
  */
-import { useMemo, useCallback, useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { OffersResource } from '../../core/resources/offers';
 import { useTagadaContext } from '../providers/TagadaProvider';
-import { usePluginConfig } from './usePluginConfig';
 import { getGlobalApiClient } from './useApiQuery';
+import { usePluginConfig } from './usePluginConfig';
 export function useOffersQuery(options = {}) {
-    const { offerIds = [], enabled = true, returnUrl } = options;
+    const { offerIds = [], enabled = true, returnUrl, orderId: defaultOrderId, activeOfferId, skipPreview = false } = options;
     const { storeId } = usePluginConfig();
     const { isSessionInitialized, session } = useTagadaContext();
     const _queryClient = useQueryClient();
+    // Version identifier for debugging
+    console.log('[useOffersQuery] Hook initialized - VERSION: 2.2-production-ready', {
+        activeOfferId,
+        skipPreview,
+        isSessionInitialized,
+    });
     // State for checkout sessions per offer (similar to postPurchases)
     const [checkoutSessions, setCheckoutSessions] = useState({});
+    const [isActiveSummaryLoading, setIsActiveSummaryLoading] = useState(false);
+    const lastPreviewedOfferRef = useRef(null);
+    // Use ref to break dependency cycles in callbacks
+    const checkoutSessionsRef = useRef(checkoutSessions);
+    // Update ref on every render
+    checkoutSessionsRef.current = checkoutSessions;
     // Create offers resource client
     const offersResource = useMemo(() => {
         try {
@@ -26,6 +38,8 @@ export function useOffersQuery(options = {}) {
     }, []);
     // Helper function for fetching order summary (similar to postPurchases)
     const fetchOrderSummary = useCallback(async (offerId, sessionId) => {
+        if (!isSessionInitialized)
+            return null;
         try {
             // Set updating state
             setCheckoutSessions(prev => ({
@@ -59,7 +73,9 @@ export function useOffersQuery(options = {}) {
                         isUpdatingSummary: false,
                     }
                 }));
+                return orderSummary;
             }
+            return null;
         }
         catch (error) {
             setCheckoutSessions(prev => ({
@@ -71,11 +87,11 @@ export function useOffersQuery(options = {}) {
             }));
             throw error;
         }
-    }, [offersResource]);
+    }, [offersResource, isSessionInitialized]);
     // Create query key based on options
     const queryKey = useMemo(() => ['offers', { storeId, offerIds }], [storeId, offerIds]);
     // Use TanStack Query for fetching offers
-    const { data: offers = [], isLoading, error, refetch } = useQuery({
+    const { data: offers = [], isLoading, error } = useQuery({
         queryKey,
         enabled: enabled && !!storeId && isSessionInitialized,
         queryFn: async () => {
@@ -94,32 +110,7 @@ export function useOffersQuery(options = {}) {
         staleTime: 5 * 60 * 1000, // 5 minutes
         refetchOnWindowFocus: false,
     });
-    // Mutations for offer actions
-    const createCheckoutSessionMutation = useMutation({
-        mutationFn: async ({ offerId, returnUrl }) => {
-            return await offersResource.createCheckoutSession(offerId, returnUrl);
-        },
-        onError: (_error) => {
-            // Error handling removed
-        },
-    });
-    const payOfferMutation = useMutation({
-        mutationFn: async ({ offerId, orderId }) => {
-            return await offersResource.payOffer(offerId, orderId);
-        },
-        onError: (_error) => {
-            // Error handling removed
-        },
-    });
-    const transformToCheckoutMutation = useMutation({
-        mutationFn: async ({ offerId, returnUrl }) => {
-            return await offersResource.transformToCheckout(offerId, returnUrl);
-        },
-        onError: (_error) => {
-            // Error handling removed
-        },
-    });
-    const payWithCheckoutSessionMutation = useMutation({
+    const { mutateAsync: payWithCheckoutSessionAsync } = useMutation({
         mutationFn: async ({ checkoutSessionId, orderId }) => {
             return await offersResource.payWithCheckoutSession(checkoutSessionId, orderId);
         },
@@ -127,7 +118,7 @@ export function useOffersQuery(options = {}) {
             // Error handling removed
         },
     });
-    const initCheckoutSessionMutation = useMutation({
+    const { mutateAsync: initCheckoutSessionAsync } = useMutation({
         mutationFn: async ({ offerId, orderId, customerId }) => {
             return await offersResource.initCheckoutSession(offerId, orderId, customerId);
         },
@@ -135,108 +126,206 @@ export function useOffersQuery(options = {}) {
             // Error handling removed
         },
     });
-    // Helper functions (matching V1 useOffers exactly)
-    const getOffer = useCallback((offerId) => {
-        return offers.find((offer) => offer.id === offerId);
-    }, [offers]);
-    const getTotalValue = useCallback(() => {
-        return offers.reduce((total, offer) => {
-            const firstSummary = offer.summaries[0];
-            return total + (firstSummary?.totalAdjustedAmount || 0);
-        }, 0);
-    }, [offers]);
-    const getTotalSavings = useCallback(() => {
-        return offers.reduce((total, offer) => {
-            const firstSummary = offer.summaries[0];
-            return total + (firstSummary?.totalPromotionAmount || 0);
-        }, 0);
-    }, [offers]);
-    // Action functions
-    const createCheckoutSession = useCallback(async (offerId, options) => {
-        return await createCheckoutSessionMutation.mutateAsync({
-            offerId,
-            returnUrl: options?.returnUrl || returnUrl,
-        });
-    }, [createCheckoutSessionMutation, returnUrl]);
-    const payOffer = useCallback(async (offerId, orderId) => {
-        return await payOfferMutation.mutateAsync({ offerId, orderId });
-    }, [payOfferMutation]);
-    const transformToCheckout = useCallback(async (offerId, options) => {
-        return await transformToCheckoutMutation.mutateAsync({
-            offerId,
-            returnUrl: options?.returnUrl || returnUrl,
-        });
-    }, [transformToCheckoutMutation, returnUrl]);
     const payWithCheckoutSession = useCallback(async (checkoutSessionId, orderId) => {
-        return await payWithCheckoutSessionMutation.mutateAsync({ checkoutSessionId, orderId });
-    }, [payWithCheckoutSessionMutation]);
+        return await payWithCheckoutSessionAsync({ checkoutSessionId, orderId });
+    }, [payWithCheckoutSessionAsync]);
     const initCheckoutSession = useCallback(async (offerId, orderId, customerId) => {
+        if (!isSessionInitialized) {
+            throw new Error('Cannot initialize checkout session: CMS session is not initialized');
+        }
         // Use customerId from session context if not provided
         const effectiveCustomerId = customerId || session?.customerId;
         if (!effectiveCustomerId) {
             throw new Error('Customer ID is required. Make sure the session is properly initialized.');
         }
-        return await initCheckoutSessionMutation.mutateAsync({
+        return await initCheckoutSessionAsync({
             offerId,
             orderId,
             customerId: effectiveCustomerId
         });
-    }, [initCheckoutSessionMutation, session?.customerId]);
-    return {
-        // Query data
-        offers,
-        isLoading,
-        error,
-        // Actions
-        refetch: async () => {
-            await refetch();
-        },
-        // Offer management
-        createCheckoutSession,
-        payOffer,
-        transformToCheckout,
-        // Helper functions
-        getOffer,
-        getTotalValue,
-        getTotalSavings,
-        // Payment functions
-        payWithCheckoutSession,
-        initCheckoutSession,
-        // Checkout session management (similar to postPurchases)
-        getCheckoutSessionState: (offerId) => {
-            return checkoutSessions[offerId] || null;
-        },
-        initializeOfferCheckout: async (offerId) => {
-            // Check if customer ID is available
-            if (!session?.customerId) {
-                throw new Error('Customer ID is required. Make sure the session is properly initialized.');
+    }, [initCheckoutSessionAsync, session?.customerId, isSessionInitialized]);
+    const payOffer = useCallback(async (offerId, orderId) => {
+        if (!isSessionInitialized) {
+            throw new Error('Cannot pay offer: CMS session is not initialized');
+        }
+        const effectiveOrderId = orderId || defaultOrderId;
+        const effectiveCustomerId = session?.customerId;
+        if (!effectiveOrderId) {
+            throw new Error('Order ID is required for payment. Please provide it in the hook options or the function call.');
+        }
+        if (!effectiveCustomerId) {
+            throw new Error('Customer ID is required. Make sure the session is properly initialized.');
+        }
+        // 1. Init session
+        const { checkoutSessionId } = await initCheckoutSession(offerId, effectiveOrderId, effectiveCustomerId);
+        // 2. Pay
+        await payWithCheckoutSession(checkoutSessionId, effectiveOrderId);
+    }, [initCheckoutSession, payWithCheckoutSession, defaultOrderId, session?.customerId, isSessionInitialized]);
+    const preview = useCallback(async (offerId) => {
+        console.log('[useOffersQuery] preview() called for offer:', offerId);
+        if (!isSessionInitialized) {
+            console.log('[useOffersQuery] preview() - session not initialized, returning null');
+            // Return null silently to avoid errors during auto-initialization phases
+            return null;
+        }
+        const effectiveOrderId = defaultOrderId;
+        const effectiveCustomerId = session?.customerId;
+        // Use ref to check current state without creating dependency
+        const currentSessions = checkoutSessionsRef.current;
+        // If we already have a summary in state, return it
+        if (currentSessions[offerId]?.orderSummary) {
+            console.log('[useOffersQuery] preview() - using cached summary for offer:', offerId);
+            return currentSessions[offerId].orderSummary;
+        }
+        // Prevent duplicate initialization if already has a session and is updating
+        if (currentSessions[offerId]?.checkoutSessionId && currentSessions[offerId]?.isUpdatingSummary) {
+            console.log('[useOffersQuery] preview() - already updating, skipping for offer:', offerId);
+            return null;
+        }
+        // If we don't have orderId, fallback to static summary from offer object
+        // as we can't initialize a checkout session properly without orderId (for upsells)
+        if (!effectiveOrderId || !effectiveCustomerId) {
+            const offer = offers.find(o => o.id === offerId);
+            return offer?.summaries?.[0] || null;
+        }
+        try {
+            // If we already have a session ID, reuse it instead of creating a new one
+            let sessionId = currentSessions[offerId]?.checkoutSessionId;
+            if (!sessionId) {
+                const { checkoutSessionId } = await initCheckoutSession(offerId, effectiveOrderId, effectiveCustomerId);
+                sessionId = checkoutSessionId;
+                // Update state with session ID
+                setCheckoutSessions(prev => ({
+                    ...prev,
+                    [offerId]: {
+                        checkoutSessionId: sessionId,
+                        orderSummary: null,
+                        selectedVariants: {},
+                        loadingVariants: {},
+                        isUpdatingSummary: false,
+                    }
+                }));
             }
-            // Initialize checkout session using transformToCheckout
-            const initResult = await offersResource.transformToCheckout(offerId, returnUrl);
-            if (!initResult.checkoutUrl) {
-                throw new Error('Failed to initialize checkout session');
+            // Fetch and return summary
+            return await fetchOrderSummary(offerId, sessionId);
+        }
+        catch (e) {
+            console.error("Failed to preview offer", e);
+            return null;
+        }
+    }, [offers, defaultOrderId, session?.customerId, initCheckoutSession, fetchOrderSummary, isSessionInitialized]); // Removed checkoutSessions dependency
+    // Auto-preview effect for activeOfferId
+    useEffect(() => {
+        console.log('[useOffersQuery v2.2] Auto-preview effect triggered:', {
+            activeOfferId,
+            skipPreview,
+            isSessionInitialized,
+            lastPreviewed: lastPreviewedOfferRef.current,
+        });
+        if (!activeOfferId || skipPreview || !isSessionInitialized) {
+            console.log('[useOffersQuery] Skipping auto-preview - conditions not met');
+            setIsActiveSummaryLoading(false); // Reset loading state if conditions not met
+            // Reset the ref when conditions are not met
+            if (!activeOfferId) {
+                lastPreviewedOfferRef.current = null;
             }
-            // Extract session ID from checkout URL or use a placeholder
-            const sessionId = 'session_' + offerId; // This would need to be extracted from the actual response
-            // Initialize session state
-            setCheckoutSessions(prev => ({
-                ...prev,
-                [offerId]: {
-                    checkoutSessionId: sessionId,
-                    orderSummary: null,
-                    selectedVariants: {},
-                    loadingVariants: {},
-                    isUpdatingSummary: false,
+            return;
+        }
+        // Skip if we've already previewed this exact offer
+        if (lastPreviewedOfferRef.current === activeOfferId) {
+            console.log('[useOffersQuery] Skipping auto-preview - already previewed:', activeOfferId);
+            setIsActiveSummaryLoading(false); // Ensure loading is false
+            return;
+        }
+        console.log('[useOffersQuery] Starting auto-preview for offer:', activeOfferId);
+        let isMounted = true;
+        setIsActiveSummaryLoading(true); // Set loading immediately
+        // Debounce the preview call
+        const timer = setTimeout(() => {
+            if (!isMounted) {
+                console.log('[useOffersQuery] Component unmounted before preview call');
+                return;
+            }
+            console.log('[useOffersQuery] Calling preview for offer:', activeOfferId);
+            preview(activeOfferId)
+                .then(() => {
+                if (isMounted) {
+                    console.log('[useOffersQuery] Preview successful for offer:', activeOfferId);
+                    lastPreviewedOfferRef.current = activeOfferId; // Mark as previewed on success
                 }
-            }));
-            // Fetch order summary with variant options
-            await fetchOrderSummary(offerId, sessionId);
-        },
-        getAvailableVariants: (offerId, productId) => {
-            const sessionState = checkoutSessions[offerId];
-            if (!sessionState?.orderSummary?.options?.[productId])
-                return [];
-            return sessionState.orderSummary.options[productId].map((variant) => ({
+            })
+                .catch(err => {
+                console.error('[useOffersQuery] Failed to auto-preview offer:', activeOfferId, err);
+                // Don't mark as previewed on error, to avoid infinite retry loop
+            })
+                .finally(() => {
+                if (isMounted) {
+                    console.log('[useOffersQuery] Preview finished for offer:', activeOfferId);
+                    setIsActiveSummaryLoading(false);
+                }
+            });
+        }, 50);
+        return () => {
+            console.log('[useOffersQuery] Cleaning up auto-preview effect for offer:', activeOfferId);
+            isMounted = false;
+            clearTimeout(timer);
+            setIsActiveSummaryLoading(false); // Reset loading on unmount/cleanup
+        };
+    }, [activeOfferId, skipPreview, isSessionInitialized]); // FIXED: Removed 'preview' from dependencies to prevent infinite loop
+    const activeSummary = useMemo(() => {
+        if (!activeOfferId)
+            return null;
+        // Return dynamic summary if available, otherwise fallback to static summary
+        return checkoutSessions[activeOfferId]?.orderSummary || offers.find(o => o.id === activeOfferId)?.summaries?.[0] || null;
+    }, [activeOfferId, checkoutSessions, offers]);
+    const getAvailableVariants = useCallback((offerId, productId) => {
+        const sessionState = checkoutSessions[offerId]; // This hook needs to react to state changes
+        if (!sessionState?.orderSummary?.options?.[productId])
+            return [];
+        return sessionState.orderSummary.options[productId].map((variant) => ({
+            variantId: variant.id,
+            variantName: variant.name,
+            variantSku: variant.sku,
+            variantDefault: variant.default,
+            variantExternalId: variant.externalVariantId,
+            priceId: variant.prices[0]?.id,
+            currencyOptions: variant.prices[0]?.currencyOptions,
+        }));
+    }, [checkoutSessions]);
+    const isLoadingVariants = useCallback((offerId, productId) => {
+        return checkoutSessions[offerId]?.loadingVariants?.[productId] ?? false;
+    }, [checkoutSessions]);
+    const selectVariant = useCallback(async (offerId, productId, variantId) => {
+        if (!isSessionInitialized) {
+            throw new Error('Cannot select variant: CMS session is not initialized');
+        }
+        // Use ref for initial check to avoid dependency but we might need latest state for logic
+        // Actually for actions it's better to use ref or just dependency if action is not called in useEffect
+        const currentSessions = checkoutSessionsRef.current;
+        const sessionState = currentSessions[offerId];
+        if (!sessionState?.checkoutSessionId || !sessionState.orderSummary) {
+            throw new Error('Checkout session not initialized for this offer');
+        }
+        const sessionId = sessionState.checkoutSessionId;
+        // Set loading state for this specific variant
+        setCheckoutSessions(prev => ({
+            ...prev,
+            [offerId]: {
+                ...prev[offerId],
+                loadingVariants: {
+                    ...prev[offerId].loadingVariants,
+                    [productId]: true,
+                }
+            }
+        }));
+        try {
+            // We need to use the state from the ref to ensure we have the latest data without causing infinite loops
+            // if selectVariant was in a dependency array that triggered effects
+            const sessionState = checkoutSessionsRef.current[offerId];
+            if (!sessionState?.orderSummary?.options?.[productId]) {
+                throw new Error('No variants available for this product');
+            }
+            const availableVariants = sessionState.orderSummary.options[productId].map((variant) => ({
                 variantId: variant.id,
                 variantName: variant.name,
                 variantSku: variant.sku,
@@ -245,98 +334,71 @@ export function useOffersQuery(options = {}) {
                 priceId: variant.prices[0]?.id,
                 currencyOptions: variant.prices[0]?.currencyOptions,
             }));
-        },
-        selectVariant: async (offerId, productId, variantId) => {
-            const sessionState = checkoutSessions[offerId];
-            if (!sessionState?.checkoutSessionId || !sessionState.orderSummary) {
-                throw new Error('Checkout session not initialized for this offer');
+            const selectedVariant = availableVariants.find(v => v.variantId === variantId);
+            if (!selectedVariant) {
+                throw new Error('Selected variant not found');
+            }
+            // Find the current item to get its quantity
+            const currentItem = sessionState.orderSummary.items.find(item => item.productId === productId);
+            if (!currentItem) {
+                throw new Error('Current item not found');
             }
-            const sessionId = sessionState.checkoutSessionId;
-            // Set loading state for this specific variant
+            // Update selected variants state
+            setCheckoutSessions(prev => ({
+                ...prev,
+                [offerId]: {
+                    ...prev[offerId],
+                    selectedVariants: {
+                        ...prev[offerId].selectedVariants,
+                        [productId]: variantId,
+                    }
+                }
+            }));
+            // Update line items on the server
+            await offersResource.updateLineItems(sessionId, [
+                {
+                    variantId: selectedVariant.variantId,
+                    quantity: currentItem.quantity,
+                },
+            ]);
+            // Refetch order summary after successful line item update
+            return await fetchOrderSummary(offerId, sessionId);
+        }
+        finally {
+            // Clear loading state for this specific variant
             setCheckoutSessions(prev => ({
                 ...prev,
                 [offerId]: {
                     ...prev[offerId],
                     loadingVariants: {
                         ...prev[offerId].loadingVariants,
-                        [productId]: true,
+                        [productId]: false,
                     }
                 }
             }));
-            try {
-                const sessionState = checkoutSessions[offerId];
-                if (!sessionState?.orderSummary?.options?.[productId]) {
-                    throw new Error('No variants available for this product');
-                }
-                const availableVariants = sessionState.orderSummary.options[productId].map((variant) => ({
-                    variantId: variant.id,
-                    variantName: variant.name,
-                    variantSku: variant.sku,
-                    variantDefault: variant.default,
-                    variantExternalId: variant.externalVariantId,
-                    priceId: variant.prices[0]?.id,
-                    currencyOptions: variant.prices[0]?.currencyOptions,
-                }));
-                const selectedVariant = availableVariants.find(v => v.variantId === variantId);
-                if (!selectedVariant) {
-                    throw new Error('Selected variant not found');
-                }
-                // Find the current item to get its quantity
-                const currentItem = sessionState.orderSummary.items.find(item => item.productId === productId);
-                if (!currentItem) {
-                    throw new Error('Current item not found');
-                }
-                // Update selected variants state
-                setCheckoutSessions(prev => ({
-                    ...prev,
-                    [offerId]: {
-                        ...prev[offerId],
-                        selectedVariants: {
-                            ...prev[offerId].selectedVariants,
-                            [productId]: variantId,
-                        }
-                    }
-                }));
-                // Update line items on the server
-                await offersResource.updateLineItems(sessionId, [
-                    {
-                        variantId: selectedVariant.variantId,
-                        quantity: currentItem.quantity,
-                    },
-                ]);
-                // Refetch order summary after successful line item update
-                await fetchOrderSummary(offerId, sessionId);
-            }
-            finally {
-                // Clear loading state for this specific variant
-                setCheckoutSessions(prev => ({
-                    ...prev,
-                    [offerId]: {
-                        ...prev[offerId],
-                        loadingVariants: {
-                            ...prev[offerId].loadingVariants,
-                            [productId]: false,
-                        }
-                    }
-                }));
-            }
-        },
-        getOrderSummary: (offerId) => {
-            return checkoutSessions[offerId]?.orderSummary ?? null;
-        },
-        isLoadingVariants: (offerId, productId) => {
-            return checkoutSessions[offerId]?.loadingVariants?.[productId] ?? false;
-        },
-        isUpdatingOrderSummary: (offerId) => {
-            return checkoutSessions[offerId]?.isUpdatingSummary || false;
-        },
-        confirmPurchase: async (offerId, _options) => {
-            const sessionState = checkoutSessions[offerId];
-            if (!sessionState?.checkoutSessionId) {
-                throw new Error('Checkout session not initialized for this offer');
-            }
-            // Use the enhanced payWithCheckoutSession with proper metadata
-            await offersResource.payWithCheckoutSession(sessionState.checkoutSessionId);
-        },
+        }
+    }, [offersResource, fetchOrderSummary, isSessionInitialized]); // Removed checkoutSessions dependency
+    const result = {
+        // Query data
+        offers,
+        isLoading,
+        error,
+        activeSummary,
+        isActiveSummaryLoading,
+        // Actions
+        payOffer,
+        preview,
+        getAvailableVariants,
+        selectVariant,
+        isLoadingVariants,
     };
+    console.log('[useOffersQuery] Returning result:', {
+        offersCount: offers.length,
+        isLoading,
+        hasError: !!error,
+        activeOfferId,
+        hasActiveSummary: !!activeSummary,
+        isActiveSummaryLoading,
+    });
+    return result;
 }