feat: add loader to payment step with third party payment providers

Author: malessani

components/composite/Checkout/index.tsx

@@ -116,6 +116,8 @@ const Checkout: React.FC<Props> = ({
     )
   }
 
+  const isPaymentLoading = checkoutAlreadyStarted && !ctx.isComplete
+
   const renderSteps = () => {
     return (
       <CustomerContainer isGuest={ctx.isGuest}>
@@ -223,7 +225,7 @@ const Checkout: React.FC<Props> = ({
                         }
                       >
                         <div>
-                          <StepPayment />
+                          <StepPayment isPaymentLoading={isPaymentLoading} />
                         </div>
                       </AccordionItem>
                       <StepPlaceOrder

components/composite/StepPayment/CheckoutCustomerPayment.tsx

@@ -23,6 +23,7 @@ interface Props {
   hasTitle: boolean
   autoSelectCallback: () => void
   hasSubscriptions: boolean
+  isPaymentLoading: boolean
 }
 
 type TTemplateCustomerCards = Parameters<
@@ -95,11 +96,13 @@ export const CheckoutCustomerPayment: React.FC<Props> = ({
   hasTitle,
   autoSelectCallback,
   hasSubscriptions,
+  isPaymentLoading,
 }) => {
   return (
     <>
       <PaymentMethod
         autoSelectSinglePaymentMethod={autoSelectCallback}
+        showLoader={isPaymentLoading}
         activeClass="active group"
         className="payment"
         loader={<PaymentSkeleton />}

components/composite/StepPayment/CheckoutPayment.tsx

@@ -12,15 +12,18 @@ interface Props {
   selectPayment: Parameters<typeof PaymentMethod>[0]["onClick"]
   hasTitle: boolean
   autoSelectCallback: () => void
+  isPaymentLoading: boolean
 }
 
 export const CheckoutPayment = ({
   selectPayment,
   hasTitle,
   autoSelectCallback,
+  isPaymentLoading,
 }: Props): JSX.Element => {
   return (
     <PaymentMethod
+      showLoader={isPaymentLoading}
       autoSelectSinglePaymentMethod={autoSelectCallback}
       activeClass="active"
       className="payment group"

components/composite/StepPayment/index.tsx

@@ -80,7 +80,9 @@ export const StepHeaderPayment: React.FC<HeaderProps> = ({ step }) => {
   )
 }
 
-export const StepPayment: React.FC = () => {
+export const StepPayment: React.FC<{ isPaymentLoading: boolean }> = ({
+  isPaymentLoading,
+}) => {
   const appCtx = useContext(AppContext)
   const accordionCtx = useContext(AccordionContext)
   const [hasMultiplePaymentMethods, setHasMultiplePaymentMethods] =
@@ -135,13 +137,15 @@ export const StepPayment: React.FC = () => {
               {isPaymentRequired ? (
                 isGuest ? (
                   <CheckoutPayment
+                    isPaymentLoading={isPaymentLoading}
                     selectPayment={selectPayment}
                     autoSelectCallback={autoSelectCallback}
                     hasTitle={hasTitle}
                   />
                 ) : (
                   <>
                     <CheckoutCustomerPayment
+                      isPaymentLoading={isPaymentLoading}
                       selectPayment={selectPayment}
                       autoSelectCallback={autoSelectCallback}
                       hasTitle={hasTitle}

package.json

@@ -75,12 +75,12 @@
   "dependencies": {
     "@commercelayer/js-auth": "^6.7.2",
     "@commercelayer/organization-config": "^2.3.0",
-    "@commercelayer/react-components": "4.25.1",
-    "@commercelayer/sdk": "^6.44.0",
-    "@faker-js/faker": "^9.8.0",
-    "@headlessui/react": "^2.2.4",
-    "@next/bundle-analyzer": "^15.3.4",
-    "@next/eslint-plugin-next": "^15.3.4",
+    "@commercelayer/react-components": "4.25.2",
+    "@commercelayer/sdk": "^6.45.0",
+    "@faker-js/faker": "^9.9.0",
+    "@headlessui/react": "^2.2.5",
+    "@next/bundle-analyzer": "^15.4.3",
+    "@next/eslint-plugin-next": "^15.4.3",
     "@tailwindcss/forms": "^0.5.10",
     "@types/async-retry": "1.4.8",
     "@types/node": "^22.15.29",
@@ -95,34 +95,34 @@
     "cron-parser": "^5.3.0",
     "cronstrue": "^2.61.0",
     "dotenv": "^16.5.0",
-    "i18next": "^25.2.1",
-    "next": "^15.3.4",
+    "i18next": "^25.3.2",
+    "next": "^15.4.3",
     "next-build-id": "^3.0.0",
     "next-i18next": "^15.4.2",
     "postcss": "^8.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-gtm-module": "^2.0.11",
-    "react-i18next": "^15.5.3",
+    "react-i18next": "^15.6.1",
     "react-router-dom": "^6.28.0",
     "styled-components": "^6.1.19",
     "tailwindcss": "^3.4.14",
     "twin.macro": "^3.4.1",
     "typescript": "^5.8.3"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.0.0",
-    "@playwright/test": "1.53.1",
+    "@biomejs/biome": "^2.1.2",
+    "@playwright/test": "1.54.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.3",
-    "@semantic-release/npm": "^12.0.1",
+    "@semantic-release/npm": "^12.0.2",
     "@semantic-release/release-notes-generator": "^14.0.3",
-    "npm-check-updates": "^18.0.1",
-    "semantic-release": "^24.2.5",
+    "npm-check-updates": "^18.0.2",
+    "semantic-release": "^24.2.7",
     "serve": "^14.2.4",
-    "stylelint": "^16.21.0",
+    "stylelint": "^16.22.0",
     "stylelint-config-standard": "^36.0.1"
   },
   "resolutions": {

playwright.config.ts

@@ -1,7 +1,6 @@
-import { type PlaywrightTestConfig, devices } from "@playwright/test"
-import dotenv from "dotenv"
-
 import path from "node:path"
+import { devices, type PlaywrightTestConfig } from "@playwright/test"
+import dotenv from "dotenv"
 
 dotenv.config({ path: path.resolve(__dirname, "./.env.local") })