PR fixes

components/Blocks/DynamicContent/Stays/StayCard/index.tsx

@@ -1,5 +1,4 @@
 "use client"
-import { useEffect, useState } from "react"
 
 import { dt } from "@/lib/dt"
 
@@ -14,24 +13,6 @@ import styles from "./stay.module.css"
 
 import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
 
-const useCheckIfExternal = (bookingUrl: string) => {
-  const [isExternal, setIsExternal] = useState(false)
-
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      const hostName = window.location.hostname
-      const bookingURL = new URL(bookingUrl)
-
-      const hostsMatch = hostName === bookingURL.hostname
-      const langRouteRegex = /^\/[a-zA-Z]{2}\//
-
-      setIsExternal(!hostsMatch || !langRouteRegex.test(bookingURL.pathname))
-    }
-  }, [bookingUrl])
-
-  return isExternal
-}
-
 export default function StayCard({ stay }: StayCardProps) {
   const lang = useLang()
 
@@ -45,13 +26,8 @@ export default function StayCard({ stay }: StayCardProps) {
   const departDate = depart.format("DD MMM YYYY")
   const departDateTime = depart.format("YYYY-MM-DD")
 
-  // TODO: Remove this check (and hook) and only return <Link /> when current web is deleted
-  const isExternal = useCheckIfExternal(bookingUrl)
-
-  const linkProps = {
-    href: bookingUrl,
-    className: styles.link,
-    children: (
+  return (
+    <Link href={bookingUrl} className={styles.link}>
       <article className={styles.stay}>
         <Image
           className={styles.image}
@@ -76,8 +52,6 @@ export default function StayCard({ stay }: StayCardProps) {
           </div>
         </footer>
       </article>
-    ),
-  }
-
-  return isExternal ? <a {...linkProps} /> : <Link {...linkProps} />
+    </Link>
+  )
 }

components/TempDesignSystem/Link/index.tsx

@@ -5,6 +5,7 @@ import { startTransition, useCallback, useMemo } from "react"
 
 import useRouterTransitionStore from "@/stores/router-transition"
 
+import { useCheckIfExternalLink } from "@/hooks/useCheckIfExternalLink"
 import { trackClick, trackPageViewStart } from "@/utils/tracking"
 
 import { linkVariants } from "./variants"
@@ -55,6 +56,9 @@ export default function Link({
     return `${href}${search}`
   }, [href, searchParams, keepSearchParams])
 
+  // TODO: Remove this check (and hook) and only return <Link /> when current web is deleted
+  const isExternal = useCheckIfExternalLink(href)
+
   const startRouterTransition = useRouterTransitionStore(
     (state) => state.startRouterTransition
   )
@@ -65,11 +69,17 @@ export default function Link({
     }
   }, [trackingId])
 
-  return (
+  const linkProps = {
+    href: fullUrl,
+    className: classNames,
+  }
+
+  return isExternal ? (
+    <a {...linkProps} {...props} />
+  ) : (
     <NextLink
       scroll={scroll}
       prefetch={prefetch}
-      className={classNames}
       onClick={(e) => {
         if (onClick) {
           onClick(e)
@@ -94,9 +104,9 @@ export default function Link({
           router.push(fullUrl, { scroll })
         })
       }}
-      href={fullUrl}
       id={trackingId}
       {...props}
+      {...linkProps}
     />
   )
 }

hooks/useCheckIfExternalLink.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react"
+
+export const useCheckIfExternalLink = (url: string) => {
+  const [isExternal, setIsExternal] = useState(false)
+
+  useEffect(() => {
+    if (typeof window !== "undefined" && url?.length) {
+      try {
+        const hostName = window.location.hostname
+        const newURL = new URL(url)
+
+        const hostsMatch = hostName === newURL.hostname
+        const langRouteRegex = /^\/[a-zA-Z]{2}\//
+
+        setIsExternal(!hostsMatch || !langRouteRegex.test(newURL.pathname))
+      } catch {
+        // Don't care. Expecting internal url (#, /my-pages/overview, etc)
+      }
+    }
+  }, [url])
+
+  return isExternal
+}