From b73421dbded21f02d1f28c934daeaf395d294c58 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 12 Nov 2024 09:19:11 +0100
Subject: [PATCH 1/6] feat(SW-344): Hotel list in mobile

---
 .../select-hotel/@modal/(.)map/page.tsx       |  7 +--
 .../(standard)/select-hotel/utils.ts          | 19 --------
 .../HotelCardDialog/index.tsx                 |  6 +--
 .../HotelCardDialogListing/index.tsx          | 47 +++++++++++++++++++
 .../HotelCardDialogListing/utils.ts           | 21 +++++++++
 .../HotelListing/hotelListing.module.css      | 36 ++++++++++++++
 .../SelectHotelMap/HotelListing/index.tsx     | 22 +++++----
 .../hotelListingMapContent.module.css         | 10 ++++
 .../HotelListingMapContent/index.tsx          | 23 ++++-----
 .../hotelReservation/selectHotel/map.ts       |  2 +-
 10 files changed, 146 insertions(+), 47 deletions(-)
 create mode 100644 components/HotelReservation/HotelCardDialogListing/index.tsx
 create mode 100644 components/HotelReservation/HotelCardDialogListing/utils.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
index 0f636136f..6d8e62ed3 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { env } from "@/env/server"
 import { getLocations } from "@/lib/trpc/memoizedRequests"
 
