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

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

@@ -0,0 +1,23 @@
+import { type JSX } from 'react';
+import type { PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
+import type { PaymentSourceProps } from './PaymentSource';
+import { type FramesStyle } from 'frames-react';
+export interface CheckoutComConfig {
+    containerClassName?: string;
+    hintLabel?: string;
+    name?: string;
+    success_url?: string;
+    failure_url?: string;
+    options?: {
+        style: FramesStyle;
+    };
+    [key: string]: unknown;
+}
+type Props = PaymentMethodConfig['checkoutComPayment'] & JSX.IntrinsicElements['div'] & {
+    show?: boolean;
+    publicKey: string;
+    locale?: string;
+    templateCustomerSaveToWallet?: PaymentSourceProps['templateCustomerSaveToWallet'];
+};
+export declare function CheckoutComPayment({ publicKey, options, locale, ...p }: Props): JSX.Element | null;
+export default CheckoutComPayment;

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

@@ -0,0 +1,2 @@
+"use client";
+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","KO-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,successUrl=window.location.href,failureUrl=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:successUrl,failure_url:failureUrl,_authorize:!0}});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=async()=>await 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/payment_source/ExternalPayment.d.ts

@@ -0,0 +1,24 @@
+import type { ChildrenFunction } from "../../typings/index";
+import type { StripeElementLocale } from "@stripe/stripe-js";
+import { type JSX } from "react";
+import type { PaymentSourceProps } from "./PaymentSource";
+export interface ExternalPaymentConfig {
+    /**
+     * Show the component. Default is false
+     */
+    show?: boolean;
+    /**
+     * Use to display information about the external payment or whatever else.
+     */
+    customComponent?: ChildrenFunction<Omit<Props, "customComponent">>;
+    /**
+     * The payment source token, as generated by the external gateway SDK. Credit Card numbers are rejected.
+     */
+    payment_source_token: string;
+}
+interface Props extends Omit<ExternalPaymentConfig, "payment_source_token">, Pick<PaymentSourceProps, "templateCustomerSaveToWallet"> {
+    paymentSourceToken: string;
+    locale?: StripeElementLocale;
+}
+export declare function ExternalPayment(props: Props): JSX.Element | null;
+export default ExternalPayment;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import Parent from"../utils/Parent";import PaymentMethodContext from"../../context/PaymentMethodContext";import{useContext,useEffect,useRef}from"react";import OrderContext from"../../context/OrderContext";export function ExternalPayment(props){const{setPaymentRef}=useContext(PaymentMethodContext),{order,updateOrder}=useContext(OrderContext),ref=useRef(null);useEffect(()=>{ref?.current!=null&&(ref.current.onsubmit=async()=>!0,setPaymentRef({ref}))},[ref]);const parentProps={...props,order,updateOrder};return props?.customComponent!=null&&props.show?_jsxs("form",{ref,children:[_jsx(Parent,{...parentProps,children:props.customComponent}),props?.templateCustomerSaveToWallet!=null&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:props.templateCustomerSaveToWallet})]}):null}export default ExternalPayment;

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

@@ -0,0 +1,10 @@
+import { type JSX } from "react";
+import type { PaymentMethodConfig } from "../../reducers/PaymentMethodReducer";
+import type { PaymentSourceProps } from "./PaymentSource";
+type KlarnaPaymentProps = PaymentMethodConfig["klarnaPayment"] & JSX.IntrinsicElements["div"] & Partial<PaymentSourceProps["templateCustomerSaveToWallet"]> & {
+    show?: boolean;
+    clientToken: string;
+    locale?: string | null;
+};
+export default function KlarnaPayment({ clientToken, placeOrderCallback, locale, ...p }: KlarnaPaymentProps): JSX.Element | null;
+export {};

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

@@ -0,0 +1,2 @@
+"use client";
+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";function typeOfLine(lineItemType){switch(lineItemType){case"percentage_discount_promotions":return"discount";case"shipments":return"shipping_fee";case"skus":return"physical";case"payment_methods":default:return null}}function klarnaOrderLines(lineItems){return lineItems?lineItems?.map(item=>{const type=item.item_type?typeOfLine(item.item_type):null;return{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}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),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=async props=>{handleClick(klarna,props)},setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,paymentSource,currentPaymentMethodType,loaded,klarna]);const handleClick=(kl,props)=>{const[first]=paymentSource?.payment_methods||void 0,paymentMethodCategories=first?.identifier,billingAddress={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},shippingAddress={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:shippingAddress,billing_address:billingAddress,order_amount:order?.total_amount_cents,order_lines:klarnaOrderLines(order?.line_items),order_tax_amount:order?.total_tax_amount_cents};kl.Payments.authorize({payment_method_category:paymentMethodCategories,...klarnaData},async res=>{if(res.approved&&paymentSource&&currentPaymentMethodType){const ps=await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{auth_token:res.authorization_token}});if(props.setPlaceOrder!=null){const placed=await props.setPlaceOrder({paymentSource:ps});placed&&props.onclickCallback!=null&&props.onclickCallback(placed)}}})};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})}return _jsx("form",{ref,children:_jsx("div",{className:containerClassName,...divProps,children:_jsx("div",{id:"klarna-payments-container"})})})}

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

