@tagadapay/plugin-sdk 2.8.8 → 2.8.10

package/dist/v2/core/utils/deviceInfo.js

@@ -0,0 +1,162 @@
+/**
+ * Get basic browser information from user agent
+ */
+function getBrowserInfo() {
+    const userAgent = navigator.userAgent;
+    // Chrome
+    if (userAgent.includes('Chrome')) {
+        const match = /Chrome\/(\d+)/.exec(userAgent);
+        return { name: 'Chrome', version: match ? match[1] : 'unknown' };
+    }
+    // Firefox
+    if (userAgent.includes('Firefox')) {
+        const match = /Firefox\/(\d+)/.exec(userAgent);
+        return { name: 'Firefox', version: match ? match[1] : 'unknown' };
+    }
+    // Safari
+    if (userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
+        const match = /Version\/(\d+)/.exec(userAgent);
+        return { name: 'Safari', version: match ? match[1] : 'unknown' };
+    }
+    // Edge
+    if (userAgent.includes('Edge')) {
+        const match = /Edge\/(\d+)/.exec(userAgent);
+        return { name: 'Edge', version: match ? match[1] : 'unknown' };
+    }
+    return { name: 'unknown', version: 'unknown' };
+}
+/**
+ * Get basic OS information from user agent
+ */
+function getOSInfo() {
+    const userAgent = navigator.userAgent;
+    // Windows
+    if (userAgent.includes('Windows')) {
+        if (userAgent.includes('Windows NT 10.0'))
+            return { name: 'Windows', version: '10' };
+        if (userAgent.includes('Windows NT 6.3'))
+            return { name: 'Windows', version: '8.1' };
+        if (userAgent.includes('Windows NT 6.2'))
+            return { name: 'Windows', version: '8' };
+        if (userAgent.includes('Windows NT 6.1'))
+            return { name: 'Windows', version: '7' };
+        return { name: 'Windows', version: 'unknown' };
+    }
+    // macOS
+    if (userAgent.includes('Mac OS X')) {
+        const match = /Mac OS X (\d+[._]\d+)/.exec(userAgent);
+        return { name: 'macOS', version: match ? match[1].replace('_', '.') : 'unknown' };
+    }
+    // iOS
+    if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
+        const match = /OS (\d+[._]\d+)/.exec(userAgent);
+        return { name: 'iOS', version: match ? match[1].replace('_', '.') : 'unknown' };
+    }
+    // Android
+    if (userAgent.includes('Android')) {
+        const match = /Android (\d+[.\d]*)/.exec(userAgent);
+        return { name: 'Android', version: match ? match[1] : 'unknown' };
+    }
+    // Linux
+    if (userAgent.includes('Linux')) {
+        return { name: 'Linux', version: 'unknown' };
+    }
+    return { name: 'unknown', version: 'unknown' };
+}
+/**
+ * Get device information
+ */
+function getDeviceInfo() {
+    const userAgent = navigator.userAgent;
+    // Mobile devices
+    if (userAgent.includes('iPhone')) {
+        return { type: 'mobile', model: 'iPhone' };
+    }
+    if (userAgent.includes('iPad')) {
+        return { type: 'tablet', model: 'iPad' };
+    }
+    if (userAgent.includes('Android')) {
+        if (userAgent.includes('Mobile')) {
+            return { type: 'mobile', model: 'Android' };
+        }
+        else {
+            return { type: 'tablet', model: 'Android' };
+        }
+    }
+    // Desktop (no specific device info)
+    return undefined;
+}
+/**
+ * Get screen resolution
+ */
+function getScreenResolution() {
+    return {
+        width: window.screen.width,
+        height: window.screen.height,
+    };
+}
+/**
+ * Get timezone
+ */
+function getTimeZone() {
+    try {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    }
+    catch (error) {
+        console.error('Failed to get timezone:', error);
+        return 'UTC';
+    }
+}
+/**
+ * Get browser locale
+ */
+export function getBrowserLocale() {
+    try {
+        return navigator.language || 'en-US';
+    }
+    catch (error) {
+        console.error('Failed to get browser locale:', error);
+        return 'en-US';
+    }
+}
+/**
+ * Collect all device information
+ */
+export function collectDeviceInfo() {
+    if (typeof window === 'undefined') {
+        // Server-side fallback
+        return {
+            userAgent: {
+                browser: { name: 'unknown', version: 'unknown' },
+                os: { name: 'unknown', version: 'unknown' },
+            },
+            screenResolution: { width: 0, height: 0 },
+            timeZone: 'UTC',
+        };
+    }
+    return {
+        userAgent: {
+            browser: getBrowserInfo(),
+            os: getOSInfo(),
+            device: getDeviceInfo(),
+        },
+        screenResolution: getScreenResolution(),
+        timeZone: getTimeZone(),
+    };
+}
+/**
+ * Get URL parameters for session initialization
+ */
+export function getUrlParams() {
+    if (typeof window === 'undefined') {
+        return {};
+    }
+    const params = new URLSearchParams(window.location.search);
+    return {
+        locale: params.get('locale') || undefined,
+        currency: params.get('currency') || undefined,
+        utmSource: params.get('utm_source') || undefined,
+        utmMedium: params.get('utm_medium') || undefined,
+        utmCampaign: params.get('utm_campaign') || undefined,
+    };
+}

