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

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, () => {
-    onActiveCardChange(null)
-  })
+  function handleClose() {
+    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}
-                handleClose={() => onActiveCardChange(null)}
+                isOpen={!!activeHotelCard}
+                handleClose={handleClose}
               />
             </div>
           )