fix: load room availability separately

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -1,7 +1,8 @@
-"use client"
-import { useEffect } from "react"
+import { Suspense, useEffect } from "react"
 import { useIntl } from "react-intl"
 
+import { Lang } from "@/constants/languages"
+import { getHotelData } from "@/lib/trpc/memoizedRequests"
 import useRoomAvailableStore from "@/stores/roomAvailability"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
@@ -11,38 +12,54 @@ import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import ReadMore from "../../ReadMore"
 import TripAdvisorChip from "../../TripAdvisorChip"
+import { NoRoomsAlert } from "./NoRoomsAlert"
 
 import styles from "./hotelInfoCard.module.css"
 
-import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCardProps"
-import { AlertTypeEnum } from "@/types/enums/alert"
+import { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
+
+type Props = {
+  hotelId: number
+  lang: Lang
+  fromDate: Date
+  toDate: Date
+  adultCount: number
+  childArray: Child[]
+}
+
+export default async function HotelInfoCard({
+  hotelId,
+  lang,
+  ...props
+}: Props) {
+  const hotelData = await getHotelData({
+    hotelId: hotelId.toString(),
+    language: lang,
+  })
 
-export default function HotelInfoCard({
-  hotelData,
-  noAvailability = false,
-}: HotelInfoCardProps) {
   const hotelAttributes = hotelData?.data.attributes
-  const intl = useIntl()
+  const intl = await getIntl()
 
-  const noRoomsAvailable = useRoomAvailableStore(
-    (state) => state.noRoomsAvailable
-  )
-  const setNoRoomsAvailable = useRoomAvailableStore(
-    (state) => state.setNoRoomsAvailable
-  )
+  // const noRoomsAvailable = useRoomAvailableStore(
+  //   (state) => state.noRoomsAvailable
+  // )
+  // const setNoRoomsAvailable = useRoomAvailableStore(
+  //   (state) => state.setNoRoomsAvailable
+  // )
 
   const sortedFacilities = hotelAttributes?.detailedFacilities
     .sort((a, b) => b.sortOrder - a.sortOrder)
     .slice(0, 5)
 
-  useEffect(() => {
-    if (noAvailability) {
-      setNoRoomsAvailable()
-    }
-  }, [noAvailability, setNoRoomsAvailable])
+  // useEffect(() => {
+  //   if (noAvailability) {
+  //     setNoRoomsAvailable()
+  //   }
+  // }, [noAvailability, setNoRoomsAvailable])
 
   return (
     <article className={styles.container}>
@@ -117,16 +134,10 @@ export default function HotelInfoCard({
           </div>
         )
       })}
-      {noRoomsAvailable ? (
-        <div className={styles.hotelAlert}>
-          <Alert
-            type={AlertTypeEnum.Info}
-            text={intl.formatMessage({
-              id: "There are no rooms available that match your request",
-            })}
-          />
-        </div>
-      ) : null}
+
+      <Suspense fallback={null} key={hotelId}>
+        <NoRoomsAlert hotelId={hotelId} lang={lang} {...props} />
+      </Suspense>
     </article>
   )
 }