web/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@summary/page.tsx

import { redirect } from "next/navigation"

import { selectRate } from "@/constants/routes/hotelReservation"
import {
  getPackages,
  getProfileSafely,
  getSelectedRoomAvailability,
} from "@/lib/trpc/memoizedRequests"

import Summary from "@/components/HotelReservation/EnterDetails/Summary"
import { SummaryBottomSheet } from "@/components/HotelReservation/EnterDetails/Summary/BottomSheet"
import {
  generateChildrenString,
  getQueryParamsForEnterDetails,
} from "@/components/HotelReservation/SelectRate/RoomSelection/utils"

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

import { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
import { LangParams, PageArgs, SearchParams } from "@/types/params"

export default async function SummaryPage({
  params,
  searchParams,
}: PageArgs<LangParams, SearchParams<SelectRateSearchParams>>) {
  const selectRoomParams = new URLSearchParams(searchParams)
  const { hotel, rooms, fromDate, toDate } =
    getQueryParamsForEnterDetails(selectRoomParams)

  const {
    adults,
    children,
    roomTypeCode,
    rateCode,
    packages: packageCodes,
  } = rooms[0] // TODO: Handle multiple rooms

  const availability = await getSelectedRoomAvailability({
    hotelId: hotel,
    adults,
    children: children ? generateChildrenString(children) : undefined,
    roomStayStartDate: fromDate,
    roomStayEndDate: toDate,
    rateCode,
    roomTypeCode,
    packageCodes,
  })
  const user = await getProfileSafely()

  const packages = packageCodes
    ? await getPackages({
        hotelId: hotel,
        startDate: fromDate,
        endDate: toDate,
        adults,
        children: children?.length,
        packageCodes,
      })
    : null

  if (!availability || !availability.selectedRoom) {
    console.error("No hotel or availability data", availability)
    // TODO: handle this case
    redirect(selectRate(params.lang))
  }

  const prices = {
    public: {
      local: {
        amount: availability.publicRate.localPrice.pricePerStay,
        currency: availability.publicRate.localPrice.currency,
      },
      euro: availability.publicRate?.requestedPrice
        ? {
            amount: availability.publicRate?.requestedPrice.pricePerStay,
            currency: availability.publicRate?.requestedPrice.currency,
          }
        : undefined,
    },
    member: availability.memberRate
      ? {
          local: {
            amount: availability.memberRate.localPrice.pricePerStay,
            currency: availability.memberRate.localPrice.currency,
          },
          euro: availability.memberRate.requestedPrice
            ? {
                amount: availability.memberRate.requestedPrice.pricePerStay,
                currency: availability.memberRate.requestedPrice.currency,
              }
            : undefined,
        }
      : undefined,
  }

  return (
    <>
      <div className={styles.mobileSummary}>
        <SummaryBottomSheet>
          <div className={styles.summary}>
            <Summary
              showMemberPrice={!!(user && availability.memberRate)}
              room={{
                roomType: availability.selectedRoom.roomType,
                prices,
                adults,
                children,
                rateDetails: availability.rateDetails,
                cancellationText: availability.cancellationText,
                packages,
              }}
            />
          </div>
        </SummaryBottomSheet>
      </div>
      <div className={styles.desktopSummary}>
        <div className={styles.hider} />
        <div className={styles.summary}>
          <Summary
            showMemberPrice={!!(user && availability.memberRate)}
            room={{
              roomType: availability.selectedRoom.roomType,
              prices,
              adults,
              children,
              rateDetails: availability.rateDetails,
              cancellationText: availability.cancellationText,
              packages,
            }}
          />
        </div>
        <div className={styles.shadow} />
      </div>
    </>
  )
}