@tagadapay/plugin-sdk 2.6.14 → 2.6.17

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

@@ -30,10 +30,14 @@ export interface RawPluginConfig<TConfig = Record<string, any>> {
     basePath?: string;
     config?: TConfig;
 }
+export interface LocalDevConfig {
+    storeId: string;
+    accountId: string;
+    basePath: string;
+}
 /**
  * Load plugin configuration (cached)
- * Tries raw config first, then production config
- * Note: Local dev config should be passed via rawConfig parameter
+ * Tries raw config first, then local dev config, then production config
  */
 export declare const loadPluginConfig: (configVariant?: string, rawConfig?: RawPluginConfig) => Promise<PluginConfig>;
 /**

package/dist/react/hooks/usePluginConfig.js

@@ -22,6 +22,88 @@ import { useTagadaContext } from '../providers/TagadaProvider';
 // Simple cache for plugin configuration
 let cachedConfig = null;
 let configPromise = null;
+/**
+ * Load local development configuration
+ * Combines .local.json + config/default.tgd.json (or specified variant)
+ */
+const loadLocalDevConfig = async (configVariant = 'default') => {
+    try {
+        // Only try to load local config in development
+        // Use hostname-based detection for better Vite compatibility
+        const isLocalDev = typeof window !== 'undefined' &&
+            (window.location.hostname === 'localhost' ||
+                window.location.hostname.includes('ngrok-free.app') ||
+                window.location.hostname.includes('.localhost') ||
+                window.location.hostname.includes('127.0.0.1'));
+        if (!isLocalDev) {
+            return null;
+        }
+        // Load local store/account config
+        const localResponse = await fetch('/.local.json');
+        if (!localResponse.ok) {
+            return null;
+        }
+        const localConfig = await localResponse.json();
+        // Load deployment config (specified variant or fallback to default)
+        let config = {};
+        let configLoaded = false;
+        try {
+            // Try .tgd.json first (new format), then fallback to .json
+            let deploymentResponse = await fetch(`/config/${configVariant}.tgd.json`);
+            if (!deploymentResponse.ok) {
+                deploymentResponse = await fetch(`/config/${configVariant}.json`);
+            }
+            if (deploymentResponse.ok) {
+                config = await deploymentResponse.json();
+                configLoaded = true;
+            }
+        }
+        catch {
+            // Config fetch failed, will try fallback
+        }
+        // If config didn't load and it's not 'default', try fallback to default
+        if (!configLoaded && configVariant !== 'default') {
+            console.warn(`⚠️ Config variant '${configVariant}' not found, falling back to 'default'`);
+            try {
+                let defaultResponse = await fetch('/config/default.tgd.json');
+                if (!defaultResponse.ok) {
+                    defaultResponse = await fetch('/config/default.json');
+                }
+                if (defaultResponse.ok) {
+                    config = await defaultResponse.json();
+                    configLoaded = true;
+                    console.log(`✅ Fallback to 'default' config successful`);
+                }
+            }
+            catch {
+                // Default config also failed
+            }
+        }
+        // Final warning if no config was loaded
+        if (!configLoaded) {
+            if (configVariant === 'default') {
+                console.warn(`⚠️ No 'default' config found. Create /config/default.tgd.json`);
+            }
+            else {
+                console.warn(`⚠️ Neither '${configVariant}' nor 'default' config found. Create /config/default.tgd.json`);
+            }
+        }
+        console.log('🛠️ Using local development plugin config:', {
+            configName: config.configName || configVariant,
+            local: localConfig,
+            deployment: config
+        });
+        return {
+            storeId: localConfig.storeId,
+            accountId: localConfig.accountId,
+            basePath: localConfig.basePath,
+            config,
+        };
+    }
+    catch {
+        return null;
+    }
+};
 /**
  * Load production config from headers and meta tags
  */
