@tagadapay/plugin-sdk 1.0.30 → 2.0.2

package/dist/react/hooks/useGoogleAutocomplete.js

@@ -0,0 +1,219 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+/**
+ * React hook for Google Places Autocomplete with automatic script injection
+ * Automatically loads the Google Maps JavaScript API with Places library
+ */
+export function useGoogleAutocomplete(options) {
+    const { apiKey, libraries = ['places'], version = 'weekly', language, region } = options;
+    const [predictions, setPredictions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isScriptLoaded, setIsScriptLoaded] = useState(false);
+    const autocompleteServiceRef = useRef(null);
+    const placesServiceRef = useRef(null);
+    const scriptLoadedRef = useRef(false);
+    // Inject Google Maps script
+    useEffect(() => {
+        if (!apiKey) {
+            console.error('Google Maps API key is required');
+            return;
+        }
+        if (scriptLoadedRef.current || window.google?.maps) {
+            setIsScriptLoaded(true);
+            return;
+        }
+        // Check if script is already being loaded
+        const existingScript = document.querySelector('script[src*="maps.googleapis.com"]');
+        if (existingScript) {
+            // Wait for existing script to load
+            const checkLoaded = () => {
+                if (window.google?.maps?.places?.AutocompleteService) {
+                    setIsScriptLoaded(true);
+                    scriptLoadedRef.current = true;
+                }
+                else {
+                    setTimeout(checkLoaded, 100);
+                }
+            };
+            checkLoaded();
+            return;
+        }
+        // Create and inject the script
+        const script = document.createElement('script');
+        const params = new URLSearchParams({
+            key: apiKey,
+            libraries: libraries.join(','),
+            v: version,
+        });
+        if (language)
+            params.append('language', language);
+        if (region)
+            params.append('region', region);
+        script.src = `https://maps.googleapis.com/maps/api/js?${params.toString()}`;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => {
+            console.log('🗺️ Google Maps API loaded successfully');
+            setIsScriptLoaded(true);
+            scriptLoadedRef.current = true;
+        };
+        script.onerror = () => {
+            console.error('Failed to load Google Maps API');
+        };
+        document.head.appendChild(script);
+        // Cleanup function
+        return () => {
+            // Note: We don't remove the script as it might be used by other components
+            // The script will remain in the DOM for the session
+        };
+    }, [apiKey, libraries, version, language, region]);
+    // Initialize Google Places services
+    const initializeServices = useCallback(() => {
+        if (typeof window === 'undefined')
+            return false;
+        if (!window.google?.maps?.places?.AutocompleteService) {
+            return false;
+        }
+        if (!autocompleteServiceRef.current) {
+            autocompleteServiceRef.current = new window.google.maps.places.AutocompleteService();
+        }
+        if (!placesServiceRef.current) {
+            // Create a dummy map for PlacesService (required by Google API)
+            const map = new window.google.maps.Map(document.createElement('div'));
+            placesServiceRef.current = new window.google.maps.places.PlacesService(map);
+        }
+        return true;
+    }, []);
+    // Search for place predictions
+    const searchPlaces = useCallback((input, countryRestriction) => {
+        if (!isScriptLoaded) {
+            console.warn('Google Maps API not yet loaded');
+            return;
+        }
+        if (!initializeServices()) {
+            console.error('Google Places services not available');
+            return;
+        }
+        if (input.length < 3) {
+            setPredictions([]);
+            return;
+        }
+        setIsLoading(true);
+        const request = {
+            input,
+            ...(countryRestriction && {
+                componentRestrictions: { country: countryRestriction.toLowerCase() },
+            }),
+        };
+        autocompleteServiceRef.current.getPlacePredictions(request, (results, status) => {
+            setIsLoading(false);
+            if (status === window.google.maps.places.PlacesServiceStatus.OK && results) {
+                setPredictions(results);
+                console.log(`🔍 Found ${results.length} predictions for "${input}"`);
+            }
+            else {
+                setPredictions([]);
+                if (status !== window.google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
+                    console.warn('Google Places prediction failed:', status);
+                }
+            }
+        });
+    }, [initializeServices, isScriptLoaded]);
+    // Get detailed place information
+    const getPlaceDetails = useCallback((placeId) => {
+        return new Promise((resolve) => {
+            if (!isScriptLoaded) {
+                console.warn('Google Maps API not yet loaded');
+                resolve(null);
+                return;
+            }
+            if (!initializeServices()) {
+                console.error('Google Places services not available');
+                resolve(null);
+                return;
+            }
+            const request = {
+                placeId,
+                fields: ['address_components', 'formatted_address'],
+            };
+            placesServiceRef.current.getDetails(request, (place, status) => {
+                if (status === window.google.maps.places.PlacesServiceStatus.OK && place) {
+                    console.log('📍 Got place details:', place);
+                    resolve(place);
+                }
+                else {
+                    console.error('Failed to get place details:', status);
+                    resolve(null);
+                }
+            });
+        });
+    }, [initializeServices, isScriptLoaded]);
+    // Extract structured address components from Google place
+    const extractAddressComponents = useCallback((place) => {
+        const extracted = {
+            streetNumber: '',
+            route: '',
+            locality: '',
+            administrativeAreaLevel1: '',
+            administrativeAreaLevel1Long: '',
+            country: '',
+            postalCode: '',
+        };
+        console.log('🏗️ Extracted address components:', place.address_components);
+        place.address_components?.forEach((component) => {
+            const types = component.types;
+            if (types.includes('street_number')) {
+                extracted.streetNumber = component.long_name;
+            }
+            if (types.includes('route')) {
+                extracted.route = component.long_name;
+            }
+            if (types.includes('locality') || types.includes('administrative_area_level_2')) {
+                extracted.locality = component.long_name;
+            }
+            if (types.includes('administrative_area_level_1')) {
+                extracted.administrativeAreaLevel1 = component.short_name;
+                extracted.administrativeAreaLevel1Long = component.long_name;
+            }
+            if (types.includes('country')) {
+                extracted.country = component.short_name;
+            }
+            if (types.includes('postal_code')) {
+                extracted.postalCode = component.long_name;
+            }
+        });
+        console.log('🏗️ Extracted address components:', extracted);
+        return extracted;
+    }, []);
+    // Clear predictions
+    const clearPredictions = useCallback(() => {
+        setPredictions([]);
+    }, []);
+    return {
+        predictions,
+        isLoading,
+        isScriptLoaded,
+        searchPlaces,
+        getPlaceDetails,
+        extractAddressComponents,
+        clearPredictions,
+    };
+}
+/**
+ * Hook to check if Google Maps API is loaded
+ * @deprecated Use useGoogleAutocomplete with isScriptLoaded instead
+ */
+export function useGoogleMapsLoaded() {
+    const [isLoaded, setIsLoaded] = useState(false);
+    useEffect(() => {
+        const checkLoaded = () => {
+            const loaded = !!window.google?.maps?.places?.AutocompleteService;
+            setIsLoaded(loaded);
+            if (!loaded) {
+                // Check again in 100ms
+                setTimeout(checkLoaded, 100);
+            }
+        };
+        checkLoaded();
+    }, []);
+    return isLoaded;
+}

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

