@tagadapay/plugin-sdk 2.4.39 → 2.5.0

package/dist/v2/react/components/DebugDrawer.js

@@ -0,0 +1,383 @@
+'use client';
+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';
+    if (value === undefined)
+        return 'undefined';
+    if (typeof value === 'string')
+        return value;
+    if (typeof value === 'number' || typeof value === 'boolean')
+        return String(value);
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        return '[object]';
+    }
+};
+const TreeView = ({ data, name, level = 0, maxLevel = 3 }) => {
+    const [isExpanded, setIsExpanded] = useState(level < 2);
+    if (level > maxLevel) {
+        return _jsx("span", { style: { color: '#666' }, children: "..." });
+    }
+    if (data === null) {
+        return _jsx("span", { style: { color: '#f59e0b' }, children: "null" });
+    }
+    if (data === undefined) {
+        return _jsx("span", { style: { color: '#6b7280' }, children: "undefined" });
+    }
+    if (typeof data === 'string') {
+        return _jsxs("span", { style: { color: '#10b981' }, children: ["\"", data, "\""] });
+    }
+    if (typeof data === 'number') {
+        return _jsx("span", { style: { color: '#3b82f6' }, children: data });
+    }
+    if (typeof data === 'boolean') {
+        return _jsx("span", { style: { color: '#8b5cf6' }, children: data.toString() });
+    }
+    if (Array.isArray(data)) {
+        if (data.length === 0) {
+            return _jsx("span", { style: { color: '#6b7280' }, children: "[]" });
+        }
+        return (_jsxs("div", { style: { marginLeft: level > 0 ? '16px' : '0' }, children: [_jsxs("button", { onClick: () => setIsExpanded(!isExpanded), style: {
+                        background: 'none',
+                        border: 'none',
+                        color: '#6b7280',
+                        cursor: 'pointer',
+                        padding: '0',
+                        fontSize: '14px',
+                    }, children: [isExpanded ? '▼' : '▶', " ", name, " (", data.length, " items)"] }), isExpanded && (_jsxs("div", { style: { marginLeft: '16px' }, children: [data.slice(0, 10).map((item, index) => (_jsx(TreeView, { data: item, name: `[${index}]`, level: level + 1, maxLevel: maxLevel }, index))), data.length > 10 && (_jsxs("div", { style: { color: '#6b7280', fontSize: '12px' }, children: ["... and ", data.length - 10, " more items"] }))] }))] }));
+    }
+    if (typeof data === 'object' && data !== null) {
+        const keys = Object.keys(data);
+        if (keys.length === 0) {
+            return _jsx("span", { style: { color: '#6b7280' }, children: '{}' });
+        }
+        return (_jsxs("div", { style: { marginLeft: level > 0 ? '16px' : '0' }, children: [_jsxs("button", { onClick: () => setIsExpanded(!isExpanded), style: {
+                        background: 'none',
+                        border: 'none',
+                        color: '#6b7280',
+                        cursor: 'pointer',
+                        padding: '0',
+                        fontSize: '14px',
+                    }, children: [isExpanded ? '▼' : '▶', " ", name, " (", keys.length, " properties)"] }), isExpanded && (_jsxs("div", { style: { marginLeft: '16px' }, children: [keys.slice(0, 20).map((key) => (_jsxs("div", { style: { marginBottom: '4px' }, children: [_jsxs("span", { style: { color: '#ef4444', fontWeight: 'bold' }, children: [key, ": "] }), _jsx(TreeView, { data: data[key], name: key, level: level + 1, maxLevel: maxLevel })] }, key))), keys.length > 20 && (_jsxs("div", { style: { color: '#6b7280', fontSize: '12px' }, children: ["... and ", keys.length - 20, " more properties"] }))] }))] }));
+    }
+    try {
+        return _jsx("span", { children: safeStringify(data) });
+    }
+    catch {
+        return _jsx("span", { children: "[object]" });
+    }
+};
+export const DebugDrawer = ({ isOpen, onClose }) => {
+    const context = useTagadaContext();
+    const pluginConfig = usePluginConfig();
+    const [activeTab, setActiveTab] = useState('overview');
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        return () => document.removeEventListener('keydown', handleEscape);
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    const baseTabs = [
+        { id: 'overview', label: 'Overview' },
+        { id: 'config', label: 'Config' },
+        { id: 'store', label: 'Store' },
+        { id: 'session', label: 'Session' },
+        { id: 'auth', label: 'Auth' },
+    ];
+    // Add checkout tab if checkout is active
+    const checkoutTab = context.debugCheckout.isActive ? [{ id: 'checkout', label: 'Checkout' }] : [];
+    // Add items tab if checkout has summary data
+    const itemsTab = context.debugCheckout.isActive && context.debugCheckout.data?.checkout?.summary
+        ? [{ id: 'items', label: 'Items' }]
+        : [];
+    const tabs = [...baseTabs, ...checkoutTab, ...itemsTab, { id: 'raw', label: 'Raw Data' }];
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                    zIndex: 999998,
+                }, onClick: onClose }), _jsxs("div", { style: {
+                    position: 'fixed',
+                    top: 0,
+                    right: 0,
+                    bottom: 0,
+                    width: '50vw',
+                    minWidth: '500px',
+                    maxWidth: '800px',
+                    backgroundColor: '#1f2937',
+                    color: '#f9fafb',
+                    boxShadow: '-4px 0 24px rgba(0, 0, 0, 0.3)',
+                    zIndex: 999999,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    fontSize: '14px',
+                    fontFamily: 'ui-monospace, SFMono-Regular, Consolas, monospace',
+                }, children: [_jsxs("div", { style: {
+                            padding: '16px',
+                            borderBottom: '1px solid #374151',
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            backgroundColor: '#111827',
+                        }, children: [_jsxs("div", { children: [_jsx("h2", { style: { margin: 0, fontSize: '18px', fontWeight: 'bold' }, children: "\uD83D\uDC1B TagadaPay SDK Debug" }), _jsx("p", { style: { margin: '4px 0 0 0', fontSize: '12px', color: '#9ca3af' }, children: "Real-time SDK state and data inspection" })] }), _jsx("button", { onClick: onClose, style: {
+                                    background: 'none',
+                                    border: 'none',
+                                    color: '#9ca3af',
+                                    cursor: 'pointer',
+                                    fontSize: '24px',
+                                    padding: '4px',
+                                }, children: "\u00D7" })] }), _jsx("div", { style: {
+                            padding: '0 16px',
+                            borderBottom: '1px solid #374151',
+                            backgroundColor: '#111827',
+                        }, children: _jsx("div", { style: { display: 'flex', gap: '0' }, children: tabs.map((tab) => (_jsx("button", { onClick: () => setActiveTab(tab.id), style: {
+                                    background: 'none',
+                                    border: 'none',
+                                    color: activeTab === tab.id ? '#60a5fa' : '#9ca3af',
+                                    cursor: 'pointer',
+                                    padding: '12px 16px',
+                                    fontSize: '14px',
+                                    borderBottom: activeTab === tab.id ? '2px solid #60a5fa' : '2px solid transparent',
+                                }, children: tab.label }, tab.id))) }) }), _jsxs("div", { style: {
+                            flex: 1,
+                            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 === '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);
+                                                                            }
+                                                                            catch {
+                                                                                return String(context.debugCheckout.data.checkout.summary.subtotalAmount);
+                                                                            }
+                                                                        })() })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Total Promotions:" }), _jsx("span", { style: { color: '#ef4444' }, children: (() => {
+                                                                            try {
+                                                                                return `-${context.money.formatMoney(Number(context.debugCheckout.data.checkout.summary.totalPromotionAmount) || 0, String(context.debugCheckout.data.checkout.summary.currency) || 'USD', context.locale.locale)}`;
+                                                                            }
+                                                                            catch {
+                                                                                return `-${String(context.debugCheckout.data.checkout.summary.totalPromotionAmount)}`;
+                                                                            }
+                                                                        })() })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Total Adjusted:" }), _jsx("span", { style: { color: '#10b981', fontWeight: 'bold' }, children: (() => {
+                                                                            try {
+                                                                                return context.money.formatMoney(Number(context.debugCheckout.data.checkout.summary.totalAdjustedAmount) || 0, String(context.debugCheckout.data.checkout.summary.currency) || 'USD', context.locale.locale);
+                                                                            }
+                                                                            catch {
+                                                                                return String(context.debugCheckout.data.checkout.summary.totalAdjustedAmount);
+                                                                            }
+                                                                        })() })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Shipping:" }), _jsx("span", { style: { color: '#9ca3af' }, children: (() => {
+                                                                            try {
+                                                                                const shipping = Number(context.debugCheckout.data.checkout.summary.shippingCost) || 0;
+                                                                                return shipping === 0
+                                                                                    ? 'FREE'
+                                                                                    : context.money.formatMoney(shipping, String(context.debugCheckout.data.checkout.summary.currency) || 'USD', context.locale.locale);
+                                                                            }
+                                                                            catch {
+                                                                                return String(context.debugCheckout.data.checkout.summary.shippingCost);
+                                                                            }
+                                                                        })() })] })] })] }), _jsxs("div", { style: { marginBottom: '24px' }, children: [_jsxs("h4", { style: { margin: '0 0 12px 0', color: '#60a5fa' }, children: ["Line Items (", context.debugCheckout.data.checkout.summary.items.length, ")"] }), _jsx("div", { style: { display: 'grid', gap: '16px' }, children: context.debugCheckout.data.checkout.summary.items.map((item, index) => (_jsx("div", { style: {
+                                                                border: '1px solid #374151',
+                                                                borderRadius: '8px',
+                                                                padding: '12px',
+                                                                backgroundColor: '#111827',
+                                                            }, children: _jsxs("div", { style: { display: 'flex', gap: '12px', alignItems: 'flex-start' }, children: [(() => {
+                                                                        const imageUrl = item.variant?.imageUrl ||
+                                                                            item.orderLineItemVariant?.imageUrl ||
+                                                                            item.imageUrl ||
+                                                                            item.product?.image?.src ||
+                                                                            item.product?.images?.[0]?.src;
+                                                                        return imageUrl ? (_jsx("img", { src: imageUrl, alt: item.product?.name ||
+                                                                                item.orderLineItemProduct?.name ||
+                                                                                item.name ||
+                                                                                'Product', style: {
+                                                                                width: '60px',
+                                                                                height: '60px',
+                                                                                objectFit: 'cover',
+                                                                                borderRadius: '4px',
+                                                                                backgroundColor: '#374151',
+                                                                            }, onError: (e) => {
+                                                                                e.target.style.display = 'none';
+                                                                            } })) : (_jsx("div", { style: {
+                                                                                width: '60px',
+                                                                                height: '60px',
+                                                                                backgroundColor: '#374151',
+                                                                                borderRadius: '4px',
+                                                                                display: 'flex',
+                                                                                alignItems: 'center',
+                                                                                justifyContent: 'center',
+                                                                                fontSize: '24px',
+                                                                                color: '#9ca3af',
+                                                                            }, children: "\uD83D\uDCE6" }));
+                                                                    })(), _jsxs("div", { style: { flex: 1 }, children: [_jsxs("div", { style: { marginBottom: '8px' }, children: [_jsxs("h5", { style: {
+                                                                                            margin: '0 0 4px 0',
+                                                                                            color: '#f9fafb',
+                                                                                            fontSize: '14px',
+                                                                                            fontWeight: 'bold',
+                                                                                        }, children: [item.product?.name ||
+                                                                                                item.orderLineItemProduct?.name ||
+                                                                                                item.name ||
+                                                                                                'Unknown Product', item.isOrderBump && (_jsx("span", { style: {
+                                                                                                    marginLeft: '8px',
+                                                                                                    fontSize: '11px',
+                                                                                                    backgroundColor: '#f59e0b',
+                                                                                                    color: '#000',
+                                                                                                    padding: '2px 6px',
+                                                                                                    borderRadius: '4px',
+                                                                                                }, children: "ORDER BUMP" }))] }), (item.variant?.name || item.orderLineItemVariant?.name) && (_jsxs("p", { style: { margin: '0 0 4px 0', fontSize: '12px', color: '#9ca3af' }, children: ["Variant: ", item.variant?.name || item.orderLineItemVariant?.name] })), (item.product?.description || item.description) && (_jsx("p", { style: { margin: '0', fontSize: '11px', color: '#6b7280' }, children: (() => {
+                                                                                            const desc = item.product?.description || item.description;
+                                                                                            // Strip HTML tags for display
+                                                                                            const cleaned = desc.replace(/<[^>]*>/g, '');
+                                                                                            return cleaned.length > 100
+                                                                                                ? cleaned.substring(0, 100) + '...'
+                                                                                                : cleaned;
+                                                                                        })() }))] }), _jsxs("div", { style: {
+                                                                                    display: 'grid',
+                                                                                    gridTemplateColumns: '1fr 1fr',
+                                                                                    gap: '8px',
+                                                                                    fontSize: '12px',
+                                                                                    marginBottom: '8px',
+                                                                                }, children: [_jsxs("div", { children: [_jsx("span", { style: { color: '#9ca3af' }, children: "Quantity: " }), _jsx("span", { style: { color: '#60a5fa', fontWeight: 'bold' }, children: item.quantity })] }), _jsxs("div", { children: [_jsx("span", { style: { color: '#9ca3af' }, children: "Unit Price: " }), _jsx("span", { style: { color: '#f9fafb' }, children: (() => {
+                                                                                                    try {
+                                                                                                        return context.money.formatMoney(Number(item.unitAmount) || 0, String(context.debugCheckout.data.checkout.summary.currency) ||
+                                                                                                            'USD', context.locale.locale);
+                                                                                                    }
+                                                                                                    catch {
+                                                                                                        return String(item.unitAmount);
+                                                                                                    }
+                                                                                                })() })] }), _jsxs("div", { children: [_jsx("span", { style: { color: '#9ca3af' }, children: "Original: " }), _jsx("span", { style: {
+                                                                                                    color: item.amount !== item.adjustedAmount ? '#9ca3af' : '#f9fafb',
+                                                                                                    textDecoration: item.amount !== item.adjustedAmount ? 'line-through' : 'none',
+                                                                                                }, children: (() => {
+                                                                                                    try {
+                                                                                                        return context.money.formatMoney(Number(item.amount) || 0, String(context.debugCheckout.data.checkout.summary.currency) ||
+                                                                                                            'USD', context.locale.locale);
+                                                                                                    }
+                                                                                                    catch {
+                                                                                                        return String(item.amount);
+                                                                                                    }
+                                                                                                })() })] }), _jsxs("div", { children: [_jsx("span", { style: { color: '#9ca3af' }, children: "Final: " }), _jsx("span", { style: { color: '#10b981', fontWeight: 'bold' }, children: (() => {
+                                                                                                    try {
+                                                                                                        return context.money.formatMoney(Number(item.adjustedAmount) || 0, String(context.debugCheckout.data.checkout.summary.currency) ||
+                                                                                                            'USD', context.locale.locale);
+                                                                                                    }
+                                                                                                    catch {
+                                                                                                        return String(item.adjustedAmount);
+                                                                                                    }
+                                                                                                })() }), item.amount !== item.adjustedAmount && (_jsxs("span", { style: { color: '#ef4444', marginLeft: '4px' }, children: ["(", (() => {
+                                                                                                        try {
+                                                                                                            const discount = Number(item.amount) - Number(item.adjustedAmount);
+                                                                                                            return `-${context.money.formatMoney(discount, String(context.debugCheckout.data.checkout.summary.currency) ||
+                                                                                                                'USD', context.locale.locale)}`;
+                                                                                                        }
+                                                                                                        catch {
+                                                                                                            return `-${item.amount - item.adjustedAmount}`;
+                                                                                                        }
+                                                                                                    })(), ")"] }))] })] }), item.adjustments && item.adjustments.length > 0 && (_jsxs("div", { style: {
+                                                                                    backgroundColor: '#065f46',
+                                                                                    padding: '8px',
+                                                                                    borderRadius: '4px',
+                                                                                    marginTop: '8px',
+                                                                                }, children: [_jsx("div", { style: {
+                                                                                            fontSize: '11px',
+                                                                                            fontWeight: 'bold',
+                                                                                            marginBottom: '4px',
+                                                                                            color: '#6ee7b7',
+                                                                                        }, children: "\uD83D\uDCB0 Item Promotions Applied:" }), item.adjustments.map((adjustment, adjIndex) => (_jsxs("div", { style: { fontSize: '10px', marginBottom: '2px' }, children: [_jsx("div", { style: { color: '#6ee7b7', fontWeight: 'bold' }, children: adjustment.description }), _jsxs("div", { style: { color: '#a7f3d0' }, children: ["Amount:", ' ', (() => {
+                                                                                                        try {
+                                                                                                            return context.money.formatMoney(Math.abs(Number(adjustment.amount) || 0), String(adjustment.currency) ||
+                                                                                                                String(context.debugCheckout.data.checkout.summary.currency) ||
+                                                                                                                'USD', context.locale.locale);
+                                                                                                        }
+                                                                                                        catch {
+                                                                                                            return String(Math.abs(Number(adjustment.amount) || 0));
+                                                                                                        }
+                                                                                                    })(), ' ', "\u2022 Type: ", adjustment.type, " \u2022 Level: ", adjustment.level, adjustment.sourceId && ` • ID: ${adjustment.sourceId}`] })] }, adjIndex)))] })), _jsxs("div", { style: { fontSize: '9px', color: '#6b7280', marginTop: '8px' }, children: ["Product ID: ", item.productId, " \u2022 Variant ID: ", item.variantId, " \u2022 Price ID:", ' ', item.priceId] })] })] }) }, item.id || index))) })] }), context.debugCheckout.data?.availablePromotions &&
+                                                context.debugCheckout.data.availablePromotions.length > 0 && (_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsxs("h4", { style: { margin: '0 0 12px 0', color: '#60a5fa' }, children: ["Available Promotions (", context.debugCheckout.data.availablePromotions.length, ")"] }), _jsx("div", { style: { display: 'grid', gap: '12px' }, children: context.debugCheckout.data.availablePromotions.map((promotion, index) => (_jsxs("div", { style: {
+                                                                border: '1px solid #374151',
+                                                                borderRadius: '6px',
+                                                                padding: '12px',
+                                                                backgroundColor: '#111827',
+                                                            }, children: [_jsxs("div", { style: { marginBottom: '8px' }, children: [_jsxs("div", { style: { color: '#f9fafb', fontWeight: 'bold', marginBottom: '4px' }, children: [promotion.name, promotion.automatic && (_jsx("span", { style: {
+                                                                                        marginLeft: '8px',
+                                                                                        fontSize: '10px',
+                                                                                        backgroundColor: '#10b981',
+                                                                                        color: '#000',
+                                                                                        padding: '2px 6px',
+                                                                                        borderRadius: '4px',
+                                                                                    }, children: "AUTO" })), promotion.enabled && (_jsx("span", { style: {
+                                                                                        marginLeft: '8px',
+                                                                                        fontSize: '10px',
+                                                                                        backgroundColor: '#3b82f6',
+                                                                                        color: '#fff',
+                                                                                        padding: '2px 6px',
+                                                                                        borderRadius: '4px',
+                                                                                    }, children: "ACTIVE" }))] }), _jsxs("div", { style: { fontSize: '11px', color: '#9ca3af' }, children: ["ID: ", promotion.id, " \u2022 Usage: ", promotion.usageCount || 0, promotion.usageLimit && ` / ${promotion.usageLimit}`] })] }), promotion.rules && promotion.rules.length > 0 && (_jsxs("div", { style: { marginBottom: '8px' }, children: [_jsx("div", { style: {
+                                                                                fontSize: '10px',
+                                                                                color: '#60a5fa',
+                                                                                fontWeight: 'bold',
+                                                                                marginBottom: '4px',
+                                                                            }, children: "Rules:" }), promotion.rules.map((rule, ruleIndex) => (_jsxs("div", { style: { fontSize: '9px', color: '#d1d5db', marginBottom: '2px' }, children: ["\u2022 ", rule.type, " ", rule.productId && `(Product: ${rule.productId})`, rule.minimumQuantity && ` - Min Qty: ${rule.minimumQuantity}`, rule.minimumAmount && ` - Min Amount: ${rule.minimumAmount}`, rule.variantIds &&
+                                                                                    rule.variantIds.length > 0 &&
+                                                                                    ` - Variants: ${rule.variantIds.length}`] }, ruleIndex)))] })), promotion.actions && promotion.actions.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
+                                                                                fontSize: '10px',
+                                                                                color: '#10b981',
+                                                                                fontWeight: 'bold',
+                                                                                marginBottom: '4px',
+                                                                            }, children: "Actions:" }), promotion.actions.map((action, actionIndex) => (_jsxs("div", { style: { fontSize: '9px', color: '#d1d5db', marginBottom: '2px' }, children: ["\u2022 ", action.type, action.adjustmentPercentage &&
+                                                                                    ` - ${action.adjustmentPercentage}% off`, action.adjustmentAmount && ` - ${action.adjustmentAmount} off`, action.freeShipping && ` - Free Shipping`, action.targetProductId && ` - Target: ${action.targetProductId}`, action.maxQuantityDiscounted &&
+                                                                                    ` - Max Qty: ${action.maxQuantityDiscounted}`] }, actionIndex)))] }))] }, promotion.id || index))) })] })), context.debugCheckout.data.checkout.summary.adjustments &&
+                                                context.debugCheckout.data.checkout.summary.adjustments.length > 0 && (_jsxs("div", { style: { marginBottom: '24px' }, children: [_jsxs("h4", { style: { margin: '0 0 12px 0', color: '#60a5fa' }, children: ["Order Level Discounts (", context.debugCheckout.data.checkout.summary.adjustments.length, ")"] }), _jsx("div", { style: { display: 'grid', gap: '8px' }, children: context.debugCheckout.data.checkout.summary.adjustments.map((adjustment, index) => (_jsxs("div", { style: {
+                                                                border: '1px solid #374151',
+                                                                borderRadius: '6px',
+                                                                padding: '10px',
+                                                                backgroundColor: '#111827',
+                                                                display: 'flex',
+                                                                justifyContent: 'space-between',
+                                                                alignItems: 'center',
+                                                            }, children: [_jsxs("div", { children: [_jsx("div", { style: { color: '#f9fafb', fontWeight: 'bold', marginBottom: '2px' }, children: adjustment.description }), _jsxs("div", { style: { fontSize: '11px', color: '#9ca3af' }, children: [adjustment.type, " \u2022 Level: ", adjustment.level, adjustment.sourceId && ` • ID: ${adjustment.sourceId}`] })] }), _jsx("div", { style: { color: '#ef4444', fontWeight: 'bold' }, children: (() => {
+                                                                        try {
+                                                                            return context.money.formatMoney(Math.abs(Number(adjustment.amount)) || 0, String(adjustment.currency) ||
+                                                                                String(context.debugCheckout.data.checkout.summary.currency) ||
+                                                                                'USD', context.locale.locale);
+                                                                        }
+                                                                        catch {
+                                                                            return String(Math.abs(Number(adjustment.amount)));
+                                                                        }
+                                                                    })() })] }, index))) })] }))] })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No checkout summary data available" }))] })), activeTab === 'checkout' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Checkout Debug" }), context.debugCheckout.isActive ? (_jsxs("div", { children: [_jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h4", { style: { margin: '0 0 12px 0', color: '#60a5fa' }, children: "Status" }), _jsxs("div", { style: { display: 'grid', gap: '8px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Hook Active:" }), _jsx("span", { style: { color: '#10b981' }, children: "\u2705 Yes" })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Loading:" }), _jsx("span", { style: { color: context.debugCheckout.isLoading ? '#f59e0b' : '#10b981' }, children: context.debugCheckout.isLoading ? '⏳ Yes' : '✅ No' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Has Error:" }), _jsx("span", { style: { color: context.debugCheckout.error ? '#ef4444' : '#10b981' }, children: context.debugCheckout.error ? '❌ Yes' : '✅ No' })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { children: "Last Updated:" }), _jsx("span", { style: { color: '#9ca3af', fontSize: '12px' }, children: context.debugCheckout.lastUpdated?.toLocaleTimeString() || 'Never' })] })] })] }), context.debugCheckout.error && (_jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h4", { style: { margin: '0 0 12px 0', color: '#ef4444' }, children: "Error Details" }), _jsxs("div", { style: {
+                                                            backgroundColor: '#372c2c',
+                                                            padding: '12px',
+                                                            borderRadius: '4px',
+                                                            border: '1px solid #ef4444',
+                                                        }, children: [_jsxs("div", { style: { color: '#ef4444', fontWeight: 'bold', marginBottom: '8px' }, children: [context.debugCheckout.error.name, ": ", context.debugCheckout.error.message] }), context.debugCheckout.error.stack && (_jsx("pre", { style: {
+                                                                    color: '#9ca3af',
+                                                                    fontSize: '11px',
+                                                                    margin: 0,
+                                                                    whiteSpace: 'pre-wrap',
+                                                                }, children: context.debugCheckout.error.stack }))] })] })), _jsxs("div", { children: [_jsx("h4", { style: { margin: '0 0 12px 0', color: '#60a5fa' }, children: "Full Checkout Data" }), _jsx(TreeView, { data: context.debugCheckout.data, name: "checkoutData" })] })] })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No checkout hook active" }))] })), activeTab === 'raw' && (_jsxs("div", { children: [_jsx("h3", { style: { margin: '0 0 16px 0', color: '#60a5fa' }, children: "Raw Context Data" }), _jsx("div", { style: { fontSize: '12px' }, children: _jsx(TreeView, { data: context, name: "tagadaContext", maxLevel: 4 }) })] }))] })] })] }));
+};
+export default DebugDrawer;

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

