48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
"use client"
|
|
import { useRef } from "react"
|
|
|
|
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 Divider from "@/components/TempDesignSystem/Divider"
|
|
|
|
import styles from "./confirmation.module.css"
|
|
|
|
import type { ConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
|
|
|
|
export default function Confirmation({
|
|
booking,
|
|
hotel,
|
|
room,
|
|
}: ConfirmationProps) {
|
|
const mainRef = useRef<HTMLElement | null>(null)
|
|
return (
|
|
<main className={styles.main} ref={mainRef}>
|
|
<Header booking={booking} hotel={hotel} mainRef={mainRef} />
|
|
<div className={styles.booking}>
|
|
<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>
|
|
)
|
|
}
|