@tagadapay/plugin-sdk 1.0.29 → 2.0.1

package/dist/react/hooks/useAddressV2.js

@@ -0,0 +1,379 @@
+import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import { usePlacesWidget } from 'react-google-autocomplete';
+// Import the standardized ISO3166 data
+import { getCountries, getAllStates, getStatesForCountry, isValidCountryCode, isValidStateCode, } from '../../data/iso3166';
+// Default field structure
+const createDefaultField = (value = '') => ({
+    value,
+    isValid: true,
+    error: undefined,
+    touched: false,
+});
+// Default form data
+const createDefaultFormData = (initialValues = {}) => ({
+    firstName: createDefaultField(initialValues.firstName),
+    lastName: createDefaultField(initialValues.lastName),
+    email: createDefaultField(initialValues.email),
+    phone: createDefaultField(initialValues.phone),
+    country: createDefaultField(initialValues.country),
+    address1: createDefaultField(initialValues.address1),
+    address2: createDefaultField(initialValues.address2),
+    city: createDefaultField(initialValues.city),
+    state: createDefaultField(initialValues.state),
+    postal: createDefaultField(initialValues.postal),
+});
+// Validation functions
+const isValidEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+};
+const isValidPhone = (phone) => {
+    const phoneRegex = /^[+]?[\d\s\-()]+$/;
+    return phone.length >= 10 && phoneRegex.test(phone);
+};
+const isValidPostal = (postal, country) => {
+    if (!postal)
+        return false;
+    const patterns = {
+        US: /^\d{5}(-\d{4})?$/,
+        CA: /^[A-Za-z]\d[A-Za-z] \d[A-Za-z]\d$/,
+        GB: /^[A-Z]{1,2}\d[A-Z\d]? \d[A-Z]{2}$/,
+        DE: /^\d{5}$/,
+        FR: /^\d{5}$/,
+    };
+    const pattern = patterns[country];
+    return pattern ? pattern.test(postal) : postal.length >= 3;
+};
+export const useAddressV2 = (config = {}) => {
+    const { autoValidate = false, enableGooglePlaces = false, googlePlacesApiKey, countryRestrictions = [], onFieldsChange, debounceConfig = { autoSaveDelay: 1000, enabled: true }, initialValues = {}, } = config;
+    // State management
+    const [fields, setFields] = useState(() => createDefaultFormData(initialValues));
+    // Google Places integration
+    const [addressInputValue, setAddressInputValue] = useState(initialValues.address1 || '');
+    const addressRef = useRef(null);
+    // Debounce timeout ref
+    const debounceTimeoutRef = useRef(null);
+    // Memoized countries with restrictions applied (using ISO3166 data)
+    const countries = useMemo(() => {
+        const allCountries = getCountries(); // Already includes uniqueKey and is deduplicated
+        return countryRestrictions.length > 0
+            ? allCountries.filter((country) => countryRestrictions.includes(country.code))
+            : allCountries;
+    }, [countryRestrictions]);
+    // Memoized states for all countries (using ISO3166 data)
+    const allStates = useMemo(() => {
+        return getAllStates(); // Already includes uniqueKey and is deduplicated
+    }, []);
+    // Get states for current selected country
+    const states = useMemo(() => {
+        const selectedCountry = fields.country.value;
+        if (!selectedCountry)
+            return [];
+        return allStates.filter((state) => state.countryCode === selectedCountry);
+    }, [allStates, fields.country.value]);
+    // Get states for any country (utility function) - use ISO3166 function
+    const getStatesForCountryFn = useCallback((countryCode) => {
+        return getStatesForCountry(countryCode); // Use the ISO3166 function directly
+    }, []);
+    // Validation function for a single field
+    const validateField = useCallback((field) => {
+        const value = fields[field].value;
+        switch (field) {
+            case 'email':
+                return value ? isValidEmail(value) : true;
+            case 'phone':
+                return value ? isValidPhone(value) : true;
+            case 'postal':
+                return value ? isValidPostal(value, fields.country.value) : true;
+            case 'firstName':
+            case 'lastName':
+            case 'address1':
+            case 'city':
+                return value.trim().length > 0;
+            case 'country': {
+                return isValidCountryCode(value);
+            }
+            case 'state': {
+                if (!fields.country.value)
+                    return true;
+                return isValidStateCode(fields.country.value, value);
+            }
+            default:
+                return true;
+        }
+    }, [fields]);
+    // Validate all fields
+    const validateAll = useCallback(() => {
+        const fieldsToValidate = [
+            'firstName',
+            'lastName',
+            'email',
+            'phone',
+            'country',
+            'address1',
+            'city',
+            'state',
+            'postal',
+        ];
+        return fieldsToValidate.every((field) => validateField(field));
+    }, [validateField]);
+    // Check if form is currently valid
+    const isValid = useMemo(() => validateAll(), [validateAll]);
+    // Get validation error message
+    const getFieldError = useCallback((field, value) => {
+        if (!value &&
+            ['firstName', 'lastName', 'email', 'phone', 'country', 'address1', 'city'].includes(field)) {
+            return `${field.charAt(0).toUpperCase() + field.slice(1)} is required`;
+        }
+        switch (field) {
+            case 'email':
+                return value && !isValidEmail(value) ? 'Please enter a valid email address' : undefined;
+            case 'phone':
+                return value && !isValidPhone(value) ? 'Please enter a valid phone number' : undefined;
+            case 'postal':
+                return value && !isValidPostal(value, fields.country.value)
+                    ? 'Please enter a valid postal code'
+                    : undefined;
+            case 'country':
+                return value && !isValidCountryCode(value) ? 'Please select a valid country' : undefined;
+            case 'state': {
+                if (!fields.country.value)
+                    return undefined;
+                const countryStates = getStatesForCountry(fields.country.value);
+                if (countryStates.length > 0 && !isValidStateCode(fields.country.value, value)) {
+                    return 'Please select a valid state/province';
+                }
+                return undefined;
+            }
+            default:
+                return undefined;
+        }
+    }, [fields.country.value]);
+    // Refs for stable references to avoid recreating callbacks
+    const onFieldsChangeRef = useRef(onFieldsChange);
+    const debounceConfigRef = useRef(debounceConfig);
+    // Update refs when values change
+    useEffect(() => {
+        onFieldsChangeRef.current = onFieldsChange;
+    }, [onFieldsChange]);
+    useEffect(() => {
+        debounceConfigRef.current = debounceConfig;
+    }, [debounceConfig]);
+    // Store fields ref for stable access
+    const fieldsRef = useRef(fields);
+    useEffect(() => {
+        fieldsRef.current = fields;
+    }, [fields]);
+    // Debounced onFieldsChange callback (stable reference - NO DEPENDENCIES!)
+    const triggerFieldsChange = useCallback(() => {
+        const currentConfig = debounceConfigRef.current;
+        const currentCallback = onFieldsChangeRef.current;
+        if (!currentConfig.enabled || !currentCallback)
+            return;
+        if (debounceTimeoutRef.current) {
+            clearTimeout(debounceTimeoutRef.current);
+        }
+        debounceTimeoutRef.current = setTimeout(() => {
+            // Get current field values at execution time, not creation time
+            const currentFields = fieldsRef.current;
+            const currentValues = {
+                firstName: currentFields.firstName.value,
+                lastName: currentFields.lastName.value,
+                email: currentFields.email.value,
+                phone: currentFields.phone.value,
+                country: currentFields.country.value,
+                address1: currentFields.address1.value,
+                address2: currentFields.address2.value,
+                city: currentFields.city.value,
+                state: currentFields.state.value,
+                postal: currentFields.postal.value,
+            };
+            currentCallback(currentValues);
+        }, currentConfig.autoSaveDelay);
+    }, []); // NO DEPENDENCIES - truly stable!
+    // Set single field value with validation
+    const setValue = useCallback((field, value, triggerSave = false) => {
+        setFields((prev) => {
+            const error = autoValidate ? getFieldError(field, value) : undefined;
+            const newFields = {
+                ...prev,
+                [field]: {
+                    value,
+                    isValid: !error,
+                    error,
+                    touched: true,
+                },
+            };
+            // Reset state when country changes
+            if (field === 'country') {
+                newFields.state = createDefaultField('');
+            }
+            return newFields;
+        });
+        // Handle address input value for Google Places
+        if (field === 'address1') {
+            setAddressInputValue(value);
+        }
+        // Only trigger auto-save when explicitly requested (on blur, not on every keystroke)
+        if (triggerSave) {
+            triggerFieldsChange();
+        }
+    }, [autoValidate, getFieldError, triggerFieldsChange]);
+    // Set multiple field values
+    const setValues = useCallback((values) => {
+        setFields((prev) => {
+            const newFields = { ...prev };
+            Object.entries(values).forEach(([key, value]) => {
+                const field = key;
+                const error = autoValidate ? getFieldError(field, value || '') : undefined;
+                newFields[field] = {
+                    value: value || '',
+                    isValid: !error,
+                    error,
+                    touched: true,
+                };
+            });
+            // Reset state if country changed
+            if (values.country !== undefined) {
+                newFields.state = createDefaultField(values.state || '');
+            }
+            return newFields;
+        });
+        // Update address input value if address1 was changed
+        if (values.address1 !== undefined) {
+            setAddressInputValue(values.address1);
+        }
+        // Trigger debounced callback
+        triggerFieldsChange();
+    }, [autoValidate, getFieldError, triggerFieldsChange]);
+    // Get single field value
+    const getValue = useCallback((field) => {
+        return fields[field].value;
+    }, [fields]);
+    // Get all field values
+    const getValues = useCallback(() => {
+        return {
+            firstName: fields.firstName.value,
+            lastName: fields.lastName.value,
+            email: fields.email.value,
+            phone: fields.phone.value,
+            country: fields.country.value,
+            address1: fields.address1.value,
+            address2: fields.address2.value,
+            city: fields.city.value,
+            state: fields.state.value,
+            postal: fields.postal.value,
+        };
+    }, [fields]);
+    // Reset form
+    const reset = useCallback(() => {
+        setFields(createDefaultFormData());
+        setAddressInputValue('');
+    }, []);
+    // Optimized field change handler factory
+    const handleFieldChange = useCallback((field) => {
+        return (value) => setValue(field, value);
+    }, [setValue]);
+    // Optimized field blur handler factory
+    const handleFieldBlur = useCallback((field) => {
+        return () => {
+            if (!autoValidate) {
+                setFields((prev) => {
+                    const value = prev[field].value;
+                    const error = getFieldError(field, value);
+                    return {
+                        ...prev,
+                        [field]: {
+                            ...prev[field],
+                            isValid: !error,
+                            error,
+                            touched: true,
+                        },
+                    };
+                });
+            }
+        };
+    }, [autoValidate, getFieldError]);
+    // Google Places autocomplete setup - we'll return the ref for manual connection
+    const placesConfig = useMemo(() => ({
+        apiKey: googlePlacesApiKey,
+        onPlaceSelected: (place) => {
+            if (!place.geometry || !enableGooglePlaces)
+                return;
+            const addressComponents = place.address_components || [];
+            const newValues = {};
+            addressComponents.forEach((component) => {
+                const types = component.types;
+                if (types.includes('street_number')) {
+                    newValues.address1 = `${component.long_name} ${newValues.address1 || ''}`.trim();
+                }
+                else if (types.includes('route')) {
+                    newValues.address1 = `${newValues.address1 || ''} ${component.long_name}`.trim();
+                }
+                else if (types.includes('locality')) {
+                    newValues.city = component.long_name;
+                }
+                else if (types.includes('administrative_area_level_1')) {
+                    newValues.state = component.short_name;
+                }
+                else if (types.includes('country')) {
+                    newValues.country = component.short_name;
+                }
+                else if (types.includes('postal_code')) {
+                    newValues.postal = component.long_name;
+                }
+            });
+            // Only update if country is in restrictions (if any)
+            if (newValues.country && countryRestrictions.length > 0) {
+                if (!countryRestrictions.includes(newValues.country)) {
+                    console.warn(`Google Places returned country ${newValues.country} which is not in restrictions`);
+                    return;
+                }
+            }
+            setValues(newValues);
+        },
+        options: {
+            types: ['address'],
+            ...(countryRestrictions.length > 0 && {
+                componentRestrictions: { country: countryRestrictions },
+            }),
+        },
+    }), [googlePlacesApiKey, enableGooglePlaces, countryRestrictions, setValues]);
+    // Use the Google Places hook - always call the hook to avoid conditional hook calls
+    const googlePlacesHook = usePlacesWidget(enableGooglePlaces
+        ? placesConfig
+        : {
+            apiKey: '',
+            onPlaceSelected: () => {
+                // No-op when Google Places is disabled
+            },
+            options: {},
+        });
+    // Cleanup debounce timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+            }
+        };
+    }, []);
+    return {
+        fields,
+        setValue,
+        setValues,
+        getValue,
+        getValues,
+        validateField,
+        validateAll,
+        isValid,
+        reset,
+        countries,
+        states,
+        getStatesForCountry: getStatesForCountryFn,
+        addressRef: enableGooglePlaces ? (googlePlacesHook.ref ?? addressRef) : addressRef,
+        addressInputValue,
+        setAddressInputValue,
+        handleFieldChange,
+        handleFieldBlur,
+    };
+};

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

