From f5a4b648925b9f1feb000d8d94e74be1c389399f Mon Sep 17 00:00:00 2001 From: Alessandro Casazza Date: Mon, 23 Jun 2025 11:43:03 +0200 Subject: [PATCH 1/4] Add new prop `showLoader` in `PaymentMethod` component --- .../payment_methods/PaymentMethod.tsx | 50 +++++++++++++------ .../PaymentMethodsContainer.tsx | 25 ++++++---- 2 files changed, 49 insertions(+), 26 deletions(-) diff --git a/packages/react-components/src/components/payment_methods/PaymentMethod.tsx b/packages/react-components/src/components/payment_methods/PaymentMethod.tsx index 3780553c..51d78272 100644 --- a/packages/react-components/src/components/payment_methods/PaymentMethod.tsx +++ b/packages/react-components/src/components/payment_methods/PaymentMethod.tsx @@ -1,31 +1,31 @@ +import type { + Order, + PaymentMethod as PaymentMethodType, +} from "@commercelayer/sdk" import { - useState, - useEffect, + type JSX, type MouseEvent, useContext, - type JSX, + useEffect, + useState, } from "react" -import PaymentMethodContext from "#context/PaymentMethodContext" +import CustomerContext from "#context/CustomerContext" +import OrderContext from "#context/OrderContext" import PaymentMethodChildrenContext from "#context/PaymentMethodChildrenContext" -import type { LoaderType } from "#typings" -import getLoaderComponent from "#utils/getLoaderComponent" -import type { - Order, - PaymentMethod as PaymentMethodType, -} from "@commercelayer/sdk" +import PaymentMethodContext from "#context/PaymentMethodContext" +import PlaceOrderContext from "#context/PlaceOrderContext" import type { PaymentResource } from "#reducers/PaymentMethodReducer" -import useCustomContext from "#utils/hooks/useCustomContext" +import type { LoaderType } from "#typings" import type { DefaultChildrenType } from "#typings/globals" -import OrderContext from "#context/OrderContext" -import CustomerContext from "#context/CustomerContext" +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 { getAvailableExpressPayments } from "#utils/expressPaymentHelper" -import PlaceOrderContext from "#context/PlaceOrderContext" import { sortPaymentMethods } from "#utils/payment-methods/sortPaymentMethods" export interface PaymentMethodOnClickParams { @@ -48,6 +48,11 @@ type Props = { * Customize the loader component */ loader?: LoaderType + /** + * Show loader while fetching payment methods + * @default undefined + */ + showLoader?: boolean /** * Auto select the payment method when there is only one available */ @@ -82,6 +87,7 @@ export function PaymentMethod({ clickableContainer, autoSelectSinglePaymentMethod, expressPayments, + showLoader, hide, onClick, sortBy, @@ -98,6 +104,7 @@ export function PaymentMethod({ paymentSource, setPaymentSource, config, + errors, } = useCustomContext({ context: PaymentMethodContext, contextComponentName: "PaymentMethodsContainer", @@ -219,7 +226,18 @@ export function PaymentMethod({ setPaymentSelected("") } }, [paymentMethods, currentPaymentMethodId]) - + useEffect(() => { + console.log("showLoader", { showLoader }) + // If showLoader is undefined, we don't change the loading + if (showLoader !== undefined) { + if (showLoader && errors?.length === 0) { + console.log("showLoader is true") + setLoading(true) + } else { + setLoading(false) + } + } + }, [showLoader, errors?.length]) const sortedPaymentMethods = paymentMethods != null && sortBy != null ? sortPaymentMethods(paymentMethods, sortBy) diff --git a/packages/react-components/src/components/payment_methods/PaymentMethodsContainer.tsx b/packages/react-components/src/components/payment_methods/PaymentMethodsContainer.tsx index abd255ad..dfa41f1c 100644 --- a/packages/react-components/src/components/payment_methods/PaymentMethodsContainer.tsx +++ b/packages/react-components/src/components/payment_methods/PaymentMethodsContainer.tsx @@ -1,32 +1,37 @@ -/* eslint-disable @typescript-eslint/no-unsafe-argument */ -import PaymentMethodContext, { - defaultPaymentMethodContext, -} from "#context/PaymentMethodContext" import { + type JSX, type ReactNode, useContext, useEffect, - useReducer, useMemo, - type JSX, + useReducer, } from "react" +import CommerceLayerContext from "#context/CommerceLayerContext" +import OrderContext from "#context/OrderContext" +import PaymentMethodContext, { + defaultPaymentMethodContext, +} from "#context/PaymentMethodContext" import paymentMethodReducer, { - paymentMethodInitialState, getPaymentMethods, type PaymentMethodConfig, - setPaymentMethodConfig, type PaymentRef, + paymentMethodInitialState, + setPaymentMethodConfig, setPaymentRef, } from "#reducers/PaymentMethodReducer" -import OrderContext from "#context/OrderContext" -import CommerceLayerContext from "#context/CommerceLayerContext" import type { BaseError } from "#typings/errors" import useCustomContext from "#utils/hooks/useCustomContext" import { isEmpty } from "#utils/isEmpty" import { setCustomerOrderParam } from "#utils/localStorage" interface Props { + /** + * The children components to render inside the PaymentMethodsContainer. + */ children: ReactNode + /** + * Optional configuration for payment methods. + */ config?: PaymentMethodConfig } export function PaymentMethodsContainer(props: Props): JSX.Element { From 6bd85e39900b92a81492ae0c27c2b32d4ac02f9c Mon Sep 17 00:00:00 2001 From: Alessandro Casazza Date: Mon, 23 Jun 2025 11:44:05 +0200 Subject: [PATCH 2/4] v4.25.0-beta.0 --- lerna.json | 2 +- packages/react-components/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lerna.json b/lerna.json index 2c4f674d..09df5b36 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "useNx": false, "npmClient": "pnpm", - "version": "4.24.1", + "version": "4.25.0-beta.0", "command": { "version": { "preid": "beta" diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 604b0840..b60b9604 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -1,6 +1,6 @@ { "name": "@commercelayer/react-components", - "version": "4.24.1", + "version": "4.25.0-beta.0", "description": "The Official Commerce Layer React Components", "main": "lib/cjs/index.js", "module": "lib/esm/index.js", From 406ce59cd51731cb4a9730f40fc9bee9132033c8 Mon Sep 17 00:00:00 2001 From: Alessandro Casazza Date: Tue, 24 Jun 2025 17:31:12 +0200 Subject: [PATCH 3/4] Fix `showLoader` flow --- .../payment_methods/PaymentMethod.tsx | 30 +++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/packages/react-components/src/components/payment_methods/PaymentMethod.tsx b/packages/react-components/src/components/payment_methods/PaymentMethod.tsx index 51d78272..ef321dea 100644 --- a/packages/react-components/src/components/payment_methods/PaymentMethod.tsx +++ b/packages/react-components/src/components/payment_methods/PaymentMethod.tsx @@ -132,7 +132,11 @@ export function PaymentMethod({ if (ps && paymentMethod && onClick != null) { onClick({ payment: paymentMethod, order, paymentSource: ps }) setTimeout(() => { - setLoading(false) + if (showLoader) { + setLoading(showLoader) + } else { + setLoading(false) + } }, 200) } setLoadingPlaceOrder({ loading: false }) @@ -186,7 +190,11 @@ export function PaymentMethod({ setPaymentSourceCreated(true) onClick({ payment: paymentMethod, order, paymentSource: ps }) setTimeout(() => { - setLoading(false) + if (showLoader) { + setLoading(showLoader) + } else { + setLoading(false) + } }, 200) } if (getCustomerPaymentSources) { @@ -199,7 +207,11 @@ export function PaymentMethod({ } } else { setTimeout(() => { - setLoading(false) + if (showLoader) { + setLoading(showLoader) + } else { + setLoading(false) + } }, 200) } } @@ -213,11 +225,19 @@ export function PaymentMethod({ if (isSingle && autoSelectSinglePaymentMethod) { if (paymentSource) { setTimeout(() => { - setLoading(false) + if (showLoader) { + setLoading(showLoader) + } else { + setLoading(false) + } }, 200) } } else { - setLoading(false) + if (showLoader) { + setLoading(showLoader) + } else { + setLoading(false) + } } } if (currentPaymentMethodId) setPaymentSelected(currentPaymentMethodId) From cceff3c99b2952930b51f5ef4aed0cd029feb8a0 Mon Sep 17 00:00:00 2001 From: Alessandro Casazza Date: Tue, 24 Jun 2025 17:32:20 +0200 Subject: [PATCH 4/4] v4.25.0-beta.1 --- lerna.json | 2 +- packages/react-components/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lerna.json b/lerna.json index 09df5b36..41869fa8 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "$schema": "node_modules/lerna/schemas/lerna-schema.json", "useNx": false, "npmClient": "pnpm", - "version": "4.25.0-beta.0", + "version": "4.25.0-beta.1", "command": { "version": { "preid": "beta" diff --git a/packages/react-components/package.json b/packages/react-components/package.json index b60b9604..ee3e0534 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -1,6 +1,6 @@ { "name": "@commercelayer/react-components", - "version": "4.25.0-beta.0", + "version": "4.25.0-beta.1", "description": "The Official Commerce Layer React Components", "main": "lib/cjs/index.js", "module": "lib/esm/index.js",