@tagadapay/plugin-sdk 2.8.7 → 2.8.9

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;

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

@@ -2,19 +2,23 @@
  * 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, 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 } = options;
     const { storeId } = usePluginConfig();
     const { isSessionInitialized, session } = useTagadaContext();
     const _queryClient = useQueryClient();
     // State for checkout sessions per offer (similar to postPurchases)
     const [checkoutSessions, setCheckoutSessions] = useState({});
+    // 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 {
@@ -59,7 +63,9 @@ export function useOffersQuery(options = {}) {
                         isUpdatingSummary: false,
                     }
                 }));
+                return orderSummary;
             }
+            return null;
         }
         catch (error) {
             setCheckoutSessions(prev => ({
@@ -75,7 +81,7 @@ export function useOffersQuery(options = {}) {
     // 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 +100,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 +108,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 +116,125 @@ 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) => {
         // 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.');
-            }
-            // Initialize checkout session using transformToCheckout
-            const initResult = await offersResource.transformToCheckout(offerId, returnUrl);
-            if (!initResult.checkoutUrl) {
-                throw new Error('Failed to initialize checkout session');
+    }, [initCheckoutSessionAsync, session?.customerId]);
+    const payOffer = useCallback(async (offerId, orderId) => {
+        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]);
+    const preview = useCallback(async (offerId) => {
+        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) {
+            return currentSessions[offerId].orderSummary;
+        }
+        // Prevent duplicate initialization if already has a session and is updating
+        if (currentSessions[offerId]?.checkoutSessionId && currentSessions[offerId]?.isUpdatingSummary) {
+            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,
+                    }
+                }));
             }
-            // 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,
+            // 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]); // Removed checkoutSessions dependency
+    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) => {
+        // 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,
                 }
-            }));
-            // 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) => ({
+            }
+        }));
+        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 +243,60 @@ 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]); // Removed checkoutSessions dependency
+    return {
+        // Query data
+        offers,
+        isLoading,
+        error,
+        // Actions
+        payOffer,
+        preview,
+        getAvailableVariants,
+        selectVariant,
+        isLoadingVariants,
     };
 }