Merge pull request #591 from commercelayer/feat/upgrade-adyen

Upgrade Adyen library

Author: acasazza

.ncurc.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  reject: [
+    'pnpm',
+    'iframe-resizer'
+  ],
+  filterResults: (name, { upgradedVersionSemver }) => {
+    if (
+      name === '@types/node' && parseInt(upgradedVersionSemver?.major) >= 22 ||
+      name === 'eslint' && parseInt(upgradedVersionSemver?.major) >= 9 ||
+      name === 'rapid-form' && parseInt(upgradedVersionSemver?.major) >= 3
+    ) {
+      return false
+    }
+
+    return true
+  }
+}

package.json

@@ -15,7 +15,9 @@
     "components:build:dev": "pnpm --filter react-components build:dev",
     "components:build": "pnpm --filter react-components build",
     "make:version": "lerna version --no-private",
-    "make:version:force": "lerna version --no-private --force-publish"
+    "make:version:force": "lerna version --no-private --force-publish",
+    "dep:major": "pnpm dlx npm-check-updates --packageFile '**/package.json' -u -i",
+    "dep:minor": "pnpm dep:major -t minor -i"
   },
   "devDependencies": {
     "@commercelayer/eslint-config-ts-react": "^1.4.5",

packages/react-components/package.json

@@ -178,16 +178,16 @@
   },
   "homepage": "https://github.com/commercelayer/commercelayer-react-components#readme",
   "dependencies": {
-    "@adyen/adyen-web": "^5.71.1",
+    "@adyen/adyen-web": "^6.6.0",
     "@commercelayer/organization-config": "^1.4.12",
-    "@commercelayer/sdk": "^6.26.0",
-    "@stripe/react-stripe-js": "^3.0.0",
-    "@stripe/stripe-js": "^5.2.0",
-    "@tanstack/react-table": "^8.17.3",
+    "@commercelayer/sdk": "^6.27.0",
+    "@stripe/react-stripe-js": "^3.1.1",
+    "@stripe/stripe-js": "^5.3.0",
+    "@tanstack/react-table": "^8.20.6",
     "@types/iframe-resizer": "^3.5.13",
-    "braintree-web": "^3.112.1",
+    "braintree-web": "^3.113.0",
     "frames-react": "^1.2.2",
-    "iframe-resizer": "^4.4.5",
+    "iframe-resizer": "^4.3.6",
     "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
     "rapid-form": "2.1.0"
@@ -207,15 +207,15 @@
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.8",
-    "eslint": "~9.16.0",
+    "eslint": "^8.57.0",
     "jsdom": "^25.0.1",
     "minimize-js": "^1.4.0",
-    "msw": "^2.6.8",
+    "msw": "^2.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
-    "tsc-alias": "^1.8.8",
-    "tslib": "^2.6.3",
+    "tsc-alias": "^1.8.10",
+    "tslib": "^2.8.1",
     "typescript": "^5.7.2",
     "vite": "^6.0.3",
     "vite-tsconfig-paths": "^5.1.4",
@@ -224,4 +224,4 @@
   "peerDependencies": {
     "react": ">=18.0.0"
   }
-}
+}

packages/react-components/src/components/orders/PlaceOrderButton.tsx

@@ -5,8 +5,8 @@ import {
   useRef,
   useState,
   type MouseEvent,
-  type JSX,
-} from 'react';
+  type JSX
+} from 'react'
 import Parent from '../utils/Parent'
 import { type ChildrenFunction } from '#typings/index'
 import PlaceOrderContext from '#context/PlaceOrderContext'
@@ -67,7 +67,8 @@ export function PlaceOrderButton(props: Props): JSX.Element {
     options,
     paymentType,
     setButtonRef,
-    setPlaceOrderStatus
+    setPlaceOrderStatus,
+    status
   } = useContext(PlaceOrderContext)
   const [notPermitted, setNotPermitted] = useState(true)
   const [forceDisable, setForceDisable] = useState(disabled)
@@ -251,7 +252,8 @@ export function PlaceOrderButton(props: Props): JSX.Element {
         // @ts-expect-error no type
         ref?.current?.disabled === false &&
         currentCustomerPaymentSourceId == null &&
-        autoPlaceOrder
+        autoPlaceOrder &&
+        status === 'standby'
       ) {
         // NOTE: This is a workaround for the case when the user reloads the page after selecting a customer payment source
         if (
@@ -344,11 +346,19 @@ export function PlaceOrderButton(props: Props): JSX.Element {
         paymentSource: checkPaymentSource,
         currentCustomerPaymentSourceId
       }))
