@tagadapay/plugin-sdk 1.0.11 → 1.0.13

package/dist/react/components/AddressForm.example.d.ts

@@ -0,0 +1 @@
+export declare const AddressFormExample: () => import("react/jsx-runtime").JSX.Element;

package/dist/react/components/AddressForm.example.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAddress } from '../hooks/useAddress';
+// Basic Address Form Example
+export const AddressFormExample = () => {
+    const { fields, countries, states, setValue, validateAll, getAddressObject, getFormattedAddress } = useAddress({
+        autoValidate: true,
+        initialValues: {
+            firstName: 'John',
+            lastName: 'Doe',
+            country: 'US',
+        },
+    });
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (validateAll()) {
+            const addressData = getAddressObject();
+            console.log('Address submitted:', addressData);
+            console.log('Formatted address:', getFormattedAddress());
+        }
+        else {
+            console.log('Form has validation errors');
+        }
+    };
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "mx-auto max-w-md space-y-4 p-6", children: [_jsx("h2", { className: "mb-4 text-xl font-bold", children: "Address Form" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "First Name" }), _jsx("input", { type: "text", value: fields.firstName.value, onChange: (e) => setValue('firstName', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.firstName.error ? 'border-red-500' : 'border-gray-300'}` }), fields.firstName.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.firstName.error })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Last Name" }), _jsx("input", { type: "text", value: fields.lastName.value, onChange: (e) => setValue('lastName', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.lastName.error ? 'border-red-500' : 'border-gray-300'}` }), fields.lastName.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.lastName.error })] })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Email" }), _jsx("input", { type: "email", value: fields.email.value, onChange: (e) => setValue('email', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.email.error ? 'border-red-500' : 'border-gray-300'}` }), fields.email.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.email.error })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Phone" }), _jsx("input", { type: "tel", value: fields.phone.value, onChange: (e) => setValue('phone', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.phone.error ? 'border-red-500' : 'border-gray-300'}` }), fields.phone.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.phone.error })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Address Line 1" }), _jsx("input", { type: "text", value: fields.address1.value, onChange: (e) => setValue('address1', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.address1.error ? 'border-red-500' : 'border-gray-300'}` }), fields.address1.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.address1.error })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Address Line 2 (Optional)" }), _jsx("input", { type: "text", value: fields.address2.value, onChange: (e) => setValue('address2', e.target.value), className: "w-full rounded-md border border-gray-300 px-3 py-2" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "City" }), _jsx("input", { type: "text", value: fields.city.value, onChange: (e) => setValue('city', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.city.error ? 'border-red-500' : 'border-gray-300'}` }), fields.city.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.city.error })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1 block text-sm font-medium", children: "Postal Code" }), _jsx("input", { type: "text", value: fields.postal.value, onChange: (e) => setValue('postal', e.target.value), className: `w-full rounded-md border px-3 py-2 ${fields.postal.error ? 'border-red-500' : 'border-gray-300'}` }), fields.postal.error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: fields.postal.error })] })] }), _jsxs("div", { className: "rounded-md bg-gray-100 p-4", children: [_jsx("h3", { className: "mb-2 text-sm font-semibold", children: "Form Data:" }), _jsx("pre", { className: "text-xs", children: JSON.stringify(getAddressObject(), null, 2) })] }), _jsxs("div", { className: "text-xs text-gray-500", children: [_jsxs("p", { children: ["Available Countries: ", countries.length] }), _jsxs("p", { children: ["Available States for ", fields.country.value, ": ", states.length] }), _jsxs("p", { children: ["Form Valid: ", validateAll() ? 'Yes' : 'No'] })] }), _jsx("button", { type: "button", onClick: () => {
+                    if (validateAll()) {
+                        alert('Form is valid! Data: ' + JSON.stringify(getAddressObject()));
+                    }
+                    else {
+                        alert('Please fix the errors in the form');
+                    }
+                }, className: "w-full rounded-md bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 disabled:opacity-50", children: "Submit" })] }));
+};

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

