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

package/lib/cjs/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/cjs/components/payment_source/KlarnaPayment.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=KlarnaPayment;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),useExternalScript_1=tslib_1.__importDefault(require("../../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}}):[]}function KlarnaPayment(_a){var{clientToken,placeOrderCallback,locale="EN"}=_a,p=tslib_1.__rest(_a,["clientToken","placeOrderCallback","locale"]);const ref=(0,react_1.useRef)(null),{paymentSource,currentPaymentMethodType,setPaymentRef,setPaymentSource}=(0,react_1.useContext)(PaymentMethodContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),loaded=(0,useExternalScript_1.default)("https://x.klarnacdn.net/kp/lib/v1/api.js"),[klarna,setKlarna]=(0,react_1.useState)(),{containerClassName}=p,divProps=tslib_1.__rest(p,["containerClassName"]);(0,react_1.useEffect)(()=>{loaded&&window?.Klarna!==void 0&&setKlarna(window.Klarna)},[loaded,window.Klarna]),(0,react_1.useEffect)(()=>(ref.current&&paymentSource&&currentPaymentMethodType&&loaded&&klarna&&(ref.current.onsubmit=props=>tslib_1.__awaiter(this,void 0,void 0,function*(){handleClick(klarna,props)}),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,paymentSource,currentPaymentMethodType,loaded,klarna]);const handleClick=(kl,props)=>{var _a2,_b,_c,_d,_e,_f,_g,_h,_j,_k,_l,_m,_o,_p,_q,_r;const[first]=paymentSource?.payment_methods||void 0,paymentMethodCategories=first?.identifier,billingAddress={given_name:(_a2=order?.billing_address)===null||_a2===void 0?void 0:_a2.first_name,family_name:(_b=order?.billing_address)===null||_b===void 0?void 0:_b.last_name,email:order?.customer_email,street_address:(_c=order?.billing_address)===null||_c===void 0?void 0:_c.line_1,street_address2:null,organization_name:null,postal_code:(_d=order?.billing_address)===null||_d===void 0?void 0:_d.zip_code,city:(_e=order?.billing_address)===null||_e===void 0?void 0:_e.city,region:(_f=order?.billing_address)===null||_f===void 0?void 0:_f.state_code,phone:(_g=order?.billing_address)===null||_g===void 0?void 0:_g.phone,country:(_h=order?.billing_address)===null||_h===void 0?void 0:_h.country_code},shippingAddress={given_name:(_j=order?.shipping_address)===null||_j===void 0?void 0:_j.first_name,family_name:(_k=order?.shipping_address)===null||_k===void 0?void 0:_k.last_name,email:order?.customer_email,street_address:(_l=order?.shipping_address)===null||_l===void 0?void 0:_l.line_1,street_address2:null,postal_code:(_m=order?.shipping_address)===null||_m===void 0?void 0:_m.zip_code,organization_name:null,city:(_o=order?.shipping_address)===null||_o===void 0?void 0:_o.city,region:(_p=order?.shipping_address)===null||_p===void 0?void 0:_p.state_code,phone:(_q=order?.shipping_address)===null||_q===void 0?void 0:_q.phone,country:(_r=order?.shipping_address)===null||_r===void 0?void 0:_r.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(Object.assign({payment_method_category:paymentMethodCategories},klarnaData),res=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(res.approved&&paymentSource&&currentPaymentMethodType){const ps=yield setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{auth_token:res.authorization_token}});if(props.setPlaceOrder!=null){const placed=yield 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(0,jsx_runtime_1.jsx)("form",{ref,children:(0,jsx_runtime_1.jsx)("div",Object.assign({className:containerClassName},divProps,{children:(0,jsx_runtime_1.jsx)("div",{id:"klarna-payments-container"})}))})}

package/lib/cjs/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/cjs/components/payment_source/PaymentSource.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentSource=PaymentSource;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodChildrenContext")),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),PaymentGateway_1=tslib_1.__importDefault(require("../payment_gateways/PaymentGateway")),getCardDetails_1=tslib_1.__importDefault(require("../../utils/getCardDetails")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext"));function PaymentSource(props){const{readonly}=props,{payment,expressPayments}=(0,react_1.useContext)(PaymentMethodChildrenContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),{payments}=(0,react_1.useContext)(CustomerContext_1.default),{currentPaymentMethodId,paymentSource,destroyPaymentSource,currentPaymentMethodType,currentCustomerPaymentSourceId}=(0,react_1.useContext)(PaymentMethodContext_1.default),[show,setShow]=(0,react_1.useState)(!1),[showCard,setShowCard]=(0,react_1.useState)(!1);(0,react_1.useEffect)(()=>{const isCustomerPaymentSource=currentCustomerPaymentSourceId!=null&&currentCustomerPaymentSourceId===paymentSource?.id;if(readonly)setShow(!0),setShowCard(!0);else if((payment?.id===currentPaymentMethodId||isCustomerPaymentSource)&&!expressPayments){const card=(0,getCardDetails_1.default)({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 handleEditClick=e=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(e.stopPropagation(),paymentSource){const paymentSourceId=paymentSource?.id;yield destroyPaymentSource({paymentSourceId,paymentResource:payment?.payment_source_type})}setShowCard(!showCard),setShow(!0)}),gatewayProps=Object.assign(Object.assign({},props),{show,showCard,handleEditClick,readonly});return(0,jsx_runtime_1.jsx)(PaymentGateway_1.default,Object.assign({},gatewayProps))}exports.default=PaymentSource;

package/lib/cjs/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/cjs/components/payment_source/PaymentSourceBrandIcon.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentSourceBrandIcon=PaymentSourceBrandIcon;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CustomerPaymentSourceContext_1=tslib_1.__importDefault(require("../../context/CustomerPaymentSourceContext"));function PaymentSourceBrandIcon(_a){var _b,_c,{src,width=32,children}=_a,p=tslib_1.__rest(_a,["src","width","children"]);const{brand,issuer_type:issuerType}=(0,react_1.useContext)(PaymentSourceContext_1.default),{brand:customerCardBrand,issuer_type:customerIssuerType}=(0,react_1.useContext)(CustomerPaymentSourceContext_1.default),cardBrand=(_c=(_b=brand??customerCardBrand)!==null&&_b!==void 0?_b:issuerType)!==null&&_c!==void 0?_c:customerIssuerType,ref=(0,react_1.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=Object.assign({brand:cardBrand,defaultSrc,url,width},p);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("img",Object.assign({ref,src:url,onError:handleError,width},p))}exports.default=PaymentSourceBrandIcon;

package/lib/cjs/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/cjs/components/payment_source/PaymentSourceBrandName.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentSourceBrandName=PaymentSourceBrandName;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),capitalize_1=tslib_1.__importDefault(require("lodash/capitalize")),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CustomerPaymentSourceContext_1=tslib_1.__importDefault(require("../../context/CustomerPaymentSourceContext"));function PaymentSourceBrandName(_a){var{children,label}=_a,props=tslib_1.__rest(_a,["children","label"]);const{brand}=(0,react_1.useContext)(PaymentSourceContext_1.default),{brand:customerCardBrand}=(0,react_1.useContext)(CustomerPaymentSourceContext_1.default),cardBrand=brand??customerCardBrand,brandName=cardBrand&&(0,capitalize_1.default)(cardBrand.replace(/_|-/gm," ")),parentProps=Object.assign({brand:brandName,label},props);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("span",Object.assign({},props,{children:label||(0,capitalize_1.default)(brandName)}))}exports.default=PaymentSourceBrandName;

package/lib/cjs/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/cjs/components/payment_source/PaymentSourceDetail.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentSourceDetail=PaymentSourceDetail;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),CustomerPaymentSourceContext_1=tslib_1.__importDefault(require("../../context/CustomerPaymentSourceContext"));function PaymentSourceDetail(_a){var{type,children}=_a,p=tslib_1.__rest(_a,["type","children"]);const card=(0,react_1.useContext)(PaymentSourceContext_1.default),customerCard=(0,react_1.useContext)(CustomerPaymentSourceContext_1.default),cardObj=Object.keys(card).length>0?card:customerCard,text=type in cardObj&&cardObj[type]!=null?cardObj[type]:type==="last4"?"****":"**",parentProps=Object.assign({type,text},p);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("span",Object.assign({},p,{children:text}))}exports.default=PaymentSourceDetail;

package/lib/cjs/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/cjs/components/payment_source/PaymentSourceEditButton.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentSourceEditButton=PaymentSourceEditButton;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent"));function PaymentSourceEditButton(_a){var{children,label="Edit"}=_a,props=tslib_1.__rest(_a,["children","label"]);const{showCard,handleEditClick,readonly}=(0,react_1.useContext)(PaymentSourceContext_1.default),parentProps=Object.assign({showCard,label,handleEditClick},props);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):readonly?null:(0,jsx_runtime_1.jsx)("button",Object.assign({},props,{onClick:handleEditClick,children:label}))}exports.default=PaymentSourceEditButton;

package/lib/cjs/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/cjs/components/payment_source/PaypalPayment.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaypalPayment=PaypalPayment;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),isFunction_1=tslib_1.__importDefault(require("lodash/isFunction")),react_1=require("react"),defaultMessage="by placing the order, you will be redirected to the PayPal website to sign in and authorize the payment";function PaypalPayment(_a){var{infoMessage}=_a,p=tslib_1.__rest(_a,["infoMessage"]);const ref=(0,react_1.useRef)(null),{setPaymentSource,paymentSource,currentPaymentMethodType,setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default);(0,react_1.useEffect)(()=>(ref.current&&paymentSource&&currentPaymentMethodType&&paymentSource?.approval_url&&(ref.current.onsubmit=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){return yield handleClick()}),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,paymentSource,currentPaymentMethodType]);const handleClick=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(paymentSource&&currentPaymentMethodType)try{return yield setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{metadata:{card:{id:paymentSource.id,brand:"paypal",last4:""}}}}),!0}catch{return!1}return!1});return(0,jsx_runtime_1.jsx)("form",{ref,children:(0,jsx_runtime_1.jsx)("div",Object.assign({},p,{children:(0,jsx_runtime_1.jsx)("span",{className:infoMessage?.className,children:(0,isFunction_1.default)(infoMessage?.text)?infoMessage?.text():infoMessage?.text||defaultMessage})}))})}exports.default=PaypalPayment;

