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

package/lib/esm/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/esm/components/addresses/AddressesEmpty.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import Parent from"../utils/Parent";import CustomerContext from"../../context/CustomerContext";import{useContext}from"react";export function AddressesEmpty(props){const{children,emptyText="No addresses available.",...p}=props,{addresses}=useContext(CustomerContext),parentProps={emptyText,...p};return addresses==null||addresses.length>0?null:children!==void 0?_jsx(Parent,{...parentProps,children}):_jsx("span",{"data-testid":"addresses-empty",...p,children:emptyText})}export default AddressesEmpty;

package/lib/esm/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/esm/components/addresses/BillingAddressContainer.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import BillingAddressContext from"../../context/BillingAddressContext";import{useContext,useEffect,useReducer}from"react";import billingAddressReducer,{billingAddressInitialState,setBillingAddress,setBillingCustomerAddressId}from"../../reducers/BillingAddressReducer";import CommerceLayerContext from"../../context/CommerceLayerContext";import OrderContext from"../../context/OrderContext";import AddressContext from"../../context/AddressContext";export function BillingAddressContainer(props){const{children}=props,[state,dispatch]=useReducer(billingAddressReducer,billingAddressInitialState),config=useContext(CommerceLayerContext),{order,include,addResourceToInclude}=useContext(OrderContext),{shipToDifferentAddress,setCloneAddress}=useContext(AddressContext);useEffect(()=>(include?.includes("billing_address")||addResourceToInclude({newResource:"billing_address",resourcesIncluded:include}),order&&config&&setBillingCustomerAddressId({dispatch,order,setCloneAddress}),()=>{dispatch({type:"cleanup",payload:{}})}),[order,include]);const contextValue={...state,setBillingAddress:async(id,options)=>{await setBillingAddress(id,{config,dispatch,order,shipToDifferentAddress,customerAddressId:options?.customerAddressId}),setCloneAddress(id,"billing_address")}};return _jsx(BillingAddressContext.Provider,{value:contextValue,children})}export default BillingAddressContainer;

package/lib/esm/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/esm/components/addresses/BillingAddressForm.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import AddressesContext from"../../context/AddressContext";import{useRapidForm}from"rapid-form";import{useContext,useEffect,useRef}from"react";import BillingAddressFormContext from"../../context/BillingAddressFormContext";import OrderContext from"../../context/OrderContext";import{getSaveBillingAddressToAddressBook}from"../../utils/localStorage";export function BillingAddressForm(props){const{children,errorClassName,autoComplete="on",reset=!1,customFieldMessageError,fieldEvent="change",...p}=props,{validation,values,errors,reset:resetForm,setValue:setValueForm,setError:setErrorForm}=useRapidForm({fieldEvent}),{setAddressErrors,setAddress,isBusiness}=useContext(AddressesContext),{saveAddressToCustomerAddressBook,order,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),ref=useRef(null);useEffect(()=>{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=errors[fieldName]?.message;errorMsg!=null&&errorMsg!==customMessage&&(errors[fieldName].message=customMessage)}else setErrorForm({name:fieldName,code:"VALIDATION_ERROR",message:customMessage});else customMessage.forEach(element=>{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=errors[field2]?.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=errors[fieldName]?.code,message=errors[fieldName]?.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:{...values,...isBusiness&&{business:isBusiness}},resource:"billing_address"})}const checkboxChecked=ref.current?.querySelector('[name="billing_address_save_to_customer_book"]')?.checked||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&&(ref.current?.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:{...values,...field,...isBusiness&&{business:isBusiness}},resource:"billing_address"})},errorClassName,requiresBillingInfo:order?.requires_billing_info||!1,errors,resetField:name=>{resetForm({currentTarget:ref.current},name)}};return _jsx(BillingAddressFormContext.Provider,{value:providerValues,children:_jsx("form",{ref,autoComplete,...p,children})})}export default BillingAddressForm;

