fix: load room availabiltity separately

components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.module.css

@@ -0,0 +1,5 @@
+.hotelAlert {
+  max-width: var(--max-width-navigation);
+  margin: 0 auto;
+  padding-top: var(--Spacing-x-one-and-half);
+}

components/HotelReservation/SelectRate/HotelInfoCard/NoRoomsAlert.tsx

@@ -0,0 +1,73 @@
+import { Lang } from "@/constants/languages"
+import { dt } from "@/lib/dt"
+import { getRoomAvailability } from "@/lib/trpc/memoizedRequests"
+
+import Alert from "@/components/TempDesignSystem/Alert"
+import { getIntl } from "@/i18n"
+import { safeTry } from "@/utils/safeTry"
+
+import { generateChildrenString } from "../RoomSelection/utils"
+
+import styles from "./NoRoomsAlert.module.css"
+
+import { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+type Props = {
+  hotelId: number
+  lang: Lang
+  adultCount: number
+  childArray: Child[]
+  fromDate: Date
+  toDate: Date
+}
+
+export async function NoRoomsAlert({
+  hotelId,
+  fromDate,
+  toDate,
+  childArray,
+  adultCount,
+  lang,
+}: Props) {
+  const [availability, availabilityError] = await safeTry(
+    getRoomAvailability({
+      hotelId: hotelId,
+      roomStayStartDate: dt(fromDate).format("YYYY-MM-DD"),
+      roomStayEndDate: dt(toDate).format("YYYY-MM-DD"),
+      adults: adultCount,
+      children: generateChildrenString(childArray), // TODO: Handle multiple rooms,
+    })
+  )
+
+  if (!availability) {
+    return null
+  }
+
+  if (availabilityError) {
+    // TODO: Handle error
+  }
+
+  const noRoomsAvailable = availability.roomConfigurations.reduce(
+    (acc, room) => {
+      return acc && room.status === "NotAvailable"
+    },
+    true
+  )
+
+  if (!noRoomsAvailable) {
+    return null
+  }
+
+  const intl = await getIntl(lang)
+  return (
+    <div className={styles.hotelAlert}>
+      <Alert
+        type={AlertTypeEnum.Info}
+        text={intl.formatMessage({
+          id: "There are no rooms available that match your request",
+        })}
+      />
+    </div>
+  )
+}

components/HotelReservation/SelectRate/Rooms/RoomsContainer.tsx

@@ -0,0 +1,96 @@
+import { Lang } from "@/constants/languages"
+import { dt } from "@/lib/dt"
+import {
+  getHotelData,
+  getPackages,
+  getProfileSafely,
+  getRoomAvailability,
+} from "@/lib/trpc/memoizedRequests"
+import { serverClient } from "@/lib/trpc/server"
+
+import { safeTry } from "@/utils/safeTry"
+
+import { generateChildrenString } from "../RoomSelection/utils"
+import Rooms from "."
+
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
+
+export type Props = {
+  hotelId: number
+  fromDate: Date
+  toDate: Date
+  adultCount: number
+  childArray: Child[]
+  lang: Lang
+}
+
+export async function RoomsContainer({
+  hotelId,
+  fromDate,
+  toDate,
+  adultCount,
+  childArray,
+  lang,
+}: Props) {
+  const user = await getProfileSafely()
+
+  const fromDateString = dt(fromDate).format("YYYY-MM-DD")
+  const toDateString = dt(toDate).format("YYYY-MM-DD")
+
+  const hotelDataPromise = safeTry(
+    getHotelData({ hotelId: hotelId.toString(), language: lang })
+  )
+
+  const packagesPromise = safeTry(
+    getPackages({
+      hotelId: hotelId.toString(),
+      startDate: fromDateString,
+      endDate: toDateString,
+      adults: adultCount,
+      children: childArray.length > 0 ? childArray.length : undefined,
+      packageCodes: [
+        RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
+        RoomPackageCodeEnum.PET_ROOM,
+        RoomPackageCodeEnum.ALLERGY_ROOM,
+      ],
+    })
+  )
+
+  const roomsAvailabilityPromise = safeTry(
+    getRoomAvailability({
+      hotelId: hotelId,
+      roomStayStartDate: fromDateString,
+      roomStayEndDate: toDateString,
+      adults: adultCount,
+      children: generateChildrenString(childArray),
+    })
+  )
+
+  const [hotelData, hotelDataError] = await hotelDataPromise
+  const [packages, packagesError] = await packagesPromise
+  const [roomsAvailability, roomsAvailabilityError] =
+    await roomsAvailabilityPromise
+
+  if (packagesError) {
+    console.error("packagesError", { ...packagesError })
+
+    return (
+      <div>Unable to get packages. {JSON.stringify({ ...packagesError })}</div>
+    )
+  }
+
+  if (roomsAvailabilityError || !roomsAvailability) {
+    console.error("roomsAvailabilityError", roomsAvailabilityError)
+    return <div>Unable to get room availability</div>
+  }
+
+  return (
+    <Rooms
+      user={user}
+      packages={packages ?? []}
+      roomsAvailability={roomsAvailability}
+      roomCategories={hotelData?.included ?? []}
+    />
+  )
+}

utils/safeTry.ts

@@ -0,0 +1,11 @@
+export type SafeTryResult<T> = Promise<
+  [T, undefined] | [undefined, Error | unknown]
+>
+
+export async function safeTry<T>(func: Promise<T>): SafeTryResult<T> {
+  try {
+    return [await func, undefined]
+  } catch (err) {
+    return [undefined, err]
+  }
+}