Merged in feat/SW-1549-map-improvements (pull request #1783)

Feat/SW-1549 map improvements * fix: imported new icon * refactor: rename component and set map handling to 'greedy' * fix: show cards for 3s after hover * refactor: update styles and added HotelPin component * fix: change from close to back icon * refactor: update to only use 1 state value for active pin and card * fix: add click handler when dialog is opened * fix: performance fixes for the dialog carousel * fix: added border * fix: clear timeout on mouseenter * fix: changed to absolute import * fix: moved hover state into the store * fix: renamed store actions Approved-by: Michael Zetterberg
2025-04-15 13:23:23 +00:00
parent 57cd2f6a7f
commit 9a9789e736
27 changed files with 288 additions and 261 deletions
--- a/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx
+++ b/apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx
@@ -0,0 +1,75 @@
+import {
+  AdvancedMarker,
+  AdvancedMarkerAnchorPoint,
+} from "@vis.gl/react-google-maps"
+import { useIntl } from "react-intl"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import PoiMarker from "../../Markers/Poi"
+import ScandicMarker from "../../Markers/Scandic"
+
+import styles from "./poiMapMarkers.module.css"
+
+import type { PoiMapMarkersProps } from "@/types/hotel"
+
+export default function PoiMapMarkers({
+  coordinates,
+  pointsOfInterest,
+  onActivePoiChange,
+  activePoi,
+}: PoiMapMarkersProps) {
+  const intl = useIntl()
+
+  function toggleActivePoi(poiName: string) {
+    onActivePoiChange?.(activePoi === poiName ? null : poiName)
+  }
+  return (
+    <>
+      <AdvancedMarker position={coordinates} zIndex={1}>
+        <ScandicMarker />
+      </AdvancedMarker>
+
+      {pointsOfInterest.map((poi) => (
+        <AdvancedMarker
+          key={poi.name}
+          className={styles.advancedMarker}
+          position={poi.coordinates}
+          anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
+          zIndex={activePoi === poi.name ? 2 : 0}
+          onMouseEnter={() => onActivePoiChange?.(poi.name ?? null)}
+          onMouseLeave={() => onActivePoiChange?.(null)}
+          onClick={() => toggleActivePoi(poi.name ?? "")}
+        >
+          <span
+            className={`${styles.poi} ${activePoi === poi.name ? styles.active : ""}`}
+          >
+            <PoiMarker
+              group={poi.group}
+              categoryName={poi.categoryName}
+              size={activePoi === poi.name ? 20 : 16}
+            />
+            <Body className={styles.poiLabel} asChild>
+              <span>
+                {poi.name}
+                <Caption asChild>
+                  <span>
+                    {intl.formatMessage(
+                      {
+                        defaultMessage: "{distanceInKm} km",
+                      },
+                      {
+                        distanceInKm: poi.distance,
+                      }
+                    )}
+                  </span>
+                </Caption>
+              </span>
+            </Body>
+          </span>
+        </AdvancedMarker>
+      ))}
+    </>
+  )
+}