@commercelayer/react-components 4.0.0-alpha.1 → 4.0.0-alpha.10

package/lib/esm/components/parcels/Parcels.js

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import ParcelChildrenContext from"../../context/ParcelChildrenContext";import ShipmentChildrenContext from"../../context/ShipmentChildrenContext";import{useContext}from"react";export function Parcels({children,filterBy}){const{parcels}=useContext(ShipmentChildrenContext),components=parcels?.filter(parcel=>filterBy?.includes(parcel.id)??!0).map((parcel,key)=>_jsx(ParcelChildrenContext.Provider,{value:{parcel},children},key));return _jsx(_Fragment,{children:components})}export default Parcels;

package/lib/esm/components/parcels/ParcelsCount.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ChildrenFunction } from '../../typings/index';
+import type { Parcel } from '@commercelayer/sdk';
+interface ChildrenProps extends Omit<Props, 'children'> {
+    /**
+     * Shipments of the current order
+     */
+    parcels?: Parcel[];
+    /**
+     * Quantity of the parcels
+     */
+    quantity: number;
+}
+interface Props extends Omit<JSX.IntrinsicElements['span'], 'children'> {
+    children?: ChildrenFunction<ChildrenProps>;
+}
+export declare function ParcelsCount({ children, ...p }: Props): JSX.Element;
+export default ParcelsCount;

package/lib/esm/components/parcels/ParcelsCount.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import Parent from"../utils/Parent";import ShipmentChildrenContext from"../../context/ShipmentChildrenContext";import{useContext}from"react";export function ParcelsCount({children,...p}){const{parcels}=useContext(ShipmentChildrenContext);if(parcels===void 0)throw new Error("Cannot use `ParcelsCount` outside of `ShipmentsContainer`");const quantity=parcels.length,childrenProps={...p,quantity,parcels};return children?_jsx(Parent,{...childrenProps,children}):_jsx("span",{...p,children:quantity})}export default ParcelsCount;

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

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

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

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment,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{useContext}from"react";import AdyenPayment from"../payment_source/AdyenPayment";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";import jwt from"../../utils/jwt";import getCardDetails from"../../utils/getCardDetails";export 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}export default AdyenGateway;

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

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

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

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import BraintreePayment from"../payment_source/BraintreePayment";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{useContext}from"react";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";export function BraintreeGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,loading,loaderComponent,templateCustomerSaveToWallet,...p}=props,{order}=useContext(OrderContext),{payment}=useContext(PaymentMethodChildrenContext),{payments,isGuest}=useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource}=useContext(PaymentMethodContext),paymentResource="braintree_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const authorization=paymentSource?.client_token,braintreeConfig=config?getPaymentConfig(paymentResource,config):{},customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>customerPayment.payment_source?.type==="braintree_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?authorization&&!loading?_jsxs(_Fragment,{children:[isEmpty(customerPayments)?null:_jsx("div",{className:p.className,children:_jsx(PaymentCardsTemplate,{paymentResource,customerPayments,children:templateCustomerCards})}),_jsx(BraintreePayment,{templateCustomerSaveToWallet,authorization,locale,config:braintreeConfig})]}):loaderComponent:authorization&&!loading?_jsx(BraintreePayment,{locale,authorization,config:braintreeConfig}):loaderComponent}export default BraintreeGateway;

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

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

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

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import CheckoutComPayment from"../payment_source/CheckoutComPayment";import CustomerContext from"../../context/CustomerContext";import OrderContext from"../../context/OrderContext";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import PaymentMethodContext from"../../context/PaymentMethodContext";import PaymentSourceContext from"../../context/PaymentSourceContext";import{getPaymentConfig}from"../../reducers/PaymentMethodReducer";import isEmpty from"lodash/isEmpty";import React from"react";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";import getCardDetails from"../../utils/getCardDetails";export function CheckoutComGateway(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="checkout_com_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const publicKey=paymentSource?.public_key,paymentConfig=config?getPaymentConfig(paymentResource,config):{},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 card.brand?_jsx(PaymentSourceContext.Provider,{value,children}):null}return!isGuest&&templateCustomerCards?publicKey&&!loading?_jsxs(_Fragment,{children:[isEmpty(customerPayments)?null:_jsx("div",{className:p.className,children:_jsx(PaymentCardsTemplate,{paymentResource,customerPayments,children:templateCustomerCards})}),_jsx(CheckoutComPayment,{show,templateCustomerSaveToWallet,publicKey,locale,...paymentConfig})]}):loaderComponent:publicKey&&!loading?_jsx(CheckoutComPayment,{show,publicKey,locale,...paymentConfig}):loaderComponent}export default CheckoutComGateway;

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

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

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

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import React from"react";import KlarnaPayment from"../payment_source/KlarnaPayment";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 PaymentCardsTemplate from"../utils/PaymentCardsTemplate";export function KlarnaGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,loading,loaderComponent,...p}=props,{order}=React.useContext(OrderContext),{payment}=React.useContext(PaymentMethodChildrenContext),{payments,isGuest}=React.useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource}=React.useContext(PaymentMethodContext),paymentResource="klarna_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const clientToken=paymentSource?.client_token,klarnaConfig=config?getPaymentConfig(paymentResource,config):{},customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>customerPayment.payment_source?.type===paymentResource):[];if(readonly||showCard){const card=paymentSource?.options?.card,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(KlarnaPayment,{clientToken,locale,...klarnaConfig})]}):clientToken&&!loading?_jsx(KlarnaPayment,{clientToken,locale,...klarnaConfig}):loaderComponent}export default KlarnaGateway;