@@ -53,18 +135,12 @@ const loadProductionConfig = async () => {
 };
 /**
  * Load plugin configuration (cached)
- * Tries raw config first, then production config
- * Note: Local dev config should be passed via rawConfig parameter
+ * Tries raw config first, then local dev config, then production config
  */
 export const loadPluginConfig = async (configVariant = 'default', rawConfig) => {
     // If raw config is provided, use it directly
     if (rawConfig) {
-        console.log('🛠️ Using raw plugin config:', {
-            hasStoreId: !!rawConfig.storeId,
-            hasAccountId: !!rawConfig.accountId,
-            hasConfig: !!rawConfig.config,
-            configKeys: rawConfig.config ? Object.keys(rawConfig.config) : [],
-        });
+        console.log('🛠️ Using raw plugin config:', rawConfig);
         return {
             storeId: rawConfig.storeId,
             accountId: rawConfig.accountId,
@@ -72,7 +148,12 @@ export const loadPluginConfig = async (configVariant = 'default', rawConfig) =>
             config: rawConfig.config ?? {},
         };
     }
-    // Fall back to production config (from headers/meta tags)
+    // Try local development config
+    const localConfig = await loadLocalDevConfig(configVariant);
+    if (localConfig) {
+        return localConfig;
+    }
+    // Fall back to production config
     return loadProductionConfig();
 };
 /**

package/dist/v2/index.d.ts

@@ -21,5 +21,5 @@ export type { ApplyDiscountResponse, Discount, DiscountCodeValidation, RemoveDis
 export type { ToggleOrderBumpResponse, VipOffer, VipPreviewResponse } from './core/resources/vipOffers';
 export type { StoreConfig } from './core/resources/storeConfig';
 export type { FunnelContextUpdateRequest, FunnelContextUpdateResponse, FunnelEvent, FunnelInitializeRequest, FunnelInitializeResponse, FunnelNavigateRequest, FunnelNavigateResponse, FunnelNavigationAction, FunnelNavigationResult, SimpleFunnelContext } from './core/resources/funnel';
-export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useCheckout, useCheckoutToken, useCountryOptions, useCurrency, useDiscount, useDiscounts, useExpressPaymentMethods, useFunnel, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useOffers, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, useProducts, usePromotions, useRegionOptions, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useVipOffers } from './react';
-export type { StoreDiscount } from './react';
+export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useCheckout, useCheckoutToken, useCountryOptions, useCurrency, useDiscount, useDiscounts, useExpressPaymentMethods, useFunnel, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useOffers, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, useProducts, usePromotions, useRegionOptions, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';
+export type { StoreDiscount, TranslateFunction, TranslationText, UseTranslationOptions, UseTranslationResult } from './react';

package/dist/v2/index.js

@@ -12,4 +12,4 @@ export * from './core/utils/currency';
 export * from './core/utils/pluginConfig';
 export * from './core/utils/products';
 // React exports (hooks and components only, types are exported above)
-export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useCheckout, useCheckoutToken, useCountryOptions, useCurrency, useDiscount, useDiscounts, useExpressPaymentMethods, useFunnel, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useOffers, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, useProducts, usePromotions, useRegionOptions, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useVipOffers } from './react';
+export { ApplePayButton, ExpressPaymentMethodsProvider, formatMoney, getAvailableLanguages, GooglePayButton, queryKeys, TagadaProvider, useApiMutation, useApiQuery, useCheckout, useCheckoutToken, useCountryOptions, useCurrency, useDiscount, useDiscounts, useExpressPaymentMethods, useFunnel, useGeoLocation, useGoogleAutocomplete, useInvalidateQuery, useISOData, useLanguageImport, useOffers, useOrder, useOrderBump, usePayment, usePluginConfig, usePostPurchases, usePreloadQuery, useProducts, usePromotions, useRegionOptions, useShippingRates, useSimpleFunnel, useStoreConfig, useTagadaContext, useThreeds, useThreedsModal, useTranslation, useVipOffers } from './react';

package/dist/v2/react/hooks/useTranslation.d.ts

@@ -0,0 +1,46 @@
+import { LanguageCode } from '../../../data/languages';
+export type TranslationText = {
+    [key in LanguageCode | string]?: string;
+};
+export interface UseTranslationOptions {
+    defaultLanguage?: string;
+}
+export type TranslateFunction = (text: TranslationText | string | undefined, fallback?: string, languageCode?: string) => string;
+export interface UseTranslationResult {
+    /**
+     * Translate function that handles multi-language text objects
+     * @param text - The text to translate (can be a string or MultiLangText object)
+     * @param fallback - Optional fallback text if translation is not found
+     * @param languageCode - Optional language code to override the current locale
+     * @returns The translated string
+     */
+    t: TranslateFunction;
+    /**
+     * Current locale code (e.g., 'en', 'fr', 'es')
+     */
+    locale: string;
+}
+/**
+ * Hook for translating multi-language text objects
+ *
+ * @example
+ * ```tsx
+ * const { t, locale } = useTranslation({ defaultLanguage: 'en' });
+ *
+ * const multiLangText = {
+ *   en: 'Hello',
+ *   fr: 'Bonjour',
+ *   es: 'Hola'
+ * };
+ *
+ * // Translates to current locale
+ * const translated = t(multiLangText);
+ *
+ * // With fallback
+ * const withFallback = t(multiLangText, 'Default text');
+ *
+ * // Override locale
+ * const inFrench = t(multiLangText, '', 'fr');
+ * ```
+ */
+export declare const useTranslation: (options?: UseTranslationOptions) => UseTranslationResult;

