168 lines
5.7 KiB
TypeScript
168 lines
5.7 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
|
|
import {
|
|
CheckCircleIcon,
|
|
ChevronRightSmallIcon,
|
|
CrossCircle,
|
|
} from "@/components/Icons"
|
|
import Image from "@/components/Image"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import styles from "./room.module.css"
|
|
|
|
import type { RoomProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/room"
|
|
|
|
export default function Room({ booking, img, roomName }: RoomProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
|
|
const guestName = `${booking.guest.firstName} ${booking.guest.lastName}`
|
|
const fromDate = dt(booking.checkInDate).locale(lang)
|
|
const toDate = dt(booking.checkOutDate).locale(lang)
|
|
return (
|
|
<article className={styles.room}>
|
|
<header className={styles.header}>
|
|
<div>
|
|
{/* <Subtitle color="mainGrey60" type="two">
|
|
{intl.formatMessage({ id: "Room" })} 1
|
|
</Subtitle> */}
|
|
<Subtitle color="uiTextHighContrast" type="two">
|
|
{intl.formatMessage(
|
|
{ id: "Reservation number {value}" },
|
|
{
|
|
value: booking.confirmationNumber,
|
|
}
|
|
)}
|
|
</Subtitle>
|
|
</div>
|
|
<div className={styles.benefits}>
|
|
{booking.rateDefinition.isMemberRate ? (
|
|
<>
|
|
<CheckCircleIcon color="green" height={20} width={20} />
|
|
<Caption>
|
|
{intl.formatMessage({ id: "Membership benefits applied" })}
|
|
</Caption>
|
|
</>
|
|
) : (
|
|
<>
|
|
<CrossCircle color="red" height={20} width={20} />
|
|
<Caption>
|
|
{intl.formatMessage({ id: "No membership benefits applied" })}
|
|
</Caption>
|
|
</>
|
|
)}
|
|
</div>
|
|
</header>
|
|
<div className={styles.booking}>
|
|
<Image
|
|
alt={img.metaData.altText}
|
|
className={styles.img}
|
|
focalPoint={{ x: 50, y: 50 }}
|
|
height={204}
|
|
src={img.imageSizes.medium}
|
|
style={{ borderRadius: "var(--Corner-radius-Medium)" }}
|
|
title={img.metaData.title}
|
|
width={204}
|
|
/>
|
|
<div className={styles.roomDetails}>
|
|
<div className={styles.roomName}>
|
|
<Subtitle color="uiTextHighContrast" type="two">
|
|
{roomName}
|
|
</Subtitle>
|
|
<Link color="burgundy" href="" variant="icon">
|
|
{intl.formatMessage({ id: "View room details" })}
|
|
<ChevronRightSmallIcon color="burgundy" />
|
|
</Link>
|
|
</div>
|
|
<ul className={styles.details}>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Check-in" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{checkInDate} from {checkInTime}" },
|
|
{
|
|
checkInDate: fromDate.format("ddd, D MMM"),
|
|
checkInTime: fromDate.format("HH:mm"),
|
|
}
|
|
)}
|
|
</Body>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Check-out" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{checkOutDate} from {checkOutTime}" },
|
|
{
|
|
checkOutDate: toDate.format("ddd, D MMM"),
|
|
checkOutTime: toDate.format("HH:mm"),
|
|
}
|
|
)}
|
|
</Body>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Breakfast" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "N/A" })}
|
|
</Body>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Cancellation policy" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{booking.rateDefinition.cancellationText}
|
|
</Body>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Rebooking" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "N/A" })}
|
|
</Body>
|
|
</li>
|
|
</ul>
|
|
<div className={styles.guest}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Main guest" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">{guestName}</Body>
|
|
{booking.guest.membershipNumber ? (
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "Friend no. {value}" },
|
|
{
|
|
value: booking.guest.membershipNumber,
|
|
}
|
|
)}
|
|
</Body>
|
|
) : null}
|
|
{booking.guest.phoneNumber ? (
|
|
<Body color="uiTextHighContrast">
|
|
{booking.guest.phoneNumber}
|
|
</Body>
|
|
) : null}
|
|
{booking.guest.email ? (
|
|
<Body color="uiTextHighContrast">{booking.guest.email}</Body>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|