@@ -0,0 +1,19 @@
+import { type JSX } from "react";
+import type { LoaderType } from "../../typings/index";
+import type { CustomerCardsTemplateChildren } from "../utils/PaymentCardsTemplate";
+export interface CustomerCardsProps {
+    handleClick: () => void;
+}
+export interface CustomerSaveToWalletProps {
+    name: "save_payment_source_to_customer_wallet";
+}
+export interface PaymentSourceProps extends Omit<JSX.IntrinsicElements["div"], "children"> {
+    children?: JSX.Element | JSX.Element[];
+    readonly?: boolean;
+    templateCustomerCards?: CustomerCardsTemplateChildren;
+    onClickCustomerCards?: () => void;
+    templateCustomerSaveToWallet?: (props: CustomerSaveToWalletProps) => JSX.Element;
+    loader?: LoaderType;
+}
+export declare function PaymentSource(props: PaymentSourceProps): JSX.Element;
+export default PaymentSource;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useState,useEffect}from"react";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";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";export function PaymentSource(props){const{readonly}=props,{payment,expressPayments}=useContext(PaymentMethodChildrenContext),{order}=useContext(OrderContext),{payments}=useContext(CustomerContext),{currentPaymentMethodId,paymentSource,destroyPaymentSource,currentPaymentMethodType,currentCustomerPaymentSourceId}=useContext(PaymentMethodContext),[show,setShow]=useState(!1),[showCard,setShowCard]=useState(!1);useEffect(()=>{const isCustomerPaymentSource=currentCustomerPaymentSourceId!=null&&currentCustomerPaymentSourceId===paymentSource?.id;if(readonly)setShow(!0),setShowCard(!0);else if((payment?.id===currentPaymentMethodId||isCustomerPaymentSource)&&!expressPayments){const card=getCardDetails({paymentType:payment?.payment_source_type,customerPayment:{payment_source:paymentSource}});isCustomerPaymentSource&&card.brand===""&&(card.brand=card.issuer_type!=null&&card.issuer_type!==""?card.issuer_type:"credit-card"),card.brand&&setShowCard(!0),setShow(!0)}else expressPayments&&currentPaymentMethodType==="stripe_payments"&&setShow(!0);return()=>{setShow(!1),setShowCard(!1)}},[currentPaymentMethodId,paymentSource?.id,payments!=null,payment!=null,readonly,order?.status,expressPayments]);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})}export default PaymentSource;

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

