@commercelayer/react-components 4.7.9 → 4.7.11

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

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

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type Address as AddressType } from '@commercelayer/sdk';
 import { type AddressCardsTemplateChildren } from '../utils/AddressCardsTemplate';
 import type { DefaultChildrenType } from '../../typings/globals';
@@ -9,5 +10,22 @@ interface Props extends Omit<JSX.IntrinsicElements['div'], 'children' | 'onSelec
     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/AddressCountrySelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseSelectComponentProps } from '../../typings/index';
 import { type AddressValuesKeys } from '../../context/BillingAddressFormContext';
 import { type Country } from '../../utils/countryStateCity';
@@ -11,5 +12,23 @@ interface Props extends Omit<BaseSelectComponentProps, 'options' | 'name'>, Pick
      */
     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/AddressField.d.ts

@@ -35,5 +35,27 @@ type Props = {
     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/AddressInput.d.ts

@@ -1,7 +1,33 @@
+/// <reference types="react" />
 import { type BaseInputComponentProps, type AddressInputName } from '../../typings/index';
 import { type AddressValuesKeys } from '../../context/BillingAddressFormContext';
 type Props = {
+    /**
+     * The name of the input.
+     */
     name: Extract<AddressValuesKeys, AddressInputName>;
+    /**
+     * Used to add a custom validation rule.
+     */
+    pattern?: RegExp | string;
 } & Omit<BaseInputComponentProps, 'name'> & JSX.IntrinsicElements['input'] & Omit<JSX.IntrinsicElements['textarea'], 'children'>;
+/**
+ * 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/AddressStateSelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type AddressStateSelectName, type BaseSelectComponentProps } from '../../typings/index';
 import { type States } from '../../utils/countryStateCity';
 type Props = Omit<BaseSelectComponentProps, 'options' | 'name'> & {
@@ -13,5 +14,23 @@ type Props = Omit<BaseSelectComponentProps, 'options' | 'name'> & {
      */
     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/AddressesContainer.d.ts

@@ -1,8 +1,36 @@
 import { type ReactNode } 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;
 }
+/**
+ * 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/AddressesEmpty.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 interface Props extends Omit<JSX.IntrinsicElements['span'], 'children'> {
     /**
@@ -9,5 +10,17 @@ interface Props extends Omit<JSX.IntrinsicElements['span'], 'children'> {
      */
     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/BillingAddressForm.d.ts

