@nuskin/address-lookup 1.0.1-pa-954.7 → 1.0.1

package/README.md

@@ -34,7 +34,7 @@ import AddressLookup, { COUNTRY_MAP } from '@nuskin/address-lookup'
 
 ```jsx
 import { useState } from 'react'
-import { AddressLookup } from '@nuskin/address-lookup'
+import AddressLookup from '@nuskin/address-lookup'
 
 export default function ShippingAddress() {
   const [validationRequestId, setValidationRequestId] = useState(0)
@@ -71,6 +71,7 @@ export default function ShippingAddress() {
 - `language?: string` (default: `'en'`)
 - `address?: object | null` initial form values
 - `requireValidation?: boolean` (default: `true`)
+- `showManualValidateButton?: boolean` (default: `false`)
 - `validationRequestId?: number` (default: `0`)
 - `strings?: object | null` optional label overrides
 
@@ -89,7 +90,8 @@ If passed, these labels are used instead of loading from Contentstack:
   emailLabel: 'Email',
   invalidEmail: 'Invalid email address.',
   fieldRequired: 'This field is required.',
-  invalidPostalCode: 'Invalid postal code.'
+  invalidPostalCode: 'Invalid postal code.',
+  rateLimited: 'Too many requests. Please wait a moment and try again.'
 }
 ```
 
@@ -105,6 +107,7 @@ If passed, these labels are used instead of loading from Contentstack:
   - emitted when user selects a verification candidate
 - `validation-request`
   - emitted when parent increments `validationRequestId`
+  - reports current status only; does not trigger verification API calls
 
 Common payload shape:
 
