@tagadapay/plugin-sdk 1.0.13 → 1.0.14

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

@@ -11,6 +11,7 @@ export interface AddressField {
     value: string;
     isValid: boolean;
     error?: string;
+    touched?: boolean;
 }
 export interface AddressData {
     firstName: string;

package/dist/react/hooks/useAddress.js

@@ -71,10 +71,12 @@ export function useAddress(options = {}) {
         ];
         fieldNames.forEach((field) => {
             const value = initialValues[field] || '';
+            // Don't show errors on initial load, even with autoValidate
             initialFields[field] = {
                 value,
-                isValid: !autoValidate || !validationRules[field]?.(value),
-                error: autoValidate ? validationRules[field]?.(value) : undefined,
+                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;
@@ -204,6 +206,7 @@ export function useAddress(options = {}) {
                 value,
                 isValid: !error,
                 error,
+                touched: true, // Mark as touched when Google Places fills the field
             };
         };
         console.log('🔄 Updating fields from Google Places:', {
@@ -305,10 +308,10 @@ export function useAddress(options = {}) {
         const value = event.target.value;
         // Update local state immediately for responsive UI
         setAddressInputValue(value);
-        // Update form field immediately (no debounce)
+        // Update form field immediately (no debounce) and mark as touched
         setFields((prev) => ({
             ...prev,
-            address1: { ...prev.address1, value },
+            address1: { ...prev.address1, value, touched: true },
         }));
         // Reset address selection flag when user types manually
         if (isAddressSelected) {
@@ -338,13 +341,16 @@ export function useAddress(options = {}) {
     // Form methods
     const setValue = useCallback((field, value) => {
         setFields((prev) => {
-            const error = autoValidate ? validationRules[field]?.(value) : undefined;
+            // 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;
@@ -357,7 +363,7 @@ export function useAddress(options = {}) {
         if (field === 'country') {
             setFields((prev) => ({
                 ...prev,
-                state: { ...prev.state, value: '', error: undefined, isValid: true },
+                state: { ...prev.state, value: '', error: undefined, isValid: true, touched: false },
             }));
         }
         // Trigger auto-save after field update with longer debounce for manual typing
@@ -368,11 +374,15 @@ export function useAddress(options = {}) {
             const newFields = { ...prev };
             Object.entries(values).forEach(([key, value]) => {
                 const field = key;
-                const error = autoValidate ? validationRules[field]?.(value || '') : undefined;
+                // 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;
@@ -385,6 +395,7 @@ export function useAddress(options = {}) {
                 value: '',
                 isValid: true,
                 error: undefined,
+                touched: false,
             },
         }));
     }, []);
@@ -407,6 +418,7 @@ export function useAddress(options = {}) {
                 value: '',
                 isValid: true,
                 error: undefined,
+                touched: false,
             };
         });
         setFields(resetFields);
@@ -420,7 +432,12 @@ export function useAddress(options = {}) {
         const error = rule ? rule(value) : undefined;
         setFields((prev) => ({
             ...prev,
-            [fieldName]: { ...prev[fieldName], isValid: !error, error },
+            [fieldName]: {
+                ...prev[fieldName],
+                isValid: !error,
+                error,
+                touched: true, // Mark as touched when explicitly validating
+            },
         }));
         return !error;
     }, [fields, validationRules]);
@@ -447,7 +464,12 @@ export function useAddress(options = {}) {
             if (field === 'state' &&
                 fields.country.value &&
                 COUNTRIES_WITHOUT_STATE_FIELD.includes(fields.country.value)) {
-                newFields[field] = { ...newFields[field], isValid: true, error: undefined };
+                newFields[field] = {
+                    ...newFields[field],
+                    isValid: true,
+                    error: undefined,
+                    touched: true,
+                };
                 return;
             }
             const error = validationRules[field]?.(value);
@@ -455,6 +477,7 @@ export function useAddress(options = {}) {
                 ...newFields[field],
                 isValid: !error,
                 error,
+                touched: true, // Mark all fields as touched when validating all
             };
             if (error)
                 isValid = false;

package/package.json

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