@tagadapay/plugin-sdk 2.1.0 → 2.1.3

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

@@ -228,12 +228,7 @@ export interface CheckoutData {
     availablePromotions: Promotion[];
 }
 export interface UseCheckoutOptions {
-    autoRefresh?: boolean;
-    refreshInterval?: number;
-    realTimeUpdates?: boolean;
-    autoInitFromUrl?: boolean;
     checkoutToken?: string;
-    fallbackToken?: string;
     autoLoadFromToken?: boolean;
 }
 export interface UseCheckoutResult {

package/dist/react/hooks/useCheckout.js

@@ -1,27 +1,19 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useCurrency } from '../hooks/useCurrency';
 import { useTagadaContext } from '../providers/TagadaProvider';
-import { getCheckoutToken } from '../utils/urlUtils';
 import { collectTrackingData } from '../utils/trackingUtils';
+import { usePluginConfig } from './usePluginConfig';
 export function useCheckout(options = {}) {
-    const { apiService, updateCheckoutDebugData, refreshCoordinator, store, currency } = useTagadaContext();
+    const { apiService, updateCheckoutDebugData, refreshCoordinator, currency } = useTagadaContext();
+    const { storeId } = usePluginConfig();
     const { code: currentCurrency } = useCurrency();
     const [checkout, setCheckout] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [isInitialized, setIsInitialized] = useState(false);
-    const { autoRefresh = false, refreshInterval = 30000, autoInitFromUrl = false, checkoutToken: providedToken, fallbackToken, autoLoadFromToken = true, } = options;
-    const refreshTimeoutRef = useRef(null);
+    const { checkoutToken: providedToken, autoLoadFromToken = true, } = options;
     const currentCheckoutTokenRef = useRef(null);
     const hasAutoLoadedRef = useRef(false);
-    // Clear refresh timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (refreshTimeoutRef.current) {
-                clearTimeout(refreshTimeoutRef.current);
-            }
-        };
-    }, []);
     // Update debug data whenever checkout state changes with comprehensive information
     useEffect(() => {
         const debugData = checkout
@@ -73,6 +65,7 @@ export function useCheckout(options = {}) {
             };
             const requestBody = {
                 ...params,
+                storeId: params.storeId || storeId, // Use storeId from params or from usePluginConfig
                 returnUrl: params.returnUrl || window.location.origin,
                 customer: {
                     ...params.customer,
@@ -111,7 +104,7 @@ export function useCheckout(options = {}) {
         finally {
             setIsLoading(false);
         }
-    }, [apiService, currentCurrency, providedToken]);
+    }, [apiService, currentCurrency, providedToken, storeId]);
     const getCheckout = useCallback(async (checkoutToken) => {
         setIsLoading(true);
         setError(null);
@@ -425,7 +418,7 @@ export function useCheckout(options = {}) {
                 method: 'POST',
                 body: {
                     lineItems,
-                    storeId: store?.id,
+                    storeId,
                     currency: currency.code,
                     promotionIds: promotionIds ?? [],
                 },
@@ -436,41 +429,31 @@ export function useCheckout(options = {}) {
             const error = err instanceof Error ? err : new Error('Failed to preview checkout session');
             throw error;
         }
-    }, [apiService, checkout?.checkoutSession.storeId, checkout?.summary?.currency]);
+    }, [apiService, storeId, currency.code]);
     const clear = useCallback(() => {
         setCheckout(null);
         setError(null);
         setIsInitialized(false);
         currentCheckoutTokenRef.current = null;
         hasAutoLoadedRef.current = false;
-        if (refreshTimeoutRef.current) {
-            clearTimeout(refreshTimeoutRef.current);
-        }
     }, []);
