@commercelayer/react-components 3.2.4 → 3.3.0

package/LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 Commerce Layer SRL
+Copyright (c) 2020 Commerce Layer Inc.
 https://commercelayer.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -19,4 +19,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

package/lib/components/AvailabilityContainer.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useReducer,useEffect}from"react";import availabilityReducer,{availabilityInitialState,getAvailability}from"../reducers/AvailabilityReducer";import AvailabilityContext from"../context/AvailabilityContext";import{isEmpty}from"lodash";import ItemContext from"../context/ItemContext";import getCurrentItemKey from"../utils/getCurrentItemKey";import components from"../config/components";import CommerceLayerContext from"../context/CommerceLayerContext";import LineItemChildrenContext from"../context/LineItemChildrenContext";const propTypes=components.AvailabilityContainer.propTypes,displayName=components.AvailabilityContainer.displayName,AvailabilityContainer=props=>{const{children,skuCode}=props,{item,skuCode:itemSkuCode,setItem}=useContext(ItemContext),{lineItem}=useContext(LineItemChildrenContext),config=useContext(CommerceLayerContext),[state,dispatch]=useReducer(availabilityReducer,availabilityInitialState),sCode=skuCode||getCurrentItemKey(item)||itemSkuCode||(lineItem==null?void 0:lineItem.sku_code);return useEffect(()=>{var _a,_b,_c,_d,_e,_f,_g;if(sCode){const available=(_b=(_a=item[sCode])===null||_a===void 0?void 0:_a.inventory)===null||_b===void 0?void 0:_b.available,quantity=(_d=(_c=item[sCode])===null||_c===void 0?void 0:_c.inventory)===null||_d===void 0?void 0:_d.quantity,[level]=((_f=(_e=item[sCode])===null||_e===void 0?void 0:_e.inventory)===null||_f===void 0?void 0:_f.levels)||[{quantity:null,delivery_lead_times:[]}];if(!isEmpty(level)&&((_g=level==null?void 0:level.delivery_lead_times)===null||_g===void 0?void 0:_g.length)>0){const[delivery]=level==null?void 0:level.delivery_lead_times;dispatch({type:"setAvailability",payload:Object.assign(Object.assign({},delivery),{quantity:level==null?void 0:level.quantity})})}else config.accessToken&&!(item==null?void 0:item[sCode])?getAvailability({skuCode:sCode,config,dispatch,setItem}):available||dispatch({type:"setAvailability",payload:{quantity}})}return()=>{dispatch({type:"setAvailability",payload:{}})}},[config.accessToken,item,sCode]),_jsx(AvailabilityContext.Provider,Object.assign({value:Object.assign({},state)},{children}),void 0)};AvailabilityContainer.propTypes=propTypes,AvailabilityContainer.displayName=displayName;export default AvailabilityContainer;
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useReducer,useEffect}from"react";import availabilityReducer,{availabilityInitialState,getAvailability}from"../reducers/AvailabilityReducer";import AvailabilityContext from"../context/AvailabilityContext";import ItemContext from"../context/ItemContext";import getCurrentItemKey from"../utils/getCurrentItemKey";import components from"../config/components";import CommerceLayerContext from"../context/CommerceLayerContext";import LineItemChildrenContext from"../context/LineItemChildrenContext";const propTypes=components.AvailabilityContainer.propTypes,displayName=components.AvailabilityContainer.displayName,AvailabilityContainer=props=>{const{children,skuCode}=props,{item,skuCode:itemSkuCode,setItem}=useContext(ItemContext),{lineItem}=useContext(LineItemChildrenContext),config=useContext(CommerceLayerContext),[state,dispatch]=useReducer(availabilityReducer,availabilityInitialState),sCode=skuCode||getCurrentItemKey(item)||itemSkuCode||(lineItem==null?void 0:lineItem.sku_code);return useEffect(()=>{var _a,_b,_c,_d,_e,_f,_g;if(sCode){const available=(_b=(_a=item[sCode])===null||_a===void 0?void 0:_a.inventory)===null||_b===void 0?void 0:_b.available,quantity=(_d=(_c=item[sCode])===null||_c===void 0?void 0:_c.inventory)===null||_d===void 0?void 0:_d.quantity,[level]=((_f=(_e=item[sCode])===null||_e===void 0?void 0:_e.inventory)===null||_f===void 0?void 0:_f.levels)||[{quantity:null,delivery_lead_times:[]}];if(level!==void 0&&((_g=level==null?void 0:level.delivery_lead_times)===null||_g===void 0?void 0:_g.length)>0){const[delivery]=level.delivery_lead_times;dispatch({type:"setAvailability",payload:Object.assign(Object.assign({},delivery),{quantity:level==null?void 0:level.quantity})})}else config.accessToken&&!(item==null?void 0:item[sCode])?getAvailability({skuCode:sCode,config,dispatch,setItem}):available||dispatch({type:"setAvailability",payload:{quantity}})}return()=>{dispatch({type:"setAvailability",payload:{}})}},[config.accessToken,item,sCode]),_jsx(AvailabilityContext.Provider,Object.assign({value:Object.assign({},state)},{children}),void 0)};AvailabilityContainer.propTypes=propTypes,AvailabilityContainer.displayName=displayName;export default AvailabilityContainer;

package/lib/components/CheckoutComPayment.d.ts

@@ -0,0 +1,21 @@
+import { FunctionComponent } from 'react';
+import { PaymentMethodConfig } from '../reducers/PaymentMethodReducer';
+import { PaymentSourceProps } from './PaymentSource';
+import { FramesStyle } from 'frames-react';
+export declare type CheckoutComConfig = {
+    containerClassName?: string;
+    hintLabel?: string;
+    name?: string;
+    options?: {
+        style: FramesStyle;
+    };
+    [key: string]: unknown;
+};
+declare type CheckoutComPaymentProps = PaymentMethodConfig['checkoutComPayment'] & JSX.IntrinsicElements['div'] & {
+    show?: boolean;
+    publicKey: string;
+    locale?: string;
+    templateCustomerSaveToWallet?: PaymentSourceProps['templateCustomerSaveToWallet'];
+};
+declare const CheckoutComPayment: FunctionComponent<CheckoutComPaymentProps>;
+export default CheckoutComPayment;

package/lib/components/CheckoutComPayment.js

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

package/lib/components/PaymentGateway.js