package/dist/v2/core/utils/eventDispatcher.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Simple event dispatcher for handling state changes in the SDK
+ */
+export type Listener<T> = (data: T) => void;
+export declare class EventDispatcher<T> {
+    private listeners;
+    subscribe(listener: Listener<T>): () => void;
+    notify(data: T): void;
+    clear(): void;
+}

package/dist/v2/core/utils/eventDispatcher.js

@@ -0,0 +1,24 @@
+export class EventDispatcher {
+    constructor() {
+        this.listeners = new Set();
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    notify(data) {
+        this.listeners.forEach((listener) => {
+            try {
+                listener(data);
+            }
+            catch (error) {
+                console.error('Error in event listener:', error);
+            }
+        });
+    }
+    clear() {
+        this.listeners.clear();
+    }
+}

package/dist/v2/core/utils/jwtDecoder.d.ts

@@ -0,0 +1,14 @@
+import { Session } from '../types';
+/**
+ * Decode a JWT token to extract session information
+ * This is a simple client-side decoder - do not use for security validation
+ */
+export declare function decodeJWTClient(token: string): Session | null;
+/**
+ * Check if a JWT token is expired
+ */
+export declare function isTokenExpired(token: string): boolean;
+/**
+ * Get token expiration time
+ */
+export declare function getTokenExpiration(token: string): Date | null;

package/dist/v2/core/utils/jwtDecoder.js

@@ -0,0 +1,85 @@
+/**
+ * Decode a JWT token to extract session information
+ * This is a simple client-side decoder - do not use for security validation
+ */
+export function decodeJWTClient(token) {
+    try {
+        // Split the token into parts
+        const parts = token.split('.');
+        if (parts.length !== 3) {
+            console.error('Invalid JWT token format');
+            return null;
+        }
+        // Decode the payload (second part)
+        const payload = parts[1];
+        // Add padding if needed
+        const paddedPayload = payload + '='.repeat((4 - (payload.length % 4)) % 4);
+        // Decode base64
+        const decoded = atob(paddedPayload);
+        // Parse JSON
+        const parsedPayload = JSON.parse(decoded);
+        // Check if token is expired
+        if (parsedPayload.exp && Date.now() >= parsedPayload.exp * 1000) {
+            console.warn('JWT token is expired');
+            return null;
+        }
+        // Return session data
+        return {
+            sessionId: parsedPayload.sessionId,
+            storeId: parsedPayload.storeId,
+            accountId: parsedPayload.accountId,
+            customerId: parsedPayload.customerId,
+            role: parsedPayload.role,
+            isValid: true,
+            isLoading: false,
+        };
+    }
+    catch (error) {
+        console.error('Failed to decode JWT token:', error);
+        return null;
+    }
+}
+/**
+ * Check if a JWT token is expired
+ */
+export function isTokenExpired(token) {
+    try {
+        const parts = token.split('.');
+        if (parts.length !== 3)
+            return true;
+        const payload = parts[1];
+        const paddedPayload = payload + '='.repeat((4 - (payload.length % 4)) % 4);
+        const decoded = atob(paddedPayload);
+        const parsedPayload = JSON.parse(decoded);
+        if (parsedPayload.exp) {
+            return Date.now() >= parsedPayload.exp * 1000;
+        }
+        return false;
+    }
+    catch (error) {
+        console.error('Failed to check token expiration:', error);
+        return true;
+    }
+}
+/**
+ * Get token expiration time
+ */
+export function getTokenExpiration(token) {
+    try {
+        const parts = token.split('.');
+        if (parts.length !== 3)
+            return null;
+        const payload = parts[1];
+        const paddedPayload = payload + '='.repeat((4 - (payload.length % 4)) % 4);
+        const decoded = atob(paddedPayload);
+        const parsedPayload = JSON.parse(decoded);
+        if (parsedPayload.exp) {
+            return new Date(parsedPayload.exp * 1000);
+        }
+        return null;
+    }
+    catch (error) {
+        console.error('Failed to get token expiration:', error);
+        return null;
+    }
+}

package/dist/v2/core/utils/pluginConfig.d.ts

@@ -7,6 +7,7 @@ export type PluginConfig<TConfig = Record<string, any>> = {
     accountId?: string;
     basePath?: string;
     config?: any;
+    staticResources?: Record<string, any>;
     productId?: string;
     variants?: Record<string, string>;
     prices?: Record<string, any>;

package/dist/v2/core/utils/pluginConfig.js

@@ -8,13 +8,19 @@ import { resolveEnvValue } from './env';
  */
 const loadLocalDevConfig = async (configVariant = 'default') => {
     try {
-        // Only try to load local config in development
-        // Use hostname-based detection for better Vite compatibility
+        // Check for explicit environment override
+        const env = resolveEnvValue('TAGADA_ENV') || resolveEnvValue('TAGADA_ENVIRONMENT');
+        if (env === 'production') {
+            // Skip local config loading if explicitly in production mode
+            return null;
+        }
+        // Only try to load local config in TRUE local development (not deployed CDN instances)
+        // Exclude CDN subdomains (e.g., instance-id.cdn.localhost) by checking for 'cdn.' prefix
         const isLocalDev = typeof window !== 'undefined' &&
             (window.location.hostname === 'localhost' ||
-                window.location.hostname.includes('ngrok-free.app') ||
-                window.location.hostname.includes('.localhost') ||
-                window.location.hostname.includes('127.0.0.1'));
+                window.location.hostname === '127.0.0.1' ||
+                window.location.hostname.includes('ngrok-free.app')) &&
+            !window.location.hostname.includes('.cdn.');
         if (!isLocalDev) {
             return null;
         }
@@ -81,6 +87,43 @@ const loadLocalDevConfig = async (configVariant = 'default') => {
         return null;
     }
 };
+/**
+ * Load static resources for local development
+ * Loads /config/resources.static.json
+ */
+const loadStaticResources = async () => {
+    try {
+        // Check for explicit environment override
+        const env = resolveEnvValue('TAGADA_ENV') || resolveEnvValue('TAGADA_ENVIRONMENT');
+        if (env === 'production') {
+            return null;
+        }
+        // Only try to load in TRUE local development (not deployed CDN instances)
+        // Exclude CDN subdomains (e.g., instance-id.cdn.localhost) by checking for 'cdn.' prefix
+        const isLocalDev = typeof window !== 'undefined' &&
+            (window.location.hostname === 'localhost' ||
+                window.location.hostname === '127.0.0.1' ||
+                window.location.hostname.includes('ngrok-free.app')) &&
+            !window.location.hostname.includes('.cdn.');
+        if (!isLocalDev) {
+            return null;
+        }
+        // Load static resources file
+        console.log('🛠️ Attempting to load /config/resources.static.json...');
+        const response = await fetch('/config/resources.static.json');
+        if (!response.ok) {
+            console.log('🛠️ resources.static.json not found or failed to load');
+            return null;
+        }
+        const staticResources = await response.json();
+        console.log('🛠️ ✅ Loaded local static resources:', staticResources);
+        return staticResources;
+    }
+    catch (error) {
+        console.error('🛠️ ❌ Error loading static resources:', error);
+        return null;
+    }
+};
 /**
  * Helper to get content from meta tag
  */
@@ -137,6 +180,8 @@ const loadProductionConfig = async () => {
  * Handles local dev, production, and raw config
  */
 export const loadPluginConfig = async (configVariant = 'default', rawConfig) => {
+    // Load static resources first (only in local dev)
+    const staticResources = await loadStaticResources();
     // If raw config is provided, use it directly
     if (rawConfig) {
         return {
@@ -144,21 +189,32 @@ export const loadPluginConfig = async (configVariant = 'default', rawConfig) =>
             accountId: rawConfig.accountId,
             basePath: rawConfig.basePath ?? '/',
             config: rawConfig.config ?? {},
+            staticResources: staticResources ?? undefined,
         };
     }
     else {
         const rawConfig = await createRawPluginConfig();
         if (rawConfig) {
-            return rawConfig;
+            return {
+                ...rawConfig,
+                staticResources: staticResources ?? undefined,
+            };
         }
     }
     // Try local development config
     const localConfig = await loadLocalDevConfig(configVariant);
     if (localConfig) {
-        return localConfig;
+        return {
+            ...localConfig,
+            staticResources: staticResources ?? undefined,
+        };
     }
     // Fall back to production config
-    return loadProductionConfig();
+    const productionConfig = await loadProductionConfig();
+    return {
+        ...productionConfig,
+        staticResources: staticResources ?? undefined,
+    };
 };
 /**
  * Helper to load local config file for development (from /config directory)

package/dist/v2/core/utils/tokenStorage.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Client-side token storage utilities
+ */
+/**
+ * Set the CMS token in localStorage
+ */
+export declare function setClientToken(token: string): void;
+/**
+ * Get the CMS token from localStorage
+ */
+export declare function getClientToken(): string | null;
+/**
+ * Clear the CMS token from localStorage
+ */
+export declare function clearClientToken(): void;
+/**
+ * Check if a token exists in localStorage
+ */
+export declare function hasClientToken(): boolean;

package/dist/v2/core/utils/tokenStorage.js

@@ -0,0 +1,52 @@
+/**
+ * Client-side token storage utilities
+ */
+const TOKEN_KEY = 'cms_token';
+/**
+ * Set the CMS token in localStorage
+ */
+export function setClientToken(token) {
+    if (typeof window !== 'undefined') {
+        try {
+            localStorage.setItem(TOKEN_KEY, token);
+            window.dispatchEvent(new Event('storage'));
+        }
+        catch (error) {
+            console.error('Failed to save token to localStorage:', error);
+        }
+    }
+}
+/**
+ * Get the CMS token from localStorage
+ */
+export function getClientToken() {
+    if (typeof window !== 'undefined') {
+        try {
+            return localStorage.getItem(TOKEN_KEY);
+        }
+        catch (error) {
+            console.error('Failed to get token from localStorage:', error);
+            return null;
+        }
+    }
+    return null;
+}
+/**
+ * Clear the CMS token from localStorage
+ */
+export function clearClientToken() {
+    if (typeof window !== 'undefined') {
+        try {
+            localStorage.removeItem(TOKEN_KEY);
+        }
+        catch (error) {
+            console.error('Failed to clear token from localStorage:', error);
+        }
+    }
+}
+/**
+ * Check if a token exists in localStorage
+ */
+export function hasClientToken() {
+    return !!getClientToken();
+}

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

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useCallback, useEffect, useState } from 'react';
 import { useExpressPaymentMethods } from '../hooks/useExpressPaymentMethods';
-export const ApplePayButton = ({ className = '', disabled = false, onSuccess, onError, onCancel, storeName, currencyCode = 'USD', variant = 'outline', size = 'lg', checkout, }) => {
+export const ApplePayButton = ({ className = '', disabled = false, onSuccess, onError, onCancel, storeName, currencyCode = 'USD', variant = 'default', size = 'lg', checkout, }) => {
     const { applePayPaymentMethod, shippingMethods, lineItems, handleAddExpressId, updateCheckoutSessionValues, updateCustomerEmail, reComputeOrderSummary, setError: setContextError, } = useExpressPaymentMethods();
     const [processingPayment, setProcessingPayment] = useState(false);
     const [isApplePayAvailable, setIsApplePayAvailable] = useState(false);

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

@@ -582,7 +582,96 @@ export const DebugDrawer = ({ isOpen, onClose }) => {
                                                                                     color: isCurrent ? '#d1fae5' : '#9ca3af',
                                                                                     marginLeft: '8px',
                                                                                 }, children: ["\u2022 ", cond.type, " \u2192 ", cond.nextStepId] }, condIdx)))] }))] }, step.id));