@@ -0,0 +1,15 @@
+import { type IconBrand } from '../../context/PaymentSourceContext';
+import { type JSX } from 'react';
+import type { ChildrenFunction } from '../../typings/index';
+interface ChildrenProps extends Omit<Props, 'children'> {
+    brand: IconBrand;
+    defaultSrc: string;
+    url: string;
+}
+interface Props extends Omit<JSX.IntrinsicElements['img'], 'children'> {
+    children?: ChildrenFunction<ChildrenProps>;
+    width?: number;
+    height?: number;
+}
+export declare function PaymentSourceBrandIcon({ src, width, children, ...p }: Props): JSX.Element;
+export default PaymentSourceBrandIcon;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{useContext,useRef}from"react";import Parent from"../utils/Parent";import CustomerPaymentSourceContext from"../../context/CustomerPaymentSourceContext";export function PaymentSourceBrandIcon({src,width=32,children,...p}){const{brand,issuer_type:issuerType}=useContext(PaymentSourceContext),{brand:customerCardBrand,issuer_type:customerIssuerType}=useContext(CustomerPaymentSourceContext),cardBrand=brand??customerCardBrand??issuerType??customerIssuerType,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/${cardBrand??"credit-card"}.svg`,handleError=()=>{ref.current&&(ref.current.src=defaultSrc)},parentProps={brand:cardBrand,defaultSrc,url,width,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("img",{ref,src:url,onError:handleError,width,...p})}export default PaymentSourceBrandIcon;

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

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

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import capitalize from"lodash/capitalize";import{useContext}from"react";import Parent from"../utils/Parent";import CustomerPaymentSourceContext from"../../context/CustomerPaymentSourceContext";export function PaymentSourceBrandName({children,label,...props}){const{brand}=useContext(PaymentSourceContext),{brand:customerCardBrand}=useContext(CustomerPaymentSourceContext),cardBrand=brand??customerCardBrand,brandName=cardBrand&&capitalize(cardBrand.replace(/_|-/gm," ")),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,15 @@
+import { type JSX } from 'react';
+import type { ChildrenFunction } from '../../typings/index';
+export 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 of detail to display
+     */
+    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,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{useContext}from"react";import Parent from"../utils/Parent";import CustomerPaymentSourceContext from"../../context/CustomerPaymentSourceContext";export function PaymentSourceDetail({type,children,...p}){const card=useContext(PaymentSourceContext),customerCard=useContext(CustomerPaymentSourceContext),cardObj=Object.keys(card).length>0?card:customerCard,text=type in cardObj&&cardObj[type]!=null?cardObj[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 { type ReactNode, type JSX } from 'react';
+import type { ChildrenFunction } from '../../typings/index';
+interface CustomComponent extends Omit<Props, 'children'> {
+}
+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,2 @@
+"use client";
+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 { type ReactNode, type JSX } from 'react';
+export interface PaypalConfig {
+    return_url: string;
+    cancel_url: string;
+    infoMessage?: {
+        text?: string | ReactNode;
+        className?: string;
+    };
+}
+type Props = Omit<PaypalConfig, 'return_url' | 'cancel_url'> & JSX.IntrinsicElements['div'];
+export declare function PaypalPayment({ infoMessage, ...p }: Props): JSX.Element | null;
+export default PaypalPayment;

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

@@ -0,0 +1,2 @@
+"use client";
+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=async()=>await 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/StripeExpressPayment.d.ts

@@ -0,0 +1,6 @@
+import { type JSX } from "react";
+interface Props {
+    clientSecret: string;
+}
+export declare function StripeExpressPayment({ clientSecret, }: Props): JSX.Element | null;
+export {};

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import CommerceLayerContext from"../../context/CommerceLayerContext";import OrderContext from"../../context/OrderContext";import PaymentMethodContext from"../../context/PaymentMethodContext";import{getAvailableExpressPayments,getExpressShippingMethods,setExpressFakeAddress,setExpressPlaceOrder,setExpressShippingMethod,expressRedirectUrl}from"../../utils/expressPaymentHelper";import{isEmpty}from"../../utils/isEmpty";import{PaymentRequestButtonElement,useStripe}from"@stripe/react-stripe-js";import{useContext,useEffect,useState}from"react";export function StripeExpressPayment({clientSecret}){const stripe=useStripe(),[paymentRequest,setPaymentRequest]=useState(null),{accessToken,endpoint}=useContext(CommerceLayerContext),{order}=useContext(OrderContext),{paymentMethods,paymentSource}=useContext(PaymentMethodContext);return useEffect(()=>{if(stripe==null||order==null)return;const pr=stripe.paymentRequest({country:order?.country_code??"US",currency:order?.currency_code?.toLowerCase()??"",total:{label:`#${order?.number??""}`,amount:order?.total_amount_with_taxes_cents??0},requestPayerName:!0,requestPayerEmail:!0,requestPayerPhone:!0,requestShipping:!0});pr.canMakePayment().then(result=>{result&&setPaymentRequest(pr)}).catch(err=>{console.error("Can make payment:",err)})},[isEmpty(stripe),isEmpty(order)]),paymentRequest!=null&&stripe!=null?(paymentRequest.on("shippingaddresschange",async ev=>{if(order!=null&&accessToken!=null&&endpoint!=null){const requiresBillingInfo=order?.requires_billing_info??!1,orderWithShipments=await setExpressFakeAddress({orderId:order.id,config:{accessToken,endpoint},address:{first_name:"Fake name",last_name:"Fake lastname",country_code:ev.shippingAddress.country??"",line_1:"Fake street 123",city:ev.shippingAddress.city??"Fake city",zip_code:ev.shippingAddress.postalCode??"12345",state_code:ev.shippingAddress.region??"Fake state",phone:"1234567890",billing_info:requiresBillingInfo?"Fake billing info":void 0}}),shippingOptions=getExpressShippingMethods(orderWithShipments);shippingOptions!=null&&!isEmpty(shippingOptions)?ev.updateWith({status:"success",shippingOptions,total:{label:`#${orderWithShipments?.number??""}`,amount:orderWithShipments?.total_amount_with_taxes_cents??0}}):ev.updateWith({status:"invalid_shipping_address"})}else ev.updateWith({status:"fail"})}),paymentRequest.on("shippingoptionchange",async ev=>{if(order!=null&&accessToken!=null&&endpoint!=null){const updatedOrder=await setExpressShippingMethod({orderId:order.id,config:{accessToken,endpoint},selectFirst:!1,selectedShippingMethodId:ev.shippingOption.id,params:{include:["shipments.available_shipping_methods"]}});ev.updateWith({status:"success",total:{label:`#${updatedOrder?.number??""}`,amount:updatedOrder?.total_amount_with_taxes_cents??0}})}else ev.updateWith({status:"fail"})}),paymentRequest.on("paymentmethod",async ev=>{if(order?.id==null)throw new Error("Order is null");if(paymentMethods==null)throw new Error("Payment methods are null");const[paymentMethod]=getAvailableExpressPayments(paymentMethods);if(paymentMethod==null)throw new Error("Payment method is null");if(paymentSource==null)throw new Error("Payment source is null");const requiresBillingInfo=order?.requires_billing_info??!1,paymentResource=paymentMethod?.payment_source_type;if(accessToken!=null&&endpoint!=null){const[firstName,lastName]=ev.payerName?.split(" ")??[],[line]=ev.shippingAddress?.addressLine??"",email=ev.payerEmail??"";await setExpressFakeAddress({orderId:order.id,config:{accessToken,endpoint},address:{first_name:firstName??"Fake name",last_name:lastName??"Fake lastname",country_code:ev?.shippingAddress?.country??"",line_1:line??"Fake street 123",city:ev?.shippingAddress?.city??"Fake city",zip_code:ev?.shippingAddress?.postalCode??"12345",state_code:ev?.shippingAddress?.region??"Fake state",phone:ev?.payerPhone??"1234567890",billing_info:requiresBillingInfo?"Fake billing info":void 0},email}),await setExpressShippingMethod({orderId:order.id,config:{accessToken,endpoint},selectFirst:!1,selectedShippingMethodId:ev?.shippingOption?.id,params:{include:["shipments.available_shipping_methods"]}});const placeOrderParams={config:{accessToken,endpoint},orderId:order?.id,paymentResource,paymentSourceId:paymentSource?.id};await setExpressPlaceOrder(placeOrderParams);const{paymentIntent,error:confirmError}=await stripe.confirmCardPayment(clientSecret,{payment_method:ev.paymentMethod.id},{handleActions:!1});if(confirmError)ev.complete("fail"),console.error("Confirm card payment:",confirmError);else if(ev.complete("success"),paymentIntent.status==="requires_action"){const{error}=await stripe.confirmCardPayment(clientSecret);if(error)console.error("Confirm card payment:",error);else{const placeOrderParams2={config:{accessToken,endpoint},orderId:order?.id,placeTheOrder:!0};try{const order2=await setExpressPlaceOrder(placeOrderParams2);ev.complete("success"),await expressRedirectUrl({order:order2,config:{accessToken,endpoint}})}catch(err){console.error("Place order:",err),ev.complete("fail")}}}else{const placeOrderParams2={config:{accessToken,endpoint},orderId:order?.id,placeTheOrder:!0};try{const order2=await setExpressPlaceOrder(placeOrderParams2);ev.complete("success"),await expressRedirectUrl({order:order2,config:{accessToken,endpoint}})}catch(err){console.error("Place order:",err),ev.complete("fail")}}}}),_jsx(_Fragment,{children:_jsx(PaymentRequestButtonElement,{className:"",options:{paymentRequest}})})):null}

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

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

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../../context/PaymentMethodContext";import{Elements,PaymentElement,useElements}from"@stripe/react-stripe-js";import Parent from"../utils/Parent";import{setCustomerOrderParam}from"../../utils/localStorage";import OrderContext from"../../context/OrderContext";import{StripeExpressPayment}from"./StripeExpressPayment";const defaultOptions={layout:{type:"accordion",defaultCollapsed:!1,radios:!0,spacedAccordionItems:!1},fields:{billingDetails:"never"}},defaultAppearance={theme:"stripe",variables:{colorText:"#32325d",fontFamily:'"Helvetica Neue", Helvetica, sans-serif'}};function StripePaymentForm({options=defaultOptions,templateCustomerSaveToWallet,stripe}){const ref=useRef(null),{currentPaymentMethodType,setPaymentMethodErrors,setPaymentRef}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),elements=useElements();useEffect(()=>(ref.current&&stripe&&elements&&(ref.current.onsubmit=async()=>await onSubmit({event:ref.current,stripe,elements}),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,stripe,elements]);const onSubmit=async({event,stripe:stripe2,elements:elements2})=>{if(!stripe2)return!1;const savePaymentSourceToCustomerWallet=event?.elements?.save_payment_source_to_customer_wallet?.checked;if(savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),elements2!=null){const billingInfo=order?.billing_address,email=order?.customer_email??"",billingDetails={name:billingInfo?.full_name??"",email,phone:billingInfo?.phone,address:{city:billingInfo?.city,country:billingInfo?.country_code,line1:billingInfo?.line_1,line2:billingInfo?.line_2??"",postal_code:billingInfo?.zip_code??"",state:billingInfo?.state_code}},url=new URL(window.location.href),cleanUrl=`${url.origin}${url.pathname}?accessToken=${url.searchParams.get("accessToken")}`,{error}=await stripe2.confirmPayment({elements:elements2,confirmParams:{return_url:cleanUrl,payment_method_data:{billing_details:billingDetails}},redirect:"if_required"});return error?(console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message??""}]),!1):!0}return!1};return _jsxs("form",{ref,children:[_jsx(PaymentElement,{id:"payment-element",options:{...defaultOptions,...options}}),templateCustomerSaveToWallet&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})]})}export function StripePayment({publishableKey,show,options,clientSecret,locale="auto",expressPayments=!1,connectedAccount,...p}){const[isLoaded,setIsLoaded]=useState(!1),[stripe,setStripe]=useState(null),{containerClassName,templateCustomerSaveToWallet,fonts=[],appearance,...divProps}=p;useEffect(()=>(show&&publishableKey&&import("@stripe/stripe-js").then(({loadStripe})=>{(async()=>{const options2={locale,...connectedAccount?{stripeAccount:connectedAccount}:{}},res=await loadStripe(publishableKey,options2);res!=null&&(setStripe(res),setIsLoaded(!0))})()}),()=>{setIsLoaded(!1)}),[show,publishableKey,connectedAccount]);const elementsOptions={clientSecret,appearance:{...defaultAppearance,...appearance},fonts};return isLoaded&&stripe!=null&&clientSecret!=null?_jsx("div",{className:containerClassName,...divProps,children:_jsx(Elements,{stripe,options:elementsOptions,children:expressPayments?_jsx(StripeExpressPayment,{clientSecret}):_jsx(StripePaymentForm,{stripe,options,templateCustomerSaveToWallet})})}):null}export default StripePayment;

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

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

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentMethodContext from"../../context/PaymentMethodContext";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-testid":dataTestId}=p,ref=useRef(null),{setPaymentSource,paymentSource,currentPaymentMethodType,setPaymentRef}=useContext(PaymentMethodContext);useEffect(()=>(ref.current&&paymentSource&&currentPaymentMethodType&&(ref.current.onsubmit=async()=>await 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-testid":dataTestId,children:_jsx("span",{className:infoMessage?.className,children:infoMessage?.text??defaultMessage})})})}export default WireTransferPayment;

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

