@nuskin/shipping-address-form 1.5.1 → 1.7.0

package/README.md

@@ -1,10 +1,11 @@
 # @nuskin/shipping-address-form
 
-React wrapper around [`@nuskin/address-lookup`](https://www.npmjs.com/package/@nuskin/address-lookup) that adds shipping-specific fields, actions, and Contentstack-driven form configuration.
+React package that provides standalone address lookup and shipping address form components.
 
 The component:
 
-- renders address lookup and validation via `@nuskin/address-lookup`
+- exports `AddressLookup` for standalone address entry and validation
+- exports `ShippingAddressForm`, which adds shipping-specific fields, actions, and Contentstack-driven form configuration around `AddressLookup`
 - loads a shipping form definition from Contentstack based on the logged-in country and form type
 - renders pre-address and post-address shipping fields in the order defined by content
 - loads localized strings once and passes the derived `formStrings` subset into `AddressLookup`
@@ -24,7 +25,6 @@ Peer dependencies:
 
 Direct dependencies used by this package:
 
-- `@nuskin/address-lookup`
 - `@nuskin/contentstack-lib`
 - `@nuskin/foundation-ui-components`
 - `react-phone-number-input`
@@ -72,7 +72,27 @@ export default function Example() {
 }
 ```
 
-## Props
+## Standalone AddressLookup
+
+`AddressLookup` is available when an application needs address autocomplete and validation without
+the shipping-specific fields and actions.
+
+```jsx
+import {
+  AddressLookup,
+  normalizeAddressForm,
+  DEFAULT_ADDRESS_FORM,
+  SUPPORTED_COUNTRIES
+} from '@nuskin/shipping-address-form'
+```
+
+`AddressLookup` accepts `onAddressSelect`, `country`, `language`, `address`, `entryMode`, `requireValidation`,
+`readOnlyView`, `showManualValidateButton`, `validationRequestId`, `strings`, `formDefinition`, and
+`deferFormLookup`. It supports Smarty autocomplete and validation for US and international
+addresses. `normalizeAddressForm`, `DEFAULT_ADDRESS_FORM`, and `SUPPORTED_COUNTRIES` are exported
+for consumers that need to provide or reuse address form definitions.
+
+## ShippingAddressForm Props
 
 ### `country`
 
@@ -95,7 +115,7 @@ When the selected destination country matches the logged-in country, the wrapper
 shipping form's `addressForm` to `AddressLookup` as `formDefinition`. When the user selects a different
 destination country, the wrapper lets `AddressLookup` load that country's address form directly.
 
-This destination-country list is separate from the phone country selector. The phone field uses `SUPPORTED_COUNTRIES` from `@nuskin/address-lookup`.
+This destination-country list is separate from the phone country selector. The phone field uses the package's `SUPPORTED_COUNTRIES` export.
 
 ### `type`
 
@@ -126,7 +146,7 @@ Initial form values. Supported keys depend on the current Contentstack shipping
 The `address` prop is used in two places:
 
 - to initialize the shipping fields managed by `ShippingAddressForm`
-- to pass address values and optional verification metadata through to `@nuskin/address-lookup`
+- to pass address values and optional verification metadata through to the built-in `AddressLookup`
 
 Common examples include:
 
@@ -138,7 +158,7 @@ Common examples include:
 - `saveToAccount`
 - `saveAsDefault`
 
-Address fields used by `@nuskin/address-lookup` can also be provided and are passed through as `address`.
+Address fields used by `AddressLookup` can also be provided and are passed through as `address`.
 
 The incoming `address` object may also include `AddressLookup` verification metadata, for example:
 
@@ -197,6 +217,28 @@ When `true`, the wrapper renders in display-only mode:
 
 Readonly mode is intended for displaying an existing address without allowing edits or validation actions.
 
+### Address Entry and Validation
+
+`entryMode` controls which address entry experience is available when the component initializes:
+
+- `'both'` (default) starts with autocomplete and lets the user switch to manual entry.
+- `'manual'` starts with manual entry and hides the mode switch.
+- `'autocomplete'` starts with autocomplete and hides the mode switch.
+
+`requireValidation` defaults to `true`. Set it to `false` when a market accepts manually entered
+addresses without validation. `showManualValidateButton` defaults to `true` for `ShippingAddressForm`
+and controls whether manual entry shows its Verify Address button. For example:
+
+```jsx
+<ShippingAddressForm
+  entryMode="manual"
+  requireValidation={false}
+  showManualValidateButton={false}
+/>
+```
+
+For standalone `AddressLookup`, `showManualValidateButton` defaults to `false`.
+
 ### `onAction`
 
 - Type: `(payload) => void`
@@ -295,7 +337,7 @@ Width handling:
 
 ### Address fields
 
-Address validation is delegated to `@nuskin/address-lookup`.
+Address validation is delegated to the built-in `AddressLookup` component.
 
 When the Save button is clicked:
 
@@ -341,7 +383,7 @@ This component uses shipping-level labels such as:
 - `invalidPhone`
 - `fieldRequired`
 
-The wrapper also derives `labels.formStrings` from root-level content fields and passes that object into `@nuskin/address-lookup`.
+The wrapper also derives `labels.formStrings` from root-level content fields and passes that object into `AddressLookup`.
 
 That derived object includes the common address strings expected by `AddressLookup`, along with its US and international verification strings.
 
@@ -352,7 +394,7 @@ When the phone country is changed, the phone label is reloaded for that selected
 This package imports:
 
 - `react-phone-number-input/style.css`
-- `src/styles/shippingAddressForm.css` in the built package
+- `src/shippingAddressForm/styles/shippingAddressForm.css` in the built package
 
 The component uses namespaced CSS classes starting with:
 
@@ -388,10 +430,10 @@ Run the local test app:
 yarn dev
 ```
 
-The local test app supports readonly mode through query params:
+The local test app supports entry configuration and readonly mode through query params:
 
 ```text
-?country=US&language=en&type=shipping&readOnlyView=true
+?country=US&language=en&type=shipping&entryMode=manual&requireValidation=false&showManualValidateButton=false
 ```
 
 Build the package:

package/dist/addressLookup/AddressLookup.js

@@ -0,0 +1,74 @@
+"use strict";
+
+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 = ({
+  onAddressSelect,
+  country = 'US',
+  address = null,
+  entryMode = 'both',
+  requireValidation = true,
+  readOnlyView = false,
+  showManualValidateButton = false,
+  validationRequestId = 0,
+  language = 'en',
+  strings = null,
+  formDefinition = null,
+  deferFormLookup = false
+}) => {
+  const isUS = country === 'US';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "ns-address-lookup",
+    children: isUS ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SmartyUSResults.default, {
+      onSelect: onAddressSelect,
+      initialAddress: address,
+      entryMode: entryMode,
+      requireValidation: requireValidation,
+      readOnlyView: readOnlyView,
+      showManualValidateButton: showManualValidateButton,
+      validationRequestId: validationRequestId,
+      language: language,
+      strings: strings,
+      formDefinition: formDefinition,
+      deferFormLookup: deferFormLookup
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SmartyIntlResults.default, {
+      countryCode: country,
+      onSelect: onAddressSelect,
+      initialAddress: address,
+      entryMode: entryMode,
+      requireValidation: requireValidation,
+      readOnlyView: readOnlyView,
+      showManualValidateButton: showManualValidateButton,
+      validationRequestId: validationRequestId,
+      language: language,
+      strings: strings,
+      formDefinition: formDefinition,
+      deferFormLookup: deferFormLookup
+    })
+  });
+};
+AddressLookup.propTypes = {
+  onAddressSelect: _propTypes.default.func,
+  country: _propTypes.default.string,
+  address: _componentPropTypes.addressPropType,
+  entryMode: _propTypes.default.oneOf(['both', 'autocomplete', 'manual']),
+  requireValidation: _propTypes.default.bool,
+  readOnlyView: _propTypes.default.bool,
+  showManualValidateButton: _propTypes.default.bool,
+  validationRequestId: _propTypes.default.number,
+  language: _propTypes.default.string,
+  strings: _componentPropTypes.labelStringsPropType,
+  formDefinition: _componentPropTypes.formDefinitionPropType,
+  deferFormLookup: _propTypes.default.bool
+};
+var _default = exports.default = AddressLookup;
+//# sourceMappingURL=AddressLookup.js.map

