@commercelayer/react-components 4.24.1-beta.4 → 4.25.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/cjs/components/payment_methods/PaymentMethod.d.ts +8 -3
- package/lib/cjs/components/payment_methods/PaymentMethod.js +1 -1
- package/lib/cjs/components/payment_methods/PaymentMethodsContainer.d.ts +7 -1
- package/lib/cjs/components/payment_methods/PaymentMethodsContainer.js +1 -1
- package/lib/esm/components/payment_methods/PaymentMethod.d.ts +8 -3
- package/lib/esm/components/payment_methods/PaymentMethod.js +1 -1
- package/lib/esm/components/payment_methods/PaymentMethodsContainer.d.ts +7 -1
- package/lib/esm/components/payment_methods/PaymentMethodsContainer.js +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { type JSX } from "react";
|
|
2
|
-
import type { LoaderType } from "../../typings/index";
|
|
3
1
|
import type { Order, PaymentMethod as PaymentMethodType } from "@commercelayer/sdk";
|
|
2
|
+
import { type JSX } from "react";
|
|
4
3
|
import type { PaymentResource } from "../../reducers/PaymentMethodReducer";
|
|
4
|
+
import type { LoaderType } from "../../typings/index";
|
|
5
5
|
import type { DefaultChildrenType } from "../../typings/globals";
|
|
6
6
|
export interface PaymentMethodOnClickParams {
|
|
7
7
|
payment?: PaymentMethodType | Record<string, any>;
|
|
@@ -22,6 +22,11 @@ type Props = {
|
|
|
22
22
|
* Customize the loader component
|
|
23
23
|
*/
|
|
24
24
|
loader?: LoaderType;
|
|
25
|
+
/**
|
|
26
|
+
* Show loader while fetching payment methods
|
|
27
|
+
* @default undefined
|
|
28
|
+
*/
|
|
29
|
+
showLoader?: boolean;
|
|
25
30
|
/**
|
|
26
31
|
* Auto select the payment method when there is only one available
|
|
27
32
|
*/
|
|
@@ -41,5 +46,5 @@ type Props = {
|
|
|
41
46
|
clickableContainer?: never;
|
|
42
47
|
onClick?: never;
|
|
43
48
|
});
|
|
44
|
-
export declare function PaymentMethod({ children, className, activeClass, loader, clickableContainer, autoSelectSinglePaymentMethod, expressPayments, hide, onClick, sortBy, ...p }: Props): JSX.Element;
|
|
49
|
+
export declare function PaymentMethod({ children, className, activeClass, loader, clickableContainer, autoSelectSinglePaymentMethod, expressPayments, showLoader, hide, onClick, sortBy, ...p }: Props): JSX.Element;
|
|
45
50
|
export default PaymentMethod;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentMethod=PaymentMethod;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentMethod=PaymentMethod;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),CustomerContext_1=tslib_1.__importDefault(require("../../context/CustomerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),PaymentMethodChildrenContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodChildrenContext")),PaymentMethodContext_1=tslib_1.__importDefault(require("../../context/PaymentMethodContext")),PlaceOrderContext_1=tslib_1.__importDefault(require("../../context/PlaceOrderContext")),expressPaymentHelper_1=require("../../utils/expressPaymentHelper"),getLoaderComponent_1=tslib_1.__importDefault(require("../../utils/getLoaderComponent")),getPaymentAttributes_1=require("../../utils/getPaymentAttributes"),useCustomContext_1=tslib_1.__importDefault(require("../../utils/hooks/useCustomContext")),isEmpty_1=require("../../utils/isEmpty"),sortPaymentMethods_1=require("../../utils/payment-methods/sortPaymentMethods");let loadingResource=!1;function PaymentMethod(_a){var{children,className,activeClass,loader="Loading...",clickableContainer,autoSelectSinglePaymentMethod,expressPayments,showLoader,hide,onClick,sortBy}=_a,p=tslib_1.__rest(_a,["children","className","activeClass","loader","clickableContainer","autoSelectSinglePaymentMethod","expressPayments","showLoader","hide","onClick","sortBy"]);const[loading,setLoading]=(0,react_1.useState)(!0),[paymentSelected,setPaymentSelected]=(0,react_1.useState)(""),[paymentSourceCreated,setPaymentSourceCreated]=(0,react_1.useState)(!1),{paymentMethods,currentPaymentMethodId,setPaymentMethod,setLoading:setLoadingPlaceOrder,paymentSource,setPaymentSource,config,errors}=(0,useCustomContext_1.default)({context:PaymentMethodContext_1.default,contextComponentName:"PaymentMethodsContainer",currentComponentName:"PaymentMethod",key:"paymentMethods"}),{order}=(0,react_1.useContext)(OrderContext_1.default),{getCustomerPaymentSources}=(0,react_1.useContext)(CustomerContext_1.default),{status}=(0,react_1.useContext)(PlaceOrderContext_1.default);(0,react_1.useEffect)(()=>{if(paymentMethods!=null&&!(0,isEmpty_1.isEmpty)(paymentMethods)&&expressPayments){const[paymentMethod]=(0,expressPaymentHelper_1.getAvailableExpressPayments)(paymentMethods);!paymentSource&&paymentMethod!=null&&tslib_1.__awaiter(this,void 0,void 0,function*(){setLoadingPlaceOrder({loading:!0}),setPaymentSelected(paymentMethod.id);const paymentMethodId=paymentMethod?.id,paymentResource=paymentMethod?.payment_source_type;yield setPaymentMethod({paymentResource,paymentMethodId});const ps=yield setPaymentSource({paymentResource,order});ps&&paymentMethod&&onClick!=null&&(onClick({payment:paymentMethod,order,paymentSource:ps}),setTimeout(()=>{setLoading(!1)},200)),setLoadingPlaceOrder({loading:!1})})}},[!(0,isEmpty_1.isEmpty)(paymentMethods),expressPayments]),(0,react_1.useEffect)(()=>{paymentMethods!=null&&!paymentSourceCreated&&!loadingResource&&!(0,isEmpty_1.isEmpty)(paymentMethods)&&(loadingResource=!0,autoSelectSinglePaymentMethod!=null&&!expressPayments&&tslib_1.__awaiter(this,void 0,void 0,function*(){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;yield setPaymentMethod({paymentResource,paymentMethodId});let attributes={};config!=null&&paymentResource==="paypal_payments"&&(attributes=(0,getPaymentAttributes_1.getPaypalAttributes)(paymentResource,config)),config!=null&&paymentResource==="external_payments"&&(attributes=(0,getPaymentAttributes_1.getExternalPaymentAttributes)(paymentResource,config)),config!=null&&paymentResource==="checkout_com_payments"&&(attributes=(0,getPaymentAttributes_1.getCkoAttributes)(paymentResource,config));const ps=yield 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)}))},[!(0,isEmpty_1.isEmpty)(paymentMethods),order?.payment_source!=null]),(0,react_1.useEffect)(()=>(paymentMethods&&(paymentMethods.length===1&&autoSelectSinglePaymentMethod?paymentSource&&setTimeout(()=>{setLoading(!1)},200):setLoading(!1)),currentPaymentMethodId&&setPaymentSelected(currentPaymentMethodId),()=>{setLoading(!0),setPaymentSelected("")}),[paymentMethods,currentPaymentMethodId]),(0,react_1.useEffect)(()=>{console.log("showLoader",{showLoader}),showLoader!==void 0&&(showLoader&&errors?.length===0?(console.log("showLoader is true"),setLoading(!0)):setLoading(!1))},[showLoader,errors?.length]);const sortedPaymentMethods=paymentMethods!=null&&sortBy!=null?(0,sortPaymentMethods_1.sortPaymentMethods)(paymentMethods,sortBy):paymentMethods,components=sortedPaymentMethods?.filter(payment=>{if(Array.isArray(hide)){const source=payment?.payment_source_type;return!hide?.includes(source)}return typeof hide=="function"?hide(payment):!0}).map(payment=>{const isActive=currentPaymentMethodId===payment?.id,paymentMethodProps={payment,clickableContainer,paymentSelected,setPaymentSelected,expressPayments},paymentResource=payment?.payment_source_type,onClickable=clickableContainer?e=>tslib_1.__awaiter(this,void 0,void 0,function*(){var _a2;e.stopPropagation();const paymentMethodId=payment?.id,currentPaymentMethodId2=(_a2=order?.payment_method)===null||_a2===void 0?void 0:_a2.id;if(paymentMethodId===currentPaymentMethodId2||status==="placing")return;setLoadingPlaceOrder({loading:!0}),setPaymentSelected(payment.id);const{order:updatedOrder}=yield setPaymentMethod({paymentResource,paymentMethodId});onClick&&onClick({payment,order:updatedOrder}),setLoadingPlaceOrder({loading:!1})}):void 0;return(0,jsx_runtime_1.jsx)("div",Object.assign({"data-testid":paymentResource,className:`${className??""} ${isActive&&activeClass!=null?activeClass:""}`,onClick:e=>{onClickable?.(e)}},p,{children:(0,jsx_runtime_1.jsx)(PaymentMethodChildrenContext_1.default.Provider,{value:paymentMethodProps,children})}),paymentResource)});return loading?(0,getLoaderComponent_1.default)(loader):(0,jsx_runtime_1.jsx)(jsx_runtime_1.Fragment,{children:components})}exports.default=PaymentMethod;
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type JSX, type ReactNode } from "react";
|
|
2
2
|
import { type PaymentMethodConfig } from "../../reducers/PaymentMethodReducer";
|
|
3
3
|
interface Props {
|
|
4
|
+
/**
|
|
5
|
+
* The children components to render inside the PaymentMethodsContainer.
|
|
6
|
+
*/
|
|
4
7
|
children: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Optional configuration for payment methods.
|
|
10
|
+
*/
|
|
5
11
|
config?: PaymentMethodConfig;
|
|
6
12
|
}
|
|
7
13
|
export declare function PaymentMethodsContainer(props: Props): JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentMethodsContainer=PaymentMethodsContainer;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),
|
|
2
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.PaymentMethodsContainer=PaymentMethodsContainer;const tslib_1=require("tslib"),jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),CommerceLayerContext_1=tslib_1.__importDefault(require("../../context/CommerceLayerContext")),OrderContext_1=tslib_1.__importDefault(require("../../context/OrderContext")),PaymentMethodContext_1=tslib_1.__importStar(require("../../context/PaymentMethodContext")),PaymentMethodReducer_1=tslib_1.__importStar(require("../../reducers/PaymentMethodReducer")),useCustomContext_1=tslib_1.__importDefault(require("../../utils/hooks/useCustomContext")),isEmpty_1=require("../../utils/isEmpty"),localStorage_1=require("../../utils/localStorage");function PaymentMethodsContainer(props){const{children,config}=props,[state,dispatch]=(0,react_1.useReducer)(PaymentMethodReducer_1.default,PaymentMethodReducer_1.paymentMethodInitialState),{order,getOrder,setOrderErrors,include,addResourceToInclude,updateOrder,includeLoaded}=(0,useCustomContext_1.default)({context:OrderContext_1.default,contextComponentName:"OrderContainer",currentComponentName:"PaymentMethodsContainer",key:"order"}),credentials=(0,react_1.useContext)(CommerceLayerContext_1.default);function getPayMethods(){return tslib_1.__awaiter(this,void 0,void 0,function*(){order&&(yield(0,PaymentMethodReducer_1.getPaymentMethods)({order,dispatch}))})}(0,react_1.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&&(0,isEmpty_1.isEmpty)(state.config)&&(0,PaymentMethodReducer_1.setPaymentMethodConfig)(config,dispatch),credentials&&order&&!state.paymentMethods&&getPayMethods(),order?.payment_source===null&&((0,localStorage_1.setCustomerOrderParam)("_save_payment_source_to_customer_wallet","false"),dispatch({type:"setPaymentSource",payload:{paymentSource:void 0}})),order?.id&&order?.payment_source==null&&!["draft","pending"].includes(order?.status)&&!state.paymentMethods&&getOrder(order.id)},[order,credentials,include?.length,Object.keys(includeLoaded??[]).length]);const contextValue=(0,react_1.useMemo)(()=>Object.assign(Object.assign({},state),{setLoading:({loading})=>{PaymentMethodContext_1.defaultPaymentMethodContext.setLoading({loading,dispatch})},setPaymentRef:({ref})=>{(0,PaymentMethodReducer_1.setPaymentRef)({ref,dispatch})},setPaymentMethodErrors:errors=>{PaymentMethodContext_1.defaultPaymentMethodContext.setPaymentMethodErrors(errors,dispatch)},setPaymentMethod:args=>tslib_1.__awaiter(this,void 0,void 0,function*(){return yield PaymentMethodContext_1.defaultPaymentMethodContext.setPaymentMethod(Object.assign(Object.assign({},args),{config:credentials,updateOrder,order,dispatch,setOrderErrors}))}),setPaymentSource:args=>tslib_1.__awaiter(this,void 0,void 0,function*(){return yield PaymentMethodContext_1.defaultPaymentMethodContext.setPaymentSource(Object.assign(Object.assign(Object.assign({},state),args),{config:credentials,dispatch,getOrder,updateOrder,order}))}),updatePaymentSource:args=>tslib_1.__awaiter(this,void 0,void 0,function*(){yield PaymentMethodContext_1.defaultPaymentMethodContext.updatePaymentSource(Object.assign(Object.assign({},args),{config:credentials,dispatch}))}),destroyPaymentSource:args=>tslib_1.__awaiter(this,void 0,void 0,function*(){yield PaymentMethodContext_1.defaultPaymentMethodContext.destroyPaymentSource(Object.assign(Object.assign({},args),{dispatch,config:credentials,updateOrder,orderId:order?.id}))})}),[state]);return(0,jsx_runtime_1.jsx)(PaymentMethodContext_1.default.Provider,{value:contextValue,children})}exports.default=PaymentMethodsContainer;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { type JSX } from "react";
|
|
2
|
-
import type { LoaderType } from "../../typings/index";
|
|
3
1
|
import type { Order, PaymentMethod as PaymentMethodType } from "@commercelayer/sdk";
|
|
2
|
+
import { type JSX } from "react";
|
|
4
3
|
import type { PaymentResource } from "../../reducers/PaymentMethodReducer";
|
|
4
|
+
import type { LoaderType } from "../../typings/index";
|
|
5
5
|
import type { DefaultChildrenType } from "../../typings/globals";
|
|
6
6
|
export interface PaymentMethodOnClickParams {
|
|
7
7
|
payment?: PaymentMethodType | Record<string, any>;
|
|
@@ -22,6 +22,11 @@ type Props = {
|
|
|
22
22
|
* Customize the loader component
|
|
23
23
|
*/
|
|
24
24
|
loader?: LoaderType;
|
|
25
|
+
/**
|
|
26
|
+
* Show loader while fetching payment methods
|
|
27
|
+
* @default undefined
|
|
28
|
+
*/
|
|
29
|
+
showLoader?: boolean;
|
|
25
30
|
/**
|
|
26
31
|
* Auto select the payment method when there is only one available
|
|
27
32
|
*/
|
|
@@ -41,5 +46,5 @@ type Props = {
|
|
|
41
46
|
clickableContainer?: never;
|
|
42
47
|
onClick?: never;
|
|
43
48
|
});
|
|
44
|
-
export declare function PaymentMethod({ children, className, activeClass, loader, clickableContainer, autoSelectSinglePaymentMethod, expressPayments, hide, onClick, sortBy, ...p }: Props): JSX.Element;
|
|
49
|
+
export declare function PaymentMethod({ children, className, activeClass, loader, clickableContainer, autoSelectSinglePaymentMethod, expressPayments, showLoader, hide, onClick, sortBy, ...p }: Props): JSX.Element;
|
|
45
50
|
export default PaymentMethod;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{
|
|
2
|
+
import{jsx as _jsx,Fragment as _Fragment}from"react/jsx-runtime";import{useContext,useEffect,useState}from"react";import CustomerContext from"../../context/CustomerContext";import OrderContext from"../../context/OrderContext";import PaymentMethodChildrenContext from"../../context/PaymentMethodChildrenContext";import PaymentMethodContext from"../../context/PaymentMethodContext";import PlaceOrderContext from"../../context/PlaceOrderContext";import{getAvailableExpressPayments}from"../../utils/expressPaymentHelper";import getLoaderComponent from"../../utils/getLoaderComponent";import{getCkoAttributes,getExternalPaymentAttributes,getPaypalAttributes}from"../../utils/getPaymentAttributes";import useCustomContext from"../../utils/hooks/useCustomContext";import{isEmpty}from"../../utils/isEmpty";import{sortPaymentMethods}from"../../utils/payment-methods/sortPaymentMethods";let loadingResource=!1;export function PaymentMethod({children,className,activeClass,loader="Loading...",clickableContainer,autoSelectSinglePaymentMethod,expressPayments,showLoader,hide,onClick,sortBy,...p}){const[loading,setLoading]=useState(!0),[paymentSelected,setPaymentSelected]=useState(""),[paymentSourceCreated,setPaymentSourceCreated]=useState(!1),{paymentMethods,currentPaymentMethodId,setPaymentMethod,setLoading:setLoadingPlaceOrder,paymentSource,setPaymentSource,config,errors}=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)),config!=null&&paymentResource==="checkout_com_payments"&&(attributes=getCkoAttributes(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]),useEffect(()=>{console.log("showLoader",{showLoader}),showLoader!==void 0&&(showLoader&&errors?.length===0?(console.log("showLoader is true"),setLoading(!0)):setLoading(!1))},[showLoader,errors?.length]);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)}return typeof hide=="function"?hide(payment):!0}).map(payment=>{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})},paymentResource)});return loading?getLoaderComponent(loader):_jsx(_Fragment,{children:components})}export default PaymentMethod;
|
|
@@ -1,7 +1,13 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type JSX, type ReactNode } from "react";
|
|
2
2
|
import { type PaymentMethodConfig } from "../../reducers/PaymentMethodReducer";
|
|
3
3
|
interface Props {
|
|
4
|
+
/**
|
|
5
|
+
* The children components to render inside the PaymentMethodsContainer.
|
|
6
|
+
*/
|
|
4
7
|
children: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Optional configuration for payment methods.
|
|
10
|
+
*/
|
|
5
11
|
config?: PaymentMethodConfig;
|
|
6
12
|
}
|
|
7
13
|
export declare function PaymentMethodsContainer(props: Props): JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as _jsx}from"react/jsx-runtime";import
|
|
2
|
+
import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useEffect,useMemo,useReducer}from"react";import CommerceLayerContext from"../../context/CommerceLayerContext";import OrderContext from"../../context/OrderContext";import PaymentMethodContext,{defaultPaymentMethodContext}from"../../context/PaymentMethodContext";import paymentMethodReducer,{getPaymentMethods,paymentMethodInitialState,setPaymentMethodConfig,setPaymentRef}from"../../reducers/PaymentMethodReducer";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===null&&(setCustomerOrderParam("_save_payment_source_to_customer_wallet","false"),dispatch({type:"setPaymentSource",payload:{paymentSource:void 0}})),order?.id&&order?.payment_source==null&&!["draft","pending"].includes(order?.status)&&!state.paymentMethods&&getOrder(order.id)},[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;
|