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

components/HotelReservation/HotelCard/hotelCard.module.css

@@ -70,6 +70,10 @@
   justify-content: center;
 }
 
+.address {
+  display: none;
+}
+
 @media screen and (min-width: 1367px) {
   .card.pageListing {
     grid-template-areas:
@@ -118,4 +122,12 @@
   .pageListing .button {
     width: 160px;
   }
+
+  .address {
+    display: block;
+  }
+
+  .addressMobile {
+    display: none;
+  }
 }

components/HotelReservation/HotelCard/index.tsx

@@ -1,6 +1,9 @@
 "use client"
+import { useParams } from "next/dist/client/components/navigation"
 import { useIntl } from "react-intl"
 
+import { selectHotelMap } from "@/constants/routes/hotelReservation"
+
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
@@ -26,6 +29,7 @@ export default function HotelCard({
   state = "default",
   onHotelCardHover,
 }: HotelCardProps) {
+  const params = useParams()
   const intl = useIntl()
 
   const { hotelData } = hotel
@@ -77,9 +81,19 @@ export default function HotelCard({
         <Title as="h4" textTransform="capitalize">
           {hotelData.name}
         </Title>
-        <Footnote color="uiTextMediumContrast">
+        <Footnote color="uiTextMediumContrast" className={styles.address}>
           {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
         </Footnote>
+        <Link
+          className={styles.addressMobile}
+          href={`${selectHotelMap[params.lang as keyof typeof selectHotelMap]}?selectedHotel=${hotelData.name}`}
+          keepSearchParams
+          variant="underscored"
+        >
+          <Footnote color="burgundy">
+            {`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
+          </Footnote>
+        </Link>
         <Footnote color="uiTextMediumContrast">
           {`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
         </Footnote>

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -5,13 +5,7 @@ import { useCallback, useEffect, useRef } from "react"
 import HotelCardDialog from "../HotelCardDialog"
 import { getHotelPins } from "./utils"
 
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
-
-interface HotelCardDialogListingProps {
-  hotels: HotelData[]
-  activeCard: string | null | undefined
-  onActiveCardChange: (hotelName: string | null) => void
-}
+import type { HotelCardDialogListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 export default function HotelCardDialogListing({
   hotels,
@@ -20,6 +14,7 @@ export default function HotelCardDialogListing({
 }: HotelCardDialogListingProps) {
   const hotelsPinData = getHotelPins(hotels)
   const activeCardRef = useRef<HTMLDivElement | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -36,26 +31,36 @@ export default function HotelCardDialogListing({
   )
 
   useEffect(() => {
-    const observer = new IntersectionObserver(handleIntersection, {
+    observerRef.current = new IntersectionObserver(handleIntersection, {
       root: null,
-      threshold: 0.5, // Adjust threshold as needed
+      threshold: 0.5,
     })
 
     const elements = document.querySelectorAll("[data-name]")
-    elements.forEach((el) => observer.observe(el))
+    elements.forEach((el) => observerRef.current?.observe(el))
 
     return () => {
-      elements.forEach((el) => observer.unobserve(el))
+      elements.forEach((el) => observerRef.current?.unobserve(el))
+      observerRef.current?.disconnect()
     }
   }, [handleIntersection])
 
   useEffect(() => {
     if (activeCardRef.current) {
+      // Temporarily disconnect the observer
+      observerRef.current?.disconnect()
+
       activeCardRef.current.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
         inline: "center",
       })
+
+      // Reconnect the observer after scrolling
+      const elements = document.querySelectorAll("[data-name]")
+      setTimeout(() => {
+        elements.forEach((el) => observerRef.current?.observe(el))
+      }, 500)
     }
   }, [activeCard])
 
@@ -73,7 +78,7 @@ export default function HotelCardDialogListing({
               <HotelCardDialog
                 data={data}
                 isOpen={!!activeCard}
-                handleClose={() => {}}
+                handleClose={() => onActiveCardChange(null)}
               />
             </div>
           )

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
+}