@commercelayer/react-components 4.20.0 → 4.21.0-beta.1

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.20.0",
+  "version": "4.21.0-beta.1",
   "description": "The Official Commerce Layer React Components",
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/esm/index.d.ts",
+  "type": "module",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "package.json",
@@ -12,153 +12,13 @@
   ],
   "exports": {
     ".": {
-      "require": "./lib/cjs/index.js",
-      "import": "./lib/esm/index.js"
-    },
-    "./addresses/*": {
-      "require": "./lib/cjs/components/addresses/*.js",
-      "import": "./lib/esm/components/addresses/*.js"
-    },
-    "./auth/*": {
-      "require": "./lib/cjs/components/auth/*.js",
-      "import": "./lib/esm/components/auth/*.js"
-    },
-    "./customers/*": {
-      "require": "./lib/cjs/components/customers/*.js",
-      "import": "./lib/esm/components/customers/*.js"
-    },
-    "./errors/*": {
-      "require": "./lib/cjs/components/errors/*.js",
-      "import": "./lib/esm/components/errors/*.js"
-    },
-    "./gift_cards/*": {
-      "require": "./lib/cjs/components/gift_cards/*.js",
-      "import": "./lib/esm/components/gift_cards/*.js"
-    },
-    "./in_stock_subscriptions/*": {
-      "require": "./lib/cjs/components/in_stock_subscriptions/*.js",
-      "import": "./lib/esm/components/in_stock_subscriptions/*.js"
-    },
-    "./hooks/*": {
-      "require": "./lib/cjs/hooks/*.js",
-      "import": "./lib/esm/hooks/*.js"
-    },
-    "./line_items/*": {
-      "require": "./lib/cjs/components/line_items/*.js",
-      "import": "./lib/esm/components/line_items/*.js"
-    },
-    "./orders/*": {
-      "require": "./lib/cjs/components/orders/*.js",
-      "import": "./lib/esm/components/orders/*.js"
-    },
-    "./parcels/*": {
-      "require": "./lib/cjs/components/parcels/*.js",
-      "import": "./lib/esm/components/parcels/*.js"
-    },
-    "./payment_methods/*": {
-      "require": "./lib/cjs/components/payment_methods/*.js",
-      "import": "./lib/esm/components/payment_methods/*.js"
-    },
-    "./payment_source/*": {
-      "require": "./lib/cjs/components/payment_source/*.js",
-      "import": "./lib/esm/components/payment_source/*.js"
-    },
-    "./prices/*": {
-      "require": "./lib/cjs/components/prices/*.js",
-      "import": "./lib/esm/components/prices/*.js"
-    },
-    "./shipments/*": {
-      "require": "./lib/cjs/components/shipments/*.js",
-      "import": "./lib/esm/components/shipments/*.js"
-    },
-    "./shipping_methods/*": {
-      "require": "./lib/cjs/components/shipping_methods/*.js",
-      "import": "./lib/esm/components/shipping_methods/*.js"
-    },
-    "./skus/*": {
-      "require": "./lib/cjs/components/skus/*.js",
-      "import": "./lib/esm/components/skus/*.js"
-    },
-    "./stock_transfers/*": {
-      "require": "./lib/cjs/components/stock_transfers/*.js",
-      "import": "./lib/esm/components/stock_transfers/*.js"
-    },
-    "./context/*": {
-      "require": "./lib/cjs/context/*.js",
-      "import": "./lib/esm/context/*.js"
-    },
-    "./utils/*": {
-      "require": "./lib/cjs/utils/*.js",
-      "import": "./lib/esm/utils/*.js"
-    },
-    "./component_utils/*": {
-      "require": "./lib/cjs/components/utils/*.js",
-      "import": "./lib/esm/components/utils/*.js"
+      "require": "./lib/index.cjs",
+      "import": "./lib/index.js"
     }
   },