@@ -0,0 +1,35 @@
+import { type JSX } from 'react';
+import type { Price as PriceType } from '@commercelayer/sdk';
+import type { 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' | 'ref'> {
+    children?: ChildrenFunction<PriceChildrenProps>;
+    /**
+     * CSS class name to be added for the compare price
+     */
+    compareClassName?: string;
+    /**
+     * When `false` the compare_at price will not be displayed
+     * @default true
+     */
+    showCompare?: boolean;
+    /**
+     * The `sku_code` of the price to be fetched
+     */
+    skuCode?: string | null;
+}
+/**
+ * To display the price of your products with localized currency, discounts, and personalization rules, as shown in the code snippets below.
+ *
+ * Each price has an amount (the actual selling price) and an optional compare-at amount (the full price that you want to display to the customer — typically with a strikethrough).
+ * This component is the owner of the price information. It fetches the price of the specified SKU and dispatches it to the cl-price-amount children.
+ * <span type='info'>
+ * By default it shows the `formatted_amount` and `formatted_compare_at_amount` of the first price object, but it also allows to access to the full `Price`object via children props.
+ * </span>
+ */
+export declare function Price(props: PriceProps): JSX.Element;
+export default Price;

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

@@ -0,0 +1,2 @@
+"use client";
+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{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(()=>(prices!=null&&`${sCode}`in prices?setSkuPrices(prices[sCode]):sCode&&!skuCodes.includes(sCode)&&(skuCodes.push(sCode),setSkuCodes&&setSkuCodes({skuCodes})),()=>{setSkuPrices([])}),[prices,sCode]);const parentProps={loading,loader,prices:skuPrices,...props},pricesComponent=prices==null||skuPrices==null?null:getPricesComponent(skuPrices,props);return children?_jsx(Parent,{...parentProps,children}):_jsx(_Fragment,{children:loading||pricesComponent==null?loader:pricesComponent})}export default Price;

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

