@nuskin/address-lookup 1.0.0

package/README.md

@@ -0,0 +1,103 @@
+# NPM Library Template
+
+### This template is for creating NPM module libraries
+
+----
+### What this template does for you
+
+- Provides a `.gitlab-ci.yml` to manage the CI/CD pipeline
+- Runs your *Unit Tests* with every push to the remote repository
+- Analyzes your code with:
+  - linting rules
+  - run a *SAST* check
+  - Pushes your code coverage analysis to SonarQube
+- Ensures your code passes the SonarQube Quality Gate
+- Utilizes *Semantic Release*, which means the pipeline will handle versioning
+- Publishes your module to *npmjs*
+
+----
+### Follow these steps to create a new project using this template:
+
+#### 1. Clone this project to your local machine and remove the git control file
+Note: We use 'my-project' as the name of your new project
+ ```bash
+git clone git@code.tls.nuskin.io:ns-am/templates/npm-library-template.git <my-project>
+cd <my-project>
+rm -rf .git
+```
+
+#### 2. Create your new project in Gitlab
+
+1. In the appropriate sub-group select **"New project"**
+2. Name your project
+3. Select a project description (optional)
+4. Select **"Create project"**
+
+#### 3. Connect your local project to the gitlab remote project
+You can copy and paste the section in the gitlab command line instructions of your new 
+project into the command line of your local project.  It will look like the following 
+but will have your project specific details.
+ ```bash
+cd <your project folder if you are not already there>
+git init
+git remote add origin <your gitlab project url>
+git add .
+git commit -m "Chore: Initial commit"
+git push -u origin master
+```
+
+#### 4. Add rules to your new project repository
+
+- Under *Settings* Select *Repository*
+  - Select *Push Rules* ([See Sample](./push-rules.png))
+    1. Check *Do not allow users to remove git tags with `git push`*
+  - Click on **Expand** in the *Protected Branches* section ([See Sample](./protected-branches.png))
+    - **master** should already be set as your default branch. For **master** do the following:
+      1. Set *Allowed to merge* to **Developers + Maintainers**
+      2. Set *Allowed to push* to **Maintainers**
+      3. Set *Code owner approval* to **Off** 
+
+
+#### 5. Update your new project with your project specific settings and information
+
+1. Replace the `README.md` with a proper readme that will be displayed on *npmjs* ([See Sample](./README-sample.md))
+2. Update these settings in your `package.json`
+  - Note: All module names should be created in the *@nuskin* namespace.
+  ```JavaScript
+  {
+    "name": "@nuskin/npm-library-template",
+    "description": "The description that will amaze and astound your audience when they read it",
+    "repository": {
+      "type": "git",
+      "url": "git@code.tls.nuskin.io:ns-am/templates/npm-library-template.git"
+    },
+    "author": "Ian Harisay <imharisa@nuskin.com>",
+    "homepage": "https://code.tls.nuskin.io/ns-am/templates/npm-library-template/blob/master/README.md"
+  }
+  ```
+
+#### 6. Determine if your module should be public or private
+If your module should be public and published to *npmjs.com*, nothing needs to be done.  This is the default
+behavior. If you need to publish to the private npm repository *nexus3.nuskin.net*, inside `gitlab-ci.yml` 
+update **PRIVATE_NPM** to `true`
+```yaml
+variables:
+  PRIVATE_NPM: "true"
+```
+#### 7. Turning on your CI/CD pipeline
+
+Once you are ready for your project to start running the CI/CD pipeline, you should rename the `gitlab-ci.yml`
+to `.gitlab-ci.yml`.
+```bash
+git mv gitlab-ci.yml .gitlab-ci.yml
+git commit -am"Chore: renaming gitlab-ci.yml to .gitlab-ci.yml so my pipeline runs"
+git push
+```
+
+## TODO: Write documentation about Semantic Release (don't forget prereleases)
+
+#### How to use Semantic Release in your pipeline
+
+Link to another page or write up instructions on how Semantic Release works with the pipeline
+
+[eslint commit-analyzer](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-eslint) rules.

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@nuskin/address-lookup",
+  "version": "1.0.0",
+  "description": "React component for address autocomplete using Egon and Smarty services",
+  "main": "src/index.js",
+  "scripts": {
+    "audit": "yarn audit --level high",
+    "jsdoc": "node_modules/.bin/jsdoc -a all -c jsdoc.json -r -d jsdocs",
+    "lint": "eslint src __tests__",
+    "test": "jest --coverage",
+    "dev": "cd test && npm run dev"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@code.tls.nuskin.io:nextgen-development/shipping/npm/address-lookup.git"
+  },
+  "keywords": [
+    "react",
+    "address",
+    "autocomplete",
+    "lookup",
+    "egon",
+    "smarty"
+  ],
+  "author": "Mr. Roboto",
+  "license": "MIT",
+  "homepage": "https://code.tls.nuskin.io/nextgen-development/shipping/npm/address-lookup/blob/master/README.md",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@nuskin/docdash": "1.0.1",
+    "axios": "^1.6.0",
+    "@babel/eslint-parser": "7.28.6",
+    "eslint": "7.21.0",
+    "eslint-config-google": "0.14.0",
+    "eslint-config-prettier": "8.1.0",
+    "eslint-plugin-json": "2.1.2",
+    "eslint-plugin-prettier": "3.3.1",
+    "eslint-plugin-react": "7.37.5",
+    "jest": "26.6.3",
+    "jest-sonar-reporter": "2.0.0",
+    "jsdoc": "3.6.6",
+    "prettier": "2.2.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "files": [
+    "src/"
+  ]
+}