package/lib/esm/components/{PaymentGateway.d.ts → payment_gateways/PaymentGateway.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { LoaderType } from '../typings/index';
-import { PaymentSourceProps } from './PaymentSource';
+import { LoaderType } from '../../typings/index';
+import { PaymentSourceProps } from '../payment_source/PaymentSource';
 export declare type GatewayBaseType = Props & {
     show: boolean;
     loading: boolean;

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

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

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

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

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaypalPayment from"../payment_source/PaypalPayment";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{useContext}from"react";export function PaypalGateway(props){const{readonly,showCard,handleEditClick,children,...p}=props,{order}=useContext(OrderContext),{payment}=useContext(PaymentMethodChildrenContext),{currentPaymentMethodId,config,paymentSource}=useContext(PaymentMethodContext),paymentResource="paypal_payments";if(!readonly&&payment?.id!==currentPaymentMethodId)return null;if(readonly||showCard){const card=getCardDetails({customerPayment:{payment_source:order?.payment_source||paymentSource},paymentType:paymentResource}),value={...card,showCard,handleEditClick,readonly};return isEmpty(card)?null:_jsx(PaymentSourceContext.Provider,{value,children})}const paypalConfig=config&&getPaymentConfig(paymentResource,config);return delete p.show,delete p.templateCustomerCards,delete p.templateCustomerSaveToWallet,delete p.loading,delete p.loaderComponent,delete p.onClickCustomerCards,_jsx(PaypalPayment,{...p,infoMessage:paypalConfig?.infoMessage})}export default PaypalGateway;

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

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

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

@@ -0,0 +1 @@
+import{jsx as _jsx,Fragment as _Fragment,jsxs as _jsxs}from"react/jsx-runtime";import StripePayment from"../payment_source/StripePayment";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 StripeGateway(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="stripe_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const publishableKey=paymentSource?.publishable_key,paymentSourceId=order?.payment_source?.id||paymentSource?.id,stripeConfig=config?getPaymentConfig(paymentResource,config):{},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(StripePayment,{show,templateCustomerSaveToWallet,publishableKey,locale,...stripeConfig})]}):publishableKey&&!loading&&paymentSourceId?_jsx(StripePayment,{show,publishableKey,locale,...stripeConfig}):loaderComponent}export default StripeGateway;

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

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

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import WireTransferPayment from"../payment_source/WireTransferPayment";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{useContext}from"react";export function WireTransferGateway(props){const{readonly,showCard,handleEditClick,children,...p}=props,{payment}=useContext(PaymentMethodChildrenContext),{currentPaymentMethodId,config,paymentSource}=useContext(PaymentMethodContext),paymentResource="wire_transfers";if(!readonly&&payment?.id!==currentPaymentMethodId)return null;if(readonly||showCard){const card=paymentSource?.options?.card||paymentSource?.metadata?.card,value={...card,showCard,handleEditClick,readonly};return isEmpty(card)?null:_jsx(PaymentSourceContext.Provider,{value,children})}const wireTransferConfig=config&&paymentResource?getPaymentConfig(paymentResource,config):{};return _jsx(WireTransferPayment,{...p,...wireTransferConfig})}export default WireTransferGateway;

package/lib/esm/components/{PaymentMethod.d.ts → payment_methods/PaymentMethod.d.ts}

@@ -1,7 +1,12 @@
 import { ReactNode } from 'react';
-import { LoaderType } from '../typings/index';
+import { LoaderType } from '../../typings/index';
 import { PaymentMethod as PaymentMethodType } from '@commercelayer/sdk';
+import { PaymentResource } from '../../reducers/PaymentMethodReducer';
 declare type Props = {
+    /**
+     * Hide payment methods by an array of strings
+     */
+    hide?: Array<PaymentResource>;
     children: ReactNode;
     activeClass?: string;
     loader?: LoaderType;
@@ -12,10 +17,10 @@ declare type Props = {
     clickableContainer?: never;
     onClick?: never;
 });
-export declare function PaymentMethod({ children, className, activeClass, loader, clickableContainer, onClick, ...p }: Props): JSX.Element;
+export declare function PaymentMethod({ children, className, activeClass, loader, clickableContainer, hide, onClick, ...p }: Props): JSX.Element;
 export declare namespace PaymentMethod {
     var propTypes: {
-        children: import("prop-types").Validator<boolean | import("react").ReactChild | import("react").ReactFragment | import("react").ReactPortal | (() => ReactNode)>;
+        children: import("prop-types").Validator<NonNullable<ReactNode | (() => JSX.Element)>>;
     };
     var displayName: string;
 }

package/lib/esm/components/payment_methods/PaymentMethod.js

@@ -0,0 +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;export function PaymentMethod({children,className,activeClass,loader="Loading...",clickableContainer,hide,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.filter(payment=>{if(hide){const source=payment?.payment_source_type;return hide?.includes(source)===!1}return!0}).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/esm/components/{PaymentMethodAmount.d.ts → payment_methods/PaymentMethodAmount.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseAmountComponent } from '../typings/index';
+import { BaseAmountComponent } from '../../typings/index';
 export declare function PaymentMethodAmount(props: BaseAmountComponent): JSX.Element;
 export declare namespace PaymentMethodAmount {
     var propTypes: {
@@ -8,10 +8,10 @@ export declare namespace PaymentMethodAmount {
         style: import("prop-types").Requireable<object>;
         name: import("prop-types").Requireable<string>;
         children: import("prop-types").Requireable<(...args: any[]) => any>;
-        format: import("prop-types").Requireable<import("../typings/index").BaseFormatPrice>;
+        format: import("prop-types").Requireable<import("../../typings/index").BaseFormatPrice>;
     };
     var defaultProps: {
-        format: import("../typings/index").BaseFormatPrice;
+        format: import("../../typings/index").BaseFormatPrice;
     };
     var displayName: string;
 }

package/lib/esm/components/payment_methods/PaymentMethodAmount.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import BaseOrderPrice from"../utils/BaseOrderPrice";import components from"../../config/components";const propTypes=components.PaymentMethodAmount.propTypes,defaultProps=components.PaymentMethodAmount.defaultProps,displayName=components.PaymentMethodAmount.displayName;export function PaymentMethodAmount(props){return _jsx(BaseOrderPrice,{base:"amount",type:"payment_method",...props})}PaymentMethodAmount.propTypes=propTypes,PaymentMethodAmount.defaultProps=defaultProps,PaymentMethodAmount.displayName=displayName;export default PaymentMethodAmount;

package/lib/{cjs/components → esm/components/payment_methods}/PaymentMethodName.d.ts

@@ -1,9 +1,9 @@
-import { ReactNode } from 'react';
+/// <reference types="react" />
 declare type PaymentMethodNameChildrenProps = Omit<Props, 'children'> & {
     labelName: string;
 };
 declare type Props = {
-    children?: (props: PaymentMethodNameChildrenProps) => ReactNode;
+    children?: (props: PaymentMethodNameChildrenProps) => JSX.Element;
 } & JSX.IntrinsicElements['label'];
 export declare function PaymentMethodName(props: Props): JSX.Element;
 export declare namespace PaymentMethodName {

package/lib/esm/components/payment_methods/PaymentMethodName.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import Parent from"../utils/Parent";import components from"../../config/components";const propTypes=components.PaymentMethodName.propTypes,displayName=components.PaymentMethodName.displayName;export function PaymentMethodName(props){const{payment}=useContext(PaymentMethodChildrenContext),labelName=payment?.name,htmlFor=payment?.payment_source_type,parentProps={htmlFor,labelName,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("label",{htmlFor,...props,children:labelName})}PaymentMethodName.propTypes=propTypes,PaymentMethodName.displayName=displayName;export default PaymentMethodName;

package/lib/esm/components/{PaymentMethodPrice.d.ts → payment_methods/PaymentMethodPrice.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseAmountComponent } from '../typings/index';
+import { BaseAmountComponent } from '../../typings/index';
 declare type Props = {
     type?: 'amount';
     labelFree?: string;
@@ -13,7 +13,7 @@ export declare namespace PaymentMethodPrice {
         style: import("prop-types").Requireable<object>;
         name: import("prop-types").Requireable<string>;
         children: import("prop-types").Requireable<(...args: any[]) => any>;
-        format: import("prop-types").Requireable<import("../typings/index").BaseFormatPrice>;
+        format: import("prop-types").Requireable<import("../../typings/index").BaseFormatPrice>;
     };
     var displayName: string;
 }

package/lib/esm/components/payment_methods/PaymentMethodPrice.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useState,useEffect,useContext}from"react";import getAmount from"../../utils/getAmount";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import Parent from"../utils/Parent";import components from"../../config/components";const propTypes=components.PaymentMethodPrice.propTypes,displayName=components.PaymentMethodPrice.displayName;export function PaymentMethodPrice(props){const{format="formatted",type="amount",labelFree="Free",...p}=props,{payment}=useContext(PaymentMethodChildrenContext),[price,setPrice]=useState(""),[priceCents,setPriceCents]=useState(0);useEffect(()=>{if(payment){const p2=getAmount({base:"price",type,format,obj:payment});setPrice(p2);const c=getAmount({base:"price",type,format:"cents",obj:payment});setPriceCents(c)}return()=>{setPrice(""),setPriceCents(0)}},[payment]);const parentProps={labelFree,price,priceCents,...p};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("span",{...p,children:priceCents===0?labelFree:price})}PaymentMethodPrice.propTypes=propTypes,PaymentMethodPrice.displayName=displayName;export default PaymentMethodPrice;

package/lib/esm/components/{PaymentMethodRadioButton.d.ts → payment_methods/PaymentMethodRadioButton.d.ts}

@@ -1,11 +1,11 @@
-import { ReactNode, ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
 import { PaymentMethod } from '@commercelayer/sdk';
 declare type ShippingMethodRadioButtonChildrenProps = Omit<Props, 'children'> & {
     checked: boolean;
     handleOnChange: (event: ChangeEvent<HTMLInputElement>) => Promise<void>;
 };
 declare type Props = {
-    children?: (props: ShippingMethodRadioButtonChildrenProps) => ReactNode;
+    children?: (props: ShippingMethodRadioButtonChildrenProps) => JSX.Element;
     onChange?: (payment?: PaymentMethod | Record<string, any>) => void;
 } & JSX.IntrinsicElements['input'];
 export declare function PaymentMethodRadioButton(props: Props): JSX.Element;

package/lib/esm/components/payment_methods/PaymentMethodRadioButton.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext}from"react";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import Parent from"../utils/Parent";import components from"../../config/components";import PaymentMethodContext from"../../context/PaymentMethodContext";import OrderContext from"../../context/OrderContext";const propTypes=components.PaymentMethodRadioButton.propTypes,displayName=components.PaymentMethodRadioButton.displayName;export function PaymentMethodRadioButton(props){const{onChange,...p}=props,{payment,paymentSelected,setPaymentSelected,clickableContainer}=useContext(PaymentMethodChildrenContext),{order}=useContext(OrderContext),{setPaymentMethod,setLoading}=useContext(PaymentMethodContext),orderId=order?.id||"",paymentResource=payment?.payment_source_type,paymentMethodId=payment?.id,name=`payment-${orderId}`,checked=paymentSelected===payment?.id,handleOnChange=async e=>{e.stopPropagation(),setPaymentSelected&&setPaymentSelected(paymentMethodId),setLoading({loading:!0}),!clickableContainer&&await setPaymentMethod({paymentResource,paymentMethodId}),onChange&&onChange(payment),setLoading({loading:!1})},id=payment?.payment_source_type,parentProps={handleOnChange,checked,id,name,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("input",{title:name,type:"radio",id,onChange:handleOnChange,checked,...p})}PaymentMethodRadioButton.propTypes=propTypes,PaymentMethodRadioButton.displayName=displayName;export default PaymentMethodRadioButton;

package/lib/esm/components/payment_methods/PaymentMethodsContainer.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
+interface Props {
+    children: ReactNode;
+    config?: PaymentMethodConfig;
+}
+export declare function PaymentMethodsContainer(props: Props): JSX.Element;
+export default PaymentMethodsContainer;

package/lib/esm/components/payment_methods/PaymentMethodsContainer.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentMethodContext,{defaultPaymentMethodContext}from"../../context/PaymentMethodContext";import{useContext,useEffect,useReducer,useMemo}from"react";import paymentMethodReducer,{paymentMethodInitialState,getPaymentMethods,setPaymentMethodConfig,setPaymentRef}from"../../reducers/PaymentMethodReducer";import OrderContext from"../../context/OrderContext";import CommerceLayerContext from"../../context/CommerceLayerContext";import{isEmpty}from"lodash";export function PaymentMethodsContainer(props){const{children,config}=props,[state,dispatch]=useReducer(paymentMethodReducer,paymentMethodInitialState),{order,getOrder,setOrderErrors,include,addResourceToInclude,updateOrder,includeLoaded}=useContext(OrderContext),credentials=useContext(CommerceLayerContext);async function getPayMethods(){order&&await getPaymentMethods({order,dispatch})}useEffect(()=>{include?.includes("available_payment_methods")?includeLoaded?.available_payment_methods||addResourceToInclude({newResourceLoaded:{available_payment_methods:!0,payment_source:!0,payment_method:!0,"line_items.line_item_options.sku_option":!0,"line_items.item":!0}}):addResourceToInclude({newResource:["available_payment_methods","payment_source","payment_method","line_items.line_item_options.sku_option","line_items.item"]}),config&&isEmpty(state.config)&&setPaymentMethodConfig(config,dispatch),credentials&&order&&!state.paymentMethods&&getPayMethods(),order?.payment_source&&dispatch({type:"setPaymentSource",payload:{paymentSource:order?.payment_source}}),order?.payment_source===null&&dispatch({type:"setPaymentSource",payload:{paymentSource:void 0}})},[order,credentials,include,includeLoaded]);const contextValue=useMemo(()=>({...state,setLoading:({loading})=>defaultPaymentMethodContext.setLoading({loading,dispatch}),setPaymentRef:({ref})=>setPaymentRef({ref,dispatch}),setPaymentMethodErrors:errors=>defaultPaymentMethodContext.setPaymentMethodErrors(errors,dispatch),setPaymentMethod:async args=>await defaultPaymentMethodContext.setPaymentMethod({...args,config:credentials,updateOrder,order,dispatch,setOrderErrors}),setPaymentSource:async args=>await defaultPaymentMethodContext.setPaymentSource({...state,...args,config:credentials,dispatch,getOrder,updateOrder,order}),updatePaymentSource:async args=>await defaultPaymentMethodContext.updatePaymentSource({...args,config:credentials,dispatch}),destroyPaymentSource:async args=>await defaultPaymentMethodContext.destroyPaymentSource({...args,dispatch,config:credentials,updateOrder,orderId:order?.id})}),[state]);return _jsx(PaymentMethodContext.Provider,{value:contextValue,children})}export default PaymentMethodsContainer;

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

@@ -0,0 +1,55 @@
+import { CSSProperties } from 'react';
+import { PaymentSourceProps } from './PaymentSource';
+declare type Styles = Partial<{
+    base: CSSProperties;
+    error: CSSProperties;
+    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?: PaymentMethodsStyle;
+};
+declare type Props = {
+    clientKey?: string;
+    config?: AdyenPaymentConfig;
+    templateCustomerSaveToWallet?: PaymentSourceProps['templateCustomerSaveToWallet'];
+    locale?: string;
+    environment?: string;
+};
+export declare function AdyenPayment({ clientKey, config, templateCustomerSaveToWallet, environment, locale, }: Props): JSX.Element | null;
+export default AdyenPayment;

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

@@ -0,0 +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,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)=>{const browserInfo=getBrowserInfo();let control=await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments"});if(control?.payment_response?.resultCode==="Authorised")return!0;Object.keys(control?.payment_request_data).length>0===!1&&(control=await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments",attributes:{payment_request_data:{...state.data,payment_method:state.data.paymentMethod,return_url:window.location.href,origin:window.location.origin,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}}}}));const attributes={payment_request_data:{...state.data,payment_method:state.data.paymentMethod,return_url:window.location.href,origin:window.location.origin,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}},_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/esm/components/payment_source/BraintreePayment.js

@@ -0,0 +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 isEmpty from"lodash/isEmpty";import OrderContext from"../../context/OrderContext";import Parent from"../utils/Parent";import{setCustomerOrderParam}from"../../utils/localStorage";import promisify from"../../utils/promisify";const defaultConfig={styles:{input:{"font-size":"16px",color:"#3A3A3A"},".number":{"font-family":"monospace"},":focus":{color:"blue"},".valid":{color:"green"},".invalid":{color:"red"},"@media screen and (max-width: 700px)":{input:{"font-size":"14px"}}},fields:{number:{label:"Card Number",selector:"#card-number",placeholder:"4111 1111 1111 1111"},cvv:{label:"CVV",selector:"#cvv",placeholder:"123"},expirationDate:{label:"Expiration Date",selector:"#expiration-date",placeholder:"10/2022"}},submitLabel:"Set payment method"};export function BraintreePayment({authorization,config,templateCustomerSaveToWallet}){const{fields,styles,containerClassName,cardContainerClassName,fieldsContainerClassName,expDateContainerClassName,fieldLabelClassName,cvvContainerClassName,inputWrapperClassName,cardDetailsContainerClassName}={...defaultConfig,...config},[loadBraintree,setLoadBraintree]=useState(!1),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),ref=useRef(null),handleSubmitForm=async({event,hostedFieldsInstance,threeDSInstance})=>{const savePaymentSourceToCustomerWallet=event?.elements?.save_payment_source_to_customer_wallet?.checked;if(savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),hostedFieldsInstance)try{const payload=await promisify(hostedFieldsInstance).then(payload2=>payload2),billingAddress=order?.billing_address,verifyCardOptions={nonce:payload.nonce,bin:payload.details.bin,amount:order?.total_amount_with_taxes_float,email:order?.customer_email,billingAddress:{givenName:billingAddress?.first_name,surname:billingAddress?.last_name,phoneNumber:billingAddress?.phone,streetAddress:billingAddress?.line_1,countryCodeAlpha2:billingAddress?.country_code,postalCode:billingAddress?.zip_code,region:billingAddress?.state_code,locality:billingAddress?.city},onLookupComplete:(_data,next)=>{next()}},response=await threeDSInstance.verifyCard(verifyCardOptions);return response.rawCardinalSDKVerificationData.Validated&&paymentSource?(paymentSource&&await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:"braintree_payments",attributes:{payment_method_nonce:response.nonce,options:{id:response.nonce,card:{last4:response.details.lastFour,exp_year:response.details.expirationYear,exp_month:response.details.expirationMonth,brand:response.details.cardType.toLowerCase()}}}}),!0):!1}catch(error){return console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1}return!1};return useEffect(()=>{if(!ref&&authorization&&setCustomerOrderParam("_save_payment_source_to_customer_wallet","false"),authorization&&!loadBraintree&&!isEmpty(window)){const braintreeClient=require("braintree-web/client"),hostedFields=require("braintree-web/hosted-fields"),threeDSecure=require("braintree-web/three-d-secure");braintreeClient.create({authorization},(clientErr,clientInstance)=>{if(clientErr){console.error(clientErr);return}hostedFields.create({client:clientInstance,fields,styles},(hostedFieldsErr,hostedFieldsInstance)=>{if(hostedFieldsErr){console.error(hostedFieldsErr);return}setLoadBraintree(!0),threeDSecure.create({authorization,version:2},(threeDSecureErr,threeDSInstance)=>{threeDSecureErr&&(console.error("3DSecure error",threeDSecureErr),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:threeDSecureErr.message}])),ref.current&&(ref.current.onsubmit=paymentSource2=>handleSubmitForm({event:ref.current,hostedFieldsInstance,threeDSInstance,paymentSource:paymentSource2}),setPaymentRef({ref}))})})})}return()=>{setPaymentRef({ref:{current:null}}),setLoadBraintree(!1)}},[authorization,ref]),!authorization&&!loadBraintree?null:_jsx("div",{className:containerClassName,children:_jsxs("form",{ref,id:"braintree-form",onSubmit:handleSubmitForm,className:containerClassName,children:[_jsxs("div",{className:fieldsContainerClassName,children:[_jsxs("div",{className:cardContainerClassName,children:[_jsx("label",{className:fieldLabelClassName,htmlFor:"card-number",children:fields?.number?.label}),_jsx("div",{className:inputWrapperClassName,id:"card-number"})]}),_jsxs("div",{className:cardDetailsContainerClassName,children:[_jsxs("div",{className:expDateContainerClassName,children:[_jsx("label",{className:fieldLabelClassName,htmlFor:"expiration-date",children:fields?.expirationDate?.label}),_jsx("div",{className:inputWrapperClassName,id:"expiration-date"})]}),_jsxs("div",{className:cvvContainerClassName,children:[_jsx("label",{className:fieldLabelClassName,htmlFor:"cvv",children:fields?.cvv?.label}),_jsx("div",{className:inputWrapperClassName,id:"cvv"})]})]})]}),_jsx("div",{className:fieldsContainerClassName,children:templateCustomerSaveToWallet&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})})]})})}export default BraintreePayment;