package/lib/esm/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/esm/components/addresses/SaveAddressesButton.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useState}from"react";import Parent from"../utils/Parent";import AddressContext from"../../context/AddressContext";import{countryLockController,addressesController}from"../../utils/addressesManager";import OrderContext from"../../context/OrderContext";import CustomerContext from"../../context/CustomerContext";import isFunction from"lodash/isFunction";import{validateValue}from"../../utils/validateFormFields";import{formCleaner}from"../../utils/formCleaner";export function SaveAddressesButton(props){const{children,label="Continue to delivery",resource,disabled=!1,addressId,requiredMetadataFields,onClick,...p}=props,{errors,billing_address:billingAddress,shipToDifferentAddress,shipping_address:shippingAddress,saveAddresses,billingAddressId,shippingAddressId,invertAddresses}=useContext(AddressContext),{order}=useContext(OrderContext),{customerEmail:email,addresses,isGuest,createCustomerAddress}=useContext(CustomerContext),[forceDisable,setForceDisable]=useState(disabled);let customerEmail=(isGuest===!0||typeof isGuest>"u")&&!order?.customer_email;if(email!=null&&email!==""){const isValidEmail=validateValue(email,"customer_email","email","orders");customerEmail=Object.keys(isValidEmail).length>0}const shippingAddressCleaned=Object.keys(shippingAddress??{}).reduce((acc,key)=>({...acc,[key.replace("shipping_address_","")]:shippingAddress[key].value}),{}),{billingDisable,shippingDisable}=addressesController({invertAddresses,requiresBillingInfo:order?.requires_billing_info,billing_address:billingAddress,shipping_address:shippingAddressCleaned,shipToDifferentAddress,shippingAddressId,billingAddressId,errors,requiredMetadataFields}),countryLockDisable=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=async()=>{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=await saveAddresses({customerEmail:email,customerAddress:{resource:invertAddresses?"shipping_address":"billing_address",id:addressId}});break}case(order!=null&&saveAddresses!=null):{response=await saveAddresses({customerEmail:email});break}case createCustomerAddress!=null:{const address=invertAddresses?{...formCleaner(shippingAddress)}:{...formCleaner(billingAddress)};addressId&&(address.id=addressId),createCustomerAddress(address),response={success:!0};break}}setForceDisable(!1),onClick&&response.success&&onClick(response)}},parentProps={...p,label,resource,handleClick,disabled:disable};return children?_jsx(Parent,{...parentProps,children}):_jsx("button",{type:"button",disabled:disable||forceDisable,onClick:()=>{handleClick()},...p,children:isFunction(label)?label():label})}export default SaveAddressesButton;

package/lib/esm/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/esm/components/addresses/ShippingAddressContainer.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import ShippingAddressContext from"../../context/ShippingAddressContext";import{useContext,useEffect,useReducer}from"react";import shippingAddressReducer,{setShippingAddress,shippingAddressInitialState,setShippingCustomerAddressId}from"../../reducers/ShippingAddressReducer";import CommerceLayerContext from"../../context/CommerceLayerContext";import OrderContext from"../../context/OrderContext";import AddressContext from"../../context/AddressContext";export function ShippingAddressContainer(props){const{children}=props,[state,dispatch]=useReducer(shippingAddressReducer,shippingAddressInitialState),config=useContext(CommerceLayerContext),{order}=useContext(OrderContext),{setCloneAddress}=useContext(AddressContext);useEffect(()=>(order&&config&&setShippingCustomerAddressId({dispatch,order,setCloneAddress}),()=>{dispatch({type:"cleanup",payload:{}})}),[config,order]);const contextValue={...state,setShippingAddress:async(id,options)=>{await setShippingAddress(id,{config,dispatch,order,customerAddressId:options?.customerAddressId}),setCloneAddress(id,"shipping_address")}};return _jsx(ShippingAddressContext.Provider,{value:contextValue,children})}export default ShippingAddressContainer;

package/lib/esm/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/esm/components/addresses/ShippingAddressForm.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import AddressesContext from"../../context/AddressContext";import{useRapidForm}from"rapid-form";import{useContext,useEffect,useRef}from"react";import ShippingAddressFormContext from"../../context/ShippingAddressFormContext";import OrderContext from"../../context/OrderContext";import{getSaveShippingAddressToAddressBook}from"../../utils/localStorage";export function ShippingAddressForm(props){const{children,errorClassName,autoComplete="on",fieldEvent="change",reset=!1,customFieldMessageError,...p}=props,{validation,values,errors,reset:resetForm,setValue:setValueForm,setError:setErrorForm}=useRapidForm({fieldEvent}),{setAddressErrors,setAddress,shipToDifferentAddress,isBusiness,invertAddresses}=useContext(AddressesContext),{saveAddressToCustomerAddressBook,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),ref=useRef(null);useEffect(()=>{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=errors[fieldName]?.message;errorMsg!=null&&errorMsg!==customMessage&&(errors[fieldName].message=customMessage)}else setErrorForm({name:fieldName,code:"VALIDATION_ERROR",message:customMessage});else customMessage.forEach(element=>{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=errors[field2]?.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=errors[fieldName]?.code,message=errors[fieldName]?.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:{...values,...isBusiness&&{business:isBusiness}},resource:"shipping_address"})}const checkboxChecked=ref.current?.querySelector('[name="shipping_address_save_to_customer_book"]')?.checked||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&&(ref.current?.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:{...values,...field,...isBusiness&&{business:isBusiness}},resource:"shipping_address"})},errorClassName,errors,resetField:name=>{resetForm({currentTarget:ref.current},name)}};return _jsx(ShippingAddressFormContext.Provider,{value:providerValues,children:_jsx("form",{ref,autoComplete,...p,children})})}export default ShippingAddressForm;

