@tagadapay/plugin-sdk 2.1.2 → 2.2.0

package/dist/react/providers/TagadaProvider.js

@@ -1,9 +1,9 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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, useContext, useState, useEffect, useRef, useCallback } from 'react';
+import { createContext, useContext, useState, useEffect, useRef, useCallback, useMemo, } from 'react';
 import { getEnvironmentConfig, detectEnvironment } from '../config/environment';
 import { ApiService } from '../services/apiService';
 import { setClientToken, getClientToken, clearClientToken } from '../utils/tokenStorage';
@@ -12,39 +12,58 @@ import { collectDeviceInfo, getBrowserLocale, getUrlParams } from '../utils/devi
 import DebugDrawer from '../components/DebugDrawer';
 import { loadPluginConfig } from '../hooks/usePluginConfig';
 import { formatMoney, getCurrencyInfo, moneyStringOrNumberToMinorUnits, minorUnitsToMajorUnits, formatMoneyWithoutSymbol, convertCurrency, formatSimpleMoney, } from '../utils/money';
-// Subtle loading component for initialization
-const InitializationLoader = () => (_jsx("div", { style: {
+// Professional, subtle loading component for initialization
+const InitializationLoader = () => (_jsxs("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; }
+        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
-storeId: propStoreId, accountId: propAccountId, localConfig, }) {
+localConfig, }) {
     // 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
-    console.log('🔍 TagadaProvider Config Debug:', {
-        hostname: typeof window !== 'undefined' ? window.location.hostname : 'SSR',
-        isLocalDev,
-        localConfig,
-        configVariant,
-    });
+    // 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)
     const [pluginConfig, setPluginConfig] = useState({ basePath: '/', config: {} });
     const [configLoading, setConfigLoading] = useState(true);
@@ -53,10 +72,20 @@ storeId: propStoreId, accountId: propAccountId, localConfig, }) {
         const loadConfig = async () => {
             try {
                 const config = await loadPluginConfig(configVariant);
+                // 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('✅ Plugin config loaded:', {
+                    storeId: config.storeId,
+                    accountId: config.accountId,
+                    basePath: config.basePath,
+                    hasConfig: !!config.config,
+                });
             }
             catch (error) {
-                console.warn('Failed to load plugin config in TagadaProvider:', error);
+                console.error('❌ Failed to load plugin config in TagadaProvider:', error);
                 setPluginConfig({ basePath: '/', config: {} });
             }
             finally {
@@ -65,12 +94,9 @@ storeId: propStoreId, accountId: propAccountId, localConfig, }) {
         };
         void loadConfig();
     }, [configVariant]);
-    // Extract store/account IDs from plugin config
-    const configStoreId = pluginConfig.storeId;
-    const configAccountId = pluginConfig.accountId;
-    // Use props if provided, otherwise use config from hook
-    const storeId = propStoreId || configStoreId;
-    const accountId = propAccountId || configAccountId;
+    // 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);
@@ -117,10 +143,9 @@ storeId: propStoreId, accountId: propAccountId, localConfig, }) {
                 clearClientToken();
             },
         });
-        // Store the provided store ID immediately if available
+        // Store ID is managed by plugin configuration system
         if (storeId) {
-            console.log(`[SDK] Using provided store ID: ${storeId}`);
-            service.storeStoreId(storeId);
+            console.log(`[SDK] Using store ID from config: ${storeId}`);
         }
         return service;
     });