-  "typesVersions": {
-    "*": {
-      "addresses/*": [
-        "lib/esm/components/addresses/*.d.ts"
-      ],
-      "auth/*": [
-        "lib/esm/components/auth/*.d.ts"
-      ],
-      "customers/*": [
-        "lib/esm/components/customers/*.d.ts"
-      ],
-      "errors/*": [
-        "lib/esm/components/errors/*.d.ts"
-      ],
-      "gift_cards/*": [
-        "lib/esm/components/gift_cards/*.d.ts"
-      ],
-      "in_stock_subscriptions/*": [
-        "lib/esm/components/in_stock_subscriptions/*.d.ts"
-      ],
-      "hooks/*": [
-        "lib/esm/hooks/*.d.ts"
-      ],
-      "line_items/*": [
-        "lib/esm/components/line_items/*.d.ts"
-      ],
-      "orders/*": [
-        "lib/esm/components/orders/*.d.ts"
-      ],
-      "parcels/*": [
-        "lib/esm/components/parcels/*.d.ts"
-      ],
-      "payment_methods/*": [
-        "lib/esm/components/payment_methods/*.d.ts"
-      ],
-      "payment_source/*": [
-        "lib/esm/components/payment_source/*.d.ts"
-      ],
-      "prices/*": [
-        "lib/esm/components/prices/*.d.ts"
-      ],
-      "shipments/*": [
-        "lib/esm/components/shipments/*.d.ts"
-      ],
-      "shipping_methods/*": [
-        "lib/esm/components/shipping_methods/*.d.ts"
-      ],
-      "skus/*": [
-        "lib/esm/components/skus/*.d.ts"
-      ],
-      "stock_transfers/*": [
-        "lib/esm/components/stock_transfers/*.d.ts"
-      ],
-      "context/*": [
-        "lib/esm/context/*.d.ts"
-      ],
-      "utils/*": [
-        "lib/esm/utils/*.d.ts"
-      ],
-      "component_utils/*": [
-        "lib/esm/components/utils/*.d.ts"
-      ]
-    }
+  "engines": {
+    "node": ">=18",
+    "pnpm": ">=7"
   },
   "publishConfig": {
     "access": "public"
@@ -186,47 +46,49 @@
   },
   "homepage": "https://github.com/commercelayer/commercelayer-react-components#readme",
   "dependencies": {
-    "@adyen/adyen-web": "^6.8.0",
-    "@commercelayer/organization-config": "^2.1.0",
-    "@commercelayer/sdk": "^6.32.0",
-    "@stripe/react-stripe-js": "^3.1.1",
-    "@stripe/stripe-js": "^5.6.0",
+    "@adyen/adyen-web": "^6.9.0",
+    "@commercelayer/organization-config": "^2.2.0",
+    "@commercelayer/sdk": "^6.34.0",
+    "@stripe/react-stripe-js": "^3.3.0",
+    "@stripe/stripe-js": "^5.9.2",
     "@tanstack/react-table": "^8.21.2",
     "@types/iframe-resizer": "^3.5.13",
     "braintree-web": "^3.115.2",
     "frames-react": "^1.2.2",
     "iframe-resizer": "^4.3.6",
     "jwt-decode": "^4.0.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "rapid-form": "2.1.0"
   },
   "devDependencies": {
     "@commercelayer/js-auth": "^6.7.1",
-    "@faker-js/faker": "^9.5.0",
+    "@faker-js/faker": "^9.5.1",
     "@playwright/test": "^1.50.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
     "@types/braintree-web": "^3.96.16",
-    "@types/lodash": "^4.17.15",
-    "@types/node": "^22.13.4",
+    "@types/lodash": "^4.17.16",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.13.9",
     "@types/prop-types": "^15.7.14",
     "@types/react": "^18.3.1",
     "@types/react-test-renderer": "^18.3.1",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.0.6",
+    "@vitest/coverage-v8": "^3.0.7",
     "jsdom": "^26.0.0",
     "minimize-js": "^1.4.0",
-    "msw": "^2.7.0",
+    "msw": "^2.7.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "tsc-alias": "^1.8.10",
+    "tsc-alias": "^1.8.11",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.3",
-    "vite": "^6.1.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.6"
+    "vitest": "^3.0.7"
   },
   "peerDependencies": {
     "react": ">=18.0.0"
@@ -239,9 +101,8 @@
     "test:e2e": "NODE_ENV=test playwright test",
     "test:e2e:coverage": "nyc pnpm test:e2e && pnpm coverage:report",
     "coverage:report": "nyc report --reporter=html",
-    "build": "tsc -b tsconfig.prod.json tsconfig.prod.esm.json --verbose && pnpm postbuild",
+    "build": "tsup",
     "build:dev": "tsc -b tsconfig.prod.json tsconfig.prod.esm.json --verbose && tsc-alias -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.esm.json",
-    "postbuild": "tsc-alias -p tsconfig.prod.json && tsc-alias -p tsconfig.prod.esm.json &&  minimize-js lib -w -s -b '\"use client\";'",
     "dev": "NODE_OPTIONS='--inspect' next dev"
   }
 }

package/lib/cjs/components/ExternalFunction.d.ts

@@ -1,7 +0,0 @@
-import type { ReactNode, JSX } from 'react';
-interface Props {
-    children: ReactNode;
-    url: string;
-}
-export declare function ExternalFunction({ children, url }: Props): JSX.Element;
-export default ExternalFunction;

package/lib/cjs/components/ExternalFunction.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ExternalFunction=ExternalFunction;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),ExternalFunctionContext_1=tslib_1.__importStar(require("../context/ExternalFunctionContext"));function ExternalFunction({children,url}){return(0,jsx_runtime_1.jsx)(ExternalFunctionContext_1.default.Provider,{value:{url,callExternalFunction:ExternalFunctionContext_1.callExternalFunction},children})}exports.default=ExternalFunction;

package/lib/cjs/components/MetadataInput.d.ts

@@ -1,5 +0,0 @@
-import type { BaseInputComponentProps } from '../typings/index';
-import type { JSX } from "react";
-type Props = BaseInputComponentProps & JSX.IntrinsicElements['input'] & JSX.IntrinsicElements['textarea'];
-export declare function MetadataInput(props: Props): JSX.Element;
-export default MetadataInput;

package/lib/cjs/components/MetadataInput.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.MetadataInput=MetadataInput;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),BaseInput_1=tslib_1.__importDefault(require("./utils/BaseInput"));function MetadataInput(props){return(0,jsx_runtime_1.jsx)(BaseInput_1.default,Object.assign({"data-metadata":!0},props))}exports.default=MetadataInput;

package/lib/cjs/components/SubmitButton.d.ts

@@ -1,10 +0,0 @@
-import type { ReactNode, JSX } from 'react';
-import type { ChildrenFunction } from '../typings/index';
-interface ChildrenProps extends Omit<Props, 'children'> {
-}
-interface Props extends Omit<JSX.IntrinsicElements['button'], 'children' | 'ref'> {
-    children?: ChildrenFunction<ChildrenProps>;
-    label?: string | ReactNode;
-}
-export declare function SubmitButton(props: Props): JSX.Element;
-export default SubmitButton;