@@ -1,8 +1,28 @@
 import { type ReactNode } from 'react';
 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;
 } & 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/SaveAddressesButton.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SaveAddressesButton=void 0;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"));function SaveAddressesButton(props){const{children,label="Continue to delivery",resource,disabled=!1,addressId,onClick}=props,p=tslib_1.__rest(props,["children","label","resource","disabled","addressId","onClick"]),{errors,billing_address:billingAddress,shipToDifferentAddress,shipping_address:shippingAddress,saveAddresses,billingAddressId,shippingAddressId}=(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;email!=null&&email!==""&&(customerEmail=!1);const billingDisable=(0,addressesManager_1.billingAddressController)({billing_address:billingAddress,errors,billingAddressId,requiresBillingInfo:order?.requires_billing_info}),shippingDisable=(0,addressesManager_1.shippingAddressController)({billingDisable,errors,shipToDifferentAddress,shipping_address:shippingAddress,shippingAddressId}),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||shippingDisable||countryLockDisable,handleClick=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(errors&&Object.keys(errors).length===0&&!disable){let response={success:!1};if(setForceDisable(!0),order&&saveAddresses!=null)response=yield saveAddresses(email);else if(createCustomerAddress&&billingAddress){const address=Object.assign({},billingAddress);addressId&&(address.id=addressId),createCustomerAddress(address),response={success:!0}}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.SaveAddressesButton=SaveAddressesButton,exports.default=SaveAddressesButton;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SaveAddressesButton=void 0;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");function SaveAddressesButton(props){const{children,label="Continue to delivery",resource,disabled=!1,addressId,onClick}=props,p=tslib_1.__rest(props,["children","label","resource","disabled","addressId","onClick"]),{errors,billing_address:billingAddress,shipToDifferentAddress,shipping_address:shippingAddress,saveAddresses,billingAddressId,shippingAddressId}=(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 billingDisable=(0,addressesManager_1.billingAddressController)({billing_address:billingAddress,errors,billingAddressId,requiresBillingInfo:order?.requires_billing_info}),shippingDisable=(0,addressesManager_1.shippingAddressController)({billingDisable,errors,shipToDifferentAddress,shipping_address:shippingAddress,shippingAddressId}),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||shippingDisable||countryLockDisable,handleClick=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(errors&&Object.keys(errors).length===0&&!disable){let response={success:!1};if(setForceDisable(!0),order&&saveAddresses!=null)response=yield saveAddresses(email);else if(createCustomerAddress&&billingAddress){const address=Object.assign({},billingAddress);addressId&&(address.id=addressId),createCustomerAddress(address),response={success:!0}}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.SaveAddressesButton=SaveAddressesButton,exports.default=SaveAddressesButton;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props {
     children: DefaultChildrenType;

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

@@ -4,5 +4,22 @@ interface Props extends Omit<JSX.IntrinsicElements['form'], 'onSubmit'> {
     reset?: boolean;
     errorClassName?: string;
 }
+/**
+ * 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/auth/CommerceLayer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props {
     /**

package/lib/cjs/components/customers/CustomerContainer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props {
     children: DefaultChildrenType;
@@ -7,7 +8,25 @@ interface Props {
     isGuest?: boolean;
 }
 /**
- * The CustomerContainer component manages the customer state.
+ * Main container for the Customers components.
+ * It stores - in its context - the details of an active customer, if present.
+ *
+ * It also accept a `isGuest` prop to define if no customer is currently set as active.
+ *
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<CommerceLayer>` component.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<CustomerField>`,
+ * `<CustomerInput>`,
+ * `<SaveCustomerButton>`,
+ * `<AddressesContainer>`,
+ * `<AddressesEmpty>`,
+ * `<CustomerPaymentSource>`,
+ * `<CustomerPaymentSourceEmpty>`,
+ * `<PaymentMethodsContainer>`,
+ * `<OrdersList>`
+ * </span>
  */
 export declare function CustomerContainer(props: Props): JSX.Element;
 export default CustomerContainer;

package/lib/cjs/components/customers/CustomerField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ConditionalElement } from '../../typings/index';
 import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
 type StockTransferFieldChildrenProps = TGenericChildrenProps<TResources['Customer']>;
@@ -5,5 +6,20 @@ type TCondition = ConditionalElement<Exclude<TResources['Customer'], 'resource'>
 type Props = {
     children?: (props: StockTransferFieldChildrenProps) => JSX.Element;
 } & TCondition;
+/**
+ * The CustomerField component displays any attribute of the `customer` set in the state of the parent `<CustomerContainer>` component.
+ *
+ * It also accepts a `tagElement` props to enable specific tag-related props.
+ * For examples, when `tagElement` is set to `img` it will also accept props related to `<img>` tag such as `height` and `width`.
+ *
+ * <span title="Requirement" type="warning">
+ * It must to be used inside the `<CustomerContainer>` component.
+ * </span>
+ *
+ * <span title="Fields" type="info">
+ * Check the `customers` resource from our [Core API documentation](https://docs.commercelayer.io/core/v/api-reference/customers/object)
+ * for more details about the available attributes to render.
+ * </span>
+ */
 export declare function CustomerField<P extends Props>(props: P): JSX.Element;
 export default CustomerField;

package/lib/cjs/components/customers/CustomerInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseInputComponentProps } from '../../typings/index';
 type Props = {
     name?: 'customer_email' | string;

package/lib/cjs/components/customers/CustomerInput.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CustomerInput=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),BaseInput_1=tslib_1.__importDefault(require("../utils/BaseInput")),rapid_form_1=require("rapid-form"),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),validateFormFields_1=require("../../utils/validateFormFields");function CustomerInput(props){const{name="customer_email",placeholder="",required=!0,saveOnBlur=!1,type="email",value,onBlur,className,errorClassName}=props,p=tslib_1.__rest(props,["name","placeholder","required","saveOnBlur","type","value","onBlur","className","errorClassName"]),{validation,values,errors,setError}=(0,rapid_form_1.useRapidForm)({fieldEvent:"blur"}),{saveCustomerUser,setCustomerErrors,setCustomerEmail}=(0,react_1.useContext)(CustomerContext_1.default),[hasError,setHasError]=(0,react_1.useState)(!1),handleOnBlur=e=>tslib_1.__awaiter(this,void 0,void 0,function*(){var _a;const v=(_a=e?.target)===null||_a===void 0?void 0:_a.value,checkValue=(0,validateFormFields_1.validateValue)(v,name,type,"customer_address"),isValid=Object.keys(checkValue).length===0;saveOnBlur&&isValid&&Object.keys(values).length>0?saveCustomerUser!=null&&(yield saveCustomerUser(values[name].value),onBlur&&onBlur(values[name].value)):setError(checkValue)});(0,react_1.useEffect)(()=>{var _a,_b;if(Object.keys(errors).length>0){const formErrors=[];for(const fieldName in errors){const code=(_a=errors[fieldName])===null||_a===void 0?void 0:_a.code,message=(_b=errors[fieldName])===null||_b===void 0?void 0:_b.message;formErrors.push({code,message:message||"",resource:"orders",field:fieldName})}formErrors.length>0&&(setHasError(!0),setCustomerErrors&&setCustomerErrors(formErrors))}else Object.keys(values).length>0&&(setCustomerErrors&&setCustomerErrors([]),setCustomerEmail&&setCustomerEmail(values[name].value),setHasError(!1));return()=>{setHasError(!1)}},[errors]);const classNameComputed=`${className??""} ${hasError&&errorClassName?errorClassName:""}`;return(0,jsx_runtime_1.jsx)(BaseInput_1.default,Object.assign({name,type,ref:validation,required,placeholder,defaultValue:value,onBlur:e=>{handleOnBlur(e)},className:classNameComputed},p))}exports.CustomerInput=CustomerInput,exports.default=CustomerInput;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.CustomerInput=void 0;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),BaseInput_1=tslib_1.__importDefault(require("../utils/BaseInput")),rapid_form_1=require("rapid-form"),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),validateFormFields_1=require("../../utils/validateFormFields");function CustomerInput(props){const{name="customer_email",placeholder="",required=!0,saveOnBlur=!1,type="email",value,onBlur,className,errorClassName}=props,p=tslib_1.__rest(props,["name","placeholder","required","saveOnBlur","type","value","onBlur","className","errorClassName"]),{validation,values,errors,setError}=(0,rapid_form_1.useRapidForm)({fieldEvent:"blur"}),{saveCustomerUser,setCustomerErrors,setCustomerEmail}=(0,react_1.useContext)(CustomerContext_1.default),[hasError,setHasError]=(0,react_1.useState)(!1),handleOnBlur=e=>tslib_1.__awaiter(this,void 0,void 0,function*(){var _a;const v=(_a=e?.target)===null||_a===void 0?void 0:_a.value,checkValue=(0,validateFormFields_1.validateValue)(v,name,type,"orders"),isValid=Object.keys(checkValue).length===0;if(saveOnBlur&&Object.keys(values).length>0&&saveCustomerUser!=null&&(yield saveCustomerUser(values[name].value),onBlur&&onBlur(values[name].value)),!isValid){const currentError=Object.assign(Object.assign({},checkValue),{name:checkValue?.field});setError(currentError)}});(0,react_1.useEffect)(()=>{var _a,_b;if(Object.keys(errors).length>0){const formErrors=[];for(const fieldName in errors){const code=(_a=errors[fieldName])===null||_a===void 0?void 0:_a.code,message=(_b=errors[fieldName])===null||_b===void 0?void 0:_b.message;formErrors.push({code,message:message||"",resource:"orders",field:fieldName})}formErrors.length>0&&(setHasError(!0),setCustomerErrors&&setCustomerErrors(formErrors))}else setCustomerErrors&&setCustomerErrors([]),setHasError(!1);return Object.keys(values).length>0&&setCustomerEmail&&setCustomerEmail(values[name].value),()=>{setHasError(!1)}},[errors]);const classNameComputed=`${className??""} ${hasError&&errorClassName?errorClassName:""}`;return(0,jsx_runtime_1.jsx)(BaseInput_1.default,Object.assign({name,type,ref:validation,required,placeholder,defaultValue:value,onBlur:e=>{handleOnBlur(e)},className:classNameComputed},p))}exports.CustomerInput=CustomerInput,exports.default=CustomerInput;

