@commercelayer/react-components 4.21.0-beta.2 → 4.22.0-beta.0

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,2 @@
+"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

@@ -0,0 +1,50 @@
+import { type JSX } from "react";
+import type { AddressStateSelectName, BaseSelectComponentProps, Option } from "../../typings/index";
+import { type States } from "../../utils/countryStateCity";
+type Props = Omit<BaseSelectComponentProps, "options" | "name" | "placeholder"> & {
+    name: AddressStateSelectName;
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * Optional class name for the input field.
+     */
+    inputClassName?: string;
+    /**
+     * Optional placeholder for the input field.
+     */
+    inputPlaceholder?: string;
+    /**
+     * Optional class name for the select field.
+     */
+    selectClassName?: string;
+    /**
+     * Optional placeholder for the select field.
+     */
+    selectPlaceholder?: Option;
+    /**
+     * 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

@@ -0,0 +1,2 @@
+"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;const{required=!1,value,name,className="",inputClassName="",inputPlaceholder,selectClassName="",selectPlaceholder,states}=props,p=tslib_1.__rest(props,["required","value","name","className","inputClassName","inputPlaceholder","selectClassName","selectPlaceholder","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,_c,_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=(_c=billingAddress?.values)===null||_c===void 0?void 0:_c.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:inputPlaceholder??"",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,{placeholder:selectPlaceholder,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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,2 @@
+"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;

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

@@ -0,0 +1,26 @@
+import type { ChildrenFunction } from '../../typings/index';
+import { type JSX } from 'react';
+interface Props extends Omit<JSX.IntrinsicElements['span'], 'children'> {
+    /**
+     * Function allow you to customize the component
+     */
+    children?: ChildrenFunction<Omit<Props, 'children'>>;
+    /**
+     * Label to show. Default: 'No addresses available.'
+     */
+    emptyText?: string;
+}
+/**
+ * The AddressesEmpty component is aimed to display a message in case no customer address is available, otherwise it won't show.
+ *
+ * It accepts an optional `emptyText` prop to customize default message.
+ *
+ * It is also possible to wrap inside this component any children elements to create a completely custom experience regarding the absence of customer addresses.
+ *
+ * <span title="Requirement" type="warning">
+ * It must to be used inside the `<AddressesContainer>` component.
+ * </span>
+ *
+ */
+export declare function AddressesEmpty(props: Props): JSX.Element | null;
+export default AddressesEmpty;

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

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AddressesEmpty=AddressesEmpty;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),react_1=require("react");function AddressesEmpty(props){const{children,emptyText="No addresses available."}=props,p=tslib_1.__rest(props,["children","emptyText"]),{addresses}=(0,react_1.useContext)(CustomerContext_1.default),parentProps=Object.assign({emptyText},p);return addresses==null||addresses.length>0?null:children!==void 0?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("span",Object.assign({"data-testid":"addresses-empty"},p,{children:emptyText}))}exports.default=AddressesEmpty;

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

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

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

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BillingAddressContainer=BillingAddressContainer;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),BillingAddressContext_1=tslib_1.__importDefault(require("../../context/BillingAddressContext")),react_1=require("react"),BillingAddressReducer_1=tslib_1.__importStar(require("../../reducers/BillingAddressReducer")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),AddressContext_1=tslib_1.__importDefault(require("../../context/AddressContext"));function BillingAddressContainer(props){const{children}=props,[state,dispatch]=(0,react_1.useReducer)(BillingAddressReducer_1.default,BillingAddressReducer_1.billingAddressInitialState),config=(0,react_1.useContext)(CommerceLayerContext_1.default),{order,include,addResourceToInclude}=(0,react_1.useContext)(OrderContext_1.default),{shipToDifferentAddress,setCloneAddress}=(0,react_1.useContext)(AddressContext_1.default);(0,react_1.useEffect)(()=>(include?.includes("billing_address")||addResourceToInclude({newResource:"billing_address",resourcesIncluded:include}),order&&config&&(0,BillingAddressReducer_1.setBillingCustomerAddressId)({dispatch,order,setCloneAddress}),()=>{dispatch({type:"cleanup",payload:{}})}),[order,include]);const contextValue=Object.assign(Object.assign({},state),{setBillingAddress:(id,options)=>tslib_1.__awaiter(this,void 0,void 0,function*(){yield(0,BillingAddressReducer_1.setBillingAddress)(id,{config,dispatch,order,shipToDifferentAddress,customerAddressId:options?.customerAddressId}),setCloneAddress(id,"billing_address")})});return(0,jsx_runtime_1.jsx)(BillingAddressContext_1.default.Provider,{value:contextValue,children})}exports.default=BillingAddressContainer;

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