package/lib/esm/components/auth/CommerceLayer.d.ts

@@ -0,0 +1,25 @@
+import type { DefaultChildrenType } from '../../typings/globals';
+import type { JSX } from "react";
+interface Props {
+    /**
+     * Accept a React node as children.
+     */
+    children: DefaultChildrenType;
+    /**
+     * The access token to authenticate the API calls.
+     */
+    accessToken: string;
+    /**
+     * The endpoint to make the API calls. e.g. https://yourdomain.commercelayer.io
+     */
+    endpoint?: string;
+    /**
+     * The domain to make the API calls. e.g. commercelayer.io
+     */
+    domain?: string;
+}
+/**
+ * CommerceLayer component
+ */
+export declare function CommerceLayer(props: Props): JSX.Element;
+export default CommerceLayer;

package/lib/esm/components/auth/CommerceLayer.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import CommerceLayerContext from"../../context/CommerceLayerContext";import ErrorBoundary from"../utils/ErrorBoundary";import{jwt}from"../../utils/jwt";export function CommerceLayer(props){const{children,...p}=props;if(!p.endpoint){const{organization}=jwt(p.accessToken);p.endpoint=`https://${organization.slug}.${p.domain??"commercelayer.io"}`}return _jsx(ErrorBoundary,{children:_jsx(CommerceLayerContext.Provider,{value:{...p},children})})}export default CommerceLayer;

package/lib/esm/components/customers/CustomerAddressForm.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode, type JSX } from 'react';
+interface Props extends Omit<JSX.IntrinsicElements['form'], 'onSubmit'> {
+    children: ReactNode;
+    reset?: boolean;
+    errorClassName?: string;
+    /**
+     * Array of countries that have states has select options. Ignore this if you are not overriding the default states list.
+     * If you are overriding the default states list, you must pass the countries that have states as select options.
+     */
+    countriesWithPredefinedStateOptions?: string[];
+}
+export declare function CustomerAddressForm(props: Props): JSX.Element;
+export default CustomerAddressForm;

package/lib/esm/components/customers/CustomerAddressForm.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import AddressesContext from"../../context/AddressContext";import{useRapidForm}from"rapid-form";import{useContext,useEffect,useRef}from"react";import CustomerAddressFormContext from"../../context/CustomerAddressFormContext";import OrderContext from"../../context/OrderContext";import{isEmptyStates}from"../../utils/countryStateCity";export function CustomerAddressForm(props){const{children,errorClassName,autoComplete="on",reset=!1,countriesWithPredefinedStateOptions,...p}=props,{validation,values,errors,reset:resetForm}=useRapidForm(),{setAddressErrors,setAddress}=useContext(AddressesContext),{order}=useContext(OrderContext),ref=useRef(null);useEffect(()=>{if(Object.keys(errors).length>0){const formErrors=[];for(const fieldName in errors){const code=errors[fieldName]?.code,message=errors[fieldName]?.message||"";fieldName==="billing_address_state_code"?values.state_code?delete errors[fieldName]:formErrors.push({code,message,resource:"billing_address",field:fieldName}):formErrors.push({code,message,resource:"billing_address",field:fieldName})}setAddressErrors(formErrors,"billing_address")}else if(Object.keys(values).length>0){setAddressErrors([],"billing_address");for(const name in values){const field=values[name];if(field?.value&&(values[name.replace("billing_address_","")]=field.value,delete values[name]),["billing_address_state_code"].includes(name)){const countryCode=values.billing_address_country_code?.value||values.country_code;!isEmptyStates({countryCode,countriesWithPredefinedStateOptions})&&!field.value&&delete values.billing_address_state_code}}setAddress({values,resource:"billing_address"})}reset&&(Object.keys(values).length>0||Object.keys(errors).length>0)&&ref&&(ref.current?.reset(),resetForm({target:ref.current}),setAddressErrors([],"billing_address"),setAddress({values:{},resource:"billing_address"}))},[errors,values,reset]);const providerValues={values,validation,setValue:(name,value)=>{const field={[name.replace("billing_address_","")]:value};setAddress({values:{...values,...field},resource:"billing_address"})},errorClassName,requiresBillingInfo:order?.requires_billing_info||!1,errors,resetField:name=>{resetForm({currentTarget:ref.current},name)}};return _jsx(CustomerAddressFormContext.Provider,{value:providerValues,children:_jsx("form",{ref,autoComplete,...p,children})})}export default CustomerAddressForm;

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

