@tagadapay/plugin-sdk 1.0.2

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Tagada Pay Plugin SDK
+ *
+ * Modern React SDK for building Tagada Pay plugins
+ *
+ * Usage:
+ * ```tsx
+ * import { TagadaProvider, useCustomer } from '@tagadapay/plugin-sdk/react';
+ *
+ * function App() {
+ *   return (
+ *     <TagadaProvider>
+ *       <MyPlugin />
+ *     </TagadaProvider>
+ *   );
+ * }
+ *
+ * function MyPlugin() {
+ *   const { customer, isAuthenticated } = useCustomer();
+ *
+ *   return (
+ *     <div>
+ *       {isAuthenticated ? (
+ *         <p>Welcome back, {customer.firstName}!</p>
+ *       ) : (
+ *         <p>Welcome, guest!</p>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export * from './react';

package/dist/index.js

@@ -0,0 +1,37 @@
+/**
+ * Tagada Pay Plugin SDK
+ *
+ * Modern React SDK for building Tagada Pay plugins
+ *
+ * Usage:
+ * ```tsx
+ * import { TagadaProvider, useCustomer } from '@tagadapay/plugin-sdk/react';
+ *
+ * function App() {
+ *   return (
+ *     <TagadaProvider>
+ *       <MyPlugin />
+ *     </TagadaProvider>
+ *   );
+ * }
+ *
+ * function MyPlugin() {
+ *   const { customer, isAuthenticated } = useCustomer();
+ *
+ *   return (
+ *     <div>
+ *       {isAuthenticated ? (
+ *         <p>Welcome back, {customer.firstName}!</p>
+ *       ) : (
+ *         <p>Welcome, guest!</p>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+// Export the new React SDK
+export * from './react';
+// Bridge functionality has been moved to separate imports to prevent SSR issues
+// If you need the deprecated bridge, explicitly import from '@tagadapay/plugin-sdk/bridge'
+// Example: import { initializePlugin } from '@tagadapay/plugin-sdk/bridge'

package/dist/react/components/DebugDrawer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DebugDrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare const DebugDrawer: React.FC<DebugDrawerProps>;
+export default DebugDrawer;

package/dist/react/components/DebugDrawer.js

@@ -0,0 +1,368 @@
+'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';
+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 [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: '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 === '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/react/components/OffersDemo.d.ts

@@ -0,0 +1 @@
+export declare function OffersDemo(): import("react/jsx-runtime").JSX.Element;

package/dist/react/components/OffersDemo.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useOffers } from '../hooks/useOffers';
+import { useCurrency } from '../hooks/useCurrency';
+import { useLocale } from '../hooks/useLocale';
+export function OffersDemo() {
+    const [selectedOfferIds, setSelectedOfferIds] = useState([]);
+    const [inputValue, setInputValue] = useState('');
+    const { locale } = useLocale();
+    const { offers, isLoading, error, refetch, createCheckoutSession, payOffer, transformToCheckout, getOffer, getTotalValue, getTotalSavings, } = useOffers({
+        offerIds: selectedOfferIds,
+        returnUrl: window.location.origin,
+    });
+    const currency = useCurrency();
+    const formatCurrency = (amount) => {
+        return currency.format(amount / 100);
+    };
+    const handleAddOffer = () => {
+        if (inputValue.trim() && !selectedOfferIds.includes(inputValue.trim())) {
+            setSelectedOfferIds([...selectedOfferIds, inputValue.trim()]);
+            setInputValue('');
+        }
+    };
+    const handleRemoveOffer = (offerId) => {
+        setSelectedOfferIds(selectedOfferIds.filter((id) => id !== offerId));
+    };
+    const handleCheckout = async (offerId) => {
+        try {
+            const { checkoutUrl } = await createCheckoutSession(offerId);
+            if (checkoutUrl) {
+                window.location.href = checkoutUrl;
+            }
+        }
+        catch (error) {
+            console.error('Checkout failed:', error);
+            alert('Checkout failed. Please try again.');
+        }
+    };
+    const handlePayOffer = async (offerId) => {
+        try {
+            await payOffer(offerId);
+            alert('Payment successful!');
+        }
+        catch (error) {
+            console.error('Payment failed:', error);
+            alert('Payment failed. Please try again.');
+        }
+    };
+    return (_jsxs("div", { className: "offers-demo mx-auto max-w-4xl p-6", children: [_jsx("h1", { className: "mb-6 text-2xl font-bold", children: "Offers Demo" }), _jsx("div", { className: "mb-6", children: _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), placeholder: "Enter offer ID...", className: "flex-1 rounded-md border border-gray-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" }), _jsx("button", { onClick: handleAddOffer, className: "rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500", children: "Add Offer" })] }) }), _jsxs("div", { className: "mb-6", children: [_jsxs("h2", { className: "mb-3 text-lg font-semibold", children: ["Selected Offers (", selectedOfferIds.length, ")"] }), selectedOfferIds.length === 0 ? (_jsx("p", { className: "text-gray-500", children: "No offers selected. Add some offer IDs above." })) : (_jsx("div", { className: "space-y-2", children: selectedOfferIds.map((offerId) => (_jsxs("div", { className: "flex items-center justify-between rounded-md bg-gray-100 px-3 py-2", children: [_jsx("span", { className: "font-mono text-sm", children: offerId }), _jsx("button", { onClick: () => handleRemoveOffer(offerId), className: "text-red-500 hover:text-red-700", children: "Remove" })] }, offerId))) }))] }), isLoading && (_jsx("div", { className: "mb-6 rounded-md border border-blue-200 bg-blue-50 p-4", children: _jsx("p", { className: "text-blue-800", children: "Loading offers..." }) })), error && (_jsxs("div", { className: "mb-6 rounded-md border border-red-200 bg-red-50 p-4", children: [_jsxs("p", { className: "text-red-800", children: ["Error: ", error.message] }), _jsx("button", { onClick: () => refetch(), className: "mt-2 rounded-md bg-red-500 px-3 py-1 text-sm text-white hover:bg-red-600", children: "Retry" })] })), offers.length > 0 && (_jsxs("div", { className: "mb-6 rounded-md border border-green-200 bg-green-50 p-4", children: [_jsx("h3", { className: "mb-2 text-lg font-semibold text-green-800", children: "Offers Summary" }), _jsxs("div", { className: "space-y-1 text-green-700", children: [_jsxs("p", { children: ["Total Offers: ", offers.length] }), _jsxs("p", { children: ["Total Value: ", formatCurrency(getTotalValue())] }), _jsxs("p", { children: ["Total Savings: ", formatCurrency(getTotalSavings())] })] })] })), _jsx("div", { className: "space-y-4", children: offers.map((offer) => (_jsxs("div", { className: "rounded-lg border border-gray-200 p-4", children: [_jsxs("div", { className: "mb-3 flex items-start justify-between", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-lg font-semibold", children: offer.titleTrans.en || offer.titleTrans[Object.keys(offer.titleTrans)[0]] }), _jsxs("p", { className: "font-mono text-sm text-gray-500", children: ["ID: ", offer.id] })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => handleCheckout(offer.id), className: "rounded-md bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600", children: "Checkout" }), _jsx("button", { onClick: () => handlePayOffer(offer.id), className: "rounded-md bg-green-500 px-3 py-1 text-sm text-white hover:bg-green-600", children: "Pay Now" })] })] }), offer.summaries.map((summary, index) => (_jsxs("div", { className: "mb-3 rounded-md bg-gray-50 p-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("span", { className: "font-semibold", children: ["Summary ", index + 1] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "text-lg font-bold text-green-600", children: formatCurrency(summary.totalAdjustedAmount) }), summary.totalPromotionAmount > 0 && (_jsxs("div", { className: "text-sm text-gray-500", children: ["Save ", formatCurrency(summary.totalPromotionAmount)] }))] })] }), _jsx("div", { className: "space-y-2", children: summary.items.map((item) => (_jsxs("div", { className: "flex items-center justify-between border-b border-gray-200 py-1 last:border-b-0", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: item.product.name }), _jsxs("span", { className: "ml-2 text-sm text-gray-500", children: ["(", item.variant.name, ")"] }), _jsxs("span", { className: "ml-2 text-sm text-gray-500", children: ["\u00D7 ", item.quantity] })] }), _jsxs("div", { className: "text-right", children: [_jsx("div", { className: "font-medium", children: formatCurrency(item.adjustedAmount) }), item.adjustedAmount !== item.amount && (_jsx("div", { className: "text-sm text-gray-500 line-through", children: formatCurrency(item.amount) }))] })] }, item.id))) }), summary.adjustments.length > 0 && (_jsxs("div", { className: "mt-2 border-t border-gray-200 pt-2", children: [_jsx("h4", { className: "mb-1 text-sm font-semibold", children: "Promotions:" }), _jsx("div", { className: "space-y-1", children: summary.adjustments.map((adjustment, adjIndex) => (_jsxs("div", { className: "text-sm text-green-600", children: ["\u2022 ", adjustment.description] }, adjIndex))) })] }))] }, index)))] }, offer.id))) })] }));
+}

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

@@ -0,0 +1 @@
+export { default as DebugDrawer } from './DebugDrawer';

package/dist/react/components/index.js

@@ -0,0 +1 @@
+export { default as DebugDrawer } from './DebugDrawer';

package/dist/react/config/environment.d.ts

@@ -0,0 +1,22 @@
+import { Environment, ApiConfig, EnvironmentConfig } from '../types';
+/**
+ * Environment configurations for different deployment environments
+ */
+export declare const ENVIRONMENT_CONFIGS: Record<Environment, ApiConfig>;
+/**
+ * Get the environment configuration based on the current environment
+ */
+export declare function getEnvironmentConfig(environment?: Environment): EnvironmentConfig;
+/**
+ * Build a complete API URL from environment config and endpoint path
+ */
+export declare function buildApiUrl(config: EnvironmentConfig, endpointPath: string): string;
+/**
+ * Get a specific endpoint URL
+ */
+export declare function getEndpointUrl(config: EnvironmentConfig, category: keyof ApiConfig['endpoints'], endpoint: string): string;
+/**
+ * Auto-detect environment based on hostname, URL patterns, and deployment context
+ * Works with any build tool or deployment system
+ */
+export declare function detectEnvironment(): Environment;