@@ -0,0 +1,34 @@
+import { type ReactNode, type JSX } from 'react';
+import type { CustomFieldMessageError } from '../../reducers/AddressReducer';
+type Props = {
+    children: ReactNode;
+    /**
+     * Define if current form needs to be reset over a defined boolean condition
+     */
+    reset?: boolean;
+    /**
+     * Define children input and select classnames assigned in case of validation error.
+     */
+    errorClassName?: string;
+    fieldEvent?: 'blur' | 'change';
+    /**
+     * Callback to customize the error message for a specific field. Called for each error in the form.
+     */
+    customFieldMessageError?: CustomFieldMessageError;
+} & Omit<JSX.IntrinsicElements['form'], 'onSubmit'>;
+/**
+ * Form container for creating or editing an order related billing address or a customer address, depending on the context in use.
+ *
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<AddressesContainer>` component.
+ * Can optionally be a child of the `<OrderContainer>` component, when it needs to be used in the checkout process and store the billing address in the order object.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<AddressInput>`,
+ * `<AddressCountrySelector>`,
+ * `<AddressStateSelector>`,
+ * `<SaveAddressesButton>`
+ * </span>
+ */
+export declare function BillingAddressForm(props: Props): JSX.Element;
+export default BillingAddressForm;

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

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.BillingAddressForm=BillingAddressForm;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),AddressContext_1=tslib_1.__importDefault(require("../../context/AddressContext")),rapid_form_1=require("rapid-form"),react_1=require("react"),BillingAddressFormContext_1=tslib_1.__importDefault(require("../../context/BillingAddressFormContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),localStorage_1=require("../../utils/localStorage");function BillingAddressForm(props){const{children,errorClassName,autoComplete="on",reset=!1,customFieldMessageError,fieldEvent="change"}=props,p=tslib_1.__rest(props,["children","errorClassName","autoComplete","reset","customFieldMessageError","fieldEvent"]),{validation,values,errors,reset:resetForm,setValue:setValueForm,setError:setErrorForm}=(0,rapid_form_1.useRapidForm)({fieldEvent}),{setAddressErrors,setAddress,isBusiness}=(0,react_1.useContext)(AddressContext_1.default),{saveAddressToCustomerAddressBook,order,include,addResourceToInclude,includeLoaded}=(0,react_1.useContext)(OrderContext_1.default),ref=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>{var _a,_b,_c,_d,_e,_f;if(include?.includes("billing_address")?includeLoaded?.billing_address||addResourceToInclude({newResourceLoaded:{billing_address:!0}}):addResourceToInclude({newResource:"billing_address"}),customFieldMessageError!=null&&Object.keys(values).length>0){for(const name in values)if(Object.prototype.hasOwnProperty.call(values,name)){const field=values[name],fieldName=field.name,value=field.value,inError=errors[fieldName]!=null;if(customFieldMessageError!=null&&fieldName!=null&&value!=null){values[fieldName.replace("shipping_address_","")]=value;const customMessage=customFieldMessageError({field:fieldName,value,values});if(customMessage!=null)if(typeof customMessage=="string")if(inError){const errorMsg=(_a=errors[fieldName])===null||_a===void 0?void 0:_a.message;errorMsg!=null&&errorMsg!==customMessage&&(errors[fieldName].message=customMessage)}else setErrorForm({name:fieldName,code:"VALIDATION_ERROR",message:customMessage});else customMessage.forEach(element=>{var _a2;const{field:field2,value:value2,isValid,message}=element,fieldInError=errors[field2]!=null;if(isValid)fieldInError&&(delete errors[field2],setValueForm(field2,value2??""));else if(fieldInError){const errorMsg=(_a2=errors[field2])===null||_a2===void 0?void 0:_a2.message;errorMsg!=null&&errorMsg!==message&&(errors[field2].message=message,setValueForm(field2,value2??""))}else setErrorForm({name:field2,code:"VALIDATION_ERROR",message})})}}}if(errors!=null&&Object.keys(errors).length>0){const formErrors=[];for(const fieldName in errors){const code=(_b=errors[fieldName])===null||_b===void 0?void 0:_b.code,message=(_c=errors[fieldName])===null||_c===void 0?void 0:_c.message;formErrors.push({code,message:message??"",resource:"billing_address",field:fieldName})}setAddressErrors(formErrors,"billing_address")}else if(values&&Object.keys(values).length>0){setAddressErrors([],"billing_address");for(const name in values){const field=values[name];(field?.value||field?.required===!1&&field?.type!=="checkbox")&&(values[name.replace("billing_address_","")]=field.value,delete values[name]),field?.type==="checkbox"&&(delete values[name],saveAddressToCustomerAddressBook({type:"billing_address",value:field.checked}))}setAddress({values:Object.assign(Object.assign({},values),isBusiness&&{business:isBusiness}),resource:"billing_address"})}const checkboxChecked=((_e=(_d=ref.current)===null||_d===void 0?void 0:_d.querySelector('[name="billing_address_save_to_customer_book"]'))===null||_e===void 0?void 0:_e.checked)||(0,localStorage_1.getSaveBillingAddressToAddressBook)();reset&&(values!=null&&Object.keys(values).length>0||errors!=null&&Object.keys(errors).length>0||checkboxChecked)&&(saveAddressToCustomerAddressBook&&saveAddressToCustomerAddressBook({type:"billing_address",value:!1}),ref&&((_f=ref.current)===null||_f===void 0||_f.reset(),resetForm({target:ref.current}),setAddressErrors([],"billing_address"),setAddress({values:{},resource:"billing_address"})))},[errors,values,reset,include,includeLoaded,isBusiness]);const providerValues={isBusiness,values,validation,setValue:(name,value)=>{setValueForm(name,value);const field={[name.replace("billing_address_","")]:value};setAddress({values:Object.assign(Object.assign(Object.assign({},values),field),isBusiness&&{business:isBusiness}),resource:"billing_address"})},errorClassName,requiresBillingInfo:order?.requires_billing_info||!1,errors,resetField:name=>{resetForm({currentTarget:ref.current},name)}};return(0,jsx_runtime_1.jsx)(BillingAddressFormContext_1.default.Provider,{value:providerValues,children:(0,jsx_runtime_1.jsx)("form",Object.assign({ref,autoComplete},p,{children}))})}exports.default=BillingAddressForm;

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

@@ -0,0 +1,18 @@
+import { type ReactNode, type JSX } from 'react';
+import type { ChildrenFunction } from '../../typings/index';
+import type { Order } from '@commercelayer/sdk';
+interface TOnClick {
+    success: boolean;
+    order?: Order;
+}
+interface ChildrenProps extends Omit<Props, 'children'> {
+}
+interface Props extends Omit<JSX.IntrinsicElements['button'], 'children' | 'onClick'> {
+    children?: ChildrenFunction<ChildrenProps>;
+    label?: string | ReactNode;
+    onClick?: (params: TOnClick) => void;
+    addressId?: string;
+    requiredMetadataFields?: string[];
+}
+export declare function SaveAddressesButton(props: Props): JSX.Element;
+export default SaveAddressesButton;

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

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SaveAddressesButton=SaveAddressesButton;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),AddressContext_1=tslib_1.__importDefault(require("../../context/AddressContext")),addressesManager_1=require("../../utils/addressesManager"),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),isFunction_1=tslib_1.__importDefault(require("lodash/isFunction")),validateFormFields_1=require("../../utils/validateFormFields"),formCleaner_1=require("../../utils/formCleaner");function SaveAddressesButton(props){const{children,label="Continue to delivery",resource,disabled=!1,addressId,requiredMetadataFields,onClick}=props,p=tslib_1.__rest(props,["children","label","resource","disabled","addressId","requiredMetadataFields","onClick"]),{errors,billing_address:billingAddress,shipToDifferentAddress,shipping_address:shippingAddress,saveAddresses,billingAddressId,shippingAddressId,invertAddresses}=(0,react_1.useContext)(AddressContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),{customerEmail:email,addresses,isGuest,createCustomerAddress}=(0,react_1.useContext)(CustomerContext_1.default),[forceDisable,setForceDisable]=(0,react_1.useState)(disabled);let customerEmail=(isGuest===!0||typeof isGuest>"u")&&!order?.customer_email;if(email!=null&&email!==""){const isValidEmail=(0,validateFormFields_1.validateValue)(email,"customer_email","email","orders");customerEmail=Object.keys(isValidEmail).length>0}const shippingAddressCleaned=Object.keys(shippingAddress??{}).reduce((acc,key)=>Object.assign(Object.assign({},acc),{[key.replace("shipping_address_","")]:shippingAddress[key].value}),{}),{billingDisable,shippingDisable}=(0,addressesManager_1.addressesController)({invertAddresses,requiresBillingInfo:order?.requires_billing_info,billing_address:billingAddress,shipping_address:shippingAddressCleaned,shipToDifferentAddress,shippingAddressId,billingAddressId,errors,requiredMetadataFields}),countryLockDisable=(0,addressesManager_1.countryLockController)({countryCodeLock:order?.shipping_country_code_lock,addresses,shipToDifferentAddress,billingAddressId,billing_address:billingAddress,shipping_address:shippingAddress,shippingAddressId,lineItems:order?.line_items}),disable=disabled||customerEmail||billingDisable||(invertAddresses&&shippingAddressId?!1:shippingDisable)||countryLockDisable,handleClick=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(errors&&Object.keys(errors).length===0&&!disable){let response={success:!1};switch(setForceDisable(!0),!0){case(order!=null&&addressId!=null&&createCustomerAddress!=null&&saveAddresses!=null):{response=yield saveAddresses({customerEmail:email,customerAddress:{resource:invertAddresses?"shipping_address":"billing_address",id:addressId}});break}case(order!=null&&saveAddresses!=null):{response=yield saveAddresses({customerEmail:email});break}case createCustomerAddress!=null:{const address=invertAddresses?Object.assign({},(0,formCleaner_1.formCleaner)(shippingAddress)):Object.assign({},(0,formCleaner_1.formCleaner)(billingAddress));addressId&&(address.id=addressId),createCustomerAddress(address),response={success:!0};break}}setForceDisable(!1),onClick&&response.success&&onClick(response)}}),parentProps=Object.assign(Object.assign({},p),{label,resource,handleClick,disabled:disable});return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("button",Object.assign({type:"button",disabled:disable||forceDisable,onClick:()=>{handleClick()}},p,{children:(0,isFunction_1.default)(label)?label():label}))}exports.default=SaveAddressesButton;

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