@@ -0,0 +1,38 @@
+import { type JSX } from 'react';
+import type { DefaultChildrenType } from '../../typings/globals';
+import type { QueryPageSize } from '@commercelayer/sdk';
+interface Props {
+    children: DefaultChildrenType;
+    /**
+     * Customer type
+     */
+    isGuest?: boolean;
+    /**
+     * The page size
+     * default: 10
+     */
+    addressesPageSize?: QueryPageSize;
+}
+/**
+ * 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/esm/components/customers/CustomerContainer.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useReducer,useMemo}from"react";import customerReducer,{customerInitialState,getCustomerAddresses,getCustomerOrders,getCustomerPaymentSources,setCustomerEmail,setCustomerErrors,deleteCustomerAddress,createCustomerAddress,saveCustomerUser,getCustomerPayments,getCustomerSubscriptions,getCustomerInfo,setResourceTrigger}from"../../reducers/CustomerReducer";import OrderContext from"../../context/OrderContext";import CommerceLayerContext from"../../context/CommerceLayerContext";import CustomerContext from"../../context/CustomerContext";import{isGuestToken}from"../../utils/isGuestToken";export function CustomerContainer(props){const{children,isGuest,addressesPageSize:pageSize}=props,[state,dispatch]=useReducer(customerReducer,customerInitialState),{order,addResourceToInclude,include,updateOrder,includeLoaded,withoutIncludes}=useContext(OrderContext),config=useContext(CommerceLayerContext);useEffect(()=>{if(config.accessToken){if(isGuest??isGuestToken(config.accessToken))return;include?.includes("available_customer_payment_sources.payment_source")?includeLoaded?.["available_customer_payment_sources.payment_source"]||addResourceToInclude({newResourceLoaded:{"available_customer_payment_sources.payment_source":!0,"available_customer_payment_sources.payment_method":!0}}):addResourceToInclude({newResource:["available_customer_payment_sources.payment_source","available_customer_payment_sources.payment_method"]})}},[config.accessToken,include?.length,Object.keys(includeLoaded??{}).length]),useEffect(()=>{if(config.accessToken){if(isGuest??isGuestToken(config.accessToken))return;if(state.customers==null&&getCustomerInfo({config,dispatch}),state.addresses==null&&getCustomerAddresses({config,dispatch,isOrderAvailable:withoutIncludes!=null,pageSize}),order?.available_customer_payment_sources&&getCustomerPaymentSources({dispatch,order}),config.accessToken&&order==null&&include==null&&includeLoaded==null&&withoutIncludes===void 0){async function getCustomerData(){await getCustomerOrders({config,dispatch}),await getCustomerSubscriptions({config,dispatch}),await getCustomerPayments({config,dispatch})}getCustomerData()}}},[config.accessToken,order?.payment_source!=null,isGuest]);const contextValue=useMemo(()=>({isGuest,...state,saveCustomerUser:async customerEmail=>{await saveCustomerUser({config,customerEmail,dispatch,updateOrder,order})},setCustomerErrors:errors=>{setCustomerErrors(errors,dispatch)},setCustomerEmail:customerEmail=>{setCustomerEmail(customerEmail,dispatch)},getCustomerPaymentSources:()=>{getCustomerPaymentSources({dispatch,order})},deleteCustomerAddress:async({customerAddressId})=>{await deleteCustomerAddress({customerAddressId,dispatch,config,addresses:state.addresses})},setResourceTrigger:async props2=>await setResourceTrigger({...props2,dispatch,config}),createCustomerAddress:async address=>{await createCustomerAddress({address,config,dispatch,state})},getCustomerOrders:async({pageNumber,pageSize:pageSize2})=>{await getCustomerOrders({config,dispatch,pageNumber,pageSize:pageSize2})},getCustomerSubscriptions:async({pageNumber,pageSize:pageSize2,id})=>{await getCustomerSubscriptions({config,dispatch,pageNumber,pageSize:pageSize2,id})},reloadCustomerAddresses:async()=>{await getCustomerAddresses({config,dispatch,isOrderAvailable:withoutIncludes!=null,pageSize})}}),[state,isGuest]);return _jsx(CustomerContext.Provider,{value:contextValue,children})}export default CustomerContainer;

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

@@ -0,0 +1,25 @@
+import type { ConditionalElement } from '../../typings/index';
+import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
+import type { JSX } from "react";
+type StockTransferFieldChildrenProps = TGenericChildrenProps<TResources['Customer']>;
+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/esm/components/customers/CustomerField.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import GenericFieldComponent from"../utils/GenericFieldComponent";import CustomerContext from"../../context/CustomerContext";export function CustomerField(props){const{attribute,tagElement="span",children,...p}=props;return _jsx(GenericFieldComponent,{resource:"customers",attribute,tagElement,context:CustomerContext,...p,children})}export default CustomerField;

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

@@ -0,0 +1,11 @@
+import { type JSX } from 'react';
+import type { BaseInputComponentProps } from '../../typings/index';
+type Props = {
+    name?: 'customer_email' | string;
+    type?: 'email' | string;
+    saveOnBlur?: boolean;
+    onBlur?: (email: string) => void;
+    errorClassName?: string;
+} & Omit<BaseInputComponentProps, 'name' | 'type' | 'onBlur'> & Omit<JSX.IntrinsicElements['input'], 'children'> & Omit<JSX.IntrinsicElements['textarea'], 'children'>;
+export declare function CustomerInput(props: Props): JSX.Element;
+export default CustomerInput;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import BaseInput from"../utils/BaseInput";import{useRapidForm}from"rapid-form";import CustomerContext from"../../context/CustomerContext";import{validateValue}from"../../utils/validateFormFields";import OrderContext from"../../context/OrderContext";export function CustomerInput(props){const{name="customer_email",placeholder="",required=!0,saveOnBlur=!1,type="email",value,onBlur,className,errorClassName,...p}=props,{validation,values,errors,setError}=useRapidForm({fieldEvent:"blur"}),{saveCustomerUser,setCustomerErrors,setCustomerEmail}=useContext(CustomerContext),{setOrderErrors}=useContext(OrderContext),[hasError,setHasError]=useState(!1),handleOnBlur=async e=>{const v=e?.target?.value,checkValue=validateValue(v,name,type,"orders"),isValid=Object.keys(checkValue).length===0;if(saveOnBlur&&Object.keys(values).length>0&&saveCustomerUser!=null&&(await saveCustomerUser(values[name].value),onBlur&&onBlur(values[name].value)),!isValid){const currentError={...checkValue,name:checkValue?.field};setError(currentError)}};useEffect(()=>{if(Object.keys(errors).length>0){const formErrors=[];for(const fieldName in errors){const code=errors[fieldName]?.code,message=errors[fieldName]?.message;formErrors.push({code,message:message||"",resource:"orders",field:fieldName})}formErrors.length>0&&(setHasError(!0),setCustomerErrors&&setCustomerErrors(formErrors))}else setCustomerErrors&&setCustomerErrors([]),setOrderErrors&&setOrderErrors([]),setHasError(!1);return Object.keys(values).length>0&&setCustomerEmail&&setCustomerEmail(values[name].value),()=>{setHasError(!1)}},[errors]);const classNameComputed=`${className??""} ${hasError&&errorClassName?errorClassName:""}`;return _jsx(BaseInput,{name,type,ref:validation,required,placeholder,defaultValue:value,onBlur:e=>{handleOnBlur(e)},className:classNameComputed,...p})}export default CustomerInput;

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

@@ -0,0 +1,11 @@
+import type { DefaultChildrenType } from '../../typings/globals';
+import { type JSX } from 'react';
+interface Props {
+    children?: DefaultChildrenType;
+    /**
+     * Customize the loader content.
+     */
+    loader?: string | JSX.Element;
+}
+export declare function CustomerPaymentSource({ children, loader }: Props): JSX.Element;
+export default CustomerPaymentSource;

