@commercelayer/react-components 4.21.0-beta.1 → 4.21.0

package/lib/esm/components/orders/SubTotalAmount.d.ts

@@ -0,0 +1,4 @@
+import type { BaseAmountComponent } from '../../typings/index';
+import type { JSX } from "react";
+export declare function SubTotalAmount(props: BaseAmountComponent): JSX.Element;
+export default SubTotalAmount;

package/lib/esm/components/orders/SubTotalAmount.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import BaseOrderPrice from"../utils/BaseOrderPrice";export function SubTotalAmount(props){return _jsx(BaseOrderPrice,{base:"amount",type:"subtotal",...props})}export default SubTotalAmount;

package/lib/esm/components/orders/TaxesAmount.d.ts

@@ -0,0 +1,4 @@
+import type { BaseAmountComponent } from '../../typings/index';
+import type { JSX } from "react";
+export declare function TaxesAmount(props: BaseAmountComponent): JSX.Element;
+export default TaxesAmount;

package/lib/esm/components/orders/TaxesAmount.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import BaseOrderPrice from"../utils/BaseOrderPrice";export function TaxesAmount(props){return _jsx(BaseOrderPrice,{base:"amount",type:"total_tax",...props})}export default TaxesAmount;

package/lib/esm/components/orders/TotalAmount.d.ts

@@ -0,0 +1,4 @@
+import type { BaseAmountComponent } from "../../typings/index";
+import { type JSX } from "react";
+export declare function TotalAmount(props: BaseAmountComponent): JSX.Element | null;
+export default TotalAmount;

