@tagadapay/plugin-sdk 1.0.2

package/dist/react/providers/TagadaProvider.js

@@ -0,0 +1,471 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TagadaProvider - Main provider component for the Tagada Pay React SDK
+ */
+import { createContext, useContext, useState, useEffect, useRef, useCallback } from 'react';
+import { getEnvironmentConfig, detectEnvironment } from '../config/environment';
+import { ApiService } from '../services/apiService';
+import { setClientToken, getClientToken, clearClientToken } from '../utils/tokenStorage';
+import { decodeJWTClient, isTokenExpired } from '../utils/jwtDecoder';
+import { collectDeviceInfo, getBrowserLocale, getUrlParams } from '../utils/deviceInfo';
+import DebugDrawer from '../components/DebugDrawer';
+import { formatMoney, getCurrencyInfo, moneyStringOrNumberToMinorUnits, minorUnitsToMajorUnits, formatMoneyWithoutSymbol, convertCurrency, formatSimpleMoney, } from '../utils/money';
+// Subtle loading component for initialization
+const InitializationLoader = () => (_jsx("div", { style: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: '2px',
+        background: 'linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #3b82f6 100%)',
+        backgroundSize: '200% 100%',
+        animation: 'tagada-loading 1.5s ease-in-out infinite',
+        zIndex: 9999,
+    }, children: _jsx("style", { children: `
+        @keyframes tagada-loading {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
+        }
+      ` }) }));
+const TagadaContext = createContext(null);
+export function TagadaProvider({ children, environment, customApiConfig, developmentMode = false, debugMode, // Remove default, will be set based on environment
+storeId, accountId, mockData, }) {
+    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 the provided store ID immediately if available
+        if (storeId) {
+            console.log(`[SDK] Using provided store ID: ${storeId}`);
+            service.storeStoreId(storeId);
+        }
+        return service;
+    });
+    // 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);
+    // 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,
+                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');
+            setIsInitialized(true);
+            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 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] ✅ Initialization completed successfully');
+        }
+        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
+    useEffect(() => {
+        if (isInitializing.current) {
+            return;
+        }
+        isInitializing.current = true;
+        const initializeToken = async () => {
+            try {
+                console.debug('[SDK] Initializing token...');
+                setIsLoading(true);
+                if (developmentMode) {
+                    console.debug('[SDK] Development mode: Using mock data');
+                    // Use mock data in development mode
+                    if (mockData?.customer) {
+                        setCustomer({
+                            id: 'dev-customer-123',
+                            email: 'dev@example.com',
+                            firstName: 'John',
+                            lastName: 'Doe',
+                            phone: '+1234567890',
+                            isAuthenticated: true,
+                            role: 'authenticated',
+                            ...mockData.customer,
+                        });
+                    }
+                    if (mockData?.session) {
+                        setSession({
+                            sessionId: 'dev-session-123',
+                            storeId: 'dev-store-123',
+                            accountId: 'dev-account-123',
+                            customerId: 'dev-customer-123',
+                            role: 'authenticated',
+                            isValid: true,
+                            isLoading: false,
+                            ...mockData.session,
+                        });
+                    }
+                    if (mockData?.store) {
+                        setStore({
+                            id: 'dev-store-123',
+                            name: 'Development Store',
+                            domain: 'dev.localhost',
+                            currency: 'USD',
+                            locale: 'en-US',
+                            presentmentCurrencies: ['USD'],
+                            chargeCurrencies: ['USD'],
+                            ...mockData.store,
+                        });
+                    }
+                    setIsInitialized(true);
+                    setIsLoading(false);
+                    return;
+                }
+                // 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);
+                        setIsLoading(false);
+                    }
+                }
+            }
+            catch (error) {
+                console.error('[SDK] Error initializing token:', error);
+                setIsInitialized(true);
+                setIsLoading(false);
+            }
+        };
+        void initializeToken();
+    }, [developmentMode, mockData, storeId, createAnonymousToken, initializeSession]);
+    // Update auth state when customer/session changes
+    useEffect(() => {
+        setAuth({
+            isAuthenticated: customer?.isAuthenticated ?? false,
+            isLoading: false,
+            customer,
+            session,
+        });
+    }, [customer, session]);
+    const contextValue = {
+        auth,
+        session,
+        customer,
+        locale,
+        currency,
+        store,
+        environment: environmentConfig,
+        apiService,
+        isLoading,
+        isInitialized,
+        debugMode: finalDebugMode,
+        debugCheckout,
+        updateCheckoutDebugData: (data, error, isLoading) => {
+            setDebugCheckout({
+                isActive: true,
+                data,
+                error: error ?? null,
+                isLoading: isLoading ?? false,
+                lastUpdated: new Date(),
+            });
+        },
+        money: {
+            formatMoney,
+            getCurrencyInfo,
+            moneyStringOrNumberToMinorUnits,
+            minorUnitsToMajorUnits,
+            formatMoneyWithoutSymbol,
+            convertCurrency,
+            formatSimpleMoney,
+        },
+    };
+    return (_jsxs(TagadaContext.Provider, { value: contextValue, children: [isLoading && !isInitialized && _jsx(InitializationLoader, {}), finalDebugMode && isInitialized && (_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) })] })), isInitialized && 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;
+}

