@tagadapay/plugin-sdk 2.2.0 → 2.2.1

package/dist/react/components/DebugDrawer.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { useTagadaContext } from '../providers/TagadaProvider';
+import { usePluginConfig } from '../hooks/usePluginConfig';
 const safeStringify = (value) => {
     if (value === null)
         return 'null';
@@ -74,6 +75,7 @@ const TreeView = ({ data, name, level = 0, maxLevel = 3 }) => {
 };
 export const DebugDrawer = ({ isOpen, onClose }) => {
     const context = useTagadaContext();
+    const pluginConfig = usePluginConfig();
     const [activeTab, setActiveTab] = useState('overview');
     useEffect(() => {
         const handleEscape = (e) => {
@@ -88,6 +90,7 @@ export const DebugDrawer = ({ isOpen, onClose }) => {
         return null;
     const baseTabs = [
         { id: 'overview', label: 'Overview' },
+        { id: 'config', label: 'Config' },
         { id: 'store', label: 'Store' },
         { id: 'session', label: 'Session' },
         { id: 'auth', label: 'Auth' },
@@ -154,7 +157,19 @@ export const DebugDrawer = ({ isOpen, onClose }) => {
                             padding: '16px',
                             overflow: 'auto',
                             backgroundColor: '#1f2937',
-                        }, children: [activeTab === 'overview' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "SDK Overview" }), _jsxs("div", { style: { display: 'grid', gap: '12px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Initialized:" }), _jsx("span", { style: { color: context.isInitialized ? '#10b981' : '#ef4444' }, children: context.isInitialized ? '✅ Yes' : '❌ No' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Loading:" }), _jsx("span", { style: { color: context.isLoading ? '#f59e0b' : '#10b981' }, children: context.isLoading ? '⏳ Yes' : '✅ No' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Environment:" }), _jsx("span", { style: { color: '#60a5fa' }, children: context.environment.apiConfig.baseUrl.includes('dev') ? 'Development' : 'Production' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "API Base URL:" }), _jsx("span", { style: { color: '#10b981' }, children: context.environment.apiConfig.baseUrl })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Store ID:" }), _jsx("span", { style: { color: '#60a5fa' }, children: context.store?.id || 'Not set' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Customer ID:" }), _jsx("span", { style: { color: '#60a5fa' }, children: context.customer?.id || 'Not set' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Authenticated:" }), _jsx("span", { style: { color: context.auth.isAuthenticated ? '#10b981' : '#ef4444' }, children: context.auth.isAuthenticated ? '✅ Yes' : '❌ No' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Currency:" }), _jsxs("span", { style: { color: '#f59e0b' }, children: [context.currency.code, " (", context.currency.symbol, ")"] })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Locale:" }), _jsx("span", { style: { color: '#8b5cf6' }, children: context.locale.locale })] })] })] })), activeTab === 'store' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Store Configuration" }), context.store ? (_jsx(TreeView, { data: context.store, name: "store" })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No store data available" }))] })), activeTab === 'session' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Session Data" }), context.session ? (_jsx(TreeView, { data: context.session, name: "session" })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No session data available" }))] })), activeTab === 'auth' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Authentication State" }), _jsx(TreeView, { data: context.auth, name: "auth" }), context.customer && (_jsxs(_Fragment, { children: [_jsx("h4", { style: { margin: '24px 0 12px 0', color: '#60a5fa' }, children: "Customer Data" }), _jsx(TreeView, { data: context.customer, name: "customer" })] }))] })), activeTab === 'items' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Items & Discounts" }), context.debugCheckout.data?.checkout?.summary ? (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("h4", { style: { margin: '0 0 12px 0', color: '#60a5fa' }, children: "Summary" }), _jsxs("div", { style: { display: 'grid', gap: '8px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Currency:" }), _jsx("span", { style: { color: '#f59e0b' }, children: context.debugCheckout.data.checkout.summary.currency })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Subtotal:" }), _jsx("span", { style: { color: '#9ca3af' }, children: (() => {
+                        }, children: [activeTab === 'overview' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "SDK Overview" }), _jsxs("div", { style: { display: 'grid', gap: '12px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Initialized:" }), _jsx("span", { style: { color: context.isInitialized ? '#10b981' : '#ef4444' }, children: context.isInitialized ? '✅ Yes' : '❌ No' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Loading:" }), _jsx("span", { style: { color: context.isLoading ? '#f59e0b' : '#10b981' }, children: context.isLoading ? '⏳ Yes' : '✅ No' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Environment:" }), _jsx("span", { style: { color: '#60a5fa' }, children: context.environment.apiConfig.baseUrl.includes('dev') ? 'Development' : 'Production' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "API Base URL:" }), _jsx("span", { style: { color: '#10b981' }, children: context.environment.apiConfig.baseUrl })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Store ID:" }), _jsx("span", { style: { color: '#60a5fa' }, children: context.store?.id || 'Not set' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Customer ID:" }), _jsx("span", { style: { color: '#60a5fa' }, children: context.customer?.id || 'Not set' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Authenticated:" }), _jsx("span", { style: { color: context.auth.isAuthenticated ? '#10b981' : '#ef4444' }, children: context.auth.isAuthenticated ? '✅ Yes' : '❌ No' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Currency:" }), _jsxs("span", { style: { color: '#f59e0b' }, children: [context.currency.code, " (", context.currency.symbol, ")"] })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Locale:" }), _jsx("span", { style: { color: '#8b5cf6' }, children: context.locale.locale })] })] })] })), activeTab === 'config' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Plugin Configuration" }), _jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("h4", { style: { margin: '0 0 12px 0', color: '#9ca3af', fontSize: '14px' }, children: "Configuration Summary" }), _jsxs("div", { style: { display: 'grid', gap: '8px', fontSize: '13px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Store ID:" }), _jsx("span", { style: { color: '#60a5fa' }, children: pluginConfig.storeId || 'Not set' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Account ID:" }), _jsx("span", { style: { color: '#60a5fa' }, children: pluginConfig.accountId || 'Not set' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Base Path:" }), _jsx("span", { style: { color: '#10b981' }, children: pluginConfig.basePath || '/' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Config Name:" }), _jsx("span", { style: { color: '#f59e0b' }, children: pluginConfig.config?.configName || 'default' })] }), pluginConfig.config?.branding?.primaryColor && (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Primary Color:" }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("div", { style: {
+                                                                            width: '16px',
+                                                                            height: '16px',
+                                                                            backgroundColor: pluginConfig.config.branding.primaryColor,
+                                                                            border: '1px solid #374151',
+                                                                            borderRadius: '3px',
+                                                                        } }), _jsx("span", { style: { color: '#10b981' }, children: pluginConfig.config.branding.primaryColor })] })] }))] })] }), _jsxs("div", { style: { marginBottom: '16px' }, children: [_jsx("h4", { style: { margin: '0 0 12px 0', color: '#9ca3af', fontSize: '14px' }, children: "Full Configuration" }), _jsx(TreeView, { data: pluginConfig, name: "pluginConfig" })] }), process.env.NODE_ENV === 'development' && (_jsxs("div", { style: {
+                                            padding: '12px',
+                                            backgroundColor: '#1f2937',
+                                            border: '1px solid #374151',
+                                            borderRadius: '6px',
+                                            marginTop: '16px',
+                                        }, children: [_jsx("h4", { style: { margin: '0 0 8px 0', color: '#f59e0b', fontSize: '14px' }, children: "Development Mode" }), _jsxs("p", { style: { margin: '0', fontSize: '12px', color: '#9ca3af', lineHeight: '1.4' }, children: ["Configuration is loaded from ", _jsx("code", { style: { color: '#60a5fa' }, children: "/.local.json" }), " and", ' ', _jsxs("code", { style: { color: '#60a5fa' }, children: ["/config/", pluginConfig.config?.configName || 'default', ".tgd.json"] })] }), _jsxs("p", { style: { margin: '8px 0 0 0', fontSize: '12px', color: '#9ca3af', lineHeight: '1.4' }, children: ["Local config variant:", ' ', _jsx("code", { style: { color: '#f59e0b' }, children: pluginConfig.config?.configName || 'default' })] })] }))] })), activeTab === 'store' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Store Configuration" }), context.store ? (_jsx(TreeView, { data: context.store, name: "store" })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No store data available" }))] })), activeTab === 'session' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Session Data" }), context.session ? (_jsx(TreeView, { data: context.session, name: "session" })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No session data available" }))] })), activeTab === 'auth' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Authentication State" }), _jsx(TreeView, { data: context.auth, name: "auth" }), context.customer && (_jsxs(_Fragment, { children: [_jsx("h4", { style: { margin: '24px 0 12px 0', color: '#60a5fa' }, children: "Customer Data" }), _jsx(TreeView, { data: context.customer, name: "customer" })] }))] })), activeTab === 'items' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Items & Discounts" }), context.debugCheckout.data?.checkout?.summary ? (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsx("h4", { style: { margin: '0 0 12px 0', color: '#60a5fa' }, children: "Summary" }), _jsxs("div", { style: { display: 'grid', gap: '8px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Currency:" }), _jsx("span", { style: { color: '#f59e0b' }, children: context.debugCheckout.data.checkout.summary.currency })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Subtotal:" }), _jsx("span", { style: { color: '#9ca3af' }, children: (() => {
                                                                             try {
                                                                                 return context.money.formatMoney(Number(context.debugCheckout.data.checkout.summary.subtotalAmount) || 0, String(context.debugCheckout.data.checkout.summary.currency) || 'USD', context.locale.locale);
                                                                             }

package/dist/react/hooks/usePostPurchases.d.ts

@@ -46,6 +46,59 @@ export interface PostPurchaseOffer {
     summaries: PostPurchaseOfferSummary[];
     offerLineItems: PostPurchaseOfferLineItem[];
 }
+export interface CurrencyOptions {
+    rate: number;
+    date: string;
+    amount: number;
+    lock: boolean;
+}
+export interface VariantOption {
+    id: string;
+    name: string;
+    sku: string | null;
+    default: boolean | null;
+    externalVariantId: string | null;
+    prices: {
+        id: string;
+        currencyOptions: CurrencyOptions;
+    }[];
+}
+export interface OrderSummaryItem {
+    id: string;
+    productId: string;
+    productName: string;
+    productDescription: string | null;
+    variantId: string;
+    variantName: string;
+    variantSku: string | null;
+    variantDefault: boolean | null;
+    variantExternalId: string | null;
+    priceId: string;
+    currencyOptions: CurrencyOptions;
+    quantity: number;
+    unitAmount: number;
+    amount: number;
+    adjustedAmount: number;
+    imageUrl?: string;
+    product: {
+        name: string;
+        description: string;
+    };
+    variant: {
+        name: string;
+        description: string;
+        imageUrl: string;
+        grams: number | null;
+    };
+}
+export interface OrderSummary {
+    items: OrderSummaryItem[];
+    totalAmount: number;
+    totalAdjustedAmount: number;
+    totalPromotionAmount: number;
+    currency: string;
+    options: Record<string, VariantOption[]>;
+}
 export interface UsePostPurchasesOptions {
     /**
      * OrderID to fetch post-purchase offers for
@@ -56,6 +109,18 @@ export interface UsePostPurchasesOptions {
      * @default true
      */
     enabled?: boolean;
+    /**
+     * Whether to automatically initialize checkout sessions for offers
+     * @default false
+     */
+    autoInitializeCheckout?: boolean;
+}
+export interface CheckoutSessionState {
+    checkoutSessionId: string | null;
+    orderSummary: OrderSummary | null;
+    selectedVariants: Record<string, string>;
+    loadingVariants: Record<string, boolean>;
+    isUpdatingSummary: boolean;
 }
 export interface UsePostPurchasesResult {
     /**
@@ -95,15 +160,58 @@ export interface UsePostPurchasesResult {
     /**
      * Initialize a checkout session for a post-purchase offer with specific variants
      */
-    initCheckoutSessionWithVariants: (offerId: string, orderId: string, lineItems: Array<{
+    initCheckoutSessionWithVariants: (offerId: string, orderId: string, lineItems: {
         variantId: string;
         quantity: number;
-    }>) => Promise<{
+    }[]) => Promise<{
         checkoutSessionId: string;
     }>;
     /**
      * Pay with a checkout session for a post-purchase offer
      */
     payWithCheckoutSession: (checkoutSessionId: string, orderId?: string) => Promise<void>;
+    /**
+     * Get checkout session state for an offer
+     */
+    getCheckoutSessionState: (offerId: string) => CheckoutSessionState | null;
+    /**
+     * Initialize checkout session with variant options for an offer
+     */
+    initializeOfferCheckout: (offerId: string) => Promise<void>;
+    /**
+     * Get available variants for a product in an offer's checkout session
+     */
+    getAvailableVariants: (offerId: string, productId: string) => {
+        variantId: string;
+        variantName: string;
+        variantSku: string | null;
+        variantDefault: boolean | null;
+        variantExternalId: string | null;
+        priceId: string;
+        currencyOptions: CurrencyOptions;
+    }[];
+    /**
+     * Select a variant for a product in an offer's checkout session
+     */
+    selectVariant: (offerId: string, productId: string, variantId: string) => Promise<void>;
+    /**
+     * Get the order summary for an offer's checkout session
+     */
+    getOrderSummary: (offerId: string) => OrderSummary | null;
+    /**
+     * Check if variants are being loaded for a specific product in an offer
+     */
+    isLoadingVariants: (offerId: string, productId: string) => boolean;
+    /**
+     * Check if order summary is being updated for an offer
+     */
+    isUpdatingOrderSummary: (offerId: string) => boolean;
+    /**
+     * Confirm purchase for an offer with current variant selections
+     */
+    confirmPurchase: (offerId: string, options?: {
+        draft?: boolean;
+        returnUrl?: string;
+    }) => Promise<void>;
 }
 export declare function usePostPurchases(options: UsePostPurchasesOptions): UsePostPurchasesResult;

package/dist/react/hooks/usePostPurchases.js

@@ -2,10 +2,12 @@ import { useCallback, useEffect, useState } from 'react';
 import { useTagadaContext } from '../providers/TagadaProvider';
 export function usePostPurchases(options) {
     const { apiService, session } = useTagadaContext();
-    const { orderId, enabled = true } = options;
+    const { orderId, enabled = true, autoInitializeCheckout = false } = options;
     const [offers, setOffers] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
+    // Enhanced state for checkout sessions per offer
+    const [checkoutSessions, setCheckoutSessions] = useState({});
     const fetchOffers = useCallback(async () => {
         if (!orderId) {
             setOffers([]);
@@ -17,7 +19,14 @@ export function usePostPurchases(options) {
             const response = await apiService.fetch(`/api/v1/post-purchase/${orderId}/offers`, {
                 method: 'GET',
             });
-            setOffers(response || []);
+            const fetchedOffers = response || [];
+            setOffers(fetchedOffers);
+            // Auto-initialize checkout sessions if enabled
+            if (autoInitializeCheckout && fetchedOffers.length > 0) {
+                for (const offer of fetchedOffers) {
+                    await initializeOfferCheckout(offer.id);
+                }
+            }
         }
         catch (err) {
             const error = err instanceof Error ? err : new Error('Failed to fetch post-purchase offers');
@@ -27,7 +36,7 @@ export function usePostPurchases(options) {
         finally {
             setIsLoading(false);
         }
-    }, [orderId]);
+    }, [orderId, autoInitializeCheckout]);
     const initCheckoutSession = useCallback(async (offerId, orderId) => {
         if (!session?.customerId) {
             throw new Error('Customer ID is required');
@@ -35,26 +44,26 @@ export function usePostPurchases(options) {
         const response = await apiService.fetch(`/api/v1/checkout/offer/init`, {
             method: 'POST',
             body: JSON.stringify({
-                offerId: offerId,
+                offerId,
                 returnUrl: window.location.href,
                 customerId: session?.customerId,
                 orderId,
             }),
         });
         return response;
-    }, []);
+    }, [apiService, session?.customerId]);
     const initCheckoutSessionWithVariants = useCallback(async (offerId, orderId, lineItems) => {
         const response = await apiService.fetch(`/api/v1/offers/${offerId}/transform-to-checkout`, {
             method: 'POST',
             body: JSON.stringify({
-                offerId: offerId,
-                lineItems: lineItems,
+                offerId,
+                lineItems,
                 returnUrl: window.location.href,
                 mainOrderId: orderId,
             }),
         });
         return response;
-    }, []);
+    }, [apiService]);
     const payWithCheckoutSession = useCallback(async (checkoutSessionId, orderId) => {
         const response = await apiService.fetch(`/api/v1/checkout-sessions/${checkoutSessionId}/pay`, {
             method: 'POST',
@@ -67,7 +76,206 @@ export function usePostPurchases(options) {
             }),
         });
         return response;
-    }, []);
+    }, [apiService]);
+    // Enhanced checkout session management
+    const initializeOfferCheckout = useCallback(async (offerId) => {
+        if (!session?.customerId) {
+            throw new Error('Customer ID is required');
+        }
+        try {
+            // Initialize checkout session
+            const initResult = await initCheckoutSession(offerId, orderId);
+            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) {
+            console.error(`[SDK] Failed to initialize checkout for offer ${offerId}:`, error);
+            throw error;
+        }
+    }, [initCheckoutSession, orderId, session?.customerId]);
+    const fetchOrderSummary = useCallback(async (offerId, sessionId) => {
+        try {
+            // Set updating state
+            setCheckoutSessions(prev => ({
+                ...prev,
+                [offerId]: {
+                    ...prev[offerId],
+                    isUpdatingSummary: true,
+                }
+            }));
+            const summaryResult = await apiService.fetch(`/api/v1/checkout-sessions/${sessionId}/order-summary`, {
+                method: 'POST',
+                body: JSON.stringify({ includeVariantOptions: true }),
+            });
+            if (summaryResult) {
+                // Sort items by productId to ensure consistent order
+                const sortedItems = [...summaryResult.items].sort((a, b) => a.productId.localeCompare(b.productId));
+                const orderSummary = {
+                    ...summaryResult,
+                    items: sortedItems,
+                };
+                // Initialize selected variants based on the summary
+                const initialVariants = {};
+                sortedItems.forEach((item) => {
+                    if (item.productId && item.variantId) {
+                        initialVariants[item.productId] = item.variantId;
+                    }
+                });
+                setCheckoutSessions(prev => ({
+                    ...prev,
+                    [offerId]: {
+                        ...prev[offerId],
+                        orderSummary,
+                        selectedVariants: initialVariants,
+                        isUpdatingSummary: false,
+                    }
+                }));
+            }
+        }
+        catch (error) {
+            console.error(`[SDK] Failed to fetch order summary for offer ${offerId}:`, error);
+            setCheckoutSessions(prev => ({
+                ...prev,
+                [offerId]: {
+                    ...prev[offerId],
+                    isUpdatingSummary: false,
+                }
+            }));
+            throw error;
+        }
+    }, [apiService]);
+    const selectVariant = useCallback(async (offerId, productId, variantId) => {
+        const sessionState = checkoutSessions[offerId];
+        if (!sessionState?.checkoutSessionId || !sessionState.orderSummary) {
+            throw new Error('Checkout session not initialized for this offer');
+        }
+        // Set loading state for this specific variant
+        setCheckoutSessions(prev => ({
+            ...prev,
+            [offerId]: {
+                ...prev[offerId],
+                loadingVariants: {
+                    ...prev[offerId].loadingVariants,
+                    [productId]: true,
+                }
+            }
+        }));
+        try {
+            const availableVariants = getAvailableVariants(offerId, productId);
+            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 apiService.fetch(`/api/v1/checkout-sessions/${sessionState.checkoutSessionId}/line-items`, {
+                method: 'POST',
+                body: JSON.stringify({
+                    lineItems: [
+                        {
+                            variantId: selectedVariant.variantId,
+                            quantity: currentItem.quantity,
+                        },
+                    ],
+                }),
+            });
+            // Refetch order summary after successful line item update
+            await fetchOrderSummary(offerId, sessionState.checkoutSessionId);
+        }
+        catch (error) {
+            console.error(`[SDK] Failed to update variant for offer ${offerId}:`, error);
+            throw error;
+        }
+        finally {
+            // Clear loading state for this specific variant
+            setCheckoutSessions(prev => ({
+                ...prev,
+                [offerId]: {
+                    ...prev[offerId],
+                    loadingVariants: {
+                        ...prev[offerId].loadingVariants,
+                        [productId]: false,
+                    }
+                }
+            }));
+        }
+    }, [checkoutSessions, apiService, fetchOrderSummary]);
+    const confirmPurchase = useCallback(async (offerId, options) => {
+        const sessionState = checkoutSessions[offerId];
+        if (!sessionState?.checkoutSessionId) {
+            throw new Error('Checkout session not initialized for this offer');
+        }
+        const response = await apiService.fetch(`/api/v1/checkout-sessions/${sessionState.checkoutSessionId}/pay`, {
+            method: 'POST',
+            body: JSON.stringify({
+                checkoutSessionId: sessionState.checkoutSessionId,
+                draft: options?.draft || false,
+                returnUrl: options?.returnUrl || window.location.href,
+                metadata: {
+                    comingFromPostPurchase: true,
+                    postOrder: orderId,
+                },
+            }),
+        });
+        return response;
+    }, [checkoutSessions, apiService, orderId]);
+    // Helper functions
+    const getCheckoutSessionState = useCallback((offerId) => {
+        return checkoutSessions[offerId] || null;
+    }, [checkoutSessions]);
+    const getAvailableVariants = useCallback((offerId, productId) => {
+        const sessionState = checkoutSessions[offerId];
+        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 getOrderSummary = useCallback((offerId) => {
+        return checkoutSessions[offerId]?.orderSummary || null;
+    }, [checkoutSessions]);
+    const isLoadingVariants = useCallback((offerId, productId) => {
+        return checkoutSessions[offerId]?.loadingVariants?.[productId] || false;
+    }, [checkoutSessions]);
+    const isUpdatingOrderSummary = useCallback((offerId) => {
+        return checkoutSessions[offerId]?.isUpdatingSummary || false;
+    }, [checkoutSessions]);
     useEffect(() => {
         if (enabled && orderId) {
             fetchOffers();
@@ -103,5 +311,14 @@ export function usePostPurchases(options) {
         initCheckoutSession,
         initCheckoutSessionWithVariants,
         payWithCheckoutSession,
+        // Enhanced functionality
+        getCheckoutSessionState,
+        initializeOfferCheckout,
+        getAvailableVariants,
+        selectVariant,
+        getOrderSummary,
+        isLoadingVariants,
+        isUpdatingOrderSummary,
+        confirmPurchase,
     };
 }

package/package.json

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