From 0283c777cade02893f8fec001b810cf030efc9a6 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Mon, 25 Nov 2024 13:27:19 +0100
Subject: [PATCH] fix(SW-984): Scroll to active card (desktop)

---
 .../HotelCardListing/hotelCardListing.module.css |  2 ++
 .../HotelReservation/HotelCardListing/index.tsx  | 16 ++++++++++------
 .../SelectHotel/SelectHotelMap/index.tsx         | 15 +++++++++++++--
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/components/HotelReservation/HotelCardListing/hotelCardListing.module.css b/components/HotelReservation/HotelCardListing/hotelCardListing.module.css
index 00bd7ec84..5a5d0ea7e 100644
--- a/components/HotelReservation/HotelCardListing/hotelCardListing.module.css
+++ b/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;
 }
diff --git a/components/HotelReservation/HotelCardListing/index.tsx b/components/HotelReservation/HotelCardListing/index.tsx
index f666c5ba2..d9d0b4f30 100644
--- a/components/HotelReservation/HotelCardListing/index.tsx
+++ b/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
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
index 0d1d58eee..4208d4871 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
+++ b/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"