@@ -0,0 +1,69 @@
+declare global {
+    interface Window {
+        google?: {
+            maps?: {
+                places?: {
+                    AutocompleteService: new () => any;
+                    PlacesService: new (map: any) => any;
+                    PlacesServiceStatus: {
+                        OK: string;
+                        ZERO_RESULTS: string;
+                    };
+                };
+                Map: new (element: HTMLElement) => any;
+            };
+        };
+    }
+}
+export interface GooglePrediction {
+    place_id: string;
+    description: string;
+    structured_formatting?: {
+        main_text: string;
+        secondary_text: string;
+    };
+}
+export interface GoogleAddressComponent {
+    long_name: string;
+    short_name: string;
+    types: string[];
+}
+export interface GooglePlaceDetails {
+    address_components: GoogleAddressComponent[];
+    formatted_address: string;
+}
+export interface ExtractedAddress {
+    streetNumber: string;
+    route: string;
+    locality: string;
+    administrativeAreaLevel1: string;
+    administrativeAreaLevel1Long: string;
+    country: string;
+    postalCode: string;
+}
+export interface UseGoogleAutocompleteOptions {
+    apiKey: string;
+    libraries?: string[];
+    version?: string;
+    language?: string;
+    region?: string;
+}
+export interface UseGoogleAutocompleteResult {
+    predictions: GooglePrediction[];
+    isLoading: boolean;
+    isScriptLoaded: boolean;
+    searchPlaces: (input: string, countryRestriction?: string) => void;
+    getPlaceDetails: (placeId: string) => Promise<GooglePlaceDetails | null>;
+    extractAddressComponents: (place: GooglePlaceDetails) => ExtractedAddress;
+    clearPredictions: () => void;
+}
+/**
+ * React hook for Google Places Autocomplete with automatic script injection
+ * Automatically loads the Google Maps JavaScript API with Places library
+ */
+export declare function useGoogleAutocomplete(options: UseGoogleAutocompleteOptions): UseGoogleAutocompleteResult;
+/**
+ * Hook to check if Google Maps API is loaded
+ * @deprecated Use useGoogleAutocomplete with isScriptLoaded instead
+ */
+export declare function useGoogleMapsLoaded(): boolean;

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;
+}