@commercelayer/react-components 3.15.2 → 4.0.0-alpha.10

package/lib/esm/components/payment_source/PaymentSourceBrandName.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IconBrand } from '../../context/PaymentSourceContext';
+import { ChildrenFunction } from '../../typings/index';
+interface CustomComponent extends Omit<Props, 'children'> {
+    brand: IconBrand;
+}
+declare type Props = {
+    children?: ChildrenFunction<CustomComponent>;
+    label?: string;
+} & JSX.IntrinsicElements['span'];
+export declare function PaymentSourceBrandName({ children, label, ...props }: Props): JSX.Element;
+export default PaymentSourceBrandName;

package/lib/esm/components/payment_source/PaymentSourceBrandName.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{capitalize}from"lodash";import{useContext}from"react";import Parent from"../utils/Parent";export function PaymentSourceBrandName({children,label,...props}){const{brand}=useContext(PaymentSourceContext),brandName=brand&&capitalize(brand.replace("-"," ")),parentProps={brand:brandName,label,...props};return children?_jsx(Parent,{...parentProps,children}):_jsx("span",{...props,children:label||capitalize(brandName)})}export default PaymentSourceBrandName;

package/lib/esm/components/payment_source/PaymentSourceDetail.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ChildrenFunction } from '../../typings/index';
+export declare type PaymentSourceDetailType = 'last4' | 'exp_year' | 'exp_month';
+interface ChildrenProps extends Omit<Props, 'children'> {
+    text: string;
+}
+interface Props extends Omit<JSX.IntrinsicElements['span'], 'children'> {
+    children?: ChildrenFunction<ChildrenProps>;
+    type: PaymentSourceDetailType;
+}
+export declare function PaymentSourceDetail({ type, children, ...p }: Props): JSX.Element;
+export default PaymentSourceDetail;

package/lib/esm/components/payment_source/PaymentSourceDetail.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{has}from"lodash";import{useContext}from"react";import Parent from"../utils/Parent";export function PaymentSourceDetail({type,children,...p}){const card=useContext(PaymentSourceContext),text=has(card,type)?card[type]:type==="last4"?"****":"**",parentProps={type,text,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("span",{...p,children:text})}export default PaymentSourceDetail;

package/lib/esm/components/payment_source/PaymentSourceEditButton.d.ts

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

package/lib/esm/components/payment_source/PaymentSourceEditButton.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{useContext}from"react";import Parent from"../utils/Parent";export function PaymentSourceEditButton({children,label="Edit",...props}){const{showCard,handleEditClick,readonly}=useContext(PaymentSourceContext),parentProps={showCard,label,handleEditClick,...props};return children?_jsx(Parent,{...parentProps,children}):readonly?null:_jsx("button",{...props,onClick:handleEditClick,children:label})}export default PaymentSourceEditButton;

package/lib/esm/components/payment_source/PaypalPayment.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export declare type PaypalConfig = {
+    return_url: string;
+    cancel_url: string;
+    infoMessage?: {
+        text?: string | ReactNode;
+        className?: string;
+    };
+};
+declare type Props = Omit<PaypalConfig, 'return_url' | 'cancel_url'> & JSX.IntrinsicElements['div'];
+export declare function PaypalPayment({ infoMessage, ...p }: Props): JSX.Element;
+export default PaypalPayment;

package/lib/esm/components/payment_source/PaypalPayment.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentMethodContext from"../../context/PaymentMethodContext";import isFunction from"lodash/isFunction";import{useContext,useEffect,useRef}from"react";const defaultMessage="by placing the order, you will be redirected to the PayPal website to sign in and authorize the payment";export function PaypalPayment({infoMessage,...p}){const ref=useRef(null),{setPaymentSource,paymentSource,currentPaymentMethodType,setPaymentRef}=useContext(PaymentMethodContext);useEffect(()=>(ref.current&&paymentSource&&currentPaymentMethodType&&paymentSource?.approval_url&&(ref.current.onsubmit=()=>handleClick(),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,paymentSource,currentPaymentMethodType]);const handleClick=async()=>{if(paymentSource&&currentPaymentMethodType)try{return await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{metadata:{card:{id:paymentSource.id,brand:"paypal",last4:""}}}}),!0}catch{return!1}return!1};return _jsx("form",{ref,children:_jsx("div",{...p,children:_jsx("span",{className:infoMessage?.className,children:isFunction(infoMessage?.text)?infoMessage?.text():infoMessage?.text||defaultMessage})})})}export default PaypalPayment;

