feat(SW-344) Correct position of pins in mobile

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -3,6 +3,7 @@ import { APIProvider } from "@vis.gl/react-google-maps"
 import { useRouter, useSearchParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
 import { selectHotel } from "@/constants/routes/hotelReservation"
 
@@ -12,6 +13,7 @@ import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
 import HotelListing from "./HotelListing"
+import { getCentralCoordinates } from "./utils"
 
 import styles from "./selectHotelMap.module.css"
 
@@ -19,19 +21,33 @@ import { SelectHotelMapProps } from "@/types/components/hotelReservation/selectH
 
 export default function SelectHotelMap({
   apiKey,
-  coordinates,
   hotelPins,
   mapId,
-  isModal,
   hotels,
 }: SelectHotelMapProps) {
   const searchParams = useSearchParams()
   const router = useRouter()
   const lang = useLang()
   const intl = useIntl()
+  const isAboveMobile = useMediaQuery("(min-width: 768px)")
   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")
+
+  useEffect(() => {
+    if (selectedHotel) {
+      setActiveHotelPin(selectedHotel)
+    }
+  }, [selectedHotel])
+
   useEffect(() => {
     const hotelListingElement = document.querySelector(
       `.${styles.listingContainer}`
@@ -54,10 +70,6 @@ export default function SelectHotelMap({
     hotelListingElement?.scrollTo({ top: 0, behavior: "smooth" })
   }
 
-  function handleModalDismiss() {
-    router.back()
-  }
-
   function handlePageRedirect() {
     router.push(`${selectHotel[lang]}?${searchParams.toString()}`)
   }
@@ -68,7 +80,7 @@ export default function SelectHotelMap({
       size="small"
       theme="base"
       className={styles.closeButton}
-      onClick={isModal ? handleModalDismiss : handlePageRedirect}
+      onClick={handlePageRedirect}
     >
       <CloseIcon color="burgundy" />
       {intl.formatMessage({ id: "Close the map" })}
@@ -84,7 +96,7 @@ export default function SelectHotelMap({
               size="small"
               variant="icon"
               wrapping
-              onClick={isModal ? handleModalDismiss : handlePageRedirect}
+              onClick={handlePageRedirect}
               className={styles.filterContainerCloseButton}
             >
               <CloseLargeIcon />

components/HotelReservation/SelectHotel/SelectHotelMap/utils.ts

@@ -0,0 +1,17 @@
+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
+}