package/lib/cjs/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/cjs/components/payment_source/StripeExpressPayment.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StripeExpressPayment=StripeExpressPayment;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),expressPaymentHelper_1=require("../../utils/expressPaymentHelper"),isEmpty_1=require("../../utils/isEmpty"),react_stripe_js_1=require("@stripe/react-stripe-js"),react_1=require("react");function StripeExpressPayment({clientSecret}){const stripe=(0,react_stripe_js_1.useStripe)(),[paymentRequest,setPaymentRequest]=(0,react_1.useState)(null),{accessToken,endpoint}=(0,react_1.useContext)(CommerceLayerContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),{paymentMethods,paymentSource}=(0,react_1.useContext)(PaymentMethodContext_1.default);return(0,react_1.useEffect)(()=>{var _a,_b,_c,_d,_e;if(stripe==null||order==null)return;const pr=stripe.paymentRequest({country:(_a=order?.country_code)!==null&&_a!==void 0?_a:"US",currency:(_c=(_b=order?.currency_code)===null||_b===void 0?void 0:_b.toLowerCase())!==null&&_c!==void 0?_c:"",total:{label:`#${(_d=order?.number)!==null&&_d!==void 0?_d:""}`,amount:(_e=order?.total_amount_with_taxes_cents)!==null&&_e!==void 0?_e:0},requestPayerName:!0,requestPayerEmail:!0,requestPayerPhone:!0,requestShipping:!0});pr.canMakePayment().then(result=>{result&&setPaymentRequest(pr)}).catch(err=>{console.error("Can make payment:",err)})},[(0,isEmpty_1.isEmpty)(stripe),(0,isEmpty_1.isEmpty)(order)]),paymentRequest!=null&&stripe!=null?(paymentRequest.on("shippingaddresschange",ev=>tslib_1.__awaiter(this,void 0,void 0,function*(){var _a,_b,_c,_d,_e,_f,_g;if(order!=null&&accessToken!=null&&endpoint!=null){const requiresBillingInfo=(_a=order?.requires_billing_info)!==null&&_a!==void 0?_a:!1,orderWithShipments=yield(0,expressPaymentHelper_1.setExpressFakeAddress)({orderId:order.id,config:{accessToken,endpoint},address:{first_name:"Fake name",last_name:"Fake lastname",country_code:(_b=ev.shippingAddress.country)!==null&&_b!==void 0?_b:"",line_1:"Fake street 123",city:(_c=ev.shippingAddress.city)!==null&&_c!==void 0?_c:"Fake city",zip_code:(_d=ev.shippingAddress.postalCode)!==null&&_d!==void 0?_d:"12345",state_code:(_e=ev.shippingAddress.region)!==null&&_e!==void 0?_e:"Fake state",phone:"1234567890",billing_info:requiresBillingInfo?"Fake billing info":void 0}}),shippingOptions=(0,expressPaymentHelper_1.getExpressShippingMethods)(orderWithShipments);shippingOptions!=null&&!(0,isEmpty_1.isEmpty)(shippingOptions)?ev.updateWith({status:"success",shippingOptions,total:{label:`#${(_f=orderWithShipments?.number)!==null&&_f!==void 0?_f:""}`,amount:(_g=orderWithShipments?.total_amount_with_taxes_cents)!==null&&_g!==void 0?_g:0}}):ev.updateWith({status:"invalid_shipping_address"})}else ev.updateWith({status:"fail"})})),paymentRequest.on("shippingoptionchange",ev=>tslib_1.__awaiter(this,void 0,void 0,function*(){var _a,_b;if(order!=null&&accessToken!=null&&endpoint!=null){const updatedOrder=yield(0,expressPaymentHelper_1.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:`#${(_a=updatedOrder?.number)!==null&&_a!==void 0?_a:""}`,amount:(_b=updatedOrder?.total_amount_with_taxes_cents)!==null&&_b!==void 0?_b:0}})}else ev.updateWith({status:"fail"})})),paymentRequest.on("paymentmethod",ev=>tslib_1.__awaiter(this,void 0,void 0,function*(){var _a,_b,_c,_d,_e,_f,_g,_h,_j,_k,_l,_m,_o,_p,_q,_r;if(order?.id==null)throw new Error("Order is null");if(paymentMethods==null)throw new Error("Payment methods are null");const[paymentMethod]=(0,expressPaymentHelper_1.getAvailableExpressPayments)(paymentMethods);if(paymentMethod==null)throw new Error("Payment method is null");if(paymentSource==null)throw new Error("Payment source is null");const requiresBillingInfo=(_a=order?.requires_billing_info)!==null&&_a!==void 0?_a:!1,paymentResource=paymentMethod?.payment_source_type;if(accessToken!=null&&endpoint!=null){const[firstName,lastName]=(_c=(_b=ev.payerName)===null||_b===void 0?void 0:_b.split(" "))!==null&&_c!==void 0?_c:[],[line]=(_e=(_d=ev.shippingAddress)===null||_d===void 0?void 0:_d.addressLine)!==null&&_e!==void 0?_e:"",email=(_f=ev.payerEmail)!==null&&_f!==void 0?_f:"";yield(0,expressPaymentHelper_1.setExpressFakeAddress)({orderId:order.id,config:{accessToken,endpoint},address:{first_name:firstName??"Fake name",last_name:lastName??"Fake lastname",country_code:(_h=(_g=ev?.shippingAddress)===null||_g===void 0?void 0:_g.country)!==null&&_h!==void 0?_h:"",line_1:line??"Fake street 123",city:(_k=(_j=ev?.shippingAddress)===null||_j===void 0?void 0:_j.city)!==null&&_k!==void 0?_k:"Fake city",zip_code:(_m=(_l=ev?.shippingAddress)===null||_l===void 0?void 0:_l.postalCode)!==null&&_m!==void 0?_m:"12345",state_code:(_p=(_o=ev?.shippingAddress)===null||_o===void 0?void 0:_o.region)!==null&&_p!==void 0?_p:"Fake state",phone:(_q=ev?.payerPhone)!==null&&_q!==void 0?_q:"1234567890",billing_info:requiresBillingInfo?"Fake billing info":void 0},email}),yield(0,expressPaymentHelper_1.setExpressShippingMethod)({orderId:order.id,config:{accessToken,endpoint},selectFirst:!1,selectedShippingMethodId:(_r=ev?.shippingOption)===null||_r===void 0?void 0:_r.id,params:{include:["shipments.available_shipping_methods"]}});const placeOrderParams={config:{accessToken,endpoint},orderId:order?.id,paymentResource,paymentSourceId:paymentSource?.id};yield(0,expressPaymentHelper_1.setExpressPlaceOrder)(placeOrderParams);const{paymentIntent,error:confirmError}=yield 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}=yield 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=yield(0,expressPaymentHelper_1.setExpressPlaceOrder)(placeOrderParams2);ev.complete("success"),yield(0,expressPaymentHelper_1.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=yield(0,expressPaymentHelper_1.setExpressPlaceOrder)(placeOrderParams2);ev.complete("success"),yield(0,expressPaymentHelper_1.expressRedirectUrl)({order:order2,config:{accessToken,endpoint}})}catch(err){console.error("Place order:",err),ev.complete("fail")}}}})),(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:(0,jsx_runtime_1.jsx)(react_stripe_js_1.PaymentRequestButtonElement,{className:"",options:{paymentRequest}})})):null}

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