@@ -119,6 +122,7 @@ Common payload shape:
   isValidEmail?: boolean,
   status: {
     verification: 'unverified' | 'autocomplete' | 'verified',
+    needsValidation: boolean,
     completeness: 'complete' | 'incomplete',
     missingFields: string[],
     mode: 'autocomplete' | 'manual',
@@ -141,6 +145,10 @@ Common payload shape:
 ## Validation behavior
 
 - Required fields are country-specific (`COUNTRY_MAP[code].config.requiredFields`)
+- `status.needsValidation` is `true` when:
+  - `requireValidation=true`
+  - mode is `manual`
+  - address has not been verified yet
 - Required errors are shown when:
   - field loses focus, or
   - parent triggers validation via `validationRequestId`
@@ -153,6 +161,7 @@ Common payload shape:
   - `fieldRequired`
   - `invalidPostalCode`
   - `invalidEmail`
+  - `rateLimited`
 - Safe defaults are used when those validation strings are missing
 
 ## Autocomplete and manual mode
@@ -162,8 +171,10 @@ Common payload shape:
 - Typing in lookup creates a draft
 - Clicking outside while suggestions are open cancels draft and restores prior committed values
 - Manual mode:
-  - with `requireValidation=true`, user can run verification
+  - with `requireValidation=true`, user can run verification explicitly
   - with `requireValidation=false`, no verification API call is made
+  - parent `validationRequestId` returns current status but does not perform verification
+  - optional `showManualValidateButton` renders a compact `Validate Address` button next to the lookup field actions
 
 ## Localization
 
@@ -191,6 +202,7 @@ Common class names:
 - `.ns-address-lookup__field--with-error`
 - `.ns-address-lookup__label-row`
 - `.ns-address-lookup__label`
+- `.ns-address-lookup__actions`
 - `.ns-address-lookup__toggle`
 - `.ns-address-lookup__input`
 - `.ns-address-lookup__input--readonly`
@@ -201,11 +213,14 @@ Common class names:
 - `.ns-address-lookup__spinner`
 - `.ns-address-lookup__validation`
 - `.ns-address-lookup__button`
+- `.ns-address-lookup__button--compact`
 - `.ns-address-lookup__list`
 - `.ns-address-lookup__list--suggestions`
 - `.ns-address-lookup__list--validation`
+- `.ns-address-lookup__list--validation-inline`
 - `.ns-address-lookup__list-item`
 - `.ns-address-lookup__list-item--divided`
+- `.ns-address-lookup__list-button`
 - `.ns-address-lookup__list-title`
 - `.ns-address-lookup__list-subtitle`
 
@@ -218,6 +233,8 @@ Supported CSS variables on `.ns-address-lookup`:
 - `--nsal-error-color`
 - `--nsal-surface-color`
 - `--nsal-disabled-surface`
+- `--nsal-validation-surface`
+- `--nsal-validation-border`
 - `--nsal-shadow`
 - `--nsal-radius`
 - `--nsal-field-gap`

package/dist/AddressLookup.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 require("./styles/addressLookup.css");
 var _SmartyUSResults = _interopRequireDefault(require("./components/SmartyUSResults"));
 var _SmartyIntlResults = _interopRequireDefault(require("./components/SmartyIntlResults"));
+var _componentPropTypes = require("./utils/componentPropTypes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const AddressLookup = ({
@@ -14,6 +16,7 @@ const AddressLookup = ({
   country = 'US',
   address = null,
   requireValidation = true,
+  showManualValidateButton = false,
   validationRequestId = 0,
   language = 'en',
   strings = null
@@ -25,6 +28,7 @@ const AddressLookup = ({
       onSelect: onAddressSelect,
       initialAddress: address,
       requireValidation: requireValidation,
+      showManualValidateButton: showManualValidateButton,
       validationRequestId: validationRequestId,
       language: language,
       strings: strings
@@ -33,11 +37,22 @@ const AddressLookup = ({
       onSelect: onAddressSelect,
       initialAddress: address,
       requireValidation: requireValidation,
+      showManualValidateButton: showManualValidateButton,
       validationRequestId: validationRequestId,
       language: language,
       strings: strings
     })
   });
 };
+AddressLookup.propTypes = {
+  onAddressSelect: _propTypes.default.func,
+  country: _propTypes.default.string,
+  address: _componentPropTypes.addressPropType,
+  requireValidation: _propTypes.default.bool,
+  showManualValidateButton: _propTypes.default.bool,
+  validationRequestId: _propTypes.default.number,
+  language: _propTypes.default.string,
+  strings: _componentPropTypes.labelStringsPropType
+};
 var _default = exports.default = AddressLookup;
 //# sourceMappingURL=AddressLookup.js.map

package/dist/AddressLookup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddressLookup.js","names":["require","_SmartyUSResults","_interopRequireDefault","_SmartyIntlResults","_jsxRuntime","e","__esModule","default","AddressLookup","onAddressSelect","country","address","requireValidation","validationRequestId","language","strings","isUS","jsx","className","children","onSelect","initialAddress","countryCode","_default","exports"],"sources":["../src/AddressLookup.jsx"],"sourcesContent":["import './styles/addressLookup.css';\nimport SmartyUSResults from './components/SmartyUSResults';\nimport SmartyIntlResults from './components/SmartyIntlResults';\n\nconst AddressLookup = ({ \n  onAddressSelect, \n  country = 'US',\n  address = null,\n  requireValidation = true,\n  validationRequestId = 0,\n  language = 'en',\n  strings = null\n}) => {\n  const isUS = country === 'US';\n\n  return (\n    <div className='ns-address-lookup'>\n      {isUS ? (\n        <SmartyUSResults \n          onSelect={onAddressSelect}\n          initialAddress={address}\n          requireValidation={requireValidation}\n          validationRequestId={validationRequestId}\n          language={language}\n          strings={strings}\n        />\n      ) : (\n        <SmartyIntlResults \n          countryCode={country}\n          onSelect={onAddressSelect}\n          initialAddress={address}\n          requireValidation={requireValidation}\n          validationRequestId={validationRequestId}\n          language={language}\n          strings={strings}\n        />\n      )}\n    </div>\n  );\n};\n\nexport default AddressLookup;\n"],"mappings":";;;;;;AAAAA,OAAA;AACA,IAAAC,gBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAD,sBAAA,CAAAF,OAAA;AAA+D,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE/D,MAAMG,aAAa,GAAGA,CAAC;EACrBC,eAAe;EACfC,OAAO,GAAG,IAAI;EACdC,OAAO,GAAG,IAAI;EACdC,iBAAiB,GAAG,IAAI;EACxBC,mBAAmB,GAAG,CAAC;EACvBC,QAAQ,GAAG,IAAI;EACfC,OAAO,GAAG;AACZ,CAAC,KAAK;EACJ,MAAMC,IAAI,GAAGN,OAAO,KAAK,IAAI;EAE7B,oBACE,IAAAN,WAAA,CAAAa,GAAA;IAAKC,SAAS,EAAC,mBAAmB;IAAAC,QAAA,EAC/BH,IAAI,gBACH,IAAAZ,WAAA,CAAAa,GAAA,EAAChB,gBAAA,CAAAM,OAAe;MACda,QAAQ,EAAEX,eAAgB;MAC1BY,cAAc,EAAEV,OAAQ;MACxBC,iBAAiB,EAAEA,iBAAkB;MACrCC,mBAAmB,EAAEA,mBAAoB;MACzCC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA;IAAQ,CAClB,CAAC,gBAEF,IAAAX,WAAA,CAAAa,GAAA,EAACd,kBAAA,CAAAI,OAAiB;MAChBe,WAAW,EAAEZ,OAAQ;MACrBU,QAAQ,EAAEX,eAAgB;MAC1BY,cAAc,EAAEV,OAAQ;MACxBC,iBAAiB,EAAEA,iBAAkB;MACrCC,mBAAmB,EAAEA,mBAAoB;MACzCC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA;IAAQ,CAClB;EACF,CACE,CAAC;AAEV,CAAC;AAAC,IAAAQ,QAAA,GAAAC,OAAA,CAAAjB,OAAA,GAEaC,aAAa","ignoreList":[]}
+{"version":3,"file":"AddressLookup.js","names":["_propTypes","_interopRequireDefault","require","_SmartyUSResults","_SmartyIntlResults","_componentPropTypes","_jsxRuntime","e","__esModule","default","AddressLookup","onAddressSelect","country","address","requireValidation","showManualValidateButton","validationRequestId","language","strings","isUS","jsx","className","children","onSelect","initialAddress","countryCode","propTypes","PropTypes","func","string","addressPropType","bool","number","labelStringsPropType","_default","exports"],"sources":["../src/AddressLookup.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport './styles/addressLookup.css';\nimport SmartyUSResults from './components/SmartyUSResults';\nimport SmartyIntlResults from './components/SmartyIntlResults';\nimport { addressPropType, labelStringsPropType } from './utils/componentPropTypes';\n\nconst AddressLookup = ({ \n  onAddressSelect, \n  country = 'US',\n  address = null,\n  requireValidation = true,\n  showManualValidateButton = false,\n  validationRequestId = 0,\n  language = 'en',\n  strings = null\n}) => {\n  const isUS = country === 'US';\n\n  return (\n    <div className='ns-address-lookup'>\n      {isUS ? (\n        <SmartyUSResults \n          onSelect={onAddressSelect}\n          initialAddress={address}\n          requireValidation={requireValidation}\n          showManualValidateButton={showManualValidateButton}\n          validationRequestId={validationRequestId}\n          language={language}\n          strings={strings}\n        />\n      ) : (\n        <SmartyIntlResults \n          countryCode={country}\n          onSelect={onAddressSelect}\n          initialAddress={address}\n          requireValidation={requireValidation}\n          showManualValidateButton={showManualValidateButton}\n          validationRequestId={validationRequestId}\n          language={language}\n          strings={strings}\n        />\n      )}\n    </div>\n  );\n};\n\nAddressLookup.propTypes = {\n  onAddressSelect: PropTypes.func,\n  country: PropTypes.string,\n  address: addressPropType,\n  requireValidation: PropTypes.bool,\n  showManualValidateButton: PropTypes.bool,\n  validationRequestId: PropTypes.number,\n  language: PropTypes.string,\n  strings: labelStringsPropType\n};\n\nexport default AddressLookup;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACAA,OAAA;AACA,IAAAC,gBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,kBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,mBAAA,GAAAH,OAAA;AAAmF,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEnF,MAAMG,aAAa,GAAGA,CAAC;EACrBC,eAAe;EACfC,OAAO,GAAG,IAAI;EACdC,OAAO,GAAG,IAAI;EACdC,iBAAiB,GAAG,IAAI;EACxBC,wBAAwB,GAAG,KAAK;EAChCC,mBAAmB,GAAG,CAAC;EACvBC,QAAQ,GAAG,IAAI;EACfC,OAAO,GAAG;AACZ,CAAC,KAAK;EACJ,MAAMC,IAAI,GAAGP,OAAO,KAAK,IAAI;EAE7B,oBACE,IAAAN,WAAA,CAAAc,GAAA;IAAKC,SAAS,EAAC,mBAAmB;IAAAC,QAAA,EAC/BH,IAAI,gBACH,IAAAb,WAAA,CAAAc,GAAA,EAACjB,gBAAA,CAAAM,OAAe;MACdc,QAAQ,EAAEZ,eAAgB;MAC1Ba,cAAc,EAAEX,OAAQ;MACxBC,iBAAiB,EAAEA,iBAAkB;MACrCC,wBAAwB,EAAEA,wBAAyB;MACnDC,mBAAmB,EAAEA,mBAAoB;MACzCC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA;IAAQ,CAClB,CAAC,gBAEF,IAAAZ,WAAA,CAAAc,GAAA,EAAChB,kBAAA,CAAAK,OAAiB;MAChBgB,WAAW,EAAEb,OAAQ;MACrBW,QAAQ,EAAEZ,eAAgB;MAC1Ba,cAAc,EAAEX,OAAQ;MACxBC,iBAAiB,EAAEA,iBAAkB;MACrCC,wBAAwB,EAAEA,wBAAyB;MACnDC,mBAAmB,EAAEA,mBAAoB;MACzCC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA;IAAQ,CAClB;EACF,CACE,CAAC;AAEV,CAAC;AAEDR,aAAa,CAACgB,SAAS,GAAG;EACxBf,eAAe,EAAEgB,kBAAS,CAACC,IAAI;EAC/BhB,OAAO,EAAEe,kBAAS,CAACE,MAAM;EACzBhB,OAAO,EAAEiB,mCAAe;EACxBhB,iBAAiB,EAAEa,kBAAS,CAACI,IAAI;EACjChB,wBAAwB,EAAEY,kBAAS,CAACI,IAAI;EACxCf,mBAAmB,EAAEW,kBAAS,CAACK,MAAM;EACrCf,QAAQ,EAAEU,kBAAS,CAACE,MAAM;EAC1BX,OAAO,EAAEe;AACX,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1B,OAAA,GAEaC,aAAa","ignoreList":[]}

package/dist/components/SmartyIntlResults.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
 var _useSmartyInternationalLookup = _interopRequireDefault(require("../hooks/useSmartyInternationalLookup"));
 var _useIntlAddressValidation = _interopRequireDefault(require("../hooks/useIntlAddressValidation"));
@@ -12,6 +13,7 @@ var _countries = require("../countries");
 var _addressWrapper = require("../utils/addressWrapper");
 var _addressStatus = require("../utils/addressStatus");
 var _validators = require("../utils/validators");
+var _componentPropTypes = require("../utils/componentPropTypes");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const SmartyIntlResults = ({
@@ -19,6 +21,7 @@ const SmartyIntlResults = ({
   onSelect,
   initialAddress = null,
   requireValidation = true,
+  showManualValidateButton = false,
   validationRequestId = 0,
   language = 'en',
   strings = null
@@ -39,6 +42,8 @@ const SmartyIntlResults = ({
   const [hasPendingLookupDraft, setHasPendingLookupDraft] = (0, _react.useState)(false);
   const [touchedFields, setTouchedFields] = (0, _react.useState)({});
   const [showAllRequiredErrors, setShowAllRequiredErrors] = (0, _react.useState)(false);
+  const [lookupServiceError, setLookupServiceError] = (0, _react.useState)(null);
+  const [validationServiceError, setValidationServiceError] = (0, _react.useState)(null);
   const shouldSearchRef = (0, _react.useRef)(true);
   const fieldTimerRef = (0, _react.useRef)(null);
   const componentRef = (0, _react.useRef)(null);
@@ -54,6 +59,8 @@ const SmartyIntlResults = ({
       lookupDraftOriginalRef.current = initialAddress;
       setTouchedFields({});
       setShowAllRequiredErrors(false);
+      setLookupServiceError(null);
+      setValidationServiceError(null);
     }
   }, [initialAddress]);
   (0, _react.useEffect)(() => {
@@ -68,7 +75,8 @@ const SmartyIntlResults = ({
         countryCode,
         formData,
         verificationStatus,
-        mode
+        mode,
+        requireValidation
       })
     });
   }, [validationRequestId]);
@@ -87,14 +95,95 @@ const SmartyIntlResults = ({
   const {
     suggestions,
     loading,
-    error
+    error,
+    rateLimited
   } = (0, _useSmartyInternationalLookup.default)(shouldSearchRef.current && isAutocompleteMode ? query : '', countryCode, selectedIntlAddressId, 500);
   const {
     suggestions: validationSuggestions,
     loading: validationLoading,
-    error: validationError
+    error: validationError,
+    rateLimited: validationRateLimited
   } = (0, _useIntlAddressValidation.default)(formData, countryCode, requireValidation ? validationTrigger : 0);
   const lookupValue = formData[lookupField];
+  const lookupErrorMessage = lookupServiceError !== null && lookupServiceError !== void 0 && lookupServiceError.rateLimited ? (fieldLabels === null || fieldLabels === void 0 ? void 0 : fieldLabels.rateLimited) || 'Too many requests. Please wait a moment and try again.' : (fieldLabels === null || fieldLabels === void 0 ? void 0 : fieldLabels.lookupError) || 'We could not look up that address right now.';
+  const validationErrorMessage = validationServiceError !== null && validationServiceError !== void 0 && validationServiceError.rateLimited ? (fieldLabels === null || fieldLabels === void 0 ? void 0 : fieldLabels.rateLimited) || 'Too many requests. Please wait a moment and try again.' : (fieldLabels === null || fieldLabels === void 0 ? void 0 : fieldLabels.validationError) || 'We could not validate that address right now.';
+  (0, _react.useEffect)(() => {
+    if (!error) {
+      setLookupServiceError(null);
+      return;
+    }
+    setLookupServiceError({
+      rateLimited,
+      rawMessage: error
+    });
+  }, [error, rateLimited]);
+  (0, _react.useEffect)(() => {
+    if (!validationError) {
+      setValidationServiceError(null);
+      return;
+    }
+    setValidationServiceError({
+      rateLimited: validationRateLimited,
+      rawMessage: validationError
+    });
+  }, [validationError, validationRateLimited]);
+  (0, _react.useEffect)(() => {
+    if (!lookupServiceError) {
+      return;
+    }
+    onSelect === null || onSelect === void 0 || onSelect({
+      type: 'lookup-error',
+      address: formData,
+      status: (0, _addressStatus.buildAddressStatus)({
+        countryCode,
+        formData,
+        verificationStatus,
+        mode,
+        requireValidation
+      }),
+      error: {
+        kind: lookupServiceError.rateLimited ? 'rate-limited' : 'api',
+        source: 'autocomplete',
+        message: lookupErrorMessage
+      }
+    });
+  }, [lookupServiceError]);
+  (0, _react.useEffect)(() => {
+    if (!validationServiceError) {
+      return;
+    }
+    onSelect === null || onSelect === void 0 || onSelect({
+      type: 'validation-error',
+      address: formData,
+      status: (0, _addressStatus.buildAddressStatus)({
+        countryCode,
+        formData,
+        verificationStatus,
+        mode,
+        requireValidation
+      }),
+      error: {
+        kind: validationServiceError.rateLimited ? 'rate-limited' : 'api',
+        source: 'validation',
+        message: validationErrorMessage
+      }
+    });
+  }, [validationServiceError]);
+  const clearServiceErrors = ({
+    lookup = true,
+    validation = true,
+    custom = false
+  } = {}) => {
+    if (lookup) {
+      setLookupServiceError(null);
+    }
+    if (validation) {
+      setValidationServiceError(null);
+    }
+    if (custom) {
+      setCustomError(null);
+    }
+  };
   (0, _react.useEffect)(() => {
     if (selectedIntlAddressId) {
       if (suggestions.length === 1 && suggestions[0].isDetailed) {
@@ -123,16 +212,19 @@ const SmartyIntlResults = ({
     }
     const handleDocumentMouseDown = event => {
       const component = componentRef.current;
-      if (component && component.contains(event.target)) {
+      if (component !== null && component !== void 0 && component.contains(event.target)) {
         return;
       }
       const suggestionsList = suggestionsListRef.current;
-      if (suggestionsList && !suggestionsList.contains(event.target)) {
+      if ((suggestionsList === null || suggestionsList === void 0 ? void 0 : suggestionsList.contains(event.target)) === false) {
         shouldSearchRef.current = false;
         setQuery('');
         setSelectedAddress(null);
         setSelectedIntlAddressId(null);
         setShowValidationSuggestions(false);
+        clearServiceErrors({
+          custom: true
+        });
         setFormData(lookupDraftOriginalRef.current);
         setHasPendingLookupDraft(false);
       }
@@ -165,6 +257,9 @@ const SmartyIntlResults = ({
       lastCommittedAddressRef.current = updatedFormData;
       lookupDraftOriginalRef.current = updatedFormData;
       setHasPendingLookupDraft(false);
+      clearServiceErrors({
+        custom: true
+      });
       const currentVerificationStatus = 'autocomplete';
       setVerificationStatus(currentVerificationStatus);
       onSelect === null || onSelect === void 0 || onSelect({
@@ -174,7 +269,8 @@ const SmartyIntlResults = ({
           countryCode,
           formData: updatedFormData,
           verificationStatus: currentVerificationStatus,
-          mode
+          mode,
+          requireValidation
         })
       });
       if (requireValidation && config.verifyAfterAutocomplete) {
@@ -192,6 +288,9 @@ const SmartyIntlResults = ({
     setSelectedAddress(null);
     setSelectedIntlAddressId(null);
     setShowValidationSuggestions(false);
+    clearServiceErrors({
+      custom: true
+    });
     if (!hasPendingLookupDraft) {
       lookupDraftOriginalRef.current = formData;
       setHasPendingLookupDraft(true);
@@ -261,6 +360,9 @@ const SmartyIntlResults = ({
     if (field === lookupField) {
       setShowValidationSuggestions(false);
     }
+    clearServiceErrors({
+      custom: true
+    });
     const updatedFormData = {
       ...formData,
       [field]: value
@@ -281,7 +383,8 @@ const SmartyIntlResults = ({
           countryCode,
           formData: updatedFormData,
           verificationStatus: nextVerificationStatus,
-          mode
+          mode,
+          requireValidation
         })
       };
       if (field === 'email' && value) {
@@ -291,6 +394,11 @@ const SmartyIntlResults = ({
     }, 500);
   };
   const handleSelect = address => {
+    clearServiceErrors({
+      lookup: true,
+      validation: false,
+      custom: true
+    });
     if (address.entries > 1 || address.entries === 1 && address.isDetailed === false) {
       shouldSearchRef.current = true;
       appliedSelectionKeyRef.current = null;
@@ -306,6 +414,11 @@ const SmartyIntlResults = ({
   };
   const handleValidationSelect = validatedAddress => {
     var _countryConfig$config;
+    clearServiceErrors({
+      lookup: false,
+      validation: true,
+      custom: false
+    });
     const components = validatedAddress.components || {};
     const config = (countryConfig === null || countryConfig === void 0 ? void 0 : countryConfig.addressForm) || [];
     const formFields = new Set(config.map(f => f.field));
@@ -350,7 +463,8 @@ const SmartyIntlResults = ({
         countryCode,
         formData: updatedFormData,
         verificationStatus: currentVerificationStatus,
-        mode
+        mode,
+        requireValidation
       })
     });
   };
@@ -358,9 +472,129 @@ const SmartyIntlResults = ({
     if (!requireValidation) {
       return;
     }
+    clearServiceErrors({
+      lookup: false,
+      validation: true,
+      custom: false
+    });
     setShowValidationSuggestions(true);
     setValidationTrigger(prev => prev + 1);
   };
+  const getFieldKey = fieldConfig => fieldConfig.field;
+  const getSuggestionKey = suggestion => suggestion.address_id || [suggestion.displayText, suggestion.street, suggestion.address_text, suggestion.locality, suggestion.administrative_area, suggestion.postal_code, suggestion.entries].filter(value => value !== undefined && value !== null).join('|');
+  const getValidationSuggestionKey = suggestion => {
+    var _suggestion$component, _suggestion$component2, _suggestion$component3, _suggestion$component4, _suggestion$component5;
+    return [suggestion.displayText, suggestion.address1, suggestion.address2, suggestion.address3, (_suggestion$component = suggestion.components) === null || _suggestion$component === void 0 ? void 0 : _suggestion$component.thoroughfare, (_suggestion$component2 = suggestion.components) === null || _suggestion$component2 === void 0 ? void 0 : _suggestion$component2.premise, (_suggestion$component3 = suggestion.components) === null || _suggestion$component3 === void 0 ? void 0 : _suggestion$component3.locality, (_suggestion$component4 = suggestion.components) === null || _suggestion$component4 === void 0 ? void 0 : _suggestion$component4.administrative_area, (_suggestion$component5 = suggestion.components) === null || _suggestion$component5 === void 0 ? void 0 : _suggestion$component5.postal_code].filter(value => value !== undefined && value !== null).join('|');
+  };
+  const renderLookupActions = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "ns-address-lookup__actions",
+    children: [!isAutocompleteMode && requireValidation && showManualValidateButton && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      onClick: handleValidate,
+      disabled: validationLoading || !String(formData[lookupField] || '').trim(),
+      className: "ns-address-lookup__button ns-address-lookup__button--compact",
+      children: validationLoading ? 'Validating...' : 'Validate Address'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      onClick: () => {
+        setShowValidationSuggestions(false);
+        clearServiceErrors({
+          custom: true
+        });
+        setMode(mode === 'autocomplete' ? 'manual' : 'autocomplete');
+      },
+      className: "ns-address-lookup__toggle",
+      children: mode === 'autocomplete' ? 'Switch to Manual Entry' : 'Switch to Autocomplete'
+    })]
+  });
+  const renderLookupLists = isLookupField => {
+    if (!isLookupField) {
+      return null;
+    }
+    if (loading && isAutocompleteMode) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "ns-address-lookup__spinner"
+      });
+    }
+    if (suggestions.length > 0 && !selectedAddress && isAutocompleteMode) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        ref: suggestionsListRef,
+        className: "ns-address-lookup__list ns-address-lookup__list--suggestions",
+        children: suggestions.map((suggestion, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+          className: ['ns-address-lookup__list-item', index < suggestions.length - 1 ? 'ns-address-lookup__list-item--divided' : ''].filter(Boolean).join(' '),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            type: "button",
+            onClick: () => handleSelect(suggestion),
+            className: "ns-address-lookup__list-button",
+            children: suggestion.displayText
+          })
+        }, getSuggestionKey(suggestion)))
+      });
+    }
+    if (!isAutocompleteMode && requireValidation && showValidationSuggestions && validationSuggestions.length > 0) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: "ns-address-lookup__list ns-address-lookup__list--validation-inline",
+        children: validationSuggestions.map((suggestion, index) => {
+          var _suggestion$analysis;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            className: ['ns-address-lookup__list-item', index < validationSuggestions.length - 1 ? 'ns-address-lookup__list-item--divided' : ''].filter(Boolean).join(' '),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+              type: "button",
+              onClick: () => handleValidationSelect(suggestion),
+              className: "ns-address-lookup__list-button",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "ns-address-lookup__list-title",
+                children: ((_suggestion$analysis = suggestion.analysis) === null || _suggestion$analysis === void 0 ? void 0 : _suggestion$analysis.verification_status) || 'Unknown'
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "ns-address-lookup__list-subtitle",
+                children: suggestion.displayText
+              })]
+            })
+          }, getValidationSuggestionKey(suggestion));
+        })
+      });
+    }
+    return null;
+  };
+  const renderField = fieldConfig => {
+    const isLookupField = fieldConfig.field === lookupField;
+    const fieldError = getFieldErrorMessage(fieldConfig.field);
+    const isInvalid = hasVisibleFieldError(fieldConfig.field);
+    const isReadOnly = !fieldConfig.editable && !isLookupField && isAutocompleteMode;
+    const inputClassName = ['ns-address-lookup__input', isInvalid ? 'ns-address-lookup__input--invalid' : '', isReadOnly ? 'ns-address-lookup__input--readonly' : '', isLookupField && loading ? 'ns-address-lookup__input--loading' : ''].filter(Boolean).join(' ');
+    const fieldClassName = ['ns-address-lookup__field', isInvalid ? 'ns-address-lookup__field--with-error' : ''].filter(Boolean).join(' ');
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: fieldClassName,
+      style: {
+        width: fieldConfig.width === 'full' ? '100%' : '50%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "ns-address-lookup__label-row",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          className: "ns-address-lookup__label",
+          children: areLabelsLoading ? '' : (fieldLabels === null || fieldLabels === void 0 ? void 0 : fieldLabels[fieldConfig.field]) || fieldConfig.label
+        }), isLookupField && renderLookupActions()]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: "text",
+        value: formData[fieldConfig.field] || '',
+        maxLength: fieldConfig.maxLength,
+        "aria-invalid": shouldShowFieldError(fieldConfig.field) ? 'true' : undefined,
+        onBlur: () => handleFieldBlur(fieldConfig.field),
+        onChange: e => {
+          if (isLookupField && isAutocompleteMode) {
+            handleInputChange(e);
+          } else {
+            handleEditableFieldChange(fieldConfig.field, e.target.value);
+          }
+        },
+        readOnly: !isAutocompleteMode && !fieldConfig.editable && !isLookupField ? false : !fieldConfig.editable && !isLookupField,
+        className: inputClassName
+      }), fieldError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "ns-address-lookup__error-text",
+        children: fieldError
+      }), renderLookupLists(isLookupField)]
+    }, getFieldKey(fieldConfig));
+  };
   (0, _react.useEffect)(() => {
     if (validationSuggestions.length === 1) {
       // Auto-select when exactly one validation result is returned
@@ -376,107 +610,36 @@ const SmartyIntlResults = ({
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: config.map((fieldConfig, index) => {
-        const isLookupField = fieldConfig.field === lookupField;
-        const fieldError = getFieldErrorMessage(fieldConfig.field);
-        const isInvalid = hasVisibleFieldError(fieldConfig.field);
-        const isReadOnly = !fieldConfig.editable && !isLookupField && isAutocompleteMode;
-        const inputClassName = ['ns-address-lookup__input', isInvalid ? 'ns-address-lookup__input--invalid' : '', isReadOnly ? 'ns-address-lookup__input--readonly' : '', isLookupField && loading ? 'ns-address-lookup__input--loading' : ''].filter(Boolean).join(' ');
-        const fieldClassName = ['ns-address-lookup__field', isInvalid ? 'ns-address-lookup__field--with-error' : ''].filter(Boolean).join(' ');
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: fieldClassName,
-          style: {
-            width: fieldConfig.width === 'full' ? '100%' : '50%'
-          },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: "ns-address-lookup__label-row",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-              className: "ns-address-lookup__label",
-              children: areLabelsLoading ? '' : (fieldLabels === null || fieldLabels === void 0 ? void 0 : fieldLabels[fieldConfig.field]) || fieldConfig.label
-            }), isLookupField && /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
-              href: "#",
-              onClick: e => {
-                e.preventDefault();
-                setShowValidationSuggestions(false);
-                setMode(mode === 'autocomplete' ? 'manual' : 'autocomplete');
-              },
-              className: "ns-address-lookup__toggle",
-              children: mode === 'autocomplete' ? 'Switch to Manual Entry' : 'Switch to Autocomplete'
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-            type: "text",
-            value: formData[fieldConfig.field] || '',
-            maxLength: fieldConfig.maxLength,
-            "aria-invalid": shouldShowFieldError(fieldConfig.field) ? 'true' : undefined,
-            onBlur: () => handleFieldBlur(fieldConfig.field),
-            onChange: e => {
-              if (isLookupField && isAutocompleteMode) {
-                handleInputChange(e);
-              } else {
-                handleEditableFieldChange(fieldConfig.field, e.target.value);
-              }
-            },
-            readOnly: !isAutocompleteMode && !fieldConfig.editable && !isLookupField ? false : !fieldConfig.editable && !isLookupField,
-            className: inputClassName
-          }), fieldError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "ns-address-lookup__error-text",
-            children: fieldError
-          }), isLookupField && loading && isAutocompleteMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "ns-address-lookup__spinner"
-          }), isLookupField && suggestions.length > 0 && !selectedAddress && isAutocompleteMode && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-            ref: suggestionsListRef,
-            className: "ns-address-lookup__list ns-address-lookup__list--suggestions",
-            children: suggestions.map((suggestion, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-              onClick: () => handleSelect(suggestion),
-              className: ['ns-address-lookup__list-item', index < suggestions.length - 1 ? 'ns-address-lookup__list-item--divided' : ''].filter(Boolean).join(' '),
-              children: suggestion.displayText
-            }, index))
-          })]
-        }, index);
-      })
+      children: config.map(renderField)
     });
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: componentRef,
     className: "ns-address-lookup__panel",