package/lib/esm/components/customers/CustomerPaymentSource.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import CustomerContext from"../../context/CustomerContext";import CustomerPaymentSourceContext from"../../context/CustomerPaymentSourceContext";import getCardDetails from"../../utils/getCardDetails";import useCustomContext from"../../utils/hooks/useCustomContext";import{useEffect,useState}from"react";export function CustomerPaymentSource({children,loader="Loading..."}){const[loading,setLoading]=useState(!0),{payments}=useCustomContext({context:CustomerContext,contextComponentName:"CustomerContainer",currentComponentName:"CustomerPaymentSource",key:"payments"});useEffect(()=>(payments!=null&&setLoading(!1),()=>{setLoading(!0)}),[payments!=null]);const provider=payments?.filter(p=>p?.payment_source!=null).map(p=>{const paymentType=p.payment_source?.type,value={...getCardDetails({paymentType,customerPayment:p})};return _jsx(CustomerPaymentSourceContext.Provider,{value,children},p.id)});return loading?_jsx(_Fragment,{children:loader}):_jsx(_Fragment,{children:provider})}export default CustomerPaymentSource;

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

@@ -0,0 +1,14 @@
+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 payments available.'
+     */
+    emptyText?: string;
+}
+export declare function CustomerPaymentSourceEmpty({ children, emptyText, ...p }: Props): JSX.Element | null;
+export default CustomerPaymentSourceEmpty;

