Merged in fix/SW-983-map-view-cards-hover-select (pull request #971)

Fix/SW-983 map view cards hover select

Approved-by: Niclas Edenvin

components/HotelReservation/HotelCard/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { useParams } from "next/dist/client/components/navigation"
+import { memo, useCallback } from "react"
 import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
@@ -25,7 +26,7 @@ import styles from "./hotelCard.module.css"
 import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default function HotelCard({
+function HotelCard({
   hotel,
   type = HotelCardListingTypeEnum.PageListing,
   state = "default",
@@ -45,16 +46,17 @@ export default function HotelCard({
     state,
   })
 
-  const handleMouseEnter = () => {
+  const handleMouseEnter = useCallback(() => {
     if (onHotelCardHover) {
       onHotelCardHover(hotelData.name)
     }
-  }
-  const handleMouseLeave = () => {
+  }, [onHotelCardHover, hotelData.name])
+
+  const handleMouseLeave = useCallback(() => {
     if (onHotelCardHover) {
       onHotelCardHover(null)
     }
-  }
+  }, [onHotelCardHover])
 
   return (
     <article
@@ -142,3 +144,5 @@ export default function HotelCard({
     </article>
   )
 }
+
+export default memo(HotelCard)

components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css

@@ -1,6 +1,6 @@
 .dialog {
   padding-bottom: var(--Spacing-x1);
-  bottom: 32px;
+  bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   border: none;
@@ -33,6 +33,8 @@
 .imageContainer {
   position: relative;
   min-width: 177px;
+  border-radius: var(--Corner-radius-Medium) 0 0 var(--Corner-radius-Medium);
+  overflow: hidden;
 }
 
 .imageContainer img {
@@ -108,4 +110,7 @@
   .memberPrice {
     display: none;
   }
+  .dialog {
+    bottom: 32px;
+  }
 }

components/HotelReservation/HotelCardDialogListing/hotelCardDialogListing.module.css

@@ -0,0 +1,20 @@
+.hotelCardDialogListing {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x1);
+  align-items: flex-end;
+}
+
+.hotelCardDialogListing dialog {
+  position: relative;
+  padding: 0;
+  margin: 0;
+}
+
+.hotelCardDialogListing > div:first-child {
+  margin-left: var(--Spacing-x2);
+}
+
+.hotelCardDialogListing > div:last-child {
+  margin-right: var(--Spacing-x2);
+}

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -1,10 +1,15 @@
 "use client"
 
 import { useCallback, useEffect, useRef } from "react"
+import { useMediaQuery } from "usehooks-ts"
+
+import useClickOutside from "@/hooks/useClickOutside"
 
 import HotelCardDialog from "../HotelCardDialog"
 import { getHotelPins } from "./utils"
 
+import styles from "./hotelCardDialogListing.module.css"
+
 import type { HotelCardDialogListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 export default function HotelCardDialogListing({
@@ -15,6 +20,12 @@ export default function HotelCardDialogListing({
   const hotelsPinData = getHotelPins(hotels)
   const activeCardRef = useRef<HTMLDivElement | null>(null)
   const observerRef = useRef<IntersectionObserver | null>(null)
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const isMobile = useMediaQuery("(max-width: 768px)")
+
+  useClickOutside(dialogRef, !!activeCard && isMobile, () => {
+    onActiveCardChange(null)
+  })
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -65,7 +76,7 @@ export default function HotelCardDialogListing({
   }, [activeCard])
 
   return (
-    <>
+    <div className={styles.hotelCardDialogListing} ref={dialogRef}>
       {hotelsPinData?.length &&
         hotelsPinData.map((data) => {
           const isActive = data.name === activeCard
@@ -83,6 +94,6 @@ export default function HotelCardDialogListing({
             </div>
           )
         })}
-    </>
+    </div>
   )
 }

components/HotelReservation/HotelCardListing/hotelCardListing.module.css

@@ -3,4 +3,6 @@
   flex-direction: column;
   gap: var(--Spacing-x2);
   margin-bottom: var(--Spacing-x2);
+  max-height: 100vh;
+  overflow-y: auto;
 }

components/HotelReservation/HotelCardListing/index.tsx

@@ -109,13 +109,17 @@ export default function HotelCardListing({
     <section className={styles.hotelCards}>
       {hotels?.length ? (
         hotels.map((hotel) => (
-          <HotelCard
+          <div
             key={hotel.hotelData.operaId}
-            hotel={hotel}
-            type={type}
-            state={hotel.hotelData.name === activeCard ? "active" : "default"}
-            onHotelCardHover={onHotelCardHover}
-          />
+            data-active={hotel.hotelData.name === activeCard ? "true" : "false"}
+          >
+            <HotelCard
+              hotel={hotel}
+              type={type}
+              state={hotel.hotelData.name === activeCard ? "active" : "default"}
+              onHotelCardHover={onHotelCardHover}
+            />
+          </div>
         ))
       ) : activeFilters ? (
         <Alert

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css

@@ -4,35 +4,18 @@
 
 .hotelListingMobile {
   display: none;
-  align-items: flex-end;
   overflow-x: auto;
   position: absolute;
-  bottom: 0px;
+  bottom: 32px;
   left: 0;
   right: 0;
   z-index: 10;
-  height: 100%;
-  gap: var(--Spacing-x1);
 }
 
 .hotelListingMobile[data-open="true"] {
   display: flex;
 }
 
-.hotelListingMobile dialog {
-  position: relative;
-  padding: 0;
-  margin: 0;
-}
-
-.hotelListingMobile > div:first-child {
-  margin-left: 16px;
-}
-
-.hotelListingMobile > div:last-child {
-  margin-right: 16px;
-}
-
 @media (min-width: 768px) {
   .hotelListing {
     display: block;

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { APIProvider } from "@vis.gl/react-google-maps"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
@@ -35,6 +35,7 @@ export default function SelectHotelMap({
   const isAboveMobile = useMediaQuery("(min-width: 768px)")
   const [activeHotelPin, setActiveHotelPin] = useState<string | null>(null)
   const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
+  const listingContainerRef = useRef<HTMLDivElement | null>(null)
 
   const selectHotelParams = new URLSearchParams(searchParams.toString())
   const selectedHotel = selectHotelParams.get("selectedHotel")
@@ -43,6 +44,16 @@ export default function SelectHotelMap({
     ? cityCoordinates
     : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 }
 
+  useEffect(() => {
+    if (listingContainerRef.current) {
+      const activeElement =
+        listingContainerRef.current.querySelector(`[data-active="true"]`)
+      if (activeElement) {
+        activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" })
+      }
+    }
+  }, [activeHotelPin])
+
   useEffect(() => {
     if (selectedHotel) {
       setActiveHotelPin(selectedHotel)
@@ -90,7 +101,7 @@ export default function SelectHotelMap({
   return (
     <APIProvider apiKey={apiKey}>
       <div className={styles.container}>
-        <div className={styles.listingContainer}>
+        <div className={styles.listingContainer} ref={listingContainerRef}>
           <div className={styles.filterContainer}>
             <Button
               intent="text"

components/ImageGallery/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { memo, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { GalleryIcon } from "@/components/Icons"
@@ -12,7 +12,7 @@ import styles from "./imageGallery.module.css"
 
 import type { ImageGalleryProps } from "@/types/components/imageGallery"
 
-export default function ImageGallery({
+function ImageGallery({
   images,
   title,
   fill,
@@ -58,3 +58,5 @@ export default function ImageGallery({
     </>
   )
 }
+
+export default memo(ImageGallery)

components/Maps/InteractiveMap/HotelListingMapContent/index.tsx

@@ -2,11 +2,10 @@ import {
   AdvancedMarker,
   AdvancedMarkerAnchorPoint,
 } from "@vis.gl/react-google-maps"
-import { useRef, useState } from "react"
+import { memo, useCallback, useState } from "react"
 
 import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import useClickOutside from "@/hooks/useClickOutside"
 
 import HotelMarker from "../../Markers/HotelMarker"
 
@@ -14,33 +13,45 @@ import styles from "./hotelListingMapContent.module.css"
 
 import type { HotelListingMapContentProps } from "@/types/components/hotelReservation/selectHotel/map"
 
-export default function HotelListingMapContent({
+function HotelListingMapContent({
   activeHotelPin,
   hotelPins,
   onActiveHotelPinChange,
 }: HotelListingMapContentProps) {
   const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)
-  const dialogRef = useRef<HTMLDivElement>(null)
 
-  function toggleActiveHotelPin(pinName: string | null) {
-    if (onActiveHotelPinChange) {
-      onActiveHotelPinChange(activeHotelPin === pinName ? null : pinName)
-      setHoveredHotelPin(null)
-    }
-  }
+  const toggleActiveHotelPin = useCallback(
+    (pinName: string | null) => {
+      if (onActiveHotelPinChange) {
+        const newActivePin = activeHotelPin === pinName ? null : pinName
+        onActiveHotelPinChange(newActivePin)
+        if (newActivePin === null) {
+          setHoveredHotelPin(null)
+        }
+      }
+    },
+    [activeHotelPin, onActiveHotelPinChange]
+  )
 
-  function isPinActiveOrHovered(pinName: string) {
-    return activeHotelPin === pinName || hoveredHotelPin === pinName
-  }
-
-  useClickOutside(dialogRef, isPinActiveOrHovered(activeHotelPin ?? ""), () => {
-    toggleActiveHotelPin(null)
-  })
+  const handleHover = useCallback(
+    (pinName: string | null) => {
+      if (pinName !== null && activeHotelPin !== pinName) {
+        setHoveredHotelPin(pinName)
+        if (activeHotelPin && onActiveHotelPinChange) {
+          onActiveHotelPinChange(null)
+        }
+      } else if (pinName === null) {
+        setHoveredHotelPin(null)
+      }
+    },
+    [activeHotelPin, onActiveHotelPinChange]
+  )
 
   return (
     <div>
       {hotelPins.map((pin) => {
-        const isActiveOrHovered = isPinActiveOrHovered(pin.name)
+        const isActiveOrHovered =
+          activeHotelPin === pin.name || hoveredHotelPin === pin.name
         return (
           <AdvancedMarker
             key={pin.name}
@@ -48,15 +59,11 @@ export default function HotelListingMapContent({
             position={pin.coordinates}
             anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
             zIndex={isActiveOrHovered ? 2 : 0}
-            onMouseEnter={() => setHoveredHotelPin(pin.name)}
-            onMouseLeave={() => setHoveredHotelPin(null)}
-            onClick={() => {
-              toggleActiveHotelPin(
-                activeHotelPin === pin.name ? null : pin.name
-              )
-            }}
+            onMouseEnter={() => handleHover(pin.name)}
+            onMouseLeave={() => handleHover(null)}
+            onClick={() => toggleActiveHotelPin(pin.name)}
           >
-            <div className={styles.dialogContainer} ref={dialogRef}>
+            <div className={styles.dialogContainer}>
               <HotelCardDialog
                 isOpen={isActiveOrHovered}
                 handleClose={(event: { stopPropagation: () => void }) => {
@@ -92,3 +99,5 @@ export default function HotelListingMapContent({
     </div>
   )
 }
+
+export default memo(HotelListingMapContent)