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