package/lib/esm/components/orders/TotalAmount.js

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import BaseOrderPrice from"../utils/BaseOrderPrice";import{useContext}from"react";import Parent from"../utils/Parent";import OrderContext from"../../context/OrderContext";import{manageGiftCard}from"../../utils/adyen/manageGiftCard";export function TotalAmount(props){const{manageAdyenGiftCard,order}=useContext(OrderContext);if(manageAdyenGiftCard){const giftCardData=manageGiftCard({order});if(!giftCardData)return _jsx(BaseOrderPrice,{base:"total_amount",type:"with_taxes",...props});const parentProps={price:`${giftCardData?.formattedOrderTotal}`,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("span",{...props,children:`${giftCardData?.formattedOrderTotal}`})}return _jsx(BaseOrderPrice,{base:"total_amount",type:"with_taxes",...props})}export default TotalAmount;

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

@@ -0,0 +1,14 @@
+import type { ConditionalElement } from '../../typings/index';
+import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
+import type { JSX } from "react";
+type ParcelFieldChildrenProps = TGenericChildrenProps<TResources['Parcel']>;
+type TCondition = ConditionalElement<Exclude<TResources['Parcel'], 'resource'>>;
+type Props = {
+    children?: (props: ParcelFieldChildrenProps) => JSX.Element;
+} & TCondition;
+/**
+ * @param props {@link Props}
+ * @returns
+ */
+export declare function ParcelField<P extends Props>(props: P): JSX.Element;
+export default ParcelField;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import GenericFieldComponent from"../utils/GenericFieldComponent";import ParcelChildrenContext from"../../context/ParcelChildrenContext";export function ParcelField(props){const{attribute,tagElement="span",children,...p}=props;return _jsx(GenericFieldComponent,{resource:"parcel",attribute,tagElement,context:ParcelChildrenContext,...p,children})}export default ParcelField;

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

@@ -0,0 +1,7 @@
+import type { DefaultChildrenType } from '../../typings/globals';
+import { type JSX } from 'react';
+interface Props {
+    children: DefaultChildrenType;
+}
+export declare function ParcelLineItem({ children }: Props): JSX.Element;
+export default ParcelLineItem;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import ParcelChildrenContext from"../../context/ParcelChildrenContext";import ParcelLineItemChildrenContext from"../../context/ParcelLineItemChildrenContext";import{useContext}from"react";export function ParcelLineItem({children}){const{parcel}=useContext(ParcelChildrenContext),components=parcel?.parcel_line_items?.map((parcelLineItem,key)=>_jsx(ParcelLineItemChildrenContext.Provider,{value:{parcelLineItem},children},key));return _jsx(_Fragment,{children:components})}export default ParcelLineItem;

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

@@ -0,0 +1,14 @@
+import type { ConditionalElement } from '../../typings/index';
+import { type TGenericChildrenProps, type TResources } from '../utils/GenericFieldComponent';
+import type { JSX } from "react";
+type ParcelLineItemFieldChildrenProps = TGenericChildrenProps<TResources['ParcelLineItem']>;
+type TCondition = ConditionalElement<Exclude<TResources['ParcelLineItem'], 'resource'>>;
+type Props = {
+    children?: (props: ParcelLineItemFieldChildrenProps) => JSX.Element;
+} & TCondition;
+/**
+ * @param props {@link Props}
+ * @returns
+ */
+export declare function ParcelLineItemField<P extends Props>(props: P): JSX.Element;
+export default ParcelLineItemField;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import GenericFieldComponent from"../utils/GenericFieldComponent";import ParcelLineItemChildrenContext from"../../context/ParcelLineItemChildrenContext";export function ParcelLineItemField(props){const{attribute,tagElement="span",children,...p}=props;return _jsx(GenericFieldComponent,{resource:"parcelLineItem",attribute,tagElement,context:ParcelLineItemChildrenContext,...p,children})}export default ParcelLineItemField;

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

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

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import Parent from"../utils/Parent";import ParcelChildrenContext from"../../context/ParcelChildrenContext";import useCustomContext from"../../utils/hooks/useCustomContext";export function ParcelLineItemsCount({children,...p}){const{parcel}=useCustomContext({context:ParcelChildrenContext,contextComponentName:"Parcels",currentComponentName:"ParcelLineItemsCount",key:"parcel"}),quantity=parcel?.parcel_line_items?.length??0,childrenProps={...p,quantity,parcel};return children?_jsx(Parent,{...childrenProps,children}):_jsx("span",{...p,children:quantity})}export default ParcelLineItemsCount;

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

@@ -0,0 +1,7 @@
+import { type JSX } from 'react';
+interface Props {
+    children: JSX.Element | JSX.Element[];
+    filterBy?: string[];
+}
+export declare function Parcels({ children, filterBy }: Props): JSX.Element;
+export default Parcels;

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

@@ -0,0 +1,2 @@
+"use client";
+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 @@
+import type { ChildrenFunction } from '../../typings/index';
+import type { Parcel } from '@commercelayer/sdk';
+import type { JSX } from "react";
+interface ChildrenProps extends Omit<Props, 'children'> {
+    /**
+     * Shipments of the current order
+     */
+    parcels?: Parcel[] | null;
+    /**
+     * 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,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import Parent from"../utils/Parent";import ShipmentChildrenContext from"../../context/ShipmentChildrenContext";import useCustomContext from"../../utils/hooks/useCustomContext";export function ParcelsCount({children,...p}){const{parcels}=useCustomContext({context:ShipmentChildrenContext,contextComponentName:"ShipmentsContainer",currentComponentName:"ParcelsCount",key:"parcels"}),quantity=parcels?.length??0,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 @@
+import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
+import { type JSX } from 'react';
+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,2 @@
+"use client";
+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 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";import{getPaymentAttributes}from"../../utils/getPaymentAttributes";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;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const clientKey=paymentSource?.public_key,environment=accessToken&&jwt(accessToken).test?"test":"live",paymentConfig=getPaymentAttributes({resource:paymentResource,config:config??{},keys:["adyen_payments"]})?.adyenPayment,customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>customerPayment.payment_source?.type==="adyen_payments"||customerPayment.payment_method!=null):[];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})}const hasStoredPaymentMethods=paymentSource?.payment_methods?.storedPaymentMethods!=null&&paymentSource?.payment_methods?.storedPaymentMethods.length>0;return!isGuest&&templateCustomerCards?_jsxs(_Fragment,{children:[hasStoredPaymentMethods||isEmpty(customerPayments)?null:_jsx("div",{className:p.className,children:_jsx(PaymentCardsTemplate,{paymentResource,customerPayments,children:templateCustomerCards})}),_jsx(AdyenPayment,{templateCustomerSaveToWallet,clientKey,locale,environment,config:paymentConfig})]}):_jsx(AdyenPayment,{clientKey,locale,config:paymentConfig,environment})}export default AdyenGateway;

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

@@ -0,0 +1,5 @@
+import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
+import { type JSX } from 'react';
+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,2 @@
+"use client";
+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 getCardDetails from"../../utils/getCardDetails";import isEmpty from"lodash/isEmpty";import{useContext}from"react";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";import{getPaymentAttributes}from"../../utils/getPaymentAttributes";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,paymentConfig=getPaymentAttributes({resource:paymentResource,config:config??{},keys:["braintree_payments"]})?.braintreePayment,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?_jsxs(_Fragment,{children:[isEmpty(customerPayments)?null:_jsx("div",{className:p.className,children:_jsx(PaymentCardsTemplate,{paymentResource,customerPayments,children:templateCustomerCards})}),_jsx(BraintreePayment,{templateCustomerSaveToWallet,authorization,locale,config:paymentConfig})]}):_jsx(BraintreePayment,{locale,authorization,config:paymentConfig})}export default BraintreeGateway;

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

@@ -0,0 +1,5 @@
+import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
+import { type JSX } from 'react';
+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,2 @@
+"use client";
+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?_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})]}):_jsx(CheckoutComPayment,{show,publicKey,locale,...paymentConfig})}export default CheckoutComGateway;

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +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){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_gateways/KlarnaGateway.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from 'react';
+import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
+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,2 @@
+"use client";
+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";import getCardDetails from"../../utils/getCardDetails";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=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(KlarnaPayment,{clientToken,locale,...klarnaConfig})]}):_jsx(KlarnaPayment,{clientToken,locale,...klarnaConfig})}export default KlarnaGateway;

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

@@ -0,0 +1,16 @@
+import type { LoaderType } from '../../typings/index';
+import { type JSX } from 'react';
+import type { PaymentSourceProps } from '../payment_source/PaymentSource';
+export type GatewayBaseType = Props & {
+    show: boolean;
+    loading: boolean;
+    loaderComponent: JSX.Element;
+};
+type Props = PaymentSourceProps & {
+    showCard: boolean;
+    handleEditClick: (e: MouseEvent) => void;
+    show: boolean;
+    loader?: LoaderType;
+};
+export declare function PaymentGateway({ readonly, showCard, handleEditClick, children, templateCustomerCards, templateCustomerSaveToWallet, onClickCustomerCards, show, loader, ...p }: Props): JSX.Element | null;
+export default PaymentGateway;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import OrderContext from"../../context/OrderContext";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import PaymentMethodContext from"../../context/PaymentMethodContext";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";import{getExternalPaymentAttributes,getPaypalAttributes,getStripeAttributes}from"../../utils/getPaymentAttributes";import ExternalGateway from"./ExternalGateway";import PlaceOrderContext from"../../context/PlaceOrderContext";export function PaymentGateway({readonly,showCard,handleEditClick,children,templateCustomerCards,templateCustomerSaveToWallet,onClickCustomerCards,show,loader="Loading...",...p}){const loaderComponent=getLoaderComponent(loader),[loading,setLoading]=useState(!0),{payment,expressPayments}=useContext(PaymentMethodChildrenContext),{order}=useContext(OrderContext),{getCustomerPaymentSources}=useContext(CustomerContext),{status}=useContext(PlaceOrderContext),{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&&!expressPayments){let attributes={};config!=null&&paymentResource==="paypal_payments"&&(attributes=getPaypalAttributes(paymentResource,config)),config!=null&&paymentResource==="external_payments"&&(attributes=getExternalPaymentAttributes(paymentResource,config)),config!=null&&paymentResource==="stripe_payments"&&(attributes=getStripeAttributes(paymentResource,config),attributes!=null&&attributes.return_url==null&&(attributes.return_url=window.location.href));const setPaymentSources=async()=>{order!=null&&await setPaymentSource({paymentResource,order,attributes}),getCustomerPaymentSources&&getCustomerPaymentSources()};(!paymentSource&&order?.payment_method.id&&show&&!expressPayments||(!paymentSource&&!expressPayments||paymentSource?.type!==paymentResource)&&show)&&setPaymentSources(),paymentSource?.mismatched_amounts&&show&&setPaymentSources(),order?.payment_source?.id!=null&&setLoading(!1)}return expressPayments&&show&&setLoading(!1),order?.status!=null&&!["draft","pending"].includes(order?.status)&&show&&order?.payment_source?.id!=null&&setLoading(!1),()=>{setLoading(!0)}},[order?.payment_method?.id,show,paymentSource]),useEffect(()=>(status==="placing"&&setLoading(!0),status==="standby"&&loading&&setLoading(!1),()=>{setLoading(!0)}),[status]);const gatewayConfig={readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,onClickCustomerCards,loaderComponent,templateCustomerSaveToWallet,...p};if(currentPaymentMethodType!==paymentResource)return null;if(loading)return loaderComponent;switch(paymentResource){case"adyen_payments":return _jsx(AdyenGateway,{...gatewayConfig,children});case"braintree_payments":return _jsx(BraintreeGateway,{...gatewayConfig,children});case"checkout_com_payments":return _jsx(CheckoutComGateway,{...gatewayConfig,children});case"external_payments":return _jsx(ExternalGateway,{...gatewayConfig,children});case"klarna_payments":return _jsx(KlarnaGateway,{...gatewayConfig,children});case"stripe_payments":return _jsx(StripeGateway,{...gatewayConfig,children});case"wire_transfers":return _jsx(WireTransferGateway,{...gatewayConfig,children});case"paypal_payments":return _jsx(PaypalGateway,{...gatewayConfig,children});default:return null}}export default PaymentGateway;

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

@@ -0,0 +1,5 @@
+import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
+import { type JSX } from 'react';
+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,2 @@
+"use client";
+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 getCardDetails from"../../utils/getCardDetails";import{getPaymentAttributes}from"../../utils/getPaymentAttributes";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){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 infoMessage=getPaymentAttributes({resource:paymentResource,config:config??{},keys:["paypal_payments"]})?.paypalPayment?.infoMessage;return delete p.show,delete p.templateCustomerCards,delete p.templateCustomerSaveToWallet,delete p.loading,delete p.loaderComponent,delete p.onClickCustomerCards,_jsx(PaypalPayment,{...p,infoMessage})}export default PaypalGateway;

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

@@ -0,0 +1,5 @@
+import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
+import { type JSX } from 'react';
+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,2 @@
+"use client";
+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{useContext}from"react";import PaymentCardsTemplate from"../utils/PaymentCardsTemplate";export function StripeGateway(props){const{readonly,showCard,handleEditClick,children,templateCustomerCards,show,loading,loaderComponent,templateCustomerSaveToWallet,...p}=props,{order}=useContext(OrderContext),{payment,expressPayments}=useContext(PaymentMethodChildrenContext),{payments,isGuest}=useContext(CustomerContext),{currentPaymentMethodId,config,paymentSource}=useContext(PaymentMethodContext),paymentResource="stripe_payments",locale=order?.language_code;if(!readonly&&payment?.id!==currentPaymentMethodId)return null;const publishableKey=paymentSource?.publishable_key,clientSecret=paymentSource?.client_secret,stripeConfig=config?getPaymentConfig(paymentResource,config).stripePayment:{},customerPayments=!isEmpty(payments)&&payments?payments.filter(customerPayment=>customerPayment.payment_source?.type===paymentResource):[];if(readonly||showCard){const card=getCardDetails({customerPayment:{payment_source:paymentSource},paymentType:paymentResource});card?.brand===""&&(card.brand=paymentSource?.payment_instrument?.issuer_type??"credit-card");const value={...card,showCard,handleEditClick,readonly,paymentSource};return card?.brand==null?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,clientSecret,expressPayments,locale,...stripeConfig})]}):_jsx(StripePayment,{show,publishableKey,clientSecret,locale,expressPayments,...stripeConfig})}export default StripeGateway;

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

@@ -0,0 +1,5 @@
+import type { GatewayBaseType } from '../payment_gateways/PaymentGateway';
+import { type JSX } from 'react';
+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,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import WireTransferPayment from"../payment_source/WireTransferPayment";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 WireTransferGateway(props){const{readonly,showCard,handleEditClick,children,...p}=props,{payment}=useContext(PaymentMethodChildrenContext),{order}=useContext(OrderContext),{currentPaymentMethodId,config,paymentSource}=useContext(PaymentMethodContext),paymentResource="wire_transfers";if(!readonly&&payment?.id!==currentPaymentMethodId)return null;if(readonly){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 wireTransferConfig=config&&paymentResource?getPaymentConfig(paymentResource,config):{};return _jsx(WireTransferPayment,{...p,...wireTransferConfig?.wireTransfer})}export default WireTransferGateway;

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

@@ -0,0 +1,45 @@
+import { type JSX } from 'react';
+import type { LoaderType } from '../../typings/index';
+import type { Order, PaymentMethod as PaymentMethodType } from '@commercelayer/sdk';
+import type { PaymentResource } from '../../reducers/PaymentMethodReducer';
+import type { DefaultChildrenType } from '../../typings/globals';
+export interface PaymentMethodOnClickParams {
+    payment?: PaymentMethodType | Record<string, any>;
+    order?: Order;
+    paymentSource?: Order['payment_source'];
+}
+type Props = {
+    /**
+     * Hide payment methods by an array of strings or a function that returns a boolean
+     */
+    hide?: PaymentResource[] | ((payment: PaymentMethodType) => boolean);
+    children: DefaultChildrenType;
+    /**
+     * Set CSS classes when the payment method is selected
+     */
+    activeClass?: string;
+    /**
+     * Customize the loader component
+     */
+    loader?: LoaderType;
+    /**
+     * Auto select the payment method when there is only one available
+     */
+    autoSelectSinglePaymentMethod?: boolean | (() => void);
+    /**
+     * Enable express payment. Other payment methods will be disabled.
+     */
+    expressPayments?: boolean;
+    /**
+     * Sort payment methods by an array of strings
+     */
+    sortBy?: Array<PaymentMethodType['payment_source_type']>;
+} & Omit<JSX.IntrinsicElements['div'], 'onClick' | 'children'> & ({
+    clickableContainer: true;
+    onClick?: (params: PaymentMethodOnClickParams) => void;
+} | {
+    clickableContainer?: never;
+    onClick?: never;
+});
+export declare function PaymentMethod({ children, className, activeClass, loader, clickableContainer, autoSelectSinglePaymentMethod, expressPayments, hide, onClick, sortBy, ...p }: Props): JSX.Element;
+export default PaymentMethod;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useState,useEffect,useContext}from"react";import PaymentMethodContext from"../../context/PaymentMethodContext";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import getLoaderComponent from"../../utils/getLoaderComponent";import useCustomContext from"../../utils/hooks/useCustomContext";import OrderContext from"../../context/OrderContext";import CustomerContext from"../../context/CustomerContext";import{getExternalPaymentAttributes,getPaypalAttributes}from"../../utils/getPaymentAttributes";import{isEmpty}from"../../utils/isEmpty";import{getAvailableExpressPayments}from"../../utils/expressPaymentHelper";import PlaceOrderContext from"../../context/PlaceOrderContext";import{sortPaymentMethods}from"../../utils/payment-methods/sortPaymentMethods";let loadingResource=!1;export function PaymentMethod({children,className,activeClass,loader="Loading...",clickableContainer,autoSelectSinglePaymentMethod,expressPayments,hide,onClick,sortBy,...p}){const[loading,setLoading]=useState(!0),[paymentSelected,setPaymentSelected]=useState(""),[paymentSourceCreated,setPaymentSourceCreated]=useState(!1),{paymentMethods,currentPaymentMethodId,setPaymentMethod,setLoading:setLoadingPlaceOrder,paymentSource,setPaymentSource,config}=useCustomContext({context:PaymentMethodContext,contextComponentName:"PaymentMethodsContainer",currentComponentName:"PaymentMethod",key:"paymentMethods"}),{order}=useContext(OrderContext),{getCustomerPaymentSources}=useContext(CustomerContext),{status}=useContext(PlaceOrderContext);useEffect(()=>{if(paymentMethods!=null&&!isEmpty(paymentMethods)&&expressPayments){const[paymentMethod]=getAvailableExpressPayments(paymentMethods);!paymentSource&&paymentMethod!=null&&(async()=>{setLoadingPlaceOrder({loading:!0}),setPaymentSelected(paymentMethod.id);const paymentMethodId=paymentMethod?.id,paymentResource=paymentMethod?.payment_source_type;await setPaymentMethod({paymentResource,paymentMethodId});const ps=await setPaymentSource({paymentResource,order});ps&&paymentMethod&&onClick!=null&&(onClick({payment:paymentMethod,order,paymentSource:ps}),setTimeout(()=>{setLoading(!1)},200)),setLoadingPlaceOrder({loading:!1})})()}},[!isEmpty(paymentMethods),expressPayments]),useEffect(()=>{paymentMethods!=null&&!paymentSourceCreated&&!loadingResource&&!isEmpty(paymentMethods)&&(loadingResource=!0,autoSelectSinglePaymentMethod!=null&&!expressPayments&&(async()=>{if(paymentMethods.length===1){const[paymentMethod]=paymentMethods??[];if(paymentMethod&&!paymentSource){setLoadingPlaceOrder({loading:!0}),setPaymentSelected(paymentMethod.id);const paymentMethodId=paymentMethod?.id,paymentResource=paymentMethod?.payment_source_type;await setPaymentMethod({paymentResource,paymentMethodId});let attributes={};config!=null&&paymentResource==="paypal_payments"&&(attributes=getPaypalAttributes(paymentResource,config)),config!=null&&paymentResource==="external_payments"&&(attributes=getExternalPaymentAttributes(paymentResource,config));const ps=await setPaymentSource({paymentResource,order,attributes});ps&&paymentMethod&&onClick!=null&&(setPaymentSourceCreated(!0),onClick({payment:paymentMethod,order,paymentSource:ps}),setTimeout(()=>{setLoading(!1)},200)),getCustomerPaymentSources&&getCustomerPaymentSources(),setLoadingPlaceOrder({loading:!1})}typeof autoSelectSinglePaymentMethod=="function"&&autoSelectSinglePaymentMethod()}else setTimeout(()=>{setLoading(!1)},200)})())},[!isEmpty(paymentMethods),order?.payment_source!=null]),useEffect(()=>(paymentMethods&&(paymentMethods.length===1&&autoSelectSinglePaymentMethod?paymentSource&&setTimeout(()=>{setLoading(!1)},200):setLoading(!1)),currentPaymentMethodId&&setPaymentSelected(currentPaymentMethodId),()=>{setLoading(!0),setPaymentSelected("")}),[paymentMethods,currentPaymentMethodId]);const components=(paymentMethods!=null&&sortBy!=null?sortPaymentMethods(paymentMethods,sortBy):paymentMethods)?.filter(payment=>{if(Array.isArray(hide)){const source=payment?.payment_source_type;return!hide?.includes(source)}else if(typeof hide=="function")return hide(payment);return!0}).map((payment,k)=>{const isActive=currentPaymentMethodId===payment?.id,paymentMethodProps={payment,clickableContainer,paymentSelected,setPaymentSelected,expressPayments},paymentResource=payment?.payment_source_type,onClickable=clickableContainer?async e=>{e.stopPropagation();const paymentMethodId=payment?.id,currentPaymentMethodId2=order?.payment_method?.id;if(paymentMethodId===currentPaymentMethodId2||status==="placing")return;setLoadingPlaceOrder({loading:!0}),setPaymentSelected(payment.id);const{order:updatedOrder}=await setPaymentMethod({paymentResource,paymentMethodId});onClick&&onClick({payment,order:updatedOrder}),setLoadingPlaceOrder({loading:!1})}:void 0;return _jsx("div",{"data-testid":paymentResource,className:`${className??""} ${isActive&&activeClass!=null?activeClass:""}`,onClick:e=>{onClickable?.(e)},...p,children:_jsx(PaymentMethodChildrenContext.Provider,{value:paymentMethodProps,children})},k)});return loading?getLoaderComponent(loader):_jsx(_Fragment,{children:components})}export default PaymentMethod;

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