package/lib/{cjs/components → esm/components/payment_source}/CheckoutComPayment.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PaymentMethodConfig } from '../reducers/PaymentMethodReducer';
+import { PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
 import { PaymentSourceProps } from './PaymentSource';
 import { FramesStyle } from 'frames-react';
 export declare type CheckoutComConfig = {

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

@@ -0,0 +1 @@
+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"}}}};export function CheckoutComPayment({publicKey,options=defaultOptions,locale="EN-GB",...p}){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,...divProps}=p,handleSubmit=async()=>{const savePaymentSourceToCustomerWallet=ref?.current?.elements?.save_payment_source_to_customer_wallet?.checked;if(savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),window.Frames){window.Frames.cardholder={name:order?.billing_address?.full_name,billingAddress:{addressLine1:order?.billing_address?.line_1,addressLine2:order?.billing_address?.line_2,zip:order?.billing_address?.zip_code,city:order?.billing_address?.city,state:order?.billing_address?.state_code,country:order?.billing_address?.country_code},phone:order?.billing_address?.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?.message}])}}return!1},lang=`${locale.toUpperCase()}-${locale.toUpperCase()}`,localization=systemLanguages.includes(lang)?lang:"EN-GB";return loaded&&show?_jsxs("form",{ref,children:[_jsx("div",{className:containerClassName,...divProps,children:_jsxs(Frames,{config:{debug:!0,publicKey,localization,...options},cardValidationChanged:e=>{e.isValid&&ref.current&&(ref.current.onsubmit=()=>handleSubmit(),setPaymentRef({ref}))},cardTokenized:data=>data,children:[_jsx(CardNumber,{}),_jsx(ExpiryDate,{}),_jsx(Cvv,{})]})}),templateCustomerSaveToWallet&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})]}):null}export default CheckoutComPayment;

package/lib/esm/components/{KlarnaPayment.d.ts → payment_source/KlarnaPayment.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PaymentMethodConfig } from '../reducers/PaymentMethodReducer';
+import { PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
 import { PaymentSourceProps } from './PaymentSource';
 declare type KlarnaPaymentProps = PaymentMethodConfig['klarnaPayment'] & JSX.IntrinsicElements['div'] & Partial<PaymentSourceProps['templateCustomerSaveToWallet']> & {
     show?: boolean;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useRef,useState}from"react";import PaymentMethodContext from"../../context/PaymentMethodContext";import OrderContext from"../../context/OrderContext";import useExternalScript from"../../utils/hooks/useExternalScript";import PlaceOrderContext from"../../context/PlaceOrderContext";function typeOfLine(lineItemType){switch(lineItemType){case"payment_methods":default:return null;case"percentage_discount_promotions":return"discount";case"shipments":return"shipping_fee";case"skus":return"physical"}}function klarnaOrderLines(lineItems){return lineItems?lineItems.map(item=>{const type=item.item_type?typeOfLine(item.item_type):null;return{name:item.name,quantity:item.quantity,total_amount:item.total_amount_cents,unit_price:item.unit_amount_cents,type}}):[]}export default function KlarnaPayment({clientToken,placeOrderCallback,locale="EN",...p}){const ref=useRef(null),{paymentSource,currentPaymentMethodType,setPaymentRef,setPaymentSource,setPaymentMethodErrors}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),{setPlaceOrder}=useContext(PlaceOrderContext),loaded=useExternalScript("https://x.klarnacdn.net/kp/lib/v1/api.js"),[klarna,setKlarna]=useState(),{containerClassName,...divProps}=p;useEffect(()=>{loaded&&window?.Klarna!==void 0&&setKlarna(window.Klarna)},[loaded,window.Klarna]),useEffect(()=>(ref.current&&paymentSource&&currentPaymentMethodType&&loaded&&klarna&&(ref.current.onsubmit=()=>handleClick(klarna),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,paymentSource,currentPaymentMethodType,loaded,klarna]);const handleClick=async kl=>{const[first]=paymentSource?.payment_methods||void 0,payment_method_category=first?.identifier,billing_address={given_name:order?.billing_address?.first_name,family_name:order?.billing_address?.last_name,email:order?.customer_email,street_address:order?.billing_address?.line_1,street_address2:null,organization_name:null,postal_code:order?.billing_address?.zip_code,city:order?.billing_address?.city,region:order?.billing_address?.state_code,phone:order?.billing_address?.phone,country:order?.billing_address?.country_code},shipping_address={given_name:order?.shipping_address?.first_name,family_name:order?.shipping_address?.last_name,email:order?.customer_email,street_address:order?.shipping_address?.line_1,street_address2:null,postal_code:order?.shipping_address?.zip_code,organization_name:null,city:order?.shipping_address?.city,region:order?.shipping_address?.state_code,phone:order?.shipping_address?.phone,country:order?.shipping_address?.country_code},klarnaData={merchant_data:order?.id,purchase_country:order?.country_code,purchase_currency:order?.currency_code,locale,shipping_address,billing_address,order_amount:order?.total_amount_cents,order_lines:klarnaOrderLines(order?.line_items)};try{kl.Payments.load({container:"#klarna-payments-container",payment_method_category},{billing_address,shipping_address},async function({show_form}){if(show_form)try{await kl.Payments.authorize({payment_method_category},klarnaData,async function(res){if(res.approved&&paymentSource&&currentPaymentMethodType){const ps=await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{auth_token:res.authorization_token}}),{placed}=setPlaceOrder&&ps&&await setPlaceOrder({paymentSource:ps})||{placed:!1};placed&&placeOrderCallback&&placeOrderCallback({placed})}})}catch(e){console.error("e",e),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:"Authorization error"}])}})}catch(e){console.error("Load Klarna libray",e)}};if(klarna&&clientToken){const[first]=paymentSource?.payment_methods||void 0;klarna.Payments.init({client_token:clientToken}),klarna.Payments.load({container:"#klarna-payments-container",payment_method_category:first?.identifier},{billing_address:{given_name:order?.billing_address?.first_name,family_name:order?.billing_address?.last_name,email:order?.customer_email,street_address:order?.billing_address?.line_1,street_address2:order?.billing_address?.line_2,postal_code:order?.billing_address?.zip_code,city:order?.billing_address?.city,region:order?.billing_address?.state_code,phone:order?.billing_address?.phone,country:order?.billing_address?.country_code},shipping_address:{given_name:order?.shipping_address?.first_name,family_name:order?.shipping_address?.last_name,street_address:order?.shipping_address?.line_1,street_address2:order?.shipping_address?.line_2,postal_code:order?.shipping_address?.zip_code,city:order?.shipping_address?.city,region:order?.shipping_address?.state_code,phone:order?.shipping_address?.phone,country:order?.shipping_address?.country_code}})}return _jsx("form",{ref,children:_jsx("div",{className:containerClassName,...divProps,children:_jsx("div",{id:"klarna-payments-container"})})})}