-    // Auto-load existing checkout session from provided token or URL token
+    // Auto-load existing checkout session from provided token
     useEffect(() => {
-        if (!autoLoadFromToken || hasAutoLoadedRef.current || isInitialized) {
+        if (!autoLoadFromToken || hasAutoLoadedRef.current || isInitialized || !providedToken) {
             return;
         }
-        // Prioritize provided checkoutToken, then URL token, then fallback
-        const token = providedToken ||
-            getCheckoutToken({
-                currentUrl: true,
-                fallbackToken,
-            });
-        if (token && !isLoading) {
-            console.debug('[Checkout] Auto-loading from token:', {
-                source: providedToken ? 'provided' : 'url/fallback',
-                tokenPreview: token.substring(0, 8) + '...',
+        if (!isLoading) {
+            console.debug('[Checkout] Auto-loading from provided token:', {
+                tokenPreview: providedToken.substring(0, 8) + '...',
             });
             hasAutoLoadedRef.current = true;
-            getCheckout(token).catch((err) => {
+            getCheckout(providedToken).catch((err) => {
                 console.error('Auto-load failed:', err);
                 setError(err instanceof Error ? err : new Error('Auto-load failed'));
                 hasAutoLoadedRef.current = false; // Reset to allow retry
             });
         }
-    }, [autoLoadFromToken, providedToken, fallbackToken, isInitialized, isLoading, getCheckout]);
+    }, [autoLoadFromToken, providedToken, isInitialized, isLoading, getCheckout]);
     return {
         checkout,
         isLoading,

package/dist/react/hooks/useISOData.js

@@ -1,7 +1,4 @@
-import { useMemo } from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - iso3166-2-db doesn't have TypeScript definitions
-import { getDataSet, reduce } from 'iso3166-2-db';
+import { useMemo, useState, useEffect } from 'react';
 /**
  * React hook for accessing ISO3166 countries and regions data
  * @param language - Language code (en, fr, de, es, etc.)
@@ -9,8 +6,43 @@ import { getDataSet, reduce } from 'iso3166-2-db';
  * @returns Object with countries data and helper functions
  */
 export function useISOData(language = 'en', disputeSetting = 'UN') {
+    const [isoModule, setIsoModule] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        let isMounted = true;
+        const loadModule = async () => {
+            try {
+                // Try dynamic import first (ES modules)
+                const isoModule = await import('iso3166-2-db');
+                if (isMounted) {
+                    setIsoModule(isoModule);
+                    setIsLoading(false);
+                }
+            }
+            catch (importError) {
+                console.error(`Failed to load ISO data module:`, importError);
+                if (isMounted) {
+                    setIsoModule(null);
+                    setIsLoading(false);
+                }
+            }
+        };
+        void loadModule();
+        return () => {
+            isMounted = false;
+        };
+    }, []);
     const data = useMemo(() => {
+        if (isLoading || !isoModule) {
+            return {
+                countries: {},
+                getRegions: () => [],
+                findRegion: () => null,
+                mapGoogleToISO: () => null,
+            };
+        }
         try {
+            const { getDataSet, reduce } = isoModule;
             // Get the dataset using the iso3166-2-db library
             const worldDatabase = reduce(getDataSet(), language);
             // Transform to our expected format
@@ -85,7 +117,7 @@ export function useISOData(language = 'en', disputeSetting = 'UN') {
                 mapGoogleToISO: () => null,
             };
         }
-    }, [language, disputeSetting]);
+    }, [isoModule, isLoading, language, disputeSetting]);
     return data;
 }
 /**

package/dist/react/hooks/useLogin.js

@@ -1,14 +1,15 @@
 import { useCallback, useState } from 'react';
 import { useTagadaContext } from '../providers/TagadaProvider';
+import { usePluginConfig } from './usePluginConfig';
 import { setClientToken } from '../utils/tokenStorage';
 export function useLogin() {
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const { apiService } = useTagadaContext();
+    const { storeId } = usePluginConfig();
     const requestCode = useCallback(async (email) => {
         setIsLoading(true);
         try {
-            const storeId = apiService.getStoredStoreId();
             if (!storeId) {
                 throw new Error('Store ID not found. Make sure the TagadaProvider is properly configured.');
             }
@@ -33,11 +34,10 @@ export function useLogin() {
         finally {
             setIsLoading(false);
         }
-    }, [apiService]);
+    }, [apiService, storeId]);
     const verifyCode = useCallback(async (email, code) => {
         setIsLoading(true);
         try {
-            const storeId = apiService.getStoredStoreId();
             if (!storeId) {
                 throw new Error('Store ID not found. Make sure the TagadaProvider is properly configured.');
             }
@@ -65,7 +65,7 @@ export function useLogin() {
         finally {
             setIsLoading(false);
         }
-    }, [apiService]);
+    }, [apiService, storeId]);
     return {
         error,
         isLoading,

package/dist/react/hooks/useOffers.js

@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useTagadaContext } from '../providers/TagadaProvider';
+import { usePluginConfig } from './usePluginConfig';
 export function useOffers(options) {
     const { apiService, environment } = useTagadaContext();
+    const { storeId } = usePluginConfig();
     const [offers, setOffers] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -12,7 +14,10 @@ export function useOffers(options) {
         setIsLoading(true);
         setError(null);
         try {
-            const responseData = await apiService.fetch(`/api/v1/stores/${apiService.getStoredStoreId()}/offers`, {
+            if (!storeId) {
+                throw new Error('Store ID not found. Make sure the TagadaProvider is properly configured.');
+            }
+            const responseData = await apiService.fetch(`/api/v1/stores/${storeId}/offers`, {
                 method: 'GET',
                 headers: {
                     'Content-Type': 'application/json',
@@ -31,7 +36,7 @@ export function useOffers(options) {
         finally {
             setIsLoading(false);
         }
-    }, [apiService, environment.apiConfig.baseUrl, offerIds, enabled]);
+    }, [apiService, storeId, environment.apiConfig.baseUrl, offerIds, enabled]);
     const initCheckoutSession = useCallback(async (offerId, orderId) => {
         const response = await apiService.fetch(`/api/v1/checkout/offer/init`, {
             method: 'POST',

package/dist/react/hooks/useProducts.js

@@ -1,7 +1,9 @@
 import { useState, useCallback, useEffect, useMemo } from 'react';
 import { useTagadaContext } from '../providers/TagadaProvider';
+import { usePluginConfig } from './usePluginConfig';
 export function useProducts(options = {}) {
     const { apiService } = useTagadaContext();
+    const { storeId } = usePluginConfig();
     const [products, setProducts] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
@@ -27,7 +29,6 @@ export function useProducts(options = {}) {
         setIsLoading(true);
         setError(null);
         try {
-            const storeId = apiService.getStoredStoreId();
             if (!storeId) {
                 throw new Error('Store ID not found. Make sure the TagadaProvider is properly configured.');
             }
@@ -67,7 +68,7 @@ export function useProducts(options = {}) {
         finally {
             setIsLoading(false);
         }
-    }, [apiService, productIds, enabled, includeVariants, includePrices]);
+    }, [apiService, storeId, productIds, enabled, includeVariants, includePrices]);
     const getProduct = useCallback((productId) => {
         return products.find((product) => product.id === productId);
     }, [products]);

package/dist/react/index.d.ts

@@ -2,12 +2,12 @@
  * React SDK exports
  */
 export { TagadaProvider } from './providers/TagadaProvider';
-export { useAddress } from './hooks/useAddress';
 export { useAuth } from './hooks/useAuth';
 export { useCheckout } from './hooks/useCheckout';
 export { useCurrency } from './hooks/useCurrency';
 export { useCustomer } from './hooks/useCustomer';
 export { useEnvironment } from './hooks/useEnvironment';
+export { useGoogleAutocomplete } from './hooks/useGoogleAutocomplete';
 export { useLocale } from './hooks/useLocale';
 export { useLogin } from './hooks/useLogin';
 export { useOffers } from './hooks/useOffers';
@@ -15,12 +15,12 @@ export { useOrderBump } from './hooks/useOrderBump';
 export { usePostPurchases } from './hooks/usePostPurchases';
 export { useProducts } from './hooks/useProducts';
 export { useSession } from './hooks/useSession';
+export { useTagadaContext } from './providers/TagadaProvider';
 export { usePluginConfig, useBasePath, getPluginConfig, clearPluginConfigCache, debugPluginConfig } from './hooks/usePluginConfig';
 export type { PluginConfig } from './hooks/usePluginConfig';
-export { useGoogleAutocomplete, useGoogleMapsLoaded } from './hooks/useGoogleAutocomplete';
-export type { GooglePrediction, GoogleAddressComponent, GooglePlaceDetails, ExtractedAddress, UseGoogleAutocompleteOptions, UseGoogleAutocompleteResult } from './hooks/useGoogleAutocomplete';
 export { useISOData, useCountryOptions, useRegionOptions, getAvailableLanguages } from './hooks/useISOData';
 export type { ISOCountry, ISORegion, UseISODataResult } from './hooks/useISOData';
+export type { GooglePrediction, GoogleAddressComponent, GooglePlaceDetails, ExtractedAddress, UseGoogleAutocompleteOptions, UseGoogleAutocompleteResult } from './hooks/useGoogleAutocomplete';
 export { useOrder } from './hooks/useOrder';
 export type { UseOrderOptions, UseOrderResult } from './hooks/useOrder';
 export { usePayment } from './hooks/usePayment';
@@ -28,10 +28,9 @@ export { usePaymentPolling } from './hooks/usePaymentPolling';
 export { useThreeds } from './hooks/useThreeds';
 export { useThreedsModal } from './hooks/useThreedsModal';
 export type { AuthState, Currency, Customer, Environment, EnvironmentConfig, Locale, Order, OrderAddress, OrderItem, OrderSummary, PickupPoint, Session, Store, } from './types';
-export type { CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, Promotion, UseCheckoutOptions, UseCheckoutResult, } from './hooks/useCheckout';
+export type { CheckoutSessionPreview, CheckoutData, CheckoutInitParams, CheckoutLineItem, CheckoutSession, Promotion, UseCheckoutOptions, UseCheckoutResult, } from './hooks/useCheckout';
 export type { OrderBumpPreview, UseOrderBumpOptions, UseOrderBumpResult } from './hooks/useOrderBump';
 export type { PostPurchaseOffer, PostPurchaseOfferItem, PostPurchaseOfferLineItem, PostPurchaseOfferSummary, UsePostPurchasesOptions, UsePostPurchasesResult, } from './hooks/usePostPurchases';
-export type { AddressData, AddressField, Country, State, UseAddressOptions, UseAddressResult, } from './hooks/useAddress';
 export type { Payment, PaymentPollingHook, PollingOptions } from './hooks/usePaymentPolling';
 export type { PaymentInstrument, ThreedsChallenge, ThreedsHook, ThreedsOptions, ThreedsProvider, ThreedsSession, } from './hooks/useThreeds';
 export type { ApplePayToken, CardPaymentMethod, PaymentHook, PaymentInstrumentResponse, PaymentOptions, PaymentResponse, } from './hooks/usePayment';

package/dist/react/index.js

@@ -5,12 +5,12 @@
 // Provider exports
 export { TagadaProvider } from './providers/TagadaProvider';
 // Hook exports
-export { useAddress } from './hooks/useAddress';
 export { useAuth } from './hooks/useAuth';
 export { useCheckout } from './hooks/useCheckout';
 export { useCurrency } from './hooks/useCurrency';
 export { useCustomer } from './hooks/useCustomer';
 export { useEnvironment } from './hooks/useEnvironment';
+export { useGoogleAutocomplete } from './hooks/useGoogleAutocomplete';
 export { useLocale } from './hooks/useLocale';
 export { useLogin } from './hooks/useLogin';
 export { useOffers } from './hooks/useOffers';
@@ -18,10 +18,9 @@ export { useOrderBump } from './hooks/useOrderBump';
 export { usePostPurchases } from './hooks/usePostPurchases';
 export { useProducts } from './hooks/useProducts';
 export { useSession } from './hooks/useSession';
+export { useTagadaContext } from './providers/TagadaProvider';
 // Plugin configuration hooks
 export { usePluginConfig, useBasePath, getPluginConfig, clearPluginConfigCache, debugPluginConfig } from './hooks/usePluginConfig';
-// Google Places hooks
-export { useGoogleAutocomplete, useGoogleMapsLoaded } from './hooks/useGoogleAutocomplete';
 // ISO Data hooks
 export { useISOData, useCountryOptions, useRegionOptions, getAvailableLanguages } from './hooks/useISOData';
 // Order hook exports

package/dist/react/providers/TagadaProvider.d.ts

@@ -51,11 +51,9 @@ interface TagadaProviderProps {
     environment?: Environment;
     customApiConfig?: Partial<EnvironmentConfig>;
     debugMode?: boolean;
-    storeId?: string;
-    accountId?: string;
     localConfig?: string;
 }
 export declare function TagadaProvider({ children, environment, customApiConfig, debugMode, // Remove default, will be set based on environment
-storeId: propStoreId, accountId: propAccountId, localConfig, }: TagadaProviderProps): import("react/jsx-runtime").JSX.Element;
+localConfig, }: TagadaProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTagadaContext(): TagadaContextValue;
 export {};

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.0",
+  "version": "2.1.3",
   "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;