web/components/HotelReservation/MyStay/MyStay/index.tsx

import { dt } from "@/lib/dt"
import {
  getAncillaryPackages,
  getBookingConfirmation,
} from "@/lib/trpc/memoizedRequests"

import Divider from "@/components/TempDesignSystem/Divider"

import HotelDetails from "../../BookingConfirmation/HotelDetails"
import PaymentDetails from "../../BookingConfirmation/PaymentDetails"
import Promos from "../../BookingConfirmation/Promos"
import Rooms from "../../BookingConfirmation/Rooms"
import { Ancillaries } from "./Ancillaries"
import { BookingActions } from "./BookingActions"
import { Header } from "./Header"

import styles from "./myStay.module.css"

export async function MyStay({ reservationId }: { reservationId: string }) {
  const { booking, hotel, room } = await getBookingConfirmation(reservationId)
  const fromDate = dt(booking.checkInDate).format("YYYY-MM-DD")
  const toDate = dt(booking.checkOutDate).format("YYYY-MM-DD")
  const hotelId = hotel.operaId
  const ancillaryInput = { fromDate, hotelId, toDate }
  void getAncillaryPackages(ancillaryInput)
  const ancillaryPackages = await getAncillaryPackages(ancillaryInput)

  return (
    <main className={styles.main}>
      <Header booking={booking} hotel={hotel} />
      <BookingActions />
      {room && <Rooms booking={booking} mainRoom={room} />}
      {booking.showAncillaries && (
        <Ancillaries ancillaries={ancillaryPackages} />
      )}
      <Divider color="primaryLightSubtle" />
      <PaymentDetails booking={booking} />
      <Divider color="primaryLightSubtle" />
      <HotelDetails hotel={hotel} />
      <Promos
        hotelId={hotel.operaId}
        lastName={booking.guest.lastName}
        confirmationNumber={booking.confirmationNumber}
      />
    </main>
  )
}