package/lib/esm/components/payment_source/StripePayment.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { StripeCardElementOptions, StripeElementLocale } from '@stripe/stripe-js';
+import { PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
+import { PaymentSourceProps } from './PaymentSource';
+export declare type StripeConfig = {
+    containerClassName?: string;
+    hintLabel?: string;
+    name?: string;
+    options?: StripeCardElementOptions;
+    [key: string]: any;
+};
+declare type Props = PaymentMethodConfig['stripePayment'] & JSX.IntrinsicElements['div'] & Partial<PaymentSourceProps['templateCustomerSaveToWallet']> & {
+    show?: boolean;
+    publishableKey: string;
+    locale?: StripeElementLocale;
+};
+export declare function StripePayment({ publishableKey, show, options, locale, ...p }: Props): JSX.Element | null;
+export default StripePayment;

package/lib/esm/components/payment_source/StripePayment.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../../context/PaymentMethodContext";import{CardElement,Elements,useElements,useStripe}from"@stripe/react-stripe-js";import Parent from"../utils/Parent";import OrderContext from"../../context/OrderContext";import{setCustomerOrderParam}from"../../utils/localStorage";const defaultOptions={style:{base:{fontSize:"16px",color:"#424770","::placeholder":{color:"#aab7c4"}},invalid:{color:"#9e2146"}},hidePostalCode:!0};function StripePaymentForm({options=defaultOptions,templateCustomerSaveToWallet}){const ref=useRef(null),{setPaymentSource,currentPaymentMethodType,setPaymentMethodErrors,setPaymentRef,paymentSource}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),stripe=useStripe(),elements=useElements();useEffect(()=>(ref.current&&stripe&&elements&&paymentSource&&(ref.current.onsubmit=paymentSource2=>onSubmit({event:ref.current,stripe,elements,paymentSource:paymentSource2}),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,stripe,elements,paymentSource]);const onSubmit=async({event,stripe:stripe2,elements:elements2,paymentSource:ps})=>{if(!stripe2)return!1;const savePaymentSourceToCustomerWallet=event?.elements?.save_payment_source_to_customer_wallet?.checked;savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet);const cardElement=elements2&&elements2.getElement(CardElement);if(cardElement){const billingInfo=order?.billing_address,email=order?.customer_email,billing_details={name:billingInfo?.full_name,email,phone:billingInfo?.phone,address:{city:billingInfo?.city,country:billingInfo?.country_code,line1:billingInfo?.line_1,postal_code:billingInfo?.zip_code,state:billingInfo?.state_code}},{paymentMethod}=await stripe2.createPaymentMethod({type:"card",card:cardElement,billing_details}),clientSecret=ps?.client_secret,paymentSourceId=ps?.id;if(clientSecret){const{error,paymentIntent}=await stripe2.confirmCardPayment(clientSecret,{payment_method:{card:cardElement,billing_details}});if(error)return console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1;if(paymentIntent&&paymentMethod&&paymentSourceId&&currentPaymentMethodType)try{return await setPaymentSource({paymentSourceId,paymentResource:currentPaymentMethodType,attributes:{options:{...paymentMethod,setup_future_usage:"off_session"}}}),!0}catch{return!1}}}return!1};return _jsxs("form",{ref,children:[_jsx(CardElement,{options:{...defaultOptions,...options}}),templateCustomerSaveToWallet&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})]})}export function StripePayment({publishableKey,show,options,locale="auto",...p}){const[isLoaded,setIsLoaded]=useState(!1),[stripe,setStripe]=useState(null),{containerClassName,templateCustomerSaveToWallet,fonts=[],...divProps}=p;return useEffect(()=>{if(show&&publishableKey){const{loadStripe}=require("@stripe/stripe-js");(async()=>{const res=await loadStripe(publishableKey,{locale});setStripe(res),setIsLoaded(!0)})()}return()=>{setIsLoaded(!1)}},[show,publishableKey]),isLoaded&&stripe?_jsx("div",{className:containerClassName,...divProps,children:_jsx(Elements,{stripe,options:{fonts},children:_jsx(StripePaymentForm,{options,templateCustomerSaveToWallet})})}):null}export default StripePayment;

package/lib/esm/components/payment_source/WireTransferPayment.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export declare type WireTransferConfig = {
+    infoMessage?: {
+        text?: string | ReactNode;
+        className?: string;
+    };
+};
+declare type Props = WireTransferConfig & JSX.IntrinsicElements['div'] & {
+    'data-test-id'?: string;
+};
+export declare function WireTransferPayment({ infoMessage, ...p }: Props): JSX.Element;
+export default WireTransferPayment;

package/lib/esm/components/payment_source/WireTransferPayment.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentMethodContext from"../../context/PaymentMethodContext";import isFunction from"lodash/isFunction";import{useContext,useEffect,useRef}from"react";const defaultMessage="after placing the order, you will need to manually complete the payment with your bank";export function WireTransferPayment({infoMessage,...p}){const{className,"data-test-id":dataTestId}=p,ref=useRef(null),{setPaymentSource,paymentSource,currentPaymentMethodType,setPaymentRef}=useContext(PaymentMethodContext);useEffect(()=>(ref.current&&paymentSource&&currentPaymentMethodType&&(ref.current.onsubmit=()=>handleClick(),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,paymentSource,currentPaymentMethodType]);const handleClick=async()=>{if(paymentSource&&currentPaymentMethodType)try{return await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{metadata:{card:{id:paymentSource.id,brand:"wire-transfer",last4:""}}}}),!0}catch{return!1}return!1};return _jsx("form",{ref,children:_jsx("div",{className,"data-test-id":dataTestId,children:_jsx("span",{className:infoMessage?.className,children:isFunction(infoMessage?.text)?infoMessage?.text():infoMessage?.text||defaultMessage})})})}export default WireTransferPayment;

package/lib/esm/components/prices/Price.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { Price as PriceType } from '@commercelayer/sdk';
+import { ChildrenFunction, LoaderType } from '../../typings/index';
+interface PriceChildrenProps extends Omit<PriceProps, 'children'> {
+    loading: boolean;
+    loader: LoaderType;
+    prices: PriceType[];
+}
+export interface PriceProps extends Omit<JSX.IntrinsicElements['span'], 'children'> {
+    children?: ChildrenFunction<PriceChildrenProps>;
+    compareClassName?: string;
+    showCompare?: boolean;
+    skuCode?: string;
+}
+export declare function Price(props: PriceProps): JSX.Element;
+export default Price;

package/lib/esm/components/prices/Price.js

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import Parent from"../utils/Parent";import PricesContext from"../../context/PricesContext";import{useState,useEffect,useContext}from"react";import{isEmpty,has,indexOf}from"lodash";import{getPricesComponent}from"../../utils/getPrices";import SkuChildrenContext from"../../context/SkuChildrenContext";export function Price(props){const{children,skuCode=""}=props,{prices,skuCode:pricesSkuCode,loading,skuCodes,setSkuCodes,loader}=useContext(PricesContext),{sku}=useContext(SkuChildrenContext),[skuPrices,setSkuPrices]=useState([]),sCode=pricesSkuCode||skuCode||sku?.code;useEffect(()=>(!isEmpty(prices)&&has(prices,`${sCode}`)?setSkuPrices(prices[sCode]):sCode&&indexOf(skuCodes,sCode)===-1&&(skuCodes.push(sCode),setSkuCodes&&setSkuCodes(skuCodes)),()=>{setSkuPrices([])}),[prices,sCode]);const parentProps={loading,loader,prices:skuPrices,...props},pricesComponent=isEmpty(prices)||isEmpty(skuPrices)?null:getPricesComponent(skuPrices,props);return children?_jsx(Parent,{...parentProps,children}):_jsx(_Fragment,{children:loading||isEmpty(pricesComponent)?loader:pricesComponent})}export default Price;

package/lib/esm/components/prices/PricesContainer.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { LoaderType } from '../../typings/index';
+interface Props {
+    children: JSX.Element | JSX.Element[];
+    filters?: object;
+    loader?: LoaderType;
+    perPage?: number;
+    skuCode?: string;
+}
+export declare function PricesContainer(props: Props): JSX.Element;
+export default PricesContainer;