package/lib/esm/components/customers/CustomerPaymentSourceEmpty.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import Parent from"../utils/Parent";import CustomerContext from"../../context/CustomerContext";import useCustomContext from"../../utils/hooks/useCustomContext";export function CustomerPaymentSourceEmpty({children,emptyText="No payments available",...p}){const{payments}=useCustomContext({context:CustomerContext,contextComponentName:"CustomerContainer",currentComponentName:"CustomerPaymentSourceEmpty",key:"payments"}),parentProps={emptyText,...p};return payments!=null&&payments.length>0||payments===null?null:children!==void 0?_jsx(Parent,{...parentProps,children}):_jsx("span",{...p,children:emptyText})}export default CustomerPaymentSourceEmpty;

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

@@ -0,0 +1,38 @@
+import { type JSX } from 'react';
+import type { ChildrenFunction } from '../../typings/index';
+interface ChildrenProps extends Omit<Props, 'children'> {
+    /**
+     * The link href
+     */
+    href: string;
+    /**
+     * The link status
+     */
+    disabled: boolean;
+}
+interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
+    /**
+     * A render function to render your own custom component
+     */
+    children?: ChildrenFunction<ChildrenProps>;
+    /**
+     * The label of the link
+     */
+    label?: string | JSX.Element;
+    /**
+     * The domain of your forked application
+     */
+    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/esm/components/customers/MyAccountLink.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import Parent from"../utils/Parent";import CommerceLayerContext from"../../context/CommerceLayerContext";import{getApplicationLink}from"../../utils/getApplicationLink";import{getDomain}from"../../utils/getDomain";import{jwt}from"../../utils/jwt";import{getOrganizationConfig}from"../../utils/organization";export function MyAccountLink(props){const{label="Go to my account",children,customDomain,...p}=props,{accessToken,endpoint}=useContext(CommerceLayerContext);if(accessToken==null||endpoint==null)throw new Error("Cannot use `MyAccountLink` outside of `CommerceLayer`");const{domain,slug}=getDomain(endpoint),disabled=!("owner"in jwt(accessToken)),href=getApplicationLink({slug,accessToken,applicationType:"my-account",domain,customDomain}),parentProps={disabled,label,href,...p};function handleClick(e){!disabled&&accessToken&&endpoint&&getOrganizationConfig({accessToken,endpoint,params:{accessToken,slug}}).then(config=>{config?.links?.my_account&&(e.preventDefault(),location.href=config.links.my_account)})}return children?_jsx(Parent,{...parentProps,children}):_jsx("a",{"aria-disabled":disabled,onClick:handleClick,href,...p,children:label})}export default MyAccountLink;

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

