@nuskin/address-lookup 1.0.1-pa-954.8 → 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)
@@ -90,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.'
 }
 ```
 
@@ -160,6 +161,7 @@ Common payload shape:
   - `fieldRequired`
   - `invalidPostalCode`
   - `invalidEmail`
+  - `rateLimited`
 - Safe defaults are used when those validation strings are missing
 
 ## Autocomplete and manual mode
@@ -200,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`
@@ -210,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`
 
@@ -227,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 = ({
@@ -42,5 +44,15 @@ const AddressLookup = ({
     })
   });
 };
+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","showManualValidateButton","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  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\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,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,EAACf,kBAAA,CAAAI,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;AAAC,IAAAQ,QAAA,GAAAC,OAAA,CAAAlB,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 = ({
@@ -40,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);
@@ -55,6 +59,8 @@ const SmartyIntlResults = ({
       lookupDraftOriginalRef.current = initialAddress;
       setTouchedFields({});
       setShowAllRequiredErrors(false);
+      setLookupServiceError(null);
+      setValidationServiceError(null);
     }
   }, [initialAddress]);
   (0, _react.useEffect)(() => {
@@ -89,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) {
@@ -125,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);
       }
@@ -167,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({
@@ -195,6 +288,9 @@ const SmartyIntlResults = ({
     setSelectedAddress(null);
     setSelectedIntlAddressId(null);
     setShowValidationSuggestions(false);
+    clearServiceErrors({
+      custom: true
+    });
     if (!hasPendingLookupDraft) {
       lookupDraftOriginalRef.current = formData;
       setHasPendingLookupDraft(true);
@@ -264,6 +360,9 @@ const SmartyIntlResults = ({
     if (field === lookupField) {
       setShowValidationSuggestions(false);
     }
+    clearServiceErrors({
+      custom: true
+    });
     const updatedFormData = {
       ...formData,
       [field]: value
@@ -295,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;
@@ -310,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));
@@ -363,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
@@ -381,108 +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.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)("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))
-          }), isLookupField && !isAutocompleteMode && requireValidation && showValidationSuggestions && validationSuggestions.length > 0 && /*#__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.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);
-            })
-          })]
-        }, 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()
     })]
   });
 };
+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