@@ -0,0 +1,28 @@
+/**
+ * API Query Hook using TanStack Query + Axios
+ * Facade pattern for React SDK
+ */
+import { UseQueryOptions, UseMutationOptions } from '@tanstack/react-query';
+import { ApiClient } from '../../core/resources/apiClient';
+export declare function setGlobalApiClient(client: ApiClient): void;
+export declare function getGlobalApiClient(): ApiClient;
+export declare function getGlobalApiClientOrNull(): ApiClient | null;
+export declare const queryKeys: {
+    readonly checkout: (token: string, currency?: string) => (string | undefined)[];
+    readonly promotions: (sessionId: string) => string[];
+    readonly orderBumps: (sessionId: string) => string[];
+    readonly products: (productIds: string[], options?: Record<string, any>) => (string | string[] | Record<string, any> | undefined)[];
+    readonly store: (storeId: string) => string[];
+    readonly order: (orderId: string) => string[];
+};
+export declare function useApiQuery<T = unknown>(key: readonly unknown[], url: string | null, options?: Omit<UseQueryOptions<T>, 'queryKey' | 'queryFn'>): import("@tanstack/react-query").UseQueryResult<import("@tanstack/react-query").NoInfer<T>, Error>;
+export declare function useApiMutation<TData = unknown, TVariables = unknown>(mutationFn: (variables: TVariables) => Promise<TData>, options?: UseMutationOptions<TData, Error, TVariables>): import("@tanstack/react-query").UseMutationResult<TData, Error, TVariables, unknown>;
+export declare function useInvalidateQuery(): {
+    invalidateCheckout: (token: string) => void;
+    invalidatePromotions: (sessionId: string) => void;
+    invalidateOrderBumps: (sessionId: string) => void;
+    invalidateAll: () => void;
+};
+export declare function usePreloadQuery(): {
+    preloadCheckout: (token: string, currency?: string) => void;
+};

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

