Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)

SW-3270 move interactive map to design system or booking flow * wip * wip * merge * wip * add support for locales in design-system * add story for HotelCard * setup alias * . * remove tracking from design-system for hotelcard * pass isUserLoggedIn * export design-system-new-deprecated.css from design-system * Add HotelMarkerByType to Storybook * Add interactive map to Storybook * fix reactintl in vitest * rename env variables * . * fix background colors * add storybook stories for <Link /> * merge * fix tracking for when clicking 'See rooms' in InteractiveMap * Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow * remove deprecated comment Approved-by: Anton Gunnarsson
2025-08-25 11:26:16 +00:00
parent 4f8c51298f
commit c54c1ec540
139 changed files with 2511 additions and 1557 deletions
@@ -0,0 +1,90 @@
+import {
+  AdvancedMarker,
+  AdvancedMarkerAnchorPoint,
+} from '@vis.gl/react-google-maps'
+import { useIntl } from 'react-intl'
+
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import { HotelMarkerByType } from '../../Markers/HotelMarkerByType'
+import { PoiMarker } from '../../Markers/PoiMarker'
+
+import styles from './poiMapMarkers.module.css'
+
+import type { PointOfInterest } from '@scandic-hotels/trpc/types/hotel'
+import type { MarkerInfo } from '@scandic-hotels/trpc/types/marker'
+
+export type PoiMapMarkersProps = {
+  activePoi?: string | null
+  coordinates: { lat: number; lng: number }
+  onActivePoiChange?: (poiName: string | null) => void
+  pointsOfInterest: PointOfInterest[]
+  markerInfo: MarkerInfo
+}
+
+export default function PoiMapMarkers({
+  coordinates,
+  pointsOfInterest,
+  onActivePoiChange,
+  activePoi,
+  markerInfo,
+}: PoiMapMarkersProps) {
+  const intl = useIntl()
+
+  function toggleActivePoi(poiName: string) {
+    onActivePoiChange?.(activePoi === poiName ? null : poiName)
+  }
+  return (
+    <>
+      <AdvancedMarker position={coordinates} zIndex={1}>
+        <HotelMarkerByType
+          hotelId={markerInfo.hotelId}
+          hotelType={markerInfo.hotelType}
+        />
+      </AdvancedMarker>
+
+      {pointsOfInterest.map((poi) => (
+        <AdvancedMarker
+          key={poi.name + poi.categoryName}
+          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 ? 'large' : 'small'}
+            />
+            <span className={styles.poiLabel}>
+              <Typography variant="Body/Paragraph/mdRegular">
+                <span>{poi.name}</span>
+              </Typography>
+              <Typography
+                variant="Body/Supporting text (caption)/smRegular"
+                className={styles.distance}
+              >
+                <span>
+                  {intl.formatMessage(
+                    {
+                      defaultMessage: '{distanceInKm} km',
+                    },
+                    {
+                      distanceInKm: poi.distance,
+                    }
+                  )}
+                </span>
+              </Typography>
+            </span>
+          </span>
+        </AdvancedMarker>
+      ))}
+    </>
+  )
+}
@@ -0,0 +1,46 @@
+.advancedMarker {
+  height: var(--Space-x4);
+  width: var(
+    --Space-x4
+  ) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
+}
+
+.advancedMarker.active {
+  height: var(--Space-x5);
+  width: var(
+    --Space-x5
+  ) !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
+}
+
+.poi {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--Space-x05);
+  border-radius: var(--Corner-radius-rounded);
+  background-color: var(--Surface-UI-Fill-Default);
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
+  gap: var(--Space-x1);
+}
+
+.poi.active {
+  padding-right: var(--Space-x15);
+}
+
+.poiLabel {
+  display: none;
+}
+
+.poi.active .poiLabel {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x2);
+  text-wrap: nowrap;
+}
+
+.distance {
+  color: var(--Text-Secondary);
+}