package/dist/v2/react/hooks/useTranslation.js

@@ -0,0 +1,61 @@
+import { useCallback, useMemo } from 'react';
+/**
+ * Hook for translating multi-language text objects
+ *
+ * @example
+ * ```tsx
+ * const { t, locale } = useTranslation({ defaultLanguage: 'en' });
+ *
+ * const multiLangText = {
+ *   en: 'Hello',
+ *   fr: 'Bonjour',
+ *   es: 'Hola'
+ * };
+ *
+ * // Translates to current locale
+ * const translated = t(multiLangText);
+ *
+ * // With fallback
+ * const withFallback = t(multiLangText, 'Default text');
+ *
+ * // Override locale
+ * const inFrench = t(multiLangText, '', 'fr');
+ * ```
+ */
+export const useTranslation = (options = {}) => {
+    const { defaultLanguage = 'en' } = options;
+    // Get the current language from query params, browser, or fallback to default
+    const locale = useMemo(() => {
+        // Check for language query parameter
+        if (typeof window !== 'undefined') {
+            const urlParams = new URLSearchParams(window.location.search);
+            const langFromQuery = urlParams.get('language');
+            if (langFromQuery)
+                return langFromQuery;
+        }
+        // Try to get browser language
+        if (typeof navigator !== 'undefined') {
+            const browserLang = navigator.language.split('-')[0]; // e.g., 'en-US' -> 'en'
+            return browserLang;
+        }
+        return defaultLanguage;
+    }, [defaultLanguage]);
+    const t = useCallback((text, fallback, languageCode) => {
+        if (!text)
+            return fallback || '';
+        if (typeof text === 'string')
+            return text;
+        const targetLocale = languageCode || locale;
+        if (text[targetLocale])
+            return text[targetLocale];
+        if (fallback)
+            return fallback;
+        if (text[defaultLanguage])
+            return text[defaultLanguage];
+        const firstAvailable = Object.values(text).find((value) => value !== undefined && value !== '');
+        if (firstAvailable)
+            return firstAvailable;
+        return '';
+    }, [locale, defaultLanguage]);
+    return { t, locale };
+};

package/dist/v2/react/index.d.ts