@@ -319,8 +344,8 @@ storeId: propStoreId, accountId: propAccountId, localConfig, }) {
         if (isInitializing.current) {
             return;
         }
-        // Wait for plugin config to load before initializing
-        if (configLoading) {
+        // Wait for plugin config to load AND ensure we have a store ID before initializing
+        if (configLoading || !storeId) {
             return;
         }
         isInitializing.current = true;
@@ -388,7 +413,7 @@ storeId: propStoreId, accountId: propAccountId, localConfig, }) {
     // Refresh coordinator for bidirectional hook communication
     const checkoutRefreshRef = useRef(null);
     const orderBumpRefreshRef = useRef(null);
-    const refreshCoordinator = {
+    const refreshCoordinator = useMemo(() => ({
         registerCheckoutRefresh: (refreshFn) => {
             checkoutRefreshRef.current = refreshFn;
             console.log('🔄 [RefreshCoordinator] Checkout refresh function registered');
@@ -429,8 +454,9 @@ storeId: propStoreId, accountId: propAccountId, localConfig, }) {
             orderBumpRefreshRef.current = null;
             console.log('🧹 [RefreshCoordinator] Order bump refresh function unregistered');
         },
-    };
-    const contextValue = {
+    }), []);
+    // Memoize the context value to prevent unnecessary re-renders
+    const contextValue = useMemo(() => ({
         auth,
         session,
         customer,
@@ -464,8 +490,28 @@ storeId: propStoreId, accountId: propAccountId, localConfig, }) {
             convertCurrency,
             formatSimpleMoney,
         },
-    };
-    return (_jsxs(TagadaContext.Provider, { value: contextValue, children: [isLoading && !isInitialized && _jsx(InitializationLoader, {}), finalDebugMode && isInitialized && (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => setIsDebugDrawerOpen(true), style: {
+    }), [
+        auth,
+        session,
+        customer,
+        locale,
+        currency,
+        store,
+        environmentConfig,
+        apiService,
+        isLoading,
+        isInitialized,
+        finalDebugMode,
+        pluginConfig,
+        configLoading,
+        debugCheckout,
+        refreshCoordinator,
+    ]);
+    // Determine if we should show loading
+    // Show loading if: config is loading OR (config loaded but no store ID and session not initialized)
+    const shouldShowLoading = configLoading || (!storeId && !isInitialized);
+    const canRenderChildren = !configLoading && storeId && isInitialized;
+    return (_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',
@@ -486,7 +532,7 @@ storeId: propStoreId, accountId: propAccountId, localConfig, }) {
                         }, 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] }));
+                        }, 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);

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