@@ -0,0 +1,21 @@
+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;
+};
+export declare function StripePayment({ publishableKey, show, options, clientSecret, locale, expressPayments, ...p }: Props): JSX.Element | null;
+export default StripePayment;

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

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StripePayment=StripePayment;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),react_stripe_js_1=require("@stripe/react-stripe-js"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),localStorage_1=require("../../utils/localStorage"),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),StripeExpressPayment_1=require("./StripeExpressPayment"),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}){const ref=(0,react_1.useRef)(null),{currentPaymentMethodType,setPaymentMethodErrors,setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default),stripe=(0,react_stripe_js_1.useStripe)(),elements=(0,react_stripe_js_1.useElements)();(0,react_1.useEffect)(()=>(ref.current&&stripe&&elements&&(ref.current.onsubmit=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){return yield onSubmit({event:ref.current,stripe,elements})}),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,stripe,elements]);const onSubmit=_a=>tslib_1.__awaiter(this,[_a],void 0,function*({event,stripe:stripe2,elements:elements2}){var _b,_c,_d,_e,_f,_g,_h;if(!stripe2)return!1;const savePaymentSourceToCustomerWallet=(_c=(_b=event?.elements)===null||_b===void 0?void 0:_b.save_payment_source_to_customer_wallet)===null||_c===void 0?void 0:_c.checked;if(savePaymentSourceToCustomerWallet&&(0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),elements2!=null){const billingInfo=order?.billing_address,email=(_d=order?.customer_email)!==null&&_d!==void 0?_d:"",billingDetails={name:(_e=billingInfo?.full_name)!==null&&_e!==void 0?_e:"",email,phone:billingInfo?.phone,address:{city:billingInfo?.city,country:billingInfo?.country_code,line1:billingInfo?.line_1,line2:(_f=billingInfo?.line_2)!==null&&_f!==void 0?_f:"",postal_code:(_g=billingInfo?.zip_code)!==null&&_g!==void 0?_g:"",state:billingInfo?.state_code}},url=new URL(window.location.href),cleanUrl=`${url.origin}${url.pathname}?accessToken=${url.searchParams.get("accessToken")}`,{error}=yield 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:(_h=error.message)!==null&&_h!==void 0?_h:""}]),!1):!0}return!1});return(0,jsx_runtime_1.jsxs)("form",{ref,children:[(0,jsx_runtime_1.jsx)(react_stripe_js_1.PaymentElement,{id:"payment-element",options:Object.assign(Object.assign({},defaultOptions),options)}),templateCustomerSaveToWallet&&(0,jsx_runtime_1.jsx)(Parent_1.default,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})]})}function StripePayment(_a){var{publishableKey,show,options,clientSecret,locale="auto",expressPayments=!1}=_a,p=tslib_1.__rest(_a,["publishableKey","show","options","clientSecret","locale","expressPayments"]);const[isLoaded,setIsLoaded]=(0,react_1.useState)(!1),[stripe,setStripe]=(0,react_1.useState)(null),{containerClassName,templateCustomerSaveToWallet,fonts=[],appearance}=p,divProps=tslib_1.__rest(p,["containerClassName","templateCustomerSaveToWallet","fonts","appearance"]);(0,react_1.useEffect)(()=>(show&&publishableKey&&Promise.resolve().then(()=>tslib_1.__importStar(require("@stripe/stripe-js"))).then(({loadStripe})=>{(()=>tslib_1.__awaiter(this,void 0,void 0,function*(){const res=yield loadStripe(publishableKey,{locale});res!=null&&(setStripe(res),setIsLoaded(!0))}))()}),()=>{setIsLoaded(!1)}),[show,publishableKey]);const elementsOptions={clientSecret,appearance:Object.assign(Object.assign({},defaultAppearance),appearance),fonts};return isLoaded&&stripe!=null&&clientSecret!=null?(0,jsx_runtime_1.jsx)("div",Object.assign({className:containerClassName},divProps,{children:(0,jsx_runtime_1.jsx)(react_stripe_js_1.Elements,{stripe,options:elementsOptions,children:expressPayments?(0,jsx_runtime_1.jsx)(StripeExpressPayment_1.StripeExpressPayment,{clientSecret}):(0,jsx_runtime_1.jsx)(StripePaymentForm,{options,templateCustomerSaveToWallet})})})):null}exports.default=StripePayment;