+import { getHotelPins } from "@/components/HotelReservation/HotelCardDialogListing/utils"
 import SelectHotelMap from "@/components/HotelReservation/SelectHotel/SelectHotelMap"
 import {
   generateChildrenString,
@@ -11,11 +12,7 @@ import {
 import { MapModal } from "@/components/MapModal"
 import { setLang } from "@/i18n/serverContext"
 
-import {
-  fetchAvailableHotels,
-  getCentralCoordinates,
-  getHotelPins,
-} from "../../utils"
+import { fetchAvailableHotels, getCentralCoordinates } from "../../utils"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
index ee541bb7a..5b5fc958e 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
@@ -88,25 +88,6 @@ export function getFiltersFromHotels(hotels: HotelData[]): CategorizedFilters {
   )
 }
 
-export function getHotelPins(hotels: HotelData[]): HotelPin[] {
-  return hotels.map((hotel) => ({
-    coordinates: {
-      lat: hotel.hotelData.location.latitude,
-      lng: hotel.hotelData.location.longitude,
-    },
-    name: hotel.hotelData.name,
-    publicPrice: hotel.price?.regularAmount ?? null,
-    memberPrice: hotel.price?.memberAmount ?? null,
-    currency: hotel.price?.currency || null,
-    images: [
-      hotel.hotelData.hotelContent.images,
-      ...(hotel.hotelData.gallery?.heroImages ?? []),
-    ],
-    amenities: hotel.hotelData.detailedFacilities.slice(0, 3),
-    ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null,
-  }))
-}
-
 export function getCentralCoordinates(hotels: HotelPin[]) {
   const centralCoordinates = hotels.reduce(
     (acc, pin) => {
diff --git a/components/HotelReservation/HotelCardDialog/index.tsx b/components/HotelReservation/HotelCardDialog/index.tsx
index adeb0e176..91ce9e548 100644
--- a/components/HotelReservation/HotelCardDialog/index.tsx
+++ b/components/HotelReservation/HotelCardDialog/index.tsx
@@ -17,13 +17,13 @@ import styles from "./hotelCardDialog.module.css"
 import type { HotelCardDialogProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 export default function HotelCardDialog({
-  pin,
+  data,
   isOpen,
   handleClose,
 }: HotelCardDialogProps) {
   const intl = useIntl()
 
-  if (!pin) {
+  if (!data) {
     return null
   }
 
@@ -35,7 +35,7 @@ export default function HotelCardDialog({
     amenities,
     images,
     ratings,
-  } = pin
+  } = data
 
   const firstImage = images[0]?.imageSizes?.small
   const altText = images[0]?.metaData?.altText
diff --git a/components/HotelReservation/HotelCardDialogListing/index.tsx b/components/HotelReservation/HotelCardDialogListing/index.tsx
new file mode 100644
index 000000000..1a2097ada
--- /dev/null
+++ b/components/HotelReservation/HotelCardDialogListing/index.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+
+import HotelCardDialog from "../HotelCardDialog"
+import { getHotelPins } from "./utils"
+
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+
+export default function HotelCardDialogListing({
+  hotels,
+  activeCard,
+}: {
+  hotels: HotelData[]
+  activeCard: string | null | undefined
+}) {
+  const hotelsPinData = getHotelPins(hotels)
+  const activeCardRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    if (activeCardRef.current) {
+      activeCardRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      })
+    }
+  }, [activeCard])
+
+  return (
+    <>
+      {hotelsPinData?.length &&
+        hotelsPinData.map((data) => {
+          const isActive = data.name === activeCard
+          return (
+            <div key={data.name} ref={isActive ? activeCardRef : null}>
+              <HotelCardDialog
+                data={data}
+                isOpen={!!activeCard}
+                handleClose={() => {}}
+              />
+            </div>
+          )
+        })}
+    </>
+  )
+}
diff --git a/components/HotelReservation/HotelCardDialogListing/utils.ts b/components/HotelReservation/HotelCardDialogListing/utils.ts
new file mode 100644
index 000000000..b63b9b7ce
--- /dev/null
+++ b/components/HotelReservation/HotelCardDialogListing/utils.ts
@@ -0,0 +1,21 @@
+import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
+import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
+
+export function getHotelPins(hotels: HotelData[]): HotelPin[] {
+  return hotels.map((hotel) => ({
+    coordinates: {
+      lat: hotel.hotelData.location.latitude,
+      lng: hotel.hotelData.location.longitude,
+    },
+    name: hotel.hotelData.name,
+    publicPrice: hotel.price?.regularAmount ?? null,
+    memberPrice: hotel.price?.memberAmount ?? null,
+    currency: hotel.price?.currency || null,
+    images: [
+      hotel.hotelData.hotelContent.images,
+      ...(hotel.hotelData.gallery?.heroImages ?? []),
+    ],
+    amenities: hotel.hotelData.detailedFacilities.slice(0, 3),
+    ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null,
+  }))
+}
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
index 253df80d6..3ba5cf884 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
@@ -2,6 +2,37 @@
   display: none;
 }
 
+.hotelListingMobile {
+  display: none;
+  align-items: flex-end;
+  overflow-x: auto;
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  height: 350px;
+  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;
@@ -9,4 +40,9 @@
     overflow-y: auto;
     padding-top: var(--Spacing-x2);
   }
+
+  .hotelListingMobile,
+  .hotelListingMobile[data-open="true"] {
+    display: none;
+  }
 }
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
index 65bd476e6..7f237d62e 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import HotelCardDialogListing from "@/components/HotelReservation/HotelCardDialogListing"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 
 import styles from "./hotelListing.module.css"
@@ -13,13 +14,18 @@ export default function HotelListing({
   onHotelCardHover,
 }: HotelListingProps) {
   return (
-    <div className={styles.hotelListing}>
-      <HotelCardListing
-        hotelData={hotels}
-        type={HotelCardListingTypeEnum.MapListing}
-        activeCard={activeHotelPin}
-        onHotelCardHover={onHotelCardHover}
-      />
-    </div>
+    <>
+      <div className={styles.hotelListing}>
+        <HotelCardListing
+          hotelData={hotels}
+          type={HotelCardListingTypeEnum.MapListing}
+          activeCard={activeHotelPin}
+          onHotelCardHover={onHotelCardHover}
+        />
+      </div>
+      <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
+        <HotelCardDialogListing hotels={hotels} activeCard={activeHotelPin} />
+      </div>
+    </>
   )
 }
diff --git a/components/Maps/InteractiveMap/HotelListingMapContent/hotelListingMapContent.module.css b/components/Maps/InteractiveMap/HotelListingMapContent/hotelListingMapContent.module.css
index 359edad50..dc35427cb 100644
--- a/components/Maps/InteractiveMap/HotelListingMapContent/hotelListingMapContent.module.css
+++ b/components/Maps/InteractiveMap/HotelListingMapContent/hotelListingMapContent.module.css
@@ -8,6 +8,10 @@
   min-width: 109px !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
 }
 
