68c1b3dc50
Chore/BOOK-708 replace title component * chore(BOOK-708): replace title with typography * chore(BOOK-708): replace title with typography * chore(BOOK-708): remove Title from package.json Approved-by: Linus Flood Approved-by: Anton Gunnarsson
78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { dt } from "@scandic-hotels/common/dt"
|
|
import Caption from "@scandic-hotels/design-system/Caption"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import Image from "@scandic-hotels/design-system/Image"
|
|
import Link from "@scandic-hotels/design-system/OldDSLink"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./stay.module.css"
|
|
|
|
import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
|
|
|
|
export default function OldStayCard({ stay }: StayCardProps) {
|
|
const { bookingUrl, isWebAppOrigin } = stay.attributes
|
|
|
|
const shouldLinkToMyStay = isWebAppOrigin
|
|
|
|
if (!shouldLinkToMyStay) {
|
|
return <CardContent stay={stay} />
|
|
}
|
|
|
|
return (
|
|
<Link href={bookingUrl} className={styles.link}>
|
|
<CardContent stay={stay} />
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
function CardContent({ stay }: StayCardProps) {
|
|
const lang = useLang()
|
|
|
|
const { checkinDate, checkoutDate, hotelInformation } = 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")
|
|
|
|
return (
|
|
<article className={styles.stay}>
|
|
<Image
|
|
className={styles.image}
|
|
alt={
|
|
hotelInformation.hotelContent.images.altText ||
|
|
hotelInformation.hotelContent.images.altText_En
|
|
}
|
|
src={hotelInformation.hotelContent.images.src}
|
|
width={420}
|
|
height={240}
|
|
/>
|
|
<footer className={styles.footer}>
|
|
<Typography variant="Title/xs" className={styles.hotel}>
|
|
<h3>{hotelInformation.hotelName}</h3>
|
|
</Typography>
|
|
<div className={styles.date}>
|
|
<MaterialIcon
|
|
icon="calendar_month"
|
|
color="Icon/Interactive/Default"
|
|
/>
|
|
<Caption asChild>
|
|
<time dateTime={arrivalDateTime}>{arrivalDate}</time>
|
|
</Caption>
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
{" - "}
|
|
<Caption asChild>
|
|
<time dateTime={departDateTime}>{departDate}</time>
|
|
</Caption>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
)
|
|
}
|