From ec2790a16e19bac6aa08d4edf51133b03f300293 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Thu, 10 Oct 2024 09:52:23 +0200
Subject: [PATCH] feat:sw-222 check if bookingUrl is linking to current or
 external page and use an anchor vs link element depending on it

---
 .../DynamicContent/Stays/StayCard/index.tsx   | 36 ++++++++++++++++---
 .../Stays/StayCard/stay.module.css            |  4 +++
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
index 5ab6c0b5d..506df2e65 100644
--- a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
+++ b/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 (
-    <Link href={bookingUrl}>
+  // 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: (
       <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} />
 }
diff --git a/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css b/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css
index 1d3a685d7..995aa102a 100644
--- a/components/Blocks/DynamicContent/Stays/StayCard/stay.module.css
+++ b/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);
 }