@@ -1 +1 @@
-import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import OrderContext from"../context/OrderContext";import PaymentMethodChildrenContext from"../context/PaymentMethodChildrenContext";import PaymentMethodContext from"../context/PaymentMethodContext";import getPaypalConfig from"../utils/paypalPayment";import{useContext,useEffect,useState}from"react";import getLoaderComponent from"../utils/getLoaderComponent";import AdyenGateway from"./gateways/AdyenGateway";import StripeGateway from"./gateways/StripeGateway";import BraintreeGateway from"./gateways/BraintreeGateway";import PaypalGateway from"./gateways/PaypalGateway";import WireTransferGateway from"./gateways/WireTransferGateway";import CustomerContext from"../context/CustomerContext";const PaymentGateway=_a=>{var _b,{readonly,showCard,handleEditClick,children,templateCustomerCards,templateCustomerSaveToWallet,onClickCustomerCards,show,loader="Loading..."}=_a,p=__rest(_a,["readonly","showCard","handleEditClick","children","templateCustomerCards","templateCustomerSaveToWallet","onClickCustomerCards","show","loader"]);const loaderComponent=getLoaderComponent(loader),[loading,setLoading]=useState(!0),{payment}=useContext(PaymentMethodChildrenContext),{order}=useContext(OrderContext),{getCustomerPaymentSources}=useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource,currentPaymentMethodType,setPaymentSource}=useContext(PaymentMethodContext),paymentResource=readonly?currentPaymentMethodType:payment==null?void 0:payment.payment_source_type;useEffect(()=>{var _a2;if((payment==null?void 0:payment.id)===currentPaymentMethodId&&paymentResource&&((_a2=order==null?void 0:order.payment_method)===null||_a2===void 0?void 0:_a2.payment_source_type)===paymentResource){const attributes=config&&paymentResource==="paypal_payments"?getPaypalConfig(paymentResource,config):{};(!paymentSource||paymentSource.type!==paymentResource)&&(setPaymentSource({paymentResource,order,attributes}),getCustomerPaymentSources&&getCustomerPaymentSources()),setLoading(!1)}return()=>{setLoading(!0)}},[(_b=order==null?void 0:order.payment_method)===null||_b===void 0?void 0:_b.payment_source_type,show,paymentSource]);const gatewayConfig=Object.assign({readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,onClickCustomerCards,loaderComponent,templateCustomerSaveToWallet},p);switch(paymentResource){case"stripe_payments":return _jsx(StripeGateway,Object.assign({},gatewayConfig,{children}),void 0);case"adyen_payments":return _jsx(AdyenGateway,Object.assign({},gatewayConfig,{children}),void 0);case"braintree_payments":return _jsx(BraintreeGateway,Object.assign({},gatewayConfig,{children}),void 0);case"wire_transfers":return _jsx(WireTransferGateway,Object.assign({},gatewayConfig,{children}),void 0);case"paypal_payments":return _jsx(PaypalGateway,Object.assign({},gatewayConfig,{children}),void 0);default:return null}};export default PaymentGateway;
+import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import OrderContext from"../context/OrderContext";import PaymentMethodChildrenContext from"../context/PaymentMethodChildrenContext";import PaymentMethodContext from"../context/PaymentMethodContext";import getPaypalConfig from"../utils/paypalPayment";import{useContext,useEffect,useState}from"react";import getLoaderComponent from"../utils/getLoaderComponent";import AdyenGateway from"./gateways/AdyenGateway";import StripeGateway from"./gateways/StripeGateway";import BraintreeGateway from"./gateways/BraintreeGateway";import PaypalGateway from"./gateways/PaypalGateway";import WireTransferGateway from"./gateways/WireTransferGateway";import CustomerContext from"../context/CustomerContext";import CheckoutComGateway from"./gateways/CheckoutComGateway";const PaymentGateway=_a=>{var _b,{readonly,showCard,handleEditClick,children,templateCustomerCards,templateCustomerSaveToWallet,onClickCustomerCards,show,loader="Loading..."}=_a,p=__rest(_a,["readonly","showCard","handleEditClick","children","templateCustomerCards","templateCustomerSaveToWallet","onClickCustomerCards","show","loader"]);const loaderComponent=getLoaderComponent(loader),[loading,setLoading]=useState(!0),{payment}=useContext(PaymentMethodChildrenContext),{order}=useContext(OrderContext),{getCustomerPaymentSources}=useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource,currentPaymentMethodType,setPaymentSource}=useContext(PaymentMethodContext),paymentResource=readonly?currentPaymentMethodType:payment==null?void 0:payment.payment_source_type;useEffect(()=>{var _a2;if((payment==null?void 0:payment.id)===currentPaymentMethodId&&paymentResource&&((_a2=order==null?void 0:order.payment_method)===null||_a2===void 0?void 0:_a2.payment_source_type)===paymentResource){const attributes=config&&paymentResource==="paypal_payments"?getPaypalConfig(paymentResource,config):{};(!paymentSource||paymentSource.type!==paymentResource)&&(setPaymentSource({paymentResource,order,attributes}),getCustomerPaymentSources&&getCustomerPaymentSources()),setLoading(!1)}return()=>{setLoading(!0)}},[(_b=order==null?void 0:order.payment_method)===null||_b===void 0?void 0:_b.payment_source_type,show,paymentSource]);const gatewayConfig=Object.assign({readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,onClickCustomerCards,loaderComponent,templateCustomerSaveToWallet},p);switch(paymentResource){case"stripe_payments":return _jsx(StripeGateway,Object.assign({},gatewayConfig,{children}),void 0);case"adyen_payments":return _jsx(AdyenGateway,Object.assign({},gatewayConfig,{children}),void 0);case"braintree_payments":return _jsx(BraintreeGateway,Object.assign({},gatewayConfig,{children}),void 0);case"wire_transfers":return _jsx(WireTransferGateway,Object.assign({},gatewayConfig,{children}),void 0);case"paypal_payments":return _jsx(PaypalGateway,Object.assign({},gatewayConfig,{children}),void 0);case"checkout_com_payments":return _jsx(CheckoutComGateway,Object.assign({},gatewayConfig,{children}),void 0);default:return null}};export default PaymentGateway;