package/lib/esm/components/prices/PricesContainer.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useContext,useReducer}from"react";import getPrices from"../../utils/getPrices";import isEmpty from"lodash/isEmpty";import has from"lodash/has";import indexOf from"lodash/indexOf";import CommerceLayerContext from"../../context/CommerceLayerContext";import priceReducer,{unsetPriceState,priceInitialState,getSkusPrice}from"../../reducers/PriceReducer";import PricesContext from"../../context/PricesContext";import getCurrentItemKey from"../../utils/getCurrentItemKey";import ItemContext from"../../context/ItemContext";import SkuContext from"../../context/SkuContext";export function PricesContainer(props){const{children,skuCode="",loader="Loading...",perPage=10,filters={}}=props,[state,dispatch]=useReducer(priceReducer,priceInitialState),config=useContext(CommerceLayerContext),{skuCodes}=useContext(SkuContext),{setPrices,prices,items,item:currentItem,skuCode:itemSkuCode}=useContext(ItemContext);indexOf(state.skuCodes,skuCode)===-1&&skuCode&&state.skuCodes.push(skuCode);const sCode=skuCodes&&skuCodes?.length>0?"":skuCode||getCurrentItemKey(currentItem)||itemSkuCode||"",setSkuCodes=skuCodes2=>{dispatch({type:"setSkuCodes",payload:{skuCodes:skuCodes2}})};useEffect(()=>{if(state.skuCodes.length===0&&skuCodes&&skuCodes.length>0&&setSkuCodes(skuCodes),currentItem&&has(prices,sCode)&&dispatch({type:"setPrices",payload:{prices}}),!isEmpty(items)&&isEmpty(currentItem)){const p=getPrices(items);dispatch({type:"setPrices",payload:{prices:p}})}return config.accessToken&&!has(prices,itemSkuCode||sCode)&&(state.skuCodes.length>0||itemSkuCode||sCode)&&getSkusPrice(sCode&&[itemSkuCode||sCode]||state.skuCodes,{config,dispatch,setPrices,prices,perPage,filters}),config.accessToken&&isEmpty(currentItem)&&(state.skuCodes.length>0||skuCode)&&getSkusPrice(sCode&&[sCode]||state.skuCodes,{config,dispatch,setPrices,prices,perPage,filters}),()=>{isEmpty(currentItem)&&unsetPriceState(dispatch)}},[config.accessToken,currentItem,sCode,state.skuCodes.length,itemSkuCode]);const priceValue={...state,skuCode:sCode,loader,setSkuCodes};return _jsx(PricesContext.Provider,{value:priceValue,children})}export default PricesContainer;

package/lib/esm/components/shipments/Shipment.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { LoaderType } from '../../typings/index';
+interface ShipmentProps {
+    children: ReactNode;
+    loader?: LoaderType;
+    autoSelectSingleShippingMethod?: boolean | (() => void);
+}
+export declare function Shipment({ children, loader, autoSelectSingleShippingMethod }: ShipmentProps): JSX.Element;
+export default Shipment;

package/lib/esm/components/shipments/Shipment.js

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useContext,useState,useEffect}from"react";import ShipmentContext from"../../context/ShipmentContext";import ShipmentChildrenContext from"../../context/ShipmentChildrenContext";import getLoaderComponent from"../../utils/getLoaderComponent";export function Shipment({children,loader="Loading...",autoSelectSingleShippingMethod=!1}){const[loading,setLoading]=useState(!0),{shipments,deliveryLeadTimes,setShippingMethod}=useContext(ShipmentContext);useEffect(()=>{shipments&&(autoSelectSingleShippingMethod?(async()=>shipments.forEach(async shipment=>{const isSingle=shipment?.available_shipping_methods?.length===1;if(!shipment?.shipping_method&&isSingle){const[shippingMethod]=shipment?.available_shipping_methods||[];shippingMethod&&await setShippingMethod(shipment.id,shippingMethod.id),typeof autoSelectSingleShippingMethod=="function"&&autoSelectSingleShippingMethod()}else setTimeout(()=>{setLoading(!1)},200)}))():setLoading(!1))},[shipments]);const components=shipments?.map((shipment,k)=>{const lineItems=shipment.shipment_line_items?.map(shipmentLineItem=>{const l=shipmentLineItem.line_item;return l&&(l.quantity=shipmentLineItem.quantity),l}),shippingMethods=shipment.available_shipping_methods,currentShippingMethodId=autoSelectSingleShippingMethod&&shippingMethods&&shippingMethods.length===1?shippingMethods[0]?.id:shipment.shipping_method?.id,stockTransfers=shipment.stock_transfers,parcels=shipment.parcels,times=deliveryLeadTimes?.filter(time=>time.stock_location?.id===shipment.stock_location?.id),shipmentProps={parcels,lineItems,shippingMethods,currentShippingMethodId,stockTransfers,deliveryLeadTimes:times,shipment,keyNumber:k+1};return _jsx(ShipmentChildrenContext.Provider,{value:shipmentProps,children},k)});return loading?getLoaderComponent(loader):_jsx(_Fragment,{children:components})}export default Shipment;

package/lib/esm/components/shipments/ShipmentField.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Shipment } from '@commercelayer/sdk';
+declare type ShipmentFieldChildrenProps = Omit<Props, 'children'> & {
+    shipment: Shipment;
+};
+export declare type ShipmentAttribute = 'number' | 'currency_code' | 'status' | 'cost_amount_cents' | 'cost_amount_float' | 'formatted_cost_amount' | 'key_number';
+declare type Props = {
+    children?: (props: ShipmentFieldChildrenProps) => JSX.Element;
+    name: ShipmentAttribute;
+} & JSX.IntrinsicElements['span'];
+export declare function ShipmentField(props: Props): JSX.Element;
+export default ShipmentField;

