Merged in fix/SW-1989-city-map-hotel-card-fixes (pull request #1620)

fix/SW-1989 add InfoWindow component

* fix(SW-1989): add InfoWindow component

* fix(SW-1989): update hotel map card

* fix(SW-1989): remove wrapper function


Approved-by: Erik Tiekstra

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/OverviewMapContainer/ActiveMapCard/index.tsx

@@ -36,7 +36,6 @@ export default function ActiveMapCard({ markers }: ActiveMapCardProps) {
       hotelName={activeHotel.name}
       image={activeHotel.image}
       url={activeHotel.url}
-      type="article"
     />
   )
 }

apps/scandic-web/components/ContentType/DestinationPage/HotelCardCarousel/hotelCardCarousel.module.css

@@ -14,14 +14,6 @@
   }
 }
 
-.carouselContent .item:first-child:not(:only-child) {
-  padding-left: var(--Spacing-x2);
-}
-
-.carouselContent .item:last-child:not(:only-child) {
-  padding-right: var(--Spacing-x2);
-}
-
 @media screen and (max-width: 500px) {
   .carouselContent {
     grid-auto-columns: 90%;

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

@@ -54,7 +54,6 @@ export default function HotelCardCarousel({
               url={url}
               image={getImage(hotel)}
               amenities={hotel.detailedFacilities.slice(0, 3)}
-              type="article"
             />
           </Carousel.Item>
         ))}

apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/hotelMapCard.module.css

@@ -1,8 +1,4 @@
-.dialog {
+.wrapper {
-  display: none;
-}
-
-.dialogContent {
   background: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Medium);
@@ -12,25 +8,6 @@
   position: relative;
 }
 
-.dialog .dialogContent {
-  min-width: 402px;
-}
-
-.dialog .dialogContent::after {
-  content: "";
-  display: block;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  width: 0;
-  height: 0;
-  border: 20px solid transparent;
-  border-top-color: var(--Base-Surface-Primary-light-Normal);
-  border-bottom: 0;
-  margin-left: -10px;
-  margin-bottom: -10px;
-}
-
 .name {
   height: 48px;
   max-width: 180px;
@@ -83,16 +60,11 @@
 }
 
 @media (min-width: 950px) {
-  .iconFootnote {
+  .wrapper {
-    display: block;
+    border: none;
   }
 
-  .dialog {
+  .iconFootnote {
-    bottom: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    border: none;
-    background: transparent;
     display: block;
   }
 

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

@@ -1,5 +1,4 @@
 "use client"
-import { cx } from "class-variance-authority"
 import Link from "next/link"
 import { useState } from "react"
 import { useIntl } from "react-intl"
@@ -21,24 +20,20 @@ import type { GalleryImage } from "@/types/components/imageGallery"
 import type { Amenities } from "@/types/hotel"
 
 interface HotelMapCardProps {
-  isActive?: boolean
   amenities: Amenities
   tripadvisorRating: number | undefined
   hotelName: string
   image: GalleryImage | null
   url: string
-  type?: "dialog" | "article"
   className?: string
 }
 
 export default function HotelMapCard({
-  isActive = false,
   amenities,
   tripadvisorRating,
   hotelName,
   image,
   url,
-  type = "dialog",
   className,
 }: HotelMapCardProps) {
   const intl = useIntl()
@@ -50,25 +45,9 @@ export default function HotelMapCard({
     setActiveMarker(null)
   }
 
-  function Wrapper({ children }: React.PropsWithChildren) {
-    if (type === "dialog") {
   return (
-        <dialog
+    <article className={className}>
-          open={isActive}
+      <div className={styles.wrapper}>
-          className={cx({
-            [styles.dialog]: isActive,
-          })}
-        >
-          {children}
-        </dialog>
-      )
-    }
-    return <div className={className}>{children}</div>
-  }
-
-  return (
-    <Wrapper>
-      <div className={styles.dialogContent}>
         <Button
           intent="text"
           size="medium"
@@ -137,6 +116,6 @@ export default function HotelMapCard({
           )}
         </div>
       </div>
-    </Wrapper>
+    </article>
   )
 }

apps/scandic-web/components/ContentType/DestinationPage/Map/DynamicMap/dynamicMap.module.css

@@ -70,4 +70,14 @@
     box-shadow: var(--button-box-shadow);
     gap: var(--Spacing-x-half);
   }
+
+  /* Overriding Google maps infoWindow styles */
+  .mapWrapper :global(.gm-style .gm-style-iw-c) {
+    padding: 0 !important;
+  }
+
+  .mapWrapper :global(.gm-style .gm-style-iw-d) {
+    padding: 0 !important;
+    overflow: hidden !important;
+  }
 }

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

@@ -3,8 +3,10 @@
 import {
   AdvancedMarker,
   AdvancedMarkerAnchorPoint,
+  InfoWindow,
   useAdvancedMarkerRef,
 } from "@vis.gl/react-google-maps"
+import { useMediaQuery } from "usehooks-ts"
 
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
 
@@ -26,6 +28,8 @@ export default function Marker({ position, properties }: MarkerProps) {
   const { setHoveredMarker, setActiveMarker, hoveredMarker, activeMarker } =
     useDestinationPageHotelsMapStore()
 
+  const isDesktop = useMediaQuery("(min-width: 950px)")
+
   function handleMarkerClick() {
     setActiveMarker(properties.id)
     trackMapClick(properties.name)
@@ -58,14 +62,22 @@ export default function Marker({ position, properties }: MarkerProps) {
         hotelType={properties.type}
       />
 
+      {isActive && isDesktop && (
+        <InfoWindow
+          position={position}
+          pixelOffset={[0, -24]}
+          headerDisabled={true}
+          minWidth={450}
+        >
           <HotelMapCard
-        isActive={isActive}
             amenities={properties.amenities}
             tripadvisorRating={properties.tripadvisor}
             hotelName={properties.name}
             image={properties.image}
             url={properties.url}
           />
+        </InfoWindow>
+      )}
     </AdvancedMarker>
   )
 }