392 lines
13 KiB
TypeScript
392 lines
13 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { dt } from "@/lib/dt"
|
|
import { useMyStayStore } from "@/stores/my-stay"
|
|
|
|
import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
|
|
import PriceType from "@/components/HotelReservation/MyStay/PriceType"
|
|
import { hasModifiableRate } from "@/components/HotelReservation/MyStay/utils"
|
|
import ImageGallery from "@/components/ImageGallery"
|
|
import Accordion from "@/components/TempDesignSystem/Accordion"
|
|
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
|
import IconChip from "@/components/TempDesignSystem/IconChip"
|
|
import SidePeek from "@/components/TempDesignSystem/SidePeek"
|
|
import useLang from "@/hooks/useLang"
|
|
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
|
|
import { formatPrice } from "@/utils/numberFormatting"
|
|
|
|
import RoomDetails from "./RoomDetails"
|
|
|
|
import styles from "./bookedRoomSidePeek.module.css"
|
|
|
|
import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
|
|
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
|
|
import type { BookedRoomSidePeekProps } from "@/types/components/sidePeeks/bookedRoomSidePeek"
|
|
|
|
export default function BookedRoomSidePeek({
|
|
room,
|
|
activeSidePeek,
|
|
user,
|
|
confirmationNumber,
|
|
close,
|
|
}: BookedRoomSidePeekProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const rooms = useMyStayStore((state) => state.rooms)
|
|
|
|
const bookingRoom = rooms.find(
|
|
(r) => r.confirmationNumber === confirmationNumber
|
|
)
|
|
|
|
if (!bookingRoom) {
|
|
return null
|
|
}
|
|
|
|
const {
|
|
adults,
|
|
bedType,
|
|
bookingCode,
|
|
breakfast,
|
|
cancellationNumber,
|
|
checkInDate,
|
|
childrenInRoom,
|
|
currencyCode,
|
|
isCancelled,
|
|
packages,
|
|
rateDefinition,
|
|
roomNumber,
|
|
terms,
|
|
totalPrice,
|
|
} = bookingRoom
|
|
|
|
const fromDate = dt(checkInDate).locale(lang)
|
|
|
|
const roomDescription = room.descriptions.medium
|
|
const galleryImages = mapApiImagesToGalleryImages(room.images)
|
|
|
|
const adultsMsg = intl.formatMessage(
|
|
{
|
|
defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
|
|
},
|
|
{
|
|
adults: adults,
|
|
}
|
|
)
|
|
|
|
const childrenMsg = intl.formatMessage(
|
|
{
|
|
defaultMessage: "{children, plural, one {# child} other {# children}}",
|
|
},
|
|
{
|
|
children: childrenInRoom.length,
|
|
}
|
|
)
|
|
|
|
const adultsOnlyMsg = adultsMsg
|
|
const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
|
|
|
|
const formattedTotalPrice = formatPrice(intl, totalPrice, currencyCode)
|
|
|
|
let breakfastPrice = intl.formatMessage({
|
|
defaultMessage: "No breakfast",
|
|
})
|
|
if (rateDefinition.breakfastIncluded) {
|
|
breakfastPrice = intl.formatMessage({
|
|
defaultMessage: "Included",
|
|
})
|
|
} else if (breakfast) {
|
|
breakfastPrice = formatPrice(
|
|
intl,
|
|
breakfast.localPrice.totalPrice,
|
|
breakfast.localPrice.currency
|
|
)
|
|
}
|
|
|
|
return (
|
|
<SidePeek
|
|
title={room.name}
|
|
isOpen={activeSidePeek === SidePeekEnum.bookedRoomDetails}
|
|
handleClose={close}
|
|
>
|
|
<div className={styles.wrapper}>
|
|
<div className={styles.roomHeader}>
|
|
{isCancelled ? (
|
|
<IconChip
|
|
color={"red"}
|
|
icon={
|
|
<MaterialIcon
|
|
icon="cancel"
|
|
size={20}
|
|
color="Icon/Feedback/Error"
|
|
/>
|
|
}
|
|
>
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<span>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Cancelled",
|
|
})}
|
|
</span>
|
|
</Typography>
|
|
</IconChip>
|
|
) : (
|
|
<div className={styles.chip}>
|
|
<Typography variant="Tag/sm">
|
|
<span>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Room {roomIndex}",
|
|
},
|
|
{ roomIndex: roomNumber }
|
|
)}
|
|
</span>
|
|
</Typography>
|
|
</div>
|
|
)}
|
|
<div className={styles.reference}>
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
{isCancelled ? (
|
|
<span>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Cancellation no",
|
|
})}
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
{":"}
|
|
</span>
|
|
) : (
|
|
<span>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Reference",
|
|
})}
|
|
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
|
{":"}
|
|
</span>
|
|
)}
|
|
</Typography>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
{isCancelled ? (
|
|
<span className={styles.cancellationNumber}>
|
|
{cancellationNumber}
|
|
</span>
|
|
) : (
|
|
<span>{confirmationNumber}</span>
|
|
)}
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
<div className={styles.mainContent}>
|
|
<div className={styles.imageContainer}>
|
|
<ImageGallery
|
|
images={galleryImages}
|
|
title={room.name}
|
|
height={280}
|
|
/>
|
|
</div>
|
|
<div className={styles.roomDetails}>
|
|
<div className={styles.row}>
|
|
<span className={styles.rowTitle}>
|
|
<MaterialIcon icon="person" color="Icon/Default" size={20} />
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<p>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Guests",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
</span>
|
|
<div className={styles.rowContent}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p color="uiTextHighContrast">
|
|
{childrenInRoom.length > 0
|
|
? adultsAndChildrenMsg
|
|
: adultsOnlyMsg}
|
|
</p>
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
<div className={styles.row}>
|
|
<span className={styles.rowTitle}>
|
|
<MaterialIcon icon="contract" color="Icon/Default" size={20} />
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<p>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Terms",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
</span>
|
|
<div className={styles.rowContent}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p color="uiTextHighContrast">{terms}</p>
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
{hasModifiableRate(rateDefinition.cancellationRule) && (
|
|
<div className={styles.row}>
|
|
<span className={styles.rowTitle}>
|
|
<MaterialIcon icon="refresh" color="Icon/Default" size={20} />
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<p>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Modify By",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
</span>
|
|
<div className={styles.rowContent}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Until {time}, {date}",
|
|
},
|
|
{ time: "18:00", date: fromDate.format("dddd D MMM") }
|
|
)}
|
|
</p>
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className={styles.row}>
|
|
<span className={styles.rowTitle}>
|
|
<MaterialIcon icon="coffee" color="Icon/Default" size={20} />
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<p>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Breakfast",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
</span>
|
|
<div className={styles.rowContent}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p color="uiTextHighContrast">{breakfastPrice}</p>
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
{packages?.some((item) =>
|
|
Object.values(RoomPackageCodeEnum).includes(
|
|
item.code as RoomPackageCodeEnum
|
|
)
|
|
) && (
|
|
<div className={styles.row}>
|
|
<span className={styles.rowTitle}>
|
|
<MaterialIcon
|
|
icon="meeting_room"
|
|
color="Icon/Default"
|
|
size={20}
|
|
/>
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<p>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Room classification",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
</span>
|
|
<div className={styles.rowContent}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p color="uiTextHighContrast">
|
|
{packages
|
|
?.filter((item) =>
|
|
Object.values(RoomPackageCodeEnum).includes(
|
|
item.code as RoomPackageCodeEnum
|
|
)
|
|
)
|
|
.map((item) => item.description)
|
|
.join(", ")}
|
|
</p>
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className={styles.row}>
|
|
<span className={styles.rowTitle}>
|
|
<MaterialIcon icon="bed" color="Icon/Default" size={20} />
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<p>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Bed preference",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
</span>
|
|
<div className={styles.rowContent}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p color="uiTextHighContrast">{bedType?.description}</p>
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={styles.bookingInformation}>
|
|
<div className={styles.priceDetails}>
|
|
<div className={styles.price}>
|
|
<Typography variant="Body/Lead text">
|
|
<p color="uiTextHighContrast">
|
|
{intl.formatMessage({
|
|
defaultMessage: "Room total",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
|
|
<PriceType
|
|
cheques={bookingRoom.cheques}
|
|
formattedTotalPrice={formattedTotalPrice}
|
|
isCancelled={bookingRoom.isCancelled}
|
|
priceType={bookingRoom.priceType}
|
|
rateDefinition={bookingRoom.rateDefinition}
|
|
roomPoints={bookingRoom.roomPoints}
|
|
totalPrice={bookingRoom.totalPrice}
|
|
vouchers={bookingRoom.vouchers}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{bookingCode && (
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<IconChip
|
|
color="blue"
|
|
icon={<DiscountIcon color="Icon/Feedback/Information" />}
|
|
>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "<strong>Booking code</strong>: {value}",
|
|
},
|
|
{
|
|
value: bookingCode,
|
|
strong: (text) => (
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<strong>{text}</strong>
|
|
</Typography>
|
|
),
|
|
}
|
|
)}
|
|
</IconChip>
|
|
</Typography>
|
|
)}
|
|
|
|
<GuestDetails selectedRoom={bookingRoom} user={user} />
|
|
</div>
|
|
<Accordion>
|
|
<AccordionItem
|
|
title={intl.formatMessage({
|
|
defaultMessage: "Room details",
|
|
})}
|
|
variant="sidepeek"
|
|
>
|
|
<RoomDetails
|
|
roomDescription={roomDescription}
|
|
roomFacilities={room.roomFacilities}
|
|
roomTypes={room.roomTypes}
|
|
/>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</div>
|
|
</SidePeek>
|
|
)
|
|
}
|