package/lib/esm/components/shipments/ShipmentField.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import Parent from"../utils/Parent";import get from"lodash/get";import ShipmentChildrenContext from"../../context/ShipmentChildrenContext";export function ShipmentField(props){const{name}=props,{shipment,keyNumber}=useContext(ShipmentChildrenContext),key=name,text=key!=="key_number"?get(shipment,key):keyNumber,parentProps={shipment,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("span",{...props,children:text})}export default ShipmentField;

package/lib/esm/components/shipments/ShipmentsContainer.d.ts

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

package/lib/esm/components/shipments/ShipmentsContainer.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import ShipmentContext,{defaultShipmentContext}from"../../context/ShipmentContext";import{useContext,useEffect,useReducer}from"react";import shipmentReducer,{shipmentInitialState,setShipmentErrors,getShipments,setShippingMethod}from"../../reducers/ShipmentReducer";import OrderContext from"../../context/OrderContext";import CommerceLayerContext from"../../context/CommerceLayerContext";import isEmpty from"lodash/isEmpty";export function ShipmentsContainer(props){const{children}=props,[state,dispatch]=useReducer(shipmentReducer,shipmentInitialState),{order,getOrder,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),config=useContext(CommerceLayerContext);useEffect(()=>{include?.includes("shipments.available_shipping_methods")?includeLoaded?.["shipments.available_shipping_methods"]||addResourceToInclude({newResourceLoaded:{"shipments.available_shipping_methods":!0,"shipments.shipment_line_items.line_item":!0,"shipments.shipping_method":!0,"shipments.stock_transfers.line_item":!0,"shipments.stock_location":!0,"shipments.parcels.parcel_line_items":!0}}):addResourceToInclude({newResource:["shipments.available_shipping_methods","shipments.shipment_line_items.line_item","shipments.shipping_method","shipments.stock_transfers.line_item","shipments.stock_location","shipments.parcels.parcel_line_items"]}),order&&!isEmpty(config)&&order.shipments&&getShipments({order,dispatch,config})},[order,include,includeLoaded]),useEffect(()=>(order&&(order.shipments&&order.shipments.length>0&&order.shipments.map(shipment=>shipment.available_shipping_methods&&shipment.available_shipping_methods.length>0).includes(!1)&&setShipmentErrors([...state.errors||[],{code:"NO_SHIPPING_METHODS",message:"No shipping methods",resource:"shipments"}],dispatch),order.line_items&&order.line_items.length>0&&order.line_items.filter(({item_type:itemType})=>itemType==="skus").map(lineItem=>!!(lineItem.item?.do_not_ship||lineItem.item?.do_not_track||lineItem.item?.inventory?.quantity>=lineItem?.quantity)).includes(!1)&&setShipmentErrors([...state.errors||[],{code:"OUT_OF_STOCK",message:"No stock available",resource:"line_items"}],dispatch)),()=>{setShipmentErrors([],dispatch)}),[order?.shipments]);const contextValue={...state,setShipmentErrors:errors=>defaultShipmentContext.setShipmentErrors(errors,dispatch),setShippingMethod:async(shipmentId,shippingMethodId)=>await setShippingMethod({shippingMethodId,shipmentId,config,getOrder,order})};return _jsx(ShipmentContext.Provider,{value:contextValue,children})}export default ShipmentsContainer;

package/lib/esm/components/shipments/ShipmentsCount.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ChildrenFunction } from '../../typings/index';
+import type { Shipment } from '@commercelayer/sdk';
+interface ChildrenProps extends Omit<Props, 'children'> {
+    /**
+     * Shipments of the current order
+     */
+    shipments?: Shipment[];
+    /**
+     * Quantity of the shipments
+     */
+    quantity: number;
+}
+interface Props extends Omit<JSX.IntrinsicElements['span'], 'children'> {
+    children?: ChildrenFunction<ChildrenProps>;
+}
+export declare function ShipmentsCount({ children, ...p }: Props): JSX.Element;
+export default ShipmentsCount;

package/lib/esm/components/shipments/ShipmentsCount.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import Parent from"../utils/Parent";import ShipmentContext from"../../context/ShipmentContext";import{useContext}from"react";export function ShipmentsCount({children,...p}){const{shipments}=useContext(ShipmentContext);if(shipments===void 0)throw new Error("Cannot use `ShipmentsCount` outside of `ShipmentsContainer`");const quantity=shipments.length,childrenProps={...p,quantity,shipments};return children?_jsx(Parent,{...childrenProps,children}):_jsx("span",{...p,children:quantity})}export default ShipmentsCount;

package/lib/esm/components/shipping_methods/ShippingMethod.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+interface Props {
+    children: ReactNode;
+    readonly?: boolean;
+    emptyText?: string;
+}
+export declare function ShippingMethod(props: Props): JSX.Element;
+export default ShippingMethod;

package/lib/esm/components/shipping_methods/ShippingMethod.js

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import ShippingMethodChildrenContext from"../../context/ShippingMethodChildrenContext";import ShipmentChildrenContext from"../../context/ShipmentChildrenContext";import isEmpty from"lodash/isEmpty";export function ShippingMethod(props){const{children,readonly,emptyText="There are not any shipping method available"}=props,{shippingMethods,currentShippingMethodId,deliveryLeadTimes,shipment}=useContext(ShipmentChildrenContext),[items,setItems]=useState([]);useEffect(()=>{const methods=shippingMethods?.filter(s=>readonly?s.id===currentShippingMethodId:!0).map((shippingMethod,k)=>{const[deliveryLeadTimeForShipment]=deliveryLeadTimes?.filter(delivery=>{const deliveryShippingMethodId=delivery.shipping_method?.id;return shippingMethod.id===deliveryShippingMethodId}),shippingProps={shipmentId:shipment?.id,shippingMethod,currentShippingMethodId,deliveryLeadTimeForShipment};return _jsx(ShippingMethodChildrenContext.Provider,{value:shippingProps,children},k)});methods&&setItems(methods)},[currentShippingMethodId,deliveryLeadTimes,shippingMethods]);const components=!isEmpty(items)&&items||emptyText;return _jsx(_Fragment,{children:components})}export default ShippingMethod;

package/lib/esm/components/shipping_methods/ShippingMethodName.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ShippingMethod } from '@commercelayer/sdk';
+declare type ChildrenProps = Omit<Props, 'children'> & {
+    label: string;
+    shippingMethod: ShippingMethod;
+};
+declare type Props = {
+    children?: (props: ChildrenProps) => JSX.Element;
+} & JSX.IntrinsicElements['label'];
+export declare function ShippingMethodName(props: Props): JSX.Element;
+export default ShippingMethodName;