@@ -12,6 +12,7 @@ export { useGeoLocation } from './hooks/useGeoLocation';
 export { useGoogleAutocomplete } from './hooks/useGoogleAutocomplete';
 export { getAvailableLanguages, useCountryOptions, useISOData, useLanguageImport, useRegionOptions } from './hooks/useISOData';
 export { usePluginConfig } from './hooks/usePluginConfig';
+export { useTranslation } from './hooks/useTranslation';
 export { queryKeys, useApiMutation, useApiQuery, useInvalidateQuery, usePreloadQuery } from './hooks/useApiQuery';
 export { useCheckoutQuery as useCheckout } from './hooks/useCheckoutQuery';
 export { useCurrency } from './hooks/useCurrency';
@@ -38,6 +39,7 @@ export type { GeoLocationData, UseGeoLocationOptions, UseGeoLocationReturn } fro
 export type { ExtractedAddress, GooglePlaceDetails, GooglePrediction, UseGoogleAutocompleteOptions, UseGoogleAutocompleteResult } from './hooks/useGoogleAutocomplete';
 export type { ISOCountry, ISORegion, UseISODataResult } from './hooks/useISOData';
 export type { UsePluginConfigOptions, UsePluginConfigResult } from './hooks/usePluginConfig';
+export type { TranslateFunction, TranslationText, UseTranslationOptions, UseTranslationResult } from './hooks/useTranslation';
 export type { UseCheckoutQueryOptions as UseCheckoutOptions, UseCheckoutQueryResult as UseCheckoutResult } from './hooks/useCheckoutQuery';
 export type { StoreDiscount, UseDiscountQueryOptions as UseDiscountOptions, UseDiscountQueryResult as UseDiscountResult } from './hooks/useDiscountQuery';
 export type { UseDiscountsQueryOptions as UseDiscountsOptions, UseDiscountsQueryResult as UseDiscountsResult } from './hooks/useDiscountsQuery';

package/dist/v2/react/index.js

@@ -15,6 +15,7 @@ export { useGeoLocation } from './hooks/useGeoLocation';
 export { useGoogleAutocomplete } from './hooks/useGoogleAutocomplete';
 export { getAvailableLanguages, useCountryOptions, useISOData, useLanguageImport, useRegionOptions } from './hooks/useISOData';
 export { usePluginConfig } from './hooks/usePluginConfig';
+export { useTranslation } from './hooks/useTranslation';
 // TanStack Query hooks (recommended)
 export { queryKeys, useApiMutation, useApiQuery, useInvalidateQuery, usePreloadQuery } from './hooks/useApiQuery';
 export { useCheckoutQuery as useCheckout } from './hooks/useCheckoutQuery';

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

@@ -52,11 +52,12 @@ interface TagadaProviderProps {
     environment?: Environment;
     customApiConfig?: Partial<EnvironmentConfig>;
     debugMode?: boolean;
+    localConfig?: string;
     blockUntilSessionReady?: boolean;
     rawPluginConfig?: RawPluginConfig;
 }
 export declare function TagadaProvider({ children, environment, customApiConfig, debugMode, // Remove default, will be set based on environment
-blockUntilSessionReady, // Default to new non-blocking behavior
+localConfig, blockUntilSessionReady, // Default to new non-blocking behavior
 rawPluginConfig, }: TagadaProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTagadaContext(): TagadaContextValue;
 export {};

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

@@ -52,7 +52,7 @@ const TagadaContext = createContext(null);
 let globalTagadaInstance = null;
 let globalTagadaInitialized = false;
 export function TagadaProvider({ children, environment, customApiConfig, debugMode, // Remove default, will be set based on environment
-blockUntilSessionReady = false, // Default to new non-blocking behavior
+localConfig, blockUntilSessionReady = false, // Default to new non-blocking behavior
 rawPluginConfig, }) {
     // Instance tracking
     const [instanceId] = useState(() => {
@@ -81,13 +81,20 @@ rawPluginConfig, }) {
             }
         };
     }, [instanceId]);
