fix(SW-1111) refactor state of active hotel card and hotel pin

components/HotelReservation/HotelCard/index.tsx

@@ -4,7 +4,8 @@ import { memo, useCallback } from "react"
 import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
-import { selectHotelMap, selectRate } from "@/constants/routes/hotelReservation"
+import { selectRate } from "@/constants/routes/hotelReservation"
+import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
@@ -32,26 +33,27 @@ function HotelCard({
   hotel,
   type = HotelCardListingTypeEnum.PageListing,
   state = "default",
-  onHotelCardHover,
 }: HotelCardProps) {
   const params = useParams()
   const lang = params.lang as Lang
   const intl = useIntl()
+  const { setActiveHotelPin, setActiveHotelCard } = useHotelsMapStore()
 
   const { hotelData } = hotel
   const { price } = hotel
 
   const handleMouseEnter = useCallback(() => {
-    if (onHotelCardHover && hotelData) {
+    if (hotelData) {
-      onHotelCardHover(hotelData.name)
+      setActiveHotelPin(hotelData.name)
     }
-  }, [onHotelCardHover, hotelData])
+  }, [setActiveHotelPin, hotelData])
 
   const handleMouseLeave = useCallback(() => {
-    if (onHotelCardHover) {
+    if (hotelData) {
-      onHotelCardHover(null)
+      setActiveHotelPin(null)
+      setActiveHotelCard(null)
     }
-  }, [onHotelCardHover])
+  }, [setActiveHotelPin, hotelData, setActiveHotelCard])
 
   if (!hotel || !hotelData) return null
 

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useRef } from "react"
 import { useMediaQuery } from "usehooks-ts"
 
+import { useHotelsMapStore } from "@/stores/hotels-map"
+
 import useClickOutside from "@/hooks/useClickOutside"
 
 import HotelCardDialog from "../HotelCardDialog"
@@ -14,18 +16,21 @@ import type { HotelCardDialogListingProps } from "@/types/components/hotelReserv
 
 export default function HotelCardDialogListing({
   hotels,
-  activeCard,
-  onActiveCardChange,
 }: HotelCardDialogListingProps) {
   const hotelsPinData = hotels ? 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)")
+  const { activeHotelCard, setActiveHotelCard, setActiveHotelPin } =
+    useHotelsMapStore()
 
-  useClickOutside(dialogRef, !!activeCard && isMobile, () => {
+  function handleClose() {
-    onActiveCardChange(null)
+    setActiveHotelCard(null)
-  })
+    setActiveHotelPin(null)
+  }
+
+  useClickOutside(dialogRef, !!activeHotelCard && isMobile, handleClose)
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -33,12 +38,12 @@ export default function HotelCardDialogListing({
         if (entry.isIntersecting) {
           const cardName = entry.target.getAttribute("data-name")
           if (cardName) {
-            onActiveCardChange(cardName)
+            setActiveHotelCard(cardName)
           }
         }
       })
     },
