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

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({
-  activeHotelPin,
-  hotelPins,
-  onActiveHotelPinChange,
-}: HotelListingMapContentProps) {
+function HotelListingMapContent({ hotelPins }: 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) {
-          onActiveHotelPinChange(null)
+        if (activeHotelPin && setActiveHotelPin) {
+          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 && (
-          <HotelListingMapContent
-            activeHotelPin={activeHotelPin}
-            hotelPins={hotelPins}
-            onActiveHotelPinChange={onActiveHotelPinChange}
-          />
-        )}
+        {hotelPins && <HotelListingMapContent hotelPins={hotelPins} />}
         {pointsOfInterest && (
           <HotelMapContent
             coordinates={coordinates}