Fix place order in draft and express payments by CKO

biome.json

@@ -1,31 +1,41 @@
 {
-	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-	"vcs": {
-		"enabled": false,
-		"clientKind": "git",
-		"useIgnoreFile": false
-	},
-	"files": {
-		"ignoreUnknown": false,
-		"ignore": []
-	},
-	"formatter": {
-		"enabled": true,
-		"indentStyle": "space"
-	},
-	"organizeImports": {
-		"enabled": true
-	},
-	"linter": {
-		"enabled": true,
-		"rules": {
-			"recommended": true
-		}
-	},
-	"javascript": {
-		"formatter": {
-			"quoteStyle": "double",
-			"semicolons":"asNeeded"
-		}
-	}
+  "$schema": "https://biomejs.dev/schemas/2.0.0/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": ["**"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "assist": { "actions": { "source": { "organizeImports": "on" } } },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": {
+        "noParameterAssign": "error",
+        "useAsConstAssertion": "error",
+        "useDefaultParameterLast": "error",
+        "useEnumInitializers": "error",
+        "useSelfClosingElements": "error",
+        "useSingleVarDeclarator": "error",
+        "noUnusedTemplateLiteral": "error",
+        "useNumberNamespace": "error",
+        "noInferrableTypes": "error",
+        "noUselessElse": "error"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "semicolons": "asNeeded"
+    }
+  }
 }

lerna.json

