Merged in feat/booking-flow-performance (pull request #1282)

feat: booking flow performance

* feat: booking flow performance

* Cleanup


Approved-by: Michael Zetterberg
Approved-by: Pontus Dreij

components/HotelReservation/SelectRate/Rooms/RoomsContainer.tsx

@@ -6,6 +6,8 @@ import {
 } from "@/lib/trpc/memoizedRequests"
 
 import { auth } from "@/auth"
+import Alert from "@/components/TempDesignSystem/Alert"
+import { getIntl } from "@/i18n"
 import { safeTry } from "@/utils/safeTry"
 import { isValidSession } from "@/utils/session"
 
@@ -13,8 +15,11 @@ import { generateChildrenString } from "../../utils"
 import { combineRoomAvailabilities } from "../utils"
 import Rooms from "."
 
+import styles from "./rooms.module.css"
+
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { RoomsContainerProps } from "@/types/components/hotelReservation/selectRate/roomsContainer"
+import { AlertTypeEnum } from "@/types/enums/alert"
 
 export async function RoomsContainer({
   adultArray,
@@ -77,14 +82,24 @@ export async function RoomsContainer({
     availabilityResults: roomsAvailabilityResults,
   })
 
+  const intl = await getIntl(lang)
+
   if (packagesError) {
     // TODO: Log packages error
     console.error("[RoomsContainer] unable to fetch packages")
   }
 
   if (!roomsAvailability) {
-    // HotelInfoCard has the logic for displaying when there are no rooms available
-    return null
+    return (
+      <div className={styles.hotelAlert}>
+        <Alert
+          type={AlertTypeEnum.Info}
+          text={intl.formatMessage({
+            id: "There are no rooms available that match your request",
+          })}
+        />
+      </div>
+    )
   }
 
   return (

components/HotelReservation/SelectRate/Rooms/rooms.module.css

@@ -48,3 +48,9 @@
   opacity: 1;
   height: auto;
 }
+
+.hotelAlert {
+  max-width: var(--max-width-navigation);
+  margin: 0 auto;
+  padding: var(--Spacing-x-one-and-half);
+}