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

components/HotelReservation/HotelCard/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 import { useParams } from "next/dist/client/components/navigation"
+import { memo, useCallback } from "react"
 import { useIntl } from "react-intl"
 
 import { Lang } from "@/constants/languages"
@@ -24,7 +25,7 @@ import styles from "./hotelCard.module.css"
 import { HotelCardListingTypeEnum } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
 
-export default function HotelCard({
+function HotelCard({
   hotel,
   type = HotelCardListingTypeEnum.PageListing,
   state = "default",
@@ -44,16 +45,17 @@ export default function HotelCard({
     state,
   })
 
-  const handleMouseEnter = () => {
+  const handleMouseEnter = useCallback(() => {
     if (onHotelCardHover) {
       onHotelCardHover(hotelData.name)
     }
-  }
-  const handleMouseLeave = () => {
+  }, [onHotelCardHover, hotelData.name])
+
+  const handleMouseLeave = useCallback(() => {
     if (onHotelCardHover) {
       onHotelCardHover(null)
     }
-  }
+  }, [onHotelCardHover])
 
   return (
     <article
@@ -137,3 +139,5 @@ export default function HotelCard({
     </article>
   )
 }
+
+export default memo(HotelCard)

components/HotelReservation/HotelCardDialog/hotelCardDialog.module.css

@@ -1,6 +1,6 @@
 .dialog {
   padding-bottom: var(--Spacing-x1);
-  bottom: 32px;
+  bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   border: none;
@@ -33,6 +33,8 @@
 .imageContainer {
   position: relative;
   min-width: 177px;
+  border-radius: var(--Corner-radius-Medium) 0 0 var(--Corner-radius-Medium);
+  overflow: hidden;
 }
 
 .imageContainer img {
@@ -108,4 +110,7 @@
   .memberPrice {
     display: none;
   }
+  .dialog {
+    bottom: 32px;
+  }
 }

components/HotelReservation/HotelCardDialogListing/hotelCardDialogListing.module.css

@@ -0,0 +1,20 @@
+.hotelCardDialogListing {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x1);
+  align-items: flex-end;
+}
+
+.hotelCardDialogListing dialog {
+  position: relative;
+  padding: 0;
+  margin: 0;
+}
+
+.hotelCardDialogListing > div:first-child {
+  margin-left: 16px;
+}
+
+.hotelCardDialogListing > div:last-child {
+  margin-right: 16px;
+}

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -1,10 +1,15 @@
 "use client"
 
 import { useCallback, useEffect, useRef } from "react"
+import { useMediaQuery } from "usehooks-ts"
+
+import useClickOutside from "@/hooks/useClickOutside"
 
 import HotelCardDialog from "../HotelCardDialog"
 import { getHotelPins } from "./utils"
 
+import styles from "./hotelCardDialogListing.module.css"
+
 import type { HotelCardDialogListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 export default function HotelCardDialogListing({
@@ -15,6 +20,12 @@ export default function HotelCardDialogListing({
   const hotelsPinData = 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)")
+
+  useClickOutside(dialogRef, !!activeCard && isMobile, () => {
+    onActiveCardChange(null)
+  })
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -65,7 +76,7 @@ export default function HotelCardDialogListing({
   }, [activeCard])
 
   return (
-    <>
+    <div className={styles.hotelCardDialogListing} ref={dialogRef}>
       {hotelsPinData?.length &&
         hotelsPinData.map((data) => {
           const isActive = data.name === activeCard
@@ -83,6 +94,6 @@ export default function HotelCardDialogListing({
             </div>
           )
         })}
-    </>
+    </div>
   )
 }

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css

@@ -4,35 +4,18 @@
 
 .hotelListingMobile {
   display: none;
-  align-items: flex-end;
   overflow-x: auto;
   position: absolute;
-  bottom: 0px;
+  bottom: 32px;
   left: 0;
   right: 0;
   z-index: 10;
-  height: 100%;
-  gap: var(--Spacing-x1);
 }
 
 .hotelListingMobile[data-open="true"] {
   display: flex;
 }
 
-.hotelListingMobile dialog {
-  position: relative;
-  padding: 0;
-  margin: 0;
-}
-
-.hotelListingMobile > div:first-child {
-  margin-left: 16px;
-}
-
-.hotelListingMobile > div:last-child {
-  margin-right: 16px;
-}
-
 @media (min-width: 768px) {
   .hotelListing {
     display: block;