Merged in fix/SW-2165-map-navigate-hotel-card (pull request #2246)

fix(SW-2165): map navigate on enter press 

* fix(SW-2165): navigate on enter press and refactor

* fix(SW-2165): responsive design

* fix(SW-2165): replace spacing variables

* fix(SW-2165): resolve pr comment

* fix(SW-2165): remove isOpen, hide/show logic already handled

* fix(SW-2165): remove dialog

* fix(SW-2165): use buttonicon

* fix(SW-2165): do not focus on close button without tab

* fix(SW-2165): remove unneccessary css


Approved-by: Christian Andolf

apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/hotelListingMapContent.module.css

@@ -1,28 +1,3 @@
 .advancedMarker {
   height: 32px;
 }
-
-.dialogContainer {
-  display: none;
-}
-
-.card {
-  display: none;
-  position: absolute;
-  bottom: 32px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 402px;
-  height: 181px;
-  background-color: var(--Base-Surface-Primary-light-Normal);
-}
-
-.card.active {
-  display: block;
-}
-
-@media (min-width: 768px) {
-  .dialogContainer {
-    display: block;
-  }
-}

apps/scandic-web/components/Maps/InteractiveMap/HotelListingMapContent/index.tsx

@@ -1,12 +1,14 @@
 import {
   AdvancedMarker,
   AdvancedMarkerAnchorPoint,
+  InfoWindow,
 } from "@vis.gl/react-google-maps"
 import { useCallback } from "react"
+import { useMediaQuery } from "usehooks-ts"
 
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
-import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
+import StandaloneHotelCardDialog from "@/components/HotelReservation/HotelCardDialog/StandaloneHotelCardDialog"
 import { trackEvent } from "@/utils/tracking/base"
 
 import HotelPin from "./HotelPin"
@@ -18,6 +20,7 @@ import type { HotelListingMapContentProps } from "@/types/components/hotelReserv
 function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
   const { activeHotel, hoveredHotel, activate, deactivate, engage, disengage } =
     useHotelsMapStore()
+  const isDesktop = useMediaQuery("(min-width: 768px)")
 
   const toggleActiveHotelPin = useCallback(
     (pinName: string | null, hotelId: string) => {
@@ -69,17 +72,22 @@ function HotelListingMapContent({ hotelPins }: HotelListingMapContentProps) {
             onMouseLeave={() => disengage()}
             onClick={() => toggleActiveHotelPin(pin.name, pin.operaId)}
           >
-            <div className={styles.dialogContainer}>
-              <HotelCardDialog
-                isOpen={isActiveOrHovered}
-                handleClose={(event: { stopPropagation: () => void }) => {
-                  event.stopPropagation()
-                  deactivate()
-                  disengage()
-                }}
-                data={pin}
-              />
-            </div>
+            {isActiveOrHovered && isDesktop && (
+              <InfoWindow
+                position={pin.coordinates}
+                pixelOffset={[0, -24]}
+                headerDisabled={true}
+                shouldFocus={false}
+              >
+                <StandaloneHotelCardDialog
+                  data={pin}
+                  handleClose={() => {
+                    deactivate()
+                    disengage()
+                  }}
+                />
+              </InfoWindow>
+            )}
             <HotelPin
               isActive={isActiveOrHovered}
               hotelPrice={hotelPrice}

apps/scandic-web/components/Maps/InteractiveMap/interactiveMap.module.css

@@ -6,6 +6,20 @@
   z-index: 0;
 }
 
+.mapContainer :global(.gm-style .gm-style-iw-d) {
+  padding: 0 !important;
+  overflow: hidden !important;
+  max-height: none !important;
+  max-width: none !important;
+}
+
+.mapContainer :global(.gm-style .gm-style-iw-c) {
+  padding: 0 !important;
+  overflow: hidden !important;
+  max-height: none !important;
+  max-width: none !important;
+}
+
 .mapContainer::after {
   content: "";
   position: absolute;