@tagadapay/plugin-sdk 2.1.2 → 2.2.0

package/dist/react/hooks/useAddress.js

@@ -1,557 +0,0 @@
-import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
-import { usePlacesWidget } from 'react-google-autocomplete';
-// Import the comprehensive countries and states data
-import { countries as COUNTRIES_DATA, states as STATES_DATA } from '../../data/countries';
-// Countries without state fields
-const COUNTRIES_WITHOUT_STATE_FIELD = [
-    'VA',
-    'MC',
-    'SM',
-    'LI',
-    'LU',
-    'MT',
-    'SG',
-    'IS',
-    'EE',
-    'LV',
-    'LT',
-    'SI',
-    'SK',
-    'ME',
-    'AL',
-    'XK',
-    'MK',
-];
-// Default validation rules
-const defaultValidation = {
-    firstName: (value) => (value.trim() ? undefined : 'First name is required'),
-    lastName: (value) => (value.trim() ? undefined : 'Last name is required'),
-    email: (value) => {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-        if (!value.trim())
-            return 'Email is required';
-        if (!emailRegex.test(value))
-            return 'Valid email is required';
-        return undefined;
-    },
-    phone: (value) => (value.trim() ? undefined : 'Phone number is required'),
-    country: (value) => (value.trim() ? undefined : 'Country is required'),
-    address1: (value) => (value.trim() ? undefined : 'Address is required'),
-    address2: () => undefined, // Optional field
-    city: (value) => (value.trim() ? undefined : 'City is required'),
-    state: (value) => (value.trim() ? undefined : 'State/Province is required'),
-    postal: (value) => (value.trim() ? undefined : 'Zip/Postal code is required'),
-};
-// Map Google Places state names to state codes
-const mapGoogleStateToStateCode = (countryCode, stateName) => {
-    const matchingState = STATES_DATA.find((state) => state.country_code === countryCode &&
-        (state.state_name === stateName || state.state_code === stateName));
-    return matchingState?.state_code || stateName;
-};
-export function useAddress(options = {}) {
-    const { autoValidate = false, enableGooglePlaces = false, googlePlacesApiKey, initialValues = {}, validation = {}, countryRestrictions = [], onFieldsChange, debounceConfig = {}, } = options;
-    // Extract debounce configuration with defaults
-    const { manualInputDelay = 1500, googlePlacesDelay = 300, enabled: debounceEnabled = true, } = debounceConfig;
-    // Combine default and custom validation
-    const validationRules = { ...defaultValidation, ...validation };
-    // Initialize form fields
-    const [fields, setFields] = useState(() => {
-        const initialFields = {};
-        const fieldNames = [
-            'firstName',
-            'lastName',
-            'email',
-            'phone',
-            'country',
-            'address1',
-            'address2',
-            'city',
-            'state',
-            'postal',
-        ];
-        fieldNames.forEach((field) => {
-            const value = initialValues[field] || '';
-            // Don't show errors on initial load, even with autoValidate
-            initialFields[field] = {
-                value,
-                isValid: true, // Start as valid to avoid showing errors on first load
-                error: undefined, // No errors on initial load
-                touched: false, // Mark as untouched initially
-            };
-        });
-        return initialFields;
-    });
-    // Google Places integration
-    const [isAddressSelected, setIsAddressSelected] = useState(false);
-    const [addressInputValue, setAddressInputValue] = useState(fields.address1.value);
-    // Transform countries data to our format
-    const countries = useMemo(() => {
-        let countryList = COUNTRIES_DATA.map((country) => ({
-            code: country['alpha-2'],
-            name: country.name,
-        }));
-        // Apply country restrictions if provided
-        if (countryRestrictions.length > 0) {
-            countryList = countryList.filter((country) => countryRestrictions.includes(country.code));
-        }
-        return countryList.sort((a, b) => a.name.localeCompare(b.name));
-    }, [countryRestrictions]);
-    // Transform states data to our format and filter by selected country
-    const states = useMemo(() => {
-        if (!fields.country.value)
-            return [];
-        return STATES_DATA.filter((state) => state.country_code === fields.country.value && state.country_code) // Filter out undefined country_code
-            .map((state) => ({
-            code: state.state_code || '',
-            name: state.state_name,
-            countryCode: state.country_code, // Use non-null assertion since we filtered above
-        }))
-            .sort((a, b) => a.name.localeCompare(b.name));
-    }, [fields.country.value]);
-    // Auto-save state management
-    const [autoSaveTimeout, setAutoSaveTimeout] = useState(null);
-    const [isGooglePlacesUpdating, setIsGooglePlacesUpdating] = useState(false);
-    // Use ref to always access current fields (avoids stale closure issues)
-    const fieldsRef = useRef(fields);
-    useEffect(() => {
-        fieldsRef.current = fields;
-    }, [fields]);
-    // Smart auto-save trigger with configurable debouncing
-    const triggerAutoSave = useCallback((type = 'manual') => {
-        if (!onFieldsChange || !debounceEnabled)
-            return;
-        // Clear existing timeout
-        if (autoSaveTimeout) {
-            clearTimeout(autoSaveTimeout);
-        }
-        // Determine delay based on trigger type
-        const delay = type === 'googlePlaces' ? googlePlacesDelay : manualInputDelay;
-        console.log(`📝 useAddress: Scheduling auto-save (${type}) in ${delay}ms`);
-        // Set new timeout with appropriate debounce
-        const timeoutId = setTimeout(() => {
-            // Get current address data using ref (always fresh, no stale closures)
-            const currentFields = fieldsRef.current;
-            const addressData = {
-                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,
-            };
-            console.log(`🔄 useAddress: Auto-save triggered (${type}) with data:`, addressData);
-            // Call the auto-save callback directly (no React state setter involved)
-            onFieldsChange(addressData);
-            setAutoSaveTimeout(null);
-        }, delay);
-        setAutoSaveTimeout(timeoutId);
-    }, [onFieldsChange, autoSaveTimeout, debounceEnabled, manualInputDelay, googlePlacesDelay]);
-    // Handle Google Places selection
-    const handlePlaceSelected = useCallback((place) => {
-        // Clear any pending auto-saves and mark Google Places as updating
-        if (autoSaveTimeout) {
-            clearTimeout(autoSaveTimeout);
-            setAutoSaveTimeout(null);
-        }
-        setIsGooglePlacesUpdating(true);
-        let streetNumber = '';
-        let route = '';
-        let locality = '';
-        let postal_town = '';
-        let newCountry = '';
-        let stateValue = '';
-        console.log('🌍 Google Places selected:', place);
-        for (const component of place.address_components || []) {
-            const componentType = component.types[0];
-            switch (componentType) {
-                case 'street_number':
-                    streetNumber = component.long_name;
-                    break;
-                case 'route':
-                    route = component.long_name;
-                    break;
-                case 'locality':
-                    locality = component.long_name;
-                    break;
-                case 'postal_town':
-                    postal_town = component.long_name;
-                    if (postal_town !== locality) {
-                        // Prefer postal_town over locality for city
-                        locality = postal_town;
-                    }
-                    break;
-                case 'postal_code':
-                    break; // We'll handle this separately
-                case 'postal_code_prefix':
-                    break; // We'll handle this separately
-                case 'administrative_area_level_1':
-                    stateValue = component.short_name;
-                    break;
-                case 'country':
-                    newCountry = component.short_name;
-                    break;
-            }
-        }
-        // Set address first
-        const addressValue = `${streetNumber} ${route}`.trim();
-        setAddressInputValue(addressValue);
-        // Helper function to update field with validation to clear errors
-        const updateFieldWithValidation = (field, value) => {
-            const error = validationRules[field]?.(value);
-            return {
-                value,
-                isValid: !error,
-                error,
-                touched: true, // Mark as touched when Google Places fills the field
-            };
-        };
-        console.log('🔄 Updating fields from Google Places:', {
-            address1: addressValue,
-            city: locality,
-            country: newCountry,
-            stateValue,
-        });
-        // Use requestAnimationFrame to ensure updates happen in the next frame
-        requestAnimationFrame(() => {
-            // Update fields with validation to clear any existing errors
-            setFields((prev) => ({
-                ...prev,
-                address1: updateFieldWithValidation('address1', String(addressValue)),
-                city: updateFieldWithValidation('city', String(locality)),
-                country: updateFieldWithValidation('country', String(newCountry)),
-            }));
-            // Handle postal code separately with validation
-            const postalComponent = place.address_components?.find((comp) => Array.isArray(comp.types) &&
-                (comp.types.includes('postal_code') ||
-                    comp.types.includes('postal_code_prefix')));
-            if (postalComponent) {
-                setFields((prev) => ({
-                    ...prev,
-                    postal: updateFieldWithValidation('postal', String(postalComponent.long_name)),
-                }));
-            }
-            // Handle state after country is set (with small delay to ensure country is processed first)
-            if (newCountry && stateValue) {
-                setTimeout(() => {
-                    const mappedStateValue = mapGoogleStateToStateCode(newCountry, stateValue);
-                    console.log('🗺️ Mapped state value:', mappedStateValue);
-                    setFields((prev) => ({
-                        ...prev,
-                        state: updateFieldWithValidation('state', String(mappedStateValue || stateValue)),
-                    }));
-                    console.log('✅ Google Places update completed');
-                    // Mark updating as complete and trigger single auto-save
-                    setIsGooglePlacesUpdating(false);
-                    setTimeout(() => {
-                        console.log('🌍 useAddress: Google Places completed - triggering auto-save');
-                        triggerAutoSave('googlePlaces'); // Use Google Places specific timing
-                    }, 200); // Extra delay to ensure all state updates are complete
-                }, 50); // Small delay to ensure country state processing
-            }
-            else {
-                // Mark updating as complete and trigger auto-save (for countries without states)
-                setIsGooglePlacesUpdating(false);
-                setTimeout(() => {
-                    console.log('🌍 useAddress: Google Places completed (no state) - triggering auto-save');
-                    triggerAutoSave('googlePlaces'); // Use Google Places specific timing
-                }, 200);
-            }
-            setIsAddressSelected(true);
-        });
-    }, [validationRules, triggerAutoSave, autoSaveTimeout]);
-    // Memoize Google Places options to prevent re-initialization
-    const placesOptions = useMemo(() => ({
-        types: ['address'],
-        componentRestrictions: countryRestrictions.length > 0 ? { country: countryRestrictions } : undefined,
-    }), [countryRestrictions]);
-    // Setup Google Places autocomplete
-    const { ref: placesRef } = usePlacesWidget({
-        apiKey: googlePlacesApiKey || process.env.NEXT_PUBLIC_GOOGLE_AUTOCOMPLETE_API_KEY,
-        onPlaceSelected: handlePlaceSelected,
-        options: placesOptions,
-    });
-    // Custom styles for Google Places dropdown
-    useEffect(() => {
-        if (enableGooglePlaces && !document.getElementById('google-places-custom-styles')) {
-            const autocompleteStyles = `
-        .pac-container {
-          border-radius: 8px;
-          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-          border: 1px solid #e2e8f0;
-          margin-top: 4px;
-          font-family: inherit;
-          z-index: 9999;
-        }
-        .pac-item {
-          padding: 10px 12px;
-          font-size: 14px;
-          cursor: pointer;
-          border-top: 1px solid #f3f4f6;
-        }
-        .pac-item:first-child { border-top: none; }
-        .pac-item:hover { background-color: #f8fafc; }
-        .pac-item-selected, .pac-item-selected:hover { background-color: #eef2ff; }
-        .pac-matched { font-weight: 600; }
-      `;
-            const styleElement = document.createElement('style');
-            styleElement.id = 'google-places-custom-styles';
-            styleElement.textContent = autocompleteStyles;
-            document.head.appendChild(styleElement);
-        }
-    }, [enableGooglePlaces]);
-    // Handle immediate form field updates (no debounce for responsive typing)
-    const handleAddressChange = useCallback((event) => {
-        const value = event.target.value;
-        // Update local state immediately for responsive UI
-        setAddressInputValue(value);
-        // Update form field immediately (no debounce) and mark as touched
-        setFields((prev) => ({
-            ...prev,
-            address1: { ...prev.address1, value, touched: true },
-        }));
-        // Reset address selection flag when user types manually
-        if (isAddressSelected) {
-            setIsAddressSelected(false);
-        }
-    }, [isAddressSelected]);
-    // Sync addressInputValue with external changes
-    useEffect(() => {
-        const currentAddress = fields.address1.value;
-        if (currentAddress !== addressInputValue) {
-            setAddressInputValue(currentAddress);
-        }
-    }, [fields.address1.value, addressInputValue]);
-    // Auto-clear state when country changes to one without states
-    useEffect(() => {
-        const currentCountry = fields.country.value;
-        if (currentCountry && COUNTRIES_WITHOUT_STATE_FIELD.includes(currentCountry)) {
-            setFields((prev) => ({
-                ...prev,
-                state: { ...prev.state, value: '' },
-            }));
-        }
-    }, [fields.country.value]);
-    // Form methods
-    const setValue = useCallback((field, value) => {
-        setFields((prev) => {
-            // Only show validation errors for touched fields when autoValidate is enabled
-            const shouldValidate = autoValidate && prev[field].touched;
-            const error = shouldValidate ? validationRules[field]?.(value) : undefined;
-            const newFields = {
-                ...prev,
-                [field]: {
-                    value,
-                    isValid: !error,
-                    error,
-                    touched: true, // Mark field as touched when user interacts with it
-                },
-            };
-            return newFields;
-        });
-        // Special handling for address field with Google Places
-        if (field === 'address1') {
-            setAddressInputValue(value);
-        }
-        // Reset state when country changes
-        if (field === 'country') {
-            setFields((prev) => ({
-                ...prev,
-                state: { ...prev.state, value: '', error: undefined, isValid: true, touched: false },
-            }));
-        }
-        // Trigger auto-save after field update with longer debounce for manual typing
-        triggerAutoSave('manual'); // Use manual input timing
-    }, [autoValidate, validationRules, triggerAutoSave]);
-    const setValues = useCallback((values) => {
-        setFields((prev) => {
-            const newFields = { ...prev };
-            Object.entries(values).forEach(([key, value]) => {
-                const field = key;
-                // Only validate if field was previously touched or if we're setting a non-empty value
-                const hasNonEmptyValue = value && value.trim() !== '';
-                const shouldValidate = autoValidate && (prev[field].touched || hasNonEmptyValue);
-                const error = shouldValidate ? validationRules[field]?.(value || '') : undefined;
-                newFields[field] = {
-                    value: value || '',
-                    isValid: !error,
-                    error,
-                    touched: prev[field].touched || !!hasNonEmptyValue, // Mark as touched if setting a non-empty value
-                };
-            });
-            return newFields;
-        });
-    }, [autoValidate, validationRules]);
-    const resetField = useCallback((field) => {
-        setFields((prev) => ({
-            ...prev,
-            [field]: {
-                value: '',
-                isValid: true,
-                error: undefined,
-                touched: false,
-            },
-        }));
-    }, []);
-    const resetForm = useCallback(() => {
-        const resetFields = {};
-        const fieldNames = [
-            'firstName',
-            'lastName',
-            'email',
-            'phone',
-            'country',
-            'address1',
-            'address2',
-            'city',
-            'state',
-            'postal',
-        ];
-        fieldNames.forEach((field) => {
-            resetFields[field] = {
-                value: '',
-                isValid: true,
-                error: undefined,
-                touched: false,
-            };
-        });
-        setFields(resetFields);
-        setAddressInputValue('');
-        setIsAddressSelected(false);
-    }, []);
-    // Validate specific field
-    const validateField = useCallback((fieldName) => {
-        const value = fields[fieldName].value;
-        const rule = validationRules[fieldName];
-        const error = rule ? rule(value) : undefined;
-        setFields((prev) => ({
-            ...prev,
-            [fieldName]: {
-                ...prev[fieldName],
-                isValid: !error,
-                error,
-                touched: true, // Mark as touched when explicitly validating
-            },
-        }));
-        return !error;
-    }, [fields, validationRules]);
-    // Validate all fields
-    const validateAll = useCallback(() => {
-        const fieldNames = [
-            'firstName',
-            'lastName',
-            'email',
-            'phone',
-            'country',
-            'address1',
-            'address2',
-            'city',
-            'state',
-            'postal',
-        ];
-        let isValid = true;
-        const newFields = { ...fields };
-        fieldNames.forEach((key) => {
-            const field = key;
-            const value = fields[field].value;
-            // Skip state validation for countries without states
-            if (field === 'state' &&
-                fields.country.value &&
-                COUNTRIES_WITHOUT_STATE_FIELD.includes(fields.country.value)) {
-                newFields[field] = {
-                    ...newFields[field],
-                    isValid: true,
-                    error: undefined,
-                    touched: true,
-                };
-                return;
-            }
-            const error = validationRules[field]?.(value);
-            newFields[field] = {
-                ...newFields[field],
-                isValid: !error,
-                error,
-                touched: true, // Mark all fields as touched when validating all
-            };
-            if (error)
-                isValid = false;
-        });
-        setFields(newFields);
-        return isValid;
-    }, [fields, validationRules]);
-    // Check if all required fields are valid
-    const isValid = useCallback(() => {
-        const { address1, city, state, postal, country } = fields;
-        return address1.isValid && city.isValid && state.isValid && postal.isValid && country.isValid;
-    }, [fields]);
-    // Get form data
-    const getFormData = 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]);
-    const getFormattedAddress = useCallback(() => {
-        const { address1, city, state, postal, country } = fields;
-        const parts = [
-            address1.value,
-            city.value,
-            state.value,
-            postal.value,
-            countries.find((c) => c.code === country.value)?.name || country.value,
-        ].filter(Boolean);
-        return parts.join(', ');
-    }, [fields, countries]);
-    const getAddressObject = 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]);
-    // Cleanup auto-save timeout on unmount
-    useEffect(() => {
-        return () => {
-            if (autoSaveTimeout) {
-                clearTimeout(autoSaveTimeout);
-            }
-        };
-    }, [autoSaveTimeout]);
-    return {
-        fields,
-        countries,
-        states,
-        setValue,
-        setValues,
-        resetField,
-        resetForm,
-        validate: validateField,
-        validateAll,
-        getFormattedAddress,
-        getAddressObject,
-        ...(enableGooglePlaces && {
-            addressRef: placesRef,
-            addressInputValue,
-            handleAddressChange,
-            isAddressSelected,
-        }),
-    };
-}

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

