@commercelayer/react-components 4.20.5 → 4.20.6

package/lib/cjs/components/payment_gateways/ExternalGateway.d.ts

@@ -1,5 +1,5 @@
-import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
-import { type JSX } from 'react';
+import type { GatewayBaseType } from "../payment_gateways/PaymentGateway";
+import { type JSX } from "react";
 type Props = GatewayBaseType;
 export declare function ExternalGateway(props: Props): JSX.Element | null;
 export default ExternalGateway;

package/lib/cjs/components/payment_gateways/ExternalGateway.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ExternalGateway=ExternalGateway;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),ExternalPayment_1=tslib_1.__importDefault(require("../payment_source/ExternalPayment")),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),PaymentMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodChildrenContext")),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),PaymentMethodReducer_1=require("../../reducers/PaymentMethodReducer"),getCardDetails_1=tslib_1.__importDefault(require("../../utils/getCardDetails")),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty")),react_1=tslib_1.__importDefault(require("react")),PaymentCardsTemplate_1=tslib_1.__importDefault(require("../utils/PaymentCardsTemplate"));function ExternalGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,loaderComponent,templateCustomerSaveToWallet}=props,p=tslib_1.__rest(props,["readonly","showCard","handleEditClick","children","templateCustomerCards","show","loading","loaderComponent","templateCustomerSaveToWallet"]),{order}=react_1.default.useContext(OrderContext_1.default),{payment}=react_1.default.useContext(PaymentMethodChildrenContext_1.default),{payments,isGuest}=react_1.default.useContext(CustomerContext_1.default),{currentPaymentMethodId,config,paymentSource}=react_1.default.useContext(PaymentMethodContext_1.default),paymentResource="external_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const paymentSourceToken=paymentSource?.payment_source_token,getConfig=config?(0,PaymentMethodReducer_1.getPaymentConfig)(paymentResource,config):{},paymentConfig=getConfig?.externalPayment,customerPayments=!(0,isEmpty_1.default)(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=(0,getCardDetails_1.default)({customerPayment:{payment_source:paymentSource},paymentType:paymentResource}),value=Object.assign(Object.assign({},card),{showCard,handleEditClick,readonly});return(0,isEmpty_1.default)(card)?null:(0,jsx_runtime_1.jsx)(PaymentSourceContext_1.default.Provider,{value,children})}return!isGuest&&templateCustomerCards?(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,isEmpty_1.default)(customerPayments)?null:(0,jsx_runtime_1.jsx)("div",{className:p.className,children:(0,jsx_runtime_1.jsx)(PaymentCardsTemplate_1.default,{paymentResource,customerPayments,children:templateCustomerCards})}),(0,jsx_runtime_1.jsx)(ExternalPayment_1.default,Object.assign({show,templateCustomerSaveToWallet,paymentSourceToken,locale},paymentConfig))]}):(0,jsx_runtime_1.jsx)(ExternalPayment_1.default,Object.assign({show,paymentSourceToken,locale},paymentConfig))}exports.default=ExternalGateway;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ExternalGateway=ExternalGateway;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),ExternalPayment_1=tslib_1.__importDefault(require("../payment_source/ExternalPayment")),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),PaymentMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodChildrenContext")),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),PaymentSourceContext_1=tslib_1.__importDefault(require("../../context/PaymentSourceContext")),PaymentMethodReducer_1=require("../../reducers/PaymentMethodReducer"),getCardDetails_1=tslib_1.__importDefault(require("../../utils/getCardDetails")),isEmpty_1=tslib_1.__importDefault(require("lodash/isEmpty")),react_1=tslib_1.__importDefault(require("react")),PaymentCardsTemplate_1=tslib_1.__importDefault(require("../utils/PaymentCardsTemplate"));function ExternalGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,loaderComponent,templateCustomerSaveToWallet}=props,p=tslib_1.__rest(props,["readonly","showCard","handleEditClick","children","templateCustomerCards","show","loading","loaderComponent","templateCustomerSaveToWallet"]),{order}=react_1.default.useContext(OrderContext_1.default),{payment}=react_1.default.useContext(PaymentMethodChildrenContext_1.default),{payments,isGuest}=react_1.default.useContext(CustomerContext_1.default),{currentPaymentMethodId,config,paymentSource}=react_1.default.useContext(PaymentMethodContext_1.default),paymentResource="external_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const paymentSourceToken=paymentSource?.payment_source_token,getConfig=config?(0,PaymentMethodReducer_1.getPaymentConfig)(paymentResource,config):{},paymentConfig=getConfig?.externalPayment,customerPayments=!(0,isEmpty_1.default)(payments)&&payments?payments.filter(customerPayment=>{var _a;return((_a=customerPayment.payment_source)===null||_a===void 0?void 0:_a.type)===paymentResource}):[];if(readonly){const card=(0,getCardDetails_1.default)({customerPayment:{payment_source:paymentSource},paymentType:paymentResource}),value=Object.assign(Object.assign({},card),{showCard,handleEditClick,readonly});return(0,isEmpty_1.default)(card)?null:(0,jsx_runtime_1.jsx)(PaymentSourceContext_1.default.Provider,{value,children})}return!isGuest&&templateCustomerCards?(0,jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment,{children:[(0,isEmpty_1.default)(customerPayments)?null:(0,jsx_runtime_1.jsx)("div",{className:p.className,children:(0,jsx_runtime_1.jsx)(PaymentCardsTemplate_1.default,{paymentResource,customerPayments,children:templateCustomerCards})}),(0,jsx_runtime_1.jsx)(ExternalPayment_1.default,Object.assign({show,templateCustomerSaveToWallet,paymentSourceToken,locale},paymentConfig))]}):(0,jsx_runtime_1.jsx)(ExternalPayment_1.default,Object.assign({show,paymentSourceToken,locale},paymentConfig))}exports.default=ExternalGateway;

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