package/lib/esm/components/{PaymentSource.d.ts → payment_source/PaymentSource.d.ts}

@@ -1,26 +1,19 @@
 import { ReactNode } from 'react';
-import { LoaderType } from '../typings/index';
-import { CustomerCardsTemplateChildren } from './utils/PaymentCardsTemplate';
-export declare type CustomerCardsProps = {
+import { LoaderType } from '../../typings/index';
+import { CustomerCardsTemplateChildren } from '../utils/PaymentCardsTemplate';
+export interface CustomerCardsProps {
     handleClick: () => void;
-};
-export declare type CustomerSaveToWalletProps = {
+}
+export interface CustomerSaveToWalletProps {
     name: 'save_payment_source_to_customer_wallet';
-};
+}
 export declare type PaymentSourceProps = {
     children?: ReactNode;
     readonly?: boolean;
     templateCustomerCards?: CustomerCardsTemplateChildren;
     onClickCustomerCards?: () => void;
-    templateCustomerSaveToWallet?: (props: CustomerSaveToWalletProps) => ReactNode;
+    templateCustomerSaveToWallet?: (props: CustomerSaveToWalletProps) => JSX.Element;
     loader?: LoaderType;
 } & JSX.IntrinsicElements['div'];
 export declare function PaymentSource(props: PaymentSourceProps): JSX.Element;
