fix(SW-983): Fixed bug with hotel card in map

components/Maps/InteractiveMap/HotelListingMapContent/index.tsx

@@ -2,11 +2,10 @@ import {
   AdvancedMarker,
   AdvancedMarkerAnchorPoint,
 } from "@vis.gl/react-google-maps"
-import { useRef, useState } from "react"
+import { memo, useCallback, useState } from "react"
 
 import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import useClickOutside from "@/hooks/useClickOutside"
 
 import HotelMarker from "../../Markers/HotelMarker"
 
@@ -14,33 +13,45 @@ import styles from "./hotelListingMapContent.module.css"
 
 import type { HotelListingMapContentProps } from "@/types/components/hotelReservation/selectHotel/map"
 
-export default function HotelListingMapContent({
+function HotelListingMapContent({
   activeHotelPin,
   hotelPins,
   onActiveHotelPinChange,
 }: HotelListingMapContentProps) {
   const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)
-  const dialogRef = useRef<HTMLDivElement>(null)
 
-  function toggleActiveHotelPin(pinName: string | null) {
-    if (onActiveHotelPinChange) {
-      onActiveHotelPinChange(activeHotelPin === pinName ? null : pinName)
-      setHoveredHotelPin(null)
-    }
-  }
+  const toggleActiveHotelPin = useCallback(
+    (pinName: string | null) => {
+      if (onActiveHotelPinChange) {
+        const newActivePin = activeHotelPin === pinName ? null : pinName
+        onActiveHotelPinChange(newActivePin)
+        if (newActivePin === null) {
+          setHoveredHotelPin(null)
+        }
+      }
+    },
+    [activeHotelPin, onActiveHotelPinChange]
+  )
 
-  function isPinActiveOrHovered(pinName: string) {
-    return activeHotelPin === pinName || hoveredHotelPin === pinName
-  }
-
-  useClickOutside(dialogRef, isPinActiveOrHovered(activeHotelPin ?? ""), () => {
-    toggleActiveHotelPin(null)
-  })
+  const handleHover = useCallback(
+    (pinName: string | null) => {
+      if (pinName !== null && activeHotelPin !== pinName) {
+        setHoveredHotelPin(pinName)
+        if (activeHotelPin && onActiveHotelPinChange) {
+          onActiveHotelPinChange(null)
+        }
+      } else if (pinName === null) {
+        setHoveredHotelPin(null)
+      }
+    },
+    [activeHotelPin, onActiveHotelPinChange]
+  )
 
   return (
     <div>
       {hotelPins.map((pin) => {
-        const isActiveOrHovered = isPinActiveOrHovered(pin.name)
+        const isActiveOrHovered =
+          activeHotelPin === pin.name || hoveredHotelPin === pin.name
         return (
           <AdvancedMarker
             key={pin.name}
@@ -48,15 +59,11 @@ export default function HotelListingMapContent({
             position={pin.coordinates}
             anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
             zIndex={isActiveOrHovered ? 2 : 0}
-            onMouseEnter={() => setHoveredHotelPin(pin.name)}
-            onMouseLeave={() => setHoveredHotelPin(null)}
-            onClick={() => {
-              toggleActiveHotelPin(
-                activeHotelPin === pin.name ? null : pin.name
-              )
-            }}
+            onMouseEnter={() => handleHover(pin.name)}
+            onMouseLeave={() => handleHover(null)}
+            onClick={() => toggleActiveHotelPin(pin.name)}
           >
-            <div className={styles.dialogContainer} ref={dialogRef}>
+            <div className={styles.dialogContainer}>
               <HotelCardDialog
                 isOpen={isActiveOrHovered}
                 handleClose={(event: { stopPropagation: () => void }) => {
@@ -92,3 +99,5 @@ export default function HotelListingMapContent({
     </div>
   )
 }
+
+export default memo(HotelListingMapContent)