@@ -51,11 +51,13 @@ export declare class ApiService {
     updateToken(token: string | null): void;
     updateConfig(config: EnvironmentConfig): void;
     /**
-     * Store the store ID in localStorage
+     * Store the store ID in localStorage (deprecated - use usePluginConfig instead)
+     * @deprecated Use usePluginConfig hook to get storeId
      */
     storeStoreId(storeId: string): void;
     /**
-     * Get the store ID from localStorage
+     * Get the store ID from localStorage (deprecated - use usePluginConfig instead)
+     * @deprecated Use usePluginConfig hook to get storeId
      */
     getStoredStoreId(): string | null;
     /**

package/dist/react/services/apiService.js

@@ -14,9 +14,11 @@ export class ApiService {
         this.config = config;
     }
     /**
-     * Store the store ID in localStorage
+     * Store the store ID in localStorage (deprecated - use usePluginConfig instead)
+     * @deprecated Use usePluginConfig hook to get storeId
      */
     storeStoreId(storeId) {
+        console.warn('[SDK] storeStoreId is deprecated. Use usePluginConfig hook to get storeId.');
         try {
             if (typeof window !== 'undefined' && window.localStorage) {
                 window.localStorage.setItem('tagada_store_id', storeId);
@@ -27,9 +29,11 @@ export class ApiService {
         }
     }
     /**
-     * Get the store ID from localStorage
+     * Get the store ID from localStorage (deprecated - use usePluginConfig instead)
+     * @deprecated Use usePluginConfig hook to get storeId
      */
     getStoredStoreId() {
+        console.warn('[SDK] getStoredStoreId is deprecated. Use usePluginConfig hook to get storeId.');
         try {
             if (typeof window !== 'undefined' && window.localStorage) {
                 return window.localStorage.getItem('tagada_store_id');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tagadapay/plugin-sdk",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "Modern React SDK for building Tagada Pay plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -51,7 +51,6 @@
     "@basis-theory/web-threeds": "^1.0.1",
     "axios": "^1.6.0",
     "iso3166-2-db": "^2.3.11",
-    "react-google-autocomplete": "^2.7.3",
     "react-intl": "^7.1.11"
   },
   "devDependencies": {

package/dist/react/components/AddressForm.example.d.ts

@@ -1 +0,0 @@
-export declare const AddressFormExample: () => import("react/jsx-runtime").JSX.Element;

package/dist/react/components/AddressForm.example.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useAddress } from '../hooks/useAddress';
-// Basic Address Form Example
-export const AddressFormExample = () => {
-    const { fields, countries, states, setValue, validateAll, getAddressObject, getFormattedAddress } = useAddress({
-        autoValidate: true,
-        initialValues: {
-            firstName: 'John',
-            lastName: 'Doe',
-            country: 'US',
-        },
-    });
-    const handleSubmit = (e) => {
-        e.preventDefault();
-        if (validateAll()) {
-            const addressData = getAddressObject();
-            console.log('Address submitted:', addressData);
-            console.log('Formatted address:', getFormattedAddress());
-        }
-        else {
-            console.log('Form has validation errors');
-        }
-    };
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "mx-auto max-w-md space-y-4 p-6", children: [_jsx("h2", { className: "mb-4 text-xl font-bold", children: "Address Form" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "First Name" }), _jsx("input", { type: "text", value: fields.firstName.value, onChange: (e) => setValue('firstName', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.firstName.error ? 'border-red-500' : 'border-gray-300'}` }), fields.firstName.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.firstName.error })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Last Name" }), _jsx("input", { type: "text", value: fields.lastName.value, onChange: (e) => setValue('lastName', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.lastName.error ? 'border-red-500' : 'border-gray-300'}` }), fields.lastName.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.lastName.error })] })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Email" }), _jsx("input", { type: "email", value: fields.email.value, onChange: (e) => setValue('email', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.email.error ? 'border-red-500' : 'border-gray-300'}` }), fields.email.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.email.error })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Phone" }), _jsx("input", { type: "tel", value: fields.phone.value, onChange: (e) => setValue('phone', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.phone.error ? 'border-red-500' : 'border-gray-300'}` }), fields.phone.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.phone.error })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Address Line 1" }), _jsx("input", { type: "text", value: fields.address1.value, onChange: (e) => setValue('address1', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.address1.error ? 'border-red-500' : 'border-gray-300'}` }), fields.address1.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.address1.error })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Address Line 2 (Optional)" }), _jsx("input", { type: "text", value: fields.address2.value, onChange: (e) => setValue('address2', e.target.value), className: "w-full rounded-md border border-gray-300 px-3 py-2" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "City" }), _jsx("input", { type: "text", value: fields.city.value, onChange: (e) => setValue('city', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.city.error ? 'border-red-500' : 'border-gray-300'}` }), fields.city.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.city.error })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Postal Code" }), _jsx("input", { type: "text", value: fields.postal.value, onChange: (e) => setValue('postal', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.postal.error ? 'border-red-500' : 'border-gray-300'}` }), fields.postal.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.postal.error })] })] }), _jsxs("div", { className: "rounded-md bg-gray-100 p-4", children: [_jsx("h3", { className: "mb-2 text-sm font-semibold", children: "Form Data:" }), _jsx("pre", { className: "text-xs", children: JSON.stringify(getAddressObject(), null, 2) })] }), _jsxs("div", { className: "text-xs text-gray-500", children: [_jsxs("p", { children: ["Available Countries: ", countries.length] }), _jsxs("p", { children: ["Available States for ", fields.country.value, ": ", states.length] }), _jsxs("p", { children: ["Form Valid: ", validateAll() ? 'Yes' : 'No'] })] }), _jsx("button", { type: "button", onClick: () => {
-                    if (validateAll()) {
-                        alert('Form is valid! Data: ' + JSON.stringify(getAddressObject()));
-                    }
-                    else {
-                        alert('Please fix the errors in the form');
-                    }
-                }, className: "w-full rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 disabled:opacity-50", children: "Submit" })] }));
-};

package/dist/react/hooks/useAddress.d.ts

@@ -1,59 +0,0 @@
-export interface Country {
-    code: string;
-    name: string;
-}
-export interface State {
-    code: string;
-    name: string;
-    countryCode: string;
-}
-export interface AddressField {
-    value: string;
-    isValid: boolean;
-    error?: string;
-    touched?: boolean;
-}
-export interface AddressData {
-    firstName: string;
-    lastName: string;
-    email: string;
-    phone: string;
-    country: string;
-    address1: string;
-    address2: string;
-    city: string;
-    state: string;
-    postal: string;
-}
-export interface UseAddressOptions {
-    autoValidate?: boolean;
-    enableGooglePlaces?: boolean;
-    googlePlacesApiKey?: string;
-    initialValues?: Partial<AddressData>;
-    validation?: Partial<Record<keyof AddressData, (value: string) => string | undefined>>;
-    countryRestrictions?: string[];
-    onFieldsChange?: (addressData: AddressData) => void;
-    debounceConfig?: {
-        manualInputDelay?: number;
-        googlePlacesDelay?: number;
-        enabled?: boolean;
-    };
-}
-export interface UseAddressResult {
-    fields: Record<keyof AddressData, AddressField>;
-    countries: Country[];
-    states: State[];
-    setValue: (field: keyof AddressData, value: string) => void;
-    setValues: (values: Partial<AddressData>) => void;
-    resetField: (field: keyof AddressData) => void;
-    resetForm: () => void;
-    validate: (field: keyof AddressData) => boolean;
-    validateAll: () => boolean;
-    getFormattedAddress: () => string;
-    getAddressObject: () => AddressData;
-    addressRef?: React.MutableRefObject<HTMLInputElement | null>;
-    addressInputValue?: string;
-    handleAddressChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    isAddressSelected?: boolean;
-}
-export declare function useAddress(options?: UseAddressOptions): UseAddressResult;