package/lib/esm/components/shipping_methods/ShippingMethodName.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import ShippingMethodChildrenContext from"../../context/ShippingMethodChildrenContext";import Parent from"../utils/Parent";export function ShippingMethodName(props){const{shippingMethod,deliveryLeadTimeForShipment,shipmentId}=useContext(ShippingMethodChildrenContext),htmlFor=`shipment-${shipmentId??""}-${shippingMethod?.id??""}`||"",labelName=shippingMethod?.name,parentProps={shippingMethod,deliveryLeadTimeForShipment,label:labelName,htmlFor,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("label",{htmlFor,...props,children:labelName})}export default ShippingMethodName;

package/lib/esm/components/shipping_methods/ShippingMethodPrice.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { BaseAmountComponent } from '../../typings/index';
+declare type Props = BaseAmountComponent & {
+    labelFreeOver?: string;
+} & ({
+    type?: 'amount';
+    base?: 'freeOver';
+} | {
+    type?: 'amount' | 'amountForShipment';
+    base?: 'price';
+});
+export declare function ShippingMethodPrice(props: Props): JSX.Element;
+export declare namespace ShippingMethodPrice {
+    var propTypes: {
+        type: import("prop-types").Requireable<"amount">;
+        id: import("prop-types").Requireable<string>;
+        className: import("prop-types").Requireable<string>;
+        style: import("prop-types").Requireable<object>;
+        name: import("prop-types").Requireable<string>;
+        children: import("prop-types").Requireable<(...args: any[]) => any>;
+        format: import("prop-types").Requireable<import("../../typings/index").BaseFormatPrice>;
+    };
+    var displayName: string;
+}
+export default ShippingMethodPrice;

package/lib/esm/components/shipping_methods/ShippingMethodPrice.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useState,useEffect,useContext}from"react";import getAmount from"../../utils/getAmount";import ShippingMethodChildrenContext from"../../context/ShippingMethodChildrenContext";import Parent from"../utils/Parent";import components from"../../config/components";const propTypes=components.ShippingMethodPrice.propTypes,displayName=components.ShippingMethodPrice.displayName;export function ShippingMethodPrice(props){const{base="price_amount",type="for_shipment",format="formatted",labelFreeOver="Free",...p}=props,{shippingMethod}=useContext(ShippingMethodChildrenContext),[price,setPrice]=useState(""),[priceCents,setPriceCents]=useState(0);useEffect(()=>{if(shippingMethod){const p2=getAmount({base,type,format,obj:shippingMethod});setPrice(p2);const pCents=getAmount({base:"price_amount",type:"for_shipment",format:"cents",obj:shippingMethod});setPriceCents(pCents)}return()=>{setPrice(""),setPriceCents(0)}},[shippingMethod]);const parentProps={price,...p},finalPrice=priceCents===0?labelFreeOver:price;return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("span",{...p,children:finalPrice})}ShippingMethodPrice.propTypes=propTypes,ShippingMethodPrice.displayName=displayName;export default ShippingMethodPrice;