@@ -2,7 +2,7 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "npmClient": "pnpm",
-  "version": "4.24.0",
+  "version": "4.24.1-beta.4",
   "command": {
     "version": {
       "preid": "beta"

package.json

@@ -20,7 +20,7 @@
 		"dep:minor": "pnpm dep:major -t minor -i"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "1.9.4",
+		"@biomejs/biome": "2.0.0",
 		"husky": "^9.1.7",
 		"lerna": "^8.2.2",
 		"typescript": "^5.8.3"
@@ -41,7 +41,13 @@
 			"ws@>=8.0.0 <8.17.1": ">=8.17.1",
 			"micromatch@<4.0.8": ">=4.0.8",
 			"rollup@>=4.0.0 <4.22.4": ">=4.22.4",
-			"cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5"
+			"cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5",
+			"esbuild@<=0.24.2": ">=0.25.0",
+			"vite@>=6.2.0 <6.2.6": ">=6.2.6",
+			"vite@>=6.2.0 <=6.2.6": ">=6.2.7",
+			"tar-fs@>=2.0.0 <2.1.3": ">=2.1.3",
+			"brace-expansion@>=1.0.0 <=1.1.11": ">=1.1.12",
+			"brace-expansion@>=2.0.0 <=2.0.1": ">=2.0.2"
 		},
 		"onlyBuiltDependencies": [
 			"@biomejs/biome",

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.24.0",
+  "version": "4.24.1-beta.4",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -199,14 +199,14 @@
   },
   "homepage": "https://github.com/commercelayer/commercelayer-react-components#readme",
   "dependencies": {
-    "@adyen/adyen-web": "^6.15.0",
+    "@adyen/adyen-web": "^6.17.0",
     "@commercelayer/organization-config": "^2.3.0",
-    "@commercelayer/sdk": "^6.42.0",
+    "@commercelayer/sdk": "^6.44.0",
     "@stripe/react-stripe-js": "^3.7.0",
     "@stripe/stripe-js": "^7.3.1",
     "@tanstack/react-table": "^8.21.3",
     "@types/iframe-resizer": "^3.5.13",
-    "braintree-web": "^3.120.2",
+    "braintree-web": "^3.123.0",
     "frames-react": "^1.2.2",
     "iframe-resizer": "^4.3.6",
     "jwt-decode": "^4.0.0",
@@ -216,21 +216,21 @@
   "devDependencies": {
     "@commercelayer/js-auth": "^6.7.2",
     "@faker-js/faker": "^9.8.0",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.53.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/braintree-web": "^3.96.17",
-    "@types/lodash": "^4.17.17",
-    "@types/node": "^22.15.29",
-    "@types/prop-types": "^15.7.14",
+    "@types/lodash": "^4.17.18",
+    "@types/node": "^24.0.3",
+    "@types/prop-types": "^15.7.15",
     "@types/react": "^18.3.1",
     "@types/react-test-renderer": "^18.3.1",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.5.1",
-    "@vitest/coverage-v8": "^3.2.1",
+    "@vitejs/plugin-react": "^4.5.2",
+    "@vitest/coverage-v8": "^3.2.4",
     "jsdom": "^26.1.0",
     "minimize-js": "^1.4.0",
-    "msw": "^2.9.0",
+    "msw": "^2.10.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
@@ -239,7 +239,7 @@
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.1"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0"

packages/react-components/src/components/gift_cards/GiftCardOrCouponSubmit.tsx

@@ -1,24 +1,46 @@
-import type { ReactNode, JSX } from 'react';
-import Parent from '#components/utils/Parent'
-import type { ChildrenFunction } from '#typings/index'
+import type { ReactNode, JSX } from "react"
+import Parent from "#components/utils/Parent"
+import type { ChildrenFunction } from "#typings/index"
+// import { useState, useEffect, useContext } from "react"
+// import OrderContext from "#context/OrderContext"
 
-interface ChildrenProps extends Omit<Props, 'children'> {}
+interface ChildrenProps extends Omit<Props, "children"> {}
 
-interface Props extends Omit<JSX.IntrinsicElements['button'], 'children'> {
+interface Props extends Omit<JSX.IntrinsicElements["button"], "children"> {
   children?: ChildrenFunction<ChildrenProps>
   label?: string | ReactNode
 }
 
 export function GiftCardOrCouponSubmit(props: Props): JSX.Element {
-  const { children, label = 'Submit', ...p } = props
+  const { children, label = "Submit", ...p } = props
+  // const [disabled, setDisabled] = useState(false)
+  // const { order } = useContext(OrderContext)
+  // useEffect(() => {
+  //   console.log("GiftCardOrCouponSubmit: useEffect triggered", { order })
+  //   if (order?.payment_source?.id != null) {
+  //     /**
+  //      * If the order has a payment source ID, it means that the user has already
+  //      * entered their payment information and the user cannot add a gift card or coupon
+  //      * code at this point.
+  //      */
+  //     setDisabled(true)
+  //     console.log(
+  //       "GiftCardOrCouponSubmit: The order has a payment source ID, disabling the button.",
+  //     )
+  //   }
+  //   return () => {
+  //     setDisabled(false)
+  //   }
+  // }, [order?.payment_source?.id])
+  // p.disabled = disabled
   const parentProps = {
     ...p,
-    label
+    label,
   }
   return children ? (
     <Parent {...parentProps}>{children}</Parent>
   ) : (
-    <button type='submit' {...p}>
+    <button type="submit" {...p}>
       {label}
     </button>
   )

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

@@ -332,13 +332,51 @@ export function PlaceOrderButton(props: Props): JSX.Element {
         })
       }
     }
-  }, [options?.checkoutCom, paymentType, order?.payment_source?.id])
+    if (
+      paymentType === "checkout_com_payments" &&
+      order?.status &&
+      status &&
+      ["pending"].includes(order?.status) &&
+      ["placing"].includes(status) &&
+      autoPlaceOrder
+    ) {
+      /**
+       * Place order with Checkout.com using express payments
+       */
+      const paymentSourceStatus =
+        // @ts-expect-error no type
+        order?.payment_source?.payment_response?.status.toLowerCase()
+      if (["captured", "authorized"].includes(paymentSourceStatus)) {
+        setPlaceOrder?.({
+          paymentSource,
+        }).then((placed) => {
+          if (placed?.placed) {
+            onClick?.(placed)
+            setPlaceOrderStatus?.({ status: "placing" })
+          } else {
+            setPlaceOrderStatus?.({ status: "standby" })
+          }
+        })
+      }
+    }
+  }, [options?.checkoutCom, paymentType, order?.payment_source?.id, status])
   // biome-ignore lint/correctness/useExhaustiveDependencies: Need to test
   useEffect(() => {
     if (ref?.current != null && setButtonRef != null) {
       setButtonRef(ref)
     }
   }, [ref])
+  useEffect(() => {
+    switch (status) {
+      case "disabled":
+      case "placing":
+        setNotPermitted(true)
+        break
+      default:
+        setNotPermitted(false)
+        break
+    }
+  }, [status])
   const handleClick = async (
     e?: MouseEvent<HTMLButtonElement>,
   ): Promise<void> => {

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

@@ -19,6 +19,7 @@ import type { DefaultChildrenType } from "#typings/globals"
 import OrderContext from "#context/OrderContext"
 import CustomerContext from "#context/CustomerContext"
 import {
+  getCkoAttributes,
   getExternalPaymentAttributes,
   getPaypalAttributes,
 } from "#utils/getPaymentAttributes"
@@ -163,6 +164,12 @@ export function PaymentMethod({
                   config,
                 )
               }
+              if (
+                config != null &&
+                paymentResource === "checkout_com_payments"
+              ) {
+                attributes = getCkoAttributes(paymentResource, config)
+              }
               const ps = await setPaymentSource({
                 paymentResource,
                 order,