Merge in feat/SW-415-select-room-card (pull request #663)

Feat/SW-415 select room card

app/[lang]/(live)/(public)/hotelreservation/layout.module.css

@@ -1,6 +1,6 @@
 .layout {
   min-height: 100dvh;
+  background-color: var(--Base-Background-Primary-Normal);
   max-width: var(--max-width);
   margin: 0 auto;
-  background-color: var(--Base-Background-Primary-Normal);
 }

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css

@@ -7,13 +7,13 @@
 }
 
 .content {
-  max-width: 1134px;
-  margin-top: var(--Spacing-x5);
+  max-width: 1434px;
   margin-left: auto;
   margin-right: auto;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   gap: var(--Spacing-x7);
+  padding: var(--Spacing-x2);
 }
 
 .main {

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx

@@ -15,8 +15,11 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
-  // TODO: Use real endpoint.
-  const hotel = tempHotelData.data.attributes
+  const hotelData = await serverClient().hotel.hotelData.get({
+    hotelId: searchParams.hotel,
+    language: params.lang,
+    include: ["RoomCategories"],
+  })
 
   const roomConfigurations = await serverClient().hotel.availability.rooms({
     hotelId: parseInt(searchParams.hotel, 10),
@@ -24,18 +27,27 @@ export default async function SelectRatePage({
     roomStayEndDate: "2024-11-03",
     adults: 1,
   })
+
   if (!roomConfigurations) {
-    return "No rooms found"
+    return "No rooms found" // TODO: Add a proper error message
   }
 
+  if (!hotelData) {
+    return "No hotel data found" // TODO: Add a proper error message
+  }
+
+  const roomCategories = hotelData?.included
+
   return (
     <div>
-      {/* TODO: Add Hotel Listing Card */}
-      <div>Hotel Listing Card TBI</div>
-
       <div className={styles.content}>
+        {/* TODO: Add Hotel Listing Card */}
+        <div>Hotel Listing Card TBI</div>
         <div className={styles.main}>
-          <RoomSelection roomConfigurations={roomConfigurations} />
+          <RoomSelection
+            roomConfigurations={roomConfigurations}
+            roomCategories={roomCategories ?? []}
+          />
         </div>
       </div>
     </div>