package/lib/components/PaymentSource.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useState,useEffect}from"react";import PaymentMethodChildrenContext from"../context/PaymentMethodChildrenContext";import components from"../config/components";import PaymentMethodContext from"../context/PaymentMethodContext";import isEmpty from"lodash/isEmpty";import CustomerContext from"../context/CustomerContext";import PaymentGateway from"./PaymentGateway";const propTypes=components.PaymentSource.propTypes,displayName=components.PaymentSource.displayName,PaymentSource=props=>{const{readonly}=props,{payment}=useContext(PaymentMethodChildrenContext),{payments}=useContext(CustomerContext),{currentPaymentMethodId,paymentSource,destroyPaymentSource}=useContext(PaymentMethodContext),[show,setShow]=useState(!1),[showCard,setShowCard]=useState(!1);useEffect(()=>{var _a,_b,_c,_d,_e,_f,_g,_h;if(readonly)setShow(!0),setShowCard(!0);else if((payment==null?void 0:payment.id)===currentPaymentMethodId){setShow(!0);const card=((_a=paymentSource==null?void 0:paymentSource.options)===null||_a===void 0?void 0:_a.card)||((_b=paymentSource==null?void 0:paymentSource.payment_method)===null||_b===void 0?void 0:_b.card)||((_c=paymentSource==null?void 0:paymentSource.metadata)===null||_c===void 0?void 0:_c.card)||((_e=(_d=paymentSource==null?void 0:paymentSource.paymentRequestData)===null||_d===void 0?void 0:_d.paymentMethod)===null||_e===void 0?void 0:_e.brand)&&((_f=paymentSource==null?void 0:paymentSource.paymentResponse)===null||_f===void 0?void 0:_f.resultCode)==="Authorised"&&{brand:(_h=(_g=paymentSource==null?void 0:paymentSource.paymentRequestData)===null||_g===void 0?void 0:_g.paymentMethod)===null||_h===void 0?void 0:_h.brand};isEmpty(card)||setShowCard(!0)}else setShow(!1);return()=>{setShow(!1),setShowCard(!1)}},[currentPaymentMethodId,paymentSource,payments,payment,readonly]);const handleEditClick=e=>{e.stopPropagation(),paymentSource&&destroyPaymentSource({paymentSourceId:paymentSource==null?void 0:paymentSource.id,paymentResource:payment==null?void 0:payment.payment_source_type}),setShowCard(!showCard),setShow(!0)},gatewayProps=Object.assign(Object.assign({},props),{show,showCard,handleEditClick,readonly});return _jsx(PaymentGateway,Object.assign({},gatewayProps),void 0)};PaymentSource.propTypes=propTypes,PaymentSource.displayName=displayName;export default PaymentSource;
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useState,useEffect}from"react";import PaymentMethodChildrenContext from"../context/PaymentMethodChildrenContext";import components from"../config/components";import PaymentMethodContext from"../context/PaymentMethodContext";import CustomerContext from"../context/CustomerContext";import PaymentGateway from"./PaymentGateway";import getCardDetails from"../utils/getCardDetails";const propTypes=components.PaymentSource.propTypes,displayName=components.PaymentSource.displayName,PaymentSource=props=>{const{readonly}=props,{payment}=useContext(PaymentMethodChildrenContext),{payments}=useContext(CustomerContext),{currentPaymentMethodId,paymentSource,destroyPaymentSource}=useContext(PaymentMethodContext),[show,setShow]=useState(!1),[showCard,setShowCard]=useState(!1);useEffect(()=>(readonly?(setShow(!0),setShowCard(!0)):(payment==null?void 0:payment.id)===currentPaymentMethodId?(setShow(!0),getCardDetails({paymentType:payment==null?void 0:payment.payment_source_type,customerPayment:{payment_source:paymentSource}}).brand&&setShowCard(!0)):setShow(!1),()=>{setShow(!1),setShowCard(!1)}),[currentPaymentMethodId,paymentSource,payments,payment,readonly]);const handleEditClick=e=>{e.stopPropagation(),paymentSource&&destroyPaymentSource({paymentSourceId:paymentSource==null?void 0:paymentSource.id,paymentResource:payment==null?void 0:payment.payment_source_type}),setShowCard(!showCard),setShow(!0)},gatewayProps=Object.assign(Object.assign({},props),{show,showCard,handleEditClick,readonly});return _jsx(PaymentGateway,Object.assign({},gatewayProps),void 0)};PaymentSource.propTypes=propTypes,PaymentSource.displayName=displayName;export default PaymentSource;

package/lib/components/PaymentSourceBrandIcon.d.ts

@@ -1,8 +1,8 @@
-import { iconBrand } from '../context/PaymentSourceContext';
+import { IconBrand } from '../context/PaymentSourceContext';
 import { FunctionComponent } from 'react';
 import { FunctionChildren } from '../typings/index';
 declare type CustomComponent = FunctionChildren<Omit<Props & {
-    brand: iconBrand;
+    brand: IconBrand;
     defaultSrc: string;
     url: string;
 }, 'children'>>;

package/lib/components/PaymentSourceBrandName.d.ts

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

package/lib/components/PlaceOrderButton.js

