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

import { cookies } from "next/headers"
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,
  getSavedPaymentCardsSafely,
} from "@/lib/trpc/memoizedRequests"
import { decrypt } from "@/server/routers/utils/encryption"

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

import AdditionalInfoForm from "../FindMyBooking/AdditionalInfoForm"
import LinkedReservationSkeleton from "./LinkedReservation/LinkedReservationSkeleton"
import accessBooking, {
  ACCESS_GRANTED,
  ERROR_BAD_REQUEST,
  ERROR_UNAUTHORIZED,
} from "./accessBooking"
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({ refId }: { refId: string }) {
  const value = decrypt(refId)
  if (!value) {
    return notFound()
  }
  const [confirmationNumber, lastName] = value.split(",")
  const bookingConfirmation = await getBookingConfirmation(confirmationNumber)
  if (!bookingConfirmation) {
    return notFound()
  }

  const { booking, hotel, additionalData, room } = bookingConfirmation
  const user = await getProfileSafely()
  const bv = cookies().get("bv")?.value
  const intl = await getIntl()

  const access = accessBooking(booking.guest, lastName, user, bv)
  if (access === ACCESS_GRANTED) {
    const linkedBookingPromises = booking.linkedReservations
      ? booking.linkedReservations.map((linkedBooking) => {
          return getBookingConfirmation(linkedBooking.confirmationNumber)
        })
      : []

    const lang = getLang()
    const ancillaryPackages = await getAncillaryPackages({
      fromDate: dt(booking.checkInDate).format("YYYY-MM-DD"),
      hotelId: hotel.operaId,
      toDate: dt(booking.checkOutDate).format("YYYY-MM-DD"),
    })
    const supportedCards = hotel.merchantInformationData.cards
    const savedCreditCards = await getSavedPaymentCardsSafely({
      supportedCards,
    })

    const imageSrc =
      hotel.hotelContent.images.imageSizes.large ??
      additionalData.gallery?.heroImages[0]?.imageSizes.large ??
      hotel.galleryImages[0]?.imageSizes.large

    return (
      <main className={styles.main}>
        <div className={styles.imageContainer}>
          <div className={styles.blurOverlay} />
          {imageSrc && (
            <Image
              className={styles.image}
              src={imageSrc}
              alt={hotel.name}
              fill
            />
          )}
        </div>
        <div className={styles.content}>
          <div className={styles.headerContainer}>
            <Header hotel={hotel} />
            <ReferenceCard
              booking={booking}
              hotel={hotel}
              user={user}
              savedCreditCards={savedCreditCards}
              refId={refId}
            />
          </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} room={room} />
          <Promo
            buttonText={intl.formatMessage({ id: "Book another stay" })}
            href={`${homeHrefs[env.NODE_ENV][lang]}?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>
    )
  }

  if (access === ERROR_BAD_REQUEST) {
    return (
      <main className={styles.main}>
        <div className={styles.form}>
          <AdditionalInfoForm
            confirmationNumber={confirmationNumber}
            lastName={lastName}
          />
        </div>
      </main>
    )
  }

  if (access === ERROR_UNAUTHORIZED) {
    return (
      <main className={styles.main}>
        <div className={styles.logIn}>
          <Body textAlign="center">
            {intl.formatMessage({
              id: "In order to view your booking, please log in.",
            })}
          </Body>
        </div>
      </main>
    )
  }

  return notFound()
}