-export declare namespace PaymentSource {
-    var propTypes: {
-        children: import("prop-types").Requireable<ReactNode | (() => ReactNode)>;
-        readonly: import("prop-types").Requireable<boolean>;
-    };
-    var displayName: string;
-}
 export default PaymentSource;

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

@@ -0,0 +1 @@
+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}=useContext(PaymentMethodChildrenContext),{order}=useContext(OrderContext),{payments}=useContext(CustomerContext),{currentPaymentMethodId,paymentSource,destroyPaymentSource}=useContext(PaymentMethodContext),[show,setShow]=useState(!1),[showCard,setShowCard]=useState(!1);useEffect(()=>(readonly?(setShow(!0),setShowCard(!0)):payment?.id===currentPaymentMethodId?(setShow(!0),getCardDetails({paymentType:payment?.payment_source_type,customerPayment:{payment_source:paymentSource}}).brand&&setShowCard(!0)):setShow(!1),()=>{setShow(!1),setShowCard(!1)}),[currentPaymentMethodId,paymentSource,payments,payment,readonly,order]);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/components/payment_source/PaymentSourceBrandIcon.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { IconBrand } from '../../context/PaymentSourceContext';
+import { ChildrenFunction } from '../../typings/index';
+interface ChildrenProps extends Omit<Props, 'children'> {
+    brand: IconBrand;
+    defaultSrc: string;
+    url: string;
+}
+declare type Props = {
+    children?: ChildrenFunction<ChildrenProps>;
+    width?: number;
+    height?: number;
+} & JSX.IntrinsicElements['img'];
+export declare function PaymentSourceBrandIcon({ src, width, children, ...p }: Props): JSX.Element;
+export default PaymentSourceBrandIcon;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{useContext,useRef}from"react";import Parent from"../utils/Parent";export function PaymentSourceBrandIcon({src,width=32,children,...p}){const{brand}=useContext(PaymentSourceContext),ref=useRef(null),defaultSrc="//data.commercelayer.app/assets/images/icons/credit-cards/color/credit-card.svg",url=src||`//data.commercelayer.app/assets/images/icons/credit-cards/color/${brand??"credit-card"}.svg`,handleError=()=>{ref.current&&(ref.current.src=defaultSrc)},parentProps={brand,defaultSrc,url,width,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("img",{ref,src:url,onError:handleError,width,...p})}export default PaymentSourceBrandIcon;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IconBrand } from '../../context/PaymentSourceContext';
+import { ChildrenFunction } from '../../typings/index';
+interface CustomComponent extends Omit<Props, 'children'> {
+    brand: IconBrand;
+}
+declare type Props = {
+    children?: ChildrenFunction<CustomComponent>;
+    label?: string;
+} & JSX.IntrinsicElements['span'];
+export declare function PaymentSourceBrandName({ children, label, ...props }: Props): JSX.Element;
+export default PaymentSourceBrandName;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{capitalize}from"lodash";import{useContext}from"react";import Parent from"../utils/Parent";export function PaymentSourceBrandName({children,label,...props}){const{brand}=useContext(PaymentSourceContext),brandName=brand&&capitalize(brand.replace("-"," ")),parentProps={brand:brandName,label,...props};return children?_jsx(Parent,{...parentProps,children}):_jsx("span",{...props,children:label||capitalize(brandName)})}export default PaymentSourceBrandName;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ChildrenFunction } from '../../typings/index';
+export declare type PaymentSourceDetailType = 'last4' | 'exp_year' | 'exp_month';
+interface ChildrenProps extends Omit<Props, 'children'> {
+    text: string;
+}
+interface Props extends Omit<JSX.IntrinsicElements['span'], 'children'> {
+    children?: ChildrenFunction<ChildrenProps>;
+    type: PaymentSourceDetailType;
+}
+export declare function PaymentSourceDetail({ type, children, ...p }: Props): JSX.Element;
+export default PaymentSourceDetail;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{has}from"lodash";import{useContext}from"react";import Parent from"../utils/Parent";export function PaymentSourceDetail({type,children,...p}){const card=useContext(PaymentSourceContext),text=has(card,type)?card[type]:type==="last4"?"****":"**",parentProps={type,text,...p};return children?_jsx(Parent,{...parentProps,children}):_jsx("span",{...p,children:text})}export default PaymentSourceDetail;

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

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { ChildrenFunction } from '../../typings/index';
+interface CustomComponent extends Omit<Props, 'children'> {
+}
+declare type Props = {
+    children?: ChildrenFunction<CustomComponent>;
+    label?: string | ReactNode;
+} & Omit<JSX.IntrinsicElements['button'], 'onClick'>;
+export declare function PaymentSourceEditButton({ children, label, ...props }: Props): JSX.Element | null;
+export default PaymentSourceEditButton;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentSourceContext from"../../context/PaymentSourceContext";import{useContext}from"react";import Parent from"../utils/Parent";export function PaymentSourceEditButton({children,label="Edit",...props}){const{showCard,handleEditClick,readonly}=useContext(PaymentSourceContext),parentProps={showCard,label,handleEditClick,...props};return children?_jsx(Parent,{...parentProps,children}):readonly?null:_jsx("button",{...props,onClick:handleEditClick,children:label})}export default PaymentSourceEditButton;

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

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentMethodContext from"../../context/PaymentMethodContext";import isFunction from"lodash/isFunction";import{useContext,useEffect,useRef}from"react";const defaultMessage="by placing the order, you will be redirected to the PayPal website to sign in and authorize the payment";export function PaypalPayment({infoMessage,...p}){const ref=useRef(null),{setPaymentSource,paymentSource,currentPaymentMethodType,setPaymentRef}=useContext(PaymentMethodContext);useEffect(()=>(ref.current&&paymentSource&&currentPaymentMethodType&&paymentSource?.approval_url&&(ref.current.onsubmit=()=>handleClick(),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,paymentSource,currentPaymentMethodType]);const handleClick=async()=>{if(paymentSource&&currentPaymentMethodType)try{return await setPaymentSource({paymentSourceId:paymentSource.id,paymentResource:currentPaymentMethodType,attributes:{metadata:{card:{id:paymentSource.id,brand:"paypal",last4:""}}}}),!0}catch{return!1}return!1};return _jsx("form",{ref,children:_jsx("div",{...p,children:_jsx("span",{className:infoMessage?.className,children:isFunction(infoMessage?.text)?infoMessage?.text():infoMessage?.text||defaultMessage})})})}export default PaypalPayment;

package/lib/esm/components/{StripePayment.d.ts → payment_source/StripePayment.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { StripeCardElementOptions, StripeElementLocale } from '@stripe/stripe-js';
-import { PaymentMethodConfig } from '../reducers/PaymentMethodReducer';
+import { PaymentMethodConfig } from '../../reducers/PaymentMethodReducer';
 import { PaymentSourceProps } from './PaymentSource';
 export declare type StripeConfig = {
     containerClassName?: string;

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

@@ -0,0 +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{CardElement,Elements,useElements,useStripe}from"@stripe/react-stripe-js";import Parent from"../utils/Parent";import OrderContext from"../../context/OrderContext";import{setCustomerOrderParam}from"../../utils/localStorage";const defaultOptions={style:{base:{fontSize:"16px",color:"#424770","::placeholder":{color:"#aab7c4"}},invalid:{color:"#9e2146"}},hidePostalCode:!0};function StripePaymentForm({options=defaultOptions,templateCustomerSaveToWallet}){const ref=useRef(null),{setPaymentSource,currentPaymentMethodType,setPaymentMethodErrors,setPaymentRef,paymentSource}=useContext(PaymentMethodContext),{order}=useContext(OrderContext),stripe=useStripe(),elements=useElements();useEffect(()=>(ref.current&&stripe&&elements&&paymentSource&&(ref.current.onsubmit=paymentSource2=>onSubmit({event:ref.current,stripe,elements,paymentSource:paymentSource2}),setPaymentRef({ref})),()=>{setPaymentRef({ref:{current:null}})}),[ref,stripe,elements,paymentSource]);const onSubmit=async({event,stripe:stripe2,elements:elements2,paymentSource:ps})=>{if(!stripe2)return!1;const savePaymentSourceToCustomerWallet=event?.elements?.save_payment_source_to_customer_wallet?.checked;savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet);const cardElement=elements2&&elements2.getElement(CardElement);if(cardElement){const billingInfo=order?.billing_address,email=order?.customer_email,billing_details={name:billingInfo?.full_name,email,phone:billingInfo?.phone,address:{city:billingInfo?.city,country:billingInfo?.country_code,line1:billingInfo?.line_1,postal_code:billingInfo?.zip_code,state:billingInfo?.state_code}},{paymentMethod}=await stripe2.createPaymentMethod({type:"card",card:cardElement,billing_details}),clientSecret=ps?.client_secret,paymentSourceId=ps?.id;if(clientSecret){const{error,paymentIntent}=await stripe2.confirmCardPayment(clientSecret,{payment_method:{card:cardElement,billing_details}});if(error)return console.error(error),setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message:error.message}]),!1;if(paymentIntent&&paymentMethod&&paymentSourceId&&currentPaymentMethodType)try{return await setPaymentSource({paymentSourceId,paymentResource:currentPaymentMethodType,attributes:{options:{...paymentMethod,setup_future_usage:"off_session"}}}),!0}catch{return!1}}}return!1};return _jsxs("form",{ref,children:[_jsx(CardElement,{options:{...defaultOptions,...options}}),templateCustomerSaveToWallet&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})]})}export function StripePayment({publishableKey,show,options,locale="auto",...p}){const[isLoaded,setIsLoaded]=useState(!1),[stripe,setStripe]=useState(null),{containerClassName,templateCustomerSaveToWallet,fonts=[],...divProps}=p;return useEffect(()=>{if(show&&publishableKey){const{loadStripe}=require("@stripe/stripe-js");(async()=>{const res=await loadStripe(publishableKey,{locale});setStripe(res),setIsLoaded(!0)})()}return()=>{setIsLoaded(!1)}},[show,publishableKey]),isLoaded&&stripe?_jsx("div",{className:containerClassName,...divProps,children:_jsx(Elements,{stripe,options:{fonts},children:_jsx(StripePaymentForm,{options,templateCustomerSaveToWallet})})}):null}export default StripePayment;

package/lib/esm/components/{WireTransferPayment.d.ts → payment_source/WireTransferPayment.d.ts}

@@ -5,6 +5,8 @@ export declare type WireTransferConfig = {
         className?: string;
     };
 };
-declare type Props = WireTransferConfig & JSX.IntrinsicElements['div'];
+declare type Props = WireTransferConfig & JSX.IntrinsicElements['div'] & {
+    'data-test-id'?: string;
+};
 export declare function WireTransferPayment({ infoMessage, ...p }: Props): JSX.Element;
 export default WireTransferPayment;