package/lib/cjs/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/cjs/components/payment_source/WireTransferPayment.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.WireTransferPayment=WireTransferPayment;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),react_1=require("react"),defaultMessage="after placing the order, you will need to manually complete the payment with your bank";function WireTransferPayment(_a){var _b,{infoMessage}=_a,p=tslib_1.__rest(_a,["infoMessage"]);const{className,"data-testid":dataTestId}=p,ref=(0,react_1.useRef)(null),{setPaymentSource,paymentSource,currentPaymentMethodType,setPaymentRef}=(0,react_1.useContext)(PaymentMethodContext_1.default);(0,react_1.useEffect)(()=>(ref.current&&paymentSource&&currentPaymentMethodType&&(ref.current.onsubmit=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){return yield handleClick()}),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,paymentSource,currentPaymentMethodType]);const handleClick=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(paymentSource&&currentPaymentMethodType)try{return yield setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{metadata:{card:{id:paymentSource.id,brand:"wire-transfer",last4:""}}}}),!0}catch{return!1}return!1});return(0,jsx_runtime_1.jsx)("form",{ref,children:(0,jsx_runtime_1.jsx)("div",{className,"data-testid":dataTestId,children:(0,jsx_runtime_1.jsx)("span",{className:infoMessage?.className,children:(_b=infoMessage?.text)!==null&&_b!==void 0?_b:defaultMessage})})})}exports.default=WireTransferPayment;