@@ -0,0 +1,41 @@
+export interface ISOCountry {
+    iso: string;
+    iso3: string;
+    numeric: number;
+    name: string;
+}
+export interface ISORegion {
+    iso: string;
+    name: string;
+}
+export interface UseISODataResult {
+    countries: Record<string, ISOCountry>;
+    getRegions: (countryCode: string) => ISORegion[];
+    findRegion: (countryCode: string, regionCode: string) => ISORegion | null;
+    mapGoogleToISO: (googleState: string, googleStateLong: string, countryCode: string) => ISORegion | null;
+}
+/**
+ * React hook for accessing ISO3166 countries and regions data
+ * @param language - Language code (en, fr, de, es, etc.)
+ * @param disputeSetting - Territorial dispute perspective (UN, RU, UA, TR)
+ * @returns Object with countries data and helper functions
+ */
+export declare function useISOData(language?: string, disputeSetting?: string): UseISODataResult;
+/**
+ * Get available languages for ISO data
+ */
+export declare function getAvailableLanguages(): string[];
+/**
+ * Get list of countries as options for select components
+ */
+export declare function useCountryOptions(language?: string): {
+    value: string;
+    label: string;
+}[];
+/**
+ * Get list of regions/states for a country as options for select components
+ */
+export declare function useRegionOptions(countryCode: string, language?: string): {
+    value: string;
+    label: string;
+}[];