@@ -0,0 +1,10 @@
+import type { ChildrenFunction } from '../../typings/index';
+import type { JSX } from "react";
+interface ChildrenProps extends Omit<Props, 'children'> {
+    labelName: string;
+}
+interface Props extends Omit<JSX.IntrinsicElements['label'], 'children'> {
+    children?: ChildrenFunction<ChildrenProps>;
+}
+export declare function PaymentMethodName(props: Props): JSX.Element;
+export default PaymentMethodName;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import Parent from"../utils/Parent";import useCustomContext from"../../utils/hooks/useCustomContext";export function PaymentMethodName(props){const{payment}=useCustomContext({context:PaymentMethodChildrenContext,contextComponentName:"PaymentMethod",currentComponentName:"PaymentMethodName",key:"payment"}),labelName=payment?.name,htmlFor=payment?.payment_source_type,paymentGateway=payment?.payment_gateway,parentProps={htmlFor,labelName,paymentGateway,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("label",{htmlFor,...props,children:labelName})}export default PaymentMethodName;

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

@@ -0,0 +1,8 @@
+import { type JSX } from 'react';
+import type { BaseAmountComponent } from '../../typings/index';
+interface Props extends BaseAmountComponent {
+    type?: 'amount';
+    labelFree?: string;
+}
+export declare function PaymentMethodPrice(props: Props): JSX.Element;
+export default PaymentMethodPrice;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useState,useEffect}from"react";import getAmount from"../../utils/getAmount";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import Parent from"../utils/Parent";import useCustomContext from"../../utils/hooks/useCustomContext";export function PaymentMethodPrice(props){const{format="formatted",type="amount",labelFree="Free",...p}=props,{payment}=useCustomContext({context:PaymentMethodChildrenContext,contextComponentName:"PaymentMethod",currentComponentName:"PaymentMethodPrice",key:"payment"}),[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})}export default PaymentMethodPrice;

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

