67 lines
2.6 KiB
TypeScript
67 lines
2.6 KiB
TypeScript
"use client"
|
|
import { useRef } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Header from "@/components/HotelReservation/BookingConfirmation/Header"
|
|
import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
|
|
import PaymentDetails from "@/components/HotelReservation/BookingConfirmation/PaymentDetails"
|
|
import Promos from "@/components/HotelReservation/BookingConfirmation/Promos"
|
|
import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
|
|
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
|
|
import SidePanel from "@/components/HotelReservation/SidePanel"
|
|
import Alert from "@/components/TempDesignSystem/Alert"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
|
|
import styles from "./confirmation.module.css"
|
|
|
|
import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
|
|
import { AlertTypeEnum } from "@/types/enums/alert"
|
|
|
|
export default function Confirmation({
|
|
booking,
|
|
hotel,
|
|
room,
|
|
}: ConfirmationProps) {
|
|
const intl = useIntl()
|
|
const mainRef = useRef<HTMLElement | null>(null)
|
|
|
|
const failedToVerifyMembership =
|
|
booking.rateDefinition.isMemberRate && !booking.guest.membershipNumber
|
|
|
|
return (
|
|
<main className={styles.main} ref={mainRef}>
|
|
<Header booking={booking} hotel={hotel} mainRef={mainRef} />
|
|
<div className={styles.booking}>
|
|
{failedToVerifyMembership && (
|
|
<Alert
|
|
type={AlertTypeEnum.Info}
|
|
heading={intl.formatMessage({
|
|
id: "Failed to verify membership",
|
|
})}
|
|
text={intl.formatMessage({
|
|
id: "Your booking(s) is confirmed but we could not verify your membership. If you have booked with a member discount, you'll either need to present your existing membership number upon check-in, become a member or pay the price difference at the hotel. Signing up is preferably done online before the stay.",
|
|
})}
|
|
/>
|
|
)}
|
|
<Rooms booking={booking} room={room} />
|
|
<PaymentDetails booking={booking} />
|
|
<Divider color="primaryLightSubtle" />
|
|
<HotelDetails hotel={hotel} />
|
|
<Promos
|
|
confirmationNumber={booking.confirmationNumber}
|
|
hotelId={hotel.operaId}
|
|
lastName={booking.guest.lastName}
|
|
/>
|
|
<div className={styles.mobileReceipt}>
|
|
<Receipt booking={booking} hotel={hotel} room={room} />
|
|
</div>
|
|
</div>
|
|
<aside className={styles.aside}>
|
|
<SidePanel variant="receipt">
|
|
<Receipt booking={booking} hotel={hotel} room={room} />
|
|
</SidePanel>
|
|
</aside>
|
|
</main>
|
|
)
|
|
}
|