package/lib/cjs/components/SubmitButton.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SubmitButton=SubmitButton;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),Parent_1=tslib_1.__importDefault(require("./utils/Parent")),isFunction_1=tslib_1.__importDefault(require("lodash/isFunction"));function SubmitButton(props){const{children,label="Submit"}=props,p=tslib_1.__rest(props,["children","label"]),parentProps=Object.assign(Object.assign({},p),{label});return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("button",Object.assign({type:"submit"},p,{children:(0,isFunction_1.default)(label)?label():label}))}exports.default=SubmitButton;

package/lib/cjs/components/addresses/Address.d.ts

@@ -1,31 +0,0 @@
-import { type JSX } from 'react';
-import type { Address as AddressType } from '@commercelayer/sdk';
-import { type AddressCardsTemplateChildren } from '../utils/AddressCardsTemplate';
-import type { DefaultChildrenType } from '../../typings/globals';
-interface Props extends Omit<JSX.IntrinsicElements['div'], 'children' | 'onSelect'> {
-    children: DefaultChildrenType | AddressCardsTemplateChildren;
-    selectedClassName?: string;
-    disabledClassName?: string;
-    onSelect?: (address: AddressType) => void;
-    addresses?: AddressType[];
-    deselect?: boolean;
-}
-/**
- * The Address component is aimed to read from active context the list of available addresses to generate for each of them a suitable and interactive wrapper ready to deal with addresses data.
- *
- * It accept:
- * - a `selectedClassName` prop to define the className of selected generated address wrapper.
- * - a `disabledClassName` prop to define the className of disabled generated address wrapper.
- * - an `onSelect` prop to define a custom method triggered when an address wrapper is clicked.
- * - an `addresses` prop to define a list of addresses to be used instead of the ones available from active context.
- * - a `deselect` prop to define if the current address is deselected through a custom logic.
- *
- * <span title='Requirements' type='warning'>
- * Must be a child of the `<AddressesContainer>` component.
- * </span>
- * <span title='Children' type='info'>
- * `<AddressField>`,
- * </span>
- */
-export declare function Address(props: Props): JSX.Element;
-export default Address;