@@ -0,0 +1,59 @@
+import { type JSX } from 'react';
+import type { ChildrenFunction } from '../../typings/index';
+interface ChildrenProps extends Omit<Props, 'children'> {
+    /**
+     * The link href
+     */
+    href: string;
+}
+interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
+    /**
+     * A render function to render your own custom component
+     */
+    children?: ChildrenFunction<ChildrenProps>;
+    /**
+     * The label of the link
+     */
+    label: string | JSX.Element;
+    /**
+     * The type of the link
+     */
+    type: 'login' | 'signup';
+    /**
+     * The client id of the Commerce Layer application
+     */
+    clientId: string;
+    /**
+     * The scope of the Commerce Layer application
+     */
+    scope: string;
+    /**
+     * The return url to redirect the user after the login/signup
+     */
+    returnUrl?: string;
+    /**
+     * The domain of your forked application
+     */
+    customDomain?: string;
+    /**
+     * The reset password url
+     */
+    resetPasswordUrl?: 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/esm/components/customers/MyIdentityLink.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import Parent from"../utils/Parent";import CommerceLayerContext from"../../context/CommerceLayerContext";import{getApplicationLink}from"../../utils/getApplicationLink";import{getDomain}from"../../utils/getDomain";import{getOrganizationConfig}from"../../utils/organization";export function MyIdentityLink(props){const{label,children,type,clientId,scope,returnUrl,customDomain,resetPasswordUrl,...p}=props,{accessToken,endpoint}=useContext(CommerceLayerContext),[href,setHref]=useState(void 0);if(accessToken==null||endpoint==null)throw new Error("Cannot use `MyIdentityLink` outside of `CommerceLayer`");const{domain,slug}=getDomain(endpoint);useEffect(()=>(accessToken&&endpoint&&getOrganizationConfig({accessToken,endpoint,params:{accessToken,slug}}).then(config=>{if(config?.links?.identity)setHref(config.links.identity);else{const link=getApplicationLink({slug,accessToken,applicationType:"identity",domain,modeType:type,clientId,scope,returnUrl:returnUrl??window.location.href,resetPasswordUrl,customDomain});setHref(link)}}),()=>{setHref(void 0)}),[accessToken,endpoint]);const parentProps={label,href,clientId,scope,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("a",{href,...p,children:label})}export default MyIdentityLink;

package/lib/esm/components/customers/SaveCustomerButton.d.ts

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

package/lib/esm/components/customers/SaveCustomerButton.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import Parent from"../utils/Parent";import isEmpty from"lodash/isEmpty";import CustomerContext from"../../context/CustomerContext";export function SaveCustomerButton(props){const{children,label="Save",resource,disabled,onClick,...p}=props,{errors,saveCustomerUser,customerEmail}=useContext(CustomerContext),disable=disabled||!isEmpty(errors)||isEmpty(customerEmail),handleClick=async()=>{isEmpty(errors)&&!disable&&customerEmail!=null&&(saveCustomerUser&&await saveCustomerUser(customerEmail),onClick&&onClick())},parentProps={...p,label,resource,handleClick,disabled:disable};return children?_jsx(Parent,{...parentProps,children}):_jsx("button",{type:"button",disabled:disable,onClick:()=>{handleClick()},...p,children:label})}export default SaveCustomerButton;

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

@@ -0,0 +1,31 @@
+import { type JSX } from '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';
+type ErrorChildrenComponentProps = ChildrenFunction<Omit<TErrorComponent, 'children'> & {
+    errors: string[];
+}>;
+export interface TErrorComponent extends Omit<JSX.IntrinsicElements['span'], 'children'> {
+    /**
+     * Resource which get the error
+     */
+    resource: TResourceError;
+    children?: ErrorChildrenComponentProps;
+    /**
+     * Field which get the error
+     */
+    field?: string;
+    /**
+     * Error message which you can translate
+     */
+    messages?: Array<{
+        code: CodeErrorType;
+        message: string;
+        resource?: TResourceError;
+        field?: string;
+        id?: string;
+    }>;
+}
+type Props = TErrorComponent;
+export declare function Errors(props: Props): JSX.Element;
+export default Errors;

package/lib/esm/components/errors/Errors.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useContext,useMemo}from"react";import Parent from"../utils/Parent";import GiftCardContext from"../../context/GiftCardContext";import OrderContext from"../../context/OrderContext";import AddressContext from"../../context/AddressContext";import getAllErrors from"../utils/getAllErrors";import LineItemContext from"../../context/LineItemContext";import LineItemChildrenContext from"../../context/LineItemChildrenContext";import CustomerContext from"../../context/CustomerContext";import PaymentMethodContext from"../../context/PaymentMethodContext";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import ShipmentContext from"../../context/ShipmentContext";import InStockSubscriptionContext from"../../context/InStockSubscriptionContext";export function Errors(props){const{children,messages=[],resource,field,...p}=props,{payment}=useContext(PaymentMethodChildrenContext),{errors:orderErrors}=useContext(OrderContext),{errors:giftCardErrors}=useContext(GiftCardContext),{errors:lineItemErrors}=useContext(LineItemContext),{errors:addressErrors}=useContext(AddressContext),{errors:customerErrors}=useContext(CustomerContext),{errors:shipmentErrors}=useContext(ShipmentContext),{errors:inStockSubscriptionErrors}=useContext(InStockSubscriptionContext),{errors:paymentMethodErrors,currentPaymentMethodType,currentPaymentMethodId}=useContext(PaymentMethodContext),{lineItem}=useContext(LineItemChildrenContext),allErrors=useMemo(()=>[...giftCardErrors||[],...orderErrors||[],...lineItemErrors||[],...customerErrors||[],...shipmentErrors||[],...inStockSubscriptionErrors||[],...paymentMethodErrors?.filter(v=>v.field===currentPaymentMethodType&&payment?.id===currentPaymentMethodId)||[]],[giftCardErrors,orderErrors,lineItemErrors,customerErrors,shipmentErrors,inStockSubscriptionErrors,paymentMethodErrors]).filter((v,k,a)=>v?.code!==a[k-1]?.code),addressesErrors=useMemo(()=>[...addressErrors||[]],[addressErrors]),msgErrors=getAllErrors({allErrors:[...allErrors,...addressesErrors],field,messages,props:p,lineItem,resource,returnHtml:!children}),parentProps={messages,resource,field,errors:msgErrors,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx(_Fragment,{children:msgErrors})}export default Errors;

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

@@ -0,0 +1,10 @@
+import { type RefObject, type JSX } from 'react';
+import type { BaseState } from '../../typings/index';
+import type { DefaultChildrenType } from '../../typings/globals';
+interface Props extends Omit<JSX.IntrinsicElements['form'], 'children' | 'ref'> {
+    children: DefaultChildrenType;
+    onSubmit?: (values: BaseState) => void;
+    ref?: RefObject<HTMLFormElement | null>;
+}
+export declare function GiftCard(props: Props): JSX.Element;
+export default GiftCard;

package/lib/esm/components/gift_cards/GiftCard.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useRef,useContext}from"react";import validateFormFields from"../../utils/validateFormFields";import isEmpty from"lodash/isEmpty";import GiftCardContext from"../../context/GiftCardContext";export function GiftCard(props){const{children,onSubmit}=props,name="giftCardForm",ref=useRef(null),{addGiftCard,addGiftCardError}=useContext(GiftCardContext);return _jsx(_Fragment,{children:_jsx("form",{name,onSubmit:e=>{e.preventDefault();const currentForm=ref.current,elements=currentForm?.elements,{errors,values}=validateFormFields(elements,["currencyCode","balanceCents"],"gift_cards");isEmpty(errors)?(addGiftCard(values),currentForm?.reset(),onSubmit&&onSubmit(values)):addGiftCardError(errors)},children},name)})}export default GiftCard;