package/src/AddressLookup.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import EgonResults from './components/EgonResults.jsx';
+import SmartyResults from './components/SmartyResults.jsx';
+import { COUNTRY_MAP } from './countries';
+
+const AddressLookup = ({ onAddressSelect }) => {
+  const [countryCode, setCountryCode] = useState('');
+
+  return (
+    <div>
+      <select
+        value={countryCode}
+        onChange={(e) => setCountryCode(e.target.value)}
+        style={{ marginBottom: '20px', padding: '8px' }}
+      >
+        <option value="">Select Country</option>
+        {Object.entries(COUNTRY_MAP).map(([code, country]) => (
+          <option key={code} value={code}>
+            {country.name}
+          </option>
+        ))}
+      </select>
+
+      <div style={{ display: 'flex', gap: '20px' }}>
+        <EgonResults countryCode={countryCode} onSelect={onAddressSelect} />
+        <SmartyResults countryCode={countryCode} onSelect={onAddressSelect} />
+      </div>
+    </div>
+  );
+};
+
+export default AddressLookup;

package/src/components/EgonResults.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import useEgonLookup from './hooks/useEgonLookup.jsx';
+import useEgonNormalize from './hooks/useEgonNormalize.jsx';
+
+const EgonResults = ({ countryCode, onSelect }) => {
+  const [query, setQuery] = useState('');
+  const [selectedAddress, setSelectedAddress] = useState(null);
+  const { suggestions, loading, error, responseTime } = useEgonLookup(query, countryCode);
+  const {
+    normalizedAddress,
+    loading: normalizeLoading,
+    error: normalizeError,
+    responseTime: normalizeResponseTime
+  } = useEgonNormalize(selectedAddress, countryCode);
+
+  const handleSelect = (address) => {
+    setSelectedAddress(address);
+    onSelect?.({ type: 'egon', address });
+  };
+
+  const displayAddress = normalizedAddress || selectedAddress;
+
+  return (
+    <div style={{ flex: 1 }}>
+      <h4>Egon</h4>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => {
+          setSelectedAddress(null);
+          setQuery(e.target.value);
+        }}
+        placeholder="Enter address..."
+        style={{ marginBottom: '10px', padding: '8px', width: '100%' }}
+      />
+      {responseTime && (
+        <div style={{ fontSize: '12px', color: '#666', marginBottom: '10px' }}>
+          Response time: {responseTime}ms
+        </div>
+      )}
+      {loading && <div>Loading...</div>}
+      {error && <div>Error: {error}</div>}
+      {selectedAddress ? (
+        <div style={{ border: '1px solid #ccc', padding: '10px', borderRadius: '5px' }}>
+          {normalizeLoading && <div>Normalizing...</div>}
+          {normalizeError && (
+            <div style={{ color: 'red' }}>Normalize Error: {normalizeError}</div>
+          )}
+          {normalizeResponseTime && (
+            <div style={{ fontSize: '12px', color: '#666', marginBottom: '10px' }}>
+              Normalize time: {normalizeResponseTime}ms
+            </div>
+          )}
+          {displayAddress?.standard ? (
+            <>
+              <div><strong>Address:</strong> {displayAddress.standard.address}</div>
+              <div><strong>Full Address:</strong> {displayAddress.standard.full_address}</div>
+              <div><strong>Street:</strong> {displayAddress.standard.street}</div>
+              <div><strong>City:</strong> {displayAddress.standard.city}</div>
+              <div><strong>Province:</strong> {displayAddress.standard.province}</div>
+              <div><strong>Region:</strong> {displayAddress.standard.region}</div>
+              <div><strong>Postal Code:</strong> {displayAddress.standard.zipcode}</div>
+              <div><strong>Country:</strong> {displayAddress.standard.country}</div>
+            </>
+          ) : displayAddress ? (
+            <>
+              <div>
+                <strong>Street:</strong> {displayAddress.hn_num}
+                {displayAddress.hn_exp || ''} {displayAddress.street}
+              </div>
+              <div><strong>City:</strong> {displayAddress.city}</div>
+              <div><strong>Province:</strong> {displayAddress.province}</div>
+              <div><strong>Region:</strong> {displayAddress.region}</div>
+              <div><strong>Postal Code:</strong> {displayAddress.zipcode}</div>
+              <div><strong>Country:</strong> {displayAddress.country}</div>
+            </>
+          ) : null}
+          <button
+            onClick={() => setSelectedAddress(null)}
+            style={{ marginTop: '8px', padding: '4px 8px' }}
+          >
+            Clear
+          </button>
+        </div>
+      ) : (
+        <ul>
+          {suggestions.map((suggestion, index) => (
+            <li
+              key={index}
+              onClick={() => handleSelect(suggestion)}
+              style={{ cursor: 'pointer' }}
+            >
+              {suggestion.displayText}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default EgonResults;

package/src/components/SmartyResults.jsx

@@ -0,0 +1,143 @@
+import React, { useState, useEffect } from 'react';
+import useSmartyUSLookup from './hooks/useSmartyUSLookup.jsx';
+import useSmartyInternationalLookup from './hooks/useSmartyInternationalLookup.jsx';
+
+const SmartyResults = ({ countryCode, onSelect }) => {
+  const [query, setQuery] = useState('');
+  const [selectedAddress, setSelectedAddress] = useState(null);
+  const [selectedUSAddress, setSelectedUSAddress] = useState(null);
+  const [selectedIntlAddressId, setSelectedIntlAddressId] = useState(null);
+
+  // Use appropriate Smarty hook based on country
+  const isUS = countryCode === 'US';
+  const {
+    suggestions: smartyUSSuggestions,
+    loading: smartyUSLoading,
+    error: smartyUSError,
+    responseTime: smartyUSResponseTime
+  } = useSmartyUSLookup(isUS ? query : '', selectedUSAddress, 300);
+  const {
+    suggestions: smartyIntlSuggestions,
+    loading: smartyIntlLoading,
+    error: smartyIntlError,
+    responseTime: smartyIntlResponseTime
+  } = useSmartyInternationalLookup(!isUS ? query : '', countryCode, selectedIntlAddressId, 300);
+  
+  const suggestions = isUS ? smartyUSSuggestions : smartyIntlSuggestions;
+  const loading = isUS ? smartyUSLoading : smartyIntlLoading;
+  const error = isUS ? smartyUSError : smartyIntlError;
+  const responseTime = isUS ? smartyUSResponseTime : smartyIntlResponseTime;
+
+  // Auto-select detailed results (don't show as list)
+  useEffect(() => {
+    if (suggestions.length === 1 && suggestions[0].isDetailed) {
+      setSelectedAddress(suggestions[0]);
+      onSelect?.({ type: 'smarty', address: suggestions[0] });
+    } else if (suggestions.length > 0 && !suggestions[0].isDetailed) {
+      // Clear selection when we get new summary results
+      setSelectedAddress(null);
+    }
+  }, [suggestions, onSelect]);
+
+  const handleInputChange = (e) => {
+    setSelectedAddress(null);
+    setSelectedUSAddress(null);
+    setSelectedIntlAddressId(null);
+    setQuery(e.target.value);
+  };
+
+  const handleSelect = (address) => {
+    if (isUS) {
+      // US flow - check if entries > 1 for secondary expansion
+      if (address.entries > 1) {
+        setSelectedUSAddress(address);
+        const baseAddress = `${address.street_line} ${address.secondary}`.trim();
+        setQuery(baseAddress);
+      } else {
+        setSelectedUSAddress(null);
+        setSelectedAddress(address);
+        onSelect?.({ type: 'smarty', address });
+      }
+    } else {
+      // International flow - check if we need to query with address_id
+      if (address.entries > 1 || (address.entries === 1 && address.isDetailed === false)) {
+        setSelectedIntlAddressId(address.address_id);
+      } else {
+        setSelectedIntlAddressId(null);
+        setSelectedAddress(address);
+        onSelect?.({ type: 'smarty', address });
+      }
+    }
+  };
+
+  return (
+    <div style={{ flex: 1 }}>
+      <h4>Smarty</h4>
+      <input
+        type="text"
+        value={query}
+        onChange={handleInputChange}
+        placeholder="Enter address..."
+        style={{ marginBottom: '10px', padding: '8px', width: '100%' }}
+      />
+      {responseTime && (
+        <div style={{ fontSize: '12px', color: '#666', marginBottom: '10px' }}>
+          Response time: {responseTime}ms
+        </div>
+      )}
+      {loading && <div>Loading...</div>}
+      {error && <div>Error: {error}</div>}
+      {selectedAddress ? (
+        <div style={{ border: '1px solid #ccc', padding: '10px', borderRadius: '5px' }}>
+          {selectedAddress.street_line ? (
+            // US format
+            <>
+              <div><strong>Street:</strong> {selectedAddress.street_line}</div>
+              {selectedAddress.secondary && (
+                <div><strong>Secondary:</strong> {selectedAddress.secondary}</div>
+              )}
+              <div><strong>City:</strong> {selectedAddress.city}</div>
+              <div><strong>State:</strong> {selectedAddress.state}</div>
+              <div><strong>Zipcode:</strong> {selectedAddress.zipcode}</div>
+              {selectedAddress.entries > 0 && (
+                <div><strong>Entries:</strong> {selectedAddress.entries}</div>
+              )}
+            </>
+          ) : (
+            // International format
+            <>
+              <div><strong>Street:</strong> {selectedAddress.street}</div>
+              <div><strong>Locality:</strong> {selectedAddress.locality}</div>
+              <div>
+                <strong>Administrative Area:</strong>{' '}
+                {selectedAddress.administrative_area_long || selectedAddress.administrative_area}
+              </div>
+              <div><strong>Postal Code:</strong> {selectedAddress.postal_code}</div>
+              <div><strong>Country:</strong> {selectedAddress.country_iso3}</div>
+            </>
+          )}
+          <button
+            onClick={() => setSelectedAddress(null)}
+            style={{ marginTop: '8px', padding: '4px 8px' }}
+          >
+            Clear
+          </button>
+        </div>
+      ) : (
+        <ul>
+          {suggestions.map((suggestion, index) => (
+            <li
+              key={index}
+              onClick={() => handleSelect(suggestion)}
+              style={{ cursor: 'pointer' }}
+            >
+              {suggestion.displayText}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default SmartyResults;

package/src/countries.js

@@ -0,0 +1,24 @@
+export const COUNTRY_MAP = {
+  'US': { name: 'United States', iso2: 'US', iso3: 'USA' },
+  'CA': { name: 'Canada', iso2: 'CA', iso3: 'CAN' },
+  'MX': { name: 'Mexico', iso2: 'MX', iso3: 'MEX' },
+  'PE': { name: 'Peru', iso2: 'PE', iso3: 'PER' },
+  'CO': { name: 'Colombia', iso2: 'CO', iso3: 'COL' },
+  'CL': { name: 'Chile', iso2: 'CL', iso3: 'CHL' },
+  'AR': { name: 'Argentina', iso2: 'AR', iso3: 'ARG' },
+  'DE': { name: 'Germany', iso2: 'DE', iso3: 'DEU' },
+  'FR': { name: 'France', iso2: 'FR', iso3: 'FRA' },
+  'IT': { name: 'Italy', iso2: 'IT', iso3: 'ITA' },
+  'ES': { name: 'Spain', iso2: 'ES', iso3: 'ESP' },
+  'GB': { name: 'United Kingdom', iso2: 'GB', iso3: 'GBR' },
+  'NL': { name: 'Netherlands', iso2: 'NL', iso3: 'NLD' },
+  'BE': { name: 'Belgium', iso2: 'BE', iso3: 'BEL' },
+  'AT': { name: 'Austria', iso2: 'AT', iso3: 'AUT' },
+  'CH': { name: 'Switzerland', iso2: 'CH', iso3: 'CHE' },
+  'PL': { name: 'Poland', iso2: 'PL', iso3: 'POL' },
+  'PT': { name: 'Portugal', iso2: 'PT', iso3: 'PRT' },
+  'SE': { name: 'Sweden', iso2: 'SE', iso3: 'SWE' },
+  'NO': { name: 'Norway', iso2: 'NO', iso3: 'NOR' },
+  'DK': { name: 'Denmark', iso2: 'DK', iso3: 'DNK' },
+  'FI': { name: 'Finland', iso2: 'FI', iso3: 'FIN' }
+};

package/src/hooks/useEgonLookup.jsx

@@ -0,0 +1,85 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { COUNTRY_MAP } from '../countries';
+
+const useEgonLookup = (query, countryCode = '', debounceMs = 300) => {
+  const [suggestions, setSuggestions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [responseTime, setResponseTime] = useState(null);
+
+  useEffect(() => {
+    if (!query.trim() || !countryCode || !COUNTRY_MAP[countryCode]) {
+      setSuggestions([]);
+      setLoading(false);
+      setError(null);
+      setResponseTime(null);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    const timer = setTimeout(async () => {
+      try {
+        const iso3 = COUNTRY_MAP[countryCode].iso3;
+        
+        const startTime = performance.now();
+        const response = await axios.post(
+          'https://egonapis.egoncloud.com:1257/Egon/api/single-line/full-address',
+          {
+            par: {
+              iso3: iso3
+            },
+            data: {
+              query: query
+            }
+          },
+          {
+            headers: {
+              'token': 'WPT04CNSK01@X04DXCIB'
+            }
+          }
+        );
+        const endTime = performance.now();
+        setResponseTime(Math.round(endTime - startTime));
+
+        const results = response.data.data?.results || [];
+        const formattedSuggestions = results.map(result => {
+          const parts = [
+            result.hn_num,
+            result.street,
+            result.city,
+            result.state,
+            result.zipcode
+          ].filter(Boolean);
+
+          return {
+            ...result,
+            displayText: parts.join(' ')
+          };
+        });
+
+        setSuggestions(formattedSuggestions);
+      } catch (err) {
+        console.error('Egon lookup failed:', err);
+        setError(err.message);
+        setSuggestions([]);
+        setResponseTime(null);
+      } finally {
+        setLoading(false);
+      }
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [query, countryCode, debounceMs]);
+
+  return {
+    suggestions,
+    loading,
+    error,
+    responseTime
+  };
+};
+
+export default useEgonLookup;

package/src/hooks/useEgonNormalize.jsx

@@ -0,0 +1,109 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { COUNTRY_MAP } from '../countries';
+
+const useEgonNormalize = (address, countryCode) => {
+  const [normalizedAddress, setNormalizedAddress] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [responseTime, setResponseTime] = useState(null);
+
+  useEffect(() => {
+    if (!address || !countryCode || !COUNTRY_MAP[countryCode]) {
+      setNormalizedAddress(null);
+      setLoading(false);
+      setError(null);
+      setResponseTime(null);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    const normalizeAddress = async () => {
+      try {
+        const iso3 = COUNTRY_MAP[countryCode].iso3;
+        
+        // Build address object with all available fields from suggestion
+        const addressData = {};
+        const fieldMap = {
+          egoncode_place: 'egoncode_place',
+          egoncode_hn: 'egoncode_hn',
+          country: 'country',
+          state: 'state',
+          region: 'region',
+          province: 'province',
+          city: 'city',
+          district1: 'district1',
+          district2: 'district2',
+          district3: 'district3',
+          zipcode: 'zipcode',
+          street_type: 'street_type',
+          street: 'street',
+          address: 'address',
+          hn: 'hn',
+          building: 'building',
+          sub_building: 'sub_building',
+          organization: 'organization',
+          street_type_str2: 'street_type_str2',
+          street_2: 'street_2',
+          hn_2: 'hn_2'
+        };
+
+        // Add all available fields from the address
+        Object.keys(address).forEach(key => {
+          if (address[key] && fieldMap[key]) {
+            addressData[fieldMap[key]] = address[key];
+          }
+        });
+
+        // Special handling for house number fields
+        if (address.hn_num || address.hn_exp) {
+          const hnValue = address.hn_num || '';
+          const hnExpValue = address.hn_exp || '';
+          addressData.hn = hnExpValue ? `${hnValue}/${hnExpValue}` : hnValue;
+        }
+        
+        const startTime = performance.now();
+        const response = await axios.post(
+          'https://egonapis.egoncloud.com:1257/Egon/api/norm',
+          {
+            par: {
+              iso3: iso3
+            },
+            data: {
+              address: addressData
+            }
+          },
+          {
+            headers: {
+              'token': 'WPT04CNSK01@X04DXCIB'
+            }
+          }
+        );
+        const endTime = performance.now();
+        setResponseTime(Math.round(endTime - startTime));
+
+        setNormalizedAddress(response.data.data?.address);
+      } catch (err) {
+        console.error('Egon normalize failed:', err);
+        setError(err.message);
+        setNormalizedAddress(null);
+        setResponseTime(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    normalizeAddress();
+  }, [address, countryCode]);
+
+  return {
+    normalizedAddress,
+    loading,
+    error,
+    responseTime
+  };
+};
+
+export default useEgonNormalize;

package/src/hooks/useSmartyInternationalLookup.jsx

@@ -0,0 +1,98 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import { COUNTRY_MAP } from '../countries';
+
+const useSmartyInternationalLookup = (
+  query,
+  countryCode = '',
+  selectedAddressId = null,
+  debounceMs = 300
+) => {
+  const [suggestions, setSuggestions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [responseTime, setResponseTime] = useState(null);
+
+  useEffect(() => {
+    if (
+      (!query.trim() && !selectedAddressId) ||
+      !countryCode ||
+      !COUNTRY_MAP[countryCode]
+    ) {
+      setSuggestions([]);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    const timer = setTimeout(async () => {
+      try {
+        const iso3 = COUNTRY_MAP[countryCode].iso3;
+
+        let smartyUrl;
+        if (selectedAddressId) {
+          // Query with address_id for detailed or subunit results
+          smartyUrl = 'https://international-autocomplete.api.smarty.com/v2/lookup/' +
+            `${selectedAddressId}?key=22361352819063501&country=${iso3}`;
+        } else {
+          // Regular search query
+          smartyUrl = 'https://international-autocomplete.api.smarty.com/v2/lookup?' +
+            `key=22361352819063501&country=${iso3}&search=${encodeURIComponent(query)}`;
+        }
+
+        const startTime = performance.now();
+        const response = await axios.get(smartyUrl);
+        const endTime = performance.now();
+        setResponseTime(Math.round(endTime - startTime));
+
+        const results = response.data.candidates || [];
+        const formattedSuggestions = results.map(result => {
+          // Check if this is a detailed result (has street field) or summary result
+          if (result.street) {
+            // Detailed result - format for display
+            const displayText = `${result.street}, ${result.locality}, ` +
+              `${result.administrative_area} ${result.postal_code}`;
+            return {
+              ...result,
+              displayText: displayText,
+              isDetailed: true
+            };
+          } else {
+            // Summary result - use address_text and append entries if > 1
+            let displayText = result.address_text;
+            if (result.entries > 1) {
+              displayText += ` (${result.entries})`;
+            }
+            return {
+              ...result,
+              displayText: displayText,
+              isDetailed: false
+            };
+          }
+        });
+
+        setSuggestions(formattedSuggestions);
+      } catch (err) {
+        console.error('Smarty International lookup failed:', err);
+        setError(err.message);
+        setSuggestions([]);
+      } finally {
+        setLoading(false);
+      }
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [query, countryCode, selectedAddressId, debounceMs]);
+
+  return {
+    suggestions,
+    loading,
+    error,
+    responseTime
+  };
+};
+
+export default useSmartyInternationalLookup;

package/src/hooks/useSmartyUSLookup.jsx

@@ -0,0 +1,83 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+
+const useSmartyUSLookup = (query, selectedAddress = null, debounceMs = 300) => {
+  const [suggestions, setSuggestions] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [responseTime, setResponseTime] = useState(null);
+
+  useEffect(() => {
+    if (!query.trim()) {
+      setSuggestions([]);
+      setLoading(false);
+      setError(null);
+      setResponseTime(null);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    const timer = setTimeout(async () => {
+      try {
+        let smartyUrl = 'https://us-autocomplete-pro.api.smarty.com/' +
+          `lookup?key=22361352819063501&search=${encodeURIComponent(query)}`;
+
+        // Add selected parameter if provided (for secondary expansion)
+        if (selectedAddress) {
+          const selectedParam = `${selectedAddress.street_line} ` +
+            `${selectedAddress.secondary} (${selectedAddress.entries}) ` +
+            `${selectedAddress.city} ${selectedAddress.state} ${selectedAddress.zipcode}`;
+          smartyUrl += `&selected=${encodeURIComponent(selectedParam)}`;
+        }
+
+        const startTime = performance.now();
+        const response = await axios.get(smartyUrl);
+        const endTime = performance.now();
+        setResponseTime(Math.round(endTime - startTime));
+
+        const results = response.data.suggestions || [];
+        const formattedSuggestions = results.map(result => {
+          let whiteSpace = "";
+          let secondary = result.secondary || "";
+
+          if (secondary) {
+            if (result.entries > 1) {
+              secondary += " (" + result.entries + " entries)";
+            }
+            whiteSpace = " ";
+          }
+
+          const displayText = result.street_line + whiteSpace + secondary +
+            " " + result.city + ", " + result.state + " " + result.zipcode;
+
+          return {
+            ...result,
+            displayText: displayText
+          };
+        });
+
+        setSuggestions(formattedSuggestions);
+      } catch (err) {
+        console.error('Smarty US lookup failed:', err);
+        setError(err.message);
+        setSuggestions([]);
+        setResponseTime(null);
+      } finally {
+        setLoading(false);
+      }
+    }, debounceMs);
+
+    return () => clearTimeout(timer);
+  }, [query, selectedAddress, debounceMs]);
+
+  return {
+    suggestions,
+    loading,
+    error,
+    responseTime
+  };
+};
+
+export default useSmartyUSLookup;

package/src/index.js

@@ -0,0 +1,2 @@
+export { default as AddressLookup } from './AddressLookup.jsx';
+export { default } from './AddressLookup.jsx';