57cd2f6a7f
fix(SW-2197): Properly hide benefits message element when isMemberRate is false * fix(SW-2197): correct hiding of benefit text Approved-by: Christian Andolf
210 lines
6.9 KiB
TypeScript
210 lines
6.9 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { CancellationRuleEnum } from "@/constants/booking"
|
|
import { dt } from "@/lib/dt"
|
|
|
|
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,
|
|
checkInTime,
|
|
checkOutTime,
|
|
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}>
|
|
{booking.rateDefinition.isMemberRate ? (
|
|
<div className={styles.benefits}>
|
|
<>
|
|
<MaterialIcon
|
|
color="Icon/Feedback/Success"
|
|
icon="check_circle"
|
|
size={20}
|
|
/>
|
|
<Caption>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Membership benefits applied",
|
|
})}
|
|
</Caption>
|
|
</>
|
|
</div>
|
|
) : null}
|
|
{booking.guaranteeInfo && (
|
|
<div className={styles.benefits}>
|
|
<MaterialIcon
|
|
icon="check"
|
|
color="Icon/Feedback/Success"
|
|
size={20}
|
|
/>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<p>
|
|
<strong>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Booking guaranteed.",
|
|
})}
|
|
</strong>
|
|
{/* eslint-disable formatjs/no-literal-string-in-jsx */}{" "}
|
|
{/* eslint-enable formatjs/no-literal-string-in-jsx */}
|
|
{intl.formatMessage({
|
|
defaultMessage:
|
|
"Your room will remain available for check-in even after 18:00.",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
</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({
|
|
defaultMessage: "View room details",
|
|
})}
|
|
<MaterialIcon
|
|
icon="chevron_right"
|
|
size={20}
|
|
color="CurrentColor"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<ul className={styles.details}>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Check-in",
|
|
})}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "{checkInDate} from {checkInTime}",
|
|
},
|
|
{
|
|
checkInDate: fromDate.format("ddd, D MMM"),
|
|
checkInTime: checkInTime,
|
|
}
|
|
)}
|
|
</Body>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Check-out",
|
|
})}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "{checkOutDate} from {checkOutTime}",
|
|
},
|
|
{
|
|
checkOutDate: toDate.format("ddd, D MMM"),
|
|
checkOutTime: checkOutTime,
|
|
}
|
|
)}
|
|
</Body>
|
|
</li>
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Cancellation policy",
|
|
})}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{booking.rateDefinition.cancellationText}
|
|
</Body>
|
|
</li>
|
|
{isFlexBooking || isChangeBooking ? (
|
|
<li className={styles.listItem}>
|
|
<Body color="uiTextPlaceholder">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Rebooking",
|
|
})}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "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({
|
|
defaultMessage: "Main guest",
|
|
})}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">{guestName}</Body>
|
|
{booking.guest.membershipNumber ? (
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "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>
|
|
)
|
|
}
|