@@ -0,0 +1,7 @@
+import { type JSX } from 'react';
+import type { DefaultChildrenType } from '../../typings/globals';
+interface Props {
+    children: DefaultChildrenType;
+}
+export declare function ShippingAddressContainer(props: Props): JSX.Element;
+export default ShippingAddressContainer;

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

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShippingAddressContainer=ShippingAddressContainer;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),ShippingAddressContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressContext")),react_1=require("react"),ShippingAddressReducer_1=tslib_1.__importStar(require("../../reducers/ShippingAddressReducer")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),AddressContext_1=tslib_1.__importDefault(require("../../context/AddressContext"));function ShippingAddressContainer(props){const{children}=props,[state,dispatch]=(0,react_1.useReducer)(ShippingAddressReducer_1.default,ShippingAddressReducer_1.shippingAddressInitialState),config=(0,react_1.useContext)(CommerceLayerContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),{setCloneAddress}=(0,react_1.useContext)(AddressContext_1.default);(0,react_1.useEffect)(()=>(order&&config&&(0,ShippingAddressReducer_1.setShippingCustomerAddressId)({dispatch,order,setCloneAddress}),()=>{dispatch({type:"cleanup",payload:{}})}),[config,order]);const contextValue=Object.assign(Object.assign({},state),{setShippingAddress:(id,options)=>tslib_1.__awaiter(this,void 0,void 0,function*(){yield(0,ShippingAddressReducer_1.setShippingAddress)(id,{config,dispatch,order,customerAddressId:options?.customerAddressId}),setCloneAddress(id,"shipping_address")})});return(0,jsx_runtime_1.jsx)(ShippingAddressContext_1.default.Provider,{value:contextValue,children})}exports.default=ShippingAddressContainer;

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

