fix(946) Center from town name instead of calculate center

components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx

@@ -60,13 +60,20 @@ export default function Sidebar({
     }
   }
 
-  function handleMouseEnter(poiName: string) {
+  function handleMouseEnter(poiName: string | undefined) {
+    if (!poiName) return
+
     if (!isClicking) {
       onActivePoiChange(poiName)
     }
   }
 
-  function handlePoiClick(poiName: string, poiCoordinates: Coordinates) {
+  function handlePoiClick(
+    poiName: string | undefined,
+    poiCoordinates: Coordinates
+  ) {
+    if (!poiName || !poiCoordinates) return
+
     setIsClicking(true)
     toggleFullScreenSidebar()
     onActivePoiChange(poiName)

components/ContentType/HotelPage/Map/DynamicMap/index.tsx

@@ -113,7 +113,7 @@ export default function DynamicMap({
               activePoi={activePoi}
               hotelName={hotelName}
               pointsOfInterest={pointsOfInterest}
-              onActivePoiChange={setActivePoi}
+              onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
               coordinates={coordinates}
             />
             <InteractiveMap
@@ -121,7 +121,7 @@ export default function DynamicMap({
               coordinates={coordinates}
               pointsOfInterest={pointsOfInterest}
               activePoi={activePoi}
-              onActivePoiChange={setActivePoi}
+              onActivePoiChange={(poi) => setActivePoi(poi ?? null)}
               mapId={mapId}
             />
           </Dialog>

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -7,7 +7,7 @@ import { useMediaQuery } from "usehooks-ts"
 
 import { selectHotel } from "@/constants/routes/hotelReservation"
 
-import { ArrowUpIcon, CloseIcon, CloseLargeIcon } from "@/components/Icons"
+import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
 import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
@@ -15,7 +15,6 @@ import useLang from "@/hooks/useLang"
 
 import FilterAndSortModal from "../FilterAndSortModal"
 import HotelListing from "./HotelListing"
-import { getCentralCoordinates } from "./utils"
 
 import styles from "./selectHotelMap.module.css"
 
@@ -27,6 +26,7 @@ export default function SelectHotelMap({
   mapId,
   hotels,
   filterList,
+  cityCoordinates,
 }: SelectHotelMapProps) {
   const searchParams = useSearchParams()
   const router = useRouter()
@@ -36,15 +36,13 @@ export default function SelectHotelMap({
   const [activeHotelPin, setActiveHotelPin] = useState<string | null>(null)
   const [showBackToTop, setShowBackToTop] = useState<boolean>(false)
 
-  const centralCoordinates = getCentralCoordinates(hotelPins)
-
-  const coordinates = isAboveMobile
-    ? centralCoordinates
-    : { ...centralCoordinates, lat: centralCoordinates.lat - 0.006 }
-
   const selectHotelParams = new URLSearchParams(searchParams.toString())
   const selectedHotel = selectHotelParams.get("selectedHotel")
 
+  const coordinates = isAboveMobile
+    ? cityCoordinates
+    : { ...cityCoordinates, lat: cityCoordinates.lat - 0.006 }
+
   useEffect(() => {
     if (selectedHotel) {
       setActiveHotelPin(selectedHotel)

components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts

@@ -1,17 +0,0 @@
-import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
-
-export function getCentralCoordinates(hotels: HotelPin[]) {
-  const centralCoordinates = hotels.reduce(
-    (acc, pin) => {
-      acc.lat += pin.coordinates.lat
-      acc.lng += pin.coordinates.lng
-      return acc
-    },
-    { lat: 0, lng: 0 }
-  )
-
-  centralCoordinates.lat /= hotels.length
-  centralCoordinates.lng /= hotels.length
-
-  return centralCoordinates
-}

components/Maps/InteractiveMap/HotelMapContent/index.tsx

@@ -35,9 +35,9 @@ export default function HotelMapContent({
           position={poi.coordinates}
           anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
           zIndex={activePoi === poi.name ? 2 : 0}
-          onMouseEnter={() => onActivePoiChange?.(poi.name)}
+          onMouseEnter={() => onActivePoiChange?.(poi.name ?? null)}
           onMouseLeave={() => onActivePoiChange?.(null)}
-          onClick={() => toggleActivePoi(poi.name)}
+          onClick={() => toggleActivePoi(poi.name ?? "")}
         >
           <span
             className={`${styles.poi} ${activePoi === poi.name ? styles.active : ""}`}