@@ -0,0 +1,17 @@
+import { type ChangeEvent, type JSX } from 'react';
+import type { Order, PaymentMethod } from '@commercelayer/sdk';
+import type { ChildrenFunction } from '../../typings/index';
+interface ChildrenProps extends Omit<Props, 'children'> {
+    checked: boolean;
+    handleOnChange: (event: ChangeEvent<HTMLInputElement>) => Promise<void>;
+}
+interface TOnChangeParams {
+    payment?: PaymentMethod | Record<string, any>;
+    order?: Order;
+}
+type Props = {
+    children?: ChildrenFunction<ChildrenProps>;
+    onChange?: (params: TOnChangeParams) => void;
+} & JSX.IntrinsicElements['input'];
+export declare function PaymentMethodRadioButton(props: Props): JSX.Element;
+export default PaymentMethodRadioButton;

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

@@ -0,0 +1,2 @@
+"use client";
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import Parent from"../utils/Parent";import PaymentMethodContext from"../../context/PaymentMethodContext";import OrderContext from"../../context/OrderContext";import useCustomContext from"../../utils/hooks/useCustomContext";import PlaceOrderContext from"../../context/PlaceOrderContext";export function PaymentMethodRadioButton(props){const{onChange,...p}=props,{payment,paymentSelected,setPaymentSelected,clickableContainer}=useCustomContext({context:PaymentMethodChildrenContext,contextComponentName:"PaymentMethod",currentComponentName:"PaymentMethodRadioButton",key:"payment"}),{order}=useContext(OrderContext),{setPaymentMethod,setLoading}=useContext(PaymentMethodContext),{status}=useContext(PlaceOrderContext),[disabled,setDisabled]=useState(!1),orderId=order?.id||"",paymentResource=payment?.payment_source_type,paymentMethodId=payment?.id??"",name=`payment-${orderId}`,checked=paymentSelected===payment?.id;useEffect(()=>{setDisabled(status==="placing")},[status]);const handleOnChange=async e=>{if(e.stopPropagation(),!checked){if(setPaymentSelected&&setPaymentSelected(paymentMethodId),setLoading({loading:!0}),!clickableContainer){const{order:order2}=await setPaymentMethod({paymentResource,paymentMethodId});onChange&&onChange({payment,order:order2})}setLoading({loading:!1})}},id=payment?.payment_source_type,parentProps={handleOnChange,checked,id,name,disabled,...props};return props.children?_jsx(Parent,{...parentProps,children:props.children}):_jsx("input",{title:name,type:"radio",id,onChange:e=>{handleOnChange(e)},checked,disabled,...p})}export default PaymentMethodRadioButton;

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

