diff --git a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx b/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
index d20ffe496..270ede97a 100644
--- a/components/Blocks/DynamicContent/Stays/StayCard/index.tsx
+++ b/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 when current web is deleted
- const isExternal = useCheckIfExternal(bookingUrl)
-
- const linkProps = {
- href: bookingUrl,
- className: styles.link,
- children: (
+ return (
+
- ),
- }
-
- return isExternal ? :
+
+ )
}
diff --git a/components/TempDesignSystem/Link/index.tsx b/components/TempDesignSystem/Link/index.tsx
index 771c60e82..bae4ab9b1 100644
--- a/components/TempDesignSystem/Link/index.tsx
+++ b/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 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 ? (
+
+ ) : (
{
if (onClick) {
onClick(e)
@@ -94,9 +104,9 @@ export default function Link({
router.push(fullUrl, { scroll })
})
}}
- href={fullUrl}
id={trackingId}
{...props}
+ {...linkProps}
/>
)
}
diff --git a/hooks/useCheckIfExternalLink.ts b/hooks/useCheckIfExternalLink.ts
new file mode 100644
index 000000000..6e4b7a7ed
--- /dev/null
+++ b/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
+}