Merged in feat/SW-344-hotel-map-pins-mobile (pull request #880)

Feat/SW-344 hotel map pins mobile

Approved-by: Niclas Edenvin

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 } from "../../utils"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
@@ -61,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>

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts

@@ -87,38 +87,3 @@ export function getFiltersFromHotels(hotels: HotelData[]): CategorizedFilters {
     { facilityFilters: [], surroundingsFilters: [] }
   )
 }
-
-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) => {
-      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
-}

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"
 

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"

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;
+  }
 }

components/HotelReservation/HotelCard/index.tsx

@@ -1,6 +1,10 @@
 "use client"
+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"
 import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
@@ -26,6 +30,8 @@ export default function HotelCard({
   state = "default",
   onHotelCardHover,
 }: HotelCardProps) {
+  const params = useParams()
+  const lang = params.lang as Lang
   const intl = useIntl()
 
   const { hotelData } = hotel
@@ -74,9 +80,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[lang]}?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>

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 {

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"
@@ -17,13 +22,15 @@ 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 params = useParams()
+  const lang = params.lang as Lang
   const intl = useIntl()
 
-  if (!pin) {
+  if (!data) {
     return null
   }
 
@@ -35,7 +42,7 @@ export default function HotelCardDialog({
     amenities,
     images,
     ratings,
-  } = pin
+  } = data
 
   const firstImage = images[0]?.imageSizes?.small
   const altText = images[0]?.metaData?.altText
@@ -52,20 +59,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>
@@ -90,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>

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { useCallback, useEffect, useRef } from "react"
+
+import HotelCardDialog from "../HotelCardDialog"
+import { getHotelPins } from "./utils"
+
+import type { HotelCardDialogListingProps } from "@/types/components/hotelReservation/selectHotel/map"
+
+export default function HotelCardDialogListing({
+  hotels,
+  activeCard,
+  onActiveCardChange,
+}: HotelCardDialogListingProps) {
+  const hotelsPinData = getHotelPins(hotels)
+  const activeCardRef = useRef<HTMLDivElement | null>(null)
+  const observerRef = useRef<IntersectionObserver | 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(() => {
+    observerRef.current = new IntersectionObserver(handleIntersection, {
+      root: null,
+      threshold: 0.5,
+    })
+
+    const elements = document.querySelectorAll("[data-name]")
+    elements.forEach((el) => observerRef.current?.observe(el))
+
+    return () => {
+      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])
+
+  return (
+    <>
+      {hotelsPinData?.length &&
+        hotelsPinData.map((data) => {
+          const isActive = data.name === activeCard
+          return (
+            <div
+              key={data.name}
+              ref={isActive ? activeCardRef : null}
+              data-name={data.name}
+            >
+              <HotelCardDialog
+                data={data}
+                isOpen={!!activeCard}
+                handleClose={() => onActiveCardChange(null)}
+              />
+            </div>
+          )
+        })}
+    </>
+  )
+}

components/HotelReservation/HotelCardDialogListing/utils.ts

@@ -0,0 +1,22 @@
+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,
+    operaId: hotel.hotelData.operaId,
+  }))
+}

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: 280px;
+  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;
+  }
 }

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"
@@ -10,16 +11,25 @@ import type { HotelListingProps } from "@/types/components/hotelReservation/sele
 export default function HotelListing({
   hotels,
   activeHotelPin,
-  onHotelCardHover,
+  setActiveHotelPin,
 }: 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={setActiveHotelPin}
+        />
+      </div>
+      <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
+        <HotelCardDialogListing
+          hotels={hotels}
+          activeCard={activeHotelPin}
+          onActiveCardChange={setActiveHotelPin}
+        />
+      </div>
+    </>
   )
 }

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 />
@@ -95,7 +107,7 @@ export default function SelectHotelMap({
           <HotelListing
             hotels={hotels}
             activeHotelPin={activeHotelPin}
-            onHotelCardHover={setActiveHotelPin}
+            setActiveHotelPin={setActiveHotelPin}
           />
           {showBackToTop && (
             <Button

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
+}

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;
+  }
+}

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 : ""}`}
             >

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);
+}

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,

hooks/useMediaQuery.ts

@@ -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

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",

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"
   },

types/components/hotelReservation/selectHotel/map.ts

@@ -13,15 +13,13 @@ 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 {
   apiKey: string
-  coordinates: Coordinates
   hotelPins: HotelPin[]
   mapId: string
-  isModal: boolean
   hotels: HotelData[]
 }
 
@@ -40,6 +38,7 @@ export type HotelPin = {
   }[]
   amenities: Filter[]
   ratings: number | null
+  operaId: string
 }
 
 export interface HotelListingMapContentProps {
@@ -50,6 +49,12 @@ export interface HotelListingMapContentProps {
 
 export interface HotelCardDialogProps {
   isOpen: boolean
-  pin: HotelPin
+  data: HotelPin
   handleClose: (event: { stopPropagation: () => void }) => void
 }
+
+export interface HotelCardDialogListingProps {
+  hotels: HotelData[]
+  activeCard: string | null | undefined
+  onActiveCardChange: (hotelName: string | null) => void
+}