@@ -0,0 +1,31 @@
+import { type ReactNode, type JSX } from 'react';
+import type { CustomFieldMessageError } from '../../reducers/AddressReducer';
+interface Props extends Omit<JSX.IntrinsicElements['form'], 'onSubmit'> {
+    children: ReactNode;
+    reset?: boolean;
+    errorClassName?: string;
+    fieldEvent?: 'blur' | 'change';
+    /**
+     * Callback to customize the error message for a specific field. Called for each error in the form.
+     */
+    customFieldMessageError?: CustomFieldMessageError;
+}
+/**
+ * Form container for creating or editing an order related shipping address.
+ *
+ * It accept:
+ * - a `reset` prop to define if current form needs to be reset over a defined boolean condition.
+ * - a `errorClassName` prop to define children input and select classnames assigned in case of validation error.
+ *
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<AddressesContainer>` component.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<AddressInput>`,
+ * `<AddressCountrySelector>`,
+ * `<AddressStateSelector>`,
+ * `<SaveAddressesButton>`
+ * </span>
+ */
+export declare function ShippingAddressForm(props: Props): JSX.Element;
+export default ShippingAddressForm;

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

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShippingAddressForm=ShippingAddressForm;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),AddressContext_1=tslib_1.__importDefault(require("../../context/AddressContext")),rapid_form_1=require("rapid-form"),react_1=require("react"),ShippingAddressFormContext_1=tslib_1.__importDefault(require("../../context/ShippingAddressFormContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),localStorage_1=require("../../utils/localStorage");function ShippingAddressForm(props){const{children,errorClassName,autoComplete="on",fieldEvent="change",reset=!1,customFieldMessageError}=props,p=tslib_1.__rest(props,["children","errorClassName","autoComplete","fieldEvent","reset","customFieldMessageError"]),{validation,values,errors,reset:resetForm,setValue:setValueForm,setError:setErrorForm}=(0,rapid_form_1.useRapidForm)({fieldEvent}),{setAddressErrors,setAddress,shipToDifferentAddress,isBusiness,invertAddresses}=(0,react_1.useContext)(AddressContext_1.default),{saveAddressToCustomerAddressBook,include,addResourceToInclude,includeLoaded}=(0,react_1.useContext)(OrderContext_1.default),ref=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>{var _a,_b,_c,_d,_e,_f;if(include?.includes("shipping_address")?includeLoaded?.shipping_address||addResourceToInclude({newResourceLoaded:{shipping_address:!0}}):addResourceToInclude({newResource:"shipping_address"}),customFieldMessageError!=null&&Object.keys(values).length>0){for(const name in values)if(Object.prototype.hasOwnProperty.call(values,name)){const field=values[name],fieldName=field.name,value=field.value,inError=errors[fieldName]!=null;if(customFieldMessageError!=null&&fieldName!=null&&value!=null){values[fieldName.replace("shipping_address_","")]=value;const customMessage=customFieldMessageError({field:fieldName,value,values});if(customMessage!=null)if(typeof customMessage=="string")if(inError){const errorMsg=(_a=errors[fieldName])===null||_a===void 0?void 0:_a.message;errorMsg!=null&&errorMsg!==customMessage&&(errors[fieldName].message=customMessage)}else setErrorForm({name:fieldName,code:"VALIDATION_ERROR",message:customMessage});else customMessage.forEach(element=>{var _a2;const{field:field2,value:value2,isValid,message}=element,fieldInError=errors[field2]!=null;if(isValid)fieldInError&&(delete errors[field2],setValueForm(field2,value2??""));else if(fieldInError){const errorMsg=(_a2=errors[field2])===null||_a2===void 0?void 0:_a2.message;errorMsg!=null&&errorMsg!==message&&(errors[field2].message=message,setValueForm(field2,value2??""))}else setErrorForm({name:field2,code:"VALIDATION_ERROR",message})})}}}if(errors!=null&&Object.keys(errors).length>0){const formErrors=[];for(const fieldName in errors){const code=(_b=errors[fieldName])===null||_b===void 0?void 0:_b.code,message=(_c=errors[fieldName])===null||_c===void 0?void 0:_c.message;formErrors.push({code,message:message??"",resource:"shipping_address",field:fieldName})}(shipToDifferentAddress||invertAddresses)&&setAddressErrors(formErrors,"shipping_address")}else if(values&&Object.keys(values).length>0&&(shipToDifferentAddress||invertAddresses)){setAddressErrors([],"shipping_address");for(const name in values){const field=values[name];(field?.value||field?.required===!1&&field?.type!=="checkbox")&&(values[name.replace("shipping_address_","")]=field.value,delete values[name]),field?.type==="checkbox"&&(delete values[name],saveAddressToCustomerAddressBook({type:"shipping_address",value:field.checked}))}setAddress({values:Object.assign(Object.assign({},values),isBusiness&&{business:isBusiness}),resource:"shipping_address"})}const checkboxChecked=((_e=(_d=ref.current)===null||_d===void 0?void 0:_d.querySelector('[name="shipping_address_save_to_customer_book"]'))===null||_e===void 0?void 0:_e.checked)||(0,localStorage_1.getSaveShippingAddressToAddressBook)();reset&&(values!=null&&Object.keys(values).length>0||errors!=null&&Object.keys(errors).length>0||checkboxChecked)&&(saveAddressToCustomerAddressBook&&saveAddressToCustomerAddressBook({type:"shipping_address",value:!1}),ref&&((_f=ref.current)===null||_f===void 0||_f.reset(),resetForm({target:ref.current}),setAddressErrors([],"shipping_address"),setAddress({values:{},resource:"shipping_address"})))},[values,errors,shipToDifferentAddress,reset,include,includeLoaded,isBusiness]);const providerValues={values,validation,setValue:(name,value)=>{setValueForm(name,value);const field={[name.replace("shipping_address_","")]:value};setAddress({values:Object.assign(Object.assign(Object.assign({},values),field),isBusiness&&{business:isBusiness}),resource:"shipping_address"})},errorClassName,errors,resetField:name=>{resetForm({currentTarget:ref.current},name)}};return(0,jsx_runtime_1.jsx)(ShippingAddressFormContext_1.default.Provider,{value:providerValues,children:(0,jsx_runtime_1.jsx)("form",Object.assign({ref,autoComplete},p,{children}))})}exports.default=ShippingAddressForm;