Adapt the interactive map for reuse

components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css

@@ -14,3 +14,9 @@
     top: var(--main-menu-desktop-height);
   }
 }
+
+.closeButton {
+  pointer-events: initial;
+  box-shadow: var(--button-box-shadow);
+  gap: var(--Spacing-x-half);
+}

components/ContentType/HotelPage/Map/DynamicMap/index.tsx

@@ -6,7 +6,9 @@ import { useIntl } from "react-intl"
 
 import useHotelPageStore from "@/stores/hotel-page"
 
-import MapContent from "@/components/Maps/InteractiveMap"
+import CloseLargeIcon from "@/components/Icons/CloseLarge"
+import InteractiveMap from "@/components/Maps/InteractiveMap"
+import Button from "@/components/TempDesignSystem/Button"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 
 import Sidebar from "./Sidebar"
@@ -52,6 +54,20 @@ export default function DynamicMap({
     }
   }, [isDynamicMapOpen, scrollHeightWhenOpened])
 
+  const closeButton = (
+    <Button
+      theme="base"
+      intent="inverted"
+      variant="icon"
+      size="small"
+      className={styles.closeButton}
+      onClick={closeDynamicMap}
+    >
+      <CloseLargeIcon color="burgundy" />
+      <span>{intl.formatMessage({ id: "Close the map" })}</span>
+    </Button>
+  )
+
   return (
     <APIProvider apiKey={apiKey}>
       <Modal isOpen={isDynamicMapOpen}>
@@ -68,7 +84,8 @@ export default function DynamicMap({
             pointsOfInterest={pointsOfInterest}
             onActivePoiChange={setActivePoi}
           />
-          <MapContent
+          <InteractiveMap
+            closeButton={closeButton}
             coordinates={coordinates}
             pointsOfInterest={pointsOfInterest}
             activePoi={activePoi}

components/Maps/InteractiveMap/index.tsx

@@ -8,10 +8,7 @@ import {
 } from "@vis.gl/react-google-maps"
 import { useIntl } from "react-intl"
 
-import useHotelPageStore from "@/stores/hotel-page"
-
 import { MinusIcon, PlusIcon } from "@/components/Icons"
-import CloseLargeIcon from "@/components/Icons/CloseLarge"
 import PoiMarker from "@/components/Maps/Markers/Poi"
 import ScandicMarker from "@/components/Maps/Markers/Scandic"
 import Button from "@/components/TempDesignSystem/Button"
@@ -20,7 +17,7 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./interactiveMap.module.css"
 
-import type { MapContentProps } from "@/types/components/hotelPage/map/mapContent"
+import type { InteractiveMapProps } from "@/types/components/hotelPage/map/interactiveMap"
 
 export default function InteractiveMap({
   coordinates,
@@ -28,9 +25,9 @@ export default function InteractiveMap({
   activePoi,
   mapId,
   onActivePoiChange,
-}: MapContentProps) {
+  closeButton,
+}: InteractiveMapProps) {
   const intl = useIntl()
-  const { closeDynamicMap } = useHotelPageStore()
   const map = useMap()
 
   const mapOptions: MapProps = {
@@ -98,17 +95,7 @@ export default function InteractiveMap({
         ))}
       </Map>
       <div className={styles.ctaButtons}>
-        <Button
+        {closeButton}
-          theme="base"
-          intent="inverted"
-          variant="icon"
-          size="small"
-          className={styles.closeButton}
-          onClick={closeDynamicMap}
-        >
-          <CloseLargeIcon color="burgundy" />
-          <span>{intl.formatMessage({ id: "Close the map" })}</span>
-        </Button>
         <div className={styles.zoomButtons}>
           <Button
             theme="base"

types/components/hotelPage/map/interactiveMap.ts

@@ -1,10 +1,13 @@
+import { ReactElement } from "react"
+
 import type { Coordinates } from "@/types/components/maps/coordinates"
 import type { PointOfInterest } from "@/types/hotel"
 
-export interface MapContentProps {
+export interface InteractiveMapProps {
   coordinates: Coordinates
   pointsOfInterest: PointOfInterest[]
   activePoi: PointOfInterest["name"] | null
   mapId: string
   onActivePoiChange: (poi: PointOfInterest["name"] | null) => void
+  closeButton: ReactElement
 }