Merged in feat/SW-2241-country-map (pull request #2808)

Feat/SW-2241 country map

Approved-by: Erik Tiekstra
Approved-by: Chuma Mcphoy (We Ahead)

packages/common/hooks/map/useSetMapUrlFromCountryPage.ts

@@ -0,0 +1,17 @@
+"use client"
+import { useEffect, useState } from "react"
+
+export function setMapUrlFromCountryPage(url: string | null) {
+  const [mapUrl, setMapUrl] = useState<URL | null>(null)
+
+  useEffect(() => {
+    if (!url || typeof window === "undefined") return
+    const cityMapUrl = new URL(url, window.location.origin)
+    if (cityMapUrl) {
+      cityMapUrl.searchParams.set("view", "map")
+      cityMapUrl.searchParams.set("fromCountry", "")
+    }
+    setMapUrl(cityMapUrl)
+  }, [])
+  return mapUrl
+}

packages/common/hooks/map/useSetMapView.ts

@@ -0,0 +1,17 @@
+"use client"
+import { useParams } from "next/navigation"
+import { useEffect, useState } from "react"
+
+export default function useSetMapView() {
+  const [mapUrl, setMapUrl] = useState<string | null>(null)
+  const params = useParams()
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+    const url = new URL(window.location.href)
+    url.searchParams.set("view", "map")
+    setMapUrl(url.toString())
+  }, [params])
+
+  return mapUrl
+}

packages/common/hooks/map/useZoomControls.ts

@@ -0,0 +1,43 @@
+import { useMap } from "@vis.gl/react-google-maps"
+import { useEffect, useState } from "react"
+
+import type { MapType } from "@scandic-hotels/design-system/Map/mapConstants"
+
+export function useZoomControls(mapType: MapType) {
+  const map = useMap()
+  const [zoomLevel, setZoomLevel] = useState<number>(mapType.DEFAULT_ZOOM)
+
+  const zoomIn = () => {
+    if (map && zoomLevel < mapType.MAX_ZOOM) {
+      map.setZoom(zoomLevel + 1)
+    }
+  }
+
+  const zoomOut = () => {
+    if (map && zoomLevel > mapType.MIN_ZOOM) {
+      map.setZoom(zoomLevel - 1)
+    }
+  }
+
+  useEffect(() => {
+    if (!map) return
+
+    const handleZoomChanged = () => {
+      const currentZoom = map.getZoom()
+      if (currentZoom != null) {
+        setZoomLevel(currentZoom)
+      }
+    }
+
+    const listener = map.addListener("zoom_changed", handleZoomChanged)
+    return () => listener.remove()
+  }, [map])
+
+  return {
+    zoomLevel,
+    zoomIn,
+    zoomOut,
+    isMinZoom: zoomLevel <= mapType.MIN_ZOOM,
+    isMaxZoom: zoomLevel >= mapType.MAX_ZOOM,
+  }
+}