package/dist/addressLookup/AddressLookup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddressLookup.js","names":["_propTypes","_interopRequireDefault","require","_SmartyUSResults","_SmartyIntlResults","_componentPropTypes","_jsxRuntime","e","__esModule","default","AddressLookup","onAddressSelect","country","address","entryMode","requireValidation","readOnlyView","showManualValidateButton","validationRequestId","language","strings","formDefinition","deferFormLookup","isUS","jsx","className","children","onSelect","initialAddress","countryCode","propTypes","PropTypes","func","string","addressPropType","oneOf","bool","number","labelStringsPropType","formDefinitionPropType","_default","exports"],"sources":["../../src/addressLookup/AddressLookup.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport './styles/addressLookup.css';\nimport SmartyUSResults from './components/SmartyUSResults';\nimport SmartyIntlResults from './components/SmartyIntlResults';\nimport { addressPropType, formDefinitionPropType, labelStringsPropType } from './utils/componentPropTypes';\n\nconst AddressLookup = ({ \n  onAddressSelect, \n  country = 'US',\n  address = null,\n  entryMode = 'both',\n  requireValidation = true,\n  readOnlyView = false,\n  showManualValidateButton = false,\n  validationRequestId = 0,\n  language = 'en',\n  strings = null,\n  formDefinition = null,\n  deferFormLookup = false\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          entryMode={entryMode}\n          requireValidation={requireValidation}\n          readOnlyView={readOnlyView}\n          showManualValidateButton={showManualValidateButton}\n          validationRequestId={validationRequestId}\n          language={language}\n          strings={strings}\n          formDefinition={formDefinition}\n          deferFormLookup={deferFormLookup}\n        />\n      ) : (\n        <SmartyIntlResults \n          countryCode={country}\n          onSelect={onAddressSelect}\n          initialAddress={address}\n          entryMode={entryMode}\n          requireValidation={requireValidation}\n          readOnlyView={readOnlyView}\n          showManualValidateButton={showManualValidateButton}\n          validationRequestId={validationRequestId}\n          language={language}\n          strings={strings}\n          formDefinition={formDefinition}\n          deferFormLookup={deferFormLookup}\n        />\n      )}\n    </div>\n  );\n};\n\nAddressLookup.propTypes = {\n  onAddressSelect: PropTypes.func,\n  country: PropTypes.string,\n  address: addressPropType,\n  entryMode: PropTypes.oneOf(['both', 'autocomplete', 'manual']),\n  requireValidation: PropTypes.bool,\n  readOnlyView: PropTypes.bool,\n  showManualValidateButton: PropTypes.bool,\n  validationRequestId: PropTypes.number,\n  language: PropTypes.string,\n  strings: labelStringsPropType,\n  formDefinition: formDefinitionPropType,\n  deferFormLookup: PropTypes.bool\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;AAA2G,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAD,uBAAAM,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE3G,MAAMG,aAAa,GAAGA,CAAC;EACrBC,eAAe;EACfC,OAAO,GAAG,IAAI;EACdC,OAAO,GAAG,IAAI;EACdC,SAAS,GAAG,MAAM;EAClBC,iBAAiB,GAAG,IAAI;EACxBC,YAAY,GAAG,KAAK;EACpBC,wBAAwB,GAAG,KAAK;EAChCC,mBAAmB,GAAG,CAAC;EACvBC,QAAQ,GAAG,IAAI;EACfC,OAAO,GAAG,IAAI;EACdC,cAAc,GAAG,IAAI;EACrBC,eAAe,GAAG;AACpB,CAAC,KAAK;EACJ,MAAMC,IAAI,GAAGX,OAAO,KAAK,IAAI;EAE7B,oBACE,IAAAN,WAAA,CAAAkB,GAAA;IAAKC,SAAS,EAAC,mBAAmB;IAAAC,QAAA,EAC/BH,IAAI,gBACH,IAAAjB,WAAA,CAAAkB,GAAA,EAACrB,gBAAA,CAAAM,OAAe;MACdkB,QAAQ,EAAEhB,eAAgB;MAC1BiB,cAAc,EAAEf,OAAQ;MACxBC,SAAS,EAAEA,SAAU;MACrBC,iBAAiB,EAAEA,iBAAkB;MACrCC,YAAY,EAAEA,YAAa;MAC3BC,wBAAwB,EAAEA,wBAAyB;MACnDC,mBAAmB,EAAEA,mBAAoB;MACzCC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,cAAc,EAAEA,cAAe;MAC/BC,eAAe,EAAEA;IAAgB,CAClC,CAAC,gBAEF,IAAAhB,WAAA,CAAAkB,GAAA,EAACpB,kBAAA,CAAAK,OAAiB;MAChBoB,WAAW,EAAEjB,OAAQ;MACrBe,QAAQ,EAAEhB,eAAgB;MAC1BiB,cAAc,EAAEf,OAAQ;MACxBC,SAAS,EAAEA,SAAU;MACrBC,iBAAiB,EAAEA,iBAAkB;MACrCC,YAAY,EAAEA,YAAa;MAC3BC,wBAAwB,EAAEA,wBAAyB;MACnDC,mBAAmB,EAAEA,mBAAoB;MACzCC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,cAAc,EAAEA,cAAe;MAC/BC,eAAe,EAAEA;IAAgB,CAClC;EACF,CACE,CAAC;AAEV,CAAC;AAEDZ,aAAa,CAACoB,SAAS,GAAG;EACxBnB,eAAe,EAAEoB,kBAAS,CAACC,IAAI;EAC/BpB,OAAO,EAAEmB,kBAAS,CAACE,MAAM;EACzBpB,OAAO,EAAEqB,mCAAe;EACxBpB,SAAS,EAAEiB,kBAAS,CAACI,KAAK,CAAC,CAAC,MAAM,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC;EAC9DpB,iBAAiB,EAAEgB,kBAAS,CAACK,IAAI;EACjCpB,YAAY,EAAEe,kBAAS,CAACK,IAAI;EAC5BnB,wBAAwB,EAAEc,kBAAS,CAACK,IAAI;EACxClB,mBAAmB,EAAEa,kBAAS,CAACM,MAAM;EACrClB,QAAQ,EAAEY,kBAAS,CAACE,MAAM;EAC1Bb,OAAO,EAAEkB,wCAAoB;EAC7BjB,cAAc,EAAEkB,0CAAsB;EACtCjB,eAAe,EAAES,kBAAS,CAACK;AAC7B,CAAC;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAhC,OAAA,GAEaC,aAAa","ignoreList":[]}

package/dist/addressLookup/components/LocationPinIcon.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const LocationPinIcon = ({
+  className = ''
+}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+  viewBox: "0 0 24 24",
+  "aria-hidden": "true",
+  className: className,
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.8",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    d: "M12 21s-6-5.2-6-11a6 6 0 1 1 12 0c0 5.8-6 11-6 11z"
+  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+    cx: "12",
+    cy: "10",
+    r: "2.5"
+  })]
+});
+LocationPinIcon.propTypes = {
+  className: _propTypes.default.string
+};
+var _default = exports.default = LocationPinIcon;
+//# sourceMappingURL=LocationPinIcon.js.map

