feat(SW-1940): Added functionality to see hotel on map from city pages

Approved-by: Fredrik Thorsson

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx

@@ -32,10 +32,10 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
   const amenities = hotel.detailedFacilities.slice(0, 5)
 
   const itemRef = useRef<HTMLElement>(null)
-  const { setHoveredHotel, clickedHotel } = useDestinationPageHotelsMapStore()
+  const { setHoveredHotel, activeHotel } = useDestinationPageHotelsMapStore()
 
   useEffect(() => {
-    if (clickedHotel === hotel.operaId) {
+    if (activeHotel === hotel.operaId) {
       const element = itemRef.current
       if (element) {
         element.scrollIntoView({
@@ -45,7 +45,7 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
         })
       }
     }
-  }, [clickedHotel, hotel.operaId])
+  }, [activeHotel, hotel.operaId])
 
   const handleMouseEnter = useCallback(() => {
     if (hotel.operaId) {
@@ -62,7 +62,7 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
       ref={itemRef}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      className={`${styles.hotelListItem} ${clickedHotel === hotel.operaId ? styles.activeCard : ""}`}
+      className={`${styles.hotelListItem} ${activeHotel === hotel.operaId ? styles.activeCard : ""}`}
     >
       <div className={styles.imageWrapper}>
         <ImageGallery

apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/index.tsx

@@ -18,10 +18,10 @@ interface MapCardCarouselProps {
 export default function HotelCardCarousel({
   visibleHotels,
 }: MapCardCarouselProps) {
-  const { clickedHotel } = useDestinationPageHotelsMapStore()
+  const { activeHotel } = useDestinationPageHotelsMapStore()
 
   const selectedHotelIdx = visibleHotels.findIndex(
-    ({ hotel }) => hotel.operaId === clickedHotel
+    ({ hotel }) => hotel.operaId === activeHotel
   )
 
   return (
@@ -35,7 +35,7 @@ export default function HotelCardCarousel({
           <Carousel.Item key={hotel.operaId} className={styles.item}>
             <HotelMapCard
               className={cx(styles.carouselCard, {
-                [styles.noActiveHotel]: !clickedHotel,
+                [styles.noActiveHotel]: !activeHotel,
               })}
               tripadvisorRating={hotel.ratings?.tripAdvisor.rating}
               hotelName={hotel.name}

apps/scandic-web/components/ContentType/DestinationPage/HotelListing/HotelListingItem/index.tsx

@@ -1,8 +1,12 @@
 "use client"
 
 import Link from "next/link"
+import { useParams } from "next/navigation"
+import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
+import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
+
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import { ChevronRightSmallIcon, TripAdvisorIcon } from "@/components/Icons"
 import HotelLogo from "@/components/Icons/Logos"
@@ -29,8 +33,17 @@ export default function HotelListingItem({
   url,
 }: HotelListingItemProps) {
   const intl = useIntl()
+  const params = useParams()
+  const { setActiveHotel } = useDestinationPageHotelsMapStore()
   const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
   const amenities = hotel.detailedFacilities.slice(0, 5)
+  const [mapUrl, setMapUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    const url = new URL(window.location.href)
+    url.searchParams.set("view", "map")
+    setMapUrl(url.toString())
+  }, [params, hotel.name])
 
   return (
     <article className={styles.container}>
@@ -90,10 +103,18 @@ export default function HotelListingItem({
             )
           })}
         </ul>
-        <Button intent="text" variant="icon" theme="base">
+        {mapUrl && (
-          {intl.formatMessage({ id: "See on map" })}
+          <Button intent="text" variant="icon" theme="base" asChild>
-          <ChevronRightSmallIcon />
+            <Link
-        </Button>
+              href={mapUrl}
+              scroll={true}
+              onClick={() => setActiveHotel(hotel.operaId)}
+            >
+              {intl.formatMessage({ id: "See on map" })}
+              <ChevronRightSmallIcon />
+            </Link>
+          </Button>
+        )}
         {url && (
           <>
             <Divider variant="horizontal" color="primaryLightSubtle" />

apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { cx } from "class-variance-authority"
 import Link from "next/link"
-import { useCallback, useState } from "react"
+import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
@@ -44,11 +44,11 @@ export default function HotelMapCard({
   const intl = useIntl()
   const pageType = usePageType()
   const [imageError, setImageError] = useState(false)
-  const { setClickedHotel } = useDestinationPageHotelsMapStore()
+  const { setActiveHotel } = useDestinationPageHotelsMapStore()
 
-  const handleClose = useCallback(() => {
+  function handleClose() {
-    setClickedHotel(null)
+    setActiveHotel(null)
-  }, [setClickedHotel])
+  }
 
   function Wrapper({ children }: React.PropsWithChildren) {
     if (type === "dialog") {

apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/index.tsx

@@ -25,6 +25,7 @@ interface DynamicMapProps {
   mapId: string
   defaultCoordinates: google.maps.LatLngLiteral | null
   defaultZoom: number
+  fitBounds?: boolean
   onClose?: () => void
 }
 
@@ -33,6 +34,7 @@ export default function DynamicMap({
   mapId,
   defaultCoordinates,
   defaultZoom,
+  fitBounds = true,
   onClose,
   children,
 }: PropsWithChildren<DynamicMapProps>) {
@@ -40,7 +42,7 @@ export default function DynamicMap({
   const map = useMap()
 
   useEffect(() => {
-    if (map) {
+    if (map && fitBounds) {
       if (markers.length) {
         const bounds = new google.maps.LatLngBounds()
         markers.forEach((marker) => {
@@ -51,7 +53,7 @@ export default function DynamicMap({
         map.setCenter(defaultCoordinates)
       }
     }
-  }, [map, markers, defaultCoordinates])
+  }, [map, markers, defaultCoordinates, fitBounds])
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && onClose) {

apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/ClusterMarker/index.tsx

@@ -27,10 +27,10 @@ export default function ClusterMarker({
   onMarkerClick,
   hotelIds,
 }: ClusterMarkerProps) {
-  const { hoveredHotel, clickedHotel } = useDestinationPageHotelsMapStore()
+  const { hoveredHotel, activeHotel } = useDestinationPageHotelsMapStore()
   const isActive =
     hotelIds.includes(Number(hoveredHotel)) ||
-    hotelIds.includes(Number(clickedHotel))
+    hotelIds.includes(Number(activeHotel))
 
   const handleClick = useCallback(() => {
     if (onMarkerClick) {

apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/Marker/index.tsx

@@ -24,13 +24,13 @@ interface MarkerProps {
 export default function Marker({ position, properties }: MarkerProps) {
   const [markerRef] = useAdvancedMarkerRef()
 
-  const { setHoveredHotel, setClickedHotel, hoveredHotel, clickedHotel } =
+  const { setHoveredHotel, setActiveHotel, hoveredHotel, activeHotel } =
     useDestinationPageHotelsMapStore()
 
   const handleClick = useCallback(() => {
-    setClickedHotel(properties.id)
+    setActiveHotel(properties.id)
     trackMapClick(properties.name)
-  }, [setClickedHotel, properties])
+  }, [setActiveHotel, properties])
 
   const handleMouseEnter = useCallback(() => {
     setHoveredHotel(properties.id)
@@ -41,7 +41,7 @@ export default function Marker({ position, properties }: MarkerProps) {
   }, [setHoveredHotel])
 
   const isHovered = hoveredHotel === properties.id
-  const isActive = clickedHotel === properties.id
+  const isActive = activeHotel === properties.id
 
   return (
     <AdvancedMarker

apps/scandic-web/components/ContentType/DestinationPage/Map/MapContent/index.tsx

@@ -34,7 +34,7 @@ export default function MapContent({
   geojson,
   hasActiveFilters,
 }: MapContentProps) {
-  const { setClickedHotel, clickedHotel } = useDestinationPageHotelsMapStore()
+  const { setActiveHotel, activeHotel } = useDestinationPageHotelsMapStore()
   const map = useMap()
 
   const { clusters, containedHotels } = useSupercluster<MarkerProperties>(
@@ -47,11 +47,11 @@ export default function MapContent({
 
   useEffect(() => {
     map?.addListener("click", () => {
-      if (clickedHotel) {
+      if (activeHotel) {
-        setClickedHotel(null)
+        setActiveHotel(null)
       }
     })
-  }, [clickedHotel, map, setClickedHotel])
+  }, [activeHotel, map, setActiveHotel])
 
   function handleClusterClick(position: google.maps.LatLngLiteral) {
     const currentZoom = map && map.getZoom()

apps/scandic-web/components/ContentType/DestinationPage/Map/index.tsx

@@ -13,6 +13,7 @@ import { Dialog, Modal } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
+import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
 import DestinationFilterAndSort from "@/components/DestinationFilterAndSort"
 import { ChevronLeftSmallIcon } from "@/components/Icons"
@@ -47,10 +48,14 @@ export default function Map({
 }: PropsWithChildren<MapProps>) {
   const router = useRouter()
   const searchParams = useSearchParams()
+  const { activeHotel: activeHotelId } = useDestinationPageHotelsMapStore()
   const isMapView = useMemo(
     () => searchParams.get("view") === "map",
     [searchParams]
   )
+  const activeHotel = hotels.find(
+    ({ hotel }) => hotel.operaId === activeHotelId
+  )
   const rootDiv = useRef<HTMLDivElement | null>(null)
   const [mapHeight, setMapHeight] = useState("0px")
   const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
@@ -65,14 +70,20 @@ export default function Map({
 
   const markers = getHotelMapMarkers(hotels)
   const geoJson = mapMarkerDataToGeoJson(markers)
-  const defaultCoordinates = defaultLocation
+  const defaultCoordinates = activeHotel
     ? {
-        lat: defaultLocation.latitude,
+        lat: activeHotel.hotel.location.latitude,
-        lng: defaultLocation.longitude,
+        lng: activeHotel.hotel.location.longitude,
       }
-    : null
+    : defaultLocation
-  const defaultZoom =
+      ? {
-    defaultLocation?.default_zoom ?? (pageType === "city" ? 10 : 3)
+          lat: defaultLocation.latitude,
+          lng: defaultLocation.longitude,
+        }
+      : null
+  const defaultZoom = activeHotel
+    ? 15
+    : (defaultLocation?.default_zoom ?? (pageType === "city" ? 10 : 3))
 
   // Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
   const handleMapHeight = useCallback(() => {
@@ -157,6 +168,7 @@ export default function Map({
               onClose={handleClose}
               defaultCoordinates={defaultCoordinates}
               defaultZoom={defaultZoom}
+              fitBounds={!activeHotel}
             >
               <MapContent
                 geojson={geoJson}

apps/scandic-web/stores/destination-page-hotels-map.ts

@@ -2,15 +2,15 @@ import { create } from "zustand"
 
 interface DestinationPageHotelsMapState {
   hoveredHotel: string | null
-  clickedHotel: string | null
+  activeHotel: string | null
   setHoveredHotel: (hotelId: string | null) => void
-  setClickedHotel: (hotelId: string | null) => void
+  setActiveHotel: (hotelId: string | null) => void
 }
 
 export const useDestinationPageHotelsMapStore =
   create<DestinationPageHotelsMapState>((set) => ({
     hoveredHotel: null,
-    clickedHotel: null,
+    activeHotel: null,
     setHoveredHotel: (hotelId) => set({ hoveredHotel: hotelId }),
-    setClickedHotel: (hotelId) => set({ clickedHotel: hotelId }),
+    setActiveHotel: (hotelId) => set({ activeHotel: hotelId }),
   }))