@@ -0,0 +1,84 @@
+/**
+ * API Query Hook using TanStack Query + Axios
+ * Facade pattern for React SDK
+ */
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+// Global API client instance
+let globalApiClient = null;
+export function setGlobalApiClient(client) {
+    globalApiClient = client;
+}
+export function getGlobalApiClient() {
+    if (!globalApiClient) {
+        throw new Error('API client not initialized. Make sure TagadaProvider is wrapping your app.');
+    }
+    return globalApiClient;
+}
+export function getGlobalApiClientOrNull() {
+    return globalApiClient;
+}
+// Query key builders for consistency
+export const queryKeys = {
+    checkout: (token, currency) => ['checkout', token, currency].filter(Boolean),
+    promotions: (sessionId) => ['promotions', sessionId],
+    orderBumps: (sessionId) => ['order-bumps', sessionId],
+    products: (productIds, options) => ['products', productIds, options],
+    store: (storeId) => ['store', storeId],
+    order: (orderId) => ['order', orderId],
+};
+// Main query hook
+export function useApiQuery(key, url, options) {
+    const client = getGlobalApiClient();
+    return useQuery({
+        queryKey: key,
+        queryFn: async () => {
+            if (!url)
+                throw new Error('URL is required');
+            return client.get(url);
+        },
+        enabled: !!url && (options?.enabled !== false),
+        staleTime: 30000, // 30 seconds
+        gcTime: 5 * 60 * 1000, // 5 minutes (was cacheTime in v4)
+        ...options,
+    });
+}
+// Mutation hook
+export function useApiMutation(mutationFn, options) {
+    return useMutation({
+        mutationFn,
+        ...options,
+    });
+}
+// Convenience hooks for common operations
+export function useInvalidateQuery() {
+    const queryClient = useQueryClient();
+    return {
+        invalidateCheckout: (token) => {
+            void queryClient.invalidateQueries({ queryKey: queryKeys.checkout(token) });
+        },
+        invalidatePromotions: (sessionId) => {
+            void queryClient.invalidateQueries({ queryKey: queryKeys.promotions(sessionId) });
+        },
+        invalidateOrderBumps: (sessionId) => {
+            void queryClient.invalidateQueries({ queryKey: queryKeys.orderBumps(sessionId) });
+        },
+        invalidateAll: () => {
+            void queryClient.invalidateQueries();
+        },
+    };
+}
+// Preload function for optimistic loading
+export function usePreloadQuery() {
+    const queryClient = useQueryClient();
+    const client = getGlobalApiClient();
+    return {
+        preloadCheckout: (token, currency) => {
+            const url = `/api/v1/checkout-sessions/${token}/v2${currency ? `?currency=${currency}` : ''}`;
+            void queryClient.prefetchQuery({
+                queryKey: queryKeys.checkout(token, currency),
+                queryFn: () => client.get(url),
+                staleTime: 30000,
+            });
+        },
+    };
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Checkout Hook using TanStack Query
+ * Replaces the coordinator pattern with automatic cache invalidation
+ */
+import { CheckoutData, CheckoutInitParams, CheckoutLineItem } from '../../core/resources/checkout';
+export interface UseCheckoutQueryOptions {
+    checkoutToken?: string;
+    enabled?: boolean;
+}
+export interface UseCheckoutQueryResult {
+    checkout: CheckoutData | undefined;
+    isLoading: boolean;
+    error: Error | null;
+    isSuccess: boolean;
+    init: (params: CheckoutInitParams) => Promise<{
+        checkoutUrl: string;
+        checkoutSession: any;
+        checkoutToken: string;
+    }>;
+    refresh: () => Promise<void>;
+    updateLineItems: (lineItems: CheckoutLineItem[]) => Promise<any>;
+    setItemQuantity: (variantId: string, quantity: number, priceId?: string) => Promise<any>;
+    updateCustomer: (data: {
+        email: string;
+        acceptsMarketing?: boolean;
+    }) => Promise<any>;
+    updateCustomerAndSessionInfo: (data: {
+        customerData: {
+            email: string;
+            acceptsMarketing?: boolean;
+        };
+        shippingAddress: any;
+        billingAddress?: any;
+        differentBillingAddress?: boolean;
+    }) => Promise<any>;
+    applyPromotionCode: (code: string) => Promise<any>;
+    removePromotion: (promotionId: string) => Promise<any>;
+}
+export declare function useCheckoutQuery(options?: UseCheckoutQueryOptions): UseCheckoutQueryResult;