package/lib/cjs/components/addresses/Address.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Address=Address;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),AddressChildrenContext_1=tslib_1.__importDefault(require("../../context/AddressChildrenContext")),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),BillingAddressContext_1=tslib_1.__importDefault(require("../../context/BillingAddressContext")),ShippingAddressContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressContext")),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty")),AddressContext_1=tslib_1.__importDefault(require("../../context/AddressContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),AddressCardsTemplate_1=tslib_1.__importDefault(require("../utils/AddressCardsTemplate"));function Address(props){const{children,className,selectedClassName="",disabledClassName="",onSelect,addresses=[],deselect=!1}=props,p=tslib_1.__rest(props,["children","className","selectedClassName","disabledClassName","onSelect","addresses","deselect"]),{addresses:addressesContext}=(0,react_1.useContext)(CustomerContext_1.default),{setBillingAddress,billingCustomerAddressId}=(0,react_1.useContext)(BillingAddressContext_1.default),{setShippingAddress,shippingCustomerAddressId}=(0,react_1.useContext)(ShippingAddressContext_1.default),{shipToDifferentAddress,billingAddressId,shippingAddressId}=(0,react_1.useContext)(AddressContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),[selected,setSelected]=(0,react_1.useState)(null),items=(0,isEmpty_1.default)(addresses)?addressesContext&&addressesContext||[]:addresses;(0,react_1.useEffect)(()=>{items&&!deselect&&items.forEach((address,k)=>{billingCustomerAddressId&&address.reference===billingCustomerAddressId&&selected===null&&setSelected(k),!billingAddressId&&k===selected&&setBillingAddress&&address.reference!=null&&setBillingAddress(address.id,{customerAddressId:address.reference}),shippingCustomerAddressId&&address.reference===shippingCustomerAddressId&&selected===null&&setSelected(k),!shippingAddressId&&k===selected&&setShippingAddress&&address.reference!=null&&setShippingAddress(address.id,{customerAddressId:address.reference})}),deselect&&tslib_1.__awaiter(this,void 0,void 0,function*(){setBillingAddress&&(yield setBillingAddress("")),setShippingAddress&&(yield setShippingAddress(""))})},[deselect,billingCustomerAddressId,shippingCustomerAddressId,addressesContext,shipToDifferentAddress]);const handleSelect=(k,addressId,customerAddressId,disabled,address)=>tslib_1.__awaiter(this,void 0,void 0,function*(){!disabled&&setSelected(k),setBillingAddress&&(yield setBillingAddress(addressId,{customerAddressId})),!disabled&&setShippingAddress&&(yield setShippingAddress(addressId,{customerAddressId})),onSelect&&onSelect(address)}),countryLock=order?.shipping_country_code_lock,components=typeof children=="function"?[]:items.filter(address=>!(setShippingAddress&&countryLock&&countryLock!==address.country_code)).map((address,k)=>{const addressProps={address},disabled=setShippingAddress&&countryLock&&countryLock!==address.country_code||!1,addressSelectedClass=selected===k?`${className||""} ${deselect?"":selectedClassName}`:className,customerAddressId=address?.reference||"",finalClassName=disabled?`${className||""} ${disabledClassName}`:addressSelectedClass;return(0,jsx_runtime_1.jsx)(AddressChildrenContext_1.default.Provider,{value:addressProps,children:(0,jsx_runtime_1.jsx)("div",Object.assign({className:finalClassName,onClick:()=>{handleSelect(k,address.id,customerAddressId,disabled,address)},"data-disabled":disabled},p,{children}))},k)}),parentProps=Object.assign({customerAddresses:items,selected,handleSelect,countryLock},props);return typeof children=="function"?(0,jsx_runtime_1.jsx)(AddressCardsTemplate_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:components})}exports.default=Address;

package/lib/cjs/components/addresses/AddressCountrySelector.d.ts

@@ -1,34 +0,0 @@
-import { type JSX } from 'react';
-import type { BaseSelectComponentProps } from '../../typings/index';
-import { type AddressValuesKeys } from '../../context/BillingAddressFormContext';
-import { type Country } from '../../utils/countryStateCity';
-type TCountryFieldName = 'billing_address_country_code' | 'shipping_address_country_code' | 'customer_address_country_code';
-interface Props extends Omit<BaseSelectComponentProps, 'options' | 'name'>, Pick<JSX.IntrinsicElements['select'], 'className' | 'id' | 'style'> {
-    name: Extract<AddressValuesKeys, TCountryFieldName>;
-    required?: boolean;
-    disabled?: boolean;
-    /**
-     * Optional country list to override default ones.
-     */
-    countries?: Country[];
-}
-/**
- * The AddressInput component creates a form `select` related to the `country_code` attribute of the `address` object.
- *
- * It requires a `name` prop to define the field name associated with the select and accepts most of HTML `select` tag standard props.
- *
- * <span title="Name prop" type="info">
- * The `name` prop must respect the convention of mentioning one of the available addresses forms (`billing_address` or `shipping_address` or `customer_address`) concatenated to the `country_code` address attribute with a `_` separator. Eg.: `billing_address_country_code`.
- * </span>
- *
- * <span title="Requirement" type="warning">
- * It must to be used inside either the `<BillingAddressForm>` or the `<ShippingAddressForm>` component.
- * </span>
- *
- * <span title="Fields" type="info">
- * Check the `addresses` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/addresses/object)
- * for more details about the available attributes to render.
- * </span>
- */
-export declare function AddressCountrySelector(props: Props): JSX.Element;
-export default AddressCountrySelector;

package/lib/cjs/components/addresses/AddressCountrySelector.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressCountrySelector=AddressCountrySelector;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),BaseSelect_1=tslib_1.__importDefault(require("../utils/BaseSelect")),BillingAddressFormContext_1=tslib_1.__importDefault(require("../../context/BillingAddressFormContext")),ShippingAddressFormContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressFormContext")),countryStateCity_1=require("../../utils/countryStateCity"),CustomerAddressFormContext_1=tslib_1.__importDefault(require("../../context/CustomerAddressFormContext"));function AddressCountrySelector(props){const{required=!0,value,name,className,countries}=props,p=tslib_1.__rest(props,["required","value","name","className","countries"]),billingAddress=(0,react_1.useContext)(BillingAddressFormContext_1.default),shippingAddress=(0,react_1.useContext)(ShippingAddressFormContext_1.default),customerAddress=(0,react_1.useContext)(CustomerAddressFormContext_1.default);(0,react_1.useEffect)(()=>{value&&billingAddress?.setValue&&billingAddress.setValue(name,value),value&&shippingAddress?.setValue&&shippingAddress.setValue(name,value),value&&customerAddress?.setValue&&customerAddress.setValue(name,value)},[value]);const hasError=(0,react_1.useMemo)(()=>{var _a,_b,_c,_d,_e,_f;return!!(!((_b=(_a=billingAddress?.errors)===null||_a===void 0?void 0:_a[name])===null||_b===void 0)&&_b.error||!((_d=(_c=shippingAddress?.errors)===null||_c===void 0?void 0:_c[name])===null||_d===void 0)&&_d.error||!((_f=(_e=customerAddress?.errors)===null||_e===void 0?void 0:_e[name])===null||_f===void 0)&&_f.error)},[value,billingAddress?.errors,shippingAddress?.errors,customerAddress?.errors]),errorClassName=billingAddress?.errorClassName||shippingAddress?.errorClassName||customerAddress?.errorClassName,classNameComputed=`${className??""} ${hasError&&errorClassName?errorClassName:""}`;return(0,jsx_runtime_1.jsx)(BaseSelect_1.default,Object.assign({className:classNameComputed,ref:billingAddress?.validation||shippingAddress?.validation||customerAddress?.validation,required,options:(0,countryStateCity_1.getCountries)(countries),name,value},p))}exports.default=AddressCountrySelector;

package/lib/cjs/components/addresses/AddressField.d.ts

@@ -1,61 +0,0 @@
-import { type ReactNode, type JSX } from 'react';
-import type { AddressFieldView } from '../../reducers/AddressReducer';
-import type { Address } from '@commercelayer/sdk';
-import type { ChildrenFunction } from '../../typings/index';
-interface ChildrenProps extends Omit<Props, 'children' | 'name'> {
-    address: Address;
-}
-type ChildrenProp = ChildrenFunction<ChildrenProps>;
-type Props = {
-    type?: 'field';
-    label?: never;
-    onClick?: never;
-    children?: ChildrenProp;
-    name: AddressFieldView;
-    className?: string;
-} | {
-    type?: 'edit';
-    label: string | ReactNode;
-    onClick: (address: Address) => void;
-    children?: ChildrenProp;
-    name?: AddressFieldView;
-    className?: string;
-} | {
-    type?: 'delete';
-    label: string;
-    onClick: () => void;
-    children?: ChildrenProp;
-    name?: AddressFieldView;
-    className?: string;
-} | {
-    type?: 'edit' | 'field' | 'delete';
-    label?: never;
-    onClick?: never;
-    children: ChildrenProp;
-    name?: never;
-    className?: string;
-};
-/**
- * The AddressField component displays any attribute of the `address` object set in the state of the parent `<Address>` component.
- *
- * It accepts a `name` prop to define the attribute to be shown.
- * It also accepts:
- * - a `type` props to enable different kind of behaviors like `field` (default), `edit` or `delete`.
- * - a `label` props to show a custom label if chosen `type` is `edit` or `delete`.
- * - an `onClick` props to define a custom click behavior.
- *
- * <span title="Type `delete`" type="info">
- * Only in case `type` is set to `delete` a default `onClick` behavior will be set to manage current address removal.
- * </span>
- *
- * <span title="Requirement" type="warning">
- * It must to be used inside the `<Address>` component.
- * </span>
- *
- * <span title="Fields" type="info">
- * Check the `addresses` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/addresses/object)
- * for more details about the available attributes to render.
- * </span>
- */
-export declare function AddressField(props: Props): JSX.Element;
-export default AddressField;

package/lib/cjs/components/addresses/AddressField.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressField=AddressField;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),AddressChildrenContext_1=tslib_1.__importDefault(require("../../context/AddressChildrenContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext"));function AddressField(props){const{name,type="field",label,onClick}=props,p=tslib_1.__rest(props,["name","type","label","onClick"]),{address}=(0,react_1.useContext)(AddressChildrenContext_1.default),text=name&&address?address?.[name]:"",{deleteCustomerAddress}=(0,react_1.useContext)(CustomerContext_1.default),handleClick=e=>{e.stopPropagation(),e.preventDefault(),type==="delete"&&deleteCustomerAddress&&address?.reference&&deleteCustomerAddress({customerAddressId:address?.reference}),address&&onClick&&onClick(address)},parentProps=Object.assign({address},props);return props.children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children:props.children})):type==="field"?(0,jsx_runtime_1.jsx)("p",Object.assign({"data-testid":`address-field-${name??""}`},p,{name,children:text})):(0,jsx_runtime_1.jsx)("a",Object.assign({"data-testid":`address-field-${name??""}`},p,{onClick:handleClick,children:label}))}exports.default=AddressField;