+.dialogContainer {
+  display: none;
+}
+
 .pin {
   position: absolute;
   top: 0;
@@ -67,3 +71,9 @@
 .card.active {
   display: block;
 }
+
+@media (min-width: 768px) {
+  .dialogContainer {
+    display: block;
+  }
+}
diff --git a/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx b/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
index f121687ef..c3b83edb3 100644
--- a/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
+++ b/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
@@ -50,17 +50,18 @@ export default function HotelListingMapContent({
               )
             }
           >
-            <HotelCardDialog
-              isOpen={isActiveOrHovered}
-              handleClose={(event: { stopPropagation: () => void }) => {
-                event.stopPropagation()
-                if (activeHotelPin === pin.name) {
-                  toggleActiveHotelPin(null)
-                }
-              }}
-              pin={pin}
-            />
-
+            <div className={styles.dialogContainer}>
+              <HotelCardDialog
+                isOpen={isActiveOrHovered}
+                handleClose={(event: { stopPropagation: () => void }) => {
+                  event.stopPropagation()
+                  if (activeHotelPin === pin.name) {
+                    toggleActiveHotelPin(null)
+                  }
+                }}
+                data={pin}
+              />
+            </div>
             <span
               className={`${styles.pin} ${isActiveOrHovered ? styles.active : ""}`}
             >
diff --git a/types/components/hotelReservation/selectHotel/map.ts b/types/components/hotelReservation/selectHotel/map.ts
index 28965807a..64e13dad9 100644
--- a/types/components/hotelReservation/selectHotel/map.ts
+++ b/types/components/hotelReservation/selectHotel/map.ts
@@ -50,6 +50,6 @@ export interface HotelListingMapContentProps {
 
 export interface HotelCardDialogProps {
   isOpen: boolean
-  pin: HotelPin
+  data: HotelPin
   handleClose: (event: { stopPropagation: () => void }) => void
 }

From 96a52778810c102d2b37050c74a1a269c8da10a5 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 12 Nov 2024 09:31:20 +0100
Subject: [PATCH 2/6] feat(SW-344): set active pin on scroll

---
 .../HotelCardDialogListing/index.tsx          | 48 ++++++++++++++++---
 .../SelectHotelMap/HotelListing/index.tsx     | 10 ++--
 .../SelectHotel/SelectHotelMap/index.tsx      |  2 +-
 .../hotelReservation/selectHotel/map.ts       |  2 +-
 4 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/components/HotelReservation/HotelCardDialogListing/index.tsx b/components/HotelReservation/HotelCardDialogListing/index.tsx
index 1a2097ada..a91f68041 100644
--- a/components/HotelReservation/HotelCardDialogListing/index.tsx
+++ b/components/HotelReservation/HotelCardDialogListing/index.tsx
@@ -1,22 +1,54 @@
 "use client"
 
-import { useEffect, useRef } from "react"
+import { useCallback, useEffect, useRef } from "react"
 
 import HotelCardDialog from "../HotelCardDialog"
 import { getHotelPins } from "./utils"
 
 import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 
+interface HotelCardDialogListingProps {
+  hotels: HotelData[]
+  activeCard: string | null | undefined
+  onActiveCardChange: (hotelName: string | null) => void
+}
+
 export default function HotelCardDialogListing({
   hotels,
   activeCard,
-}: {
-  hotels: HotelData[]
-  activeCard: string | null | undefined
-}) {
+  onActiveCardChange,
+}: HotelCardDialogListingProps) {
   const hotelsPinData = getHotelPins(hotels)
   const activeCardRef = useRef<HTMLDivElement | null>(null)
 
+  const handleIntersection = useCallback(
+    (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const cardName = entry.target.getAttribute("data-name")
+          if (cardName) {
+            onActiveCardChange(cardName)
+          }
+        }
+      })
+    },
+    [onActiveCardChange]
+  )
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(handleIntersection, {
+      root: null,
+      threshold: 0.5, // Adjust threshold as needed
+    })
+
+    const elements = document.querySelectorAll("[data-name]")
+    elements.forEach((el) => observer.observe(el))
+
+    return () => {
+      elements.forEach((el) => observer.unobserve(el))
+    }
+  }, [handleIntersection])
+
   useEffect(() => {
     if (activeCardRef.current) {
       activeCardRef.current.scrollIntoView({
@@ -33,7 +65,11 @@ export default function HotelCardDialogListing({
         hotelsPinData.map((data) => {
           const isActive = data.name === activeCard
           return (
-            <div key={data.name} ref={isActive ? activeCardRef : null}>
+            <div
+              key={data.name}
+              ref={isActive ? activeCardRef : null}
+              data-name={data.name}
+            >
               <HotelCardDialog
                 data={data}
                 isOpen={!!activeCard}
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
index 7f237d62e..71d324155 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx
@@ -11,7 +11,7 @@ import type { HotelListingProps } from "@/types/components/hotelReservation/sele
 export default function HotelListing({
   hotels,
   activeHotelPin,
-  onHotelCardHover,
+  setActiveHotelPin,
 }: HotelListingProps) {
   return (
     <>
@@ -20,11 +20,15 @@ export default function HotelListing({
           hotelData={hotels}
           type={HotelCardListingTypeEnum.MapListing}
           activeCard={activeHotelPin}
-          onHotelCardHover={onHotelCardHover}
+          onHotelCardHover={setActiveHotelPin}
         />
       </div>
       <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
-        <HotelCardDialogListing hotels={hotels} activeCard={activeHotelPin} />
+        <HotelCardDialogListing
+          hotels={hotels}
+          activeCard={activeHotelPin}
+          onActiveCardChange={setActiveHotelPin}
+        />
       </div>
     </>
   )
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
index 3367d25b7..f92ec1895 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
@@ -95,7 +95,7 @@ export default function SelectHotelMap({
           <HotelListing
             hotels={hotels}
             activeHotelPin={activeHotelPin}
-            onHotelCardHover={setActiveHotelPin}
+            setActiveHotelPin={setActiveHotelPin}
           />
           {showBackToTop && (
             <Button
diff --git a/types/components/hotelReservation/selectHotel/map.ts b/types/components/hotelReservation/selectHotel/map.ts
index 64e13dad9..b913be9b1 100644
--- a/types/components/hotelReservation/selectHotel/map.ts
+++ b/types/components/hotelReservation/selectHotel/map.ts
@@ -13,7 +13,7 @@ import type { Coordinates } from "@/types/components/maps/coordinates"
 export interface HotelListingProps {
   hotels: HotelData[]
   activeHotelPin?: string | null
-  onHotelCardHover?: (hotelName: string | null) => void
+  setActiveHotelPin: (hotelName: string | null) => void
 }
 
 export interface SelectHotelMapProps {

From 87b999676b928e341abc51e43c83ae192a7cf6e0 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 12 Nov 2024 14:33:37 +0100
Subject: [PATCH 3/6] feat(SW-344) Correct position of pins in mobile

---
 .../select-hotel/@modal/(.)map/page.tsx       |  6 +---
 .../(standard)/select-hotel/utils.ts          | 16 ----------
 .../Header/MainMenu/MobileMenu/index.tsx      |  2 +-
 .../MainMenu/MyPagesMobileMenu/index.tsx      |  2 +-
 .../HotelCard/hotelCard.module.css            | 12 ++++++++
 .../HotelReservation/HotelCard/index.tsx      | 16 +++++++++-
 .../HotelCardDialogListing/index.tsx          | 29 +++++++++++--------
 .../SelectHotel/SelectHotelMap/index.tsx      | 28 +++++++++++++-----
 .../SelectHotel/SelectHotelMap/utils.ts       | 17 +++++++++++
 hooks/useMediaQuery.ts                        | 21 --------------
 package-lock.json                             | 16 +++++++++-
 package.json                                  |  1 +
 .../hotelReservation/selectHotel/map.ts       |  8 +++--
 13 files changed, 106 insertions(+), 68 deletions(-)
 create mode 100644 components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts
 delete mode 100644 hooks/useMediaQuery.ts

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
index 6d8e62ed3..fd9cc33c5 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx
@@ -12,7 +12,7 @@ import {
 import { MapModal } from "@/components/MapModal"
 import { setLang } from "@/i18n/serverContext"
 
-import { fetchAvailableHotels, getCentralCoordinates } from "../../utils"
+import { fetchAvailableHotels } from "../../utils"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
@@ -58,16 +58,12 @@ export default async function SelectHotelMapPage({
 
   const hotelPins = getHotelPins(hotels)
 
-  const centralCoordinates = getCentralCoordinates(hotelPins)
-
   return (
     <MapModal>
       <SelectHotelMap
         apiKey={googleMapsApiKey}
-        coordinates={centralCoordinates}
         hotelPins={hotelPins}
         mapId={googleMapId}
-        isModal={true}
         hotels={hotels}
       />
     </MapModal>
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
index 5b5fc958e..a021d9355 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts
@@ -87,19 +87,3 @@ export function getFiltersFromHotels(hotels: HotelData[]): CategorizedFilters {
     { facilityFilters: [], surroundingsFilters: [] }
   )
 }
-
-export function getCentralCoordinates(hotels: HotelPin[]) {
-  const centralCoordinates = hotels.reduce(
-    (acc, pin) => {
-      acc.lat += pin.coordinates.lat
-      acc.lng += pin.coordinates.lng
-      return acc
-    },
-    { lat: 0, lng: 0 }
-  )
-
-  centralCoordinates.lat /= hotels.length
-  centralCoordinates.lng /= hotels.length
-
-  return centralCoordinates
-}
diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx
index ae79675dd..272c4b231 100644
--- a/components/Header/MainMenu/MobileMenu/index.tsx
+++ b/components/Header/MainMenu/MobileMenu/index.tsx
@@ -3,13 +3,13 @@
 import { Suspense, useEffect } from "react"
 import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
 import useDropdownStore from "@/stores/main-menu"
 
 import { GiftIcon, SearchIcon, ServiceIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
-import useMediaQuery from "@/hooks/useMediaQuery"
 
 import HeaderLink from "../../HeaderLink"
 
diff --git a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
index 466014bd2..e0711fe5c 100644
--- a/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
+++ b/components/Header/MainMenu/MyPagesMobileMenu/index.tsx
@@ -3,11 +3,11 @@
 import { useEffect } from "react"
 import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
 import useDropdownStore from "@/stores/main-menu"
 
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
-import useMediaQuery from "@/hooks/useMediaQuery"
 import { getInitials } from "@/utils/user"
 
 import Avatar from "../Avatar"
diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css
index 95ea52ad2..a5d90de17 100644
--- a/components/HotelReservation/HotelCard/hotelCard.module.css
+++ b/components/HotelReservation/HotelCard/hotelCard.module.css
@@ -70,6 +70,10 @@
   justify-content: center;
 }
 
+.address {
+  display: none;
+}
+
 @media screen and (min-width: 1367px) {
   .card.pageListing {
     grid-template-areas:
@@ -118,4 +122,12 @@
   .pageListing .button {
     width: 160px;
   }
+
+  .address {
+    display: block;
+  }
+
+  .addressMobile {
+    display: none;
+  }
 }
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index d36ce0205..f72945b6d 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -1,6 +1,9 @@
 "use client"
+import { useParams } from "next/dist/client/components/navigation"
 import { useIntl } from "react-intl"
 
+import { selectHotelMap } from "@/constants/routes/hotelReservation"
+
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
@@ -26,6 +29,7 @@ export default function HotelCard({
   state = "default",
   onHotelCardHover,
 }: HotelCardProps) {
+  const params = useParams()
   const intl = useIntl()
 
   const { hotelData } = hotel
@@ -77,9 +81,19 @@ export default function HotelCard({
         <Title as="h4" textTransform="capitalize">
           {hotelData.name}
         </Title>
-        <Footnote color="uiTextMediumContrast">
+        <Footnote color="uiTextMediumContrast" className={styles.address}>
           {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
         </Footnote>
+        <Link
+          className={styles.addressMobile}
+          href={`${selectHotelMap[params.lang as keyof typeof selectHotelMap]}?selectedHotel=${hotelData.name}`}
+          keepSearchParams
+          variant="underscored"
+        >
+          <Footnote color="burgundy">
+            {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
+          </Footnote>
+        </Link>
         <Footnote color="uiTextMediumContrast">
           {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
         </Footnote>
diff --git a/components/HotelReservation/HotelCardDialogListing/index.tsx b/components/HotelReservation/HotelCardDialogListing/index.tsx
index a91f68041..fe75c9b33 100644
--- a/components/HotelReservation/HotelCardDialogListing/index.tsx
+++ b/components/HotelReservation/HotelCardDialogListing/index.tsx
@@ -5,13 +5,7 @@ import { useCallback, useEffect, useRef } from "react"
 import HotelCardDialog from "../HotelCardDialog"
 import { getHotelPins } from "./utils"
 
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
-
-interface HotelCardDialogListingProps {
-  hotels: HotelData[]
-  activeCard: string | null | undefined
-  onActiveCardChange: (hotelName: string | null) => void
-}
+import type { HotelCardDialogListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 export default function HotelCardDialogListing({
   hotels,
@@ -20,6 +14,7 @@ export default function HotelCardDialogListing({
 }: HotelCardDialogListingProps) {
   const hotelsPinData = getHotelPins(hotels)
   const activeCardRef = useRef<HTMLDivElement | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -36,26 +31,36 @@ export default function HotelCardDialogListing({
   )
 
   useEffect(() => {
-    const observer = new IntersectionObserver(handleIntersection, {
+    observerRef.current = new IntersectionObserver(handleIntersection, {
       root: null,
-      threshold: 0.5, // Adjust threshold as needed
+      threshold: 0.5,
     })
 
     const elements = document.querySelectorAll("[data-name]")
-    elements.forEach((el) => observer.observe(el))
+    elements.forEach((el) => observerRef.current?.observe(el))
 
     return () => {
-      elements.forEach((el) => observer.unobserve(el))
+      elements.forEach((el) => observerRef.current?.unobserve(el))
+      observerRef.current?.disconnect()
     }
   }, [handleIntersection])
 
   useEffect(() => {
     if (activeCardRef.current) {
+      // Temporarily disconnect the observer
+      observerRef.current?.disconnect()
+
       activeCardRef.current.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
         inline: "center",
       })
+
+      // Reconnect the observer after scrolling
+      const elements = document.querySelectorAll("[data-name]")
+      setTimeout(() => {
+        elements.forEach((el) => observerRef.current?.observe(el))
+      }, 500)
     }
   }, [activeCard])
 
@@ -73,7 +78,7 @@ export default function HotelCardDialogListing({
               <HotelCardDialog
                 data={data}
                 isOpen={!!activeCard}
-                handleClose={() => {}}
+                handleClose={() => onActiveCardChange(null)}
               />
             </div>
           )
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
index f92ec1895..21b804306 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx
@@ -3,6 +3,7 @@ import { APIProvider } from "@vis.gl/react-google-maps"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
 import { selectHotel } from "@/constants/routes/hotelReservation"
 
@@ -12,6 +13,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
 import HotelListing from "./HotelListing"
+import { getCentralCoordinates } from "./utils"
 
 import styles from "./selectHotelMap.module.css"
 
@@ -19,19 +21,33 @@ import { SelectHotelMapProps } from "@/types/components/hotelReservation/selectH
 
 export default function SelectHotelMap({
   apiKey,
-  coordinates,
   hotelPins,
   mapId,
-  isModal,
   hotels,
 }: SelectHotelMapProps) {
   const searchParams = useSearchParams()
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
+  const isAboveMobile = useMediaQuery("(min-width: 768px)")
   const [activeHotelPin, setActiveHotelPin] = useState<string | null>(null)
   const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
 
+  const centralCoordinates = getCentralCoordinates(hotelPins)
+
+  const coordinates = isAboveMobile
+    ? centralCoordinates
+    : { ...centralCoordinates, lat: centralCoordinates.lat - 0.006 }
+
+  const selectHotelParams = new URLSearchParams(searchParams.toString())
+  const selectedHotel = selectHotelParams.get("selectedHotel")
+
+  useEffect(() => {
+    if (selectedHotel) {
+      setActiveHotelPin(selectedHotel)
+    }
+  }, [selectedHotel])
+
   useEffect(() => {
     const hotelListingElement = document.querySelector(
       `.${styles.listingContainer}`
@@ -54,10 +70,6 @@ export default function SelectHotelMap({
     hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
   }
 
-  function handleModalDismiss() {
-    router.back()
-  }
-
   function handlePageRedirect() {
     router.push(`${selectHotel[lang]}?${searchParams.toString()}`)
   }
@@ -68,7 +80,7 @@ export default function SelectHotelMap({
       size="small"
       theme="base"
       className={styles.closeButton}
-      onClick={isModal ? handleModalDismiss : handlePageRedirect}
+      onClick={handlePageRedirect}
     >
       <CloseIcon color="burgundy" />
       {intl.formatMessage({ id: "Close the map" })}
@@ -84,7 +96,7 @@ export default function SelectHotelMap({
               size="small"
               variant="icon"
               wrapping
-              onClick={isModal ? handleModalDismiss : handlePageRedirect}
+              onClick={handlePageRedirect}
               className={styles.filterContainerCloseButton}
             >
               <CloseLargeIcon />
diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts b/components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts
new file mode 100644
index 000000000..7a4c32ecc
--- /dev/null
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts
@@ -0,0 +1,17 @@
+import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
+
+export function getCentralCoordinates(hotels: HotelPin[]) {
+  const centralCoordinates = hotels.reduce(
+    (acc, pin) => {
+      acc.lat += pin.coordinates.lat
+      acc.lng += pin.coordinates.lng
+      return acc
+    },
+    { lat: 0, lng: 0 }
+  )
+
+  centralCoordinates.lat /= hotels.length
+  centralCoordinates.lng /= hotels.length
+
+  return centralCoordinates
+}
diff --git a/hooks/useMediaQuery.ts b/hooks/useMediaQuery.ts
deleted file mode 100644
index bbb9eabac..000000000
--- a/hooks/useMediaQuery.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect, useState } from "react"
-
-function useMediaQuery(query: string) {
-  const [isMatch, setIsMatch] = useState(false)
-
-  useEffect(() => {
-    const media = window.matchMedia(query)
-    if (media.matches !== isMatch) {
-      setIsMatch(media.matches)
-    }
-
-    const listener = () => setIsMatch(media.matches)
-    media.addEventListener("change", listener)
-
-    return () => media.removeEventListener("change", listener)
-  }, [isMatch, query])
-
-  return isMatch
-}
-
-export default useMediaQuery
diff --git a/package-lock.json b/package-lock.json
index 766d5cb95..a2d63c0f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -53,6 +53,7 @@
         "server-only": "^0.0.1",
         "sonner": "^1.5.0",
         "superjson": "^2.2.1",
+        "usehooks-ts": "3.1.0",
         "zod": "^3.22.4",
         "zustand": "^4.5.2"
       },
@@ -14703,7 +14704,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.isempty": {
@@ -19454,6 +19454,20 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
+      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index fa08f8495..4afcb9bf1 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "server-only": "^0.0.1",
     "sonner": "^1.5.0",
     "superjson": "^2.2.1",
+    "usehooks-ts": "3.1.0",
     "zod": "^3.22.4",
     "zustand": "^4.5.2"
   },
diff --git a/types/components/hotelReservation/selectHotel/map.ts b/types/components/hotelReservation/selectHotel/map.ts
index b913be9b1..12d51e292 100644
--- a/types/components/hotelReservation/selectHotel/map.ts
+++ b/types/components/hotelReservation/selectHotel/map.ts
@@ -18,10 +18,8 @@ export interface HotelListingProps {
 
 export interface SelectHotelMapProps {
   apiKey: string
-  coordinates: Coordinates
   hotelPins: HotelPin[]
   mapId: string
-  isModal: boolean
   hotels: HotelData[]
 }
 
@@ -53,3 +51,9 @@ export interface HotelCardDialogProps {
   data: HotelPin
   handleClose: (event: { stopPropagation: () => void }) => void
 }
+
+export interface HotelCardDialogListingProps {
+  hotels: HotelData[]
+  activeCard: string | null | undefined
+  onActiveCardChange: (hotelName: string | null) => void
+}

From 79e3aca089a817a99857871f9c4ecf351d6608dc Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 12 Nov 2024 15:11:31 +0100
Subject: [PATCH 4/6] feat(SW-344): UI-fixes on hotel card dialog

---
 .../HotelCardDialog/hotelCardDialog.module.css       |  9 +++++++--
 .../HotelReservation/HotelCardDialog/index.tsx       | 12 ++++++++----
 components/TempDesignSystem/Chip/chip.module.css     |  5 +++++
 components/TempDesignSystem/Chip/variants.ts         |  1 +
 4 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css b/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
index dce743fa1..7a55be6ca 100644
--- a/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
+++ b/components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css
@@ -18,6 +18,12 @@
   position: relative;
 }
 
+.name {
+  height: 48px;
+  display: flex;
+  align-items: center;
+}
+
 .closeIcon {
   position: absolute;
   top: 7px;
@@ -52,7 +58,7 @@
 .facilities {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--Spacing-x1);
+  gap: 0 var(--Spacing-x1);
 }
 
 .facilitiesItem {
@@ -67,7 +73,6 @@
   background: var(--Base-Surface-Secondary-light-Normal);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
 }
 
 .perNight {
diff --git a/components/HotelReservation/HotelCardDialog/index.tsx b/components/HotelReservation/HotelCardDialog/index.tsx
index 91ce9e548..6fa212af2 100644
--- a/components/HotelReservation/HotelCardDialog/index.tsx
+++ b/components/HotelReservation/HotelCardDialog/index.tsx
@@ -52,20 +52,24 @@ export default function HotelCardDialog({
         <div className={styles.imageContainer}>
           <Image src={firstImage} alt={altText} fill />
           <div className={styles.tripAdvisor}>
-            <Chip intent="primary" className={styles.tripAdvisor}>
-              <TripAdvisorIcon color="white" />
+            <Chip intent="secondary" className={styles.tripAdvisor}>
+              <TripAdvisorIcon color="burgundy" />
               {ratings}
             </Chip>
           </div>
         </div>
         <div className={styles.content}>
-          <Body textTransform="bold">{name}</Body>
+          <div className={styles.name}>
+            <Body textTransform="bold">{name}</Body>
+          </div>
           <div className={styles.facilities}>
             {amenities.map((facility) => {
               const IconComponent = mapFacilityToIcon(facility.id)
               return (
                 <div className={styles.facilitiesItem} key={facility.id}>
-                  {IconComponent && <IconComponent color="grey80" />}
+                  {IconComponent && (
+                    <IconComponent width={16} height={16} color="grey80" />
+                  )}
                   <Caption color="uiTextMediumContrast">
                     {facility.name}
                   </Caption>
diff --git a/components/TempDesignSystem/Chip/chip.module.css b/components/TempDesignSystem/Chip/chip.module.css
index dbfb0e98b..efebaee95 100644
--- a/components/TempDesignSystem/Chip/chip.module.css
+++ b/components/TempDesignSystem/Chip/chip.module.css
@@ -12,3 +12,8 @@ div.chip {
   background-color: var(--Scandic-Red-90);
   color: var(--Primary-Dark-On-Surface-Accent);
 }
+
+.secondary {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  color: var(--Primary-Light-On-Surface-Text);
+}
diff --git a/components/TempDesignSystem/Chip/variants.ts b/components/TempDesignSystem/Chip/variants.ts
index a17e6d98d..e9d30cd64 100644
--- a/components/TempDesignSystem/Chip/variants.ts
+++ b/components/TempDesignSystem/Chip/variants.ts
@@ -6,6 +6,7 @@ export const chipVariants = cva(styles.chip, {
   variants: {
     intent: {
       primary: styles.primary,
+      secondary: styles.secondary,
     },
     variant: {
       default: styles.default,

From 32429d0a57edac783177bef0c3d2bf9ca6d04bd8 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 12 Nov 2024 15:14:41 +0100
Subject: [PATCH 5/6] feat(SW-344): Updated height on card wrapper

---
 .../SelectHotelMap/HotelListing/hotelListing.module.css         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
index 3ba5cf884..962684640 100644
--- a/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
+++ b/components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css
@@ -11,7 +11,7 @@
   left: 0;
   right: 0;
   z-index: 10;
-  height: 350px;
+  height: 280px;
   gap: var(--Spacing-x1);
 }
 

From 3d235b317694ad8002bb2b6df0daea2176053b05 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 12 Nov 2024 15:26:57 +0100
Subject: [PATCH 6/6] feat(SW-344): Fixed button in card

---
 .../HotelReservation/HotelCard/index.tsx       |  4 +++-
 .../HotelReservation/HotelCardDialog/index.tsx | 18 ++++++++++++++++--
 .../HotelCardDialogListing/utils.ts            |  1 +
 .../hotelReservation/selectHotel/map.ts        |  1 +
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index f72945b6d..6d462c993 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -2,6 +2,7 @@
 import { useParams } from "next/dist/client/components/navigation"
 import { useIntl } from "react-intl"
 
+import { Lang } from "@/constants/languages"
 import { selectHotelMap } from "@/constants/routes/hotelReservation"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
@@ -30,6 +31,7 @@ export default function HotelCard({
   onHotelCardHover,
 }: HotelCardProps) {
   const params = useParams()
+  const lang = params.lang as Lang
   const intl = useIntl()
 
   const { hotelData } = hotel
@@ -86,7 +88,7 @@ export default function HotelCard({
         </Footnote>
         <Link
           className={styles.addressMobile}
-          href={`${selectHotelMap[params.lang as keyof typeof selectHotelMap]}?selectedHotel=${hotelData.name}`}
+          href={`${selectHotelMap[lang]}?selectedHotel=${hotelData.name}`}
           keepSearchParams
           variant="underscored"
         >
diff --git a/components/HotelReservation/HotelCardDialog/index.tsx b/components/HotelReservation/HotelCardDialog/index.tsx
index 6fa212af2..16d1ce860 100644
--- a/components/HotelReservation/HotelCardDialog/index.tsx
+++ b/components/HotelReservation/HotelCardDialog/index.tsx
@@ -1,13 +1,18 @@
 "use client"
 
+import { useParams } from "next/navigation"
 import { useIntl } from "react-intl"
 
+import { Lang } from "@/constants/languages"
+import { selectRate } from "@/constants/routes/hotelReservation"
+
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { CloseLargeIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
 import Image from "@/components/Image"
 import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
+import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -21,6 +26,8 @@ export default function HotelCardDialog({
   isOpen,
   handleClose,
 }: HotelCardDialogProps) {
+  const params = useParams()
+  const lang = params.lang as Lang
   const intl = useIntl()
 
   if (!data) {
@@ -94,8 +101,15 @@ export default function HotelCardDialog({
               </Subtitle>
             )}
           </div>
-          <Button size="small" theme="base" className={styles.button}>
-            {intl.formatMessage({ id: "See rooms" })}
+
+          <Button asChild theme="base" size="small" className={styles.button}>
+            <Link
+              href={`${selectRate[lang]}?hotel=${data.operaId}`}
+              color="none"
+              keepSearchParams
+            >
+              {intl.formatMessage({ id: "See rooms" })}
+            </Link>
           </Button>
         </div>
       </div>
diff --git a/components/HotelReservation/HotelCardDialogListing/utils.ts b/components/HotelReservation/HotelCardDialogListing/utils.ts
index b63b9b7ce..6183c5da4 100644
--- a/components/HotelReservation/HotelCardDialogListing/utils.ts
+++ b/components/HotelReservation/HotelCardDialogListing/utils.ts
@@ -17,5 +17,6 @@ export function getHotelPins(hotels: HotelData[]): HotelPin[] {
     ],
     amenities: hotel.hotelData.detailedFacilities.slice(0, 3),
     ratings: hotel.hotelData.ratings?.tripAdvisor.rating ?? null,
+    operaId: hotel.hotelData.operaId,
   }))
 }
diff --git a/types/components/hotelReservation/selectHotel/map.ts b/types/components/hotelReservation/selectHotel/map.ts
index 12d51e292..233fc2105 100644
--- a/types/components/hotelReservation/selectHotel/map.ts
+++ b/types/components/hotelReservation/selectHotel/map.ts
@@ -38,6 +38,7 @@ export type HotelPin = {
   }[]
   amenities: Filter[]
   ratings: number | null
+  operaId: string
 }
 
 export interface HotelListingMapContentProps {