+    // 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] Instance ${instanceId} Initializing with:`, {
+        console.log(`🔍 [TagadaProvider] Instance ${instanceId} Config Debug:`, {
             hostname: typeof window !== 'undefined' ? window.location.hostname : 'SSR',
-            hasRawConfig: !!rawPluginConfig,
-            rawConfigStoreId: rawPluginConfig?.storeId,
+            isLocalDev,
+            localConfig,
+            configVariant,
         });
         hasLoggedRef.current = true;
     }
@@ -95,10 +102,6 @@ rawPluginConfig, }) {
     // Initialize with raw config if available to avoid empty config during loading
     const [pluginConfig, setPluginConfig] = useState(() => {
         if (rawPluginConfig) {
-            console.log('🛠️ [TagadaProvider] Using raw plugin config immediately:', {
-                storeId: rawPluginConfig.storeId,
-                accountId: rawPluginConfig.accountId,
-            });
             return {
                 storeId: rawPluginConfig.storeId,
                 accountId: rawPluginConfig.accountId,
@@ -106,11 +109,9 @@ rawPluginConfig, }) {
                 config: rawPluginConfig.config ?? {},
             };
         }
-        console.log('⏳ [TagadaProvider] No raw config, will load from headers/files');
         return { basePath: '/', config: {} };
     });
     const [configLoading, setConfigLoading] = useState(!rawPluginConfig);
-    const [apiClientReady, setApiClientReady] = useState(false);
     // Load plugin config on mount with the specified variant
     useEffect(() => {
         // Prevent multiple config loads
@@ -120,8 +121,8 @@ rawPluginConfig, }) {
         }
         const loadConfig = async () => {
             try {
-                // Use the v2 core loadPluginConfig function (only used when no rawPluginConfig)
-                const config = await loadPluginConfig('default', rawPluginConfig);
+                // 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.');
@@ -132,7 +133,7 @@ rawPluginConfig, }) {
                     accountId: config.accountId,
                     basePath: config.basePath,
                     hasConfig: !!config.config,
-                    source: rawPluginConfig ? 'raw' : 'headers/files',
+                    source: rawPluginConfig ? 'raw' : 'file',
                 });
                 if (blockUntilSessionReady) {
                     console.log('⏳ Blocking mode: Children will render after Phase 3 (session init) completes');
@@ -150,7 +151,7 @@ rawPluginConfig, }) {
             }
         };
         void loadConfig();
-    }, [rawPluginConfig]);
+    }, [configVariant, rawPluginConfig]);
     // Extract store/account IDs from plugin config (only source now)
     const storeId = pluginConfig.storeId;
     const _accountId = pluginConfig.accountId;
@@ -216,8 +217,7 @@ rawPluginConfig, }) {
         });
         // Set the global client for TanStack Query hooks
         setGlobalApiClient(client);
-        setApiClientReady(true);
-        console.log('[SDK] ✅ ApiClient initialized with baseURL:', environmentConfig.apiConfig.baseUrl);
+        console.log('[SDK] ApiClient initialized with baseURL:', environmentConfig.apiConfig.baseUrl);
     }, [environmentConfig]);
     // Sync token updates between ApiService and ApiClient
     useEffect(() => {
@@ -669,16 +669,9 @@ rawPluginConfig, }) {
         // debugCheckout removed from deps to prevent unnecessary re-renders
     ]);
     // Determine if we should show loading
-    // Always block until BOTH config is loaded AND API client is ready
-    const shouldShowLoading = configLoading || !apiClientReady;
-    const canRenderChildren = !configLoading && apiClientReady;
-    if (!hasLoggedRef.current && canRenderChildren) {
-        console.log('✅ [TagadaProvider] All initialization complete, ready to render children:', {
-            configLoading,
-            apiClientReady,
-            hasStoreId: !!pluginConfig.storeId,
-        });
-    }
+    // 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: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tagadapay/plugin-sdk",
-  "version": "2.6.14",
+  "version": "2.6.17",
   "description": "Modern React SDK for building Tagada Pay plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",