@@ -0,0 +1,41 @@
+import { type JSX } from 'react';
+import type { LoaderType } from '../../typings/index';
+import type { QueryPageSize } from '@commercelayer/sdk';
+interface Props {
+    /**
+     * Any valid JSX.Element(s).
+     * A single `<Price>` component or a list of them is expected to render the prices.
+     */
+    children: JSX.Element | JSX.Element[];
+    /**
+     * SDK query filter to fetch the prices when multiple prices are requested.
+     */
+    filters?: object;
+    /**
+     * Loader component or string to be rendered while the prices are being fetched.
+     * @default 'Loading...'
+     */
+    loader?: LoaderType;
+    /**
+     * Prices per page to be fetched
+     */
+    perPage?: QueryPageSize;
+    /**
+     * SKU code to fetch the prices for. If not provided, the `sku_code` will be retrieved from the `<Price>` component(s) nested as children.
+     */
+    skuCode?: string;
+}
+/**
+ * Main container for the Prices components. It stores the prices context.
+ *
+ * It can be used to fetch the prices for a specific `sku_code` passed as prop
+ * or for the `sku_code` retrieved from all `<Price>` components nested as children.
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<CommerceLayer>` component.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<Price>`
+ * </span>
+ */
+export declare function PricesContainer(props: Props): JSX.Element;
+export default PricesContainer;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useContext,useReducer}from"react";import CommerceLayerContext from"../../context/CommerceLayerContext";import priceReducer,{priceInitialState,getSkusPrice,setSkuCodes}from"../../reducers/PriceReducer";import PricesContext from"../../context/PricesContext";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);!state.skuCodes.includes(skuCode)&&skuCode&&state.skuCodes.push(skuCode);const sCode=skuCodes&&skuCodes?.length>0?"":skuCode??"";useEffect(()=>{state.skuCodes.length===0&&skuCodes!=null&&skuCodes.length>0&&state.setSkuCodes!=null&&state.setSkuCodes({skuCodes,dispatch}),config.accessToken&&(state.skuCodes.length>0||sCode)&&getSkusPrice(sCode&&[sCode]||state.skuCodes,{config,dispatch,perPage,filters})},[config.accessToken,sCode,state.skuCodes.length]);const priceValue={...state,skuCode:sCode,loader,setSkuCodes:params=>{setSkuCodes({...params,dispatch})}};return _jsx(PricesContext.Provider,{value:priceValue,children})}export default PricesContainer;

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

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

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

