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

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 selectHotelParams = new URLSearchParams(searchParams.toString())
-  const selectedHotel = selectHotelParams.get("selectedHotel")
+  const { activeHotelCard, activeHotelPin } = useHotelsMapStore()
 
   const coordinates = isAboveMobile
     ? cityCoordinates
@@ -56,13 +51,7 @@ export default function SelectHotelMap({
         activeElement.scrollIntoView({ behavior: "smooth", block: "nearest" })
       }
     }
-  }, [activeHotelPin])
-
-  useEffect(() => {
-    if (selectedHotel) {
-      setActiveHotelPin(selectedHotel)
-    }
-  }, [selectedHotel])
+  }, [activeHotelCard, activeHotelPin])
 
   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
-            hotels={hotels}
-            activeHotelPin={activeHotelPin}
-            setActiveHotelPin={setActiveHotelPin}
-          />
+          <HotelListing hotels={hotels} />
           {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>