package/dist/react/hooks/useISOData.js

@@ -0,0 +1,127 @@
+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';
+/**
+ * React hook for accessing ISO3166 countries and regions data
+ * @param language - Language code (en, fr, de, es, etc.)
+ * @param disputeSetting - Territorial dispute perspective (UN, RU, UA, TR)
+ * @returns Object with countries data and helper functions
+ */
+export function useISOData(language = 'en', disputeSetting = 'UN') {
+    const data = useMemo(() => {
+        try {
+            // Get the dataset using the iso3166-2-db library
+            const worldDatabase = reduce(getDataSet(), language);
+            // Transform to our expected format
+            const countries = {};
+            Object.keys(worldDatabase).forEach((countryCode) => {
+                const countryData = worldDatabase[countryCode];
+                countries[countryData.iso] = {
+                    iso: countryData.iso,
+                    iso3: countryData.iso3,
+                    numeric: countryData.numeric,
+                    name: countryData.name,
+                };
+            });
+            // Helper to load regions for a specific country
+            const getRegions = (countryCode) => {
+                try {
+                    const countryData = worldDatabase[countryCode];
+                    if (!countryData?.regions) {
+                        return [];
+                    }
+                    return Object.keys(countryData.regions).map((regionCode) => {
+                        const regionData = countryData.regions[regionCode];
+                        return {
+                            iso: regionData.iso,
+                            name: regionData.name,
+                        };
+                    });
+                }
+                catch {
+                    return []; // Return empty array if no regions
+                }
+            };
+            // Find a specific region by ISO code
+            const findRegion = (countryCode, regionCode) => {
+                const regions = getRegions(countryCode);
+                return regions.find((region) => region.iso === regionCode) ?? null;
+            };
+            // Map Google Places state to ISO region (proven 100% success rate)
+            const mapGoogleToISO = (googleState, googleStateLong, countryCode) => {
+                const regions = getRegions(countryCode);
+                if (regions.length === 0)
+                    return null;
+                // Strategy 1: Exact ISO code match (86% success rate)
+                let match = regions.find((r) => r.iso === googleState);
+                if (match)
+                    return match;
+                // Strategy 2: Name matching (14% success rate)
+                match = regions.find((r) => r.name.toLowerCase() === googleState.toLowerCase());
+                if (match)
+                    return match;
+                match = regions.find((r) => r.name.toLowerCase() === googleStateLong.toLowerCase());
+                if (match)
+                    return match;
+                // Strategy 3: Partial name matching (fallback)
+                match = regions.find((r) => r.name.toLowerCase().includes(googleStateLong.toLowerCase()) ||
+                    googleStateLong.toLowerCase().includes(r.name.toLowerCase()));
+                return match ?? null;
+            };
+            return {
+                countries,
+                getRegions,
+                findRegion,
+                mapGoogleToISO,
+            };
+        }
+        catch (error) {
+            console.error(`Failed to load ISO data for language: ${language}`, error);
+            return {
+                countries: {},
+                getRegions: () => [],
+                findRegion: () => null,
+                mapGoogleToISO: () => null,
+            };
+        }
+    }, [language, disputeSetting]);
+    return data;
+}
+/**
+ * Get available languages for ISO data
+ */
+export function getAvailableLanguages() {
+    return ['en', 'fr', 'de', 'es', 'ru', 'zh', 'ar', 'it', 'pt', 'ja', 'hi'];
+}
+/**
+ * Get list of countries as options for select components
+ */
+export function useCountryOptions(language = 'en') {
+    const { countries } = useISOData(language);
+    return useMemo(() => {
+        return Object.entries(countries)
+            .map(([code, country]) => ({
+            value: code,
+            label: country.name,
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label));
+    }, [countries]);
+}
+/**
+ * Get list of regions/states for a country as options for select components
+ */
+export function useRegionOptions(countryCode, language = 'en') {
+    const { getRegions } = useISOData(language);
+    return useMemo(() => {
+        if (!countryCode)
+            return [];
+        const regions = getRegions(countryCode);
+        return regions
+            .map((region) => ({
+            value: region.iso,
+            label: region.name,
+        }))
+            .sort((a, b) => a.label.localeCompare(b.label));
+    }, [countryCode, getRegions]);
+}

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

@@ -0,0 +1,53 @@
+/**
+ * Plugin Configuration Hook
+ *
+ * Professional SDK approach to access plugin configuration:
+ * - Store ID, Account ID, Base Path: from .local.json (dev) or headers (production)
+ * - Deployment Config: from config/*.json (dev) or meta tags (production)
+ */
+export interface PluginConfig {
+    storeId?: string;
+    accountId?: string;
+    basePath?: string;
+    config?: Record<string, any>;
+}
+export interface LocalDevConfig {
+    storeId: string;
+    accountId: string;
+    basePath: string;
+}
+/**
+ * Load plugin configuration (cached)
+ * Tries local dev config first, then production config
+ */
+export declare const loadPluginConfig: (configVariant?: string) => Promise<PluginConfig>;
+/**
+ * Main hook for plugin configuration
+ * Gets config from TagadaProvider context (no parameters needed)
+ */
+export declare const usePluginConfig: () => {
+    storeId: string | undefined;
+    accountId: string | undefined;
+    basePath: string;
+    config: Record<string, any>;
+    loading: boolean;
+};
+/**
+ * Specific hook for basePath only
+ */
+export declare const useBasePath: () => {
+    basePath: string;
+    loading: boolean;
+};
+/**
+ * Get cached config directly (for non-React usage)
+ */
+export declare const getPluginConfig: (configVariant?: string) => Promise<PluginConfig>;
+/**
+ * Clear the config cache (useful for testing)
+ */
+export declare const clearPluginConfigCache: () => void;
+/**
+ * Development helper to log current configuration
+ */
+export declare const debugPluginConfig: (configVariant?: string) => Promise<void>;

package/dist/react/hooks/usePluginConfig.js

@@ -0,0 +1,190 @@
+/**
+ * Plugin Configuration Hook
+ *
+ * Professional SDK approach to access plugin configuration:
+ * - Store ID, Account ID, Base Path: from .local.json (dev) or headers (production)
+ * - Deployment Config: from config/*.json (dev) or meta tags (production)
+ */
+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
+        if (process.env.NODE_ENV !== 'development') {
+            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
+ */
+const loadProductionConfig = async () => {
+    try {
+        // Get headers
+        const response = await fetch(window.location.href, { method: 'HEAD' });
+        const storeId = response.headers.get('X-Plugin-Store-Id') || undefined;
+        const accountId = response.headers.get('X-Plugin-Account-Id') || undefined;
+        const basePath = response.headers.get('X-Plugin-Base-Path') || '/';
+        // Get deployment config from meta tags
+        let config = {};
+        try {
+            const configMeta = document.querySelector('meta[name="x-plugin-config"]');
+            const encodedConfig = configMeta?.getAttribute('content');
+            if (encodedConfig) {
+                const decodedConfig = decodeURIComponent(encodedConfig);
+                config = JSON.parse(decodedConfig);
+            }
+        }
+        catch {
+            // Deployment config is optional
+        }
+        return { storeId, accountId, basePath, config };
+    }
+    catch {
+        return { basePath: '/', config: {} };
+    }
+};
+/**
+ * Load plugin configuration (cached)
+ * Tries local dev config first, then production config
+ */
+export const loadPluginConfig = async (configVariant = 'default') => {
+    // Try local development config first
+    const localConfig = await loadLocalDevConfig(configVariant);
+    if (localConfig) {
+        return localConfig;
+    }
+    // Fall back to production config
+    return loadProductionConfig();
+};
+/**
+ * Main hook for plugin configuration
+ * Gets config from TagadaProvider context (no parameters needed)
+ */
+export const usePluginConfig = () => {
+    const context = useTagadaContext();
+    const { pluginConfig, pluginConfigLoading } = context;
+    return {
+        storeId: pluginConfig.storeId,
+        accountId: pluginConfig.accountId,
+        basePath: pluginConfig.basePath ?? '/',
+        config: pluginConfig.config ?? {},
+        loading: pluginConfigLoading,
+    };
+};
+/**
+ * Specific hook for basePath only
+ */
+export const useBasePath = () => {
+    const { basePath, loading } = usePluginConfig();
+    return { basePath, loading };
+};
+/**
+ * Get cached config directly (for non-React usage)
+ */
+export const getPluginConfig = async (configVariant = 'default') => {
+    if (cachedConfig) {
+        return cachedConfig;
+    }
+    if (configPromise) {
+        return configPromise;
+    }
+    configPromise = loadPluginConfig(configVariant);
+    const result = await configPromise;
+    cachedConfig = result;
+    configPromise = null;
+    return result;
+};
+/**
+ * Clear the config cache (useful for testing)
+ */
+export const clearPluginConfigCache = () => {
+    cachedConfig = null;
+    configPromise = null;
+};
+/**
+ * Development helper to log current configuration
+ */
+export const debugPluginConfig = async (configVariant = 'default') => {
+    if (process.env.NODE_ENV !== 'development') {
+        return;
+    }
+    const config = await getPluginConfig(configVariant);
+    console.group('🔧 Plugin Configuration Debug');
+    console.log('Store ID:', config.storeId || 'Not available');
+    console.log('Account ID:', config.accountId || 'Not available');
+    console.log('Base Path:', config.basePath || 'Not available');
+    console.log('Config Keys:', config.config ? Object.keys(config.config) : 'None');
+    console.log('Full Config:', config);
+    console.groupEnd();
+};

package/dist/react/index.d.ts

@@ -15,6 +15,12 @@ export { useOrderBump } from './hooks/useOrderBump';
 export { usePostPurchases } from './hooks/usePostPurchases';
 export { useProducts } from './hooks/useProducts';
 export { useSession } from './hooks/useSession';
+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 { useOrder } from './hooks/useOrder';
 export type { UseOrderOptions, UseOrderResult } from './hooks/useOrder';
 export { usePayment } from './hooks/usePayment';

package/dist/react/index.js

@@ -18,6 +18,12 @@ export { useOrderBump } from './hooks/useOrderBump';
 export { usePostPurchases } from './hooks/usePostPurchases';
 export { useProducts } from './hooks/useProducts';
 export { useSession } from './hooks/useSession';
+// 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
 export { useOrder } from './hooks/useOrder';
 // Payment hooks exports

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

@@ -4,6 +4,7 @@
 import { ReactNode } from 'react';
 import { Customer, Session, AuthState, Locale, Currency, Store, Environment, EnvironmentConfig } from '../types';
 import { ApiService } from '../services/apiService';
+import { PluginConfig } from '../hooks/usePluginConfig';
 import { formatMoney, getCurrencyInfo, moneyStringOrNumberToMinorUnits, minorUnitsToMajorUnits, formatMoneyWithoutSymbol, convertCurrency, formatSimpleMoney } from '../utils/money';
 interface TagadaContextValue {
     auth: AuthState;
@@ -17,6 +18,8 @@ interface TagadaContextValue {
     isLoading: boolean;
     isInitialized: boolean;
     debugMode: boolean;
+    pluginConfig: PluginConfig;
+    pluginConfigLoading: boolean;
     debugCheckout: {
         isActive: boolean;
         data: any;
@@ -50,8 +53,9 @@ interface TagadaProviderProps {
     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, accountId, }: TagadaProviderProps): import("react/jsx-runtime").JSX.Element;
+storeId: propStoreId, accountId: propAccountId, localConfig, }: TagadaProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTagadaContext(): TagadaContextValue;
 export {};