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>
+  )
+}