@commercelayer/react-components 3.15.0-beta.1 → 3.15.0-beta.10

package/lib/components/AdyenPayment.d.ts

@@ -6,13 +6,43 @@ declare type Styles = Partial<{
     placeholder: CSSProperties;
     validated: CSSProperties;
 }>;
+declare type PaypalStyle = Partial<{
+    /**
+     * @see {@link https://developer.paypal.com/docs/checkout/integration-features/customize-button/#color}
+     */
+    color: 'gold' | 'blue' | 'silver' | 'white' | 'black';
+    /**
+     * @see {@link https://developer.paypal.com/docs/checkout/integration-features/customize-button/#shape}
+     */
+    shape: 'rect' | 'pill';
+    /**
+     * @see {@link https://developer.paypal.com/docs/checkout/integration-features/customize-button/#height}
+     */
+    height: string | number;
+    /**
+     * @see {@link https://developer.paypal.com/docs/checkout/integration-features/customize-button/#label}
+     */
+    label: 'paypal' | 'checkout' | 'buynow' | 'pay';
+    /**
+     * @see {@link https://developer.paypal.com/docs/checkout/integration-features/customize-button/#tagline}
+     */
+    tagline: boolean;
+    /**
+     * @see {@link https://developer.paypal.com/docs/checkout/integration-features/customize-button/#layout}
+     */
+    layout: 'vertical' | 'horizontal';
+}>;
+interface PaymentMethodsStyle {
+    card?: Styles;
+    paypal?: PaypalStyle;
+}
 export declare type AdyenPaymentConfig = {
     cardContainerClassName?: string;
     threeDSecureContainerClassName?: string;
     placeOrderCallback?: (response: {
         placed: boolean;
     }) => void;
-    styles?: Styles;
+    styles?: PaymentMethodsStyle;
 };
 declare type Props = {
     clientKey?: string;

package/lib/components/AdyenPayment.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import{setCustomerOrderParam}from"../utils/localStorage";import Parent from"./utils/Parent";import getBrowserInfo from"../utils/browserInfo";import PlaceOrderContext from"../context/PlaceOrderContext";import OrderContext from"../context/OrderContext";const threeDSConfiguration={challengeWindowSize:"05"},defaultConfig={};export function AdyenPayment({clientKey,config,templateCustomerSaveToWallet,environment="test",locale="en_US"}){const{cardContainerClassName,threeDSecureContainerClassName,placeOrderCallback,styles}={...defaultConfig,...config},[loadAdyen,setLoadAdyen]=useState(!1),[checkout,setCheckout]=useState(null),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),{setPlaceOrder}=useContext(PlaceOrderContext),ref=useRef(null),handleSubmit=async(e,component)=>{const savePaymentSourceToCustomerWallet=e?.elements?.save_payment_source_to_customer_wallet?.checked;return savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),component&&component.submit&&component.submit(),!1},handleChange=async(state,checkout2)=>{if(state.isValid){ref.current&&(ref.current.onsubmit=()=>handleSubmit(ref.current,checkout2),setPaymentRef({ref}));const browserInfo=getBrowserInfo(),attributes={payment_request_data:{payment_method:state.data.paymentMethod,shopperInteraction:"Ecommerce",recurringProcessingModel:"CardOnFile",origin:window.location.origin,return_url:window.location.href,redirect_from_issuer_method:"GET",browser_info:{acceptHeader:"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",...browserInfo}}};paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"adyen_payments",attributes})}},handleOnAdditionalDetails=async(state,component)=>{const attributes={payment_request_details:state.data,_details:1};try{const pSource=paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"adyen_payments",attributes}),adyenAction=pSource?.payment_response?.action,resultCode=pSource?.payment_response?.resultCode;if(adyenAction&&component&&component.handleAction(adyenAction),["Authorised","Pending","Received"].includes(resultCode)){const{placed}=setPlaceOrder&&await setPlaceOrder({paymentSource:pSource})||{placed:!1};return placed&&placeOrderCallback&&placeOrderCallback({placed}),!0}return!1}catch(error){return console.error("Adyen additional details error:",error),!1}},onSubmit=async(state,component)=>{const attributes={payment_request_data:{...state.data,payment_method:state.data.paymentMethod,return_url:window.location.href},_authorize:1};delete attributes.payment_request_data.paymentMethod;try{const action=(await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments",attributes}))?.payment_response?.action;if(component&&action)return component.handleAction(action),!1;if(paymentSource?.payment_response?.errorType){const message=paymentSource?.payment_response?.message;setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message}])}return!1}catch(error){return setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1}};return useEffect(()=>{const paymentMethodsResponse=paymentSource?.payment_methods?.paymentMethods?paymentSource?.payment_methods.paymentMethods:[],[firstPaymentMethod]=paymentMethodsResponse,isOnlyCard=paymentMethodsResponse?.length===1&&firstPaymentMethod.type==="scheme";paymentMethodsResponse.length===0&&console.error("Payment methods are not available. Please, check your Adyen configuration.");const options={locale,environment,clientKey,amount:{currency:order?.currency_code||"",value:order?.total_amount_with_taxes_cents||0},countryCode:order?.country_code||"",paymentMethodsResponse:{paymentMethods:paymentMethodsResponse},showPayButton:!1,paymentMethodsConfiguration:{threeDS2:threeDSConfiguration,paypal:{showPayButton:!0},card:{holderNameRequired:!1}},onAdditionalDetails:handleOnAdditionalDetails,onChange:handleChange,onSubmit};return!ref&&clientKey&&setCustomerOrderParam("_save_payment_source_to_customer_wallet","false"),clientKey&&!loadAdyen&&window&&!checkout&&import("@adyen/adyen-web").then(({default:AdyenCheckout})=>{const type=isOnlyCard?"card":"dropin";AdyenCheckout(options).then(adyenCheckout=>{const component=adyenCheckout.create(type,{styles,onSelect:component2=>{const id=component2._id;id.search("scheme")===-1&&ref.current&&(id.search("paypal")===-1?(ref.current.onsubmit=null,window.alert("This payment method is not supported yet. Please, try another one.")):ref.current.onsubmit=null,setPaymentRef({ref}))}}).mount("#adyen-dropin");component&&(setCheckout(component),setLoadAdyen(!0))})}),()=>{setPaymentRef({ref:{current:null}}),setLoadAdyen(!1)}},[clientKey,ref]),!clientKey&&!loadAdyen&&!checkout?null:_jsxs("form",{ref,onSubmit:e=>handleSubmit(e,checkout),children:[_jsx("div",{className:cardContainerClassName,id:"adyen-dropin"}),templateCustomerSaveToWallet&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet}),_jsx("div",{className:threeDSecureContainerClassName,id:"adyen-action"})]})}export default AdyenPayment;
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import{setCustomerOrderParam}from"../utils/localStorage";import Parent from"./utils/Parent";import getBrowserInfo from"../utils/browserInfo";import PlaceOrderContext from"../context/PlaceOrderContext";import OrderContext from"../context/OrderContext";const threeDSConfiguration={challengeWindowSize:"05"},defaultConfig={};export function AdyenPayment({clientKey,config,templateCustomerSaveToWallet,environment="test",locale="en_US"}){const{cardContainerClassName,threeDSecureContainerClassName,styles}={...defaultConfig,...config},[loadAdyen,setLoadAdyen]=useState(!1),[checkout,setCheckout]=useState(null),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),{placeOrderButtonRef}=useContext(PlaceOrderContext),ref=useRef(null),handleSubmit=async(e,component)=>{const savePaymentSourceToCustomerWallet=e?.elements?.save_payment_source_to_customer_wallet?.checked;return savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),component&&component.submit&&component.submit(),!1},handleChange=async(state,checkout2)=>{if(state.isValid){ref.current&&(ref.current.onsubmit=()=>handleSubmit(ref.current,checkout2),setPaymentRef({ref}));const browserInfo=getBrowserInfo(),attributes={payment_request_data:{payment_method:state.data.paymentMethod,shopperInteraction:"Ecommerce",recurringProcessingModel:"CardOnFile",origin:window.location.origin,return_url:window.location.href,redirect_from_issuer_method:"GET",browser_info:{acceptHeader:"text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",...browserInfo}}};paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"adyen_payments",attributes})}},handleOnAdditionalDetails=async(state,component)=>{const attributes={payment_request_details:state.data,_details:1};try{const pSource=paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"adyen_payments",attributes}),adyenAction=pSource?.payment_response?.action,resultCode=pSource?.payment_response?.resultCode;if(adyenAction&&component)return component.handleAction(adyenAction),!1;if(["Authorised","Pending","Received"].includes(resultCode))return placeOrderButtonRef!==null&&placeOrderButtonRef?.current!=null&&(placeOrderButtonRef.current.disabled===!0&&(placeOrderButtonRef.current.disabled=!1),placeOrderButtonRef.current?.click()),!0;if(["Cancelled"].includes(resultCode)){const message=pSource?.payment_response?.refusalReason;setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message}])}return!1}catch(error){return console.error("Adyen additional details error:",error),!1}},onSubmit=async(state,component)=>{if((await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments"}))?.payment_response?.resultCode==="Authorised")return!0;const attributes={payment_request_data:{...state.data,payment_method:state.data.paymentMethod,return_url:window.location.href},_authorize:1};delete attributes.payment_request_data.paymentMethod;try{const res=await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments",attributes}),action=res?.payment_response?.action;if(component&&action)return component.handleAction(action),!1;const resultCode=res?.payment_response?.resultCode;if(["Authorised","Pending","Received"].includes(resultCode))return placeOrderButtonRef!==null&&placeOrderButtonRef?.current!=null&&(placeOrderButtonRef.current.disabled===!0&&(placeOrderButtonRef.current.disabled=!1),placeOrderButtonRef.current?.click()),!0;if(["Cancelled"].includes(resultCode)){const message=res?.payment_response?.refusalReason;setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message}])}if(res?.payment_response?.errorType)if(res?.payment_response?.errorCode==="14_006")onSubmit(state,component);else{const message=res?.payment_response?.message;setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message}])}return!1}catch(error){return setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1}};return useEffect(()=>{const paymentMethodsResponse=paymentSource?.payment_methods?.paymentMethods?paymentSource?.payment_methods.paymentMethods:[],[firstPaymentMethod]=paymentMethodsResponse,isOnlyCard=paymentMethodsResponse?.length===1&&firstPaymentMethod.type==="scheme";paymentMethodsResponse.length===0&&console.error("Payment methods are not available. Please, check your Adyen configuration.");const options={locale,environment,clientKey,amount:{currency:order?.currency_code||"",value:order?.total_amount_with_taxes_cents||0},countryCode:order?.country_code||"",paymentMethodsResponse:{paymentMethods:paymentMethodsResponse},showPayButton:!1,paymentMethodsConfiguration:{threeDS2:threeDSConfiguration,paypal:{showPayButton:!0,style:styles?.paypal},card:{styles:styles?.card,holderNameRequired:!1}},onAdditionalDetails:handleOnAdditionalDetails,onChange:handleChange,onSubmit};return!ref&&clientKey&&setCustomerOrderParam("_save_payment_source_to_customer_wallet","false"),clientKey&&!loadAdyen&&window&&!checkout&&import("@adyen/adyen-web").then(({default:AdyenCheckout})=>{const type=isOnlyCard?"card":"dropin";AdyenCheckout(options).then(adyenCheckout=>{const component=adyenCheckout.create(type,{onSelect:component2=>{const id=component2._id;id.search("scheme")===-1&&ref.current&&(id.search("paypal")===-1?ref.current.onsubmit=()=>handleSubmit(ref.current,component2):ref.current.onsubmit=null,setPaymentRef({ref}))}}).mount("#adyen-dropin");component&&(setCheckout(component),setLoadAdyen(!0))})}),()=>{setPaymentRef({ref:{current:null}}),setLoadAdyen(!1)}},[clientKey,ref]),!clientKey&&!loadAdyen&&!checkout?null:_jsxs("form",{ref,onSubmit:e=>handleSubmit(e,checkout),children:[_jsx("div",{className:cardContainerClassName,id:"adyen-dropin"}),templateCustomerSaveToWallet&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet}),_jsx("div",{className:threeDSecureContainerClassName,id:"adyen-action"})]})}export default AdyenPayment;