@@ -1,53 +0,0 @@
-import { type Country as ISO3166Country, type State as ISO3166State } from '../../data/iso3166';
-export type Country = ISO3166Country;
-export type State = ISO3166State;
-export interface AddressField {
-    value: string;
-    isValid: boolean;
-    error?: string;
-    touched?: boolean;
-}
-export interface AddressData {
-    firstName: string;
-    lastName: string;
-    email: string;
-    phone: string;
-    country: string;
-    address1: string;
-    address2: string;
-    city: string;
-    state: string;
-    postal: string;
-}
-export interface UseAddressV2Config {
-    autoValidate?: boolean;
-    enableGooglePlaces?: boolean;
-    googlePlacesApiKey?: string;
-    countryRestrictions?: string[];
-    onFieldsChange?: (data: AddressData) => void;
-    debounceConfig?: {
-        autoSaveDelay?: number;
-        enabled?: boolean;
-    };
-    initialValues?: Partial<AddressData>;
-}
-export interface UseAddressV2Return {
-    fields: Record<keyof AddressData, AddressField>;
-    setValue: (field: keyof AddressData, value: string) => void;
-    setValues: (values: Partial<AddressData>) => void;
-    getValue: (field: keyof AddressData) => string;
-    getValues: () => AddressData;
-    validateField: (field: keyof AddressData) => boolean;
-    validateAll: () => boolean;
-    isValid: boolean;
-    reset: () => void;
-    countries: Country[];
-    states: State[];
-    getStatesForCountry: (countryCode: string) => State[];
-    addressRef: React.RefObject<HTMLInputElement | null>;
-    addressInputValue: string;
-    setAddressInputValue: (value: string) => void;
-    handleFieldChange: (field: keyof AddressData) => (value: string) => void;
-    handleFieldBlur: (field: keyof AddressData) => () => void;
-}
-export declare const useAddressV2: (config?: UseAddressV2Config) => UseAddressV2Return;