-    children: [error && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [lookupServiceError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "ns-address-lookup__message",
-      children: ["Error: ", error]
+      children: lookupErrorMessage
     }), customError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "ns-address-lookup__message",
       children: customError
-    }), requireValidation && validationError && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }), requireValidation && validationServiceError && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "ns-address-lookup__message",
-      children: ["Validation Error: ", validationError]
+      children: validationErrorMessage
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "ns-address-lookup__form",
       children: renderAddressForm()
-    }), !isAutocompleteMode && requireValidation && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "ns-address-lookup__validation",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-        onClick: handleValidate,
-        disabled: validationLoading || !formData.address1,
-        className: "ns-address-lookup__button",
-        children: validationLoading ? 'Validating...' : 'Validate Address'
-      }), showValidationSuggestions && validationSuggestions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
-        className: "ns-address-lookup__list ns-address-lookup__list--validation",
-        children: validationSuggestions.map((suggestion, index) => {
-          var _suggestion$analysis;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
-            onClick: () => handleValidationSelect(suggestion),
-            className: ['ns-address-lookup__list-item', index < validationSuggestions.length - 1 ? 'ns-address-lookup__list-item--divided' : ''].filter(Boolean).join(' '),
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "ns-address-lookup__list-title",
-              children: ((_suggestion$analysis = suggestion.analysis) === null || _suggestion$analysis === void 0 ? void 0 : _suggestion$analysis.verification_status) || 'Unknown'
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: "ns-address-lookup__list-subtitle",
-              children: suggestion.displayText
-            })]
-          }, index);
-        })
-      })]
     })]
   });
 };
+SmartyIntlResults.propTypes = {
+  countryCode: _propTypes.default.string.isRequired,
+  onSelect: _propTypes.default.func,
+  initialAddress: _componentPropTypes.addressPropType,
+  requireValidation: _propTypes.default.bool,
+  showManualValidateButton: _propTypes.default.bool,
+  validationRequestId: _propTypes.default.number,
+  language: _propTypes.default.string,
+  strings: _componentPropTypes.labelStringsPropType
+};
 var _default = exports.default = SmartyIntlResults;
 //# sourceMappingURL=SmartyIntlResults.js.map