feat(SW-176): use the availability endpoint

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

@@ -1,11 +1,11 @@
 import { serverClient } from "@/lib/trpc/server"
-import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
 
 import HotelCard from "@/components/HotelReservation/HotelCard"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
 
@@ -19,10 +19,7 @@ export default async function SelectHotelPage({
   const intl = await getIntl()
   setLang(params.lang)
 
-  // TODO: Use real endpoint.
   const tempSearchTerm = "Stockholm"
-  const hotel = tempHotelData.data.attributes
-  const hotels = [hotel]
 
   const hotelFilters = await serverClient().hotel.filters.get({
     hotelId: "879",
@@ -30,16 +27,14 @@ export default async function SelectHotelPage({
 
   const availability = await serverClient().hotel.availability.get({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
-    roomStayStartDate: "2024-11-01",
-    roomStayEndDate: "2024-11-02",
+    roomStayStartDate: "2024-11-02",
+    roomStayEndDate: "2024-11-03",
     adults: 1,
   })
 
-  const filterAvailability = availability?.availability.data.filter(
-    (hotels) => hotels.attributes.status === "Available"
-  )
-
-  console.log(filterAvailability)
+  const filterAvailability = availability?.availability.data
+    .filter((hotels) => hotels.attributes.status === "Available")
+    .flatMap((hotels) => hotels.attributes)
 
   return (
     <main className={styles.main}>
@@ -58,9 +53,19 @@ export default async function SelectHotelPage({
         <HotelFilter filters={hotelFilters} />
       </section>
       <section className={styles.hotelCards}>
-        {hotels.map((hotel) => (
-          <HotelCard key={hotel.name} hotel={hotel} />
-        ))}
+        {filterAvailability?.length ? (
+          filterAvailability.map((hotel) => (
+            <HotelCard
+              key={hotel.hotelId}
+              checkInDate={hotel.checkInDate}
+              checkOutDate={hotel.checkOutDate}
+              hotelId={hotel.hotelId}
+              price={hotel.bestPricePerNight}
+            />
+          ))
+        ) : (
+          <Title>No hotels found</Title>
+        )}
       </section>
     </main>
   )