58 lines
2.1 KiB
TypeScript
58 lines
2.1 KiB
TypeScript
"use client"
|
|
import { use, 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 { BookingConfirmationProps } from "@/types/components/hotelReservation/bookingConfirmation/bookingConfirmation"
|
|
|
|
export default function BookingConfirmation({
|
|
bookingConfirmationPromise,
|
|
}: BookingConfirmationProps) {
|
|
const bookingConfirmation = use(bookingConfirmationPromise)
|
|
const mainRef = useRef<HTMLElement | null>(null)
|
|
return (
|
|
<main className={styles.main} ref={mainRef}>
|
|
<Header
|
|
booking={bookingConfirmation.booking}
|
|
hotel={bookingConfirmation.hotel}
|
|
mainRef={mainRef}
|
|
/>
|
|
<div className={styles.booking}>
|
|
<Rooms
|
|
booking={bookingConfirmation.booking}
|
|
room={bookingConfirmation.room}
|
|
/>
|
|
<PaymentDetails booking={bookingConfirmation.booking} />
|
|
<Divider color="primaryLightSubtle" />
|
|
<HotelDetails hotel={bookingConfirmation.hotel} />
|
|
<Promos />
|
|
<div className={styles.mobileReceipt}>
|
|
<Receipt
|
|
booking={bookingConfirmation.booking}
|
|
hotel={bookingConfirmation.hotel}
|
|
room={bookingConfirmation.room}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<aside className={styles.aside}>
|
|
<SidePanel variant="receipt">
|
|
<Receipt
|
|
booking={bookingConfirmation.booking}
|
|
hotel={bookingConfirmation.hotel}
|
|
room={bookingConfirmation.room}
|
|
/>
|
|
</SidePanel>
|
|
</aside>
|
|
</main>
|
|
)
|
|
}
|