@commercelayer/react-components 3.4.3 → 3.5.1

package/lib/components/CheckoutComPayment.d.ts

@@ -6,6 +6,8 @@ export declare type CheckoutComConfig = {
     containerClassName?: string;
     hintLabel?: string;
     name?: string;
+    success_url?: string;
+    failure_url?: string;
     options?: {
         style: FramesStyle;
     };

package/lib/components/CheckoutComPayment.js

@@ -1 +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;
+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,success_url=window.location.href,failure_url=window.location.href,show}=p,divProps=__rest(p,["containerClassName","templateCustomerSaveToWallet","success_url","failure_url","show"]),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,failure_url,_authorize:!0}});ps&&ps.redirect_uri&&(window.location.href=ps.redirect_uri)}}catch(error){console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error==null?void 0:error.message}])}}return!1},lang=`${locale.toUpperCase()}-${locale.toUpperCase()}`,localization=systemLanguages.includes(lang)?lang:"EN-GB";return loaded&&show?_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/PaymentMethod.js

@@ -1 +1 @@
-import{__rest}from"tslib";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=_a=>{var{children,className,activeClass,loader="Loading...",clickableContainer,onClick}=_a,p=__rest(_a,["children","className","activeClass","loader","clickableContainer","onClick"]);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==null?void 0:payment.id),paymentMethodProps={payment,clickableContainer,paymentSelected,setPaymentSelected},onClickable=clickableContainer?async e=>{e.stopPropagation(),setLoadingPlaceOrder({loading:!0}),setPaymentSelected(payment.id);const paymentResource=payment==null?void 0:payment.payment_source_type,paymentMethodId=payment==null?void 0:payment.id;await setPaymentMethod({paymentResource,paymentMethodId}),onClick&&onClick(payment),setLoadingPlaceOrder({loading:!1})}:void 0;return _jsx("div",Object.assign({className:`${className} ${isActive?activeClass:""}`,onClick:onClickable},p,{children:_jsx(PaymentMethodChildrenContext.Provider,Object.assign({value:paymentMethodProps},{children}),void 0)}),k)});return loading?getLoaderComponent(loader):_jsx(Fragment,{children:components2},void 0)};PaymentMethod.propTypes=propTypes,PaymentMethod.displayName=displayName;export default PaymentMethod;
+import{__rest}from"tslib";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=_a=>{var{children,className,activeClass,loader="Loading...",clickableContainer,onClick}=_a,p=__rest(_a,["children","className","activeClass","loader","clickableContainer","onClick"]);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==null?void 0:payment.id),paymentMethodProps={payment,clickableContainer,paymentSelected,setPaymentSelected},paymentResource=payment==null?void 0:payment.payment_source_type,onClickable=clickableContainer?async e=>{e.stopPropagation(),setLoadingPlaceOrder({loading:!0}),setPaymentSelected(payment.id);const paymentMethodId=payment==null?void 0:payment.id;await setPaymentMethod({paymentResource,paymentMethodId}),onClick&&onClick(payment),setLoadingPlaceOrder({loading:!1})}:void 0;return _jsx("div",Object.assign({"data-test-id":paymentResource,className:`${className} ${isActive?activeClass:""}`,onClick:onClickable},p,{children:_jsx(PaymentMethodChildrenContext.Provider,Object.assign({value:paymentMethodProps},{children}),void 0)}),k)});return loading?getLoaderComponent(loader):_jsx(Fragment,{children:components2},void 0)};PaymentMethod.propTypes=propTypes,PaymentMethod.displayName=displayName;export default PaymentMethod;

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";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),isFree=(order==null?void 0:order.total_amount_with_taxes_cents)===0;useEffect(()=>{var _a2;if(loading)setNotPermitted(loading);else if(paymentType===currentPaymentMethodType&&paymentType){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType});(isFree||((_a2=currentPaymentMethodRef==null?void 0:currentPaymentMethodRef.current)===null||_a2===void 0?void 0:_a2.onsubmit)||card.brand)&&isPermitted&&setNotPermitted(!1)}else setNotPermitted(!isFree);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||isFree)&&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),isFree=(order==null?void 0:order.total_amount_with_taxes_cents)===0;useEffect(()=>{var _a2;if(loading)setNotPermitted(loading);else if(paymentType===currentPaymentMethodType&&paymentType){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType});(isFree||((_a2=currentPaymentMethodRef==null?void 0:currentPaymentMethodRef.current)===null||_a2===void 0?void 0:_a2.onsubmit)||card.brand)&&isPermitted&&setNotPermitted(!1)}else setNotPermitted(!isFree);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,paymentType]),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,paymentType]),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,paymentType]);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||isFree)&&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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "3.4.3",
+  "version": "3.5.1",
   "description": "The Official Commerce Layer React Components",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",