package/lib/components/PaymentMethod.d.ts

@@ -5,6 +5,7 @@ declare type PaymentMethodProps = {
     children: ReactNode;
     activeClass?: string;
     loader?: LoaderType;
+    autoSelectSinglePaymentMethod?: boolean | (() => void);
 } & Omit<JSX.IntrinsicElements['div'], 'onClick'> & ({
     clickableContainer: true;
     onClick?: (payment?: PaymentMethodType | Record<string, any>) => void;

package/lib/components/PaymentMethod.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Fragment,useContext,useState,useEffect}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import PaymentMethodChildrenContext from"../context/PaymentMethodChildrenContext";import components from"../config/components";import getLoaderComponent from"../utils/getLoaderComponent";const propTypes=components.PaymentMethod.propTypes,displayName=components.PaymentMethod.displayName,PaymentMethod=({children,className,activeClass,loader="Loading...",clickableContainer,onClick,...p})=>{const[loading,setLoading]=useState(!0),[paymentSelected,setPaymentSelected]=useState(""),{paymentMethods,currentPaymentMethodId,setPaymentMethod,setLoading:setLoadingPlaceOrder}=useContext(PaymentMethodContext);useEffect(()=>(paymentMethods&&setLoading(!1),currentPaymentMethodId&&setPaymentSelected(currentPaymentMethodId),()=>{setLoading(!0)}),[paymentMethods,currentPaymentMethodId]);const components2=paymentMethods&&paymentMethods.map((payment,k)=>{const isActive=currentPaymentMethodId===payment?.id,paymentMethodProps={payment,clickableContainer,paymentSelected,setPaymentSelected},paymentResource=payment?.payment_source_type,onClickable=clickableContainer?async e=>{e.stopPropagation(),setLoadingPlaceOrder({loading:!0}),setPaymentSelected(payment.id);const paymentMethodId=payment?.id;await setPaymentMethod({paymentResource,paymentMethodId}),onClick&&onClick(payment),setLoadingPlaceOrder({loading:!1})}:void 0;return _jsx("div",{"data-test-id":paymentResource,className:`${className} ${isActive?activeClass:""}`,onClick:onClickable,...p,children:_jsx(PaymentMethodChildrenContext.Provider,{value:paymentMethodProps,children})},k)});return loading?getLoaderComponent(loader):_jsx(Fragment,{children:components2})};PaymentMethod.propTypes=propTypes,PaymentMethod.displayName=displayName;export default PaymentMethod;
+import{jsx as _jsx}from"react/jsx-runtime";import{Fragment,useContext,useState,useEffect}from"react";import PaymentMethodContext from"../context/PaymentMethodContext";import PaymentMethodChildrenContext from"../context/PaymentMethodChildrenContext";import components from"../config/components";import getLoaderComponent from"../utils/getLoaderComponent";const propTypes=components.PaymentMethod.propTypes,displayName=components.PaymentMethod.displayName,PaymentMethod=({children,className,activeClass,loader="Loading...",clickableContainer,autoSelectSinglePaymentMethod,onClick,...p})=>{const[loading,setLoading]=useState(!0),[paymentSelected,setPaymentSelected]=useState(""),{paymentMethods,currentPaymentMethodId,setPaymentMethod,setLoading:setLoadingPlaceOrder}=useContext(PaymentMethodContext);useEffect(()=>{paymentMethods!=null&&(autoSelectSinglePaymentMethod!=null?(async()=>{if(paymentMethods.length===1){const[paymentMethod]=paymentMethods||[];if(paymentMethod){setLoadingPlaceOrder({loading:!0}),setPaymentSelected(paymentMethod.id);const paymentMethodId=paymentMethod?.id,paymentResource=paymentMethod?.payment_source_type;await setPaymentMethod({paymentResource,paymentMethodId}),onClick&&onClick(paymentMethod),setLoadingPlaceOrder({loading:!1})}typeof autoSelectSinglePaymentMethod=="function"&&autoSelectSinglePaymentMethod()}else setTimeout(()=>{setLoading(!1)},200)})():setLoading(!1))},[paymentMethods]),useEffect(()=>(paymentMethods&&setLoading(!1),currentPaymentMethodId&&setPaymentSelected(currentPaymentMethodId),()=>{setLoading(!0)}),[paymentMethods,currentPaymentMethodId]);const components2=paymentMethods&&paymentMethods.map((payment,k)=>{const isActive=currentPaymentMethodId===payment?.id,paymentMethodProps={payment,clickableContainer,paymentSelected,setPaymentSelected},paymentResource=payment?.payment_source_type,onClickable=clickableContainer?async e=>{e.stopPropagation(),setLoadingPlaceOrder({loading:!0}),setPaymentSelected(payment.id);const paymentMethodId=payment?.id;await setPaymentMethod({paymentResource,paymentMethodId}),onClick&&onClick(payment),setLoadingPlaceOrder({loading:!1})}:void 0;return _jsx("div",{"data-test-id":paymentResource,className:`${className} ${isActive?activeClass:""}`,onClick:onClickable,...p,children:_jsx(PaymentMethodChildrenContext.Provider,{value:paymentMethodProps,children})},k)});return loading?getLoaderComponent(loader):_jsx(Fragment,{children:components2})};PaymentMethod.propTypes=propTypes,PaymentMethod.displayName=displayName;export default PaymentMethod;

package/lib/components/PlaceOrderButton.js

@@ -1 +1 @@
-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=>{const{children,label="Place order",disabled,onClick,...p}=props,{isPermitted,setPlaceOrder,options,paymentType}=useContext(PlaceOrderContext),[notPermitted,setNotPermitted]=useState(!0),[forceDisable,setForceDisable]=useState(disabled),{currentPaymentMethodRef,loading,currentPaymentMethodType,paymentSource}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),isFree=order?.total_amount_with_taxes_cents===0;useEffect(()=>{if(loading)setNotPermitted(loading);else if(paymentType===currentPaymentMethodType&&paymentType){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType});(isFree&&isPermitted||currentPaymentMethodRef?.current?.onsubmit||card.brand)&&isPermitted&&setNotPermitted(!1)}else setNotPermitted(!(isFree&&isPermitted));return()=>{setNotPermitted(!0)}},[isPermitted,paymentType,currentPaymentMethodRef?.current?.onsubmit,loading,currentPaymentMethodType,order,paymentSource]),useEffect(()=>{paymentType==="paypal_payments"&&options?.paypalPayerId&&order?.status&&["draft","pending"].includes(order?.status)&&handleClick()},[options?.paypalPayerId,paymentType]),useEffect(()=>{paymentType==="adyen_payments"&&options?.adyen?.MD&&options?.adyen?.PaRes&&order?.status&&["draft","pending"].includes(order?.status)&&handleClick()},[options?.adyen,paymentType]),useEffect(()=>{paymentType==="checkout_com_payments"&&options?.checkoutCom?.session_id&&order?.status&&["draft","pending"].includes(order?.status)&&handleClick()},[options?.checkoutCom,paymentType]);const handleClick=async()=>{let isValid=!0;setForceDisable(!0);const card=paymentType&&getCardDetails({paymentType,customerPayment:{payment_source:paymentSource}});currentPaymentMethodRef?.current?.onsubmit&&[!options?.paypalPayerId,!options?.adyen?.MD,!options?.checkoutCom?.session_id].every(Boolean)?isValid=await currentPaymentMethodRef.current?.onsubmit(paymentSource):card?.brand&&(isValid=!0);const placed=isValid&&setPlaceOrder&&(paymentSource||isFree)&&await setPlaceOrder({paymentSource});setForceDisable(!1),onClick&&placed&&onClick(placed)},disabledButton=disabled!==void 0?disabled:notPermitted,parentProps={...p,label,disabled:disabledButton,handleClick};return children?_jsx(Parent,{...parentProps,children}):_jsx("button",{type:"button",disabled:disabledButton||forceDisable,onClick:handleClick,...p,children:isFunction(label)?label():label})};PlaceOrderButton.propTypes=propTypes,PlaceOrderButton.defaultProps=defaultProps,PlaceOrderButton.displayName=displayName;export default PlaceOrderButton;
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useRef,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=>{const ref=useRef(null),{children,label="Place order",disabled,onClick,...p}=props,{isPermitted,setPlaceOrder,options,paymentType,setButtonRef}=useContext(PlaceOrderContext),[notPermitted,setNotPermitted]=useState(!0),[forceDisable,setForceDisable]=useState(disabled),{currentPaymentMethodRef,loading,currentPaymentMethodType,paymentSource,setPaymentSource}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),isFree=order?.total_amount_with_taxes_cents===0;useEffect(()=>{if(loading)setNotPermitted(loading);else if(paymentType===currentPaymentMethodType&&paymentType){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType});(isFree&&isPermitted||currentPaymentMethodRef?.current?.onsubmit||card.brand)&&isPermitted&&setNotPermitted(!1)}else setNotPermitted(!(isFree&&isPermitted));return()=>{setNotPermitted(!0)}},[isPermitted,paymentType,currentPaymentMethodRef?.current?.onsubmit,loading,currentPaymentMethodType,order,paymentSource]),useEffect(()=>{paymentType==="paypal_payments"&&options?.paypalPayerId&&order?.status&&["draft","pending"].includes(order?.status)&&handleClick()},[options?.paypalPayerId,paymentType]),useEffect(()=>{if(paymentType==="adyen_payments"&&options?.adyen?.redirectResult&&order?.status&&["draft","pending"].includes(order?.status)){const attributes={payment_request_details:{details:{redirectResult:options?.adyen?.redirectResult},paymentData:paymentSource.payment_response.paymentData},_details:1};setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments",attributes}).then(res=>{const resultCode=res?.payment_response?.resultCode;["Authorised","Pending","Received"].includes(resultCode)&&handleClick()})}paymentType==="adyen_payments"&&options?.adyen?.MD&&options?.adyen?.PaRes&&order?.status&&["draft","pending"].includes(order?.status)&&handleClick()},[options?.adyen,paymentType]),useEffect(()=>{paymentType==="checkout_com_payments"&&options?.checkoutCom?.session_id&&order?.status&&["draft","pending"].includes(order?.status)&&handleClick()},[options?.checkoutCom,paymentType]),useEffect(()=>{ref!=null&&ref.current!=null&&setButtonRef!=null&&setButtonRef(ref)},[ref]);const handleClick=async()=>{let isValid=!0;setForceDisable(!0);const card=paymentType&&getCardDetails({paymentType,customerPayment:{payment_source:paymentSource}});currentPaymentMethodRef?.current?.onsubmit&&[!options?.paypalPayerId,!options?.adyen?.MD,!options?.checkoutCom?.session_id].every(Boolean)?(isValid=await currentPaymentMethodRef.current?.onsubmit(paymentSource),isValid===!1&&paymentSource.payment_response?.resultCode==="Authorised"&&(isValid=!0)):card?.brand&&(isValid=!0);const placed=isValid&&setPlaceOrder&&(paymentSource||isFree)&&await setPlaceOrder({paymentSource});setForceDisable(!1),onClick&&placed&&onClick(placed)},disabledButton=disabled!==void 0?disabled:notPermitted,parentProps={...p,label,disabled:disabledButton,handleClick,ref};return children?_jsx(Parent,{...parentProps,children}):_jsx("button",{ref,type:"button",disabled:disabledButton||forceDisable,onClick:handleClick,...p,children:isFunction(label)?label():label})};PlaceOrderButton.propTypes=propTypes,PlaceOrderButton.defaultProps=defaultProps,PlaceOrderButton.displayName=displayName;export default PlaceOrderButton;

package/lib/components/PlaceOrderContainer.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import PlaceOrderContext from"../context/PlaceOrderContext";import{useContext,useEffect,useReducer}from"react";import placeOrderReducer,{placeOrderInitialState,placeOrderPermitted}from"../reducers/PlaceOrderReducer";import OrderContext from"../context/OrderContext";import CommerceLayerContext from"../context/CommerceLayerContext";import components from"../config/components";import{setPlaceOrder}from"../reducers/PlaceOrderReducer";const propTypes=components.PlaceOrderContainer.propTypes,displayName=components.PlaceOrderContainer.displayName,PlaceOrderContainer=props=>{const{children,options}=props,[state,dispatch]=useReducer(placeOrderReducer,placeOrderInitialState),{order,setOrder,setOrderErrors,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),config=useContext(CommerceLayerContext);useEffect(()=>{include?.includes("shipments.available_shipping_methods")?includeLoaded?.["shipments.available_shipping_methods"]||addResourceToInclude({newResourceLoaded:{"shipments.available_shipping_methods":!0,"shipments.shipment_line_items.line_item":!0,"shipments.shipping_method":!0,"shipments.stock_transfers.line_item":!0,"shipments.stock_location":!0}}):addResourceToInclude({newResource:["shipments.available_shipping_methods","shipments.shipment_line_items.line_item","shipments.shipping_method","shipments.stock_transfers.line_item","shipments.stock_location"]}),include?.includes("billing_address")?includeLoaded?.billing_address||addResourceToInclude({newResourceLoaded:{billing_address:!0}}):addResourceToInclude({newResource:"billing_address"}),include?.includes("shipping_address")?includeLoaded?.shipping_address||addResourceToInclude({newResourceLoaded:{shipping_address:!0}}):addResourceToInclude({newResource:"shipping_address",resourcesIncluded:include}),order&&placeOrderPermitted({config,dispatch,order,options:{...options}})},[order,include,includeLoaded]);const contextValue={...state,setPlaceOrder:({paymentSource})=>setPlaceOrder({config,order,state,setOrderErrors,paymentSource,include,setOrder}),placeOrderPermitted:()=>placeOrderPermitted({config,dispatch,order,options:{...options}})};return _jsx(PlaceOrderContext.Provider,{value:contextValue,children})};PlaceOrderContainer.propTypes=propTypes,PlaceOrderContainer.displayName=displayName;export default PlaceOrderContainer;
+import{jsx as _jsx}from"react/jsx-runtime";import PlaceOrderContext from"../context/PlaceOrderContext";import{useContext,useEffect,useReducer}from"react";import placeOrderReducer,{placeOrderInitialState,placeOrderPermitted,setButtonRef}from"../reducers/PlaceOrderReducer";import OrderContext from"../context/OrderContext";import CommerceLayerContext from"../context/CommerceLayerContext";import components from"../config/components";import{setPlaceOrder}from"../reducers/PlaceOrderReducer";const propTypes=components.PlaceOrderContainer.propTypes,displayName=components.PlaceOrderContainer.displayName,PlaceOrderContainer=props=>{const{children,options}=props,[state,dispatch]=useReducer(placeOrderReducer,placeOrderInitialState),{order,setOrder,setOrderErrors,include,addResourceToInclude,includeLoaded}=useContext(OrderContext),config=useContext(CommerceLayerContext);useEffect(()=>{include?.includes("shipments.available_shipping_methods")?includeLoaded?.["shipments.available_shipping_methods"]||addResourceToInclude({newResourceLoaded:{"shipments.available_shipping_methods":!0,"shipments.shipment_line_items.line_item":!0,"shipments.shipping_method":!0,"shipments.stock_transfers.line_item":!0,"shipments.stock_location":!0}}):addResourceToInclude({newResource:["shipments.available_shipping_methods","shipments.shipment_line_items.line_item","shipments.shipping_method","shipments.stock_transfers.line_item","shipments.stock_location"]}),include?.includes("billing_address")?includeLoaded?.billing_address||addResourceToInclude({newResourceLoaded:{billing_address:!0}}):addResourceToInclude({newResource:"billing_address"}),include?.includes("shipping_address")?includeLoaded?.shipping_address||addResourceToInclude({newResourceLoaded:{shipping_address:!0}}):addResourceToInclude({newResource:"shipping_address",resourcesIncluded:include}),order&&placeOrderPermitted({config,dispatch,order,options:{...options}})},[order,include,includeLoaded]);const contextValue={...state,setPlaceOrder:({paymentSource})=>setPlaceOrder({config,order,state,setOrderErrors,paymentSource,include,setOrder}),placeOrderPermitted:()=>placeOrderPermitted({config,dispatch,order,options:{...options}}),setButtonRef:ref=>setButtonRef(ref,dispatch)};return _jsx(PlaceOrderContext.Provider,{value:contextValue,children})};PlaceOrderContainer.propTypes=propTypes,PlaceOrderContainer.displayName=displayName;export default PlaceOrderContainer;

package/lib/components/gateways/AdyenGateway.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import CommerceLayerContext from"../../context/CommerceLayerContext";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 AdyenPayment from"../AdyenPayment";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";import jwt from"../../utils/jwt";import getCardDetails from"../../utils/getCardDetails";export default function AdyenGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,loading,loaderComponent,templateCustomerSaveToWallet,...p}=props,{order}=useContext(OrderContext),{accessToken}=useContext(CommerceLayerContext),{payment}=useContext(PaymentMethodChildrenContext),{payments,isGuest}=useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource}=useContext(PaymentMethodContext),paymentResource="adyen_payments",locale=order?.language_code,paymentMethods=paymentSource?.payment_methods;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const clientKey=paymentSource?.public_key,environment=jwt(accessToken).test?"test":"live",adyenConfig=config?getPaymentConfig(paymentResource,config):{},customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>customerPayment.payment_source?.type==="adyen_payments"):[];if(readonly||showCard){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType:paymentResource}),value={...card,showCard,handleEditClick,readonly};return isEmpty(card)?null:_jsx(PaymentSourceContext.Provider,{value,children})}return!isGuest&&templateCustomerCards?clientKey&&!loading&&paymentMethods?_jsxs(Fragment,{children:[isEmpty(customerPayments)?null:_jsx("div",{className:p.className,children:_jsx(PaymentCardsTemplate,{paymentResource,customerPayments,children:templateCustomerCards})}),_jsx(AdyenPayment,{templateCustomerSaveToWallet,clientKey,locale,environment,config:adyenConfig})]}):loaderComponent:clientKey&&!loading&&paymentMethods?_jsx(AdyenPayment,{clientKey,locale,config:adyenConfig}):loaderComponent}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import CommerceLayerContext from"../../context/CommerceLayerContext";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 AdyenPayment from"../AdyenPayment";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";import jwt from"../../utils/jwt";import getCardDetails from"../../utils/getCardDetails";export default function AdyenGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,loading,loaderComponent,templateCustomerSaveToWallet,...p}=props,{order}=useContext(OrderContext),{accessToken}=useContext(CommerceLayerContext),{payment}=useContext(PaymentMethodChildrenContext),{payments,isGuest}=useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource}=useContext(PaymentMethodContext),paymentResource="adyen_payments",locale=order?.language_code,paymentMethods=paymentSource?.payment_methods;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const clientKey=paymentSource?.public_key,environment=jwt(accessToken).test?"test":"live",adyenConfig=config?getPaymentConfig(paymentResource,config):{},customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>customerPayment.payment_source?.type==="adyen_payments"):[];if(readonly||showCard){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType:paymentResource}),value={...card,showCard,handleEditClick,readonly};return isEmpty(card)?null:_jsx(PaymentSourceContext.Provider,{value,children})}return!isGuest&&templateCustomerCards?clientKey&&!loading&&paymentMethods?_jsxs(Fragment,{children:[isEmpty(customerPayments)?null:_jsx("div",{className:p.className,children:_jsx(PaymentCardsTemplate,{paymentResource,customerPayments,children:templateCustomerCards})}),_jsx(AdyenPayment,{templateCustomerSaveToWallet,clientKey,locale,environment,config:adyenConfig})]}):loaderComponent:clientKey&&!loading&&paymentMethods?_jsx(AdyenPayment,{clientKey,locale,config:adyenConfig,environment}):loaderComponent}