package/lib/cjs/components/addresses/AddressInput.d.ts

@@ -1,34 +0,0 @@
-import { type JSX } from 'react';
-import type { BaseInputComponentProps, AddressInputName } from '../../typings/index';
-import { type AddressValuesKeys } from '../../context/BillingAddressFormContext';
-type Props = {
-    /**
-     * The name of the input.
-     */
-    name: Extract<AddressValuesKeys, AddressInputName>;
-    /**
-     * @deprecated
-     * Used to add a custom validation rule. Accept a regex as param.
-     */
-    pattern?: RegExp;
-} & Omit<BaseInputComponentProps, 'name'> & Omit<JSX.IntrinsicElements['input'], 'pattern'> & Omit<JSX.IntrinsicElements['textarea'], 'children' | 'pattern'>;
-/**
- * The AddressInput component creates a form `input` related to a particular address attribute.
- *
- * It requires a `name` prop to define the field name associated with the input and accepts most of HTML `input` tag standard props.
- *
- * <span title="Name prop" type="info">
- * The `name` prop must respect the convention of mentioning one of the available addresses forms (`billing_address` or `shipping_address` or `customer_address`) concatenated to the address attribute name with a `_` separator. Eg.: `billing_address_first_name`.
- * </span>
- *
- * <span title="Requirement" type="warning">
- * It must to be used inside either the `<BillingAddressForm>` or the `<ShippingAddressForm>` component.
- * </span>
- *
- * <span title="Fields" type="info">
- * Check the `addresses` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/addresses/object)
- * for more details about the available attributes to render.
- * </span>
- */
-export declare function AddressInput(props: Props): JSX.Element | null;
-export default AddressInput;

package/lib/cjs/components/addresses/AddressInput.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressInput=AddressInput;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),BaseInput_1=tslib_1.__importDefault(require("../utils/BaseInput")),BillingAddressFormContext_1=tslib_1.__importDefault(require("../../context/BillingAddressFormContext")),ShippingAddressFormContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressFormContext")),validateFormFields_1=require("../../utils/validateFormFields"),CustomerAddressFormContext_1=tslib_1.__importDefault(require("../../context/CustomerAddressFormContext"));function AddressInput(props){const{placeholder="",required,value,className}=props,p=tslib_1.__rest(props,["placeholder","required","value","className"]),billingAddress=(0,react_1.useContext)(BillingAddressFormContext_1.default),shippingAddress=(0,react_1.useContext)(ShippingAddressFormContext_1.default),customerAddress=(0,react_1.useContext)(CustomerAddressFormContext_1.default);(0,react_1.useEffect)(()=>{value&&billingAddress?.setValue&&billingAddress.setValue(p.name,value),value&&shippingAddress?.setValue&&shippingAddress.setValue(p.name,value),value&&customerAddress?.setValue&&customerAddress.setValue(p.name,value)},[value]);const hasError=(0,react_1.useMemo)(()=>{var _a,_b,_c,_d,_e,_f;return!!(!((_b=(_a=billingAddress?.errors)===null||_a===void 0?void 0:_a[p.name])===null||_b===void 0)&&_b.error||!((_d=(_c=shippingAddress?.errors)===null||_c===void 0?void 0:_c[p.name])===null||_d===void 0)&&_d.error||!((_f=(_e=customerAddress?.errors)===null||_e===void 0?void 0:_e[p.name])===null||_f===void 0)&&_f.error)},[value,billingAddress?.errors,shippingAddress?.errors,customerAddress?.errors]),mandatoryField=billingAddress?.isBusiness?(0,validateFormFields_1.businessMandatoryField)(p.name,billingAddress.isBusiness):(0,validateFormFields_1.businessMandatoryField)(p.name,shippingAddress.isBusiness),reqField=required!==void 0?required:mandatoryField,errorClassName=billingAddress?.errorClassName||shippingAddress?.errorClassName,classNameComputed=`${className||""} ${hasError&&errorClassName?errorClassName:""}`;return p.name==="billing_address_billing_info"&&billingAddress.requiresBillingInfo===!1&&required===void 0||p.name==="shipping_address_billing_info"&&shippingAddress.requiresBillingInfo===!1&&required===void 0?null:(0,jsx_runtime_1.jsx)(BaseInput_1.default,Object.assign({ref:billingAddress?.validation||shippingAddress?.validation||customerAddress?.validation,className:classNameComputed,required:reqField,placeholder,defaultValue:value},p))}exports.default=AddressInput;

