@tagadapay/plugin-sdk 2.4.39 → 2.5.2

package/dist/v2/react/providers/TagadaProvider.js

@@ -0,0 +1,680 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * TagadaProvider - Main provider component for the Tagada Pay React SDK
+ */
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { default as DebugDrawer } from '../components/DebugDrawer';
+import { detectEnvironment, getEnvironmentConfig } from '../../../react/config/environment';
+import { ApiService } from '../../../react/services/apiService';
+import { collectDeviceInfo, getBrowserLocale, getUrlParams } from '../../../react/utils/deviceInfo';
+import { decodeJWTClient, isTokenExpired } from '../../../react/utils/jwtDecoder';
+import { convertCurrency, formatMoney, formatMoneyWithoutSymbol, formatSimpleMoney, getCurrencyInfo, minorUnitsToMajorUnits, moneyStringOrNumberToMinorUnits, } from '../../../react/utils/money';
+import { clearClientToken, getClientToken, setClientToken } from '../../../react/utils/tokenStorage';
+import { ApiClient } from '../../core/resources/apiClient';
+import { setGlobalApiClient, getGlobalApiClientOrNull } from '../hooks/useApiQuery';
+import { loadPluginConfig } from '../../core/utils/pluginConfig';
+// Professional, subtle loading component for initialization
+const InitializationLoader = () => (_jsxs("div", { style: {
+        position: 'fixed',
+        top: '24px',
+        right: '24px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '8px 12px',
+        backgroundColor: 'rgba(255, 255, 255, 0.9)',
+        border: '1px solid rgba(229, 231, 235, 0.8)',
+        borderRadius: '8px',
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
+        backdropFilter: 'blur(8px)',
+        zIndex: 999999,
+        fontSize: '13px',
+        color: '#6b7280',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontWeight: '500',
+    }, children: [_jsx("div", { style: {
+                width: '12px',
+                height: '12px',
+                border: '1.5px solid #e5e7eb',
+                borderTop: '1.5px solid #9ca3af',
+                borderRadius: '50%',
+                animation: 'tagada-spin 1s linear infinite',
+            } }), _jsx("span", { children: "Loading..." }), _jsx("style", { children: `
+        @keyframes tagada-spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+      ` })] }));
+const TagadaContext = createContext(null);
+export function TagadaProvider({ children, environment, customApiConfig, debugMode, // Remove default, will be set based on environment
+localConfig, blockUntilSessionReady = false, // Default to new non-blocking behavior
+rawPluginConfig, }) {
+    // LOCAL DEV ONLY: Use localConfig override if in local development, otherwise use default
+    const isLocalDev = typeof window !== 'undefined' &&
+        (window.location.hostname === 'localhost' ||
+            window.location.hostname.includes('.localhost') ||
+            window.location.hostname.includes('127.0.0.1'));
+    const configVariant = isLocalDev ? localConfig || 'default' : 'default';
+    // Debug logging (only log once during initial render)
+    const hasLoggedRef = useRef(false);
+    if (!hasLoggedRef.current) {
+        console.log('🔍 TagadaProvider Config Debug:', {
+            hostname: typeof window !== 'undefined' ? window.location.hostname : 'SSR',
+            isLocalDev,
+            localConfig,
+            configVariant,
+        });
+        hasLoggedRef.current = true;
+    }
+    // Load plugin configuration directly (not using hook to avoid circular dependency)
+    // Initialize with raw config if available to avoid empty config during loading
+    const [pluginConfig, setPluginConfig] = useState(() => {
+        if (rawPluginConfig) {
+            return {
+                storeId: rawPluginConfig.storeId,
+                accountId: rawPluginConfig.accountId,
+                basePath: rawPluginConfig.basePath ?? '/',
+                config: rawPluginConfig.config ?? {},
+            };
+        }
+        return { basePath: '/', config: {} };
+    });
+    const [configLoading, setConfigLoading] = useState(!rawPluginConfig);
+    // Load plugin config on mount with the specified variant
+    useEffect(() => {
+        const loadConfig = async () => {
+            try {
+                // Use the v2 core loadPluginConfig function
+                const config = await loadPluginConfig(configVariant, rawPluginConfig);
+                // Ensure we have required store ID before proceeding
+                if (!config.storeId) {
+                    console.warn('⚠️ No store ID found in plugin config. This may cause hooks to fail.');
+                }
+                setPluginConfig(config);
+                console.log('✅ Phase 1 & 2 Complete - Plugin config loaded:', {
+                    storeId: config.storeId,
+                    accountId: config.accountId,
+                    basePath: config.basePath,
+                    hasConfig: !!config.config,
+                    source: rawPluginConfig ? 'raw' : 'file',
+                });
+                if (blockUntilSessionReady) {
+                    console.log('⏳ Blocking mode: Children will render after Phase 3 (session init) completes');
+                }
+                else {
+                    console.log('🚀 Non-blocking mode: Children can now render - Phase 3 (session init) will continue in background');
+                }
+            }
+            catch (error) {
+                console.error('❌ Failed to load plugin config in TagadaProvider:', error);
+                setPluginConfig({ basePath: '/', config: {} });
+            }
+            finally {
+                setConfigLoading(false);
+            }
+        };
+        void loadConfig();
+    }, [configVariant, rawPluginConfig]);
+    // Extract store/account IDs from plugin config (only source now)
+    const storeId = pluginConfig.storeId;
+    const _accountId = pluginConfig.accountId;
+    const [isLoading, setIsLoading] = useState(true);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const [token, setToken] = useState(null);
+    const [hasAttemptedAnonymousToken, setHasAttemptedAnonymousToken] = useState(false);
+    const [isDebugDrawerOpen, setIsDebugDrawerOpen] = useState(false);
+    const isInitializing = useRef(false);
+    // Initialize environment configuration
+    const [environmentConfig, _setEnvironmentConfig] = useState(() => {
+        const detectedEnv = environment || detectEnvironment();
+        const config = getEnvironmentConfig(detectedEnv);
+        // Log environment detection for debugging
+        if (environment) {
+            console.log(`[TagadaSDK] Using explicit environment: ${environment}`);
+        }
+        else {
+            console.log(`[TagadaSDK] Auto-detected environment: ${detectedEnv} (${typeof window !== 'undefined' ? window.location.hostname : 'SSR'})`);
+        }
+        // Apply custom API config if provided
+        if (customApiConfig) {
+            return {
+                ...config,
+                ...customApiConfig,
+                apiConfig: {
+                    ...config.apiConfig,
+                    ...customApiConfig.apiConfig,
+                },
+            };
+        }
+        return config;
+    });
+    // Auto-set debugMode based on environment (unless explicitly provided)
+    const finalDebugMode = debugMode ?? environmentConfig.environment !== 'production';
+    // Initialize API service
+    const [apiService] = useState(() => {
+        const service = new ApiService({
+            environmentConfig,
+            token,
+            onTokenUpdate: (newToken) => {
+                setToken(newToken);
+                setClientToken(newToken);
+            },
+            onTokenClear: () => {
+                setToken(null);
+                clearClientToken();
+            },
+        });
+        // Store ID is managed by plugin configuration system
+        if (storeId) {
+            console.log(`[SDK] Using store ID from config: ${storeId}`);
+        }
+        return service;
+    });
+    // Initialize TanStack Query API client (global setup only)
+    useEffect(() => {
+        const client = new ApiClient({
+            baseURL: environmentConfig.apiConfig.baseUrl,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        // Set the global client for TanStack Query hooks
+        setGlobalApiClient(client);
+        console.log('[SDK] ApiClient initialized with baseURL:', environmentConfig.apiConfig.baseUrl);
+    }, [environmentConfig]);
+    // Sync token updates between ApiService and ApiClient
+    useEffect(() => {
+        const client = getGlobalApiClientOrNull();
+        if (client) {
+            // Always use the token from ApiService as the source of truth
+            const currentToken = apiService.getCurrentToken();
+            if (currentToken && typeof currentToken === 'string') {
+                client.updateToken(currentToken);
+                console.log('[SDK] Token synced to ApiClient:', currentToken.substring(0, 8) + '...');
+            }
+            else {
+                client.updateToken(null);
+                console.log('[SDK] Token cleared from ApiClient');
+            }
+        }
+    }, [token, apiService]);
+    // Update API service when config or token changes
+    useEffect(() => {
+        apiService.updateConfig(environmentConfig);
+        apiService.updateToken(token);
+    }, [apiService, environmentConfig, token]);
+    // Initialize state
+    const [customer, setCustomer] = useState(null);
+    const [session, setSession] = useState(null);
+    const [store, setStore] = useState(null);
+    const [isSessionInitialized, setIsSessionInitialized] = useState(false);
+    // Initialize locale and currency with defaults
+    const [locale, setLocale] = useState({
+        locale: 'en-US',
+        language: 'en',
+        region: 'US',
+        messages: {},
+    });
+    const [currency, setCurrency] = useState({
+        code: 'USD',
+        symbol: '$',
+        name: 'US Dollar',
+    });
+    // Initialize debug checkout state
+    const [debugCheckout, setDebugCheckout] = useState({
+        isActive: false,
+        data: null,
+        error: null,
+        isLoading: false,
+        lastUpdated: null,
+    });
+    // Initialize auth state
+    const [auth, setAuth] = useState({
+        isAuthenticated: false,
+        isLoading: false,
+        customer: null,
+        session: null,
+    });
+    // Initialize session
+    const initializeSession = useCallback(async (sessionData) => {
+        if (!sessionData.storeId || !sessionData.accountId) {
+            console.error('[SDK] Missing required session data');
+            return;
+        }
+        if (finalDebugMode) {
+            console.debug('[SDK][DEBUG] Initializing session with store config...', sessionData);
+        }
+        setIsLoading(true);
+        try {
+            const deviceInfo = collectDeviceInfo();
+            const urlParams = getUrlParams();
+            const browserLocale = getBrowserLocale();
+            const sessionInitData = {
+                storeId: sessionData.storeId,
+                accountId: sessionData.accountId,
+                customerId: sessionData.customerId,
+                role: sessionData.role,
+                browserLocale,
+                queryLocale: urlParams.locale,
+                queryCurrency: urlParams.currency,
+                utmSource: urlParams.utmSource,
+                utmMedium: urlParams.utmMedium,
+                utmCampaign: urlParams.utmCampaign,
+                browser: deviceInfo.userAgent.browser.name,
+                browserVersion: deviceInfo.userAgent.browser.version,
+                os: deviceInfo.userAgent.os.name,
+                osVersion: deviceInfo.userAgent.os.version,
+                deviceType: deviceInfo.userAgent.device?.type,
+                deviceModel: deviceInfo.userAgent.device?.model,
+                screenWidth: deviceInfo.screenResolution.width,
+                screenHeight: deviceInfo.screenResolution.height,
+                timeZone: deviceInfo.timeZone,
+            };
+            if (finalDebugMode) {
+                console.debug('[SDK][DEBUG] Session init data:', sessionInitData);
+            }
+            const response = await apiService.initializeSession(sessionInitData);
+            if (finalDebugMode) {
+                console.debug('[SDK][DEBUG] Session init response:', response);
+            }
+            // Update store data
+            if (response.store) {
+                const storeData = response.store;
+                const storeConfig = {
+                    ...response.store,
+                    presentmentCurrencies: storeData.presentmentCurrencies || [response.store.currency || 'USD'],
+                    chargeCurrencies: storeData.chargeCurrencies || [response.store.currency || 'USD'],
+                };
+                setStore(storeConfig);
+                if (finalDebugMode) {
+                    console.debug('[SDK][DEBUG] Store config loaded:', storeConfig);
+                }
+            }
+            // Update locale
+            const localeConfig = {
+                locale: response.locale,
+                language: response.locale.split('-')[0],
+                region: response.locale.split('-')[1] ?? 'US',
+                messages: response.messages ?? {},
+            };
+            setLocale(localeConfig);
+            if (finalDebugMode) {
+                console.debug('[SDK][DEBUG] Locale config:', localeConfig);
+            }
+            // Update currency based on store
+            if (response.store) {
+                const currencyConfig = {
+                    code: response.store.currency,
+                    symbol: getCurrencySymbol(response.store.currency),
+                    name: getCurrencyName(response.store.currency),
+                };
+                setCurrency(currencyConfig);
+                if (finalDebugMode) {
+                    console.debug('[SDK][DEBUG] Currency config:', currencyConfig);
+                }
+            }
+            // Update customer data if available
+            if (response.customer) {
+                setCustomer(response.customer);
+                if (finalDebugMode) {
+                    console.debug('[SDK][DEBUG] Customer data:', response.customer);
+                }
+            }
+            // Update auth state
+            const authState = {
+                isAuthenticated: response.customer?.isAuthenticated ?? false,
+                isLoading: false,
+                customer: response.customer ?? null,
+                session: sessionData,
+            };
+            setAuth(authState);
+            if (finalDebugMode) {
+                console.debug('[SDK][DEBUG] Auth state:', authState);
+            }
+            console.debug('[SDK] Session initialized successfully');
+            // Update token to ApiClient immediately
+            const client = getGlobalApiClientOrNull();
+            if (client && token) {
+                client.updateToken(token);
+                console.log('[SDK] Token updated to ApiClient:', token.substring(0, 8) + '...');
+            }
+            setIsInitialized(true);
+            setIsSessionInitialized(true); // Mark CMS session as ready
+            setIsLoading(false);
+        }
+        catch (error) {
+            console.error('[SDK] Error initializing session:', error);
+            if (finalDebugMode) {
+                console.debug('[SDK][DEBUG] Full error details:', error);
+            }
+            setIsInitialized(true);
+            setIsLoading(false);
+        }
+    }, [apiService, finalDebugMode]);
+    // Create anonymous token if needed
+    const createAnonymousToken = useCallback(async (targetStoreId) => {
+        if (hasAttemptedAnonymousToken || !targetStoreId) {
+            return;
+        }
+        console.log('[SDK] 🚀 Starting Phase 3 - Session initialization...');
+        if (finalDebugMode) {
+            console.debug('[SDK][DEBUG] Creating anonymous token for store:', targetStoreId);
+        }
+        setHasAttemptedAnonymousToken(true);
+        try {
+            const response = await apiService.createAnonymousToken(targetStoreId);
+            if (finalDebugMode) {
+                console.debug('[SDK][DEBUG] Anonymous token response:', response);
+            }
+            // Set the token in state and storage
+            setToken(response.token);
+            setClientToken(response.token);
+            // Update the API service with the new token
+            apiService.updateToken(response.token);
+            // Decode the token to get session data
+            const decodedSession = decodeJWTClient(response.token);
+            if (decodedSession) {
+                if (finalDebugMode) {
+                    console.debug('[SDK][DEBUG] Decoded session from token:', decodedSession);
+                }
+                setSession(decodedSession);
+                // Initialize session with API call
+                await initializeSession(decodedSession);
+            }
+            else {
+                console.error('[SDK] Failed to decode anonymous token');
+                setIsInitialized(true);
+                setIsLoading(false);
+            }
+            console.log('[SDK] ✅ Phase 3 Complete - Session initialization completed successfully');
+            // Update token to ApiClient immediately
+            const client = getGlobalApiClientOrNull();
+            if (client && token) {
+                client.updateToken(token);
+                console.log('[SDK] Token updated to ApiClient:', token.substring(0, 8) + '...');
+            }
+            setIsSessionInitialized(true); // Mark CMS session as ready
+        }
+        catch (error) {
+            console.error('[SDK] ❌ Initialization failed:', error);
+            if (finalDebugMode) {
+                console.debug('[SDK][DEBUG] Anonymous token creation failed:', error);
+            }
+            setIsInitialized(true);
+            setIsLoading(false);
+        }
+    }, [apiService, hasAttemptedAnonymousToken, initializeSession, finalDebugMode]);
+    // Initialize token from storage or create anonymous token
+    // This runs in the background after phases 1 & 2 complete, but doesn't block rendering
+    useEffect(() => {
+        if (isInitializing.current) {
+            return;
+        }
+        // Wait for plugin config to load AND ensure we have a store ID before initializing
+        if (configLoading || !storeId) {
+            return;
+        }
+        isInitializing.current = true;
+        const initializeToken = async () => {
+            try {
+                console.debug('[SDK] Initializing token...');
+                setIsLoading(true);
+                // Check for existing token
+                const existingToken = getClientToken();
+                let tokenToUse = null;
+                // Check URL params for token
+                const urlParams = new URLSearchParams(window.location.search);
+                const queryToken = urlParams.get('token');
+                if (queryToken) {
+                    console.debug('[SDK] Found token in URL params');
+                    tokenToUse = queryToken;
+                    setClientToken(queryToken);
+                }
+                else if (existingToken && !isTokenExpired(existingToken)) {
+                    console.debug('[SDK] Using existing token from storage');
+                    tokenToUse = existingToken;
+                }
+                else {
+                    console.debug('[SDK] No valid token found');
+                    // Determine storeId for anonymous token
+                    const targetStoreId = storeId || 'default-store';
+                    await createAnonymousToken(targetStoreId);
+                    return;
+                }
+                if (tokenToUse) {
+                    setToken(tokenToUse);
+                    // Update the API service with the token
+                    apiService.updateToken(tokenToUse);
+                    // Decode token to get session data
+                    const decodedSession = decodeJWTClient(tokenToUse);
+                    if (decodedSession) {
+                        setSession(decodedSession);
+                        // Initialize session with API call
+                        await initializeSession(decodedSession);
+                    }
+                    else {
+                        console.error('[SDK] Failed to decode token');
+                        setIsInitialized(true);
+                        setIsSessionInitialized(false); // Session failed to initialize
+                        setIsLoading(false);
+                    }
+                }
+            }
+            catch (error) {
+                console.error('[SDK] Error initializing token:', error);
+                setIsInitialized(true);
+                setIsLoading(false);
+            }
+        };
+        void initializeToken();
+    }, [storeId, createAnonymousToken, initializeSession, configLoading]);
+    // Update auth state when customer/session changes
+    useEffect(() => {
+        setAuth({
+            isAuthenticated: customer?.isAuthenticated ?? false,
+            isLoading: false,
+            customer,
+            session,
+        });
+    }, [customer, session]);
+    // Refresh coordinator for bidirectional hook communication
+    const checkoutRefreshRefs = useRef(new Set());
+    const orderBumpRefreshRefs = useRef(new Set());
+    const refreshCoordinator = useMemo(() => ({
+        registerCheckoutRefresh: (refreshFn, name) => {
+            const hookName = name || 'unknown';
+            console.log(`🔄 [RefreshCoordinator] Registering checkout refresh function from ${hookName}:`, refreshFn.toString().substring(0, 100) + '...');
+            checkoutRefreshRefs.current.add(refreshFn);
+            console.log(`✅ [RefreshCoordinator] Checkout refresh function registered from ${hookName} (total: ${checkoutRefreshRefs.current.size})`);
+        },
+        registerOrderBumpRefresh: (refreshFn) => {
+            orderBumpRefreshRefs.current.add(refreshFn);
+            console.log('🔄 [RefreshCoordinator] Order bump refresh function registered');
+        },
+        notifyCheckoutChanged: async () => {
+            if (orderBumpRefreshRefs.current.size > 0) {
+                console.log('🔄 [RefreshCoordinator] Checkout changed, refreshing order bump data...');
+                const refreshPromises = Array.from(orderBumpRefreshRefs.current).map(async (refreshFn) => {
+                    try {
+                        await refreshFn();
+                    }
+                    catch (error) {
+                        console.warn('⚠️ [RefreshCoordinator] Order bump refresh failed:', error);
+                    }
+                });
+                await Promise.all(refreshPromises);
+                console.log('✅ [RefreshCoordinator] Order bump refresh completed');
+            }
+        },
+        notifyOrderBumpChanged: async () => {
+            console.log(`🔄 [RefreshCoordinator] Order bump changed, refreshing checkout data... (${checkoutRefreshRefs.current.size} functions registered)`);
+            if (checkoutRefreshRefs.current.size > 0) {
+                const refreshPromises = Array.from(checkoutRefreshRefs.current).map(async (refreshFn, index) => {
+                    try {
+                        console.log(`🔄 [RefreshCoordinator] Calling checkout refresh function ${index + 1}/${checkoutRefreshRefs.current.size}`);
+                        await refreshFn();
+                        console.log(`✅ [RefreshCoordinator] Checkout refresh function ${index + 1} completed`);
+                    }
+                    catch (error) {
+                        console.warn(`⚠️ [RefreshCoordinator] Checkout refresh function ${index + 1} failed:`, error);
+                    }
+                });
+                await Promise.all(refreshPromises);
+                console.log('✅ [RefreshCoordinator] All checkout refreshes completed');
+            }
+            else {
+                console.warn('⚠️ [RefreshCoordinator] No checkout refresh functions registered!');
+            }
+        },
+        unregisterCheckoutRefresh: (refreshFn) => {
+            if (refreshFn) {
+                checkoutRefreshRefs.current.delete(refreshFn);
+                console.log(`🧹 [RefreshCoordinator] Checkout refresh function unregistered (remaining: ${checkoutRefreshRefs.current.size})`);
+            }
+            else {
+                checkoutRefreshRefs.current.clear();
+                console.log('🧹 [RefreshCoordinator] All checkout refresh functions unregistered');
+            }
+        },
+        unregisterOrderBumpRefresh: (refreshFn) => {
+            if (refreshFn) {
+                orderBumpRefreshRefs.current.delete(refreshFn);
+            }
+            else {
+                orderBumpRefreshRefs.current.clear();
+            }
+            console.log('🧹 [RefreshCoordinator] Order bump refresh function unregistered');
+        },
+    }), []);
+    // Memoize stable values that don't change frequently
+    const memoizedMoneyUtils = useMemo(() => ({
+        formatMoney,
+        getCurrencyInfo,
+        moneyStringOrNumberToMinorUnits,
+        minorUnitsToMajorUnits,
+        formatMoneyWithoutSymbol,
+        convertCurrency,
+        formatSimpleMoney,
+    }), []);
+    const memoizedUpdateDebugData = useCallback((data, error, isLoading) => {
+        setDebugCheckout({
+            isActive: true,
+            data,
+            error: error ?? null,
+            isLoading: isLoading ?? false,
+            lastUpdated: new Date(),
+        });
+    }, []);
+    // Memoize the context value to prevent unnecessary re-renders
+    const contextValue = useMemo(() => ({
+        auth,
+        session,
+        customer,
+        locale,
+        currency,
+        store,
+        environment: environmentConfig,
+        apiService,
+        isLoading,
+        isInitialized,
+        isSessionInitialized,
+        debugMode: finalDebugMode,
+        pluginConfig,
+        pluginConfigLoading: configLoading,
+        debugCheckout,
+        updateCheckoutDebugData: memoizedUpdateDebugData,
+        refreshCoordinator,
+        money: memoizedMoneyUtils,
+    }), [
+        auth,
+        session,
+        customer,
+        locale,
+        currency,
+        store,
+        environmentConfig,
+        apiService,
+        isLoading,
+        isInitialized,
+        isSessionInitialized,
+        finalDebugMode,
+        pluginConfig,
+        configLoading,
+        refreshCoordinator,
+        memoizedUpdateDebugData,
+        memoizedMoneyUtils,
+        // debugCheckout removed from deps to prevent unnecessary re-renders
+    ]);
+    // Determine if we should show loading
+    // Always block until config is loaded (even if empty)
+    const shouldShowLoading = configLoading;
+    const canRenderChildren = !configLoading;
+    // Initialize TanStack Query client
+    const [queryClient] = useState(() => new QueryClient({
+        defaultOptions: {
+            queries: {
+                staleTime: 30000, // 30 seconds
+                gcTime: 5 * 60 * 1000, // 5 minutes
+                refetchOnWindowFocus: false,
+                retry: 1,
+            },
+            mutations: {
+                retry: 1,
+            },
+        },
+    }));
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(TagadaContext.Provider, { value: contextValue, children: [shouldShowLoading && _jsx(InitializationLoader, {}), finalDebugMode && canRenderChildren && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setIsDebugDrawerOpen(true), style: {
+                                position: 'fixed',
+                                bottom: '16px',
+                                right: '16px',
+                                backgroundColor: '#f97316',
+                                color: 'white',
+                                border: 'none',
+                                borderRadius: '50%',
+                                width: '56px',
+                                height: '56px',
+                                fontSize: '20px',
+                                cursor: 'pointer',
+                                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+                                zIndex: 999997,
+                                transition: 'all 0.2s ease',
+                            }, onMouseEnter: (e) => {
+                                e.currentTarget.style.backgroundColor = '#ea580c';
+                                e.currentTarget.style.transform = 'scale(1.1)';
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.backgroundColor = '#f97316';
+                                e.currentTarget.style.transform = 'scale(1)';
+                            }, title: "Open TagadaPay SDK Debug Panel", children: "\uD83D\uDC1B" }), _jsx(DebugDrawer, { isOpen: isDebugDrawerOpen, onClose: () => setIsDebugDrawerOpen(false) })] })), canRenderChildren && children] }) }));
+}
+export function useTagadaContext() {
+    const context = useContext(TagadaContext);
+    if (!context) {
+        throw new Error('useTagadaContext must be used within a TagadaProvider');
+    }
+    return context;
+}
+// Helper functions
+function getCurrencySymbol(code) {
+    const symbols = {
+        USD: '$',
+        EUR: '€',
+        GBP: '£',
+        JPY: '¥',
+        CAD: 'C$',
+        AUD: 'A$',
+    };
+    return symbols[code] || code;
+}
+function getCurrencyName(code) {
+    const names = {
+        USD: 'US Dollar',
+        EUR: 'Euro',
+        GBP: 'British Pound',
+        JPY: 'Japanese Yen',
+        CAD: 'Canadian Dollar',
+        AUD: 'Australian Dollar',
+    };
+    return names[code] || code;
+}