package/dist/react/services/apiService.d.ts

@@ -0,0 +1,149 @@
+import { EnvironmentConfig } from '../types';
+export interface ApiServiceOptions {
+    environmentConfig: EnvironmentConfig;
+    token?: string | null;
+    onTokenUpdate?: (token: string) => void;
+    onTokenClear?: () => void;
+}
+export interface FetchOptions {
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    body?: any;
+    headers?: Record<string, string>;
+    params?: Record<string, string>;
+    skipAuth?: boolean;
+    captureErrors?: boolean;
+}
+export interface AnonymousTokenResponse {
+    token: string;
+    sessionId: string;
+    storeId: string;
+    accountId: string;
+    customerId: string;
+    role: 'anonymous';
+}
+export interface SessionInitResponse {
+    locale: string;
+    messages: Record<string, string>;
+    store: {
+        id: string;
+        name: string;
+        domain: string;
+        currency: string;
+        locale: string;
+        integrations?: any[];
+    };
+    customer?: {
+        id: string;
+        email?: string;
+        firstName?: string;
+        lastName?: string;
+        phone?: string;
+        isAuthenticated: boolean;
+        role: 'authenticated' | 'anonymous';
+    };
+}
+export declare class ApiService {
+    private config;
+    private token;
+    private onTokenUpdate?;
+    private onTokenClear?;
+    constructor(options: ApiServiceOptions);
+    updateToken(token: string | null): void;
+    updateConfig(config: EnvironmentConfig): void;
+    /**
+     * Store the store ID in localStorage
+     */
+    storeStoreId(storeId: string): void;
+    /**
+     * Get the store ID from localStorage
+     */
+    getStoredStoreId(): string | null;
+    /**
+     * Make an authenticated request to the API
+     */
+    fetch<T = any>(endpoint: string, options?: FetchOptions): Promise<T>;
+    /**
+     * Create an anonymous token for the given store
+     */
+    createAnonymousToken(storeId: string): Promise<AnonymousTokenResponse>;
+    /**
+     * Initialize a CMS session with device info and user data
+     */
+    initializeSession(sessionData: {
+        storeId: string;
+        accountId: string;
+        customerId: string;
+        browserLocale?: string;
+        queryLocale?: string;
+        queryCurrency?: string;
+        utmSource?: string;
+        utmMedium?: string;
+        utmCampaign?: string;
+        browser?: string;
+        browserVersion?: string;
+        os?: string;
+        osVersion?: string;
+        deviceType?: string;
+        deviceModel?: string;
+        screenWidth?: number;
+        screenHeight?: number;
+        timeZone?: string;
+    }): Promise<SessionInitResponse>;
+    /**
+     * Get customer profile
+     */
+    getCustomerProfile(customerId: string): Promise<any>;
+    /**
+     * Get session status
+     */
+    getSessionStatus(sessionId: string): Promise<any>;
+    /**
+     * Update customer information (email, marketing preferences)
+     */
+    updateCustomer(customerId: string, data: {
+        email: string;
+        acceptsMarketing?: boolean;
+    }): Promise<any>;
+    /**
+     * Update customer and checkout session information in one request
+     */
+    updateCustomerAndSessionInfo(checkoutSessionId: string, data: {
+        customerData: {
+            email: string;
+            acceptsMarketing?: boolean;
+        };
+        shippingAddress: {
+            firstName: string;
+            lastName: string;
+            address1: string;
+            city: string;
+            country: string;
+            state: string;
+            postal: string;
+            phone: string;
+        };
+        billingAddress: {
+            firstName: string;
+            lastName: string;
+            address1: string;
+            city: string;
+            country: string;
+            state: string;
+            postal: string;
+            phone: string;
+        };
+        differentBillingAddress: boolean;
+    }): Promise<{
+        success: boolean;
+        errors?: Record<string, {
+            message: string;
+            type: string;
+        }>;
+        shippingCountryChanged: boolean;
+        billingCountryChanged: boolean;
+    }>;
+    /**
+     * Clear the authentication token
+     */
+    clearToken(): void;
+}