package/lib/esm/components/shipping_methods/ShippingMethodRadioButton.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { ShippingMethod } from '@commercelayer/sdk';
+export declare type ShippingMethodRadioButtonType = Omit<Props, 'children'> & {
+    shippingMethod: ShippingMethod;
+    shipmentId: string;
+};
+export declare type ShippingMethodRadioButtonOnChangeType = (shippingMethod: ShippingMethod, shipmentId: string) => void;
+declare type Props = {
+    children?: (props: ShippingMethodRadioButtonType) => JSX.Element;
+    onChange?: ShippingMethodRadioButtonOnChangeType;
+} & Omit<JSX.IntrinsicElements['input'], 'onChange'>;
+export declare function ShippingMethodRadioButton(props: Props): JSX.Element;
+export declare namespace ShippingMethodRadioButton {
+    var propTypes: {
+        children: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+    var displayName: string;
+}
+export default ShippingMethodRadioButton;

package/lib/esm/components/shipping_methods/ShippingMethodRadioButton.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import ShippingMethodChildrenContext from"../../context/ShippingMethodChildrenContext";import Parent from"../utils/Parent";import components from"../../config/components";import ShipmentContext from"../../context/ShipmentContext";const propTypes=components.ShippingMethodRadioButton.propTypes,displayName=components.ShippingMethodRadioButton.displayName;export function ShippingMethodRadioButton(props){const{onChange,...p}=props,[checked,setChecked]=useState(!1),{shippingMethod,currentShippingMethodId,shipmentId}=useContext(ShippingMethodChildrenContext),{setShippingMethod}=useContext(ShipmentContext),shippingMethodId=shippingMethod?.id,name=`shipment-${shipmentId}`,id=`${name}-${shippingMethodId}`;useEffect(()=>(setChecked(shippingMethodId===currentShippingMethodId),()=>{setChecked(!1)}),[currentShippingMethodId]);const handleOnChange=async()=>{shipmentId&&shippingMethodId&&(setChecked(!0),await setShippingMethod(shipmentId,shippingMethodId),shippingMethod&&onChange&&onChange(shippingMethod,shipmentId))},parentProps={shippingMethod,shipmentId,handleOnChange,name,id,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("input",{type:"radio",name,id,onChange:handleOnChange,checked,...p})}ShippingMethodRadioButton.propTypes=propTypes,ShippingMethodRadioButton.displayName=displayName;export default ShippingMethodRadioButton;

package/lib/esm/components/skus/AvailabilityContainer.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+declare type Props = {
+    children: ReactNode;
+    skuCode?: string;
+};
+export declare function AvailabilityContainer(props: Props): JSX.Element;
+export declare namespace AvailabilityContainer {
+    var propTypes: {
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
+        skuCode: import("prop-types").Requireable<string>;
+    };
+    var displayName: string;
+}
+export default AvailabilityContainer;

package/lib/esm/components/skus/AvailabilityContainer.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useReducer,useEffect}from"react";import availabilityReducer,{availabilityInitialState,getAvailability,getAvailabilityByIds}from"../../reducers/AvailabilityReducer";import AvailabilityContext from"../../context/AvailabilityContext";import ItemContext from"../../context/ItemContext";import getCurrentItemKey from"../../utils/getCurrentItemKey";import components from"../../config/components";import CommerceLayerContext from"../../context/CommerceLayerContext";import LineItemChildrenContext from"../../context/LineItemChildrenContext";import SkuChildrenContext from"../../context/SkuChildrenContext";import SkuContext from"../../context/SkuContext";import isEqual from"lodash/isEqual";const propTypes=components.AvailabilityContainer.propTypes,displayName=components.AvailabilityContainer.displayName;export function AvailabilityContainer(props){const{children,skuCode}=props,{item,skuCode:itemSkuCode,setItem}=useContext(ItemContext),{lineItem}=useContext(LineItemChildrenContext),{sku}=useContext(SkuChildrenContext),{skus}=useContext(SkuContext),config=useContext(CommerceLayerContext),[state,dispatch]=useReducer(availabilityReducer,availabilityInitialState),sCode=skuCode||getCurrentItemKey(item)||itemSkuCode||lineItem?.sku_code||sku?.code;return useEffect(()=>{if(sCode&&!skus){const available=item[sCode]?.inventory?.available,quantity=item[sCode]?.inventory?.quantity,[level]=item[sCode]?.inventory?.levels||[{quantity:null,delivery_lead_times:[]}];if(level!==void 0&&level?.delivery_lead_times?.length>0){const[delivery]=level.delivery_lead_times;dispatch({type:"setAvailability",payload:{...delivery,quantity:level?.quantity}})}else config.accessToken&&!item?.[sCode]?getAvailability({skuCode:sCode,config,dispatch,setItem,item}):available||dispatch({type:"setAvailability",payload:{quantity}})}else if(skus&&config.accessToken){const itemKeys=Object.keys(item).sort(),skuCodes=skus.map(s=>s?.code).sort();if(!isEqual(skuCodes,itemKeys)){const skusIds=skus.map(s=>s.id);getAvailabilityByIds({skusIds,config,dispatch,setItem})}}return()=>{dispatch({type:"setAvailability",payload:{}})}},[config.accessToken,item,sCode,skus]),_jsx(AvailabilityContext.Provider,{value:{...state},children})}AvailabilityContainer.propTypes=propTypes,AvailabilityContainer.displayName=displayName;export default AvailabilityContainer;

package/lib/esm/components/skus/AvailabilityTemplate.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { TimeFormat, ChildrenFunction } from '../../typings/index';
+import { DeliveryLeadTime } from '../../reducers/AvailabilityReducer';
+interface AvailabilityTemplateChildrenProps extends Omit<Props, 'children'>, DeliveryLeadTime {
+    text: string;
+    quantity: number;
+}
+declare type Props = {
+    children?: ChildrenFunction<AvailabilityTemplateChildrenProps>;
+    timeFormat?: TimeFormat;
+    showShippingMethodName?: boolean;
+    showShippingMethodPrice?: boolean;
+} & JSX.IntrinsicElements['p'];
+export declare function AvailabilityTemplate(props: Props): JSX.Element;
+export default AvailabilityTemplate;

package/lib/esm/components/skus/AvailabilityTemplate.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import AvailabilityContext from"../../context/AvailabilityContext";import Parent from"../utils/Parent";import{isEmpty}from"lodash";import ItemContext from"../../context/ItemContext";import SkuChildrenContext from"../../context/SkuChildrenContext";export function AvailabilityTemplate(props){const{timeFormat,showShippingMethodName,showShippingMethodPrice,children,...p}=props;let{min,max,shipping_method:shippingMethod,quantity}=useContext(AvailabilityContext);const{item}=useContext(ItemContext),{sku}=useContext(SkuChildrenContext),text=[];if(item&&sku){const code=sku.code,currentItem=item[code];if(currentItem){const[level]=currentItem.inventory?.levels||[],[delivery]=level?.delivery_lead_times||[];delivery&&(min=delivery?.min,max=delivery?.max,shippingMethod=delivery?.shipping_method),quantity=currentItem.inventory.quantity}}const mn=!isEmpty(min)&&timeFormat?min?.[timeFormat]:"",mx=!isEmpty(max)&&timeFormat?max?.[timeFormat]:"",shippingMethodPrice=showShippingMethodPrice&&shippingMethod?.formatted_price_amount?`(${shippingMethod?.formatted_price_amount})`:"",name=showShippingMethodName&&shippingMethod?`with ${shippingMethod.name}`:"";quantity&&quantity>0?(text.push("Available"),mn&&mx&&text.push(`in ${mn} - ${mx} ${timeFormat??""} ${name} ${shippingMethodPrice}`)):quantity===0&&text.push("Out of stock");const parentProps={min,max,shipping_method:shippingMethod,quantity,text:text.join(" "),...props};return children?_jsx(Parent,{...parentProps,children}):_jsx("p",{...p,children:text.join(" ")})}export default AvailabilityTemplate;

package/lib/esm/components/skus/DeliveryLeadTime.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare type DeliveryLeadTimeField = 'min_hours' | 'max_hours' | 'min_days' | 'max_days';
+export declare type DeliveryLeadTimeComponentChildren = Omit<Props, 'children'>;
+declare type Props = Partial<JSX.IntrinsicElements['span']> & {
+    children?: (props: DeliveryLeadTimeComponentChildren) => JSX.Element;
+    type: DeliveryLeadTimeField;
+    text?: string;
+};
+export declare function DeliveryLeadTime(props: Props): JSX.Element;
+export declare namespace DeliveryLeadTime {
+    var propTypes: {
+        type: import("prop-types").Validator<NonNullable<DeliveryLeadTimeField>>;
+        children: import("prop-types").Requireable<(...args: any[]) => any>;
+    };
+    var displayName: string;
+}
+export default DeliveryLeadTime;

package/lib/esm/components/skus/DeliveryLeadTime.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useState,useEffect}from"react";import ShippingMethodChildrenContext from"../../context/ShippingMethodChildrenContext";import Parent from"../utils/Parent";import components from"../../config/components";const propTypes=components.DeliveryLeadTime.propTypes,displayName=components.DeliveryLeadTime.displayName;export function DeliveryLeadTime(props){const{type,...p}=props,[text,setText]=useState(),{deliveryLeadTimeForShipment}=useContext(ShippingMethodChildrenContext);useEffect(()=>(deliveryLeadTimeForShipment&&deliveryLeadTimeForShipment[type]&&setText(deliveryLeadTimeForShipment[type]),()=>{setText("")}),[deliveryLeadTimeForShipment]);const parentProps={text,...p};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("span",{...p,children:text})}DeliveryLeadTime.propTypes=propTypes,DeliveryLeadTime.displayName=displayName;export default DeliveryLeadTime;

package/lib/esm/components/skus/QuantitySelector.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ChildrenFunction } from '../../typings/index';
+interface ChildrenProps extends Omit<Props, 'children'> {
+    handleChange: (event: React.MouseEvent<HTMLInputElement>) => void;
+    handleBlur: (event: React.MouseEvent<HTMLInputElement>) => void;
+}
+declare type Props = {
+    children?: ChildrenFunction<ChildrenProps>;
+    disabled?: boolean;
+    min?: number;
+    max?: number;
+    value?: string;
+    skuCode?: string;
+    skuListId?: string;
+} & JSX.IntrinsicElements['input'];
+export declare function QuantitySelector(props: Props): JSX.Element;
+export default QuantitySelector;

