web/apps/scandic-web/components/HotelReservation/MyStay/index.tsx

import { notFound } from "next/navigation"
import { Suspense } from "react"

import { homeHrefs } from "@/constants/homeHrefs"
import { env } from "@/env/server"
import { dt } from "@/lib/dt"
import {
  getAncillaryPackages,
  getBookingConfirmation,
  getProfileSafely,
} from "@/lib/trpc/memoizedRequests"

import Image from "@/components/Image"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

import LinkedReservationSkeleton from "./LinkedReservation/LinkedReservationSkeleton"
import { Ancillaries } from "./Ancillaries"
import BookingSummary from "./BookingSummary"
import { Header } from "./Header"
import LinkedReservation from "./LinkedReservation"
import Promo from "./Promo"
import { ReferenceCard } from "./ReferenceCard"
import { Room } from "./Room"

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

export async function MyStay({ reservationId }: { reservationId: string }) {
  const bookingConfirmation = await getBookingConfirmation(reservationId)
  if (!bookingConfirmation) {
    return notFound()
  }

  const { booking, hotel, room } = bookingConfirmation

  const linkedBookingPromises = booking.linkedReservations
    ? booking.linkedReservations.map((linkedBooking) => {
        return getBookingConfirmation(linkedBooking.confirmationNumber)
      })
    : []

  const userResponse = await getProfileSafely()
  const user = userResponse && !("error" in userResponse) ? userResponse : null
  const intl = await getIntl()
  const lang = getLang()
  const homeUrl = homeHrefs[env.NODE_ENV][lang]
  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 }
  const ancillaryPackages = await getAncillaryPackages(ancillaryInput)

  return (
    <main className={styles.main}>
      <div className={styles.imageContainer}>
        <div className={styles.blurOverlay} />

        <Image
          className={styles.image}
          src={
            hotel.gallery?.heroImages[0]?.imageSizes.large ??
            hotel.galleryImages[0]?.imageSizes.large ??
            ""
          }
          alt={hotel.name}
          fill
        />
      </div>
      <div className={styles.content}>
        <div className={styles.headerContainer}>
          <Header hotel={hotel} />
          <ReferenceCard booking={booking} hotel={hotel} />
        </div>
        {booking.showAncillaries && (
          <Ancillaries
            ancillaries={ancillaryPackages}
            booking={booking}
            user={user}
          />
        )}
        <div>
          <Room booking={booking} room={room} hotel={hotel} user={user} />
          {booking.linkedReservations.map((linkedRes, index) => (
            <Suspense
              key={linkedRes.confirmationNumber}
              fallback={<LinkedReservationSkeleton />}
            >
              <LinkedReservation
                bookingPromise={linkedBookingPromises[index]}
                index={index}
              />
            </Suspense>
          ))}
        </div>
        <BookingSummary booking={booking} hotel={hotel} />
        <Promo
          buttonText={intl.formatMessage({ id: "Book another stay" })}
          href={`${homeUrl}?hotel=${hotel.operaId}`}
          text={intl.formatMessage({
            id: "Get inspired and start dreaming beyond your next trip. Explore more Scandic destinations.",
          })}
          title={intl.formatMessage({ id: "Book your next stay" })}
        />
      </div>
    </main>
  )
}