package/lib/cjs/components/addresses/AddressInputSelect.d.ts

@@ -1,29 +0,0 @@
-import { type JSX } from 'react';
-import type { BaseSelectComponentProps } from '../../typings/index';
-import { type AddressValuesKeys } from '../../context/BillingAddressFormContext';
-type SelectFieldName = `billing_address_${`metadata_${string}`}` | `shipping_address_${`metadata_${string}`}`;
-interface Props extends Omit<BaseSelectComponentProps, 'name'>, Pick<JSX.IntrinsicElements['select'], 'className' | 'id' | 'style'> {
-    name: Extract<AddressValuesKeys, SelectFieldName>;
-    required?: boolean;
-    disabled?: boolean;
-}
-/**
- * The AddressInputSelect component creates a form `select` related to the `metadata` attribute of the `address` object.
- *
- * It requires a `name` prop to define the field name associated with the select and accepts most of HTML `select` tag standard props.
- *
- * <span title="Name prop" type="info">
- * The `name` prop must respect the convention of mentioning one of the available addresses forms (`billing_address` or `shipping_address`) concatenated to the `metadata` address attribute with a `_` separator. Eg.: `billing_address_metadata_your-key`.
- * </span>
- *
- * <span title="Requirement" type="warning">
- * It must to be used inside either the `<BillingAddressForm>` or the `<ShippingAddressForm>` component.
- * </span>
- *
- * <span title="Fields" type="info">
- * Check the `addresses` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/addresses/object)
- * for more details about the available attributes to render.
- * </span>
- */
-export declare function AddressInputSelect(props: Props): JSX.Element;
-export default AddressInputSelect;

package/lib/cjs/components/addresses/AddressInputSelect.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressInputSelect=AddressInputSelect;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),BaseSelect_1=tslib_1.__importDefault(require("../utils/BaseSelect")),BillingAddressFormContext_1=tslib_1.__importDefault(require("../../context/BillingAddressFormContext")),ShippingAddressFormContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressFormContext"));function AddressInputSelect(props){const{required=!0,value,name,className,options}=props,p=tslib_1.__rest(props,["required","value","name","className","options"]),billingAddress=(0,react_1.useContext)(BillingAddressFormContext_1.default),shippingAddress=(0,react_1.useContext)(ShippingAddressFormContext_1.default);(0,react_1.useEffect)(()=>{value&&billingAddress?.setValue&&billingAddress.setValue(name,value),value&&shippingAddress?.setValue&&shippingAddress.setValue(name,value)},[value]);const hasError=(0,react_1.useMemo)(()=>{var _a,_b,_c,_d;return!!(!((_b=(_a=billingAddress?.errors)===null||_a===void 0?void 0:_a[name])===null||_b===void 0)&&_b.error||!((_d=(_c=shippingAddress?.errors)===null||_c===void 0?void 0:_c[name])===null||_d===void 0)&&_d.error)},[value,billingAddress?.errors,shippingAddress?.errors]),errorClassName=billingAddress?.errorClassName||shippingAddress?.errorClassName,classNameComputed=`${className??""} ${hasError&&errorClassName?errorClassName:""}`;return(0,jsx_runtime_1.jsx)(BaseSelect_1.default,Object.assign({className:classNameComputed,ref:billingAddress?.validation||shippingAddress?.validation,required,options,name,value},p))}exports.default=AddressInputSelect;

package/lib/cjs/components/addresses/AddressStateSelector.d.ts