-    setForceDisable(false)
-    onClick && placed && onClick(placed)
-    setIsLoading(false)
-    if (setPlaceOrderStatus != null) {
-      setPlaceOrderStatus({ status: 'standby' })
+    if (placed && setPlaceOrderStatus != null) {
+      if (placed.placed) {
+        setPlaceOrderStatus({ status: 'placing' })
+        onClick && placed && onClick(placed)
+      } else {
+        setForceDisable(false)
+        onClick && placed && onClick(placed)
+        setIsLoading(false)
+        setPlaceOrderStatus({ status: 'standby' })
+      }
+    } else {
+      setForceDisable(false)
+      setIsLoading(false)
     }
   }
   const disabledButton = disabled !== undefined ? disabled : notPermitted

packages/react-components/src/components/payment_gateways/AdyenGateway.tsx

@@ -8,13 +8,12 @@ import PaymentSourceContext from '#context/PaymentSourceContext'
 import { type PaymentResource } from '#reducers/PaymentMethodReducer'
 import { type StripeElementLocale } from '@stripe/stripe-js'
 import isEmpty from 'lodash/isEmpty'
-import { useContext, type JSX } from 'react';
+import { useContext, type JSX } from 'react'
 import AdyenPayment from '#components/payment_source/AdyenPayment'
 import PaymentCardsTemplate from '../utils/PaymentCardsTemplate'
 import { jwt } from '#utils/jwt'
 import getCardDetails from '#utils/getCardDetails'
 import { getPaymentAttributes } from '#utils/getPaymentAttributes'
-import { canPlaceOrder } from '#utils/canPlaceOrder'
 
 type Props = GatewayBaseType
 
@@ -38,7 +37,7 @@ export function AdyenGateway(props: Props): JSX.Element | null {
     useContext(PaymentMethodContext)
   const paymentResource: PaymentResource = 'adyen_payments'
   const locale = order?.language_code as StripeElementLocale
-  if (!readonly && payment?.id !== currentPaymentMethodId && order != null && !canPlaceOrder(order)) return null
+  if (!readonly && payment?.id !== currentPaymentMethodId) return null
   // @ts-expect-error no type
   const clientKey = paymentSource?.public_key
   const environment = accessToken && jwt(accessToken).test ? 'test' : 'live'

packages/react-components/src/components/payment_methods/PaymentMethod.tsx

@@ -1,4 +1,10 @@
-import { useState, useEffect, type MouseEvent, useContext, type JSX } from 'react';
+import {
+  useState,
+  useEffect,
+  type MouseEvent,
+  useContext,
+  type JSX
+} from 'react'
 import PaymentMethodContext from '#context/PaymentMethodContext'
 import PaymentMethodChildrenContext from '#context/PaymentMethodChildrenContext'
 import type { LoaderType } from '#typings'
@@ -19,6 +25,7 @@ import {
 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 {
   payment?: PaymentMethodType | Record<string, any>
@@ -48,6 +55,10 @@ type Props = {
    * 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'> &
   (
     | {
@@ -72,6 +83,7 @@ export function PaymentMethod({
   expressPayments,
   hide,
   onClick,
+  sortBy,
   ...p
 }: Props): JSX.Element {
   const [loading, setLoading] = useState(true)
@@ -180,7 +192,7 @@ export function PaymentMethod({
         void autoSelect()
       }
     }
-  }, [order?.payment_source != null])
+  }, [!isEmpty(paymentMethods), order?.payment_source != null])
   useEffect(() => {
     if (paymentMethods) {
       const isSingle = paymentMethods.length === 1
@@ -200,7 +212,13 @@ export function PaymentMethod({
       setPaymentSelected('')
     }
   }, [paymentMethods, currentPaymentMethodId])
-  const components = paymentMethods
+
+  const sortedPaymentMethods =
+    paymentMethods != null && sortBy != null
+      ? sortPaymentMethods(paymentMethods, sortBy)
+      : paymentMethods
+
+  const components = sortedPaymentMethods
     ?.filter((payment) => {
       if (Array.isArray(hide)) {
         const source = payment?.payment_source_type as PaymentResource

packages/react-components/src/components/payment_methods/PaymentMethodsContainer.tsx

@@ -2,7 +2,14 @@
 import PaymentMethodContext, {
   defaultPaymentMethodContext
 } from '#context/PaymentMethodContext'
-import { type ReactNode, useContext, useEffect, useReducer, useMemo, type JSX } from 'react';
+import {
+  type ReactNode,
+  useContext,
+  useEffect,
+  useReducer,
+  useMemo,
+  type JSX
+} from 'react'
 import paymentMethodReducer, {
   paymentMethodInitialState,
   getPaymentMethods,