package/lib/esm/components/skus/QuantitySelector.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useState,useEffect}from"react";import Parent from"../utils/Parent";import has from"lodash/has";import isEmpty from"lodash/isEmpty";import getCurrentItemKey from"../../utils/getCurrentItemKey";import ItemContext from"../../context/ItemContext";import SkuListsContext from"../../context/SkuListsContext";import SkuChildrenContext from"../../context/SkuChildrenContext";export function QuantitySelector(props){const{skuCode,skuListId,children,min=1,max,...p}=props,{item,setQuantity,items,quantity,prices,skuCode:itemSkuCode}=useContext(ItemContext),{sku}=useContext(SkuChildrenContext),{skuLists,listIds}=useContext(SkuListsContext),defaultVal=p?.value||min,[value,setValue]=useState(defaultVal),[disabled,setDisabled]=useState(!!p.disabled),sCode=!isEmpty(items)&&skuCode?items[skuCode]?.code:sku?.code||skuCode||getCurrentItemKey(item)||itemSkuCode,inventory=isEmpty(item)?50:item[sCode]?.inventory?.quantity,maxInv=max||inventory;useEffect(()=>{if(setValue(defaultVal),(!prices[sCode]||!sCode)&&setDisabled(!0),skuListId&&setDisabled(!1),sCode&&!quantity[sCode]){const qty=Number(defaultVal);setQuantity&&setQuantity({...quantity,[`${sCode}`]:qty}),!isEmpty(prices)&&has(prices,sCode)&&setDisabled(!1)}return()=>{setValue(defaultVal)}},[item,listIds,prices,quantity]);const handleChange=e=>{const qty=Number(e.target.value),valid=Number(qty)>=Number(min)&&Number(qty)<=Number(maxInv);setValue(qty),!isEmpty(skuLists)&&skuListId&&valid?setQuantity&&setQuantity({...quantity,[`${skuListId}`]:Number(qty)}):sCode&&valid&&setQuantity&&setQuantity({...quantity,[`${sCode}`]:Number(qty)})},handleBlur=e=>{const qty=e.target.value;if(!(Number(qty)>=Number(min)&&Number(qty)<=Number(maxInv))){const resetVal=Number(qty)<Number(min)?min:maxInv;resetVal&&setValue(resetVal),!isEmpty(skuLists)&&skuListId?setQuantity&&setQuantity({...quantity,[`${skuListId}`]:Number(resetVal)}):setQuantity&&setQuantity({...quantity,[`${sCode}`]:Number(resetVal)})}},parentProps={min,max:maxInv,disabled,handleChange,handleBlur,value,...props};return children?_jsx(Parent,{...parentProps,children}):_jsx("input",{type:"number",max:maxInv,min,value:value||"",disabled,onChange:handleChange,onBlur:handleBlur,...p})}export default QuantitySelector;

package/lib/esm/components/skus/SkuField.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ConditionalElement } from '../../typings/index';
+import { TGenericChildrenProps, TResources } from '../utils/GenericFieldComponent';
+declare type SkuFieldChildrenProps = TGenericChildrenProps<TResources['Sku']>;
+declare type TCondition = ConditionalElement<Exclude<TResources['Sku'], 'resource'>>;
+declare type Props = {
+    children?: (props: SkuFieldChildrenProps) => JSX.Element;
+} & TCondition;
+/**
+ * @param props {@link Props}
+ * @returns
+ */
+export declare function SkuField<P extends Props>(props: P): JSX.Element;
+export default SkuField;

package/lib/esm/components/skus/SkuField.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import SkuChildrenContext from"../../context/SkuChildrenContext";import GenericFieldComponent from"../utils/GenericFieldComponent";export function SkuField(props){const{attribute,tagElement,children,...p}=props;return _jsx(GenericFieldComponent,{resource:"skus",attribute,tagElement,context:SkuChildrenContext,...p,children})}export default SkuField;

package/lib/esm/components/skus/SkuList.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+declare type Props = {
+    children: ReactNode;
+    id: string;
+};
+export declare function SkuList(props: Props): JSX.Element;
+export declare namespace SkuList {
+    var propTypes: {
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
+        id: import("prop-types").Validator<string>;
+    };
+    var displayName: string;
+}
+export default SkuList;

package/lib/esm/components/skus/SkuList.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,Fragment}from"react";import SkuListsContext from"../../context/SkuListsContext";import components from"../../config/components";const propTypes=components.SkuList.propTypes,displayName=components.SkuList.displayName;export function SkuList(props){const{id,children}=props,{listIds}=useContext(SkuListsContext);return useEffect(()=>{listIds&&!listIds.includes(id)&&listIds.push(id)},[]),_jsx(Fragment,{children})}SkuList.propTypes=propTypes,SkuList.displayName=displayName;export default SkuList;

package/lib/esm/components/skus/SkuListsContainer.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+declare type Props = {
+    children: ReactNode;
+};
+export declare function SkuListsContainer(props: Props): JSX.Element;
+export declare namespace SkuListsContainer {
+    var propTypes: {
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
+    };
+    var displayName: string;
+}
+export default SkuListsContainer;

package/lib/esm/components/skus/SkuListsContainer.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useReducer,useContext,useEffect}from"react";import SkuListsContext from"../../context/SkuListsContext";import CommerceLayerContext from"../../context/CommerceLayerContext";import skuListsReducer,{skuListsInitialState,getSkuList}from"../../reducers/SkuListsReducer";import components from"../../config/components";const propTypes=components.SkuListsContainer.propTypes,displayName=components.SkuListsContainer.displayName;export function SkuListsContainer(props){const{children}=props,[state,dispatch]=useReducer(skuListsReducer,skuListsInitialState),config=useContext(CommerceLayerContext);return useEffect(()=>{state.listIds&&state.listIds.length>0&&config.accessToken&&getSkuList({listIds:state.listIds,dispatch,config,state})},[config.accessToken]),_jsx(SkuListsContext.Provider,{value:state,children})}SkuListsContainer.propTypes=propTypes,SkuListsContainer.displayName=displayName;export default SkuListsContainer;

package/lib/esm/components/skus/SkuOption.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+declare type Props = {
+    children: ReactNode;
+    id: string;
+};
+export declare function SkuOption(props: Props): JSX.Element;
+export declare namespace SkuOption {
+    var propTypes: {
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
+        id: import("prop-types").Validator<string>;
+    };
+    var displayName: string;
+}
+export default SkuOption;

package/lib/esm/components/skus/SkuOption.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{Fragment,useContext}from"react";import SkuOptionChildrenContext from"../../context/SkuOptionChildrenContext";import SkuOptionsContext from"../../context/SkuOptionsContext";import components from"../../config/components";const propTypes=components.SkuOption.propTypes,displayName=components.SkuOption.displayName;export function SkuOption(props){const{id}=props,{skuOptions,skuCode}=useContext(SkuOptionsContext),items=skuOptions&&skuOptions.filter(l=>l.id===id).map((skuOption,k)=>_jsx(SkuOptionChildrenContext.Provider,{value:{skuOption,skuCode},children:props.children},k));return _jsx(Fragment,{children:items})}SkuOption.propTypes=propTypes,SkuOption.displayName=displayName;export default SkuOption;