@@ -1 +1 @@
-import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import Parent from"./utils/Parent";import components from"../config/components";import PlaceOrderContext from"../context/PlaceOrderContext";import isFunction from"lodash/isFunction";import PaymentMethodContext from"../context/PaymentMethodContext";import OrderContext from"../context/OrderContext";const propTypes=components.PlaceOrderButton.propTypes,defaultProps=components.PlaceOrderButton.defaultProps,displayName=components.PlaceOrderButton.displayName,PlaceOrderButton=props=>{var _a;const{children,label="Place order",disabled,onClick}=props,p=__rest(props,["children","label","disabled","onClick"]),{isPermitted,setPlaceOrder,options,paymentType}=useContext(PlaceOrderContext),[notPermitted,setNotPermitted]=useState(!0),[forceDisable,setForceDisable]=useState(disabled),{currentPaymentMethodRef,paymentSource,loading,currentPaymentMethodType}=useContext(PaymentMethodContext),{order}=useContext(OrderContext);useEffect(()=>{var _a2,_b,_c,_d,_e;return loading?setNotPermitted(loading):paymentType===currentPaymentMethodType?((order==null?void 0:order.total_amount_with_taxes_cents)===0||((_a2=currentPaymentMethodRef==null?void 0:currentPaymentMethodRef.current)===null||_a2===void 0?void 0:_a2.onsubmit)||((_c=(_b=paymentSource==null?void 0:paymentSource.metadata)===null||_b===void 0?void 0:_b.card)===null||_c===void 0?void 0:_c.id)||((_d=paymentSource==null?void 0:paymentSource.options)===null||_d===void 0?void 0:_d.id)||((_e=paymentSource==null?void 0:paymentSource.payment_response)===null||_e===void 0?void 0:_e.resultCode)==="Authorised")&&isPermitted&&setNotPermitted(!1):setNotPermitted(!0),()=>{setNotPermitted(!0)}},[isPermitted,paymentType,(_a=currentPaymentMethodRef==null?void 0:currentPaymentMethodRef.current)===null||_a===void 0?void 0:_a.onsubmit,paymentSource,loading,currentPaymentMethodType,order]),useEffect(()=>{paymentType==="paypal_payments"&&(options==null?void 0:options.paypalPayerId)&&(order==null?void 0:order.status)&&["draft","pending"].includes(order==null?void 0:order.status)&&handleClick()},[options==null?void 0:options.paypalPayerId]),useEffect(()=>{var _a2,_b;paymentType==="adyen_payments"&&((_a2=options==null?void 0:options.adyen)===null||_a2===void 0?void 0:_a2.MD)&&((_b=options==null?void 0:options.adyen)===null||_b===void 0?void 0:_b.PaRes)&&(order==null?void 0:order.status)&&["draft","pending"].includes(order==null?void 0:order.status)&&handleClick()},[options==null?void 0:options.adyen]);const handleClick=async()=>{var _a2,_b,_c,_d;let isValid=!0;setForceDisable(!0),((_a2=currentPaymentMethodRef==null?void 0:currentPaymentMethodRef.current)===null||_a2===void 0?void 0:_a2.onsubmit)&&(!(options==null?void 0:options.paypalPayerId)||!((_b=options==null?void 0:options.adyen)===null||_b===void 0?void 0:_b.MD))?isValid=await((_c=currentPaymentMethodRef.current)===null||_c===void 0?void 0:_c.onsubmit()):((_d=paymentSource==null?void 0:paymentSource.options)===null||_d===void 0?void 0:_d.id)&&(isValid=!0);const placed=isValid&&setPlaceOrder&&await setPlaceOrder({paymentSource});setForceDisable(!1),onClick&&placed&&onClick(placed)},disabledButton=disabled!==void 0?disabled:notPermitted,parentProps=Object.assign(Object.assign({},p),{label,disabled:disabledButton,handleClick});return children?_jsx(Parent,Object.assign({},parentProps,{children}),void 0):_jsx("button",Object.assign({type:"button",disabled:disabledButton||forceDisable,onClick:handleClick},p,{children:isFunction(label)?label():label}),void 0)};PlaceOrderButton.propTypes=propTypes,PlaceOrderButton.defaultProps=defaultProps,PlaceOrderButton.displayName=displayName;export default PlaceOrderButton;
+import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import Parent from"./utils/Parent";import components from"../config/components";import PlaceOrderContext from"../context/PlaceOrderContext";import isFunction from"lodash/isFunction";import PaymentMethodContext from"../context/PaymentMethodContext";import OrderContext from"../context/OrderContext";import getCardDetails from"../utils/getCardDetails";const propTypes=components.PlaceOrderButton.propTypes,defaultProps=components.PlaceOrderButton.defaultProps,displayName=components.PlaceOrderButton.displayName,PlaceOrderButton=props=>{var _a;const{children,label="Place order",disabled,onClick}=props,p=__rest(props,["children","label","disabled","onClick"]),{isPermitted,setPlaceOrder,options,paymentType}=useContext(PlaceOrderContext),[notPermitted,setNotPermitted]=useState(!0),[forceDisable,setForceDisable]=useState(disabled),{currentPaymentMethodRef,paymentSource,loading,currentPaymentMethodType}=useContext(PaymentMethodContext),{order}=useContext(OrderContext);useEffect(()=>{var _a2;if(loading)setNotPermitted(loading);else if(paymentType===currentPaymentMethodType&&paymentType){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType});((order==null?void 0:order.total_amount_with_taxes_cents)===0||((_a2=currentPaymentMethodRef==null?void 0:currentPaymentMethodRef.current)===null||_a2===void 0?void 0:_a2.onsubmit)||card.brand)&&isPermitted&&setNotPermitted(!1)}else setNotPermitted(!0);return()=>{setNotPermitted(!0)}},[isPermitted,paymentType,(_a=currentPaymentMethodRef==null?void 0:currentPaymentMethodRef.current)===null||_a===void 0?void 0:_a.onsubmit,paymentSource,loading,currentPaymentMethodType,order]),useEffect(()=>{paymentType==="paypal_payments"&&(options==null?void 0:options.paypalPayerId)&&(order==null?void 0:order.status)&&["draft","pending"].includes(order==null?void 0:order.status)&&handleClick()},[options==null?void 0:options.paypalPayerId]),useEffect(()=>{var _a2,_b;paymentType==="adyen_payments"&&((_a2=options==null?void 0:options.adyen)===null||_a2===void 0?void 0:_a2.MD)&&((_b=options==null?void 0:options.adyen)===null||_b===void 0?void 0:_b.PaRes)&&(order==null?void 0:order.status)&&["draft","pending"].includes(order==null?void 0:order.status)&&handleClick()},[options==null?void 0:options.adyen]),useEffect(()=>{var _a2;paymentType==="checkout_com_payments"&&((_a2=options==null?void 0:options.checkoutCom)===null||_a2===void 0?void 0:_a2.session_id)&&(order==null?void 0:order.status)&&["draft","pending"].includes(order==null?void 0:order.status)&&handleClick()},[options==null?void 0:options.checkoutCom]);const handleClick=async()=>{var _a2,_b,_c,_d;let isValid=!0;setForceDisable(!0);const card=paymentType&&getCardDetails({paymentType,customerPayment:{payment_source:paymentSource}});((_a2=currentPaymentMethodRef==null?void 0:currentPaymentMethodRef.current)===null||_a2===void 0?void 0:_a2.onsubmit)&&[!(options==null?void 0:options.paypalPayerId),!((_b=options==null?void 0:options.adyen)===null||_b===void 0?void 0:_b.MD),!((_c=options==null?void 0:options.checkoutCom)===null||_c===void 0?void 0:_c.session_id)].every(Boolean)?isValid=await((_d=currentPaymentMethodRef.current)===null||_d===void 0?void 0:_d.onsubmit()):(card==null?void 0:card.brand)&&(isValid=!0);const placed=isValid&&setPlaceOrder&&paymentSource&&await setPlaceOrder({paymentSource});setForceDisable(!1),onClick&&placed&&onClick(placed)},disabledButton=disabled!==void 0?disabled:notPermitted,parentProps=Object.assign(Object.assign({},p),{label,disabled:disabledButton,handleClick});return children?_jsx(Parent,Object.assign({},parentProps,{children}),void 0):_jsx("button",Object.assign({type:"button",disabled:disabledButton||forceDisable,onClick:handleClick},p,{children:isFunction(label)?label():label}),void 0)};PlaceOrderButton.propTypes=propTypes,PlaceOrderButton.defaultProps=defaultProps,PlaceOrderButton.displayName=displayName;export default PlaceOrderButton;

package/lib/components/gateways/CheckoutComGateway.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { GatewayBaseType } from '../PaymentGateway';
+declare type CheckoutComGateway = GatewayBaseType;
+export default function CheckoutComGateway(props: CheckoutComGateway): JSX.Element | null;
+export {};

