abd401c4f4
Feat/SW-1368 1369 Guarantee late arrival * feat(SW-1368-SW-1369): guarantee late arrival for confirmation page and my stay * feat(SW-1368-SW-1369): guarantee late arrival updated design * feat(SW-1368-SW-1369): add translations * feat(SW-1368-SW-1369): add translations * feat(SW-1368-SW-1369): fix merge with master * feat(SW-1368-SW-1369): add translations * feat(SW-1368-SW-1369): add redirect with refId * feat(SW-1368-SW-1369): if booking completed redirect to confirmation page * feat(SW-1368-SW-1369): fix comments pr * feat(SW-1368-SW-1369): fix comments pr * feat(SW-1368-SW-1369): fix rebase master * feat(SW-1368-SW-1369): fix duplicate flex rate check * feat(SW-1368-SW-1369): if any room is flex, card must be used * feat(SW-1368-SW-1369): move callback route * feat(SW-1368-SW-1369): top align checkbox * feat(SW-1368-SW-1369): top align checkbox Approved-by: Tobias Johansson Approved-by: Niclas Edenvin
172 lines
6.0 KiB
TypeScript
172 lines
6.0 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { CancellationRuleEnum } from "@/constants/booking"
|
|
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)
|
|
|
|
const isFlexBooking =
|
|
booking.rateDefinition.cancellationRule ===
|
|
CancellationRuleEnum.CancellableBefore6PM
|
|
const isChangeBooking =
|
|
booking.rateDefinition.cancellationRule === CancellationRuleEnum.Changeable
|
|
return (
|
|
<article className={styles.room}>
|
|
<header className={styles.header}>
|
|
<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>
|
|
{booking.guaranteeInfo && (
|
|
<div className={styles.benefits}>
|
|
<CheckCircleIcon color="green" height={20} width={20} />
|
|
<Caption>
|
|
<strong>
|
|
{intl.formatMessage({ id: "Booking guaranteed." })}
|
|
</strong>{" "}
|
|
{intl.formatMessage({
|
|
id: "Your room will remain available for check-in even after 18:00.",
|
|
})}
|
|
</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: "Cancellation policy" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{booking.rateDefinition.cancellationText}
|
|
</Body>
|
|
</li>
|
|
{isFlexBooking || isChangeBooking ? (
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({ id: "Rebooking" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "Until {time}, {date}" },
|
|
{ time: "18:00", date: fromDate.format("dddd D MMM") }
|
|
)}
|
|
</Body>
|
|
</li>
|
|
) : null}
|
|
</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>
|
|
)
|
|
}
|