@@ -0,0 +1,58 @@
+export interface Country {
+    code: string;
+    name: string;
+}
+export interface State {
+    code: string;
+    name: string;
+    countryCode: string;
+}
+export interface AddressField {
+    value: string;
+    isValid: boolean;
+    error?: string;
+}
+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 UseAddressOptions {
+    autoValidate?: boolean;
+    enableGooglePlaces?: boolean;
+    googlePlacesApiKey?: string;
+    initialValues?: Partial<AddressData>;
+    validation?: Partial<Record<keyof AddressData, (value: string) => string | undefined>>;
+    countryRestrictions?: string[];
+    onFieldsChange?: (addressData: AddressData) => void;
+    debounceConfig?: {
+        manualInputDelay?: number;
+        googlePlacesDelay?: number;
+        enabled?: boolean;
+    };
+}
+export interface UseAddressResult {
+    fields: Record<keyof AddressData, AddressField>;
+    countries: Country[];
+    states: State[];
+    setValue: (field: keyof AddressData, value: string) => void;
+    setValues: (values: Partial<AddressData>) => void;
+    resetField: (field: keyof AddressData) => void;
+    resetForm: () => void;
+    validate: (field: keyof AddressData) => boolean;
+    validateAll: () => boolean;
+    getFormattedAddress: () => string;
+    getAddressObject: () => AddressData;
+    addressRef?: React.MutableRefObject<HTMLInputElement | null>;
+    addressInputValue?: string;
+    handleAddressChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    isAddressSelected?: boolean;
+}
+export declare function useAddress(options?: UseAddressOptions): UseAddressResult;

package/dist/react/hooks/useAddress.js

@@ -0,0 +1,537 @@
+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] || '';
+            initialFields[field] = {
+                value,
+                isValid: !autoValidate || !validationRules[field]?.(value),
+                error: autoValidate ? validationRules[field]?.(value) : undefined,
+            };
+        });
+        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,
+            };
+        };
+        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)
+        setFields((prev) => ({
+            ...prev,
+            address1: { ...prev.address1, value },
+        }));
+        // Reset address selection flag when user types manually
+        if (isAddressSelected) {
+            setIsAddressSelected(false);
+        }
+        // ✅ IMPORTANT: Trigger auto-save for manual address typing
+        // This ensures that manual typing (without Google Places selection) is saved
+        triggerAutoSave('manual');
+    }, [isAddressSelected, triggerAutoSave]);
+    // 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) => {
+            const error = autoValidate ? validationRules[field]?.(value) : undefined;
+            const newFields = {
+                ...prev,
+                [field]: {
+                    value,
+                    isValid: !error,
+                    error,
+                },
+            };
+            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 },
+            }));
+        }
+        // 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;
+                const error = autoValidate ? validationRules[field]?.(value || '') : undefined;
+                newFields[field] = {
+                    value: value || '',
+                    isValid: !error,
+                    error,
+                };
+            });
+            return newFields;
+        });
+    }, [autoValidate, validationRules]);
+    const resetField = useCallback((field) => {
+        setFields((prev) => ({
+            ...prev,
+            [field]: {
+                value: '',
+                isValid: true,
+                error: undefined,
+            },
+        }));
+    }, []);
+    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,
+            };
+        });
+        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 },
+        }));
+        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 };
+                return;
+            }
+            const error = validationRules[field]?.(value);
+            newFields[field] = {
+                ...newFields[field],
+                isValid: !error,
+                error,
+            };
+            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/useCheckout.js

@@ -3,7 +3,7 @@ import { useTagadaContext } from '../providers/TagadaProvider';
 import { getCheckoutToken } from '../utils/urlUtils';
 import { useCurrency } from '../hooks/useCurrency';
 export function useCheckout(options = {}) {
-    const { apiService, updateCheckoutDebugData } = useTagadaContext();
+    const { apiService, updateCheckoutDebugData, refreshCoordinator } = useTagadaContext();
     const { code: currentCurrency } = useCurrency();
     const [checkout, setCheckout] = useState(null);
     const [isLoading, setIsLoading] = useState(false);
@@ -147,6 +147,13 @@ export function useCheckout(options = {}) {
         await getCheckout(currentCheckoutTokenRef.current);
         console.log('✅ [useCheckout] Refresh completed, debug data will be updated automatically');
     }, [getCheckout]);
+    // Register refresh function with coordinator and cleanup on unmount
+    useEffect(() => {
+        refreshCoordinator.registerCheckoutRefresh(refresh);
+        return () => {
+            refreshCoordinator.unregisterCheckoutRefresh();
+        };
+    }, [refresh, refreshCoordinator]);
     const updateAddress = useCallback(async (data) => {
         if (!checkout?.checkoutSession.id) {
             throw new Error('No checkout session available');
@@ -250,6 +257,8 @@ export function useCheckout(options = {}) {
             });
             if (response.success) {
                 await refresh();
+                // Notify other hooks that checkout data changed
+                await refreshCoordinator.notifyCheckoutChanged();
             }
             return response;
         }
@@ -257,7 +266,7 @@ export function useCheckout(options = {}) {
             const error = err instanceof Error ? err : new Error('Failed to update line items');
             throw error;
         }
-    }, [apiService, checkout?.checkoutSession.id, refresh]);
+    }, [apiService, checkout?.checkoutSession.id, refresh, refreshCoordinator]);
     const addLineItems = useCallback(async (lineItems) => {
         if (!checkout?.checkoutSession.id) {
             throw new Error('No checkout session available');