@tagadapay/plugin-sdk 3.0.3 → 3.0.12

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

@@ -15,9 +15,12 @@ import { useTagadaContext } from '../providers/TagadaProvider';
 import { getGlobalApiClient } from './useApiQuery';
 import { usePluginConfig } from './usePluginConfig';
 export function useOfferQuery(options) {
-    const { offerId, enabled = true, mainOrderId } = options;
+    const { offerId, enabled = true, mainOrderId: rawMainOrderId } = options;
     const { storeId } = usePluginConfig();
     const { isSessionInitialized, session } = useTagadaContext();
+    // 🎯 Normalize mainOrderId: treat undefined and empty string as the same
+    // This prevents effect re-runs when value changes from undefined to ''
+    const mainOrderId = rawMainOrderId || undefined;
     // ─────────────────────────────────────────────────────────────────────────
     // State
     // ─────────────────────────────────────────────────────────────────────────
@@ -140,17 +143,28 @@ export function useOfferQuery(options) {
         });
     }, [initCheckoutSessionAsync, session?.customerId, isSessionInitialized]);
     // ─────────────────────────────────────────────────────────────────────────
-    // 2. Auto-initialize checkout session when mainOrderId is provided
+    // 2. Auto-initialize checkout session when offer is loaded
+    // (mainOrderId is optional - used for post-purchase upsells, not needed for standalone offers)
     // ─────────────────────────────────────────────────────────────────────────
     useEffect(() => {
-        if (!offer || !mainOrderId || !isSessionInitialized)
+        // Only require offer and session to be ready (mainOrderId is optional)
+        if (!offer || !isSessionInitialized) {
             return;
-        if (checkoutSession.checkoutSessionId || isInitializing || hasInitializedRef.current)
+        }
+        if (checkoutSession.checkoutSessionId || isInitializing) {
+            return;
+        }
+        // 🎯 CRITICAL: Check and set initialization flag atomically
+        // This ensures only ONE effect can proceed with initialization
+        // Once set to true, it stays true (never reset) to prevent duplicate inits
+        if (hasInitializedRef.current) {
             return;
+        }
+        hasInitializedRef.current = true;
         const initSession = async () => {
-            hasInitializedRef.current = true;
             setIsInitializing(true);
             try {
+                // mainOrderId is optional - pass undefined if not provided
                 const result = await initCheckoutSession(offerId, mainOrderId);
                 setCheckoutSession(prev => ({
                     ...prev,
@@ -160,7 +174,7 @@ export function useOfferQuery(options) {
                 await fetchOrderSummary(result.checkoutSessionId);
             }
             catch (err) {
-                console.error('Failed to init checkout session:', err);
+                console.error('[useOfferQuery] Failed to init checkout session:', err);
                 hasInitializedRef.current = false; // Allow retry on error
             }
             finally {
@@ -198,7 +212,8 @@ export function useOfferQuery(options) {
             const product = variant?.product;
             if (!variant || !product)
                 continue;
-            const currency = offer.summaries?.[0]?.currency || 'USD';
+            // Currency is determined from the checkout session, not from the offer
+            const currency = checkoutSession.orderSummary?.currency || 'USD';
             const currencyOption = price?.currencyOptions?.[currency];
             const unitAmount = currencyOption?.amount ?? variant.price ?? 0;
             items.push({
@@ -282,21 +297,39 @@ export function useOfferQuery(options) {
         const orderSummary = checkoutSession.orderSummary;
         if (orderSummary?.options?.[productId]) {
             const currency = orderSummary.currency || 'USD';
-            return orderSummary.options[productId].map((variant) => ({
-                variantId: variant.id,
-                variantName: variant.name,
-                sku: variant.sku || null,
-                imageUrl: variant.imageUrl || null,
-                unitAmount: variant.prices?.[0]?.currencyOptions?.[currency]?.amount ?? 0,
-                currency,
-                isDefault: variant.default ?? false,
-            }));
+            // Find the active line item for this product to get the correct priceId
+            const activeLineItem = orderSummary.items?.find((item) => item.productId === productId);
+            const activePriceId = activeLineItem?.priceId;
+            return orderSummary.options[productId].map((variant) => {
+                // Try to find the price that matches the active priceId, otherwise use first price
+                let unitAmount = 0;
+                if (activePriceId && variant.prices) {
+                    const matchingPrice = variant.prices.find((p) => p.id === activePriceId);
+                    if (matchingPrice?.currencyOptions?.[currency]?.amount) {
+                        unitAmount = matchingPrice.currencyOptions[currency].amount;
+                    }
+                }
+                // Fallback to first price if no match found
+                if (unitAmount === 0 && variant.prices?.[0]?.currencyOptions?.[currency]?.amount) {
+                    unitAmount = variant.prices[0].currencyOptions[currency].amount;
+                }
+                return {
+                    variantId: variant.id,
+                    variantName: variant.name,
+                    sku: variant.sku || null,
+                    imageUrl: variant.imageUrl || null,
+                    unitAmount,
+                    currency,
+                    isDefault: variant.default ?? false,
+                };
+            });
         }
         // Fallback to static offer data
         if (!offer?.offerLineItems)
             return [];
         const variants = [];
-        const currency = offer.summaries?.[0]?.currency || 'USD';
+        // Currency is determined from the checkout session, not from the offer
+        const currency = checkoutSession.orderSummary?.currency || 'USD';
         for (const item of offer.offerLineItems) {
             const price = item.price;
             const variant = price?.variant;

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

@@ -28,10 +28,8 @@ export function usePaymentQuery() {
     const { createSession, startChallenge } = useThreeds();
     // Track challenge in progress to prevent multiple challenges
     const challengeInProgressRef = useRef(false);
-    // Stabilize environment value to prevent re-renders
-    const currentEnvironment = useMemo(() => environment?.environment || 'local', [environment?.environment]);
     // Get API key from embedded configuration with proper environment detection
-    const apiKey = useMemo(() => getBasisTheoryApiKey(currentEnvironment), [currentEnvironment]);
+    const apiKey = useMemo(() => getBasisTheoryApiKey(), []); // Auto-detects environment
     // Initialize BasisTheory using React wrapper
     const { bt: basisTheory, error: btError } = useBasisTheory(apiKey, {
         elements: false,

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

@@ -0,0 +1,84 @@
+/**
+ * usePreviewOffer - Lightweight offer preview without checkout sessions
+ *
+ * This hook provides a fast, client-side offer preview by:
+ * 1. Fetching offer data with pre-computed summaries
+ * 2. Allowing variant/quantity selection
+ * 3. Recalculating totals on-the-fly without backend calls
+ * 4. NO checkout session creation - perfect for browsing/previewing
+ */
+import { Offer } from '../../core/resources/offers';
+export interface PreviewLineItemSelection {
+    lineItemId: string;
+    variantId: string;
+    quantity: number;
+    priceId?: string;
+}
+export interface PreviewOfferSummary {
+    items: Array<{
+        id: string;
+        productId: string;
+        variantId: string;
+        priceId: string;
+        productName: string;
+        variantName: string;
+        imageUrl: string | null;
+        quantity: number;
+        unitAmount: number;
+        amount: number;
+        adjustedAmount: number;
+        currency: string;
+    }>;
+    totalAmount: number;
+    totalAdjustedAmount: number;
+    totalPromotionAmount: number;
+    currency: string;
+    options: Record<string, Array<{
+        variantId: string;
+        variantName: string;
+        sku: string | null;
+        imageUrl: string | null;
+        prices: Array<{
+            id: string;
+            currencyOptions: Record<string, {
+                amount: number;
+                currency: string;
+            }>;
+        }>;
+        default: boolean;
+    }>>;
+}
+export interface UsePreviewOfferOptions {
+    offerId: string;
+    currency?: string;
+    initialSelections?: Record<string, PreviewLineItemSelection>;
+}
+export interface UsePreviewOfferResult {
+    offer: Offer | null;
+    isLoading: boolean;
+    isFetching: boolean;
+    isPaying: boolean;
+    error: Error | null;
+    summary: PreviewOfferSummary | null;
+    selections: Record<string, PreviewLineItemSelection>;
+    selectVariant: (lineItemId: string, variantId: string) => void;
+    updateQuantity: (lineItemId: string, quantity: number) => void;
+    selectVariantByProduct: (productId: string, variantId: string) => void;
+    updateQuantityByProduct: (productId: string, quantity: number) => void;
+    getAvailableVariants: (productId: string) => Array<{
+        variantId: string;
+        variantName: string;
+        imageUrl: string | null;
+        unitAmount: number;
+        currency: string;
+    }>;
+    pay: (mainOrderId?: string) => Promise<{
+        checkoutUrl: string;
+    }>;
+    toCheckout: (mainOrderId?: string) => Promise<{
+        checkoutSessionId?: string;
+        checkoutToken?: string;
+        checkoutUrl: string;
+    }>;
+}
+export declare function usePreviewOffer(options: UsePreviewOfferOptions): UsePreviewOfferResult;

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

@@ -0,0 +1,290 @@
+/**
+ * usePreviewOffer - Lightweight offer preview without checkout sessions
+ *
+ * This hook provides a fast, client-side offer preview by:
+ * 1. Fetching offer data with pre-computed summaries
+ * 2. Allowing variant/quantity selection
+ * 3. Recalculating totals on-the-fly without backend calls
+ * 4. NO checkout session creation - perfect for browsing/previewing
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { OffersResource } from '../../core/resources/offers';
+import { getGlobalApiClient } from './useApiQuery';
+export function usePreviewOffer(options) {
+    const { offerId, currency: requestedCurrency = 'USD', initialSelections = {} } = options;
+    const offersResource = useMemo(() => new OffersResource(getGlobalApiClient()), []);
+    // Track user selections (variant + quantity per product)
+    const [selections, setSelections] = useState(initialSelections);
+    const [isPaying, setIsPaying] = useState(false);
+    // Build lineItems array for API call
+    const lineItemsForPreview = useMemo(() => {
+        if (Object.keys(selections).length === 0)
+            return undefined;
+        return Object.values(selections).map((selection) => {
+            const item = {
+                variantId: selection.variantId,
+                quantity: selection.quantity,
+            };
+            // Include lineItemId for precise matching
+            if (selection.lineItemId) {
+                item.lineItemId = selection.lineItemId;
+            }
+            return item;
+        });
+    }, [selections]);
+    // 🎯 ONE API CALL - Fetch offer + preview in one request
+    const { data, isLoading, isFetching, error } = useQuery({
+        queryKey: ['offer-preview', offerId, requestedCurrency, lineItemsForPreview],
+        queryFn: async () => {
+            console.log('🔍 [usePreviewOffer] Fetching preview:', {
+                offerId,
+                currency: requestedCurrency,
+                lineItems: lineItemsForPreview,
+            });
+            const result = await offersResource.previewOffer(offerId, requestedCurrency, lineItemsForPreview);
+            console.log('✅ [usePreviewOffer] Preview result:', result);
+            // Extract offer and preview from unified response
+            const offer = result.offer || null;
+            const preview = result.preview || result; // Backwards compatibility
+            // Transform preview to expected format
+            const summary = {
+                items: (preview.items || []).map((item) => ({
+                    id: item.id,
+                    productId: item.productId,
+                    variantId: item.variantId,
+                    priceId: item.priceId,
+                    productName: item.product?.name || item.orderLineItemProduct?.name || '',
+                    variantName: item.variant?.name || item.orderLineItemVariant?.name || '',
+                    imageUrl: item.variant?.imageUrl || item.orderLineItemVariant?.imageUrl || null,
+                    quantity: item.quantity,
+                    unitAmount: item.unitAmount,
+                    amount: item.amount,
+                    adjustedAmount: item.adjustedAmount,
+                    currency: item.currency,
+                })),
+                totalAmount: preview.totalAmount || 0,
+                totalAdjustedAmount: preview.totalAdjustedAmount || 0,
+                totalPromotionAmount: preview.totalPromotionAmount || 0,
+                currency: preview.currency || requestedCurrency,
+                options: preview.options || {},
+            };
+            return { offer, summary };
+        },
+        enabled: !!offerId,
+        staleTime: 0, // Always refetch, no cache
+        gcTime: 5000, // Keep in cache for 5s during transitions
+        placeholderData: (previousData) => previousData, // Keep previous data during refetch
+        refetchOnMount: 'always', // Always refetch on mount
+        retry: false, // Don't retry on error
+        retryOnMount: false,
+    });
+    const offer = data?.offer || null;
+    const summary = data?.summary || null;
+    // Initialize selections from preview response on first load
+    useEffect(() => {
+        if (summary && Object.keys(selections).length === 0) {
+            const initialSelections = {};
+            summary.items.forEach((item) => {
+                // Use lineItemId as key to support same product with different variants
+                initialSelections[item.id] = {
+                    lineItemId: item.id,
+                    variantId: item.variantId,
+                    quantity: item.quantity,
+                    priceId: item.priceId,
+                };
+            });
+            console.log('🎬 [usePreviewOffer] Initialized selections:', initialSelections);
+            setSelections(initialSelections);
+        }
+    }, [summary, selections]);
+    console.log('🎁 [usePreviewOffer] State:', {
+        offerId,
+        isLoading,
+        isFetching,
+        hasData: !!data,
+        hasOffer: !!offer,
+        hasSummary: !!summary,
+        selectionsCount: Object.keys(selections).length,
+        error: error?.message,
+    });
+    // ===== Precise methods (by lineItemId) =====
+    // Select a variant for a specific line item
+    const selectVariant = useCallback((lineItemId, variantId) => {
+        const item = summary?.items.find((i) => i.id === lineItemId);
+        if (!item)
+            return;
+        const variants = summary?.options?.[item.productId];
+        if (!variants)
+            return;
+        const selectedVariant = variants.find((v) => (v.id || v.variantId) === variantId);
+        if (!selectedVariant)
+            return;
+        const priceId = selectedVariant.prices?.[0]?.id;
+        setSelections(prev => ({
+            ...prev,
+            [lineItemId]: {
+                lineItemId,
+                variantId,
+                quantity: prev[lineItemId]?.quantity || item.quantity,
+                priceId,
+            },
+        }));
+    }, [summary]);
+    // Update quantity for a specific line item
+    const updateQuantity = useCallback((lineItemId, quantity) => {
+        if (quantity < 1)
+            return;
+        const item = summary?.items.find((i) => i.id === lineItemId);
+        if (!item)
+            return;
+        setSelections(prev => ({
+            ...prev,
+            [lineItemId]: {
+                lineItemId,
+                variantId: prev[lineItemId]?.variantId || item.variantId,
+                quantity,
+                priceId: prev[lineItemId]?.priceId || item.priceId,
+            },
+        }));
+    }, [summary]);
+    // ===== Simple methods (by productId - affects all items with this product) =====
+    // Select a variant for all line items with this product
+    const selectVariantByProduct = useCallback((productId, variantId) => {
+        if (!summary?.options?.[productId])
+            return;
+        const variants = summary.options[productId];
+        const selectedVariant = variants.find((v) => (v.id || v.variantId) === variantId);
+        if (!selectedVariant)
+            return;
+        const priceId = selectedVariant.prices?.[0]?.id;
+        setSelections(prev => {
+            const updated = { ...prev };
+            // Update all line items with this productId
+            summary.items.forEach((item) => {
+                if (item.productId === productId) {
+                    updated[item.id] = {
+                        lineItemId: item.id,
+                        variantId,
+                        quantity: prev[item.id]?.quantity || item.quantity,
+                        priceId,
+                    };
+                }
+            });
+            return updated;
+        });
+    }, [summary]);
+    // Update quantity for all line items with this product
+    const updateQuantityByProduct = useCallback((productId, quantity) => {
+        if (quantity < 1)
+            return;
+        setSelections(prev => {
+            const updated = { ...prev };
+            // Update all line items with this productId
+            summary?.items.forEach((item) => {
+                if (item.productId === productId) {
+                    updated[item.id] = {
+                        lineItemId: item.id,
+                        variantId: prev[item.id]?.variantId || item.variantId,
+                        quantity,
+                        priceId: prev[item.id]?.priceId || item.priceId,
+                    };
+                }
+            });
+            return updated;
+        });
+    }, [summary]);
+    // Get available variants for a product
+    const getAvailableVariants = useCallback((productId) => {
+        if (!summary?.options?.[productId])
+            return [];
+        const currentItem = summary.items.find((i) => i.productId === productId);
+        const activePriceId = currentItem?.priceId;
+        const currency = summary.currency || requestedCurrency;
+        return summary.options[productId].map((variant) => {
+            // Find matching price or use first
+            let unitAmount = 0;
+            if (activePriceId && variant.prices) {
+                const matchingPrice = variant.prices.find((p) => p.id === activePriceId);
+                if (matchingPrice?.currencyOptions?.[currency]) {
+                    unitAmount = matchingPrice.currencyOptions[currency].amount;
+                }
+            }
+            // Fallback to first price
+            if (unitAmount === 0 && variant.prices?.[0]?.currencyOptions?.[currency]) {
+                unitAmount = variant.prices[0].currencyOptions[currency].amount;
+            }
+            return {
+                variantId: variant.id || variant.variantId,
+                variantName: variant.name || variant.variantName,
+                imageUrl: variant.imageUrl,
+                unitAmount,
+                currency,
+            };
+        });
+    }, [summary, requestedCurrency]);
+    // Pay for the offer with current selections
+    const pay = useCallback(async (mainOrderId) => {
+        if (isPaying) {
+            throw new Error('Payment already in progress');
+        }
+        setIsPaying(true);
+        try {
+            const result = await offersResource.payPreviewedOffer(offerId, requestedCurrency, lineItemsForPreview, typeof window !== 'undefined' ? window.location.href : undefined, mainOrderId);
+            console.log('[usePreviewOffer] Payment initiated:', result);
+            return {
+                checkoutUrl: result.checkout.checkoutUrl,
+            };
+        }
+        catch (error) {
+            console.error('[usePreviewOffer] Payment failed:', error);
+            throw error;
+        }
+        finally {
+            setIsPaying(false);
+        }
+    }, [offerId, requestedCurrency, lineItemsForPreview, offersResource, isPaying]);
+    // Create checkout session without paying (for landing pages)
+    const toCheckout = useCallback(async (mainOrderId) => {
+        if (isPaying) {
+            throw new Error('Operation already in progress');
+        }
+        setIsPaying(true);
+        try {
+            const result = await offersResource.toCheckout(offerId, requestedCurrency, lineItemsForPreview, typeof window !== 'undefined' ? window.location.href : undefined, mainOrderId);
+            console.log('[usePreviewOffer] Checkout session created:', result);
+            return {
+                checkoutSessionId: result.checkoutSessionId,
+                checkoutToken: result.checkoutToken,
+                checkoutUrl: result.checkoutUrl,
+            };
+        }
+        catch (error) {
+            console.error('[usePreviewOffer] Checkout creation failed:', error);
+            throw error;
+        }
+        finally {
+            setIsPaying(false);
+        }
+    }, [offerId, requestedCurrency, lineItemsForPreview, offersResource, isPaying]);
+    return {
+        offer,
+        isLoading,
+        isFetching,
+        isPaying,
+        error: error,
+        summary,
+        selections,
+        // Precise methods
+        selectVariant,
+        updateQuantity,
+        // Simple methods
+        selectVariantByProduct,
+        updateQuantityByProduct,
+        // Helpers
+        getAvailableVariants,
+        // Payment
+        pay,
+        toCheckout,
+    };
+}

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

@@ -47,7 +47,7 @@ export function useThreeds(options = {}) {
             throw new Error('BasisTheory3ds not loaded yet');
         }
         // Use the same API key approach as the working CMS version
-        const apiKey = getBasisTheoryApiKey('production'); // Use production config for now
+        const apiKey = getBasisTheoryApiKey(); // Auto-detects environment
         const bt3ds = basisTheory3ds(apiKey);
         const session = await bt3ds.createSession({
             tokenId: paymentInstrument.token,
@@ -91,7 +91,7 @@ export function useThreeds(options = {}) {
                 throw new Error('BasisTheory3ds not loaded yet');
             }
             // Use the same API key approach as the working CMS version
-            const apiKey = getBasisTheoryApiKey('production'); // Use production config for now
+            const apiKey = getBasisTheoryApiKey(); // Auto-detects environment
             if (!apiKey) {
                 throw new Error('BasisTheory API key is not set');
             }

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

@@ -27,6 +27,7 @@ export { useCheckoutQuery as useCheckout } from './hooks/useCheckoutQuery';
 export { useCurrency } from './hooks/useCurrency';
 export { useDiscountsQuery as useDiscounts } from './hooks/useDiscountsQuery';
 export { useOfferQuery as useOffer } from './hooks/useOfferQuery';
+export { usePreviewOffer } from './hooks/usePreviewOffer';
 export { useOrderBumpQuery as useOrderBump } from './hooks/useOrderBumpQuery';
 export { useOrderQuery as useOrder } from './hooks/useOrderQuery';
 export { usePaymentQuery as usePayment } from './hooks/usePaymentQuery';
@@ -64,6 +65,7 @@ export type { FunnelAction, FunnelNavigationAction, FunnelNavigationResult, Simp
 export type { FunnelContextValue } from './hooks/useFunnel';
 export type { UseFunnelOptions as UseFunnelLegacyOptions, UseFunnelResult as UseFunnelLegacyResult } from './hooks/useFunnelLegacy';
 export type { AvailableVariant, LineItemSelection, OfferLineItem, OfferPreviewSummary, UseOfferQueryOptions as UseOfferOptions, UseOfferQueryResult as UseOfferResult } from './hooks/useOfferQuery';
+export type { PreviewOfferSummary, UsePreviewOfferOptions, UsePreviewOfferResult } from './hooks/usePreviewOffer';
 export type { UseOrderBumpQueryOptions as UseOrderBumpOptions, UseOrderBumpQueryResult as UseOrderBumpResult } from './hooks/useOrderBumpQuery';
 export type { UseOrderQueryOptions as UseOrderOptions, UseOrderQueryResult as UseOrderResult } from './hooks/useOrderQuery';
 export type { PaymentHook as UsePaymentResult } from './hooks/usePaymentQuery';

package/dist/v2/react/index.js

@@ -30,6 +30,7 @@ export { useCheckoutQuery as useCheckout } from './hooks/useCheckoutQuery';
 export { useCurrency } from './hooks/useCurrency';
 export { useDiscountsQuery as useDiscounts } from './hooks/useDiscountsQuery';
 export { useOfferQuery as useOffer } from './hooks/useOfferQuery';
+export { usePreviewOffer } from './hooks/usePreviewOffer';
 export { useOrderBumpQuery as useOrderBump } from './hooks/useOrderBumpQuery';
 export { useOrderQuery as useOrder } from './hooks/useOrderQuery';
 export { usePaymentQuery as usePayment } from './hooks/usePaymentQuery';