package/lib/cjs/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/cjs/components/prices/Price.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Price=Price;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),PricesContext_1=tslib_1.__importDefault(require("../../context/PricesContext")),react_1=require("react"),getPrices_1=require("../../utils/getPrices"),SkuChildrenContext_1=tslib_1.__importDefault(require("../../context/SkuChildrenContext"));function Price(props){const{children,skuCode=""}=props,{prices,skuCode:pricesSkuCode,loading,skuCodes,setSkuCodes,loader}=(0,react_1.useContext)(PricesContext_1.default),{sku}=(0,react_1.useContext)(SkuChildrenContext_1.default),[skuPrices,setSkuPrices]=(0,react_1.useState)([]),sCode=pricesSkuCode||skuCode||sku?.code||"";(0,react_1.useEffect)(()=>(prices!=null&&`${sCode}`in prices?setSkuPrices(prices[sCode]):sCode&&!skuCodes.includes(sCode)&&(skuCodes.push(sCode),setSkuCodes&&setSkuCodes({skuCodes})),()=>{setSkuPrices([])}),[prices,sCode]);const parentProps=Object.assign({loading,loader,prices:skuPrices},props),pricesComponent=prices==null||skuPrices==null?null:(0,getPrices_1.getPricesComponent)(skuPrices,props);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:loading||pricesComponent==null?loader:pricesComponent})}exports.default=Price;

package/lib/cjs/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/cjs/components/prices/PricesContainer.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PricesContainer=PricesContainer;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),PriceReducer_1=tslib_1.__importStar(require("../../reducers/PriceReducer")),PricesContext_1=tslib_1.__importDefault(require("../../context/PricesContext")),SkuContext_1=tslib_1.__importDefault(require("../../context/SkuContext"));function PricesContainer(props){const{children,skuCode="",loader="Loading...",perPage=10,filters={}}=props,[state,dispatch]=(0,react_1.useReducer)(PriceReducer_1.default,PriceReducer_1.priceInitialState),config=(0,react_1.useContext)(CommerceLayerContext_1.default),{skuCodes}=(0,react_1.useContext)(SkuContext_1.default);!state.skuCodes.includes(skuCode)&&skuCode&&state.skuCodes.push(skuCode);const sCode=skuCodes&&skuCodes?.length>0?"":skuCode??"";(0,react_1.useEffect)(()=>{state.skuCodes.length===0&&skuCodes!=null&&skuCodes.length>0&&state.setSkuCodes!=null&&state.setSkuCodes({skuCodes,dispatch}),config.accessToken&&(state.skuCodes.length>0||sCode)&&(0,PriceReducer_1.getSkusPrice)(sCode&&[sCode]||state.skuCodes,{config,dispatch,perPage,filters})},[config.accessToken,sCode,state.skuCodes.length]);const priceValue=Object.assign(Object.assign({},state),{skuCode:sCode,loader,setSkuCodes:params=>{(0,PriceReducer_1.setSkuCodes)(Object.assign(Object.assign({},params),{dispatch}))}});return(0,jsx_runtime_1.jsx)(PricesContext_1.default.Provider,{value:priceValue,children})}exports.default=PricesContainer;