@@ -1,36 +0,0 @@
-import { type JSX } from 'react';
-import type { AddressStateSelectName, BaseSelectComponentProps } from '../../typings/index';
-import { type States } from '../../utils/countryStateCity';
-type Props = Omit<BaseSelectComponentProps, 'options' | 'name'> & {
-    name: AddressStateSelectName;
-    required?: boolean;
-    disabled?: boolean;
-    inputClassName?: string;
-    selectClassName?: string;
-    /**
-     * Optional states list to extend the default one.
-     * This component will try to render a select getting as options the states found for the selected country.
-     * If the country has no states, it will render a text input field instead.
-     */
-    states?: States;
-} & Pick<JSX.IntrinsicElements['select'], 'className' | 'id' | 'style'>;
-/**
- * The AddressInput component creates a form `select` related to the `state_code` attribute of the `address` object.
- *
- * It requires a `name` prop to define the field name associated with the select and accepts most of HTML `select` tag standard props.
- *
- * <span title="Name prop" type="info">
- * The `name` prop must respect the convention of mentioning one of the available addresses forms (`billing_address` or `shipping_address`) concatenated to the `state_code` address attribute with a `_` separator. Eg.: `billing_address_state_code`.
- * </span>
- *
- * <span title="Requirement" type="warning">
- * It must to be used inside either the `<BillingAddressForm>` or the `<ShippingAddressForm>` component.
- * </span>
- *
- * <span title="Fields" type="info">
- * Check the `addresses` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/addresses/object)
- * for more details about the available attributes to render.
- * </span>
- */
-export declare function AddressStateSelector(props: Props): JSX.Element;
-export default AddressStateSelector;

package/lib/cjs/components/addresses/AddressStateSelector.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressStateSelector=AddressStateSelector;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),BaseSelect_1=tslib_1.__importDefault(require("../utils/BaseSelect")),BillingAddressFormContext_1=tslib_1.__importDefault(require("../../context/BillingAddressFormContext")),ShippingAddressFormContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressFormContext")),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty")),countryStateCity_1=require("../../utils/countryStateCity"),AddressContext_1=tslib_1.__importDefault(require("../../context/AddressContext")),BaseInput_1=tslib_1.__importDefault(require("../utils/BaseInput")),CustomerAddressFormContext_1=tslib_1.__importDefault(require("../../context/CustomerAddressFormContext"));function AddressStateSelector(props){var _a,_b,_c;const{required=!1,value,name,className="",inputClassName="",selectClassName="",states}=props,p=tslib_1.__rest(props,["required","value","name","className","inputClassName","selectClassName","states"]),billingAddress=(0,react_1.useContext)(BillingAddressFormContext_1.default),shippingAddress=(0,react_1.useContext)(ShippingAddressFormContext_1.default),customerAddress=(0,react_1.useContext)(CustomerAddressFormContext_1.default),{errors:addressErrors}=(0,react_1.useContext)(AddressContext_1.default),[hasError,setHasError]=(0,react_1.useState)(!1),[countryCode,setCountryCode]=(0,react_1.useState)(""),[val,setVal]=(0,react_1.useState)(value??""),stateOptions=(0,react_1.useMemo)(()=>(0,isEmpty_1.default)(countryCode)?[]:(0,countryStateCity_1.getStateOfCountry)({countryCode,states}),[states,countryCode]),isEmptyStates=(0,react_1.useMemo)(()=>()=>(0,isEmpty_1.default)(stateOptions),[stateOptions]);(0,react_1.useEffect)(()=>{var _a2,_b2,_c2,_d,_e,_f,_g,_h,_j,_k,_l,_m,_o,_p;const billingCountryCode=typeof((_a2=billingAddress?.values)===null||_a2===void 0?void 0:_a2.billing_address_country_code)=="string"?(_b2=billingAddress?.values)===null||_b2===void 0?void 0:_b2.billing_address_country_code:(_d=(_c2=billingAddress?.values)===null||_c2===void 0?void 0:_c2.billing_address_country_code)===null||_d===void 0?void 0:_d.value;billingCountryCode&&billingCountryCode!==countryCode&&setCountryCode(billingCountryCode);const shippingCountryCode=typeof((_e=shippingAddress?.values)===null||_e===void 0?void 0:_e.shipping_address_country_code)=="string"?(_f=shippingAddress?.values)===null||_f===void 0?void 0:_f.shipping_address_country_code:(_h=(_g=shippingAddress?.values)===null||_g===void 0?void 0:_g.shipping_address_country_code)===null||_h===void 0?void 0:_h.value;shippingCountryCode&&shippingCountryCode!==countryCode&&setCountryCode(shippingCountryCode);const changeBillingCountry=[Object.keys(billingAddress).length>0,billingCountryCode,countryCode!==billingCountryCode].every(Boolean);!changeBillingCountry&&value!=null&&value!==""&&value!==val&&(billingAddress.setValue!=null&&billingAddress?.setValue(name,value),setVal(value)),changeBillingCountry&&billingCountryCode&&!(0,countryStateCity_1.isValidState)({stateCode:val??"",countryCode:billingCountryCode,states})&&!isEmptyStates()&&(billingAddress.resetField&&billingAddress?.resetField(name),setVal(""));const changeShippingCountry=[!(0,isEmpty_1.default)(shippingAddress),shippingCountryCode,countryCode!==shippingCountryCode].every(Boolean);if(!changeShippingCountry&&value!=null&&value!==""&&value!==val&&(shippingAddress.setValue!=null&&shippingAddress?.setValue(name,value),setVal(value)),changeShippingCountry&&shippingCountryCode&&!(0,countryStateCity_1.isValidState)({stateCode:val??"",countryCode:shippingCountryCode,states})&&!isEmptyStates()&&(shippingAddress.resetField&&shippingAddress?.resetField(name),setVal("")),!(0,isEmpty_1.default)(billingAddress)){const fieldError=(_k=(_j=billingAddress?.errors)===null||_j===void 0?void 0:_j[name])===null||_k===void 0?void 0:_k.error;setHasError(!!fieldError)}if(!(0,isEmpty_1.default)(customerAddress)){const fieldError=(_m=(_l=customerAddress?.errors)===null||_l===void 0?void 0:_l[name])===null||_m===void 0?void 0:_m.error;setHasError(!!fieldError)}if(!(0,isEmpty_1.default)(shippingAddress)){const fieldError=(_p=(_o=shippingAddress?.errors)===null||_o===void 0?void 0:_o[name])===null||_p===void 0?void 0:_p.error;setHasError(!!fieldError)}return()=>{setHasError(!1)}},[value,(_a=billingAddress?.values)===null||_a===void 0?void 0:_a.billing_address_country_code,(_b=shippingAddress?.values)===null||_b===void 0?void 0:_b.shipping_address_country_code,addressErrors,customerAddress]);const errorClassName=billingAddress?.errorClassName||shippingAddress?.errorClassName||customerAddress?.errorClassName||"",classNameComputed=isEmptyStates()?`${className} ${inputClassName} ${hasError?errorClassName:""}`:`${className} ${selectClassName} ${hasError?errorClassName:""}`;return isEmptyStates()?(0,jsx_runtime_1.jsx)(BaseInput_1.default,Object.assign({},p,{name,ref:billingAddress?.validation||shippingAddress?.validation||customerAddress?.validation,className:classNameComputed,required,placeholder:((_c=p.placeholder)===null||_c===void 0?void 0:_c.label)||"",defaultValue:val,type:"text",onChange:e=>{setVal(e.target.value),billingAddress.setValue!=null&&billingAddress.setValue(name,e.target.value),shippingAddress.setValue!=null&&shippingAddress.setValue(name,e.target.value)}})):(0,jsx_runtime_1.jsx)(BaseSelect_1.default,Object.assign({},p,{className:classNameComputed,ref:billingAddress?.validation||shippingAddress?.validation||customerAddress?.validation,required,options:stateOptions,name,value:val}))}exports.default=AddressStateSelector;