@@ -0,0 +1,8 @@
+import { type ReactNode, type JSX } from 'react';
+import { type 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,2 @@
+"use client";
+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 useCustomContext from"../../utils/hooks/useCustomContext";import{isEmpty}from"../../utils/isEmpty";import{setCustomerOrderParam}from"../../utils/localStorage";export function PaymentMethodsContainer(props){const{children,config}=props,[state,dispatch]=useReducer(paymentMethodReducer,paymentMethodInitialState),{order,getOrder,setOrderErrors,include,addResourceToInclude,updateOrder,includeLoaded}=useCustomContext({context:OrderContext,contextComponentName:"OrderContainer",currentComponentName:"PaymentMethodsContainer",key:"order"}),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&&(setCustomerOrderParam("_save_payment_source_to_customer_wallet","false"),dispatch({type:"setPaymentSource",payload:{paymentSource:void 0}}))},[order,credentials,include?.length,Object.keys(includeLoaded??[]).length]);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,66 @@
+import { type JSX } from "react";
+import type { PaymentSourceProps } from "./PaymentSource";
+import { type CardConfiguration, type CoreConfiguration, type DropinConfiguration, type PayPalConfiguration, type UIElement, type UIElementProps } from "@adyen/adyen-web/auto";
+interface PaymentMethodsStyle {
+    card?: CardConfiguration["styles"];
+    paypal?: PayPalConfiguration["style"];
+}
+/**
+ * Configuration options for the Adyen payment component.
+ */
+export interface AdyenPaymentConfig {
+    /**
+     * Optional CSS class name for the card container.
+     */
+    cardContainerClassName?: string;
+    /**
+     * Optional CSS class name for the 3D Secure container.
+     * @deprecated
+     */
+    threeDSecureContainerClassName?: string;
+    /**
+     * Callback function to be called when an order is placed.
+     * @param response - An object containing the placement status.
+     */
+    placeOrderCallback?: (response: {
+        placed: boolean;
+    }) => void;
+    /**
+     * Optional styles for the payment methods.
+     */
+    styles?: PaymentMethodsStyle;
+    /**
+     * Configuration options for the payment methods.
+     */
+    paymentMethodsConfiguration?: DropinConfiguration["paymentMethodsConfiguration"];
+    /**
+     * Callback function to disable a stored payment method.
+     * @param props - An object containing the recurring detail reference and shopper reference.
+     * @returns A promise that resolves to a boolean indicating whether the stored payment method was disabled.
+     */
+    onDisableStoredPaymentMethod?: (props: {
+        recurringDetailReference: string;
+        shopperReference: string | undefined;
+    }) => Promise<boolean>;
+    /**
+     * Callback function to be called when the Adyen component is ready.
+     * @returns void.
+     */
+    onReady?: () => void;
+    /**
+     * onSelect callback function to be called when a payment method is selected.
+     * @param component - The selected payment method component.
+     * @returns void.
+     */
+    onSelect?: (component: UIElement<UIElementProps>) => void;
+    giftcardErrorComponent?: (message: string) => JSX.Element;
+}
+interface Props {
+    clientKey?: string;
+    config?: AdyenPaymentConfig;
+    templateCustomerSaveToWallet?: PaymentSourceProps["templateCustomerSaveToWallet"];
+    locale?: CoreConfiguration["locale"];
+    environment?: CoreConfiguration["environment"];
+}
+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,2 @@
+"use client";
+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{AdyenCheckout,Dropin}from"@adyen/adyen-web/auto";import Parent from"../utils/Parent";import browserInfo,{cleanUrlBy}from"../../utils/browserInfo";import PlaceOrderContext from"../../context/PlaceOrderContext";import OrderContext from"../../context/OrderContext";import{getPublicIP}from"../../utils/getPublicIp";import CustomerContext from"../../context/CustomerContext";const defaultConfig={};export function AdyenPayment({clientKey,config,templateCustomerSaveToWallet,environment="test",locale="en_US"}){const{cardContainerClassName,styles,onDisableStoredPaymentMethod,giftcardErrorComponent,onReady,onSelect}={...defaultConfig,...config},[loadAdyen,setLoadAdyen]=useState(!1),[checkout,setCheckout]=useState(),[giftcardError,setGiftcardError]=useState(null),{setPaymentSource,paymentSource,setPaymentMethodErrors,currentPaymentMethodType,setPaymentRef,currentCustomerPaymentSourceId}=useContext(PaymentMethodContext),{order,updateOrder}=useContext(OrderContext),{placeOrderButtonRef,setPlaceOrder}=useContext(PlaceOrderContext),{customers}=useContext(CustomerContext),ref=useRef(null),dropinRef=useRef(null),handleSubmit=async e=>{const savePaymentSourceToCustomerWallet=e?.elements?.save_payment_source_to_customer_wallet?.checked;return savePaymentSourceToCustomerWallet&&setCustomerOrderParam("_save_payment_source_to_customer_wallet",savePaymentSourceToCustomerWallet),dropinRef.current&&dropinRef.current.submit(),!1},handleChange=async state=>{state.isValid&&ref.current&&(ref.current.onsubmit=async()=>await handleSubmit(ref.current),setPaymentRef({ref}))},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}),resultCode=pSource?.payment_response?.resultCode;if(["Authorised","Pending","Received"].includes(resultCode))return placeOrderButtonRef?.current!=null&&(placeOrderButtonRef.current.disabled&&(placeOrderButtonRef.current.disabled=!1),placeOrderButtonRef.current.click()),{resultCode};if(["Cancelled","Refused"].includes(resultCode)){const message=pSource?.payment_response?.refusalReason;setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType,message}]),component&&component.mount("#adyen-dropin")}return{resultCode}}catch(error){return console.error("Adyen additional details error:",error),{resultCode:"Error"}}},onSubmit=async(state,component)=>{const url=cleanUrlBy(),{type:currentPaymentMethodType2}=state.data.paymentMethod,shopperIp=await getPublicIP(),control=await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments"}),controlCode=control?.payment_response?.resultCode,paymentMethodType=control?.payment_response?.paymentMethod?.type??control?.payment_request_data?.payment_method?.type;if(controlCode==="Authorised"&&paymentMethodType!=="giftcard")return{resultCode:controlCode};const attributes={payment_request_data:{...state.data,payment_method:state.data.paymentMethod,return_url:url,origin:window.location.origin,redirect_from_issuer_method:"GET",shopper_ip:shopperIp,shopperInteraction:"Ecommerce",recurringProcessingModel:"CardOnFile",browser_info:{...browserInfo()}}};delete attributes.payment_request_data.paymentMethod;try{if(await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments",attributes}),order?.id==null)return console.error("Order id is missing"),{resultCode:"Error"};if(["Cancelled","Refused"].includes(controlCode)&&paymentMethodType==="giftcard"&&currentPaymentMethodType2!=="giftcard"){const availableGiftCardAmount=Number.parseInt(control?.payment_response?.additionalData?.currentBalanceValue),totalPartialAmount=order?.total_amount_with_taxes_cents!=null&&availableGiftCardAmount!=null?order?.total_amount_with_taxes_cents-availableGiftCardAmount:0;return await updateOrder({id:order.id,attributes:{_authorization_amount_cents:totalPartialAmount,_place:!0}}),await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments",attributes:{payment_request_data:control?.payment_request_data}}),await updateOrder({id:order.id,attributes:{_authorize:!0}}),{resultCode:"Authorised",paymentMethodType:currentPaymentMethodType2}}if(currentPaymentMethodType2==="giftcard"){const firstAuthorization=await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments",attributes:{_authorize:1}}),resultCode2=firstAuthorization?.payment_response?.resultCode,refusalReasonCode=firstAuthorization?.payment_response?.refusalReasonCode,errorCode=firstAuthorization?.payment_response?.errorCode;if(["Cancelled","Refused"].includes(resultCode2)&&refusalReasonCode!=="12"||errorCode){const message=firstAuthorization?.payment_response?.refusalReason??firstAuthorization?.payment_response?.message;return{resultCode:errorCode?"Refused":resultCode2,message}}return{resultCode:"Authorised",paymentMethodType:currentPaymentMethodType2}}const res=await setPaymentSource({paymentSourceId:paymentSource?.id,paymentResource:"adyen_payments",attributes:{_authorize:1}}),action=res?.payment_response?.action,resultCode=res?.payment_response?.resultCode;if(action!=null)return{resultCode,action};const issuerType=res?.payment_instrument?.issuer_type;if(["Authorised","Pending","Received"].includes(resultCode))return["apple pay","google pay"].includes(issuerType)&&setPlaceOrder!=null?(await setPlaceOrder({paymentSource:res,currentCustomerPaymentSourceId}),{resultCode}):(placeOrderButtonRef?.current!=null&&(placeOrderButtonRef.current.disabled&&(placeOrderButtonRef.current.disabled=!1),placeOrderButtonRef.current.click()),{resultCode});if(["Cancelled","Refused"].includes(resultCode)){const message=res?.payment_response?.refusalReason;setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType2,message}]),component&&component.mount("#adyen-dropin")}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:currentPaymentMethodType2,message}])}return{resultCode,paymentMethodType:currentPaymentMethodType2}}catch(error){const{message}=error;return setPaymentMethodErrors([{code:"PAYMENT_INTENT_AUTHENTICATION_FAILURE",resource:"payment_methods",field:currentPaymentMethodType2,message:message??"An error occurred"}]),{resultCode:"Error"}}};return useEffect(()=>{const paymentMethodsResponse={paymentMethods:paymentSource?.payment_methods?.paymentMethods?paymentSource?.payment_methods.paymentMethods:[],storedPaymentMethods:paymentSource?.payment_methods?.storedPaymentMethods?paymentSource?.payment_methods.storedPaymentMethods:[]};paymentMethodsResponse.paymentMethods.length===0&&console.error("Payment methods are not available. Please, check your Adyen configuration.");const showStoredPaymentMethods=paymentSource?.payment_methods?.storedPaymentMethods!=null,options={locale:order?.language_code??locale,environment,clientKey,amount:{currency:order?.currency_code||"",value:order?.total_amount_with_taxes_cents||0},countryCode:order?.country_code||"",paymentMethodsResponse,showPayButton:!1,onAdditionalDetails:(state,element,actions)=>{(async()=>{const{resultCode}=await handleOnAdditionalDetails(state,element);["Cancelled","Refused"].includes(resultCode)?actions.reject():actions.resolve({resultCode})})()},onChange:state=>{handleChange(state)},onSubmit:(state,element,actions)=>{(async()=>{const{resultCode,action,message}=await onSubmit(state,element);["Cancelled","Refused"].includes(resultCode)?(actions.reject(),message&&setGiftcardError(message)):action!=null?dropinRef.current?.handleAction(action):(actions.resolve({resultCode}),dropinRef.current?.mount("#adyen-dropin"),setGiftcardError(null))})()}};if(!ref&&clientKey&&setCustomerOrderParam("_save_payment_source_to_customer_wallet","false"),clientKey&&!loadAdyen&&window&&!checkout){const initializeAdyen=async()=>{const checkout2=await AdyenCheckout(options),dropin=new Dropin(checkout2,{disableFinalAnimation:!0,showRemovePaymentMethodButton:showStoredPaymentMethods,instantPaymentTypes:["applepay","googlepay"],paymentMethodsConfiguration:{showStoredPaymentMethods,paypal:{showPayButton:!0,style:styles?.paypal,...config?.paymentMethodsConfiguration?.paypal},card:{enableStoreDetails:showStoredPaymentMethods,styles:styles?.card,holderNameRequired:!1,...config?.paymentMethodsConfiguration?.card},giftcard:{showPayButton:!0,...config?.paymentMethodsConfiguration?.giftcard},...config?.paymentMethodsConfiguration},onDisableStoredPaymentMethod:state=>{const recurringDetailReference=state,shopperReference=customers?.shopper_reference??void 0;onDisableStoredPaymentMethod?.({recurringDetailReference,shopperReference}).then(response=>{response?setPaymentSource({paymentResource:"adyen_payments",order,attributes:{}}):console.error("onDisableStoredPaymentMethod error")}).catch(error=>{console.error("onDisableStoredPaymentMethod error",error)})},onSelect:component=>{const id=component._id;id.search("scheme")===-1&&ref.current&&(id.search("paypal")===-1?ref.current.onsubmit=async()=>await handleSubmit(ref.current):ref.current.onsubmit=null,setPaymentRef({ref})),onSelect&&onSelect(component)},onReady(){onReady&&onReady()}}).mount("#adyen-dropin");dropin&&checkout2&&(dropinRef.current=dropin,setCheckout(dropin),setLoadAdyen(!0))};dropinRef.current||initializeAdyen()}return()=>{setPaymentRef({ref:{current:null}}),setLoadAdyen(!1)}},[clientKey,ref!=null]),!clientKey&&!loadAdyen&&!checkout?null:_jsxs("form",{ref,onSubmit:e=>{handleSubmit(e)},children:[_jsx("div",{className:cardContainerClassName,id:"adyen-dropin"}),giftcardError!=null&&giftcardErrorComponent?giftcardErrorComponent(giftcardError):null,templateCustomerSaveToWallet&&_jsx(Parent,{name:"save_payment_source_to_customer_wallet",children:templateCustomerSaveToWallet})]})}export default AdyenPayment;

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

