feat:sw-222 check if bookingUrl is linking to current or external page and use an anchor vs link element depending on it

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

@@ -1,4 +1,6 @@
 "use client"
+import { useEffect, useState } from "react"
+
 import { dt } from "@/lib/dt"
 
 import { CalendarIcon } from "@/components/Icons"
@@ -12,8 +14,27 @@ 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()
+
   const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
     stay.attributes
 
@@ -24,8 +45,13 @@ export default function StayCard({ stay }: StayCardProps) {
   const departDate = depart.format("DD MMM YYYY")
   const departDateTime = depart.format("YYYY-MM-DD")
 
-  return (
+  // TODO: Remove this check (and hook) and only return <Link /> when current web is deleted
-    <Link href={bookingUrl}>
+  const isExternal = useCheckIfExternal(bookingUrl)
+
+  const linkProps = {
+    href: bookingUrl,
+    className: styles.link,
+    children: (
       <article className={styles.stay}>
         <Image
           className={styles.image}
@@ -50,6 +76,8 @@ export default function StayCard({ stay }: StayCardProps) {
           </div>
         </footer>
       </article>
-    </Link>
+    ),
-  )
+  }
+
+  return isExternal ? <a {...linkProps} /> : <Link {...linkProps} />
 }

components/Blocks/DynamicContent/Stays/StayCard/stay.module.css

@@ -6,6 +6,10 @@
   overflow: hidden;
 }
 
+.link {
+  text-decoration: none;
+}
+
 .stay:hover {
   border: 1.5px solid var(--Base-Border-Hover);
 }