From 1e7c24f875481550e182f1698cf075040f7ff6a1 Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Thu, 26 Sep 2024 15:27:24 +0200
Subject: [PATCH] Adapt the interactive map for reuse

---
 .../Map/DynamicMap/dynamicMap.module.css      |  6 ++++++
 .../HotelPage/Map/DynamicMap/index.tsx        | 21 +++++++++++++++++--
 components/Maps/InteractiveMap/index.tsx      | 21 ++++---------------
 .../map/{mapContent.ts => interactiveMap.ts}  |  5 ++++-
 4 files changed, 33 insertions(+), 20 deletions(-)
 rename types/components/hotelPage/map/{mapContent.ts => interactiveMap.ts} (75%)

diff --git a/components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css b/components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css
index 2a3e4ff78..32df5b502 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/dynamicMap.module.css
+++ b/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);
+}
diff --git a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
index 9fdddcf48..2af575a69 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/index.tsx
+++ b/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}
diff --git a/components/Maps/InteractiveMap/index.tsx b/components/Maps/InteractiveMap/index.tsx
index ce18c2d77..4c0ba9662 100644
--- a/components/Maps/InteractiveMap/index.tsx
+++ b/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
-          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>
+        {closeButton}
         <div className={styles.zoomButtons}>
           <Button
             theme="base"
diff --git a/types/components/hotelPage/map/mapContent.ts b/types/components/hotelPage/map/interactiveMap.ts
similarity index 75%
rename from types/components/hotelPage/map/mapContent.ts
rename to types/components/hotelPage/map/interactiveMap.ts
index 98e7b4c81..d04484f79 100644
--- a/types/components/hotelPage/map/mapContent.ts
+++ b/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
 }