@@ -0,0 +1,2 @@
+"use client";
+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";import OrderContext from"../../context/OrderContext";export function Shipment({children,loader="Loading...",autoSelectSingleShippingMethod=!1}){const[loading,setLoading]=useState(!0),{shipments,deliveryLeadTimes,setShippingMethod}=useContext(ShipmentContext),{order}=useContext(OrderContext);useEffect(()=>(shipments!=null&&(autoSelectSingleShippingMethod?(async()=>{for(const shipment of shipments){const isSingle=shipment?.available_shipping_methods?.length===1;if(!shipment?.shipping_method&&isSingle){const[shippingMethod]=shipment?.available_shipping_methods||[];if(shippingMethod&&setShippingMethod!=null){const{success,order:order2}=await setShippingMethod(shipment.id,shippingMethod.id);typeof autoSelectSingleShippingMethod=="function"&&success&&autoSelectSingleShippingMethod(order2)}}else setTimeout(()=>{setLoading(!1)},200)}})():setLoading(!1)),()=>{setLoading(!0)}),[shipments!=null,shipments?.length,order?.gift_card_or_coupon_code]);const components=shipments?.map((shipment,k)=>{const lineItems=shipment.stock_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:shipment?.id};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 @@
+import { type JSX } from 'react';
+import type { Shipment } from '@commercelayer/sdk';
+type ShipmentFieldChildrenProps = Omit<Props, 'children'> & {
+    shipment: Shipment;
+};
+export type ShipmentAttribute = 'number' | 'currency_code' | 'status' | 'cost_amount_cents' | 'cost_amount_float' | 'formatted_cost_amount' | 'key_number';
+interface Props extends Omit<JSX.IntrinsicElements['span'], 'children' | 'ref'> {
+    children?: (props: ShipmentFieldChildrenProps) => JSX.Element;
+    name: ShipmentAttribute;
+}
+export declare function ShipmentField(props: Props): JSX.Element;
+export default ShipmentField;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import Parent from"../utils/Parent";import 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 { type ReactNode, type JSX } 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,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import ShipmentContext,{defaultShipmentContext}from"../../context/ShipmentContext";import{useContext,useEffect,useMemo,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.stock_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.stock_line_items.line_item","shipments.shipping_method","shipments.stock_transfers.line_item","shipments.stock_location","shipments.parcels.parcel_line_items"]})},[include?.length,includeLoaded!=null]),useEffect(()=>{order!=null&&!isEmpty(config)&&order.shipments&&getShipments({order,dispatch,config})},[order?.shipments]),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=useMemo(()=>({...state,setShipmentErrors:errors=>{defaultShipmentContext.setShipmentErrors(errors,dispatch)},setShippingMethod:async(shipmentId,shippingMethodId)=>await setShippingMethod({shippingMethodId,shipmentId,config,getOrder,order})}),[state]);return _jsx(ShipmentContext.Provider,{value:contextValue,children})}export default ShipmentsContainer;

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

@@ -0,0 +1,18 @@
+import type { ChildrenFunction } from '../../typings/index';
+import type { Shipment } from '@commercelayer/sdk';
+import type { JSX } from "react";
+interface ChildrenProps extends Omit<Props, 'children'> {
+    /**
+     * Shipments of the current order
+     */
+    shipments?: Shipment[] | null;
+    /**
+     * Quantity of the shipments
+     */
+    quantity: number;
+}
+interface Props extends Omit<JSX.IntrinsicElements['span'], 'children' | 'ref'> {
+    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,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import Parent from"../utils/Parent";import ShipmentContext from"../../context/ShipmentContext";import useCustomContext from"../../utils/hooks/useCustomContext";export function ShipmentsCount({children,...p}){const{shipments}=useCustomContext({context:ShipmentContext,contextComponentName:"ShipmentsContainer",currentComponentName:"ShipmentsCount",key:"shipments"}),quantity=shipments?.length??0,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 { type ReactNode, type JSX } 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,2 @@
+"use client";
+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)});return methods&&setItems(methods),()=>{setItems([])}},[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 @@
+import { type JSX } from 'react';
+import type { ShippingMethod } from '@commercelayer/sdk';
+type ChildrenProps = Omit<Props, 'children'> & {
+    label: string;
+    shippingMethod: ShippingMethod;
+};
+interface Props extends Omit<JSX.IntrinsicElements['label'], 'children' | 'ref'> {
+    children?: (props: ChildrenProps) => JSX.Element;
+}
+export declare function ShippingMethodName(props: Props): JSX.Element;
+export default ShippingMethodName;

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

@@ -0,0 +1,2 @@
+"use client";
+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,20 @@
+import { type JSX } from 'react';
+import type { BaseAmountComponent } from '../../typings/index';
+type Props = BaseAmountComponent & {
+    /**
+     * The label to show when the price is free
+     */
+    labelFreeOver?: string;
+    /**
+     * The label to show when the price is external
+     */
+    labelExternal?: string;
+} & ({
+    type?: 'amount';
+    base?: 'freeOver';
+} | {
+    type?: 'amount' | 'amountForShipment';
+    base?: 'price';
+});
+export declare function ShippingMethodPrice(props: Props): JSX.Element;
+export default ShippingMethodPrice;

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

@@ -0,0 +1,2 @@
+"use client";
+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";export function ShippingMethodPrice(props){const{base="price_amount",type="for_shipment",format="formatted",labelFreeOver="Free",labelExternal="Price estimates after the shipping method selection",...p}=props,{shippingMethod}=useContext(ShippingMethodChildrenContext),[price,setPrice]=useState(""),[priceCents,setPriceCents]=useState(0),scheme=shippingMethod?.scheme;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,scheme,...p},finalPrice=priceCents===0?labelFreeOver:price;return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("span",{...p,children:scheme==="external"?labelExternal:finalPrice})}export default ShippingMethodPrice;

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

@@ -0,0 +1,17 @@
+import { type JSX } from 'react';
+import type { Order, ShippingMethod } from '@commercelayer/sdk';
+interface ShippingMethodRadioButtonType extends Omit<Props, 'children'> {
+    shippingMethod: ShippingMethod;
+    shipmentId: string;
+}
+interface TOnChange {
+    shippingMethod: ShippingMethod;
+    shipmentId: string;
+    order?: Order;
+}
+type Props = {
+    children?: (props: ShippingMethodRadioButtonType) => JSX.Element;
+    onChange?: (params: TOnChange) => void;
+} & Omit<JSX.IntrinsicElements['input'], 'onChange' | 'ref' | 'children'>;
+export declare function ShippingMethodRadioButton(props: Props): JSX.Element;
+export default ShippingMethodRadioButton;

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

@@ -0,0 +1,2 @@
+"use client";
+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 ShipmentContext from"../../context/ShipmentContext";export function ShippingMethodRadioButton(props){const{onChange,children,...p}=props,[checked,setChecked]=useState(!1),[disabled,setDisabled]=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,shippingMethodId]);const handleOnChange=async()=>{if(setDisabled(!0),shipmentId&&shippingMethodId&&setShippingMethod!=null){const{order}=await setShippingMethod(shipmentId,shippingMethodId);shippingMethod&&onChange!=null&&onChange({shippingMethod,shipmentId,order})}setDisabled(!1)},parentProps={shippingMethod,shipmentId,handleOnChange,name,id,disabled,...props};return children?_jsx(Parent,{...parentProps,children}):_jsx("input",{disabled,type:"radio",name,id,onChange:e=>{e.preventDefault(),e.stopPropagation(),handleOnChange()},checked,...p})}export default ShippingMethodRadioButton;

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

