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/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 { activeHotelCard, setActiveHotelCard, setActiveHotelPin } =
-    useHotelsMapStore()
-
-  function handleClose() {
-    setActiveHotelCard(null)
-    setActiveHotelPin(null)
-  }
-
-  useClickOutside(dialogRef, !!activeHotelCard && isMobile, handleClose)
+  const isScrollingRef = useRef<boolean>(false)
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const { activeHotel, activate, deactivate } = useHotelsMapStore()
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          const cardName = entry.target.getAttribute("data-name")
-          if (cardName) {
-            setActiveHotelCard(cardName)
+      // skip intersection handling during scrolling
+      if (isScrollingRef.current) return
+
+      if (debounceTimerRef.current) {
+        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
-      observerRef.current?.disconnect()
+      isScrollingRef.current = true
 
-      activeCardRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "center",
+      requestAnimationFrame(() => {
+        activeCardRef.current?.scrollIntoView({
+          behavior: "smooth",
+          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) => {
-          const isActive = data.name === activeHotelCard
-          return (
-            <div
-              key={data.name}
-              ref={isActive ? activeCardRef : null}
-              data-name={data.name}
-            >
-              <HotelCardDialog
-                data={data}
-                isOpen={!!activeHotelCard}
-                handleClose={handleClose}
-                type="listing"
-              />
-            </div>
-          )
-        })}
+      {hotelsPinData?.map((data) => {
+        const isActive = data.name === activeHotel
+        return (
+          <div
+            key={data.name}
+            ref={isActive ? activeCardRef : null}
+            data-name={data.name}
+          >
+            <HotelCardDialog
+              data={data}
+              isOpen={!!activeHotel}
+              handleClose={deactivate}
+              type="listing"
+            />
+          </div>
+        )
+      })}
     </div>
   )
 }