package/lib/components/gateways/CheckoutComGateway.js

@@ -0,0 +1 @@
+import{__rest}from"tslib";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import CheckoutComPayment from"../CheckoutComPayment";import CustomerContext from"../../context/CustomerContext";import OrderContext from"../../context/OrderContext";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import PaymentMethodContext from"../../context/PaymentMethodContext";import PaymentSourceContext from"../../context/PaymentSourceContext";import{getPaymentConfig}from"../../reducers/PaymentMethodReducer";import isEmpty from"lodash/isEmpty";import{Fragment,useContext}from"react";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";import getCardDetails from"../../utils/getCardDetails";export default function CheckoutComGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,loaderComponent,templateCustomerSaveToWallet}=props,p=__rest(props,["readonly","showCard","handleEditClick","children","templateCustomerCards","show","loading","loaderComponent","templateCustomerSaveToWallet"]),{order}=useContext(OrderContext),{payment}=useContext(PaymentMethodChildrenContext),{payments,isGuest}=useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource}=useContext(PaymentMethodContext),paymentResource="checkout_com_payments",locale=order==null?void 0:order.language_code;if(!readonly&&(payment==null?void 0:payment.id)!==currentPaymentMethodId)return null;const publicKey=paymentSource==null?void 0:paymentSource.public_key,paymentConfig=config?getPaymentConfig(paymentResource,config):{},customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>{var _a;return((_a=customerPayment.payment_source)===null||_a===void 0?void 0:_a.type)===paymentResource}):[];if(readonly||showCard){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType:paymentResource}),value=Object.assign(Object.assign({},card),{showCard,handleEditClick,readonly});return card.brand?_jsx(PaymentSourceContext.Provider,Object.assign({value},{children}),void 0):null}return!isGuest&&templateCustomerCards?publicKey&&!loading?_jsxs(Fragment,{children:[isEmpty(customerPayments)?null:_jsx("div",Object.assign({className:p.className},{children:_jsx(PaymentCardsTemplate,Object.assign({},{paymentResource,customerPayments},{children:templateCustomerCards}),void 0)}),void 0),_jsx(CheckoutComPayment,Object.assign({show,templateCustomerSaveToWallet,publicKey,locale},paymentConfig),void 0)]},void 0):loaderComponent:publicKey&&!loading?_jsx(CheckoutComPayment,Object.assign({show,publicKey,locale},paymentConfig),void 0):loaderComponent}

