ec60e9abdd
Feat/SW-1652 confirmation page * feat(SW-1652): handle linkedReservations fetching * fix: add missing translations * feat: add linkedReservation retry functionality * chore: align naming Approved-by: Simon.Emanuelsson
126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { CancellationRuleEnum } from "@/constants/booking"
|
|
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
|
|
|
|
import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
|
|
import Modal from "@/components/Modal"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import { formatPrice } from "@/utils/numberFormatting"
|
|
|
|
import RoomSkeletonLoader from "./RoomSkeletonLoader"
|
|
|
|
import styles from "./room.module.css"
|
|
|
|
import type { BookingConfirmationReceiptRoomProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"
|
|
|
|
export default function ReceiptRoom({
|
|
roomIndex,
|
|
}: BookingConfirmationReceiptRoomProps) {
|
|
const intl = useIntl()
|
|
const room = useBookingConfirmationStore((state) => state.rooms[roomIndex])
|
|
const currencyCode = useBookingConfirmationStore(
|
|
(state) => state.currencyCode
|
|
)
|
|
|
|
if (!room) {
|
|
return <RoomSkeletonLoader />
|
|
}
|
|
return (
|
|
<article className={styles.room}>
|
|
<header className={styles.roomHeader}>
|
|
<Body color="uiTextHighContrast">{room.name}</Body>
|
|
{room.rateDefinition.isMemberRate ? (
|
|
<div className={styles.memberPrice}>
|
|
<Body color="red">
|
|
{formatPrice(intl, room.roomPrice, currencyCode)}
|
|
</Body>
|
|
</div>
|
|
) : (
|
|
<Body color="uiTextHighContrast">
|
|
{formatPrice(intl, room.roomPrice, currencyCode)}
|
|
</Body>
|
|
)}
|
|
<Caption color="uiTextMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{totalAdults, plural, one {# adult} other {# adults}}" },
|
|
{
|
|
totalAdults: room.adults,
|
|
}
|
|
)}
|
|
</Caption>
|
|
<Caption color="uiTextMediumContrast">
|
|
{room.rateDefinition.cancellationText}
|
|
</Caption>
|
|
<Modal
|
|
trigger={
|
|
<Button intent="text" className={styles.termsLink}>
|
|
<Link
|
|
color="peach80"
|
|
href=""
|
|
size="small"
|
|
textDecoration="underline"
|
|
variant="icon"
|
|
>
|
|
{intl.formatMessage({ id: "Reservation policy" })}
|
|
<InfoCircleIcon color="peach80" />
|
|
</Link>
|
|
</Button>
|
|
}
|
|
title={room.rateDefinition.cancellationText || ""}
|
|
subtitle={
|
|
room.rateDefinition.cancellationRule ===
|
|
CancellationRuleEnum.CancellableBefore6PM
|
|
? intl.formatMessage({ id: "Pay later" })
|
|
: intl.formatMessage({ id: "Pay now" })
|
|
}
|
|
>
|
|
<div className={styles.terms}>
|
|
{room.rateDefinition.generalTerms?.map((info) => (
|
|
<Body
|
|
key={info}
|
|
color="uiTextHighContrast"
|
|
className={styles.termsText}
|
|
>
|
|
<CheckIcon
|
|
color="uiSemanticSuccess"
|
|
width={20}
|
|
height={20}
|
|
className={styles.termsIcon}
|
|
></CheckIcon>
|
|
{info}
|
|
</Body>
|
|
))}
|
|
</div>
|
|
</Modal>
|
|
</header>
|
|
<div className={styles.entry}>
|
|
<Body color="uiTextHighContrast">{room.bedDescription}</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{formatPrice(intl, 0, currencyCode)}
|
|
</Body>
|
|
</div>
|
|
<div className={styles.entry}>
|
|
<Body>{intl.formatMessage({ id: "Breakfast buffet" })}</Body>
|
|
{(room.rateDefinition.breakfastIncluded ?? room.breakfastIncluded) ? (
|
|
<Body color="red">{intl.formatMessage({ id: "Included" })}</Body>
|
|
) : null}
|
|
{room.selectedBreakfast ? (
|
|
<Body color="uiTextHighContrast">
|
|
{formatPrice(
|
|
intl,
|
|
room.selectedBreakfast.totalPrice,
|
|
room.selectedBreakfast.currency
|
|
)}
|
|
</Body>
|
|
) : null}
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|