Use the interactive map on the map page

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

@@ -1,45 +1,21 @@
-import { serverClient } from "@/lib/trpc/server"
+import { selectHotelMap } from "@/constants/routes/hotelReservation"
 
+import {
+  fetchAvailableHotels,
+  getFiltersFromHotels,
+} from "@/app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils"
 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 { getIntl } from "@/i18n"
-import { getLang, setLang } from "@/i18n/serverContext"
+import { 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>) {
@@ -48,54 +24,34 @@ export default async function SelectHotelPage({
   const tempSearchTerm = "Stockholm"
   const intl = await getIntl()
 
-  const hotels = await getAvailableHotels({
+  const hotels = await fetchAvailableHotels({
     cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
     roomStayStartDate: "2024-11-02",
     roomStayEndDate: "2024-11-03",
     adults: 1,
   })
 
-  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
-    )
+  const filterList = getFiltersFromHotels(hotels)
 
   return (
     <main className={styles.main}>
       <section className={styles.section}>
-        <StaticMap
-          city={tempSearchTerm}
-          width={340}
-          height={180}
-          zoomLevel={11}
-          mapType="roadmap"
-          altText={`Map of ${tempSearchTerm} city center`}
-        />
-        <Link className={styles.link} color="burgundy" href="#">
+        <Link href={selectHotelMap[params.lang]} keepSearchParams>
+          <StaticMap
+            city={tempSearchTerm}
+            width={340}
+            height={180}
+            zoomLevel={11}
+            mapType="roadmap"
+            altText={`Map of ${tempSearchTerm} city center`}
+          />
+        </Link>
+        <Link
+          className={styles.link}
+          color="burgundy"
+          href={selectHotelMap[params.lang]}
+          keepSearchParams
+        >
           {intl.formatMessage({ id: "Show map" })}
           <ChevronRightIcon color="burgundy" />
         </Link>