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

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/@modal/(.)map/page.tsx

@@ -12,7 +12,7 @@ import {
 import { MapModal } from "@/components/MapModal"
 import { setLang } from "@/i18n/serverContext"
 
-import { fetchAvailableHotels, getCentralCoordinates } from "../../utils"
+import { fetchAvailableHotels } from "../../utils"
 
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
 import type { LangParams, PageArgs } from "@/types/params"
@@ -58,16 +58,12 @@ export default async function SelectHotelMapPage({
 
   const hotelPins = getHotelPins(hotels)
 
-  const centralCoordinates = getCentralCoordinates(hotelPins)
-
   return (
     <MapModal>
       <SelectHotelMap
         apiKey={googleMapsApiKey}
-        coordinates={centralCoordinates}
         hotelPins={hotelPins}
         mapId={googleMapId}
-        isModal={true}
         hotels={hotels}
       />
     </MapModal>

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils.ts

@@ -87,19 +87,3 @@ export function getFiltersFromHotels(hotels: HotelData[]): CategorizedFilters {
     { facilityFilters: [], surroundingsFilters: [] }
   )
 }
-
-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/Header/MainMenu/MobileMenu/index.tsx

@@ -3,13 +3,13 @@
 import { Suspense, useEffect } from "react"
 import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
 import useDropdownStore from "@/stores/main-menu"
 
 import { GiftIcon, SearchIcon, ServiceIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
-import useMediaQuery from "@/hooks/useMediaQuery"
 
 import HeaderLink from "../../HeaderLink"
 

components/Header/MainMenu/MyPagesMobileMenu/index.tsx

@@ -3,11 +3,11 @@
 import { useEffect } from "react"
 import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
 import useDropdownStore from "@/stores/main-menu"
 
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
-import useMediaQuery from "@/hooks/useMediaQuery"
 import { getInitials } from "@/utils/user"
 
 import Avatar from "../Avatar"

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

hooks/useMediaQuery.ts

@@ -1,21 +0,0 @@
-import { useEffect, useState } from "react"
-
-function useMediaQuery(query: string) {
-  const [isMatch, setIsMatch] = useState(false)
-
-  useEffect(() => {
-    const media = window.matchMedia(query)
-    if (media.matches !== isMatch) {
-      setIsMatch(media.matches)
-    }
-
-    const listener = () => setIsMatch(media.matches)
-    media.addEventListener("change", listener)
-
-    return () => media.removeEventListener("change", listener)
-  }, [isMatch, query])
-
-  return isMatch
-}
-
-export default useMediaQuery

package-lock.json

@@ -53,6 +53,7 @@
         "server-only": "^0.0.1",
         "sonner": "^1.5.0",
         "superjson": "^2.2.1",
+        "usehooks-ts": "3.1.0",
         "zod": "^3.22.4",
         "zustand": "^4.5.2"
       },
@@ -14703,7 +14704,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/lodash.isempty": {
@@ -19454,6 +19454,20 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/usehooks-ts": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
+      "integrity": "sha512-bBIa7yUyPhE1BCc0GmR96VU/15l/9gP1Ch5mYdLcFBaFGQsdmXkvjV0TtOqW1yUd6VjIwDunm+flSciCQXujiw==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=16.15.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0  || ^17 || ^18"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -68,6 +68,7 @@
     "server-only": "^0.0.1",
     "sonner": "^1.5.0",
     "superjson": "^2.2.1",
+    "usehooks-ts": "3.1.0",
     "zod": "^3.22.4",
     "zustand": "^4.5.2"
   },

types/components/hotelReservation/selectHotel/map.ts

@@ -18,10 +18,8 @@ export interface HotelListingProps {
 
 export interface SelectHotelMapProps {
   apiKey: string
-  coordinates: Coordinates
   hotelPins: HotelPin[]
   mapId: string
-  isModal: boolean
   hotels: HotelData[]
 }
 
@@ -53,3 +51,9 @@ export interface HotelCardDialogProps {
   data: HotelPin
   handleClose: (event: { stopPropagation: () => void }) => void
 }
+
+export interface HotelCardDialogListingProps {
+  hotels: HotelData[]
+  activeCard: string | null | undefined
+  onActiveCardChange: (hotelName: string | null) => void
+}