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

import { cookies } from "next/headers"
import { notFound } from "next/navigation"

import { Typography } from "@scandic-hotels/design-system/Typography"

import { dt } from "@/lib/dt"
import {
  getAncillaryPackages,
  getBookingConfirmation,
  getProfileSafely,
} from "@/lib/trpc/memoizedRequests"
import { decrypt } from "@/server/routers/utils/encryption"

import { ScandicLogoIcon } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"

import AdditionalInfoForm from "../../FindMyBooking/AdditionalInfoForm"
import accessBooking, {
  ACCESS_GRANTED,
  ERROR_BAD_REQUEST,
  ERROR_UNAUTHORIZED,
} from "../accessBooking"
import Footer from "./Footer"
import Specification from "./Specification"
import Total from "./Total"

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

export async function Receipt({ 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, 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 ancillaryPackages = await getAncillaryPackages({
      fromDate: dt(booking.checkInDate).format("YYYY-MM-DD"),
      hotelId: hotel.operaId,
      toDate: dt(booking.checkOutDate).format("YYYY-MM-DD"),
    })

    const currency =
      booking.currencyCode !== "Points"
        ? booking.currencyCode
        : (booking.ancillaries.find((a) => a.currency !== "Points")?.currency ??
          booking.packages.find((p) => p.currency !== "Points")?.currency)

    return (
      <main className={styles.main}>
        <div>
          <ScandicLogoIcon width="89px" height="19px" color="red" />
          <div className={styles.addresses}>
            <div>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div>{hotel.name}</div>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div>
                  {`${hotel.address.streetAddress}, ${hotel.address.zipCode} ${hotel.address.city}`}
                </div>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div className={`${styles.tertiary} ${styles.addressMargin}`}>
                  {hotel.contactInformation.email}
                </div>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div className={styles.tertiary}>
                  {hotel.contactInformation.phoneNumber}
                </div>
              </Typography>
            </div>
            <div className={styles.rightColumn}>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div>{`${booking.guest.firstName} ${booking.guest.lastName}`}</div>
              </Typography>
              {booking.guest.membershipNumber && (
                <Typography variant="Body/Supporting text (caption)/smRegular">
                  <div>{`${intl.formatMessage({ id: "Member" })} ${booking.guest.membershipNumber}`}</div>
                </Typography>
              )}
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div className={`${styles.tertiary} ${styles.addressMargin}`}>
                  {booking.guest.email}
                </div>
              </Typography>
              <Typography variant="Body/Supporting text (caption)/smRegular">
                <div className={styles.tertiary}>
                  {booking.guest.phoneNumber}
                </div>
              </Typography>
            </div>
          </div>
        </div>
        <Total booking={booking} currency={currency} />
        <Specification
          ancillaryPackages={ancillaryPackages}
          booking={booking}
          currency={currency}
        />

        <hr className={styles.divider} />

        <Footer booking={booking} room={room} />
      </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()
}