Use the interactive map on the map page

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

@@ -0,0 +1,6 @@
+.main {
+  display: grid;
+  background-color: var(--Scandic-Brand-Warm-White);
+  min-height: 100dvh;
+  grid-template-columns: 420px 1fr;
+}

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

@@ -0,0 +1,53 @@
+import { env } from "@/env/server"
+
+import {
+  fetchAvailableHotels,
+  getFiltersFromHotels,
+} from "@/app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils"
+import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
+import { setLang } from "@/i18n/serverContext"
+
+import styles from "./page.module.css"
+
+import { PointOfInterest } from "@/types/hotel"
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelMapPage({
+  params,
+}: PageArgs<LangParams, {}>) {
+  const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
+  const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
+  setLang(params.lang)
+
+  const hotels = await fetchAvailableHotels({
+    cityId: "8ec4bba3-1c38-4606-82d1-bbe3f6738e54",
+    roomStayStartDate: "2024-11-02",
+    roomStayEndDate: "2024-11-03",
+    adults: 1,
+  })
+
+  const filters = getFiltersFromHotels(hotels)
+
+  // TODO: this is just a quick transformation to get something there. May need rework
+  const pointOfInterests: PointOfInterest[] = hotels.map((hotel) => ({
+    coordinates: {
+      lat: hotel.hotelData.location.latitude,
+      lng: hotel.hotelData.location.longitude,
+    },
+    name: hotel.hotelData.name,
+    distance: hotel.hotelData.location.distanceToCentre,
+    category: "Hotel",
+  }))
+
+  return (
+    <main className={styles.main}>
+      <SelectHotelMap
+        apiKey={googleMapsApiKey}
+        // TODO: use correct coordinates. The city center?
+        coordinates={{ lat: 59.32, lng: 18.01 }}
+        pointsOfInterest={pointOfInterests}
+        mapId={googleMapId}
+      />
+    </main>
+  )
+}

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>

app/[lang]/(live)/(public)/hotelreservation/select-hotel/utils.ts

@@ -0,0 +1,43 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import { getLang } from "@/i18n/serverContext"
+
+import { AvailabilityInput } from "@/types/components/hotelReservation/selectHotel/availabilityInput"
+import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import { Filter } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+
+export async function fetchAvailableHotels(
+  input: AvailabilityInput
+): Promise<HotelData[]> {
+  const availableHotels = await serverClient().hotel.availability.get(input)
+
+  if (!availableHotels) throw new Error()
+
+  const language = getLang()
+  const hotels = availableHotels.availability.map(async (hotel) => {
+    const hotelData = await serverClient().hotel.hotelData.get({
+      hotelId: hotel.hotelId.toString(),
+      language,
+    })
+
+    if (!hotelData) throw new Error()
+
+    return {
+      hotelData: hotelData.data.attributes,
+      price: hotel.bestPricePerNight,
+    }
+  })
+
+  return await Promise.all(hotels)
+}
+
+export function getFiltersFromHotels(hotels: HotelData[]) {
+  const filters = hotels.flatMap((hotel) => hotel.hotelData.detailedFacilities)
+
+  const uniqueFilterIds = [...new Set(filters.map((filter) => filter.id))]
+  const filterList: Filter[] = uniqueFilterIds
+    .map((filterId) => filters.find((filter) => filter.id === filterId))
+    .filter((filter): filter is Filter => filter !== undefined)
+
+  return filterList
+}