@@ -0,0 +1,34 @@
+import { type ReactNode, type JSX } from 'react';
+interface Props {
+    /**
+     * The children component
+     */
+    children: ReactNode;
+    /**
+     * The sku code
+     */
+    skuCode?: string;
+    /**
+     * The sku id. If you use this prop, the skuCode will be ignored and the sku will be fetched by id improving the performance
+     */
+    skuId?: string;
+    /**
+     * Callback called when the quantity is updated
+     */
+    getQuantity?: (quantity: number) => void;
+}
+/**
+ * Main container for the Availability components.
+ * It stores - in its context - the sku quantity returned from the `inventory_model` and the `delivery_lead_time` for the first shipping method found in the inventory model.
+ *
+ * It can be used to fetch the quantities for a specific `sku_code` passed as prop.
+ * <span title='Requirements' type='warning'>
+ * Must be a child of the `<CommerceLayer>` component. <br/>
+ * Can be a child of the `<SkusContainer>` component and receive the `sku_code` from its context.
+ * </span>
+ * <span title='Children' type='info'>
+ * `<AvailabilityTemplate>`
+ * </span>
+ */
+export declare function AvailabilityContainer({ children, skuCode, skuId, getQuantity }: Props): JSX.Element;
+export default AvailabilityContainer;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useReducer,useEffect,useMemo}from"react";import availabilityReducer,{availabilityInitialState,getAvailability}from"../../reducers/AvailabilityReducer";import AvailabilityContext from"../../context/AvailabilityContext";import CommerceLayerContext from"../../context/CommerceLayerContext";import LineItemChildrenContext from"../../context/LineItemChildrenContext";import SkuChildrenContext from"../../context/SkuChildrenContext";import useCustomContext from"../../utils/hooks/useCustomContext";export function AvailabilityContainer({children,skuCode,skuId,getQuantity}){const{lineItem}=useContext(LineItemChildrenContext),{sku}=useContext(SkuChildrenContext),{accessToken,endpoint}=useCustomContext({context:CommerceLayerContext,contextComponentName:"CommerceLayer",currentComponentName:"AvailabilityContainer",key:"accessToken"}),[state,dispatch]=useReducer(availabilityReducer,availabilityInitialState),sCode=skuCode||lineItem?.sku_code||sku?.code;useEffect(()=>{if(accessToken!=null&&accessToken!==""){const config={accessToken,endpoint};(sCode!=null||skuId!=null)&&getAvailability({skuCode:sCode,skuId,config,dispatch})}return()=>{dispatch({type:"setAvailability",payload:{}})}},[accessToken,sCode,skuId]),useEffect(()=>{getQuantity!=null&&state?.quantity!=null&&getQuantity(state?.quantity)},[state.quantity]);const memoized=useMemo(()=>({...state,parent:!0}),[state]);return _jsx(AvailabilityContext.Provider,{value:memoized,children})}export default AvailabilityContainer;