113 lines
4.6 KiB
TypeScript
113 lines
4.6 KiB
TypeScript
import { differenceInCalendarDays, format, isWeekend } from "date-fns"
|
|
import { Suspense } from "react"
|
|
|
|
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
|
|
|
|
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 LoadingSpinner from "@/components/LoadingSpinner"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import TrackingSDK from "@/components/TrackingSDK"
|
|
import { setLang } from "@/i18n/serverContext"
|
|
|
|
import styles from "./page.module.css"
|
|
|
|
import {
|
|
TrackingChannelEnum,
|
|
TrackingSDKHotelInfo,
|
|
TrackingSDKPageData,
|
|
} from "@/types/components/tracking"
|
|
import { CurrencyEnum } from "@/types/enums/currency"
|
|
import type { LangParams, PageArgs } from "@/types/params"
|
|
|
|
export default async function BookingConfirmationPage({
|
|
params,
|
|
searchParams,
|
|
}: PageArgs<LangParams, { confirmationNumber: string }>) {
|
|
setLang(params.lang)
|
|
void getBookingConfirmation(searchParams.confirmationNumber)
|
|
const { confirmationNumber } = searchParams
|
|
|
|
const { hotel, booking } = await getBookingConfirmation(confirmationNumber)
|
|
|
|
const arrivalDate = new Date(booking.checkInDate)
|
|
const departureDate = new Date(booking.checkOutDate)
|
|
|
|
const initialPageTrackingData: TrackingSDKPageData = {
|
|
pageId: "booking-confirmation",
|
|
domainLanguage: params.lang,
|
|
channel: TrackingChannelEnum["hotelreservation"],
|
|
pageName: `hotelreservation|confirmation`,
|
|
siteSections: `hotelreservation|confirmation`,
|
|
pageType: "confirmation",
|
|
siteVersion: "new-web",
|
|
}
|
|
|
|
const initialHotelsTrackingData: TrackingSDKHotelInfo = {
|
|
searchTerm: searchParams.city,
|
|
arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
|
|
departureDate: format(departureDate, "yyyy-MM-dd"),
|
|
noOfAdults: booking.adults,
|
|
noOfChildren: booking.childrenAges?.length,
|
|
ageOfChildren: booking.childrenAges?.join(","),
|
|
childBedPreference: booking?.extraBedTypes?.map((c) => c.bedType).join("|"),
|
|
noOfRooms: 1, // // TODO: Handle multiple rooms
|
|
duration: differenceInCalendarDays(departureDate, arrivalDate),
|
|
leadTime: differenceInCalendarDays(arrivalDate, new Date()),
|
|
searchType: "hotel",
|
|
bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
|
|
country: hotel?.address.country,
|
|
region: hotel?.address.city,
|
|
rateCode: booking.rateDefinition.rateCode ?? undefined,
|
|
rateCodeType: booking.rateDefinition.title ?? undefined,
|
|
rateCodeName: booking.rateDefinition.rateCode ?? undefined,
|
|
rateCodeCancellationRule:
|
|
booking.rateDefinition?.cancellationText ?? undefined,
|
|
revenueCurrencyCode: CurrencyEnum[booking.currencyCode],
|
|
breakfastOption: booking.rateDefinition.breakfastIncluded
|
|
? "breakfast buffet"
|
|
: "no breakfast",
|
|
totalPrice: booking.totalPrice,
|
|
//specialRoomType: getSpecialRoomType(booking.packages), TODO: Add
|
|
//roomTypeName: booking.roomTypeCode ?? undefined, TODO: Do we get the name?
|
|
//bedType: bedType?.description, TODO: Can we get bedType?
|
|
roomTypeCode: booking.roomTypeCode ?? undefined,
|
|
roomPrice: booking.roomPrice,
|
|
bnr: booking.confirmationNumber ?? undefined,
|
|
}
|
|
|
|
return (
|
|
<main className={styles.main}>
|
|
<Suspense fallback={<LoadingSpinner fullPage />}>
|
|
<Header confirmationNumber={searchParams.confirmationNumber} />
|
|
<div className={styles.booking}>
|
|
<Rooms confirmationNumber={searchParams.confirmationNumber} />
|
|
<PaymentDetails
|
|
confirmationNumber={searchParams.confirmationNumber}
|
|
/>
|
|
<Divider color="primaryLightSubtle" />
|
|
<HotelDetails confirmationNumber={searchParams.confirmationNumber} />
|
|
<Promos />
|
|
<div className={styles.mobileReceipt}>
|
|
<Receipt confirmationNumber={searchParams.confirmationNumber} />
|
|
</div>
|
|
</div>
|
|
<aside className={styles.aside}>
|
|
<SidePanel variant="receipt">
|
|
<Receipt confirmationNumber={searchParams.confirmationNumber} />
|
|
</SidePanel>
|
|
</aside>
|
|
<TrackingSDK
|
|
pageData={initialPageTrackingData}
|
|
hotelInfo={initialHotelsTrackingData}
|
|
/>
|
|
</Suspense>
|
|
</main>
|
|
)
|
|
}
|