Merge branch 'develop' into feat/sw-386-header-fixes

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

@@ -6,10 +6,9 @@
   min-height: 100dvh;
 }
 
-.hotelCards {
+.section {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x4);
 }
 
 .link {

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

@@ -1,41 +1,92 @@
 import { serverClient } from "@/lib/trpc/server"
 
-import HotelCard from "@/components/HotelReservation/HotelCard"
+import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 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"
+import { getLang, setLang } from "@/i18n/serverContext"
 
 import styles from "./page.module.css"
 
+import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
+import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import { LangParams, PageArgs } from "@/types/params"
 
+async function getAvailableHotels(
+  input: AvailabilityInput
+): Promise<HotelData[]> {
+  const getAvailableHotels = await serverClient().hotel.availability.get(input)
+
+  if (!getAvailableHotels) throw new Error()
+
+  const { availability } = getAvailableHotels
+
+  const hotels = availability.map(async (hotel) => {
+    const hotelData = await serverClient().hotel.hotelData.get({
+      hotelId: hotel.hotelId.toString(),
+      language: getLang(),
+    })
+
+    if (!hotelData) throw new Error()
+
+    return {
+      hotelData: hotelData.data.attributes,
+      price: hotel.bestPricePerNight,
+    }
+  })
+
+  return await Promise.all(hotels)
+}
+
 export default async function SelectHotelPage({
   params,
 }: PageArgs<LangParams>) {
-  const intl = await getIntl()
   setLang(params.lang)
 
   const tempSearchTerm = "Stockholm"
-  const hotelFilters = await serverClient().hotel.filters.get({
-    hotelId: "879",
-  })
+  const intl = await getIntl()
 
-  const availableHotels = await serverClient().hotel.availability.get({
+  const hotels = await getAvailableHotels({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
     roomStayStartDate: "2024-11-02",
     roomStayEndDate: "2024-11-03",
     adults: 1,
   })
 
-  if (!availableHotels) return null
+  const filters = hotels.flatMap((data) => data.hotelData.detailedFacilities)
+
+  const filterIds = [...new Set(filters.map((data) => data.id))]
+  const filterList: {
+    name: string
+    id: number
+    applyToAllHotels: boolean
+    public: boolean
+    icon: string
+    sortOrder: number
+    code?: string
+    iconName?: string
+  }[] = filterIds
+    .map((id) => filters.find((find) => find.id === id))
+    .filter(
+      (
+        filter
+      ): filter is {
+        name: string
+        id: number
+        applyToAllHotels: boolean
+        public: boolean
+        icon: string
+        sortOrder: number
+        code?: string
+        iconName?: string
+      } => filter !== undefined
+    )
 
   return (
     <main className={styles.main}>
-      <section>
+      <section className={styles.section}>
         <StaticMap
           city={tempSearchTerm}
           width={340}
@@ -48,24 +99,9 @@ export default async function SelectHotelPage({
           {intl.formatMessage({ id: "Show map" })}
           <ChevronRightIcon color="burgundy" />
         </Link>
-        <HotelFilter filters={hotelFilters} />
-      </section>
-      <section className={styles.hotelCards}>
-        {availableHotels.availability.length ? (
-          availableHotels.availability.map((hotel) => (
-            <HotelCard
-              key={hotel.hotelId}
-              checkInDate={hotel.checkInDate}
-              checkOutDate={hotel.checkOutDate}
-              hotelId={hotel.hotelId}
-              price={hotel.bestPricePerNight}
-            />
-          ))
-        ) : (
-          // TODO: handle no hotels found
-          <Title>No hotels found</Title>
-        )}
+        <HotelFilter filters={filterList} />
       </section>
+      <HotelCardListing hotelData={hotels} />
     </main>
   )
 }