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"