package/lib/cjs/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/cjs/components/shipments/Shipment.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Shipment=Shipment;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ShipmentContext_1=tslib_1.__importDefault(require("../../context/ShipmentContext")),ShipmentChildrenContext_1=tslib_1.__importDefault(require("../../context/ShipmentChildrenContext")),getLoaderComponent_1=tslib_1.__importDefault(require("../../utils/getLoaderComponent")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext"));function Shipment({children,loader="Loading...",autoSelectSingleShippingMethod=!1}){const[loading,setLoading]=(0,react_1.useState)(!0),{shipments,deliveryLeadTimes,setShippingMethod}=(0,react_1.useContext)(ShipmentContext_1.default),{order}=(0,react_1.useContext)(OrderContext_1.default);(0,react_1.useEffect)(()=>(shipments!=null&&(autoSelectSingleShippingMethod?tslib_1.__awaiter(this,void 0,void 0,function*(){var _a;for(const shipment of shipments){const isSingle=((_a=shipment?.available_shipping_methods)===null||_a===void 0?void 0:_a.length)===1;if(!shipment?.shipping_method&&isSingle){const[shippingMethod]=shipment?.available_shipping_methods||[];if(shippingMethod&&setShippingMethod!=null){const{success,order:order2}=yield 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)=>{var _a,_b;const shipmentLineItems=shipment.stock_line_items,lineItems=shipmentLineItems?.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?(_a=shippingMethods[0])===null||_a===void 0?void 0:_a.id:(_b=shipment.shipping_method)===null||_b===void 0?void 0:_b.id,stockTransfers=shipment.stock_transfers,parcels=shipment.parcels,times=deliveryLeadTimes?.filter(time=>{var _a2,_b2;return((_a2=time.stock_location)===null||_a2===void 0?void 0:_a2.id)===((_b2=shipment.stock_location)===null||_b2===void 0?void 0:_b2.id)}),shipmentProps={parcels,lineItems,shippingMethods,currentShippingMethodId,stockTransfers,deliveryLeadTimes:times,shipment,keyNumber:shipment?.id};return(0,jsx_runtime_1.jsx)(ShipmentChildrenContext_1.default.Provider,{value:shipmentProps,children},k)});return loading?(0,getLoaderComponent_1.default)(loader):(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:components})}exports.default=Shipment;

package/lib/cjs/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/cjs/components/shipments/ShipmentField.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShipmentField=ShipmentField;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),get_1=tslib_1.__importDefault(require("lodash/get")),ShipmentChildrenContext_1=tslib_1.__importDefault(require("../../context/ShipmentChildrenContext"));function ShipmentField(props){const{name}=props,{shipment,keyNumber}=(0,react_1.useContext)(ShipmentChildrenContext_1.default),key=name,text=key!=="key_number"?(0,get_1.default)(shipment,key):keyNumber,parentProps=Object.assign({shipment},props);return props.children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children:props.children})):(0,jsx_runtime_1.jsx)("span",Object.assign({},props,{children:text}))}exports.default=ShipmentField;