-                                                        }) })] })), _jsxs("div", { style: { marginTop: '12px' }, children: [_jsx("h4", { style: { margin: '0 0 8px 0', color: '#60a5fa', fontSize: '13px' }, children: "\uD83D\uDD0D Raw Data" }), _jsx("div", { style: { fontSize: '11px' }, children: _jsx(TreeView, { data: context.debugFunnel.data, name: "funnelData" }) })] })] })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No funnel hook active" }))] })), 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: {
+                                                        }) })] })), context.debugFunnel.data?.session && (_jsxs("div", { style: { marginBottom: '16px' }, children: [_jsx("h4", { style: { margin: '0 0 8px 0', color: '#60a5fa', fontSize: '13px' }, children: "\uD83D\uDCE6 Resources & Context" }), context.debugFunnel.data.session.resources &&
+                                                        Object.keys(context.debugFunnel.data.session.resources).length > 0 && (_jsxs("div", { style: { marginBottom: '12px' }, children: [_jsxs("div", { style: {
+                                                                    fontSize: '11px',
+                                                                    color: '#10b981',
+                                                                    fontWeight: 'bold',
+                                                                    marginBottom: '6px',
+                                                                }, children: ["\uD83C\uDFAF Available Resources (", Object.keys(context.debugFunnel.data.session.resources).length, ")"] }), _jsx("div", { style: { display: 'grid', gap: '8px' }, children: Object.entries(context.debugFunnel.data.session.resources).map(([key, value]) => {
+                                                                    // Skip undefined/null resources
+                                                                    if (value === undefined || value === null)
+                                                                        return null;
+                                                                    // Check if it's an array or single resource
+                                                                    const isArray = Array.isArray(value);
+                                                                    const resourceCount = isArray ? value.length : 1;
+                                                                    return (_jsxs("div", { style: {
+                                                                            border: '1px solid #374151',
+                                                                            borderRadius: '6px',
+                                                                            padding: '10px',
+                                                                            backgroundColor: '#111827',
+                                                                        }, children: [_jsxs("div", { style: {
+                                                                                    display: 'flex',
+                                                                                    justifyContent: 'space-between',
+                                                                                    alignItems: 'center',
+                                                                                    marginBottom: '8px',
+                                                                                }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsx("span", { style: { color: '#10b981', fontSize: '14px' }, children: key === 'order' || key === 'mainOrder'
+                                                                                                    ? '🛒'
+                                                                                                    : key === 'customer'
+                                                                                                        ? '👤'
+                                                                                                        : key === 'checkout'
+                                                                                                            ? '💳'
+                                                                                                            : key === 'offer'
+                                                                                                                ? '🎁'
+                                                                                                                : key === 'subscription'
+                                                                                                                    ? '🔄'
+                                                                                                                    : '📄' }), _jsx("span", { style: {
+                                                                                                    color: '#f9fafb',
+                                                                                                    fontWeight: 'bold',
+                                                                                                    fontSize: '12px',
+                                                                                                }, children: key }), isArray && (_jsxs("span", { style: {
+                                                                                                    fontSize: '10px',
+                                                                                                    backgroundColor: '#3b82f6',
+                                                                                                    color: '#fff',
+                                                                                                    padding: '2px 6px',
+                                                                                                    borderRadius: '3px',
+                                                                                                }, children: [resourceCount, " items"] }))] }), !isArray && value && typeof value === 'object' && (_jsx("div", { style: { fontSize: '10px', color: '#9ca3af' }, children: value.id && (_jsx("span", { style: { fontFamily: 'monospace' }, children: value.id })) }))] }), !isArray && value && typeof value === 'object' && (_jsxs("div", { style: {
+                                                                                    display: 'grid',
+                                                                                    gridTemplateColumns: '1fr 1fr',
+                                                                                    gap: '6px',
+                                                                                    fontSize: '11px',
+                                                                                    marginBottom: '8px',
+                                                                                }, children: [value.amount !== undefined && (_jsxs("div", { children: [_jsx("span", { style: { color: '#6b7280' }, children: "Amount: " }), _jsx("span", { style: { color: '#10b981', fontWeight: 'bold' }, children: (() => {
+                                                                                                    try {
+                                                                                                        return context.money.formatMoney(Number(value.amount) || 0, String(value.currency) || 'USD', context.locale.locale);
+                                                                                                    }
+                                                                                                    catch {
+                                                                                                        return `${value.amount} ${value.currency || ''}`;
+                                                                                                    }
+                                                                                                })() })] })), value.email !== undefined && (_jsxs("div", { children: [_jsx("span", { style: { color: '#6b7280' }, children: "Email: " }), _jsx("span", { style: { color: '#60a5fa' }, children: value.email })] })), value.status !== undefined && (_jsxs("div", { children: [_jsx("span", { style: { color: '#6b7280' }, children: "Status: " }), _jsx("span", { style: { color: '#f59e0b' }, children: value.status })] })), value.currency !== undefined && (_jsxs("div", { children: [_jsx("span", { style: { color: '#6b7280' }, children: "Currency: " }), _jsx("span", { style: { color: '#8b5cf6' }, children: value.currency })] }))] })), _jsxs("details", { style: { marginTop: '6px' }, children: [_jsx("summary", { style: {
+                                                                                            cursor: 'pointer',
+                                                                                            fontSize: '10px',
+                                                                                            color: '#60a5fa',
+                                                                                            fontWeight: 'bold',
+                                                                                        }, children: "Show Full Data" }), _jsx("div", { style: { marginTop: '6px', fontSize: '10px' }, children: _jsx(TreeView, { data: value, name: key, maxLevel: 3 }) })] })] }, key));
+                                                                }) })] })), context.debugFunnel.data.session.metadata &&
+                                                        Object.keys(context.debugFunnel.data.session.metadata).length > 0 && (_jsxs("div", { style: { marginBottom: '12px' }, children: [_jsxs("div", { style: {
+                                                                    fontSize: '11px',
+                                                                    color: '#8b5cf6',
+                                                                    fontWeight: 'bold',
+                                                                    marginBottom: '6px',
+                                                                }, children: ["\uD83D\uDCDD Session Metadata (", Object.keys(context.debugFunnel.data.session.metadata).length, ")"] }), _jsx("div", { style: {
+                                                                    border: '1px solid #374151',
+                                                                    borderRadius: '6px',
+                                                                    padding: '10px',
+                                                                    backgroundColor: '#111827',
+                                                                }, children: _jsx(TreeView, { data: context.debugFunnel.data.session.metadata, name: "metadata", maxLevel: 2 }) })] })), _jsxs("div", { style: { marginBottom: '12px' }, children: [_jsx("div", { style: {
+                                                                    fontSize: '11px',
+                                                                    color: '#f59e0b',
+                                                                    fontWeight: 'bold',
+                                                                    marginBottom: '6px',
+                                                                }, children: "\u2139\uFE0F Session Context" }), _jsx("div", { style: {
+                                                                    border: '1px solid #374151',
+                                                                    borderRadius: '6px',
+                                                                    padding: '10px',
+                                                                    backgroundColor: '#111827',
+                                                                }, children: _jsxs("div", { style: { display: 'grid', gap: '6px', fontSize: '11px' }, children: [_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { style: { color: '#6b7280' }, children: "Customer ID:" }), _jsx("span", { style: { color: '#60a5fa', fontFamily: 'monospace', fontSize: '10px' }, children: context.debugFunnel.data.session.customerId })] }), _jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { style: { color: '#6b7280' }, children: "Store ID:" }), _jsx("span", { style: { color: '#60a5fa', fontFamily: 'monospace', fontSize: '10px' }, children: context.debugFunnel.data.session.storeId })] }), context.debugFunnel.data.session.environment && (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { style: { color: '#6b7280' }, children: "Environment:" }), _jsx("span", { style: { color: '#10b981' }, children: context.debugFunnel.data.session.environment })] })), context.debugFunnel.data.session.startedAt && (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { style: { color: '#6b7280' }, children: "Started At:" }), _jsx("span", { style: { color: '#9ca3af', fontSize: '10px' }, children: new Date(context.debugFunnel.data.session.startedAt).toLocaleString() })] })), context.debugFunnel.data.session.lastActivityAt && (_jsxs("div", { style: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx("span", { style: { color: '#6b7280' }, children: "Last Activity:" }), _jsx("span", { style: { color: '#9ca3af', fontSize: '10px' }, children: new Date(context.debugFunnel.data.session.lastActivityAt).toLocaleString() })] }))] }) })] })] })), _jsxs("details", { style: { marginTop: '12px' }, children: [_jsx("summary", { style: {
+                                                            cursor: 'pointer',
+                                                            fontWeight: 'bold',
+                                                            fontSize: '13px',
+                                                            color: '#60a5fa',
+                                                            marginBottom: '8px',
+                                                        }, children: "\uD83D\uDD0D Raw Funnel Data (Debug)" }), _jsx("div", { style: { fontSize: '11px', marginTop: '8px' }, children: _jsx(TreeView, { data: context.debugFunnel.data, name: "funnelData", maxLevel: 4 }) })] })] })) : (_jsx("p", { style: { color: '#6b7280' }, children: "No funnel hook active" }))] })), 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',

package/dist/v2/react/hooks/__examples__/FunnelContextExample.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Example: Accessing Funnel Context & Resources
+ *
+ * This example demonstrates how to access data from previous steps
+ * using the funnel context, including order, customer, and other resources.
+ */
+export declare function FunnelContextExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Simple example for documentation
+ * This can now be called with or without options
+ */
+export declare function SimpleContextExample(): import("react/jsx-runtime").JSX.Element;