From 139dd0ff179a1e1f724c0510bd9d3dfc88d2be4c Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 21 May 2025 12:41:17 +0000
Subject: [PATCH] fix(SW-2504): Fixed issue with marker getting active state
 after closing and clicking cluster marker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Matilda Landström
---
 .../CityMap/HotelList/Content.tsx             | 56 +++++++++++++++++++
 .../CityMap/HotelList/index.tsx               | 41 ++++----------
 2 files changed, 67 insertions(+), 30 deletions(-)
 create mode 100644 apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/Content.tsx

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/Content.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/Content.tsx
new file mode 100644
index 000000000..ab5185871
--- /dev/null
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/Content.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
+
+import Alert from "@/components/TempDesignSystem/Alert"
+
+import HotelCardCarousel from "../../../HotelCardCarousel"
+import HotelListItem from "../HotelListItem"
+
+import styles from "./hotelList.module.css"
+
+import { AlertTypeEnum } from "@/types/enums/alert"
+import type { DestinationPagesHotelData } from "@/types/hotel"
+
+interface HotelListContentProps {
+  hotelsCount: number
+  visibleHotels: DestinationPagesHotelData[]
+}
+
+export default function HotelListContent({
+  hotelsCount,
+  visibleHotels,
+}: HotelListContentProps) {
+  const intl = useIntl()
+  const isMobile = useMediaQuery("(max-width: 949px)")
+
+  if (hotelsCount === 0) {
+    return (
+      <Alert
+        type={AlertTypeEnum.Info}
+        heading={intl.formatMessage({
+          defaultMessage: "No matching hotels found",
+        })}
+        text={intl.formatMessage({
+          defaultMessage:
+            "It looks like no hotels match your filters. Try adjusting your search to find the perfect stay.",
+        })}
+      />
+    )
+  }
+
+  if (isMobile) {
+    return <HotelCardCarousel visibleHotels={visibleHotels} />
+  }
+
+  return (
+    <ul className={styles.hotelList}>
+      {visibleHotels.map(({ hotel, url }) => (
+        <li key={hotel.id}>
+          <HotelListItem hotel={hotel} url={url} />
+        </li>
+      ))}
+    </ul>
+  )
+}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/index.tsx
index c8feaab38..0ccdaa7b8 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelList/index.tsx
@@ -7,18 +7,15 @@ import { useIntl } from "react-intl"
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
-import Alert from "@/components/TempDesignSystem/Alert"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import { debounce } from "@/utils/debounce"
 
-import HotelCardCarousel from "../../../HotelCardCarousel"
-import HotelListItem from "../HotelListItem"
+import HotelListContent from "./Content"
 import HotelListSkeleton from "./HotelListSkeleton"
 import { getVisibleHotels } from "./utils"
 
 import styles from "./hotelList.module.css"
 
-import { AlertTypeEnum } from "@/types/enums/alert"
 import type { DestinationPagesHotelData } from "@/types/hotel"
 
 export default function HotelList() {
@@ -56,9 +53,11 @@ export default function HotelList() {
     }
   }, [map, coreLib, debouncedUpdateVisibleHotels])
 
-  return isLoading ? (
-    <HotelListSkeleton />
-  ) : (
+  if (isLoading) {
+    return <HotelListSkeleton />
+  }
+
+  return (
     <div className={styles.hotelListWrapper}>
       <div className={styles.header}>
         <Body>
@@ -71,29 +70,11 @@ export default function HotelList() {
         </Body>
         <DestinationFilterAndSort listType="hotel" />
       </div>
-      {activeHotels.length === 0 ? (
-        <Alert
-          type={AlertTypeEnum.Info}
-          heading={intl.formatMessage({
-            defaultMessage: "No matching hotels found",
-          })}
-          text={intl.formatMessage({
-            defaultMessage:
-              "It looks like no hotels match your filters. Try adjusting your search to find the perfect stay.",
-          })}
-        />
-      ) : (
-        <>
-          <HotelCardCarousel visibleHotels={visibleHotels} />
-          <ul className={styles.hotelList}>
-            {visibleHotels.map(({ hotel, url }) => (
-              <li key={hotel.id}>
-                <HotelListItem hotel={hotel} url={url} />
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
+
+      <HotelListContent
+        hotelsCount={activeHotels.length}
+        visibleHotels={visibleHotels}
+      />
     </div>
   )
 }