package/lib/components/utils/PaymentCardsTemplate.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import { PaymentResource, PaymentSourceType } from '../../reducers/PaymentMethodReducer';
-import PaymentSourceContext, { iconBrand } from '../../context/PaymentSourceContext';
+import PaymentSourceContext, { IconBrand } from '../../context/PaymentSourceContext';
 import { FunctionChildren } from '../../typings/index';
 declare type ChildrenProps = Pick<Props, 'customerPayments'> & {
     PaymentSourceProvider: typeof PaymentSourceContext.Provider;
 };
 declare type CustomerPayment = PaymentSourceType & {
     card?: {
-        brand?: iconBrand;
+        brand?: IconBrand;
         last4?: string;
     };
     handleClick?: () => void;

package/lib/components/utils/PaymentCardsTemplate.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import Parent from"../utils/Parent";import{useContext}from"react";import PaymentMethodContext from"../../context/PaymentMethodContext";import PaymentSourceContext from"../../context/PaymentSourceContext";export default function PaymentCardsTemplate({customerPayments,children,paymentResource}){const{setPaymentSource}=useContext(PaymentMethodContext),value={customerPayments:customerPayments.map(customerPayment=>{var _a,_b,_c,_d,_e,_f,_g;const attributes=customerPayment,card=((_a=customerPayment==null?void 0:customerPayment.payment_source.options)===null||_a===void 0?void 0:_a.card)||((_c=(_b=customerPayment==null?void 0:customerPayment.payment_source)===null||_b===void 0?void 0:_b.payment_request_data)===null||_c===void 0?void 0:_c.paymentMethod)||((_e=(_d=customerPayment==null?void 0:customerPayment.payment_source)===null||_d===void 0?void 0:_d.payment_method)===null||_e===void 0?void 0:_e.card)||((_g=(_f=customerPayment==null?void 0:customerPayment.payment_source)===null||_f===void 0?void 0:_f.metadata)===null||_g===void 0?void 0:_g.card),handleClick=async e=>{e.stopPropagation(),await setPaymentSource({paymentResource,customerPaymentSourceId:customerPayment.id})};return Object.assign(Object.assign({},attributes),{card,handleClick})}),PaymentSourceProvider:PaymentSourceContext.Provider};return _jsx(Parent,Object.assign({},value,{children}),void 0)}
+import{jsx as _jsx}from"react/jsx-runtime";import Parent from"../utils/Parent";import{useContext}from"react";import PaymentMethodContext from"../../context/PaymentMethodContext";import PaymentSourceContext from"../../context/PaymentSourceContext";import getCardDetails from"../../utils/getCardDetails";export default function PaymentCardsTemplate({customerPayments,children,paymentResource}){const{setPaymentSource}=useContext(PaymentMethodContext),value={customerPayments:customerPayments.map(customerPayment=>{const attributes=customerPayment,card=getCardDetails({customerPayment,paymentType:paymentResource}),handleClick=async e=>{e.stopPropagation(),await setPaymentSource({paymentResource,customerPaymentSourceId:customerPayment.id})};return Object.assign(Object.assign({},attributes),{card,handleClick})}),PaymentSourceProvider:PaymentSourceContext.Provider};return _jsx(Parent,Object.assign({},value,{children}),void 0)}

package/lib/context/OrderContext.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import { AddToCart, OrderState, CreateOrder, SetGiftCardOrCouponCode, RemoveGiftCardOrCouponCode, SaveAddressToCustomerAddressBook, setOrderErrors, addResourceToInclude, updateOrder, getOrderContext } from '../reducers/OrderReducer';
+import { AddToCart, OrderState, CreateOrder, SetGiftCardOrCouponCode, RemoveGiftCardOrCouponCode, SaveAddressToCustomerAddressBook, addResourceToInclude, updateOrder, getOrderContext } from '../reducers/OrderReducer';
 declare type DefaultContext = {
     createOrder: CreateOrder;
     addToCart: AddToCart;
-    setOrderErrors: typeof setOrderErrors;
+    setOrderErrors: (errors: unknown) => void;
     setGiftCardOrCouponCode: SetGiftCardOrCouponCode;
     removeGiftCardOrCouponCode: RemoveGiftCardOrCouponCode;
     saveAddressToCustomerAddressBook: SaveAddressToCustomerAddressBook;
@@ -14,12 +14,12 @@ declare type DefaultContext = {
 export declare const defaultOrderContext: {
     addToCart: AddToCart;
     createOrder: CreateOrder;
-    setOrderErrors: typeof setOrderErrors;
+    setOrderErrors: () => void;
     setGiftCardOrCouponCode: SetGiftCardOrCouponCode;
     removeGiftCardOrCouponCode: RemoveGiftCardOrCouponCode;
     saveAddressToCustomerAddressBook: SaveAddressToCustomerAddressBook;
     addResourceToInclude: typeof addResourceToInclude;
-    getOrder: (_id: string) => Promise<void>;
+    getOrder: () => Promise<void>;
     updateOrder: typeof updateOrder;
 };
 declare const OrderContext: import("react").Context<DefaultContext>;

package/lib/context/OrderContext.js

@@ -1 +1 @@
-import{createContext}from"react";import{addToCart,setOrderErrors,createOrder,setGiftCardOrCouponCode,removeGiftCardOrCouponCode,saveAddressToCustomerAddressBook,addResourceToInclude,updateOrder}from"../reducers/OrderReducer";export const defaultOrderContext={addToCart,createOrder,setOrderErrors,setGiftCardOrCouponCode,removeGiftCardOrCouponCode,saveAddressToCustomerAddressBook,addResourceToInclude,getOrder:async _id=>{},updateOrder};const OrderContext=createContext(defaultOrderContext);export default OrderContext;
+import{createContext}from"react";import{addToCart,createOrder,setGiftCardOrCouponCode,removeGiftCardOrCouponCode,saveAddressToCustomerAddressBook,addResourceToInclude,updateOrder}from"../reducers/OrderReducer";export const defaultOrderContext={addToCart,createOrder,setOrderErrors:()=>{},setGiftCardOrCouponCode,removeGiftCardOrCouponCode,saveAddressToCustomerAddressBook,addResourceToInclude,getOrder:async()=>{},updateOrder};const OrderContext=createContext(defaultOrderContext);export default OrderContext;

package/lib/context/PaymentSourceContext.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare type iconBrand = 'visa' | 'credit-card' | 'amex' | 'mastercard' | 'jcb' | 'wire-transfer' | 'maestro' | 'cirrus' | 'paypal';
+export declare type IconBrand = 'visa' | 'credit-card' | 'amex' | 'mastercard' | 'jcb' | 'wire-transfer' | 'maestro' | 'cirrus' | 'paypal';
 declare type DefaultContext = {
-    brand?: iconBrand;
-    exp_month?: number;
-    exp_year?: number;
+    brand?: IconBrand | string;
+    exp_month?: number | string;
+    exp_year?: number | string;
     last4?: string;
     showCard?: boolean;
     readonly?: boolean;

package/lib/context/PlaceOrderContext.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-import { PlaceOrderState, SetPlaceOrderErrors } from '../reducers/PlaceOrderReducer';
+import { PlaceOrderOptions, PlaceOrderState, SetPlaceOrderErrors } from '../reducers/PlaceOrderReducer';
+import { PaymentSourceType } from '../reducers/PaymentMethodReducer';
 declare type DefaultContext = {
     setPlaceOrderErrors?: SetPlaceOrderErrors;
     setPlaceOrder?: ({ paymentSource, }: {
-        paymentSource: Record<string, string>;
+        paymentSource: PaymentSourceType;
+        options?: PlaceOrderOptions;
     }) => Promise<{
         placed: boolean;
     }>;

package/lib/reducers/PaymentMethodReducer.d.ts

@@ -8,7 +8,43 @@ import { getOrderContext, updateOrder } from './OrderReducer';
 import { BaseError } from '../typings/errors';
 import { Order, PaymentMethod, StripePayment, WireTransfer, AdyenPayment, BraintreePayment, CheckoutComPayment, ExternalPayment, PaypalPayment } from '@commercelayer/sdk';
 import { Dispatch, MutableRefObject } from 'react';
+import { CheckoutComConfig } from '../components/CheckoutComPayment';
 export declare type PaymentSourceType = AdyenPayment | BraintreePayment | CheckoutComPayment | ExternalPayment | PaypalPayment | StripePayment | WireTransfer;
+declare type Card = {
+    brand: string;
+    last4: string;
+    exp_year: number;
+    exp_month: number;
+};
+export declare type PaymentSourceObject = {
+    adyen_payments: AdyenPayment & {
+        paymentRequestData?: {
+            paymentMethod?: Card;
+        };
+    };
+    braintree_payments: BraintreePayment & {
+        options?: {
+            card: Card;
+        };
+    };
+    external_payments: ExternalPayment;
+    paypal_payments: PaypalPayment;
+    stripe_payments: StripePayment & {
+        options?: {
+            card: Card;
+        };
+    };
+    wire_transfers: WireTransfer;
+    checkout_com_payments: CheckoutComPayment & {
+        payment_response: {
+            source?: Pick<Card, 'last4'> & {
+                scheme: string;
+                expiry_year: number;
+                expiry_month: number;
+            };
+        };
+    };
+};
 export declare type PaymentMethodActionType = 'setErrors' | 'setPaymentMethods' | 'setPaymentMethodConfig' | 'setPaymentSource' | 'setPaymentRef' | 'setLoading';
 export declare type PaymentRef = MutableRefObject<null | HTMLFormElement>;
 export interface PaymentMethodActionPayload {
@@ -45,9 +81,9 @@ declare type GetPaymentMethods = (args: {
     dispatch: Dispatch<PaymentMethodAction>;
 }) => Promise<void>;
 export declare const getPaymentMethods: GetPaymentMethods;
-export declare type PaymentResource = 'adyen_payments' | 'braintree_payments' | 'external_payments' | 'paypal_payments' | 'stripe_payments' | 'wire_transfers';
-export declare type PaymentResourceKey = 'braintreePayment' | 'stripePayment' | 'wireTransfer' | 'paypalPayment' | 'adyenPayment';
-export declare type SDKPaymentResource = 'AdyenPayment' | 'BraintreePayment' | 'ExternalPayment' | 'PaypalPayment' | 'StripePayment' | 'WireTransfer';
+export declare type PaymentResource = keyof PaymentSourceObject;
+export declare type PaymentResourceKey = 'braintreePayment' | 'stripePayment' | 'wireTransfer' | 'paypalPayment' | 'adyenPayment' | 'checkoutComPayment';
+export declare type SDKPaymentResource = 'AdyenPayment' | 'BraintreePayment' | 'ExternalPayment' | 'PaypalPayment' | 'StripePayment' | 'WireTransfer' | 'CheckoutComPayment';
 export declare type SetPaymentMethod = (args: {
     config?: CommerceLayerConfig;
     dispatch?: Dispatch<PaymentMethodAction>;
@@ -69,7 +105,7 @@ export declare type SetPaymentSource = (args: {
     config?: CommerceLayerConfig;
     dispatch?: Dispatch<PaymentMethodAction>;
     getOrder?: getOrderContext;
-    attributes?: Record<string, string | Record<string, string | number | undefined | Record<string, string>>>;
+    attributes?: Record<string, unknown>;
     order?: Order;
     paymentResource: PaymentResource;
     paymentSourceId?: string;
@@ -97,6 +133,7 @@ export declare type PaymentMethodConfig = {
     wireTransfer?: Partial<WireTransferConfig>;
     paypalPayment?: PaypalConfig;
     adyenPayment?: AdyenPaymentConfig;
+    checkoutComPayment?: CheckoutComConfig;
 };
 declare type SetPaymentMethodConfig = (config: PaymentMethodConfig, dispatch: Dispatch<PaymentMethodAction>) => void;
 export declare const setPaymentMethodConfig: SetPaymentMethodConfig;

package/lib/reducers/PlaceOrderReducer.d.ts

@@ -11,6 +11,9 @@ export declare type PlaceOrderOptions = {
         MD: string;
         PaRes: string;
     };
+    checkoutCom?: {
+        session_id: string;
+    };
 };
 export interface PlaceOrderActionPayload {
     errors: BaseError[];
@@ -42,8 +45,10 @@ export declare type SetPlaceOrder = (args: {
     config?: CommerceLayerConfig;
     order?: Order;
     state?: PlaceOrderState;
-    setOrderErrors?: (collection: any) => void;
-    paymentSource?: Record<string, string>;
+    setOrderErrors?: (collection: unknown) => void;
+    paymentSource?: PaymentSourceType & {
+        approval_url?: string;
+    };
 }) => Promise<{
     placed: boolean;
 }>;

package/lib/reducers/PlaceOrderReducer.js

@@ -1 +1 @@
-import baseReducer from"../utils/baseReducer";import isEmpty from"lodash/isEmpty";import{shipmentsFilled}from"../utils/shipments";import{saveBillingAddress,saveShippingAddress,saveToWallet}from"../utils/customerOrderOptions";import getSdk from"../utils/getSdk";import getErrors from"../utils/getErrors";export const placeOrderInitialState={errors:[],isPermitted:!1},setPlaceOrderErrors=(errors,dispatch)=>{dispatch&&dispatch({type:"setErrors",payload:{errors}})},placeOrderPermitted=async({config,order,dispatch,options})=>{var _a;if(order&&config){let isPermitted=!0;order.privacy_url&&order.terms_url&&(isPermitted=localStorage.getItem("privacy-terms")==="true");const billingAddress=order.billing_address;isEmpty(billingAddress)&&(isPermitted=!1);const shippingAddress=order.shipping_address;isEmpty(shippingAddress)&&(isPermitted=!1);const shipments=order.shipments,shipment=shipments&&shipmentsFilled(shipments);!isEmpty(shipments)&&!shipment&&(isPermitted=!1);const paymentMethod=order.payment_method,paymentSource=order.payment_source;order.total_amount_with_taxes_cents!==0&&isEmpty(paymentMethod==null?void 0:paymentMethod.id)&&(isPermitted=!1),dispatch({type:"setPlaceOrderPermitted",payload:{isPermitted,paymentType:paymentMethod==null?void 0:paymentMethod.payment_source_type,paymentSecret:paymentSource==null?void 0:paymentSource.client_secret,paymentId:(_a=paymentSource==null?void 0:paymentSource.options)===null||_a===void 0?void 0:_a.id,paymentSource,options}})}},setPlaceOrder=async({state,order,config,setOrderErrors,paymentSource})=>{const response={placed:!1};try{if(state&&order&&config){const sdk=getSdk(config),{options,paymentType}=state;if(paymentType==="paypal_payments"&&paymentSource){if(!(options==null?void 0:options.paypalPayerId)&&(paymentSource==null?void 0:paymentSource.approval_url))return window.location.href=paymentSource==null?void 0:paymentSource.approval_url,response;await sdk.paypal_payments.update({id:paymentSource.id,paypal_payer_id:options==null?void 0:options.paypalPayerId})}const updateAttributes={id:order.id,_place:!0};switch(saveBillingAddress()&&await sdk.orders.update({id:order.id,_save_billing_address_to_customer_address_book:!0}),saveShippingAddress()&&await sdk.orders.update({id:order.id,_save_shipping_address_to_customer_address_book:!0}),paymentType){case"braintree_payments":return saveToWallet()&&await sdk.orders.update({id:order.id,_save_payment_source_to_customer_wallet:!0}),await sdk.orders.update(updateAttributes),setOrderErrors&&setOrderErrors([]),{placed:!0};default:return await sdk.orders.update(updateAttributes),saveToWallet()&&await sdk.orders.update({id:order.id,_save_payment_source_to_customer_wallet:!0}),setOrderErrors&&setOrderErrors([]),{placed:!0}}}return response}catch(error){const errors=getErrors(error,"orders");return setOrderErrors&&setOrderErrors(errors),Object.assign(Object.assign({},response),{errors})}};const type=["setErrors","setPlaceOrderPermitted"],placeOrderReducer=(state,reducer)=>baseReducer(state,reducer,type);export default placeOrderReducer;
+import baseReducer from"../utils/baseReducer";import isEmpty from"lodash/isEmpty";import{shipmentsFilled}from"../utils/shipments";import{saveBillingAddress,saveShippingAddress,saveToWallet}from"../utils/customerOrderOptions";import getSdk from"../utils/getSdk";import getErrors from"../utils/getErrors";export const placeOrderInitialState={errors:[],isPermitted:!1},setPlaceOrderErrors=(errors,dispatch)=>{dispatch&&dispatch({type:"setErrors",payload:{errors}})},placeOrderPermitted=async({config,order,dispatch,options})=>{var _a;if(order&&config){let isPermitted=!0;order.privacy_url&&order.terms_url&&(isPermitted=localStorage.getItem("privacy-terms")==="true");const billingAddress=order.billing_address;isEmpty(billingAddress)&&(isPermitted=!1);const shippingAddress=order.shipping_address;isEmpty(shippingAddress)&&(isPermitted=!1);const shipments=order.shipments,shipment=shipments&&shipmentsFilled(shipments);!isEmpty(shipments)&&!shipment&&(isPermitted=!1);const paymentMethod=order.payment_method,paymentSource=order.payment_source;order.total_amount_with_taxes_cents!==0&&isEmpty(paymentMethod==null?void 0:paymentMethod.id)&&(isPermitted=!1),dispatch({type:"setPlaceOrderPermitted",payload:{isPermitted,paymentType:paymentMethod==null?void 0:paymentMethod.payment_source_type,paymentSecret:paymentSource==null?void 0:paymentSource.client_secret,paymentId:(_a=paymentSource==null?void 0:paymentSource.options)===null||_a===void 0?void 0:_a.id,paymentSource,options}})}},setPlaceOrder=async({state,order,config,setOrderErrors,paymentSource})=>{var _a,_b;const response={placed:!1};try{if(state&&order&&config){const sdk=getSdk(config),{options,paymentType}=state;if(paymentType==="paypal_payments"&&paymentSource){if(!(options==null?void 0:options.paypalPayerId)&&(paymentSource==null?void 0:paymentSource.approval_url))return window.location.href=paymentSource==null?void 0:paymentSource.approval_url,response;await sdk[paymentType].update({id:paymentSource.id,paypal_payer_id:options==null?void 0:options.paypalPayerId})}paymentType==="checkout_com_payments"&&paymentSource&&((_a=options==null?void 0:options.checkoutCom)===null||_a===void 0?void 0:_a.session_id)&&await sdk[paymentType].update({id:paymentSource.id,_details:!0,session_id:(_b=options==null?void 0:options.checkoutCom)===null||_b===void 0?void 0:_b.session_id});const updateAttributes={id:order.id,_place:!0};switch(saveBillingAddress()&&await sdk.orders.update({id:order.id,_save_billing_address_to_customer_address_book:!0}),saveShippingAddress()&&await sdk.orders.update({id:order.id,_save_shipping_address_to_customer_address_book:!0}),paymentType){case"braintree_payments":return saveToWallet()&&await sdk.orders.update({id:order.id,_save_payment_source_to_customer_wallet:!0}),await sdk.orders.update(updateAttributes),setOrderErrors&&setOrderErrors([]),{placed:!0};default:return await sdk.orders.update(updateAttributes),saveToWallet()&&await sdk.orders.update({id:order.id,_save_payment_source_to_customer_wallet:!0}),setOrderErrors&&setOrderErrors([]),{placed:!0}}}return response}catch(error){const errors=getErrors(error,"orders");return setOrderErrors&&setOrderErrors(errors),Object.assign(Object.assign({},response),{errors})}};const type=["setErrors","setPlaceOrderPermitted"],placeOrderReducer=(state,reducer)=>baseReducer(state,reducer,type);export default placeOrderReducer;

package/lib/utils/getCardDetails.d.ts

@@ -0,0 +1,15 @@
+import { IconBrand } from '../context/PaymentSourceContext';
+import { PaymentResource } from '../reducers/PaymentMethodReducer';
+import { CustomerPaymentSource } from '@commercelayer/sdk';
+declare type CardDetails = {
+    brand: IconBrand | string;
+    last4: string;
+    exp_month: number | string;
+    exp_year: number | string;
+};
+declare type Args = {
+    paymentType: PaymentResource;
+    customerPayment: Partial<CustomerPaymentSource>;
+};
+export default function getCardDetails({ paymentType, customerPayment, }: Args): CardDetails;
+export {};

package/lib/utils/getCardDetails.js

@@ -0,0 +1 @@
+export default function getCardDetails({paymentType,customerPayment}){var _a,_b,_c,_d;switch(paymentType){case"checkout_com_payments":{const ps=customerPayment.payment_source,source=(_a=ps==null?void 0:ps.payment_response)===null||_a===void 0?void 0:_a.source;if(source)return{brand:source.scheme.toLowerCase(),exp_month:source.expiry_month,exp_year:source.expiry_year,last4:source.last4};break}case"stripe_payments":case"braintree_payments":{const ps=customerPayment.payment_source,source=(_b=ps==null?void 0:ps.options)===null||_b===void 0?void 0:_b.card;if(source)return Object.assign({},source);break}case"adyen_payments":{const ps=customerPayment.payment_source,source=(_c=ps==null?void 0:ps.paymentRequestData)===null||_c===void 0?void 0:_c.paymentMethod;if(source)return Object.assign({},source);break}default:{const ps=customerPayment.payment_source,source=(_d=ps==null?void 0:ps.metadata)===null||_d===void 0?void 0:_d.card;if(source)return Object.assign({},source);break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****"}}

package/lib/utils/hooks/useExternalScript.d.ts

@@ -0,0 +1 @@
+export default function useExternalScript(url: string): boolean;

package/lib/utils/hooks/useExternalScript.js

@@ -0,0 +1 @@
+import{useEffect,useState}from"react";export default function useExternalScript(url){const[loaded,setLoaded]=useState(!1);return useEffect(()=>{const script=document.createElement("script");return script.src=url,script.async=!0,document.body.appendChild(script),script.onload=()=>{setLoaded(!0)},()=>{document.body.removeChild(script),setLoaded(!1)}},[url]),loaded}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "3.2.4",
+  "version": "3.3.0",
   "description": "The Official Commerce Layer React Components",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -84,12 +84,13 @@
     "@ac-dev/countries-service": "^1.1.3",
     "@ac-dev/states-service": "^1.0.3",
     "@adyen/adyen-web": "^5.7.0",
-    "@commercelayer/js-auth": "^2.2.9",
+    "@commercelayer/js-auth": "^3.0.0",
     "@commercelayer/sdk": "^3.5.0",
     "@stripe/react-stripe-js": "^1.7.0",
     "@stripe/stripe-js": "^1.22.0",
     "axios": "^0.25.0",
     "braintree-web": "^3.85.2",
+    "frames-react": "^1.0.3",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
@@ -114,7 +115,7 @@
     "@types/braintree-web": "^3.75.17",
     "@types/jest": "^27.4.0",
     "@types/lodash": "^4.14.178",
-    "@types/node": "^17.0.16",
+    "@types/node": "^17.0.17",
     "@types/prop-types": "^15.7.4",
     "@types/react": "^17.0.39",
     "@types/react-test-renderer": "^17.0.1",
@@ -146,10 +147,10 @@
     "react-test-renderer": "^17.0.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "tailwindcss": "^3.0.19",
+    "tailwindcss": "^3.0.21",
     "ts-jest": "^27.1.3",
     "ts-loader": "^9.2.6",
-    "tsc-alias": "^1.5.0",
+    "tsc-alias": "^1.6.0",
     "tsconfig-paths-jest": "^0.0.1",
     "ttypescript": "^1.5.13",
     "typescript": "^4.5.5",