package/lib/esm/components/skus/SkuOptionInput.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { BaseInputComponentProps } from '../../typings/index';
+declare type Props = BaseInputComponentProps & JSX.IntrinsicElements['input'] & JSX.IntrinsicElements['textarea'];
+export declare function SkuOptionInput(props: Props): JSX.Element;
+export declare namespace SkuOptionInput {
+    var propTypes: {
+        children: import("prop-types").Requireable<(...args: any[]) => any>;
+        name: import("prop-types").Validator<string>;
+        type: import("prop-types").Validator<NonNullable<import("../../typings/index").BaseInputType>>;
+        onChange: import("prop-types").Requireable<(...args: any[]) => any>;
+        placeholder: import("prop-types").Requireable<string>;
+    };
+    var displayName: string;
+}
+export default SkuOptionInput;

package/lib/esm/components/skus/SkuOptionInput.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import BaseInput from"../utils/BaseInput";import ItemContext from"../../context/ItemContext";import SkuOptionChildrenContext from"../../context/SkuOptionChildrenContext";import has from"lodash/has";import components from"../../config/components";const propTypes=components.SkuOptionInput.propTypes,displayName=components.SkuOptionInput.displayName;export function SkuOptionInput(props){const{name}=props,{option,setOption}=useContext(ItemContext),{skuOption,skuCode}=useContext(SkuOptionChildrenContext);return _jsx(BaseInput,{onChange:event=>{const val=event.target.value,options=has(option,`${skuCode}.${skuOption?.id}`)?option[skuCode]?.[`${skuOption?.id}`]?.options:{},o={[skuCode]:{...option[skuCode],[`${skuOption?.id}`]:{skuOptionId:skuOption?.id,options:{...options,[name]:val}}}};setOption&&setOption(o)},...props})}SkuOptionInput.propTypes=propTypes,SkuOptionInput.displayName=displayName;export default SkuOptionInput;

package/lib/esm/components/skus/SkuOptionsContainer.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+declare type Props = {
+    children: ReactNode;
+    skuCode?: string;
+};
+export declare function SkuOptionsContainer(props: Props): JSX.Element;
+export declare namespace SkuOptionsContainer {
+    var propTypes: {
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
+        skuCode: import("prop-types").Requireable<string>;
+    };
+    var displayName: string;
+}
+export default SkuOptionsContainer;

package/lib/esm/components/skus/SkuOptionsContainer.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useReducer,useContext,useEffect}from"react";import SkuOptionsContext from"../../context/SkuOptionsContext";import skuOptionsReducer,{skuOptionsInitialState}from"../../reducers/SkuOptionsReducer";import CommerceLayerContext from"../../context/CommerceLayerContext";import{isEmpty}from"lodash";import getCurrentItemKey from"../../utils/getCurrentItemKey";import ItemContext from"../../context/ItemContext";import{getSkuOptions}from"../../reducers/SkuOptionsReducer";import components from"../../config/components";const propTypes=components.SkuOptionsContainer.propTypes,displayName=components.SkuOptionsContainer.displayName;export function SkuOptionsContainer(props){const{skuCode,children}=props,[state,dispatch]=useReducer(skuOptionsReducer,skuOptionsInitialState),config=useContext(CommerceLayerContext),{item,items}=useContext(ItemContext),sCode=!isEmpty(items)&&skuCode?items[skuCode]?.code:skuCode||getCurrentItemKey(item),skuOptionsValue={...state,skuCode:sCode};return useEffect(()=>(sCode&&item[sCode]?.sku_options&&getSkuOptions({skuOptions:item[sCode]?.sku_options,dispatch}),()=>{isEmpty(sCode)&&dispatch({type:"setSkuOptions",payload:{skuOptions:[]}})}),[config,sCode]),_jsx(SkuOptionsContext.Provider,{value:skuOptionsValue,children})}SkuOptionsContainer.propTypes=propTypes,SkuOptionsContainer.displayName=displayName;export default SkuOptionsContainer;

package/lib/esm/components/skus/Skus.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+declare type Props = {
+    children: ReactNode;
+};
+export declare function Skus<P extends Props>({ children }: P): JSX.Element;
+export declare namespace Skus {
+    var propTypes: {
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
+    };
+}
+export default Skus;

package/lib/esm/components/skus/Skus.js

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import components from"../../config/components";import SkuChildrenContext from"../../context/SkuChildrenContext";import SkuContext from"../../context/SkuContext";import{useContext}from"react";export function Skus({children}){const{skus}=useContext(SkuContext),components2=skus&&skus.map((sku,key)=>{const value={sku};return _jsx(SkuChildrenContext.Provider,{value,children},key)});return _jsx(_Fragment,{children:components2})}Skus.propTypes=components.Skus.propTypes;export default Skus;

package/lib/esm/components/skus/SkusContainer.d.ts

@@ -0,0 +1,18 @@
+import type { QueryParamsList } from '@commercelayer/sdk';
+import { ReactNode } from 'react';
+declare type Props = {
+    /**
+     * An array of skus to display.
+     */
+    skus: string[];
+    /**
+     * Accept a React node, [Skus](./Skus.d.ts), and [ItemContainer](../ItemContainer.d.ts)  as children to display above the skus.
+     */
+    children: ReactNode;
+    /**
+     * An object params to query the skus resource
+     */
+    queryParams?: QueryParamsList;
+};
+export declare function SkusContainer<P extends Props>(props: P): JSX.Element;
+export default SkusContainer;

package/lib/esm/components/skus/SkusContainer.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import CommerceLayerContext from"../../context/CommerceLayerContext";import SkuContext from"../../context/SkuContext";import skuReducer,{getSku,skuInitialState}from"../../reducers/SkuReducer";import{useContext,useEffect,useMemo,useReducer}from"react";export function SkusContainer(props){const{skus,children,queryParams}=props,[state,dispatch]=useReducer(skuReducer,skuInitialState),config=useContext(CommerceLayerContext),loadSkus=async()=>await getSku({config,dispatch,skus,queryParams});useEffect(()=>(config.accessToken&&state?.skus&&state?.skus.length===0&&loadSkus(),()=>{dispatch({type:"setLoading",payload:{loading:!0}})}),[config,skus]);const contextValue=useMemo(()=>state,[state]);return _jsx(SkuContext.Provider,{value:contextValue,children})}export default SkusContainer;