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 +}