Use the interactive map on the map page

components/HotelReservation/SelectHotel/HotelFilter/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
 
 import styles from "./hotelFilter.module.css"
 
-import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHotel/hotelFiltersProps"
+import { HotelFiltersProps } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
 
 export default function HotelFilter({ filters }: HotelFiltersProps) {
   const intl = useIntl()

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"
+
+// TODO: This component is copied from
+// components/ContentType/HotelPage/Map/DynamicMap/Sidebar.
+// Look at that for inspiration on how to do the interaction with the map.
+
+export default function HotelListing({}: HotelListingProps) {
+  return <section>Hotel listing TBI</section>
+}

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -0,0 +1,57 @@
+"use client"
+import { APIProvider } from "@vis.gl/react-google-maps"
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import { selectHotel } from "@/constants/routes/hotelReservation"
+
+import { CloseIcon } from "@/components/Icons"
+import InteractiveMap from "@/components/Maps/InteractiveMap"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import useLang from "@/hooks/useLang"
+
+import HotelListing from "./HotelListing"
+
+import styles from "./selectHotelMap.module.css"
+
+import { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"
+
+export default function SelectHotelMap({
+  apiKey,
+  coordinates,
+  pointsOfInterest,
+  mapId,
+}: SelectHotelMapProps) {
+  const lang = useLang()
+  const intl = useIntl()
+  const [activePoi, setActivePoi] = useState<string | null>(null)
+
+  const closeButton = (
+    <Button
+      asChild
+      intent="inverted"
+      size="small"
+      theme="base"
+      className={styles.closeButton}
+    >
+      <Link href={selectHotel[lang]} keepSearchParams color="burgundy">
+        <CloseIcon color="burgundy" />
+        {intl.formatMessage({ id: "Close the map" })}
+      </Link>
+    </Button>
+  )
+  return (
+    <APIProvider apiKey={apiKey}>
+      <HotelListing />
+      <InteractiveMap
+        closeButton={closeButton}
+        coordinates={coordinates}
+        pointsOfInterest={pointsOfInterest}
+        activePoi={activePoi}
+        onActivePoiChange={setActivePoi}
+        mapId={mapId}
+      />
+    </APIProvider>
+  )
+}

components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css

@@ -0,0 +1,5 @@
+.closeButton {
+  pointer-events: initial;
+  box-shadow: var(--button-box-shadow);
+  gap: var(--Spacing-x-half);
+}

components/TempDesignSystem/Link/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import NextLink from "next/link"
-import { usePathname, useRouter } from "next/navigation"
-import { startTransition, useCallback } from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { startTransition, useCallback, useMemo } from "react"
 
 import useRouterTransitionStore from "@/stores/router-transition"
 
@@ -24,9 +24,14 @@ export default function Link({
   variant,
   trackingId,
   onClick,
+  /**
+   * Decides if the link should include the current search params in the URL
+   */
+  keepSearchParams,
   ...props
 }: LinkProps) {
   const currentPageSlug = usePathname()
+  const searchParams = useSearchParams()
   let isActive = active || currentPageSlug === href
 
   if (partialMatch && !isActive) {
@@ -44,6 +49,12 @@ export default function Link({
 
   const router = useRouter()
 
+  const fullUrl = useMemo(() => {
+    const search =
+      keepSearchParams && searchParams.size ? `?${searchParams}` : ""
+    return `${href}${search}`
+  }, [href, searchParams, keepSearchParams])
+
   const startRouterTransition = useRouterTransitionStore(
     (state) => state.startRouterTransition
   )
@@ -75,10 +86,10 @@ export default function Link({
         trackPageViewStart()
         startTransition(() => {
           startRouterTransition()
-          router.push(href, { scroll })
+          router.push(fullUrl, { scroll })
         })
       }}
-      href={href}
+      href={fullUrl}
       id={trackingId}
       {...props}
     />

components/TempDesignSystem/Link/link.ts

@@ -10,4 +10,5 @@ export interface LinkProps
   partialMatch?: boolean
   prefetch?: boolean
   trackingId?: string
+  keepSearchParams?: boolean
 }