package/lib/cjs/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/cjs/components/shipments/ShipmentsContainer.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShipmentsContainer=ShipmentsContainer;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),ShipmentContext_1=tslib_1.__importStar(require("../../context/ShipmentContext")),react_1=require("react"),ShipmentReducer_1=tslib_1.__importStar(require("../../reducers/ShipmentReducer")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty"));function ShipmentsContainer(props){const{children}=props,[state,dispatch]=(0,react_1.useReducer)(ShipmentReducer_1.default,ShipmentReducer_1.shipmentInitialState),{order,getOrder,include,addResourceToInclude,includeLoaded}=(0,react_1.useContext)(OrderContext_1.default),config=(0,react_1.useContext)(CommerceLayerContext_1.default);(0,react_1.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]),(0,react_1.useEffect)(()=>{order!=null&&!(0,isEmpty_1.default)(config)&&order.shipments&&(0,ShipmentReducer_1.getShipments)({order,dispatch,config})},[order?.shipments]),(0,react_1.useEffect)(()=>(order&&(order.shipments&&order.shipments.length>0&&order.shipments.map(shipment=>shipment.available_shipping_methods&&shipment.available_shipping_methods.length>0).includes(!1)&&(0,ShipmentReducer_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=>{var _a,_b,_c,_d;return!!(((_a=lineItem.item)===null||_a===void 0?void 0:_a.do_not_ship)||((_b=lineItem.item)===null||_b===void 0?void 0:_b.do_not_track)||((_d=(_c=lineItem.item)===null||_c===void 0?void 0:_c.inventory)===null||_d===void 0?void 0:_d.quantity)>=lineItem?.quantity)}).includes(!1)&&(0,ShipmentReducer_1.setShipmentErrors)([...state.errors||[],{code:"OUT_OF_STOCK",message:"No stock available",resource:"line_items"}],dispatch)),()=>{(0,ShipmentReducer_1.setShipmentErrors)([],dispatch)}),[order?.shipments]);const contextValue=(0,react_1.useMemo)(()=>Object.assign(Object.assign({},state),{setShipmentErrors:errors=>{ShipmentContext_1.defaultShipmentContext.setShipmentErrors(errors,dispatch)},setShippingMethod:(shipmentId,shippingMethodId)=>tslib_1.__awaiter(this,void 0,void 0,function*(){return yield(0,ShipmentReducer_1.setShippingMethod)({shippingMethodId,shipmentId,config,getOrder,order})})}),[state]);return(0,jsx_runtime_1.jsx)(ShipmentContext_1.default.Provider,{value:contextValue,children})}exports.default=ShipmentsContainer;

package/lib/cjs/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/cjs/components/shipments/ShipmentsCount.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShipmentsCount=ShipmentsCount;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),ShipmentContext_1=tslib_1.__importDefault(require("../../context/ShipmentContext")),useCustomContext_1=tslib_1.__importDefault(require("../../utils/hooks/useCustomContext"));function ShipmentsCount(_a){var _b,{children}=_a,p=tslib_1.__rest(_a,["children"]);const{shipments}=(0,useCustomContext_1.default)({context:ShipmentContext_1.default,contextComponentName:"ShipmentsContainer",currentComponentName:"ShipmentsCount",key:"shipments"}),quantity=(_b=shipments?.length)!==null&&_b!==void 0?_b:0,childrenProps=Object.assign(Object.assign({},p),{quantity,shipments});return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},childrenProps,{children})):(0,jsx_runtime_1.jsx)("span",Object.assign({},p,{children:quantity}))}exports.default=ShipmentsCount;

package/lib/cjs/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/cjs/components/shipping_methods/ShippingMethod.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShippingMethod=ShippingMethod;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ShippingMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/ShippingMethodChildrenContext")),ShipmentChildrenContext_1=tslib_1.__importDefault(require("../../context/ShipmentChildrenContext")),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty"));function ShippingMethod(props){const{children,readonly,emptyText="There are not any shipping method available"}=props,{shippingMethods,currentShippingMethodId,deliveryLeadTimes,shipment}=(0,react_1.useContext)(ShipmentChildrenContext_1.default),[items,setItems]=(0,react_1.useState)([]);(0,react_1.useEffect)(()=>{const methods=shippingMethods?.filter(s=>readonly?s.id===currentShippingMethodId:!0).map((shippingMethod,k)=>{var _a;const[deliveryLeadTimeForShipment]=(_a=deliveryLeadTimes?.filter(delivery=>{var _a2;const deliveryShippingMethodId=(_a2=delivery.shipping_method)===null||_a2===void 0?void 0:_a2.id;return shippingMethod.id===deliveryShippingMethodId}))!==null&&_a!==void 0?_a:[],shippingProps={shipmentId:shipment?.id,shippingMethod,currentShippingMethodId,deliveryLeadTimeForShipment};return(0,jsx_runtime_1.jsx)(ShippingMethodChildrenContext_1.default.Provider,{value:shippingProps,children},k)});return methods&&setItems(methods),()=>{setItems([])}},[currentShippingMethodId,deliveryLeadTimes,shippingMethods]);const components=!(0,isEmpty_1.default)(items)&&items||emptyText;return(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:components})}exports.default=ShippingMethod;

package/lib/cjs/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/cjs/components/shipping_methods/ShippingMethodName.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShippingMethodName=ShippingMethodName;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ShippingMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/ShippingMethodChildrenContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent"));function ShippingMethodName(props){var _a;const{shippingMethod,deliveryLeadTimeForShipment,shipmentId}=(0,react_1.useContext)(ShippingMethodChildrenContext_1.default),htmlFor=`shipment-${shipmentId??""}-${(_a=shippingMethod?.id)!==null&&_a!==void 0?_a:""}`||"",labelName=shippingMethod?.name,parentProps=Object.assign({shippingMethod,deliveryLeadTimeForShipment,label:labelName,htmlFor},props);return props.children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children:props.children})):(0,jsx_runtime_1.jsx)("label",Object.assign({htmlFor},props,{children:labelName}))}exports.default=ShippingMethodName;

