Merge pull request #558 from commercelayer/fix/checkout-links-config

Checkout link provided by organization config
commercelayer · Jul 30, 2024 · 3a9eed0 · 3a9eed0
2 parents c32a755 + 11724e0
commit 3a9eed0
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "useNx": false,
   "npmClient": "pnpm",
-  "version": "4.15.2",
+  "version": "4.15.3-beta.3",
   "command": {
     "version": {
       "preid": "beta"

diff --git a/packages/react-components/package.json b/packages/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/react-components",
-  "version": "4.15.2",
+  "version": "4.15.3-beta.3",
   "description": "The Official Commerce Layer React Components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",

diff --git a/packages/react-components/src/components/customers/MyAccountLink.tsx b/packages/react-components/src/components/customers/MyAccountLink.tsx
@@ -66,7 +66,6 @@ export function MyAccountLink(props: Props): JSX.Element {
   function handleClick(
     e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
   ): void {
-    e.preventDefault()
     if (!disabled && accessToken && endpoint) {
       void getOrganizationConfig({
         accessToken,

diff --git a/packages/react-components/src/components/orders/CheckoutLink.tsx b/packages/react-components/src/components/orders/CheckoutLink.tsx
@@ -5,6 +5,7 @@ import { type ChildrenFunction } from '#typings/index'
 import CommerceLayerContext from '#context/CommerceLayerContext'
 import { getApplicationLink } from '#utils/getApplicationLink'
 import { getDomain } from '#utils/getDomain'
+import { getOrganizationConfig } from '#utils/organization'
 
 interface ChildrenProps extends Omit<Props, 'children'> {
   checkoutUrl: string
@@ -33,7 +34,7 @@ interface Props extends Omit<JSX.IntrinsicElements['a'], 'children'> {
  * found in the `order` object.
  */
 export function CheckoutLink(props: Props): JSX.Element {
-  const { label, hostedCheckout = true, children, ...p } = props
+  const { label, hostedCheckout = true, children, onClick, ...p } = props
   const { order } = useContext(OrderContext)
   const { accessToken, endpoint } = useContext(CommerceLayerContext)
   if (accessToken == null || endpoint == null)
@@ -56,10 +57,36 @@ export function CheckoutLink(props: Props): JSX.Element {
     href,
     ...p
   }
+  function handleClick(
+    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+  ): void {
+    e.preventDefault()
+    e.stopPropagation()
+    console.log('e.currentTarget.href', e.currentTarget.href)
+    const currentHref = e.currentTarget.href
+    if (accessToken && endpoint && order?.id) {
+      void getOrganizationConfig({
+        accessToken,
+        endpoint,
+        params: {
+          accessToken,
+          orderId: order?.id
+        }
+      }).then((config) => {
+        if (config?.links?.checkout) {
+          location.href = config.links.checkout
+        } else {
+          location.href = currentHref
+        }
+      })
+    } else {
+      location.href = currentHref
+    }
+  }
   return children ? (
     <Parent {...parentProps}>{children}</Parent>
   ) : (
-    <a href={href} {...p}>
+    <a href={href} onClick={handleClick} {...p}>
       {label}
     </a>
   )