package/lib/context/PlaceOrderContext.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from 'react';
 import { PlaceOrderOptions, PlaceOrderState, SetPlaceOrderErrors } from '../reducers/PlaceOrderReducer';
 import { PaymentSourceType } from '../reducers/PaymentMethodReducer';
 declare type DefaultContext = {
@@ -10,6 +10,7 @@ declare type DefaultContext = {
         placed: boolean;
     }>;
     placeOrderPermitted?: () => void;
+    setButtonRef?: (ref: RefObject<HTMLButtonElement>) => void;
 } & PlaceOrderState;
 export declare const defaultPlaceOrderContext: {
     setPlaceOrderErrors: SetPlaceOrderErrors;

package/lib/reducers/PaymentMethodReducer.d.ts

@@ -11,6 +11,7 @@ import { Dispatch, MutableRefObject } from 'react';
 import { CheckoutComConfig } from '../components/CheckoutComPayment';
 export declare type PaymentSourceType = AdyenPayment | BraintreePayment | CheckoutComPayment | ExternalPayment | PaypalPayment | StripePayment | WireTransfer;
 declare type Card = {
+    type: string;
     brand: string;
     last4: string;
     exp_year: number;

package/lib/reducers/PlaceOrderReducer.d.ts

@@ -1,10 +1,10 @@
-import { Dispatch } from 'react';
+import { Dispatch, RefObject } from 'react';
 import { BaseError } from '../typings/errors';
 import { CommerceLayerConfig } from '../context/CommerceLayerContext';
 import { Order } from '@commercelayer/sdk';
 import { PaymentResource } from './PaymentMethodReducer';
 import { PaymentSourceType } from './PaymentMethodReducer';
-export declare type PlaceOrderActionType = 'setErrors' | 'setPlaceOrderPermitted';
+export declare type PlaceOrderActionType = 'setErrors' | 'setPlaceOrderPermitted' | 'setButtonRef';
 export declare type PlaceOrderOptions = {
     paypalPayerId?: string;
     adyen?: {
@@ -24,7 +24,9 @@ export interface PlaceOrderActionPayload {
     paymentId: string;
     paymentSource: PaymentSourceType;
     options?: PlaceOrderOptions;
+    placeOrderButtonRef?: RefObject<HTMLButtonElement>;
 }
+export declare function setButtonRef(ref: RefObject<HTMLButtonElement>, dispatch: Dispatch<PlaceOrderAction>): void;
 export declare type PlaceOrderState = Partial<PlaceOrderActionPayload>;
 export interface PlaceOrderAction {
     type: PlaceOrderActionType;

package/lib/reducers/PlaceOrderReducer.js

@@ -1 +1 @@
-import baseReducer from"../utils/baseReducer";import isEmpty from"lodash/isEmpty";import{isDoNotShip,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})=>{if(order&&config){let isPermitted=!0;order.privacy_url&&order.terms_url&&(isPermitted=localStorage.getItem("privacy-terms")==="true");const billingAddress=order.billing_address,shippingAddress=order.shipping_address,doNotShip=isDoNotShip(order.line_items),shipments=order.shipments,shipment=shipments&&shipmentsFilled(shipments),paymentMethod=order.payment_method,paymentSource=order.payment_source;order.total_amount_with_taxes_cents!==0&&isEmpty(paymentMethod?.id)&&(isPermitted=!1),isEmpty(billingAddress)&&(isPermitted=!1),isEmpty(shippingAddress)&&!doNotShip&&(isPermitted=!1),!isEmpty(shipments)&&!shipment&&(isPermitted=!1),paymentSource?.mismatched_amounts&&(isPermitted=!1),dispatch({type:"setPlaceOrderPermitted",payload:{isPermitted,paymentType:paymentMethod?.payment_source_type,paymentSecret:paymentSource?.client_secret,paymentId:paymentSource?.options?.id,paymentSource,options}})}},setPlaceOrder=async({state,order,config,setOrderErrors,paymentSource,setOrder,include})=>{const response={placed:!1};if(state&&config&&order){const sdk=getSdk(config),{options,paymentType}=state;try{if(paymentType==="paypal_payments"&&paymentSource){if(!options?.paypalPayerId&&paymentSource?.approval_url)return window.location.href=paymentSource?.approval_url,response;await sdk[paymentType].update({id:paymentSource.id,paypal_payer_id:options?.paypalPayerId})}if(paymentType==="checkout_com_payments"&&paymentSource&&options?.checkoutCom?.session_id){const payment=await sdk[paymentType].update({id:paymentSource.id,_details:!0,session_id:options?.checkoutCom?.session_id});if(payment?.payment_response?.status!=="Authorized"){const[action]=payment?.payment_response?.actions||[""];throw{errors:[{code:"PAYMENT_NOT_APPROVED_FOR_EXECUTION",message:action?.response_summary,resource:"orders",field:"checkout_com_payments"}]}}}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":{saveToWallet()&&await sdk.orders.update({id:order.id,_save_payment_source_to_customer_wallet:!0});const orderUpdated=await sdk.orders.update(updateAttributes,{include});return setOrder&&setOrder(orderUpdated),setOrderErrors&&setOrderErrors([]),{placed:!0}}default:{const orderUpdated=await sdk.orders.update(updateAttributes,{include});return setOrder&&setOrder(orderUpdated),saveToWallet()&&await sdk.orders.update({id:order.id,_save_payment_source_to_customer_wallet:!0}),setOrderErrors&&setOrderErrors([]),{placed:!0}}}}catch(error){const errors=getErrors(error,"orders",paymentType);return setOrderErrors&&setOrderErrors(errors),{...response,errors}}}return response};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{isDoNotShip,shipmentsFilled}from"../utils/shipments";import{saveBillingAddress,saveShippingAddress,saveToWallet}from"../utils/customerOrderOptions";import getSdk from"../utils/getSdk";import getErrors from"../utils/getErrors";export function setButtonRef(ref,dispatch){ref!=null&&ref.current!=null&&dispatch({type:"setButtonRef",payload:{placeOrderButtonRef:ref}})}export const placeOrderInitialState={errors:[],isPermitted:!1},setPlaceOrderErrors=(errors,dispatch)=>{dispatch&&dispatch({type:"setErrors",payload:{errors}})},placeOrderPermitted=async({config,order,dispatch,options})=>{if(order&&config){let isPermitted=!0;order.privacy_url&&order.terms_url&&(isPermitted=localStorage.getItem("privacy-terms")==="true");const billingAddress=order.billing_address,shippingAddress=order.shipping_address,doNotShip=isDoNotShip(order.line_items),shipments=order.shipments,shipment=shipments&&shipmentsFilled(shipments),paymentMethod=order.payment_method,paymentSource=order.payment_source;order.total_amount_with_taxes_cents!==0&&isEmpty(paymentMethod?.id)&&(isPermitted=!1),isEmpty(billingAddress)&&(isPermitted=!1),isEmpty(shippingAddress)&&!doNotShip&&(isPermitted=!1),!isEmpty(shipments)&&!shipment&&(isPermitted=!1),paymentSource?.mismatched_amounts&&(isPermitted=!1),dispatch({type:"setPlaceOrderPermitted",payload:{isPermitted,paymentType:paymentMethod?.payment_source_type,paymentSecret:paymentSource?.client_secret,paymentId:paymentSource?.options?.id,paymentSource,options}})}},setPlaceOrder=async({state,order,config,setOrderErrors,paymentSource,setOrder,include})=>{const response={placed:!1};if(state&&config&&order){const sdk=getSdk(config),{options,paymentType}=state;try{if(paymentType==="paypal_payments"&&paymentSource){if(!options?.paypalPayerId&&paymentSource?.approval_url)return window.location.href=paymentSource?.approval_url,response;await sdk[paymentType].update({id:paymentSource.id,paypal_payer_id:options?.paypalPayerId})}if(paymentType==="checkout_com_payments"&&paymentSource&&options?.checkoutCom?.session_id){const payment=await sdk[paymentType].update({id:paymentSource.id,_details:!0,session_id:options?.checkoutCom?.session_id});if(payment?.payment_response?.status!=="Authorized"){const[action]=payment?.payment_response?.actions||[""];throw{errors:[{code:"PAYMENT_NOT_APPROVED_FOR_EXECUTION",message:action?.response_summary,resource:"orders",field:"checkout_com_payments"}]}}}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":{saveToWallet()&&await sdk.orders.update({id:order.id,_save_payment_source_to_customer_wallet:!0});const orderUpdated=await sdk.orders.update(updateAttributes,{include});return setOrder&&setOrder(orderUpdated),setOrderErrors&&setOrderErrors([]),{placed:!0}}default:{const orderUpdated=await sdk.orders.update(updateAttributes,{include});return setOrder&&setOrder(orderUpdated),saveToWallet()&&await sdk.orders.update({id:order.id,_save_payment_source_to_customer_wallet:!0}),setOrderErrors&&setOrderErrors([]),{placed:!0}}}}catch(error){const errors=getErrors(error,"orders",paymentType);return setOrderErrors&&setOrderErrors(errors),{...response,errors}}}return response};const type=["setErrors","setPlaceOrderPermitted","setButtonRef"],placeOrderReducer=(state,reducer)=>baseReducer(state,reducer,type);export default placeOrderReducer;

package/lib/utils/getCardDetails.js

@@ -1 +1 @@
-export default function getCardDetails({paymentType,customerPayment}){switch(paymentType){case"checkout_com_payments":{const source=customerPayment.payment_source?.payment_response?.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 source=customerPayment.payment_source?.options?.card;if(source)return{...source};break}case"adyen_payments":{const ps=customerPayment.payment_source,source=ps?.payment_request_data?.payment_method,authorized=ps?.payment_response?.resultCode==="Authorised";if(source&&authorized)return{...source,brand:source?.brand?source.brand:"credit-card"};break}default:{const source=customerPayment.payment_source?.metadata?.card;if(source)return{...source};break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****"}}
+export default function getCardDetails({paymentType,customerPayment}){switch(paymentType){case"checkout_com_payments":{const source=customerPayment.payment_source?.payment_response?.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 source=customerPayment.payment_source?.options?.card;if(source)return{...source};break}case"adyen_payments":{const ps=customerPayment.payment_source,source=ps?.payment_request_data?.payment_method,authorized=ps?.payment_response?.resultCode==="Authorised";if(source&&authorized){const brand=source.type==="scheme"?source.brand??"credit-card":source.type.replace("_account","");return{...source,brand}}break}default:{const source=customerPayment.payment_source?.metadata?.card;if(source)return{...source};break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****"}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "3.15.0-beta.1",
+  "version": "3.15.0-beta.10",
   "description": "The Official Commerce Layer React Components",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -49,28 +49,28 @@
   "dependencies": {
     "@ac-dev/countries-service": "^1.2.0",
     "@ac-dev/states-service": "^1.1.0",
-    "@adyen/adyen-web": "^5.19.0",
+    "@adyen/adyen-web": "^5.21.0",
     "@commercelayer/sdk": "^4.15.1",
-    "@stripe/react-stripe-js": "^1.9.0",
-    "@stripe/stripe-js": "^1.33.0",
+    "@stripe/react-stripe-js": "^1.10.0",
+    "@stripe/stripe-js": "^1.35.0",
     "axios": "^0.27.2",
     "braintree-web": "^3.85.5",
-    "frames-react": "^1.0.11",
+    "frames-react": "^1.0.12",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "rapid-form": "^2.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.9",
+    "@babel/core": "^7.18.10",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-flow": "^7.18.6",
-    "@babel/plugin-transform-react-jsx": "^7.18.6",
-    "@babel/preset-env": "^7.18.9",
+    "@babel/plugin-transform-react-jsx": "^7.18.10",
+    "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@commercelayer/js-auth": "^2.3.0",
-    "@playwright/test": "^1.24.1",
+    "@playwright/test": "^1.24.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -84,29 +84,29 @@
     "@types/braintree-web": "^3.75.20",
     "@types/jest": "^28.1.6",
     "@types/lodash": "^4.14.182",
-    "@types/node": "^18.6.1",
+    "@types/node": "^18.6.5",
     "@types/prop-types": "^15.7.5",
     "@types/react": "^17.0.45",
     "@types/react-test-renderer": "^17.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.33.0",
+    "@typescript-eslint/parser": "^5.33.0",
     "@zerollup/ts-transform-paths": "^1.7.18",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.8",
     "babel-jest": "^28.1.3",
     "babel-loader": "^8.2.5",
     "babel-plugin-istanbul": "^6.1.1",
     "dotenv": "^16.0.1",
-    "eslint": "^8.20.0",
+    "eslint": "^8.21.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^28.1.3",
     "minimize-js": "^1.3.0",
-    "next": "^12.2.3",
+    "next": "^12.2.4",
     "nyc": "^15.1.0",
-    "playwright": "^1.24.1",
-    "postcss": "^8.4.14",
+    "playwright": "^1.24.2",
+    "postcss": "^8.4.16",
     "postcss-loader": "^7.0.1",
     "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
@@ -114,7 +114,7 @@
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "semantic-release": "^19.0.3",
-    "tailwindcss": "^3.1.6",
+    "tailwindcss": "^3.1.8",
     "ts-jest": "^28.0.7",
     "ts-loader": "^9.3.1",
     "tsc-alias": "^1.7.0",