package/lib/esm/components/gift_cards/GiftCardContainer.d.ts

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

package/lib/esm/components/gift_cards/GiftCardContainer.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useReducer,useContext}from"react";import GiftCardContext from"../../context/GiftCardContext";import CommerceLayerContext from"../../context/CommerceLayerContext";import giftCardReducer,{giftCardInitialState,addGiftCardRecipient,addGiftCard,addGiftCardError,addGiftCardLoading}from"../../reducers/GiftCardReducer";import OrderContext from"../../context/OrderContext";export function GiftCardContainer(props){const{children}=props,[state,dispatch]=useReducer(giftCardReducer,giftCardInitialState),config=useContext(CommerceLayerContext),{getOrder,createOrder,order}=useContext(OrderContext),giftCardValue={...state,addGiftCardRecipient:async values=>{await addGiftCardRecipient(values,config,dispatch)},addGiftCard:async values=>{await addGiftCard({...values},{config,dispatch,getOrder,createOrder,order})},addGiftCardError:errors=>{addGiftCardError(errors,dispatch)},addGiftCardLoading:loading=>{addGiftCardLoading(loading,dispatch)}};return _jsx(GiftCardContext.Provider,{value:giftCardValue,children})}export default GiftCardContainer;

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

@@ -0,0 +1,7 @@
+import type { BaseSelectComponentProps } from '../../typings/index';
+import type { JSX } from "react";
+type Props = Omit<BaseSelectComponentProps, 'options' | 'name'> & {
+    required?: boolean;
+} & Pick<JSX.IntrinsicElements['select'], 'className' | 'id' | 'style'>;
+export declare function GiftCardCurrencySelector(props: Props): JSX.Element;
+export default GiftCardCurrencySelector;

package/lib/esm/components/gift_cards/GiftCardCurrencySelector.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import BaseSelect from"../utils/BaseSelect";import currencyOptions from"../../config/currency";export function GiftCardCurrencySelector(props){return _jsx(BaseSelect,{options:currencyOptions,name:"currencyCode",...props})}export default GiftCardCurrencySelector;

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

@@ -0,0 +1,7 @@
+import type { BaseInputComponentProps, GiftCardInputName } from '../../typings/index';
+import type { JSX } from "react";
+type Props = {
+    name: GiftCardInputName;
+} & Omit<BaseInputComponentProps, 'name'> & Omit<JSX.IntrinsicElements['input'], 'children'> & Omit<JSX.IntrinsicElements['textarea'], 'children'>;
+export declare function GiftCardInput(props: Props): JSX.Element;
+export default GiftCardInput;

package/lib/esm/components/gift_cards/GiftCardInput.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import BaseInput from"../utils/BaseInput";export function GiftCardInput(props){const{placeholder="",...p}=props;return _jsx(BaseInput,{placeholder,...p})}export default GiftCardInput;