@@ -1,7 +1,7 @@
-import type { ChildrenFunction } from '../../typings/index';
-import type { StripeElementLocale } from '@stripe/stripe-js';
-import { type JSX } from 'react';
-import type { PaymentSourceProps } from './PaymentSource';
+import type { ChildrenFunction } from "../../typings/index";
+import type { StripeElementLocale } from "@stripe/stripe-js";
+import { type JSX } from "react";
+import type { PaymentSourceProps } from "./PaymentSource";
 export interface ExternalPaymentConfig {
     /**
      * Show the component. Default is false
@@ -10,13 +10,13 @@ export interface ExternalPaymentConfig {
     /**
      * Use to display information about the external payment or whatever else.
      */
-    customComponent?: ChildrenFunction<Omit<Props, 'customComponent'>>;
+    customComponent?: ChildrenFunction<Omit<Props, "customComponent">>;
     /**
      * The payment source token, as generated by the external gateway SDK. Credit Card numbers are rejected.
      */
     payment_source_token: string;
 }
-interface Props extends Omit<ExternalPaymentConfig, 'payment_source_token'>, Pick<PaymentSourceProps, 'templateCustomerSaveToWallet'> {
+interface Props extends Omit<ExternalPaymentConfig, "payment_source_token">, Pick<PaymentSourceProps, "templateCustomerSaveToWallet"> {
     paymentSourceToken: string;
     locale?: StripeElementLocale;
 }

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

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

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

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

package/lib/cjs/utils/getCardDetails.d.ts

@@ -1,6 +1,6 @@
-import type { IconBrand } from '../context/PaymentSourceContext';
-import type { PaymentResource } from '../reducers/PaymentMethodReducer';
-import type { CustomerPaymentSource } from '@commercelayer/sdk';
+import type { IconBrand } from "../context/PaymentSourceContext";
+import type { PaymentResource } from "../reducers/PaymentMethodReducer";
+import type { CustomerPaymentSource } from "@commercelayer/sdk";
 interface CardDetails {
     brand: IconBrand | string;
     last4: string;
@@ -12,5 +12,5 @@ interface Args {
     paymentType: PaymentResource;
     customerPayment: Partial<CustomerPaymentSource>;
 }
-export default function getCardDetails({ paymentType, customerPayment }: Args): CardDetails;
+export default function getCardDetails({ paymentType, customerPayment, }: Args): CardDetails;
 export {};

package/lib/cjs/utils/getCardDetails.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=getCardDetails;function getCardDetails({paymentType,customerPayment}){var _a,_b,_c,_d,_e,_f,_g,_h,_j,_k,_l,_m,_o,_p,_q,_r,_s,_t,_u,_v,_w,_x,_y,_z,_0,_1,_2,_3,_4,_5;switch(paymentType){case"checkout_com_payments":{const ps=customerPayment.payment_source,source=(_a=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":{const ps=customerPayment.payment_source,source=((_e=(_c=(_b=ps?.options)===null||_b===void 0?void 0:_b.card)!==null&&_c!==void 0?_c:(_d=ps?.payment_method)===null||_d===void 0?void 0:_d.card)!==null&&_e!==void 0?_e:ps?.payment_instrument)?{brand:(_f=ps?.payment_instrument)===null||_f===void 0?void 0:_f.card_type,exp_month:(_g=ps?.payment_instrument)===null||_g===void 0?void 0:_g.card_expiry_month,exp_year:(_h=ps?.payment_instrument)===null||_h===void 0?void 0:_h.card_expiry_year,last4:(_j=ps?.payment_instrument)===null||_j===void 0?void 0:_j.card_last_digits,issuer_type:(_k=ps?.payment_instrument)===null||_k===void 0?void 0:_k.issuer_type}:void 0;if(source?.brand!=null)return Object.assign({},source);break}case"klarna_payments":{const ps=customerPayment.payment_source,source=ps?.auth_token!=null&&ps?.payment_instrument!=null?{brand:"klarna",exp_month:"",exp_year:"",last4:"",issuer_type:(_l=ps?.payment_instrument)===null||_l===void 0?void 0:_l.issuer_type}:void 0;if(source)return Object.assign({},source);break}case"braintree_payments":{const ps=customerPayment.payment_source,source=(_m=ps?.options)===null||_m===void 0?void 0:_m.card;if(source)return Object.assign({},source);break}case"adyen_payments":{const ps=customerPayment.payment_source,source=(_o=ps?.payment_request_data)===null||_o===void 0?void 0:_o.payment_method,authorized=((_p=ps?.payment_response)===null||_p===void 0?void 0:_p.resultCode)==="Authorised",last4=(_u=(_s=(_r=(_q=ps?.payment_response)===null||_q===void 0?void 0:_q.additionalData)===null||_r===void 0?void 0:_r.cardSummary)!==null&&_s!==void 0?_s:(_t=ps?.payment_instrument)===null||_t===void 0?void 0:_t.card_last_digits)!==null&&_u!==void 0?_u:"****";if(source&&authorized){const brand=source.type==="scheme"?(_v=source.brand)!==null&&_v!==void 0?_v:"credit-card":source.type.replace("_account","");return Object.assign(Object.assign({},source),{last4,brand})}break}default:{const ps=customerPayment.payment_source,source=(_x=(_w=ps?.metadata)===null||_w===void 0?void 0:_w.card)!==null&&_x!==void 0?_x:{brand:(_z=(_y=ps?.payment_instrument)===null||_y===void 0?void 0:_y.issuer_type.replace("_","-"))!==null&&_z!==void 0?_z:"",last4:(_1=(_0=ps?.metadata)===null||_0===void 0?void 0:_0.last4)!==null&&_1!==void 0?_1:"",exp_month:(_3=(_2=ps?.metadata)===null||_2===void 0?void 0:_2.exp_month)!==null&&_3!==void 0?_3:"",exp_year:(_5=(_4=ps?.metadata)===null||_4===void 0?void 0:_4.exp_year)!==null&&_5!==void 0?_5:""};if(source)return Object.assign({},source);break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****",issuer_type:""}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=getCardDetails;function getCardDetails({paymentType,customerPayment}){var _a,_b,_c,_d,_e,_f,_g,_h,_j,_k,_l,_m,_o,_p,_q,_r,_s,_t,_u,_v,_w,_x,_y,_z,_0,_1,_2,_3,_4,_5;switch(paymentType){case"checkout_com_payments":{const ps=customerPayment.payment_source,source=(_a=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":{const ps=customerPayment.payment_source,source=((_e=(_c=(_b=ps?.options)===null||_b===void 0?void 0:_b.card)!==null&&_c!==void 0?_c:(_d=ps?.payment_method)===null||_d===void 0?void 0:_d.card)!==null&&_e!==void 0?_e:ps?.payment_instrument)?{brand:(_f=ps?.payment_instrument)===null||_f===void 0?void 0:_f.card_type,exp_month:(_g=ps?.payment_instrument)===null||_g===void 0?void 0:_g.card_expiry_month,exp_year:(_h=ps?.payment_instrument)===null||_h===void 0?void 0:_h.card_expiry_year,last4:(_j=ps?.payment_instrument)===null||_j===void 0?void 0:_j.card_last_digits,issuer_type:(_k=ps?.payment_instrument)===null||_k===void 0?void 0:_k.issuer_type}:void 0;if(source?.brand!=null)return Object.assign({},source);break}case"klarna_payments":{const ps=customerPayment.payment_source,source=ps?.auth_token!=null&&ps?.payment_instrument!=null?{brand:"klarna",exp_month:"",exp_year:"",last4:"",issuer_type:(_l=ps?.payment_instrument)===null||_l===void 0?void 0:_l.issuer_type}:void 0;if(source)return Object.assign({},source);break}case"braintree_payments":{const ps=customerPayment.payment_source,source=(_m=ps?.options)===null||_m===void 0?void 0:_m.card;if(source)return Object.assign({},source);break}case"adyen_payments":{const ps=customerPayment.payment_source,source=(_o=ps?.payment_request_data)===null||_o===void 0?void 0:_o.payment_method,authorized=((_p=ps?.payment_response)===null||_p===void 0?void 0:_p.resultCode)==="Authorised",last4=(_u=(_s=(_r=(_q=ps?.payment_response)===null||_q===void 0?void 0:_q.additionalData)===null||_r===void 0?void 0:_r.cardSummary)!==null&&_s!==void 0?_s:(_t=ps?.payment_instrument)===null||_t===void 0?void 0:_t.card_last_digits)!==null&&_u!==void 0?_u:"****";if(source&&authorized){const brand=source.type==="scheme"?(_v=source.brand)!==null&&_v!==void 0?_v:"credit-card":source.type.replace("_account","");return Object.assign(Object.assign({},source),{last4,brand})}break}default:{const ps=customerPayment.payment_source;if(ps?.type!==paymentType)break;const source=(_x=(_w=ps?.metadata)===null||_w===void 0?void 0:_w.card)!==null&&_x!==void 0?_x:{brand:(_z=(_y=ps?.payment_instrument)===null||_y===void 0?void 0:_y.issuer_type.replace("_","-"))!==null&&_z!==void 0?_z:"",last4:(_1=(_0=ps?.metadata)===null||_0===void 0?void 0:_0.last4)!==null&&_1!==void 0?_1:"",exp_month:(_3=(_2=ps?.metadata)===null||_2===void 0?void 0:_2.exp_month)!==null&&_3!==void 0?_3:"",exp_year:(_5=(_4=ps?.metadata)===null||_4===void 0?void 0:_4.exp_year)!==null&&_5!==void 0?_5:""};if(source)return Object.assign({},source);break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****",issuer_type:""}}

package/lib/esm/components/payment_gateways/ExternalGateway.d.ts

@@ -1,5 +1,5 @@
-import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
-import { type JSX } from 'react';
+import type { GatewayBaseType } from "../payment_gateways/PaymentGateway";
+import { type JSX } from "react";
 type Props = GatewayBaseType;
 export declare function ExternalGateway(props: Props): JSX.Element | null;
 export default ExternalGateway;

package/lib/esm/components/payment_gateways/ExternalGateway.js

@@ -1,2 +1,2 @@
 "use client";
-import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import ExternalPayment from"../payment_source/ExternalPayment";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 getCardDetails from"../../utils/getCardDetails";import isEmpty from"lodash/isEmpty";import React from"react";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";export function ExternalGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,loaderComponent,templateCustomerSaveToWallet,...p}=props,{order}=React.useContext(OrderContext),{payment}=React.useContext(PaymentMethodChildrenContext),{payments,isGuest}=React.useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource}=React.useContext(PaymentMethodContext),paymentResource="external_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const paymentSourceToken=paymentSource?.payment_source_token,paymentConfig=(config?getPaymentConfig(paymentResource,config):{})?.externalPayment,customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>customerPayment.payment_source?.type===paymentResource):[];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?_jsxs(_Fragment,{children:[isEmpty(customerPayments)?null:_jsx("div",{className:p.className,children:_jsx(PaymentCardsTemplate,{paymentResource,customerPayments,children:templateCustomerCards})}),_jsx(ExternalPayment,{show,templateCustomerSaveToWallet,paymentSourceToken,locale,...paymentConfig})]}):_jsx(ExternalPayment,{show,paymentSourceToken,locale,...paymentConfig})}export default ExternalGateway;
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import ExternalPayment from"../payment_source/ExternalPayment";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 getCardDetails from"../../utils/getCardDetails";import isEmpty from"lodash/isEmpty";import React from"react";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";export function ExternalGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,loaderComponent,templateCustomerSaveToWallet,...p}=props,{order}=React.useContext(OrderContext),{payment}=React.useContext(PaymentMethodChildrenContext),{payments,isGuest}=React.useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource}=React.useContext(PaymentMethodContext),paymentResource="external_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const paymentSourceToken=paymentSource?.payment_source_token,paymentConfig=(config?getPaymentConfig(paymentResource,config):{})?.externalPayment,customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>customerPayment.payment_source?.type===paymentResource):[];if(readonly){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?_jsxs(_Fragment,{children:[isEmpty(customerPayments)?null:_jsx("div",{className:p.className,children:_jsx(PaymentCardsTemplate,{paymentResource,customerPayments,children:templateCustomerCards})}),_jsx(ExternalPayment,{show,templateCustomerSaveToWallet,paymentSourceToken,locale,...paymentConfig})]}):_jsx(ExternalPayment,{show,paymentSourceToken,locale,...paymentConfig})}export default ExternalGateway;

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

@@ -1,7 +1,7 @@
-import type { ChildrenFunction } from '../../typings/index';
-import type { StripeElementLocale } from '@stripe/stripe-js';
-import { type JSX } from 'react';
-import type { PaymentSourceProps } from './PaymentSource';
+import type { ChildrenFunction } from "../../typings/index";
+import type { StripeElementLocale } from "@stripe/stripe-js";
+import { type JSX } from "react";
+import type { PaymentSourceProps } from "./PaymentSource";
 export interface ExternalPaymentConfig {
     /**
      * Show the component. Default is false
@@ -10,13 +10,13 @@ export interface ExternalPaymentConfig {
     /**
      * Use to display information about the external payment or whatever else.
      */
-    customComponent?: ChildrenFunction<Omit<Props, 'customComponent'>>;
+    customComponent?: ChildrenFunction<Omit<Props, "customComponent">>;
     /**
      * The payment source token, as generated by the external gateway SDK. Credit Card numbers are rejected.
      */
     payment_source_token: string;
 }
-interface Props extends Omit<ExternalPaymentConfig, 'payment_source_token'>, Pick<PaymentSourceProps, 'templateCustomerSaveToWallet'> {
+interface Props extends Omit<ExternalPaymentConfig, "payment_source_token">, Pick<PaymentSourceProps, "templateCustomerSaveToWallet"> {
     paymentSourceToken: string;
     locale?: StripeElementLocale;
 }

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

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

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

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

package/lib/esm/utils/getCardDetails.d.ts

@@ -1,6 +1,6 @@
-import type { IconBrand } from '../context/PaymentSourceContext';
-import type { PaymentResource } from '../reducers/PaymentMethodReducer';
-import type { CustomerPaymentSource } from '@commercelayer/sdk';
+import type { IconBrand } from "../context/PaymentSourceContext";
+import type { PaymentResource } from "../reducers/PaymentMethodReducer";
+import type { CustomerPaymentSource } from "@commercelayer/sdk";
 interface CardDetails {
     brand: IconBrand | string;
     last4: string;
@@ -12,5 +12,5 @@ interface Args {
     paymentType: PaymentResource;
     customerPayment: Partial<CustomerPaymentSource>;
 }
-export default function getCardDetails({ paymentType, customerPayment }: Args): CardDetails;
+export default function getCardDetails({ paymentType, customerPayment, }: Args): CardDetails;
 export {};

package/lib/esm/utils/getCardDetails.js

@@ -1,2 +1,2 @@
 "use client";
-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":{const ps=customerPayment.payment_source,source=ps?.options?.card??ps?.payment_method?.card??ps?.payment_instrument?{brand:ps?.payment_instrument?.card_type,exp_month:ps?.payment_instrument?.card_expiry_month,exp_year:ps?.payment_instrument?.card_expiry_year,last4:ps?.payment_instrument?.card_last_digits,issuer_type:ps?.payment_instrument?.issuer_type}:void 0;if(source?.brand!=null)return{...source};break}case"klarna_payments":{const ps=customerPayment.payment_source,source=ps?.auth_token!=null&&ps?.payment_instrument!=null?{brand:"klarna",exp_month:"",exp_year:"",last4:"",issuer_type:ps?.payment_instrument?.issuer_type}:void 0;if(source)return{...source};break}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",last4=ps?.payment_response?.additionalData?.cardSummary??ps?.payment_instrument?.card_last_digits??"****";if(source&&authorized){const brand=source.type==="scheme"?source.brand??"credit-card":source.type.replace("_account","");return{...source,last4,brand}}break}default:{const ps=customerPayment.payment_source,source=ps?.metadata?.card??{brand:ps?.payment_instrument?.issuer_type.replace("_","-")??"",last4:ps?.metadata?.last4??"",exp_month:ps?.metadata?.exp_month??"",exp_year:ps?.metadata?.exp_year??""};if(source)return{...source};break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****",issuer_type:""}}
+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":{const ps=customerPayment.payment_source,source=ps?.options?.card??ps?.payment_method?.card??ps?.payment_instrument?{brand:ps?.payment_instrument?.card_type,exp_month:ps?.payment_instrument?.card_expiry_month,exp_year:ps?.payment_instrument?.card_expiry_year,last4:ps?.payment_instrument?.card_last_digits,issuer_type:ps?.payment_instrument?.issuer_type}:void 0;if(source?.brand!=null)return{...source};break}case"klarna_payments":{const ps=customerPayment.payment_source,source=ps?.auth_token!=null&&ps?.payment_instrument!=null?{brand:"klarna",exp_month:"",exp_year:"",last4:"",issuer_type:ps?.payment_instrument?.issuer_type}:void 0;if(source)return{...source};break}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",last4=ps?.payment_response?.additionalData?.cardSummary??ps?.payment_instrument?.card_last_digits??"****";if(source&&authorized){const brand=source.type==="scheme"?source.brand??"credit-card":source.type.replace("_account","");return{...source,last4,brand}}break}default:{const ps=customerPayment.payment_source;if(ps?.type!==paymentType)break;const source=ps?.metadata?.card??{brand:ps?.payment_instrument?.issuer_type.replace("_","-")??"",last4:ps?.metadata?.last4??"",exp_month:ps?.metadata?.exp_month??"",exp_year:ps?.metadata?.exp_year??""};if(source)return{...source};break}}return{brand:"",exp_month:"**",exp_year:"**",last4:"****",issuer_type:""}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.20.5",
+  "version": "4.20.6",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",