-    [onActiveCardChange]
+    [setActiveHotelCard]
   )
 
   useEffect(() => {
@@ -73,13 +78,13 @@ export default function HotelCardDialogListing({
         elements.forEach((el) => observerRef.current?.observe(el))
       }, 1000)
     }
-  }, [activeCard])
+  }, [activeHotelCard])
 
   return (
     <div className={styles.hotelCardDialogListing} ref={dialogRef}>
       {!!hotelsPinData?.length &&
         hotelsPinData.map((data) => {
-          const isActive = data.name === activeCard
+          const isActive = data.name === activeHotelCard
           return (
             <div
               key={data.name}
@@ -88,8 +93,8 @@ export default function HotelCardDialogListing({
             >
               <HotelCardDialog
                 data={data}
-                isOpen={!!activeCard}
+                isOpen={!!activeHotelCard}
-                handleClose={() => onActiveCardChange(null)}
+                handleClose={handleClose}
               />
             </div>
           )

components/HotelReservation/HotelCardListing/index.tsx

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { useHotelFilterStore } from "@/stores/hotel-filters"
+import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import Alert from "@/components/TempDesignSystem/Alert"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
@@ -24,14 +25,13 @@ import { AlertTypeEnum } from "@/types/enums/alert"
 export default function HotelCardListing({
   hotelData,
   type = HotelCardListingTypeEnum.PageListing,
-  activeCard,
-  onHotelCardHover,
 }: HotelCardListingProps) {
   const searchParams = useSearchParams()
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
   const setResultCount = useHotelFilterStore((state) => state.setResultCount)
   const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
   const intl = useIntl()
+  const { activeHotelCard } = useHotelsMapStore()
 
   const sortBy = useMemo(
     () => searchParams.get("sort") ?? DEFAULT_SORT,
@@ -111,13 +111,16 @@ export default function HotelCardListing({
         hotels.map((hotel) => (
           <div
             key={hotel.hotelData.operaId}
-            data-active={hotel.hotelData.name === activeCard ? "true" : "false"}
+            data-active={
+              hotel.hotelData.name === activeHotelCard ? "true" : "false"
+            }
           >
             <HotelCard
               hotel={hotel}
               type={type}
-              state={hotel.hotelData.name === activeCard ? "active" : "default"}
+              state={
-              onHotelCardHover={onHotelCardHover}
+                hotel.hotelData.name === activeHotelCard ? "active" : "default"
+              }
             />
           </div>
         ))

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { useHotelsMapStore } from "@/stores/hotels-map"
+
 import HotelCardDialogListing from "@/components/HotelReservation/HotelCardDialogListing"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 
@@ -8,27 +10,18 @@ import styles from "./hotelListing.module.css"
 import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { HotelListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
-export default function HotelListing({
+export default function HotelListing({ hotels }: HotelListingProps) {
-  hotels,
+  const { activeHotelPin } = useHotelsMapStore()
-  activeHotelPin,
-  setActiveHotelPin,
-}: HotelListingProps) {
   return (
     <>
       <div className={styles.hotelListing}>
         <HotelCardListing
           hotelData={hotels}
           type={HotelCardListingTypeEnum.MapListing}
-          activeCard={activeHotelPin}
-          onHotelCardHover={setActiveHotelPin}
         />
       </div>
       <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
-        <HotelCardDialogListing
+        <HotelCardDialogListing hotels={hotels} />
-          hotels={hotels}
-          activeCard={activeHotelPin}
-          onActiveCardChange={setActiveHotelPin}
-        />
       </div>
     </>
   )

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx

@@ -14,26 +14,18 @@ import type {
   HotelData,
   NullableHotelData,
 } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
-import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type { SelectHotelMapContainerProps } from "@/types/components/hotelReservation/selectHotel/map"
-import type { Location } from "@/types/trpc/routers/hotel/locations"
 
-function isHotelData(hotel: NullableHotelData): hotel is HotelData {
+function isValidHotelData(hotel: NullableHotelData): hotel is HotelData {
   return hotel !== null && hotel !== undefined
 }
 
-type Props = {
-  city: Location
-  searchParams: SelectHotelSearchParams
-  adultsInRoom: number
-  childrenInRoom: string | undefined
-}
-
 export async function SelectHotelMapContainer({
   city,
   searchParams,
   adultsInRoom,
   childrenInRoom,
-}: Props) {
+}: SelectHotelMapContainerProps) {
   const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
   const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
 
@@ -47,15 +39,9 @@ export async function SelectHotelMapContainer({
     })
   )
 
-  const [hotels, hotelsError] = await fetchAvailableHotelsPromise
+  const [hotels] = await fetchAvailableHotelsPromise
 
-  if (hotelsError) {
+  const validHotels = hotels?.filter(isValidHotelData) || []
-    // TODO: show proper error component
-    console.error("[SelectHotelMapContainer] unable to fetch hotels")
-    return null
-  }
-
-  const validHotels = hotels?.filter(isHotelData) || []
 
   const hotelPins = getHotelPins(validHotels)
   const filterList = getFiltersFromHotels(validHotels)

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css

@@ -1,15 +1,12 @@
 .container {
   max-width: var(--max-width);
   height: 100%;
+  display: flex;
+  width: 100%;
 }
 
 .listingContainer {
-  background-color: var(--Base-Surface-Secondary-light-Normal);
+  display: none;
-  padding: var(--Spacing-x3) var(--Spacing-x4);
-  overflow-y: auto;
-  max-width: 505px;
-  position: relative;
-  height: 100%;
 }
 
 .skeletonContainer {
@@ -27,7 +24,20 @@
   width: 440px;
 }
 
+.mapContainer {
+  flex: 1;
+}
+
 @media (min-width: 768px) {
+  .listingContainer {
+    background-color: var(--Base-Surface-Secondary-light-Normal);
+    padding: var(--Spacing-x3) var(--Spacing-x4);
+    overflow-y: auto;
+    max-width: 505px;
+    position: relative;
+    height: 100%;
+    display: block;
+  }
   .skeletonContainer {
     display: flex;
   }

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.tsx

@@ -1,3 +1,5 @@
+import SkeletonShimmer from "@/components/SkeletonShimmer"
+
 import { RoomCardSkeleton } from "../../SelectRate/RoomSelection/RoomCard/RoomCardSkeleton"
 
 import styles from "./SelectHotelMapContainerSkeleton.module.css"
@@ -18,6 +20,9 @@ export async function SelectHotelMapContainerSkeleton({ count = 2 }: Props) {
           ))}
         </div>
       </div>
+      <div className={styles.mapContainer}>
+        <SkeletonShimmer width={"100%"} height="100%" />
+      </div>
     </div>
   )
 }

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -1,13 +1,13 @@
 "use client"
 
 import { APIProvider } from "@vis.gl/react-google-maps"
-import { useSearchParams } from "next/navigation"
 import { useEffect, useMemo, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
 import { selectHotel } from "@/constants/routes/hotelReservation"
 import { useHotelFilterStore } from "@/stores/hotel-filters"
+import { useHotelsMapStore } from "@/stores/hotels-map"
 
 import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
@@ -31,18 +31,13 @@ export default function SelectHotelMap({
   filterList,
   cityCoordinates,
 }: SelectHotelMapProps) {
-  const searchParams = useSearchParams()
-
   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 listingContainerRef = useRef<HTMLDivElement | null>(null)
   const activeFilters = useHotelFilterStore((state) => state.activeFilters)
-
+  const { activeHotelCard, activeHotelPin } = useHotelsMapStore()
-  const selectHotelParams = new URLSearchParams(searchParams.toString())
-  const selectedHotel = selectHotelParams.get("selectedHotel")
 
   const coordinates = isAboveMobile
     ? cityCoordinates
@@ -56,13 +51,7 @@ export default function SelectHotelMap({
         activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" })
       }
     }
-  }, [activeHotelPin])
+  }, [activeHotelCard, activeHotelPin])
-
-  useEffect(() => {
-    if (selectedHotel) {
-      setActiveHotelPin(selectedHotel)
-    }
-  }, [selectedHotel])
 
   useEffect(() => {
     const hotelListingElement = document.querySelector(
@@ -96,8 +85,6 @@ export default function SelectHotelMap({
     [activeFilters, hotelPins]
   )
 
-  console.log("hotelPins", hotelPins)
-
   const closeButton = (
     <Button
       intent="inverted"
@@ -131,11 +118,7 @@ export default function SelectHotelMap({
             </Button>
             <FilterAndSortModal filters={filterList} />
           </div>
-          <HotelListing
+          <HotelListing hotels={hotels} />
-            hotels={hotels}
-            activeHotelPin={activeHotelPin}
-            setActiveHotelPin={setActiveHotelPin}
-          />
           {showBackToTop && (
             <BackToTopButton position="left" onClick={scrollToTop} />
           )}
@@ -144,8 +127,6 @@ export default function SelectHotelMap({
           closeButton={closeButton}
           coordinates={coordinates}
           hotelPins={filteredHotelPins}
-          activeHotelPin={activeHotelPin}
-          onActiveHotelPinChange={setActiveHotelPin}
           mapId={mapId}
         />
       </div>

components/Maps/InteractiveMap/HotelListingMapContent/index.tsx

@@ -4,6 +4,8 @@ import {
 } from "@vis.gl/react-google-maps"
 import { useCallback, useState } from "react"
 
+import { useHotelsMapStore } from "@/stores/hotels-map"
+
 import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
@@ -13,38 +15,39 @@ import styles from "./hotelListingMapContent.module.css"
 
 import type { HotelListingMapContentProps } from "@/types/components/hotelReservation/selectHotel/map"
 
-function HotelListingMapContent({
+function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
-  activeHotelPin,
-  hotelPins,
-  onActiveHotelPinChange,
-}: HotelListingMapContentProps) {
   const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)
+  const { activeHotelPin, setActiveHotelPin, setActiveHotelCard } =
+    useHotelsMapStore()
 
   const toggleActiveHotelPin = useCallback(
     (pinName: string | null) => {
-      if (onActiveHotelPinChange) {
+      if (setActiveHotelPin) {
         const newActivePin = activeHotelPin === pinName ? null : pinName
-        onActiveHotelPinChange(newActivePin)
+        setActiveHotelPin(newActivePin)
+        setActiveHotelCard(newActivePin)
         if (newActivePin === null) {
           setHoveredHotelPin(null)
+          setActiveHotelCard(null)
         }
       }
     },
-    [activeHotelPin, onActiveHotelPinChange]
+    [activeHotelPin, setActiveHotelPin, setActiveHotelCard]
   )
 
   const handleHover = useCallback(
     (pinName: string | null) => {
       if (pinName !== null && activeHotelPin !== pinName) {
         setHoveredHotelPin(pinName)
-        if (activeHotelPin && onActiveHotelPinChange) {
+        if (activeHotelPin && setActiveHotelPin) {
-          onActiveHotelPinChange(null)
+          setActiveHotelPin(null)
+          setActiveHotelCard(null)
         }
       } else if (pinName === null) {
         setHoveredHotelPin(null)
       }
     },
-    [activeHotelPin, onActiveHotelPinChange]
+    [activeHotelPin, setActiveHotelPin, setActiveHotelCard]
   )
 
   return (

components/Maps/InteractiveMap/index.tsx

@@ -17,11 +17,9 @@ export default function InteractiveMap({
   pointsOfInterest,
   activePoi,
   hotelPins,
-  activeHotelPin,
   mapId,
   closeButton,
   onActivePoiChange,
-  onActiveHotelPinChange,
 }: InteractiveMapProps) {
   const intl = useIntl()
   const map = useMap()
@@ -50,13 +48,7 @@ export default function InteractiveMap({
   return (
     <div className={styles.mapContainer}>
       <Map {...mapOptions}>
-        {hotelPins && (
+        {hotelPins && <HotelListingMapContent hotelPins={hotelPins} />}
-          <HotelListingMapContent
-            activeHotelPin={activeHotelPin}
-            hotelPins={hotelPins}
-            onActiveHotelPinChange={onActiveHotelPinChange}
-          />
-        )}
         {pointsOfInterest && (
           <HotelMapContent
             coordinates={coordinates}

stores/hotels-map.ts

@@ -0,0 +1,15 @@
+import { create } from "zustand"
+
+interface HotelsMapState {
+  activeHotelCard: string | null
+  activeHotelPin: string | null
+  setActiveHotelCard: (hotelCard: string | null) => void
+  setActiveHotelPin: (hotelPin: string | null) => void
+}
+
+export const useHotelsMapStore = create<HotelsMapState>((set) => ({
+  activeHotelCard: null,
+  activeHotelPin: null,
+  setActiveHotelCard: (hotelCard) => set({ activeHotelCard: hotelCard }),
+  setActiveHotelPin: (hotelPin) => set({ activeHotelPin: hotelPin }),
+}))

types/components/hotelPage/map/interactiveMap.ts

@@ -11,9 +11,7 @@ export interface InteractiveMapProps {
   pointsOfInterest?: PointOfInterest[]
   activePoi?: PointOfInterest["name"] | null
   hotelPins?: HotelPin[]
-  activeHotelPin?: HotelPin["name"] | null
   mapId: string
   closeButton: ReactElement
   onActivePoiChange?: (poi: PointOfInterest["name"] | null) => void
-  onActiveHotelPinChange?: (hotelPin: HotelPin["name"] | null) => void
 }

types/components/hotelReservation/selectHotel/hotelCardListingProps.ts

@@ -10,8 +10,6 @@ export enum HotelCardListingTypeEnum {
 export type HotelCardListingProps = {
   hotelData: HotelData[]
   type?: HotelCardListingTypeEnum
-  activeCard?: string | null
-  onHotelCardHover?: (hotelName: string | null) => void
 }
 
 export type HotelData = {

types/components/hotelReservation/selectHotel/hotelCardProps.ts

@@ -7,5 +7,4 @@ export type HotelCardProps = {
   hotel: HotelData
   type?: HotelCardListingTypeEnum
   state?: "default" | "active"
-  onHotelCardHover?: (hotelName: string | null) => void
 }

types/components/hotelReservation/selectHotel/map.ts

@@ -7,13 +7,13 @@ import {
 
 import { HotelData } from "./hotelCardListingProps"
 import { CategorizedFilters, Filter } from "./hotelFilters"
+import { SelectHotelSearchParams } from "./selectHotelSearchParams"
 
 import type { Coordinates } from "@/types/components/maps/coordinates"
+import { Location } from "@/types/trpc/routers/hotel/locations"
 
 export interface HotelListingProps {
   hotels: HotelData[]
-  activeHotelPin?: string | null
-  setActiveHotelPin: (hotelName: string | null) => void
 }
 
 export interface SelectHotelMapProps {
@@ -45,9 +45,7 @@ export type HotelPin = {
 }
 
 export interface HotelListingMapContentProps {
-  activeHotelPin?: HotelPin["name"] | null
   hotelPins: HotelPin[]
-  onActiveHotelPinChange?: (pinName: string | null) => void
 }
 
 export interface HotelCardDialogProps {
@@ -58,6 +56,11 @@ export interface HotelCardDialogProps {
 
 export interface HotelCardDialogListingProps {
   hotels: HotelData[] | null
-  activeCard: string | null | undefined
+}
-  onActiveCardChange: (hotelName: string | null) => void
+
+export type SelectHotelMapContainerProps = {
+  city: Location
+  searchParams: SelectHotelSearchParams
+  adultsInRoom: number
+  childrenInRoom: string | undefined
 }