@commercelayer/react-components 4.0.0-alpha.2 → 4.0.0-alpha.4

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

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useRef}from"react";import useExternalScript from"../../utils/hooks/useExternalScript";import PaymentMethodContext from"../../context/PaymentMethodContext";import{Frames,CardNumber,ExpiryDate,Cvv}from"frames-react";import OrderContext from"../../context/OrderContext";import Parent from"../utils/Parent";import{setCustomerOrderParam}from"../../utils/localStorage";const scriptUrl="https://cdn.checkout.com/js/framesv2.min.js",systemLanguages=["DE-DE","EN-GB","ES-ES","FR-FR","IT-IT","KR-KR","NL-NL"],defaultOptions={style:{base:{color:"black",fontSize:"18px"},autofill:{backgroundColor:"yellow"},hover:{color:"blue"},focus:{color:"blue"},valid:{color:"green"},invalid:{color:"red"},placeholder:{base:{color:"gray"},focus:{border:"solid 1px blue"}}}};export function CheckoutComPayment({publicKey,options=defaultOptions,locale="EN-GB",...p}){const ref=useRef(null),loaded=useExternalScript(scriptUrl),{setPaymentRef,currentPaymentMethodType,paymentSource,setPaymentSource,setPaymentMethodErrors}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),{containerClassName,templateCustomerSaveToWallet,success_url=window.location.href,failure_url=window.location.href,show,...divProps}=p,handleSubmit=async()=>{const savePaymentSourceToCustomerWallet=ref?.current?.elements?.save_payment_source_to_customer_wallet?.checked;if(savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),window.Frames){window.Frames.cardholder={name:order?.billing_address?.full_name,billingAddress:{addressLine1:order?.billing_address?.line_1,addressLine2:order?.billing_address?.line_2,zip:order?.billing_address?.zip_code,city:order?.billing_address?.city,state:order?.billing_address?.state_code,country:order?.billing_address?.country_code},phone:order?.billing_address?.phone};try{const data=await window.Frames.submitCard();if(data.token&&paymentSource&&currentPaymentMethodType){const ps=await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{token:data.token,payment_type:"token",success_url,failure_url,_authorize:!0}});ps&&ps.redirect_uri&&(window.location.href=ps.redirect_uri)}}catch(error){console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error?.message}])}}return!1},lang=`${locale.toUpperCase()}-${locale.toUpperCase()}`,localization=systemLanguages.includes(lang)?lang:"EN-GB";return loaded&&show?_jsxs("form",{ref,children:[_jsx("div",{className:containerClassName,...divProps,children:_jsxs(Frames,{config:{debug:!0,publicKey,localization,...options},cardValidationChanged:e=>{e.isValid&&ref.current&&(ref.current.onsubmit=()=>handleSubmit(),setPaymentRef({ref}))},cardTokenized:data=>data,children:[_jsx(CardNumber,{}),_jsx(ExpiryDate,{}),_jsx(Cvv,{})]})}),templateCustomerSaveToWallet&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})]}):null}export default CheckoutComPayment;

