Merged in fix/SW-960-tap-outside-card-map-mobile (pull request #958)

fix(SW-960) close hotel card in map on click outside (mobile)

Approved-by: Niclas Edenvin

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -60,7 +60,7 @@ export default function HotelCardDialogListing({
       const elements = document.querySelectorAll("[data-name]")
       setTimeout(() => {
         elements.forEach((el) => observerRef.current?.observe(el))
-      }, 500)
+      }, 1000)
     }
   }, [activeCard])
 

components/Maps/InteractiveMap/HotelListingMapContent/index.tsx

@@ -2,10 +2,11 @@ import {
   AdvancedMarker,
   AdvancedMarkerAnchorPoint,
 } from "@vis.gl/react-google-maps"
-import { useState } from "react"
+import { useRef, 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"
 
@@ -19,6 +20,7 @@ export default function HotelListingMapContent({
   onActiveHotelPinChange,
 }: HotelListingMapContentProps) {
   const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)
+  const dialogRef = useRef<HTMLDivElement>(null)
 
   function toggleActiveHotelPin(pinName: string | null) {
     if (onActiveHotelPinChange) {
@@ -31,6 +33,10 @@ export default function HotelListingMapContent({
     return activeHotelPin === pinName || hoveredHotelPin === pinName
   }
 
+  useClickOutside(dialogRef, isPinActiveOrHovered(activeHotelPin ?? ""), () => {
+    toggleActiveHotelPin(null)
+  })
+
   return (
     <div>
       {hotelPins.map((pin) => {
@@ -44,13 +50,13 @@ export default function HotelListingMapContent({
             zIndex={isActiveOrHovered ? 2 : 0}
             onMouseEnter={() => setHoveredHotelPin(pin.name)}
             onMouseLeave={() => setHoveredHotelPin(null)}
-            onClick={() =>
+            onClick={() => {
               toggleActiveHotelPin(
                 activeHotelPin === pin.name ? null : pin.name
               )
-            }
+            }}
           >
-            <div className={styles.dialogContainer}>
+            <div className={styles.dialogContainer} ref={dialogRef}>
               <HotelCardDialog
                 isOpen={isActiveOrHovered}
                 handleClose={(event: { stopPropagation: () => void }) => {