Add new prop showLoader in PaymentMethod component

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.1",
   "command": {
     "version": {
       "preid": "beta"

packages/react-components/package.json

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

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",
@@ -125,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 })
@@ -179,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) {
@@ -192,7 +207,11 @@ export function PaymentMethod({
             }
           } else {
             setTimeout(() => {
-              setLoading(false)
+              if (showLoader) {
+                setLoading(showLoader)
+              } else {
+                setLoading(false)
+              }
             }, 200)
           }
         }
@@ -206,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)
@@ -219,7 +246,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)

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 {