package/dist/addressLookup/components/LocationPinIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocationPinIcon.js","names":["_propTypes","_interopRequireDefault","require","_jsxRuntime","e","__esModule","default","LocationPinIcon","className","jsxs","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","children","jsx","d","cx","cy","r","propTypes","PropTypes","string","_default","exports"],"sources":["../../../src/addressLookup/components/LocationPinIcon.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst LocationPinIcon = ({ className = '' }) => (\n  <svg\n    viewBox=\"0 0 24 24\"\n    aria-hidden=\"true\"\n    className={className}\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"1.8\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M12 21s-6-5.2-6-11a6 6 0 1 1 12 0c0 5.8-6 11-6 11z\" />\n    <circle cx=\"12\" cy=\"10\" r=\"2.5\" />\n  </svg>\n);\n\nLocationPinIcon.propTypes = {\n  className: PropTypes.string\n};\n\nexport default LocationPinIcon;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAmC,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEnC,MAAMG,eAAe,GAAGA,CAAC;EAAEC,SAAS,GAAG;AAAG,CAAC,kBACzC,IAAAL,WAAA,CAAAM,IAAA;EACEC,OAAO,EAAC,WAAW;EACnB,eAAY,MAAM;EAClBF,SAAS,EAAEA,SAAU;EACrBG,IAAI,EAAC,MAAM;EACXC,MAAM,EAAC,cAAc;EACrBC,WAAW,EAAC,KAAK;EACjBC,aAAa,EAAC,OAAO;EACrBC,cAAc,EAAC,OAAO;EAAAC,QAAA,gBAEtB,IAAAb,WAAA,CAAAc,GAAA;IAAMC,CAAC,EAAC;EAAoD,CAAE,CAAC,eAC/D,IAAAf,WAAA,CAAAc,GAAA;IAAQE,EAAE,EAAC,IAAI;IAACC,EAAE,EAAC,IAAI;IAACC,CAAC,EAAC;EAAK,CAAE,CAAC;AAAA,CAC/B,CACN;AAEDd,eAAe,CAACe,SAAS,GAAG;EAC1Bd,SAAS,EAAEe,kBAAS,CAACC;AACvB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAApB,OAAA,GAEaC,eAAe","ignoreList":[]}