84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
"use client"
|
|
import { useEffect, useState } from "react"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import { CalendarIcon } from "@/components/Icons"
|
|
import Image from "@/components/Image"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
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
|
|
|
|
const arrival = dt(checkinDate).locale(lang)
|
|
const arrivalDate = arrival.format("DD MMM")
|
|
const arrivalDateTime = arrival.format("YYYY-MM-DD")
|
|
const depart = dt(checkoutDate).locale(lang)
|
|
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: (
|
|
<article className={styles.stay}>
|
|
<Image
|
|
className={styles.image}
|
|
alt={hotelInformation.hotelContent.images.metaData.altText}
|
|
src={hotelInformation.hotelContent.images.imageSizes.small}
|
|
width={420}
|
|
height={240}
|
|
/>
|
|
<footer className={styles.footer}>
|
|
<Title as="h5" className={styles.hotel} level="h3">
|
|
{hotelInformation.hotelName}
|
|
</Title>
|
|
<div className={styles.date}>
|
|
<CalendarIcon color="burgundy" height={24} width={24} />
|
|
<Caption asChild>
|
|
<time dateTime={arrivalDateTime}>{arrivalDate}</time>
|
|
</Caption>
|
|
{" - "}
|
|
<Caption asChild>
|
|
<time dateTime={departDateTime}>{departDate}</time>
|
|
</Caption>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
),
|
|
}
|
|
|
|
return isExternal ? <a {...linkProps} /> : <Link {...linkProps} />
|
|
}
|