package/lib/esm/components/{KlarnaPayment.d.ts → payment_source/KlarnaPayment.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PaymentMethodConfig } from '../reducers/PaymentMethodReducer';
+import { PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
 import { PaymentSourceProps } from './PaymentSource';
 declare type KlarnaPaymentProps = PaymentMethodConfig['klarnaPayment'] & JSX.IntrinsicElements['div'] & Partial<PaymentSourceProps['templateCustomerSaveToWallet']> & {
     show?: boolean;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../../context/PaymentMethodContext";import OrderContext from"../../context/OrderContext";import useExternalScript from"../../utils/hooks/useExternalScript";import PlaceOrderContext from"../../context/PlaceOrderContext";function typeOfLine(lineItemType){switch(lineItemType){case"payment_methods":default:return null;case"percentage_discount_promotions":return"discount";case"shipments":return"shipping_fee";case"skus":return"physical"}}function klarnaOrderLines(lineItems){return lineItems?lineItems.map(item=>{const type=item.item_type?typeOfLine(item.item_type):null;return{name:item.name,quantity:item.quantity,total_amount:item.total_amount_cents,unit_price:item.unit_amount_cents,type}}):[]}export default function KlarnaPayment({clientToken,placeOrderCallback,locale="EN",...p}){const ref=useRef(null),{paymentSource,currentPaymentMethodType,setPaymentRef,setPaymentSource,setPaymentMethodErrors}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),{setPlaceOrder}=useContext(PlaceOrderContext),loaded=useExternalScript("https://x.klarnacdn.net/kp/lib/v1/api.js"),[klarna,setKlarna]=useState(),{containerClassName,...divProps}=p;useEffect(()=>{loaded&&window?.Klarna!==void 0&&setKlarna(window.Klarna)},[loaded,window.Klarna]),useEffect(()=>(ref.current&&paymentSource&&currentPaymentMethodType&&loaded&&klarna&&(ref.current.onsubmit=()=>handleClick(klarna),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,paymentSource,currentPaymentMethodType,loaded,klarna]);const handleClick=async kl=>{const[first]=paymentSource?.payment_methods||void 0,payment_method_category=first?.identifier,billing_address={given_name:order?.billing_address?.first_name,family_name:order?.billing_address?.last_name,email:order?.customer_email,street_address:order?.billing_address?.line_1,street_address2:null,organization_name:null,postal_code:order?.billing_address?.zip_code,city:order?.billing_address?.city,region:order?.billing_address?.state_code,phone:order?.billing_address?.phone,country:order?.billing_address?.country_code},shipping_address={given_name:order?.shipping_address?.first_name,family_name:order?.shipping_address?.last_name,email:order?.customer_email,street_address:order?.shipping_address?.line_1,street_address2:null,postal_code:order?.shipping_address?.zip_code,organization_name:null,city:order?.shipping_address?.city,region:order?.shipping_address?.state_code,phone:order?.shipping_address?.phone,country:order?.shipping_address?.country_code},klarnaData={merchant_data:order?.id,purchase_country:order?.country_code,purchase_currency:order?.currency_code,locale,shipping_address,billing_address,order_amount:order?.total_amount_cents,order_lines:klarnaOrderLines(order?.line_items)};try{kl.Payments.load({container:"#klarna-payments-container",payment_method_category},{billing_address,shipping_address},async function({show_form}){if(show_form)try{await kl.Payments.authorize({payment_method_category},klarnaData,async function(res){if(res.approved&&paymentSource&&currentPaymentMethodType){const ps=await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{auth_token:res.authorization_token}}),{placed}=setPlaceOrder&&ps&&await setPlaceOrder({paymentSource:ps})||{placed:!1};placed&&placeOrderCallback&&placeOrderCallback({placed})}})}catch(e){console.error("e",e),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:"Authorization error"}])}})}catch(e){console.error("Load Klarna libray",e)}};if(klarna&&clientToken){const[first]=paymentSource?.payment_methods||void 0;klarna.Payments.init({client_token:clientToken}),klarna.Payments.load({container:"#klarna-payments-container",payment_method_category:first?.identifier},{billing_address:{given_name:order?.billing_address?.first_name,family_name:order?.billing_address?.last_name,email:order?.customer_email,street_address:order?.billing_address?.line_1,street_address2:order?.billing_address?.line_2,postal_code:order?.billing_address?.zip_code,city:order?.billing_address?.city,region:order?.billing_address?.state_code,phone:order?.billing_address?.phone,country:order?.billing_address?.country_code},shipping_address:{given_name:order?.shipping_address?.first_name,family_name:order?.shipping_address?.last_name,street_address:order?.shipping_address?.line_1,street_address2:order?.shipping_address?.line_2,postal_code:order?.shipping_address?.zip_code,city:order?.shipping_address?.city,region:order?.shipping_address?.state_code,phone:order?.shipping_address?.phone,country:order?.shipping_address?.country_code}})}return _jsx("form",{ref,children:_jsx("div",{className:containerClassName,...divProps,children:_jsx("div",{id:"klarna-payments-container"})})})}

package/lib/esm/components/{PaymentSource.d.ts → payment_source/PaymentSource.d.ts}

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { LoaderType } from '../typings/index';
-import { CustomerCardsTemplateChildren } from './utils/PaymentCardsTemplate';
+import { LoaderType } from '../../typings/index';
+import { CustomerCardsTemplateChildren } from '../utils/PaymentCardsTemplate';
 export declare type CustomerCardsProps = {
     handleClick: () => void;
 };
@@ -12,13 +12,13 @@ export declare type PaymentSourceProps = {
     readonly?: boolean;
     templateCustomerCards?: CustomerCardsTemplateChildren;
     onClickCustomerCards?: () => void;
-    templateCustomerSaveToWallet?: (props: CustomerSaveToWalletProps) => ReactNode;
+    templateCustomerSaveToWallet?: (props: CustomerSaveToWalletProps) => JSX.Element;
     loader?: LoaderType;
 } & JSX.IntrinsicElements['div'];
 export declare function PaymentSource(props: PaymentSourceProps): JSX.Element;
 export declare namespace PaymentSource {
     var propTypes: {
-        children: import("prop-types").Requireable<ReactNode | (() => ReactNode)>;
+        children: import("prop-types").Requireable<ReactNode | (() => JSX.Element)>;
         readonly: import("prop-types").Requireable<boolean>;
     };
     var displayName: string;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useState,useEffect}from"react";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import components from"../../config/components";import PaymentMethodContext from"../../context/PaymentMethodContext";import CustomerContext from"../../context/CustomerContext";import PaymentGateway from"../payment_gateways/PaymentGateway";import getCardDetails from"../../utils/getCardDetails";import OrderContext from"../../context/OrderContext";const propTypes=components.PaymentSource.propTypes,displayName=components.PaymentSource.displayName;export function PaymentSource(props){const{readonly}=props,{payment}=useContext(PaymentMethodChildrenContext),{order}=useContext(OrderContext),{payments}=useContext(CustomerContext),{currentPaymentMethodId,paymentSource,destroyPaymentSource}=useContext(PaymentMethodContext),[show,setShow]=useState(!1),[showCard,setShowCard]=useState(!1);useEffect(()=>(readonly?(setShow(!0),setShowCard(!0)):payment?.id===currentPaymentMethodId?(setShow(!0),getCardDetails({paymentType:payment?.payment_source_type,customerPayment:{payment_source:paymentSource}}).brand&&setShowCard(!0)):setShow(!1),()=>{setShow(!1),setShowCard(!1)}),[currentPaymentMethodId,paymentSource,payments,payment,readonly,order]);const gatewayProps={...props,show,showCard,handleEditClick:async e=>{if(e.stopPropagation(),paymentSource){const paymentSourceId=paymentSource?.id;await destroyPaymentSource({paymentSourceId,paymentResource:payment?.payment_source_type})}setShowCard(!showCard),setShow(!0)},readonly};return _jsx(PaymentGateway,{...gatewayProps})}PaymentSource.propTypes=propTypes,PaymentSource.displayName=displayName;export default PaymentSource;

package/lib/{cjs/components → esm/components/payment_source}/PaymentSourceBrandIcon.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { IconBrand } from '../context/PaymentSourceContext';
-import { FunctionChildren } from '../typings/index';
+import { IconBrand } from '../../context/PaymentSourceContext';
+import { FunctionChildren } from '../../typings/index';
 declare type CustomComponent = FunctionChildren<Omit<Props & {
     brand: IconBrand;
     defaultSrc: string;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{useContext,useRef}from"react";import Parent from"../utils/Parent";import components from"../../config/components";const propTypes=components.PaymentSourceBrandIcon.propTypes,displayName=components.PaymentSourceBrandIcon.displayName;export function PaymentSourceBrandIcon({src,width=32,children,...p}){const{brand}=useContext(PaymentSourceContext),ref=useRef(null),defaultSrc="//data.commercelayer.app/assets/images/icons/credit-cards/color/credit-card.svg",url=src||`//data.commercelayer.app/assets/images/icons/credit-cards/color/${brand}.svg`,handleError=()=>{ref.current&&(ref.current.src=defaultSrc)},parentProps={brand,defaultSrc,url,width,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("img",{ref,src:url,onError:handleError,width,...p})}PaymentSourceBrandIcon.propTypes=propTypes,PaymentSourceBrandIcon.displayName=displayName;export default PaymentSourceBrandIcon;

package/lib/{cjs/components → esm/components/payment_source}/PaymentSourceBrandName.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { IconBrand } from '../context/PaymentSourceContext';
-import { FunctionChildren } from '../typings/index';
+import { IconBrand } from '../../context/PaymentSourceContext';
+import { FunctionChildren } from '../../typings/index';
 declare type CustomComponent = FunctionChildren<Omit<Props & {
     brand: IconBrand;
 }, 'children'>>;

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";import components from"../../config/components";const propTypes=components.PaymentSourceBrandName.propTypes,displayName=components.PaymentSourceBrandName.displayName;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)})}PaymentSourceBrandName.propTypes=propTypes,PaymentSourceBrandName.displayName=displayName;export default PaymentSourceBrandName;

package/lib/{cjs/components → esm/components/payment_source}/PaymentSourceDetail.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FunctionChildren } from '../typings/index';
+import { FunctionChildren } from '../../typings/index';
 export declare type PaymentSourceDetailType = 'last4' | 'exp_year' | 'exp_month';
 declare type CustomComponent = FunctionChildren<Omit<Props & {
     text: string;
@@ -11,7 +11,7 @@ declare type Props = {
 export declare function PaymentSourceDetail({ type, children, ...p }: Props): JSX.Element;
 export declare namespace PaymentSourceDetail {
     var propTypes: {
-        type: import("prop-types").Validator<PaymentSourceDetailType>;
+        type: import("prop-types").Validator<NonNullable<PaymentSourceDetailType>>;
     };
     var displayName: string;
 }

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import components from"../../config/components";import PaymentSourceContext from"../../context/PaymentSourceContext";import{has}from"lodash";import{useContext}from"react";import Parent from"../utils/Parent";const propTypes=components.PaymentSourceDetail.propTypes,displayName=components.PaymentSourceDetail.displayName;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})}PaymentSourceDetail.propTypes=propTypes,PaymentSourceDetail.displayName=displayName;export default PaymentSourceDetail;

package/lib/esm/components/{PaymentSourceEditButton.d.ts → payment_source/PaymentSourceEditButton.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FunctionChildren } from '../typings/index';
+import { FunctionChildren } from '../../typings/index';
 declare type CustomComponent = FunctionChildren<Omit<Props, 'children'>>;
 declare type Props = {
     children?: CustomComponent;
@@ -9,7 +9,7 @@ export declare function PaymentSourceEditButton({ children, label, ...props }: P
 export declare namespace PaymentSourceEditButton {
     var propTypes: {
         children: import("prop-types").Requireable<(...args: any[]) => any>;
-        label: import("prop-types").Requireable<string | import("prop-types").ReactElementLike>;
+        label: import("prop-types").Requireable<NonNullable<string | import("prop-types").ReactElementLike | null | undefined>>;
     };
     var displayName: string;
 }

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";import components from"../../config/components";const displayName=components.PaymentSourceEditButton.displayName,propTypes=components.PaymentSourceEditButton.propTypes;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})}PaymentSourceEditButton.propTypes=propTypes,PaymentSourceEditButton.displayName=displayName;export default PaymentSourceEditButton;

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/{StripePayment.d.ts → payment_source/StripePayment.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { StripeCardElementOptions, StripeElementLocale } from '@stripe/stripe-js';
-import { PaymentMethodConfig } from '../reducers/PaymentMethodReducer';
+import { PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
 import { PaymentSourceProps } from './PaymentSource';
 export declare type StripeConfig = {
     containerClassName?: string;

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/{WireTransferPayment.d.ts → payment_source/WireTransferPayment.d.ts}

@@ -5,6 +5,8 @@ export declare type WireTransferConfig = {
         className?: string;
     };
 };
-declare type Props = WireTransferConfig & JSX.IntrinsicElements['div'];
+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/{Price.d.ts → prices/Price.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Price as PriceType } from '@commercelayer/sdk';
-import { FunctionChildren, LoaderType } from '../typings/index';
+import { FunctionChildren, LoaderType } from '../../typings/index';
 declare type PriceChildrenProps = FunctionChildren<{
     loading: boolean;
     loader: LoaderType;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{Fragment,useState,useEffect,useContext}from"react";import{isEmpty,has,indexOf}from"lodash";import Parent from"../utils/Parent";import PricesContext from"../../context/PricesContext";import{getPricesComponent}from"../../utils/getPrices";import components from"../../config/components";import SkuChildrenContext from"../../context/SkuChildrenContext";const propTypes=components.Price.propTypes,defaultProps=components.Price.defaultProps,displayName=components.Price.displayName;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})}Price.propTypes=propTypes,Price.defaultProps=defaultProps,Price.displayName=displayName;export default Price;

package/lib/{cjs/components → esm/components/prices}/PricesContainer.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { LoaderType } from '../typings/index';
+import { LoaderType } from '../../typings/index';
 declare type Props = {
     children: ReactNode;
     filters?: object;
@@ -10,9 +10,9 @@ declare type Props = {
 export declare function PricesContainer(props: Props): JSX.Element;
 export declare namespace PricesContainer {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
         skuCode: import("prop-types").Requireable<string>;
-        loader: import("prop-types").Requireable<string | import("prop-types").ReactElementLike>;
+        loader: import("prop-types").Requireable<NonNullable<string | import("prop-types").ReactElementLike | null | undefined>>;
         perPage: import("prop-types").Requireable<number>;
         filters: import("prop-types").Requireable<object>;
     };

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}from"../../reducers/PriceReducer";import{priceInitialState,getSkusPrice}from"../../reducers/PriceReducer";import PricesContext from"../../context/PricesContext";import getCurrentItemKey from"../../utils/getCurrentItemKey";import ItemContext from"../../context/ItemContext";import components from"../../config/components";import SkuContext from"../../context/SkuContext";const propTypes=components.PricesContainer.propTypes,defaultProps=components.PricesContainer.defaultProps,displayName=components.PricesContainer.displayName;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})}PricesContainer.propTypes=propTypes,PricesContainer.defaultProps=defaultProps,PricesContainer.displayName=displayName;export default PricesContainer;

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

@@ -8,7 +8,7 @@ declare type ShipmentProps = {
 export declare function Shipment({ children, loader, autoSelectSingleShippingMethod, }: ShipmentProps): JSX.Element;
 export declare namespace Shipment {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
     };
     var displayName: string;
 }

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

@@ -1,18 +1,18 @@
-import { ReactNode } from 'react';
+/// <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) => ReactNode;
+    children?: (props: ShipmentFieldChildrenProps) => JSX.Element;
     name: ShipmentAttribute;
 } & JSX.IntrinsicElements['span'];
 export declare function ShipmentField(props: Props): JSX.Element;
 export declare namespace ShipmentField {
     var propTypes: {
         children: import("prop-types").Requireable<(...args: any[]) => any>;
-        name: import("prop-types").Validator<ShipmentAttribute>;
+        name: import("prop-types").Validator<NonNullable<ShipmentAttribute>>;
     };
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ declare type Props = {
 export declare function ShipmentsContainer(props: Props): JSX.Element;
 export declare namespace ShipmentsContainer {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
     };
     var displayName: string;
 }

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

@@ -7,7 +7,7 @@ declare type Props = {
 export declare function ShippingMethod(props: Props): JSX.Element;
 export declare namespace ShippingMethod {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
         readonly: import("prop-types").Requireable<boolean>;
     };
     var displayName: string;

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

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

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 import type { ShippingMethod } from '@commercelayer/sdk';
 export declare type ShippingMethodRadioButtonType = Omit<Props, 'children'> & {
     shippingMethod: ShippingMethod;
@@ -6,7 +6,7 @@ export declare type ShippingMethodRadioButtonType = Omit<Props, 'children'> & {
 };
 export declare type ShippingMethodRadioButtonOnChangeType = (shippingMethod: ShippingMethod, shipmentId: string) => void;
 declare type Props = {
-    children?: (props: ShippingMethodRadioButtonType) => ReactNode;
+    children?: (props: ShippingMethodRadioButtonType) => JSX.Element;
     onChange?: ShippingMethodRadioButtonOnChangeType;
 } & Omit<JSX.IntrinsicElements['input'], 'onChange'>;
 export declare function ShippingMethodRadioButton(props: Props): JSX.Element;

package/lib/esm/components/{AvailabilityContainer.d.ts → skus/AvailabilityContainer.d.ts}

@@ -6,7 +6,7 @@ declare type Props = {
 export declare function AvailabilityContainer(props: Props): JSX.Element;
 export declare namespace AvailabilityContainer {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
         skuCode: import("prop-types").Requireable<string>;
     };
     var displayName: string;

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/{cjs/components → esm/components/skus}/AvailabilityTemplate.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { TimeFormat, FunctionChildren } from '../typings/index';
-import { DeliveryLeadTime } from '../reducers/AvailabilityReducer';
+import { TimeFormat, FunctionChildren } from '../../typings/index';
+import { DeliveryLeadTime } from '../../reducers/AvailabilityReducer';
 declare type AvailabilityTemplateChildrenProps = FunctionChildren<Omit<Props, 'children'> & DeliveryLeadTime & {
     text: string;
     quantity: number;

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 components from"../../config/components";import ItemContext from"../../context/ItemContext";import SkuChildrenContext from"../../context/SkuChildrenContext";const propTypes=components.AvailabilityTemplate.propTypes,defaultProps=components.AvailabilityTemplate.defaultProps,displayName=components.AvailabilityTemplate.displayName;export function AvailabilityTemplate(props){const{timeFormat,showShippingMethodName,showShippingMethodPrice,children,...p}=props;let{min,max,shipping_method,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,shipping_method=delivery?.shipping_method),quantity=currentItem.inventory.quantity}}const mn=!isEmpty(min)&&timeFormat?min?.[timeFormat]:"",mx=!isEmpty(max)&&timeFormat?max?.[timeFormat]:"",shippingMethodPrice=showShippingMethodPrice&&shipping_method?.formatted_price_amount?`(${shipping_method?.formatted_price_amount})`:"",name=showShippingMethodName&&shipping_method?`with ${shipping_method.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,quantity,text:text.join(" "),...props};return children?_jsx(Parent,{...parentProps,children}):_jsx("p",{...p,children:text.join(" ")})}AvailabilityTemplate.propTypes=propTypes,AvailabilityTemplate.defaultProps=defaultProps,AvailabilityTemplate.displayName=displayName;export default AvailabilityTemplate;

package/lib/{cjs/components → esm/components/skus}/DeliveryLeadTime.d.ts

@@ -1,15 +1,15 @@
-import { ReactNode } from 'react';
+/// <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) => ReactNode;
+    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<DeliveryLeadTimeField>;
+        type: import("prop-types").Validator<NonNullable<DeliveryLeadTimeField>>;
         children: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     var displayName: string;

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/{QuantitySelector.d.ts → skus/QuantitySelector.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { FunctionChildren } from '../typings/index';
+import { FunctionChildren } from '../../typings/index';
 declare type ChildrenProps = FunctionChildren<Omit<Props, 'children'> & {
     handleChange: (event: React.MouseEvent<HTMLInputElement>) => void;
     handleBlur: (event: React.MouseEvent<HTMLInputElement>) => void;

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 components from"../../config/components";import SkuListsContext from"../../context/SkuListsContext";import SkuChildrenContext from"../../context/SkuChildrenContext";const propTypes=components.QuantitySelector.propTypes,defaultProps=components.QuantitySelector.defaultProps,displayName=components.QuantitySelector.displayName;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})}QuantitySelector.propTypes=propTypes,QuantitySelector.defaultProps=defaultProps,QuantitySelector.displayName=displayName;export default QuantitySelector;

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

@@ -6,7 +6,7 @@ declare type Props = {
 export declare function SkuList(props: Props): JSX.Element;
 export declare namespace SkuList {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
         id: import("prop-types").Validator<string>;
     };
     var displayName: string;

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

@@ -5,7 +5,7 @@ declare type Props = {
 export declare function SkuListsContainer(props: Props): JSX.Element;
 export declare namespace SkuListsContainer {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
     };
     var displayName: string;
 }

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

@@ -6,7 +6,7 @@ declare type Props = {
 export declare function SkuOption(props: Props): JSX.Element;
 export declare namespace SkuOption {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
         id: import("prop-types").Validator<string>;
     };
     var displayName: string;

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

@@ -6,7 +6,7 @@ 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<import("../../typings/index").BaseInputType>;
+        type: import("prop-types").Validator<NonNullable<import("../../typings/index").BaseInputType>>;
         onChange: import("prop-types").Requireable<(...args: any[]) => any>;
         placeholder: import("prop-types").Requireable<string>;
     };

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

@@ -6,7 +6,7 @@ declare type Props = {
 export declare function SkuOptionsContainer(props: Props): JSX.Element;
 export declare namespace SkuOptionsContainer {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
         skuCode: import("prop-types").Requireable<string>;
     };
     var displayName: string;

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

@@ -5,7 +5,7 @@ declare type Props = {
 export declare function Skus<P extends Props>({ children }: P): JSX.Element;
 export declare namespace Skus {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
     };
 }
 export default Skus;

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

@@ -15,9 +15,4 @@ declare type Props = {
     queryParams?: QueryParamsList;
 };
 export declare function SkusContainer<P extends Props>(props: P): JSX.Element;
-export declare namespace SkusContainer {
-    var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
-    };
-}
 export default SkusContainer;

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

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import components from"../../config/components";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})}SkusContainer.propTypes=components.SkusContainer.propTypes;export default SkusContainer;
+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;

package/lib/esm/components/{VariantSelector.d.ts → skus/VariantSelector.d.ts}

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
-import { VariantHandleCallback } from './utils/VariantTemplate';
-import { BaseSelectorType } from '../typings/index';
-import { FunctionChildren } from '../typings/index';
-import { VariantsObject, SetSkuCode } from '../reducers/VariantReducer';
+import { VariantHandleCallback } from '../utils/VariantTemplate';
+import { BaseSelectorType } from '../../typings/index';
+import { FunctionChildren } from '../../typings/index';
+import { VariantsObject, SetSkuCode } from '../../reducers/VariantReducer';
 export interface VariantOption {
     label: string;
     code: string;
@@ -28,14 +28,14 @@ declare type Props = {
 export declare function VariantSelector(props: Props): JSX.Element;
 export declare namespace VariantSelector {
     var propTypes: {
-        options: import("prop-types").Validator<import("prop-types").InferProps<{
+        options: import("prop-types").Validator<NonNullable<import("prop-types").InferProps<{
             label: import("prop-types").Validator<string>;
             code: import("prop-types").Validator<string>;
             lineItem: import("prop-types").Requireable<import("prop-types").InferProps<{
                 name: import("prop-types").Validator<string>;
                 imageUrl: import("prop-types").Requireable<string>;
             }>>;
-        }>[]>;
+        }>>[]>;
         name: import("prop-types").Requireable<string>;
         children: import("prop-types").Requireable<(...args: any[]) => any>;
         type: import("prop-types").Requireable<BaseSelectorType>;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{Fragment,useContext,useEffect}from"react";import VariantTemplate from"../utils/VariantTemplate";import Parent from"../utils/Parent";import VariantsContext from"../../context/VariantsContext";import components from"../../config/components";const propTypes=components.VariantSelector.propTypes,defaultProps=components.VariantSelector.defaultProps,displayName=components.VariantSelector.displayName;export function VariantSelector(props){const{children,type,placeholder,skuCode,name,options,...prs}=props,{setSkuCode,skuCode:variantSkuCode,loading,variants,setSkuCodes}=useContext(VariantsContext);useEffect(()=>(setSkuCodes&&setSkuCodes(options),()=>{setSkuCodes&&setSkuCodes([])}),[options]);const sCode=variantSkuCode||skuCode||"",DefaultTemplate=()=>loading?_jsx(Fragment,{children:props.loader||"Loading..."}):_jsx(VariantTemplate,{variants,type,placeholder,skuCode:sCode,options,handleChange:setSkuCode,name,...prs}),parentProps={variants,loading:!!loading,handleSelect:setSkuCode,skuCode:sCode,...props};return children?_jsx(Parent,{...parentProps,children}):_jsx(Fragment,{children:_jsx(DefaultTemplate,{})})}VariantSelector.propTypes=propTypes,VariantSelector.defaultProps=defaultProps,VariantSelector.displayName=displayName;export default VariantSelector;

package/lib/esm/components/{VariantsContainer.d.ts → skus/VariantsContainer.d.ts}

@@ -7,7 +7,7 @@ declare type Props = {
 export declare function VariantsContainer(props: Props): JSX.Element;
 export declare namespace VariantsContainer {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
         skuCode: import("prop-types").Requireable<string>;
         filters: import("prop-types").Requireable<object>;
     };

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useReducer,useContext}from"react";import variantReducer,{variantInitialState,unsetVariantState,setSkuCode,getVariants}from"../../reducers/VariantReducer";import CommerceLayerContext from"../../context/CommerceLayerContext";import VariantsContext from"../../context/VariantsContext";import{setVariantSkuCodes}from"../../reducers/VariantReducer";import isEmpty from"lodash/isEmpty";import isEqual from"lodash/isEqual";import getCurrentItemKey from"../../utils/getCurrentItemKey";import ItemContext from"../../context/ItemContext";import components from"../../config/components";const propTypes=components.VariantsContainer.propTypes,defaultProps=components.VariantsContainer.defaultProps,displayName=components.VariantsContainer.displayName;export function VariantsContainer(props){const{children,skuCode="",filters={}}=props,config=useContext(CommerceLayerContext),{setItem,setItems,items,item:currentItem,setCustomLineItems,skuCode:itemSkuCode,setSkuCode:setItemSkuCode}=useContext(ItemContext),[state,dispatch]=useReducer(variantReducer,variantInitialState),sCode=getCurrentItemKey(currentItem)||skuCode||state.skuCode||itemSkuCode||"";useEffect(()=>{if(!isEmpty(items)&&!isEmpty(state.variants)&&!isEqual(items,state.variants)){const mergeItems={...items,...state.variants};setItems&&setItems(mergeItems)}return state.skuCodes.length>=1&&config.accessToken&&(dispatch({type:"setLoading",payload:{loading:!0}}),getVariants({config,state,dispatch,setItem,skuCode:sCode,filters})),()=>unsetVariantState(dispatch)},[config.accessToken]);const variantValue={...state,skuCode:sCode,setSkuCode:(code,id,lineItem={})=>{isEmpty(lineItem)||setCustomLineItems&&setCustomLineItems({[code]:lineItem}),setSkuCode({code,id,config,setItem,dispatch,setItemSkuCode})},setSkuCodes:skuCodes=>setVariantSkuCodes({skuCodes,dispatch,setCustomLineItems})};return _jsx(VariantsContext.Provider,{value:variantValue,children})}VariantsContainer.propTypes=propTypes,VariantsContainer.defaultProps=defaultProps,VariantsContainer.displayName=displayName;export default VariantsContainer;

package/lib/{cjs/components → esm/components/stock_transfers}/StockTransfer.d.ts

@@ -5,7 +5,7 @@ declare type Props = {
 export declare function StockTransfer(props: Props): JSX.Element;
 export declare namespace StockTransfer {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
     };
     var displayName: string;
 }

package/lib/esm/components/stock_transfers/StockTransfer.js

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useContext}from"react";import components from"../../config/components";import ShipmentChildrenContext from"../../context/ShipmentChildrenContext";import StockTransferChildrenContext from"../../context/StockTransferChildrenContext";const propTypes=components.StockTransfer.propTypes,displayName=components.StockTransfer.displayName;export function StockTransfer(props){const{children}=props,{stockTransfers,lineItems}=useContext(ShipmentChildrenContext),components2=stockTransfers?.filter(st=>!!lineItems?.find(l=>l.sku_code!==st.sku_code)).map((stockTransfer,k)=>{const stockTransferProps={stockTransfer:stockTransfer.type==="line_items"?stockTransfer:stockTransfer?.line_item};return _jsx(StockTransferChildrenContext.Provider,{value:stockTransferProps,children},k)});return _jsx(_Fragment,{children:components2})}StockTransfer.propTypes=propTypes,StockTransfer.displayName=displayName;export default StockTransfer;

package/lib/{cjs/components → esm/components/stock_transfers}/StockTransferField.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ConditionalElement } from '../typings/index';
-import { TGenericChildrenProps, TResources } from './utils/GenericFieldComponent';
+import { ConditionalElement } from '../../typings/index';
+import { TGenericChildrenProps, TResources } from '../utils/GenericFieldComponent';
 declare type StockTransferFieldChildrenProps = TGenericChildrenProps<TResources['StockTransfer']>;
 declare type TCondition = ConditionalElement<Exclude<TResources['StockTransfer'], 'resource'>>;
 declare type Props = {

package/lib/esm/components/stock_transfers/StockTransferField.js

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

package/lib/esm/components/utils/BaseField.d.ts

@@ -1,8 +1,8 @@
-import { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent } from 'react';
 declare type BaseFieldChildren = Omit<BaseFieldProps, 'children'>;
 export declare type BaseFieldProps = {
     attribute: 'number' | 'id';
-    children?: (props: BaseFieldChildren) => ReactNode;
+    children?: (props: BaseFieldChildren) => JSX.Element;
 } & JSX.IntrinsicElements['span'];
 declare const BaseField: FunctionComponent<BaseFieldProps>;
 export default BaseField;

package/lib/esm/components/utils/BaseOrderPrice.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import OrderContext from"../../context/OrderContext";import getAmount from"../../utils/getAmount";import Parent from"./Parent";import{useState,useEffect,useContext}from"react";import{baseOrderPricePropTypes}from"../../typings/index";import isEmpty from"lodash/isEmpty";const BaseOrderPrice=props=>{const{format="formatted",base,type,children,...p}=props,{order}=useContext(OrderContext),[price,setPrice]=useState(""),[cents,setCents]=useState(0);useEffect(()=>{const p2=getAmount({base,type,format,obj:order||{}}),c=getAmount({base,type,format:"cents",obj:order||{}});return setPrice(p2),setCents(c),()=>{isEmpty(order)&&setPrice("")}},[order]);const parentProps={priceCents:cents,price,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("span",{...p,children:price})};BaseOrderPrice.propTypes=baseOrderPricePropTypes;export default BaseOrderPrice;
+import{jsx as _jsx}from"react/jsx-runtime";import OrderContext from"../../context/OrderContext";import getAmount from"../../utils/getAmount";import Parent from"./Parent";import{useState,useEffect,useContext}from"react";import isEmpty from"lodash/isEmpty";const BaseOrderPrice=props=>{const{format="formatted",base,type,children,...p}=props,{order}=useContext(OrderContext),[price,setPrice]=useState(""),[cents,setCents]=useState(0);useEffect(()=>{const p2=getAmount({base,type,format,obj:order||{}}),c=getAmount({base,type,format:"cents",obj:order||{}});return setPrice(p2),setCents(c),()=>{isEmpty(order)&&setPrice("")}},[order]);const parentProps={priceCents:cents,price,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("span",{...p,children:price})};export default BaseOrderPrice;