package/lib/cjs/components/customers/CustomerPaymentSource.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type DefaultChildrenType } from '../../typings/globals';
 interface Props {
     children?: DefaultChildrenType;

package/lib/cjs/components/customers/CustomerPaymentSourceEmpty.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 interface Props extends Omit<JSX.IntrinsicElements['span'], 'children'> {
     /**

package/lib/cjs/components/customers/MyAccountLink.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 interface ChildrenProps extends Omit<Props, 'children'> {
     /**
@@ -23,5 +24,15 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
      */
     customDomain?: string;
 }
+/**
+ * This component generates a link to the hosted mfe-my-account application.
+ * In this way you can connect your shop application with our hosted micro-frontend and let your customers manage their account with zero code.
+ *
+ * <span title="Requirement" type="warning">
+ * Must be a child of the `<CustomerContainer>` component. <br />
+ * </span>
+ *
+ * @link https://github.com/commercelayer/mfe-my-account
+ */
 export declare function MyAccountLink(props: Props): JSX.Element;
 export default MyAccountLink;

package/lib/cjs/components/customers/MyIdentityLink.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 interface ChildrenProps extends Omit<Props, 'children'> {
     /**
@@ -35,5 +36,20 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
      */
     customDomain?: string;
 }
+/**
+ * This component generates a link to the hosted mfe-identity application.
+ *
+ * In this way you can connect your shop application with our hosted micro-frontend and let your customers manage their account with zero code.
+ *
+ * <span title="Requirement" type="warning">
+ * Must be a child of the `<CommerceLayer>` component.
+ * </span>
+ *
+ * <span title="My Identity" type="info">
+ * The Commerce Layer Identity micro frontend (React) provides you with an application, powered by Commerce Layer APIs, handling customer login and sign-up functionalities
+ * </span>
+ *
+ * @link https://github.com/commercelayer/mfe-identity
+ */
 export declare function MyIdentityLink(props: Props): JSX.Element;
 export default MyIdentityLink;

package/lib/cjs/components/errors/Errors.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CodeErrorType } from '../../typings/errors';
 import { type ChildrenFunction } from '../../typings/index';
 export type TResourceError = 'addresses' | 'billing_address' | 'gift_cards' | 'gift_card_or_coupon_code' | 'line_items' | 'orders' | 'payment_methods' | 'prices' | 'shipments' | 'shipping_address' | 'customer_address' | 'sku_options' | 'variant' | 'in_stock_subscriptions';