package/lib/cjs/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/cjs/components/shipping_methods/ShippingMethodPrice.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShippingMethodPrice=ShippingMethodPrice;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),getAmount_1=tslib_1.__importDefault(require("../../utils/getAmount")),ShippingMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/ShippingMethodChildrenContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent"));function ShippingMethodPrice(props){const{base="price_amount",type="for_shipment",format="formatted",labelFreeOver="Free",labelExternal="Price estimates after the shipping method selection"}=props,p=tslib_1.__rest(props,["base","type","format","labelFreeOver","labelExternal"]),{shippingMethod}=(0,react_1.useContext)(ShippingMethodChildrenContext_1.default),[price,setPrice]=(0,react_1.useState)(""),[priceCents,setPriceCents]=(0,react_1.useState)(0),scheme=shippingMethod?.scheme;(0,react_1.useEffect)(()=>{if(shippingMethod){const p2=(0,getAmount_1.default)({base,type,format,obj:shippingMethod});setPrice(p2);const pCents=(0,getAmount_1.default)({base:"price_amount",type:"for_shipment",format:"cents",obj:shippingMethod});setPriceCents(pCents)}return()=>{setPrice(""),setPriceCents(0)}},[shippingMethod]);const parentProps=Object.assign({price,scheme},p),finalPrice=priceCents===0?labelFreeOver:price;return props.children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children:props.children})):(0,jsx_runtime_1.jsx)("span",Object.assign({},p,{children:scheme==="external"?labelExternal:finalPrice}))}exports.default=ShippingMethodPrice;

package/lib/cjs/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/cjs/components/shipping_methods/ShippingMethodRadioButton.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShippingMethodRadioButton=ShippingMethodRadioButton;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ShippingMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/ShippingMethodChildrenContext")),Parent_1=tslib_1.__importDefault(require("../utils/Parent")),ShipmentContext_1=tslib_1.__importDefault(require("../../context/ShipmentContext"));function ShippingMethodRadioButton(props){const{onChange,children}=props,p=tslib_1.__rest(props,["onChange","children"]),[checked,setChecked]=(0,react_1.useState)(!1),[disabled,setDisabled]=(0,react_1.useState)(!1),{shippingMethod,currentShippingMethodId,shipmentId}=(0,react_1.useContext)(ShippingMethodChildrenContext_1.default),{setShippingMethod}=(0,react_1.useContext)(ShipmentContext_1.default),shippingMethodId=shippingMethod?.id,name=`shipment-${shipmentId??""}`,id=`${name}-${shippingMethodId??""}`;(0,react_1.useEffect)(()=>(setChecked(shippingMethodId===currentShippingMethodId),()=>{setChecked(!1)}),[currentShippingMethodId,shippingMethodId]);const handleOnChange=()=>tslib_1.__awaiter(this,void 0,void 0,function*(){if(setDisabled(!0),shipmentId&&shippingMethodId&&setShippingMethod!=null){const{order}=yield setShippingMethod(shipmentId,shippingMethodId);shippingMethod&&onChange!=null&&onChange({shippingMethod,shipmentId,order})}setDisabled(!1)}),parentProps=Object.assign({shippingMethod,shipmentId,handleOnChange,name,id,disabled},props);return children?(0,jsx_runtime_1.jsx)(Parent_1.default,Object.assign({},parentProps,{children})):(0,jsx_runtime_1.jsx)("input",Object.assign({disabled,type:"radio",name,id,onChange:e=>{e.preventDefault(),e.stopPropagation(),handleOnChange()},checked},p))}exports.default=ShippingMethodRadioButton;

package/lib/cjs/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/cjs/components/skus/AvailabilityContainer.js

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AvailabilityContainer=AvailabilityContainer;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),AvailabilityReducer_1=tslib_1.__importStar(require("../../reducers/AvailabilityReducer")),AvailabilityContext_1=tslib_1.__importDefault(require("../../context/AvailabilityContext")),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),LineItemChildrenContext_1=tslib_1.__importDefault(require("../../context/LineItemChildrenContext")),SkuChildrenContext_1=tslib_1.__importDefault(require("../../context/SkuChildrenContext")),useCustomContext_1=tslib_1.__importDefault(require("../../utils/hooks/useCustomContext"));function AvailabilityContainer({children,skuCode,skuId,getQuantity}){const{lineItem}=(0,react_1.useContext)(LineItemChildrenContext_1.default),{sku}=(0,react_1.useContext)(SkuChildrenContext_1.default),{accessToken,endpoint}=(0,useCustomContext_1.default)({context:CommerceLayerContext_1.default,contextComponentName:"CommerceLayer",currentComponentName:"AvailabilityContainer",key:"accessToken"}),[state,dispatch]=(0,react_1.useReducer)(AvailabilityReducer_1.default,AvailabilityReducer_1.availabilityInitialState),sCode=skuCode||lineItem?.sku_code||sku?.code;(0,react_1.useEffect)(()=>{if(accessToken!=null&&accessToken!==""){const config={accessToken,endpoint};(sCode!=null||skuId!=null)&&(0,AvailabilityReducer_1.getAvailability)({skuCode:sCode,skuId,config,dispatch})}return()=>{dispatch({type:"setAvailability",payload:{}})}},[accessToken,sCode,skuId]),(0,react_1.useEffect)(()=>{getQuantity!=null&&state?.quantity!=null&&getQuantity(state?.quantity)},[state.quantity]);const memoized=(0,react_1.useMemo)(()=>Object.assign(Object.assign({},state),{parent:!0}),[state]);return(0,jsx_runtime_1.jsx)(AvailabilityContext_1.default.Provider,{value:memoized,children})}exports.default=AvailabilityContainer;