package/lib/cjs/components/addresses/AddressesContainer.d.ts

@@ -1,40 +0,0 @@
-import { type ReactNode, type JSX } from 'react';
-interface Props {
-    children: ReactNode;
-    /**
-     * If true, the shipping address will be considered. Default is false.
-     */
-    shipToDifferentAddress?: boolean;
-    /**
-     * If true, the address will be considered a business address.
-     */
-    isBusiness?: boolean;
-    /**
-     * If true, the shipping address will be considered as primary address. Default is false.
-     */
-    invertAddresses?: boolean;
-}
-/**
- * Main container for the Addresses components.
- * It provides demanded functionalities to show/manage an address or a series of addresses depending on the context in use.
- * In addition it provides order oriented functionalities to manage billing and shipping addresses.
- *
- * It accept:
- * - a `shipToDifferentAddress` prop to define if the order related shipping address will be different from the billing one.
- * - a `isBusiness` prop to define if the current address needs to be threated as a `business` address during creation/update.
- *
- * <span title='Requirements' type='warning'>
- * Must be a child of the `<CommerceLayer>` component.
- * </span>
- * <span title='Children' type='info'>
- * `<BillingAddressContainer>`,
- * `<BillingAddressForm>`,
- * `<ShippingAddressContainer>`,
- * `<ShippingAddressForm>`,
- * `<CustomerAddressForm>`,
- * `<AddressesEmpty>`,
- * `<Addresses>`
- * </span>
- */
-export declare function AddressesContainer(props: Props): JSX.Element;
-export default AddressesContainer;

package/lib/cjs/components/addresses/AddressesContainer.js

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressesContainer=AddressesContainer;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),AddressContext_1=tslib_1.__importStar(require("../../context/AddressContext")),react_1=require("react"),AddressReducer_1=tslib_1.__importStar(require("../../reducers/AddressReducer")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),localStorage_1=require("../../utils/localStorage");function AddressesContainer(props){const{children,shipToDifferentAddress=!1,isBusiness,invertAddresses=!1}=props,[state,dispatch]=(0,react_1.useReducer)(AddressReducer_1.default,AddressReducer_1.addressInitialState),{order,orderId,updateOrder}=(0,react_1.useContext)(OrderContext_1.default),config=(0,react_1.useContext)(CommerceLayerContext_1.default);(0,react_1.useEffect)(()=>{(0,localStorage_1.setCustomerOrderParam)("_save_billing_address_to_customer_address_book","false"),(0,localStorage_1.setCustomerOrderParam)("_save_shipping_address_to_customer_address_book","false")},[]),(0,react_1.useEffect)(()=>(dispatch({type:"setShipToDifferentAddress",payload:{shipToDifferentAddress,isBusiness,invertAddresses}}),()=>{dispatch({type:"cleanup",payload:{}})}),[shipToDifferentAddress,isBusiness,invertAddresses]);const contextValue=Object.assign(Object.assign({},state),{setAddressErrors:(errors,resource)=>{(0,AddressReducer_1.setAddressErrors)({errors,resource,dispatch,currentErrors:state.errors})},setAddress:params=>{AddressContext_1.defaultAddressContext.setAddress(Object.assign(Object.assign({},params),{dispatch}))},saveAddresses:params=>tslib_1.__awaiter(this,void 0,void 0,function*(){return yield(0,AddressReducer_1.saveAddresses)(Object.assign({config,dispatch,updateOrder,order,orderId,state},params))}),setCloneAddress:(id,resource)=>{(0,AddressReducer_1.setCloneAddress)(id,resource,dispatch)}});return(0,jsx_runtime_1.jsx)(AddressContext_1.default.Provider,{value:contextValue,children})}exports.default=AddressesContainer;