3c1eee88b1
Feat/SW-1370/Guarantee my stay ancillaries * feat(SW-1370): guarantee for ancillaries * feat(SW-1370): remove console log * feat(SW-1370): add translations * feat(SW-1370): small fix * feat(SW-1370): fix must be guaranteed * feat(SW-1370): fix logic and comments pr * feat(SW-1370): fix comments pr * feat(SW-1370): fix comments pr * feat(SW-1370): add translation * feat(SW-1370): add translation and fix pr comment * feat(SW-1370): fix pr comment * feat(SW-1370): fix encoding path refId issue * feat(SW-1370): refactor AddAncillaryStore usage and introduce context provider * feat(SW-1370): refactor * feat(SW-1370): refactor ancillaries * feat(SW-1370): fix merge Approved-by: Simon.Emanuelsson
176 lines
6.2 KiB
TypeScript
176 lines
6.2 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
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} />
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<p>
|
|
<strong>
|
|
{intl.formatMessage({ id: "Booking guaranteed." })}
|
|
</strong>{" "}
|
|
{intl.formatMessage({
|
|
id: "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({ 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>
|
|
)
|
|
}
|