package/lib/cjs/components/gift_cards/GiftCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseState } from '../../typings/index';
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props extends Omit<JSX.IntrinsicElements['form'], 'children'> {

package/lib/cjs/components/gift_cards/GiftCardCurrencySelector.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseSelectComponentProps } from '../../typings/index';
 type Props = Omit<BaseSelectComponentProps, 'options' | 'name'> & {
     required?: boolean;

package/lib/cjs/components/gift_cards/GiftCardInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseInputComponentProps, type GiftCardInputName } from '../../typings/index';
 type Props = {
     name: GiftCardInputName;

package/lib/cjs/components/gift_cards/GiftCardOrCouponCode.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 import type { CodeType } from '../../reducers/OrderReducer';
 interface ChildrenProps extends Omit<Props, 'children'> {

package/lib/cjs/components/gift_cards/GiftCardOrCouponForm.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { Order } from '@commercelayer/sdk';
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props extends Omit<JSX.IntrinsicElements['form'], 'onSubmit'> {

package/lib/cjs/components/gift_cards/GiftCardOrCouponInput.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseInputComponentProps } from '../../typings/index';
 import { type OrderCodeType } from '../../reducers/OrderReducer';
 type Props = {

package/lib/cjs/components/in_stock_subscriptions/InStockSubscriptionButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 interface Props extends Omit<JSX.IntrinsicElements['button'], 'children' | 'onClick'> {
     /**

package/lib/cjs/components/in_stock_subscriptions/InStockSubscriptionsContainer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type DefaultChildrenType } from '../../typings/globals';
 interface Props {
     /**

package/lib/cjs/components/line_items/LineItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type TLineItem = 'gift_cards' | 'payment_methods' | 'promotions' | 'shipments' | 'skus' | 'bundles' | 'adjustments';
 interface Props {
     children: JSX.Element | JSX.Element[];

package/lib/cjs/components/line_items/LineItemAmount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent, type BasePriceType } from '../../typings/index';
 type Props = BaseAmountComponent & {
     type?: BasePriceType;

package/lib/cjs/components/line_items/LineItemCode.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type LineItem } from '@commercelayer/sdk';
 import { type ChildrenFunction } from '../../typings/index';
 export interface TLineItemCode extends Omit<Props, 'children'> {

package/lib/cjs/components/line_items/LineItemField.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ConditionalElement } from '../../typings/index';
 import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
 type LineItemFieldChildrenProps = TGenericChildrenProps<TResources['LineItem']>;

package/lib/cjs/components/line_items/LineItemImage.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type LineItem } from '@commercelayer/sdk';
 import type { ChildrenFunction } from '../../typings/index';
 import { type TLineItem } from './LineItem';

package/lib/cjs/components/line_items/LineItemName.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { LineItem } from '@commercelayer/sdk';
 import { type ChildrenFunction } from '../../typings/index';
 export interface TLineItemName extends Omit<Props, 'children'> {

package/lib/cjs/components/line_items/LineItemsContainer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DefaultChildrenType } from '../../typings/globals';
 interface Props {
     children: DefaultChildrenType;

package/lib/cjs/components/line_items/LineItemsCount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type TypeAccepted } from '../../utils/getLineItemsCount';
 import { type ChildrenFunction } from '../../typings/index';
 interface ChildrenProps extends Omit<Props, 'children'> {

package/lib/cjs/components/line_items/LineItemsEmpty.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ChildrenFunction } from '../../typings/index';
 interface ChildrenProps extends Omit<Props, 'children'> {
     quantity: number;

package/lib/cjs/components/orders/AddToCartButton.d.ts

@@ -5,14 +5,26 @@ interface TAddToCartButton extends Omit<Props, 'children'> {
     handleClick: () => AddToCartReturn;
 }
 type BuyNowMode = {
+    /**
+     * Once item has been added, it redirects to the hosted checkout micro-frontend.
+     */
     buyNowMode: true;
+    /**
+     * If you have a self-hosted checkout, you can pass the url to redirect to it.
+     */
     checkoutUrl?: string;
 } | {
     buyNowMode?: false;
     checkoutUrl?: never;
 };
 type THostedCart = {
+    /**
+     * Once item has been added, it redirects to the hosted cart micro-frontend.
+     */
     redirectToHostedCart: true;
+    /**
+     * If you have a self-hosted cart, you can pass the url to redirect to it.
+     */
     hostedCartUrl?: string;
 } | {
     redirectToHostedCart?: false;
@@ -54,5 +66,25 @@ type Props = {
      */
     skuListId?: string;
 } & TButton & BuyNowMode & THostedCart;
+/**
+ * This component adds `line_items` to the cart (aka draft order), see the [how to create a shopping cart](https://docs.commercelayer.io/core/v/how-tos/placing-orders/shopping-cart/create-a-shopping-cart) documentation,
+ * for a general understanding of the process.
+ *
+ * It can be used to add `skus` or `bundle` by receiving `skuCode` or `bundleCode` from props.
+ * When `skuListId` is passed as prop , it will add all the `skus` in the `sku_list` to the cart.
+ *
+ * It's possible to select the quantity of the item to add to cart by passing the `quantity` prop.
+ *
+ * When this component is used inside a `<Skus>` or `<SkuList>` component, it will automatically get the `skuCode` and quantity from the context,
+ * so you don't need to pass it as prop.
+ *
+ * It can automatically redirect to the cart page of the application using the `redirectToHostedCart` prop and optionally a `hostedCartUrl`.
+ *
+ * With a similar logic, you can enable a "Buy Now" experience and automatically redirect the customer to the checkout page using the `buyNowMode` prop and optionally a `checkoutUrl`.
+ *
+ * <span title="Requirement" type="warning">
+ * Must be a child of the `<OrderContainer>` component.
+ * </span>
+ */
 export declare function AddToCartButton(props: Props): JSX.Element;
 export default AddToCartButton;

package/lib/cjs/components/orders/AdjustmentAmount.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type BaseAmountComponent } from '../../typings/index';
 export declare function AdjustmentAmount(props: BaseAmountComponent): JSX.Element;
 export default AdjustmentAmount;

package/lib/cjs/components/orders/CartLink.d.ts

@@ -35,5 +35,13 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
      */
     customDomain?: string;
 }
+/**
+ * This component generates a link to the hosted mfe-cart application.
+ * In this way you can connect your shop application with our hosted micro-frontend.
+ *
+ * <span title="Requirement" type="warning">
+ * Must be a child of the `<OrderContainer>` component. <br />
+ * </span>
+ */
 export declare function CartLink(props: Props): JSX.Element | null;
 export default CartLink;