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

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -2,7 +2,7 @@
 
 import { useParams } from "next/dist/client/components/navigation"
 import { useRouter, useSearchParams } from "next/navigation"
-import { memo, useCallback } from "react"
+import { memo } from "react"
 import { useIntl } from "react-intl"
 
 import DiscountIcon from "@scandic-hotels/design-system/Icons/DiscountIcon"
@@ -53,16 +53,7 @@ function HotelCard({
 
   const lang = params.lang as Lang
   const intl = useIntl()
-  const { setActiveHotelPin, setActiveHotelCard } = useHotelsMapStore()
+  const { activate, engage, disengageAfterDelay } = useHotelsMapStore()
-
-  const handleMouseEnter = useCallback(() => {
-    setActiveHotelPin(hotel.name)
-  }, [setActiveHotelPin, hotel])
-
-  const handleMouseLeave = useCallback(() => {
-    setActiveHotelPin(null)
-    setActiveHotelCard(null)
-  }, [setActiveHotelPin, setActiveHotelCard])
 
   const amenities = hotel.detailedFacilities.slice(0, 5)
   const router = useRouter()
@@ -73,8 +64,7 @@ function HotelCard({
 
   const handleAddressClick = (event: React.MouseEvent) => {
     event.preventDefault()
-    setActiveHotelPin(hotel.name)
+    activate(hotel.name)
-    setActiveHotelCard(hotel.name)
     router.push(`${selectHotelMap(lang)}?${searchParams.toString()}`)
   }
 
@@ -95,8 +85,8 @@ function HotelCard({
   return (
     <article
       className={classNames}
-      onMouseEnter={handleMouseEnter}
+      onMouseEnter={() => engage(hotel.name)}
-      onMouseLeave={handleMouseLeave}
+      onMouseLeave={() => disengageAfterDelay()}
     >
       <div>
         <div className={styles.imageContainer}>

apps/scandic-web/components/HotelReservation/HotelCardDialog/ListingHotelCardDialog/index.tsx

@@ -62,28 +62,20 @@ export default function ListingHotelCardDialog({
           setImageError={setImageError}
           position="top"
         />
-        <div className={styles.detailsContainer}>
+        <div>
           <div className={styles.name}>
             <Subtitle type="two">{name}</Subtitle>
           </div>
           <div className={styles.facilities}>
-            {amenities.map((facility) => {
+            {amenities.map((facility) => (
-              const Icon = (
+              <div className={styles.facilitiesItem} key={facility.id}>
                 <FacilityToIcon
                   id={facility.id}
                   size={20}
                   color="Icon/Default"
                 />
-              )
+              </div>
-              return (
+            ))}
-                <div className={styles.facilitiesItem} key={facility.id}>
-                  {Icon && Icon}
-                  <Caption color="uiTextMediumContrast">
-                    {facility.name}
-                  </Caption>
-                </div>
-              )
-            })}
           </div>
         </div>
       </div>
@@ -115,7 +107,7 @@ export default function ListingHotelCardDialog({
                 </>
               )}
               {memberPrice && (
-                <Subtitle type="two" color="red" className={styles.memberPrice}>
+                <Subtitle type="two" color="red">
                   {intl.formatMessage(
                     {
                       defaultMessage: "{price} {currency}",

apps/scandic-web/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog/index.tsx

@@ -65,10 +65,8 @@ export default function StandaloneHotelCardDialog({
       />
       <div className={styles.content}>
         <div className={styles.header}>
-          <div className={styles.detailsContainer}>
+          <div className={styles.name}>
-            <div className={styles.name}>
+            <Body textTransform="bold">{name}</Body>
-              <Body textTransform="bold">{name}</Body>
-            </div>
           </div>
         </div>
         <div className={styles.facilities}>
@@ -126,11 +124,7 @@ export default function StandaloneHotelCardDialog({
                   </Subtitle>
                 )}
                 {memberPrice && (
-                  <Subtitle
+                  <Subtitle type="two" color="red">
-                    type="two"
-                    color="red"
-                    className={styles.memberPrice}
-                  >
                     {intl.formatMessage(
                       {
                         defaultMessage: "{price} {currency}",

apps/scandic-web/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css

@@ -66,7 +66,7 @@
   white-space: nowrap;
   position: relative;
   padding-right: 20px;
-  gap: 0 var(--Spacing-x1);
+  gap: 0 var(--Spacing-x-one-and-half);
   max-width: 242px;
 }
 .dialogContainer[data-type="listing"] .facilities::after {

apps/scandic-web/components/HotelReservation/HotelCardDialog/index.tsx

@@ -31,7 +31,7 @@ export default function HotelCardDialog({
     <dialog open={isOpen} className={styles.dialog}>
       <div className={styles.dialogContainer} data-type={type}>
         <div onClick={handleClose}>
-          <MaterialIcon icon="close" className={styles.closeIcon} size={16} />
+          <MaterialIcon icon="close" className={styles.closeIcon} size={22} />
         </div>
 
         {type === "standalone" ? (

apps/scandic-web/components/HotelReservation/HotelCardDialogListing/hotelCardDialogListing.module.css

@@ -3,6 +3,23 @@
   flex-direction: row;
   gap: var(--Spacing-x1);
   align-items: flex-end;
+  overflow-x: scroll;
+
+  scroll-snap-type: x proximity;
+  -webkit-overflow-scrolling: touch; /* Needed to work on iOS Safari */
+  padding-inline: var(--Spacing-x2);
+  scroll-padding-inline: var(--Spacing-x2);
+  overscroll-behavior-inline: contain;
+
+  scroll-behavior: smooth;
+  will-change: transform;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
+.hotelCardDialogListing > div {
+  height: 100%;
+  scroll-snap-align: center;
 }
 
 .hotelCardDialogListing dialog {
@@ -10,11 +27,3 @@
   padding: 0;
   margin: 0;
 }
-
-.hotelCardDialogListing > div:first-child {
-  margin-left: var(--Spacing-x2);
-}
-
-.hotelCardDialogListing > div:last-child {
-  margin-right: var(--Spacing-x2);
-}

apps/scandic-web/components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -2,12 +2,9 @@
 
 import { useCallback, useEffect, useRef } from "react"
 import { useIntl } from "react-intl"
-import { useMediaQuery } from "usehooks-ts"
 
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
-import useClickOutside from "@/hooks/useClickOutside"
-
 import HotelCardDialog from "../HotelCardDialog"
 import { getHotelPins } from "./utils"
 
@@ -27,89 +24,119 @@ export default function HotelCardDialogListing({
         defaultMessage: "Points",
       })
     : undefined
-  const hotelsPinData = hotels ? getHotelPins(hotels, currencyValue) : []
+  const hotelsPinData = getHotelPins(hotels, currencyValue)
   const activeCardRef = useRef<HTMLDivElement | null>(null)
   const observerRef = useRef<IntersectionObserver | null>(null)
   const dialogRef = useRef<HTMLDivElement>(null)
-  const isMobile = useMediaQuery("(max-width: 767px)")
+  const isScrollingRef = useRef<boolean>(false)
-  const { activeHotelCard, setActiveHotelCard, setActiveHotelPin } =
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-    useHotelsMapStore()
+  const { activeHotel, activate, deactivate } = useHotelsMapStore()
-
-  function handleClose() {
-    setActiveHotelCard(null)
-    setActiveHotelPin(null)
-  }
-
-  useClickOutside(dialogRef, !!activeHotelCard && isMobile, handleClose)
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
-      entries.forEach((entry) => {
+      // skip intersection handling during scrolling
-        if (entry.isIntersecting) {
+      if (isScrollingRef.current) return
-          const cardName = entry.target.getAttribute("data-name")
+
-          if (cardName) {
+      if (debounceTimerRef.current) {
-            setActiveHotelCard(cardName)
+        clearTimeout(debounceTimerRef.current)
+      }
+
+      debounceTimerRef.current = setTimeout(() => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const cardName = entry.target.getAttribute("data-name")
+            if (cardName && cardName !== activeHotel) {
+              activate(cardName)
+            }
           }
-        }
+        })
-      })
+      }, 100)
     },
-    [setActiveHotelCard]
+    [activate, activeHotel]
   )
 
   useEffect(() => {
     observerRef.current = new IntersectionObserver(handleIntersection, {
       root: null,
-      threshold: 0.5,
+      threshold: [0.3, 0.5, 0.7],
     })
 
     const elements = document.querySelectorAll("[data-name]")
     elements.forEach((el) => observerRef.current?.observe(el))
 
     return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current)
+      }
+
       elements.forEach((el) => observerRef.current?.unobserve(el))
       observerRef.current?.disconnect()
+      observerRef.current = null
     }
   }, [handleIntersection])
 
   useEffect(() => {
     if (activeCardRef.current) {
-      // Temporarily disconnect the observer
+      isScrollingRef.current = true
-      observerRef.current?.disconnect()
 
-      activeCardRef.current.scrollIntoView({
+      requestAnimationFrame(() => {
-        behavior: "smooth",
+        activeCardRef.current?.scrollIntoView({
-        block: "nearest",
+          behavior: "smooth",
-        inline: "center",
+          block: "nearest",
+          inline: "center",
+        })
+
+        setTimeout(() => {
+          isScrollingRef.current = false
+        }, 800)
       })
-
-      // Reconnect the observer after scrolling
-      const elements = document.querySelectorAll("[data-name]")
-      setTimeout(() => {
-        elements.forEach((el) => observerRef.current?.observe(el))
-      }, 1000)
     }
-  }, [activeHotelCard])
+  }, [activeHotel])
+
+  useEffect(() => {
+    const handleMapClick = (e: MouseEvent) => {
+      // ignore clicks within the dialog
+      if (dialogRef.current?.contains(e.target as Node)) {
+        return
+      }
+
+      // ignore clicks on hotel pins
+      const target = e.target as HTMLElement
+      if (target.closest("[data-hotelpin]")) {
+        return
+      }
+
+      deactivate()
+    }
+
+    if (activeHotel) {
+      document.addEventListener("click", handleMapClick)
+    }
+
+    return () => {
+      document.removeEventListener("click", handleMapClick)
+    }
+  }, [dialogRef, activeHotel, deactivate])
 
   return (
     <div className={styles.hotelCardDialogListing} ref={dialogRef}>
-      {!!hotelsPinData?.length &&
+      {hotelsPinData?.map((data) => {
-        hotelsPinData.map((data) => {
+        const isActive = data.name === activeHotel
-          const isActive = data.name === activeHotelCard
+        return (
-          return (
+          <div
-            <div
+            key={data.name}
-              key={data.name}
+            ref={isActive ? activeCardRef : null}
-              ref={isActive ? activeCardRef : null}
+            data-name={data.name}
-              data-name={data.name}
+          >
-            >
+            <HotelCardDialog
-              <HotelCardDialog
+              data={data}
-                data={data}
+              isOpen={!!activeHotel}
-                isOpen={!!activeHotelCard}
+              handleClose={deactivate}
-                handleClose={handleClose}
+              type="listing"
-                type="listing"
+            />
-              />
+          </div>
-            </div>
+        )
-          )
+      })}
-        })}
     </div>
   )
 }

apps/scandic-web/components/HotelReservation/HotelCardListing/index.tsx

@@ -37,7 +37,7 @@ export default function HotelCardListing({
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
   const setResultCount = useHotelFilterStore((state) => state.setResultCount)
   const intl = useIntl()
-  const { activeHotelCard } = useHotelsMapStore()
+  const { activeHotel } = useHotelsMapStore()
   const { showBackToTop, scrollToTop } = useScrollToTop({ threshold: 490 })
   const activeCardRef = useRef<HTMLDivElement | null>(null)
 
@@ -108,7 +108,7 @@ export default function HotelCardListing({
         inline: "center",
       })
     }
-  }, [activeHotelCard, type])
+  }, [activeHotel, type])
 
   useEffect(() => {
     setResultCount(hotels.length)
@@ -116,8 +116,7 @@ export default function HotelCardListing({
 
   function isHotelActiveInMapView(hotelName: string): boolean {
     return (
-      hotelName === activeHotelCard &&
+      hotelName === activeHotel && type === HotelCardListingTypeEnum.MapListing
-      type === HotelCardListingTypeEnum.MapListing
     )
   }
 

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx

@@ -13,22 +13,19 @@ import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/se
 import type { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 export default function HotelListing({ hotels }: HotelListingProps) {
-  const { activeHotelPin } = useHotelsMapStore()
+  const { activeHotel } = useHotelsMapStore()
   const isMobile = useMediaQuery("(max-width: 767px)")
-  return (
+
-    <>
+  return isMobile ? (
-      {isMobile ? (
+    <div className={styles.hotelListingMobile} data-open={!!activeHotel}>
-        <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
+      <HotelCardDialogListing hotels={hotels} />
-          <HotelCardDialogListing hotels={hotels} />
+    </div>
-        </div>
+  ) : (
-      ) : (
+    <div className={styles.hotelListing}>
-        <div className={styles.hotelListing}>
+      <HotelCardListing
-          <HotelCardListing
+        hotelData={hotels}
-            hotelData={hotels}
+        type={HotelCardListingTypeEnum.MapListing}
-            type={HotelCardListingTypeEnum.MapListing}
+      />
-          />
+    </div>
-        </div>
-      )}
-    </>
   )
 }

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -53,7 +53,7 @@ export default function SelectHotelContent({
   const listingContainerRef = useRef<HTMLDivElement | null>(null)
 
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
-  const { activeHotelPin } = useHotelsMapStore()
+  const { activeHotel } = useHotelsMapStore()
 
   const { showBackToTop, scrollToTop } = useScrollToTop({
     threshold: 490,
@@ -65,8 +65,8 @@ export default function SelectHotelContent({
   )
 
   const coordinates = useMemo(() => {
-    if (activeHotelPin) {
+    if (activeHotel) {
-      const hotel = hotels.find((hotel) => hotel.hotel.name === activeHotelPin)
+      const hotel = hotels.find((hotel) => hotel.hotel.name === activeHotel)
 
       if (hotel && hotel.hotel.location) {
         return {
@@ -79,7 +79,7 @@ export default function SelectHotelContent({
     return isAboveMobile
       ? cityCoordinates
       : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 }
-  }, [activeHotelPin, hotels, isAboveMobile, cityCoordinates])
+  }, [activeHotel, hotels, isAboveMobile, cityCoordinates])
 
   const filteredHotelPins = useMemo(() => {
     const updatedHotelsList = bookingCode
@@ -159,14 +159,15 @@ export default function SelectHotelContent({
         <div className={styles.filterContainer}>
           <Button
             intent="text"
-            size="small"
+            type="button"
             variant="icon"
-            wrapping
+            size="small"
             className={styles.filterContainerCloseButton}
             asChild
           >
             <Link href={selectHotel(lang)} keepSearchParams>
-              <MaterialIcon icon="close" color="CurrentColor" />
+              <MaterialIcon icon="arrow_back" color="CurrentColor" size={20} />
+              {intl.formatMessage({ id: "Back" })}
             </Link>
           </Button>
           <FilterAndSortModal

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css

@@ -27,6 +27,10 @@
   display: none;
 }
 
+.filterContainerCloseButton {
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
+}
+
 @media (min-width: 768px) {
   .container .closeButton {
     display: flex;

apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/HotelPin/hotelPin.module.css

@@ -0,0 +1,32 @@
+.pin {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--Spacing-x-half) var(--Spacing-x1) var(--Spacing-x-half)
+    var(--Spacing-x-half);
+  border: 2px solid var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Rounded);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
+  gap: var(--Spacing-x1);
+  width: max-content;
+}
+
+.pin.active {
+  background-color: var(--Primary-Dark-Surface-Normal);
+  color: var(--Base-Surface-Primary-light-Normal);
+}
+
+.pinIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--Surface-Brand-Primary-2-Default);
+}
+
+.pin.active .pinIcon {
+  background: var(--Base-Surface-Primary-light-Normal);
+}

apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/HotelPin/index.tsx

@@ -0,0 +1,46 @@
+import { useIntl } from "react-intl"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import HotelMarker from "@/components/Maps/Markers/HotelMarker"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./hotelPin.module.css"
+
+interface HotelPinProps {
+  isActive: boolean
+  hotelPrice: number | null
+  currency: string
+}
+
+export default function HotelPin({
+  isActive,
+  hotelPrice,
+  currency,
+}: HotelPinProps) {
+  const intl = useIntl()
+  const isNotAvailable = !hotelPrice
+
+  return (
+    <div
+      className={`${styles.pin} ${isActive ? styles.active : ""}`}
+      data-hotelpin
+    >
+      <span className={styles.pinIcon}>
+        {isNotAvailable ? (
+          <MaterialIcon
+            icon="calendar_clock"
+            size={16}
+            color={isActive ? "Icon/Interactive/Default" : "Icon/Inverted"}
+          />
+        ) : (
+          <HotelMarker width={16} color={isActive ? "burgundy" : "white"} />
+        )}
+      </span>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p>{isNotAvailable ? "—" : formatPrice(intl, hotelPrice, currency)}</p>
+      </Typography>
+    </div>
+  )
+}

apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/hotelListingMapContent.module.css

@@ -1,62 +1,11 @@
 .advancedMarker {
   height: 32px;
-  min-width: 109px !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
-}
-
-.advancedMarker.active {
-  height: 32px;
-  min-width: 109px !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
 }
 
 .dialogContainer {
   display: none;
 }
 
-.pin {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: var(--Spacing-x-half) var(--Spacing-x1) var(--Spacing-x-half)
-    var(--Spacing-x-half);
-  border-radius: var(--Corner-radius-Rounded);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
-  gap: var(--Spacing-x1);
-  width: max-content;
-}
-
-.pin.active {
-  background-color: var(--Primary-Dark-Surface-Normal);
-}
-
-.pinLabel {
-  display: none;
-}
-
-.pin.active .pinLabel {
-  display: flex;
-  align-items: center;
-  gap: var(--Spacing-x2);
-  text-wrap: nowrap;
-}
-
-.pinIcon {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--Primary-Dark-Surface-Normal);
-}
-
-.pin.active .pinIcon {
-  background: var(--Base-Surface-Primary-light-Normal);
-}
-
 .card {
   display: none;
   position: absolute;

apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx

@@ -2,62 +2,39 @@ import {
   AdvancedMarker,
   AdvancedMarkerAnchorPoint,
 } from "@vis.gl/react-google-maps"
-import { useCallback, useState } from "react"
+import { useCallback } from "react"
-import { useIntl } from "react-intl"
 
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import { formatPrice } from "@/utils/numberFormatting"
 
-import HotelMarker from "../../Markers/HotelMarker"
+import HotelPin from "./HotelPin"
 
 import styles from "./hotelListingMapContent.module.css"
 
 import type { HotelListingMapContentProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
-  const intl = useIntl()
+  const { activeHotel, hoveredHotel, activate, deactivate, engage, disengage } =
-  const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)
-  const { activeHotelPin, setActiveHotelPin, setActiveHotelCard } =
     useHotelsMapStore()
 
   const toggleActiveHotelPin = useCallback(
     (pinName: string | null) => {
-      if (setActiveHotelPin) {
+      if (activeHotel === pinName || pinName === null) {
-        const newActivePin = activeHotelPin === pinName ? null : pinName
+        deactivate()
-        setActiveHotelPin(newActivePin)
+        return
-        setActiveHotelCard(newActivePin)
-        if (newActivePin === null) {
-          setHoveredHotelPin(null)
-          setActiveHotelCard(null)
-        }
       }
-    },
-    [activeHotelPin, setActiveHotelPin, setActiveHotelCard]
-  )
 
-  const handleHover = useCallback(
+      activate(pinName)
-    (pinName: string | null) => {
-      if (pinName !== null && activeHotelPin !== pinName) {
-        setHoveredHotelPin(pinName)
-        if (activeHotelPin && setActiveHotelPin) {
-          setActiveHotelPin(null)
-          setActiveHotelCard(null)
-        }
-      } else if (pinName === null) {
-        setHoveredHotelPin(null)
-      }
     },
-    [activeHotelPin, setActiveHotelPin, setActiveHotelCard]
+    [activeHotel, activate, deactivate]
   )
 
   return (
     <div>
       {hotelPins.map((pin) => {
         const isActiveOrHovered =
-          activeHotelPin === pin.name || hoveredHotelPin === pin.name
+          activeHotel === pin.name || hoveredHotel === pin.name
         const hotelPrice =
           pin.memberPrice ?? pin.publicPrice ?? pin.redemptionPrice
         return (
@@ -67,8 +44,8 @@ function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
             position={pin.coordinates}
             anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
             zIndex={isActiveOrHovered ? 2 : 0}
-            onMouseEnter={() => handleHover(pin.name)}
+            onMouseEnter={() => engage(pin.name)}
-            onMouseLeave={() => handleHover(null)}
+            onMouseLeave={() => disengage()}
             onClick={() => toggleActiveHotelPin(pin.name)}
           >
             <div className={styles.dialogContainer}>
@@ -76,37 +53,17 @@ function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
                 isOpen={isActiveOrHovered}
                 handleClose={(event: { stopPropagation: () => void }) => {
                   event.stopPropagation()
-                  if (activeHotelPin === pin.name) {
+                  deactivate()
-                    toggleActiveHotelPin(null)
+                  disengage()
-                  }
                 }}
                 data={pin}
               />
             </div>
-            <span
+            <HotelPin
-              className={`${styles.pin} ${isActiveOrHovered ? styles.active : ""}`}
+              isActive={isActiveOrHovered}
-            >
+              hotelPrice={hotelPrice}
-              <span className={styles.pinIcon}>
+              currency={pin.currency}
-                <HotelMarker
+            />
-                  width={16}
-                  color={isActiveOrHovered ? "burgundy" : "white"}
-                />
-              </span>
-
-              <Body
-                asChild
-                color={isActiveOrHovered ? "white" : "baseTextHighContrast"}
-              >
-                <span>
-                  {/* TODO: Handle when no price is available */}
-                  {hotelPrice
-                    ? formatPrice(intl, hotelPrice, pin.currency)
-                    : intl.formatMessage({
-                        defaultMessage: "N/A",
-                      })}
-                </span>
-              </Body>
-            </span>
           </AdvancedMarker>
         )
       })}

apps/scandic-web/components/Maps/InteractiveMap/PoiMapMarkers/index.tsx

@@ -10,16 +10,16 @@ import Caption from "@/components/TempDesignSystem/Text/Caption"
 import PoiMarker from "../../Markers/Poi"
 import ScandicMarker from "../../Markers/Scandic"
 
-import styles from "./hotelMapContent.module.css"
+import styles from "./poiMapMarkers.module.css"
 
-import type { HotelMapContentProps } from "@/types/hotel"
+import type { PoiMapMarkersProps } from "@/types/hotel"
 
-export default function HotelMapContent({
+export default function PoiMapMarkers({
   coordinates,
   pointsOfInterest,
   onActivePoiChange,
   activePoi,
-}: HotelMapContentProps) {
+}: PoiMapMarkersProps) {
   const intl = useIntl()
 
   function toggleActivePoi(poiName: string) {

apps/scandic-web/components/Maps/InteractiveMap/index.tsx

@@ -9,7 +9,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Button from "@/components/TempDesignSystem/Button"
 
 import HotelListingMapContent from "./HotelListingMapContent"
-import HotelMapContent from "./HotelMapContent"
+import PoiMapMarkers from "./PoiMapMarkers"
 
 import styles from "./interactiveMap.module.css"
 
@@ -36,6 +36,7 @@ export default function InteractiveMap({
     disableDefaultUI: true,
     clickableIcons: false,
     mapId,
+    gestureHandling: "greedy",
   }
 
   function zoomIn() {
@@ -67,7 +68,7 @@ export default function InteractiveMap({
       <Map {...mapOptions} onTilesLoaded={onTilesLoaded}>
         {hotelPins && <HotelListingMapContent hotelPins={hotelPins} />}
         {pointsOfInterest && (
-          <HotelMapContent
+          <PoiMapMarkers
             coordinates={coordinates}
             pointsOfInterest={pointsOfInterest}
             onActivePoiChange={onActivePoiChange}

apps/scandic-web/components/Maps/InteractiveMap/interactiveMap.module.css

@@ -35,7 +35,7 @@
 
 .zoomButtons {
   display: grid;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x2);
 }
 
 .closeButton {
@@ -55,8 +55,8 @@
 @media screen and (min-width: 768px) {
   .ctaButtons {
     top: var(--Spacing-x4);
-    right: var(--Spacing-x4);
+    right: var(--Spacing-x5);
-    bottom: var(--Spacing-x4);
+    bottom: var(--Spacing-x7);
     justify-content: space-between;
   }
 

apps/scandic-web/stores/hotels-map.ts

@@ -1,15 +1,43 @@
 import { create } from "zustand"
 
 interface HotelsMapState {
-  activeHotelCard: string | null
+  activeHotel: string | null
-  activeHotelPin: string | null
+  hoveredHotel: string | null
-  setActiveHotelCard: (hotelCard: string | null) => void
+  hoverTimeout: number | null
-  setActiveHotelPin: (hotelPin: string | null) => void
+  activate: (hotel: string | null) => void
+  deactivate: () => void
+  engage: (hotel: string | null) => void
+  disengage: () => void
+  disengageAfterDelay: () => void
 }
 
-export const useHotelsMapStore = create<HotelsMapState>((set) => ({
+export const useHotelsMapStore = create<HotelsMapState>((set, get) => ({
-  activeHotelCard: null,
+  activeHotel: null,
-  activeHotelPin: null,
+  hoveredHotel: null,
-  setActiveHotelCard: (hotelCard) => set({ activeHotelCard: hotelCard }),
+  hoverTimeout: null,
-  setActiveHotelPin: (hotelPin) => set({ activeHotelPin: hotelPin }),
+  activate: (hotel) => set({ activeHotel: hotel }),
+  deactivate: () => set({ activeHotel: null }),
+  engage: (hotel) => {
+    const state = get()
+
+    if (state.hoverTimeout) {
+      window.clearTimeout(state.hoverTimeout)
+    }
+
+    if (hotel && state.activeHotel) {
+      set({ activeHotel: null })
+    }
+
+    set({ hoveredHotel: hotel })
+  },
+  disengage: () => {
+    set({ hoveredHotel: null })
+  },
+  disengageAfterDelay: () => {
+    const timeoutId = window.setTimeout(() => {
+      set({ hoveredHotel: null, activeHotel: null, hoverTimeout: null })
+    }, 3000)
+
+    set({ hoverTimeout: timeoutId })
+  },
 }))

apps/scandic-web/types/hotel.ts

@@ -63,7 +63,7 @@ export type RestaurantOpeningHoursDay = z.output<
 >
 export type Room = ReturnType<typeof transformRoomCategories>
 
-export type HotelMapContentProps = {
+export type PoiMapMarkersProps = {
   activePoi?: string | null
   coordinates: { lat: number; lng: number }
   onActivePoiChange?: (poiName: string | null) => void

packages/design-system/lib/fonts.css

@@ -269,7 +269,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(/_static/fonts/material-symbols/rounded-ad9423f9.woff2)
+  src: url(/_static/fonts/material-symbols/rounded-112272ae.woff2)
     format('woff2');
 }
 

scripts/material-symbols-update.mjs

@@ -45,6 +45,7 @@ const icons = [
   'box',
   'business_center',
   'calendar_add_on',
+  'calendar_clock',
   'calendar_month',
   'calendar_today',
   'call',