@@ -0,0 +1,32 @@
+import { type JSX } from 'react';
+import type { PaymentSourceProps } from './PaymentSource';
+import type { HostedFieldFieldOptions } from 'braintree-web';
+type BraintreeHostedFields<Type> = {
+    [Property in keyof Type]: {
+        label?: string;
+    } & Type[Property];
+};
+export interface BraintreeConfig {
+    containerClassName?: string;
+    cardContainerClassName?: string;
+    expDateContainerClassName?: string;
+    fieldsContainerClassName?: string;
+    cvvContainerClassName?: string;
+    cardDetailsContainerClassName?: string;
+    fieldLabelClassName?: string;
+    inputWrapperClassName?: string;
+    fields?: BraintreeHostedFields<HostedFieldFieldOptions>;
+    styles?: Record<string, Record<string, string>>;
+    /**
+     * Force challenge request for 3D Secure authentication. Default is true.
+     */
+    challengeRequested?: boolean;
+}
+interface Props {
+    authorization: string;
+    config?: BraintreeConfig;
+    templateCustomerSaveToWallet?: PaymentSourceProps['templateCustomerSaveToWallet'];
+    locale?: string;
+}
+export declare function BraintreePayment({ authorization, config, templateCustomerSaveToWallet }: Props): JSX.Element | null;
+export default BraintreePayment;

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

@@ -0,0 +1,2 @@
+"use client";
+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);if(response?.liabilityShiftPossible===!0&&response?.liabilityShifted===!0&&paymentSource!=null)return 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;throw new Error(`3D Secure authentication failed - ${response?.threeDSecureInfo?.status}`)}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,challengeRequested:config?.challengeRequested??!0},(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=async paymentSource2=>await 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;