fix(BOOK-138): Fixed several issues after country map functionality was added

* fix(BOOK-138): Fixed issue when hovering markers and info windows for both city cluster marker as city markers.

Approved-by: Matilda Landström

packages/design-system/lib/components/Map/InfoWindow/index.tsx

@@ -0,0 +1,51 @@
+import {
+  InfoWindow as GoogleMapsInfoWindow,
+  type InfoWindowProps as GoogleMapsInfoWindowProps,
+} from '@vis.gl/react-google-maps'
+
+import styles from './infoWindow.module.css'
+
+import type { MouseEventHandler } from 'react'
+
+interface InfoWindowProps
+  extends React.PropsWithChildren<
+    Omit<GoogleMapsInfoWindowProps, 'pixelOffset'>
+  > {
+  pixelOffsetY?: number
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>
+}
+
+export function InfoWindow({
+  children,
+  pixelOffsetY = -12,
+  onMouseEnter,
+  onMouseLeave,
+  ...options
+}: InfoWindowProps) {
+  function onMouseEnterHandler(e: React.MouseEvent<HTMLDivElement>) {
+    if (onMouseEnter) {
+      onMouseEnter(e)
+    }
+  }
+
+  function onMouseLeaveHandler(e: React.MouseEvent<HTMLDivElement>) {
+    if (onMouseLeave) {
+      onMouseLeave(e)
+    }
+  }
+
+  return (
+    <GoogleMapsInfoWindow {...options}>
+      <div
+        className={styles.infoWindow}
+        onMouseEnter={onMouseEnterHandler}
+        onMouseLeave={onMouseLeaveHandler}
+        style={{ paddingBottom: pixelOffsetY ? `${pixelOffsetY * -1}px` : 0 }}
+      >
+        <div className={styles.content}>{children}</div>
+        <span className={styles.arrow} />
+      </div>
+    </GoogleMapsInfoWindow>
+  )
+}

packages/design-system/lib/components/Map/InfoWindow/infoWindow.module.css

@@ -0,0 +1,33 @@
+.infoWindow {
+  position: relative;
+  display: grid;
+  padding: 4px 4px 12px 4px;
+  margin-bottom: -4px;
+}
+
+.content {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-md);
+  box-shadow: 0px 0px 8px 3px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+.arrow {
+  position: relative;
+  height: 12px;
+  width: 25px;
+  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.1));
+  justify-self: center;
+
+  &::after {
+    content: '';
+    background-color: var(--Base-Surface-Primary-light-Normal);
+    clip-path: polygon(0 0, 50% 100%, 100% 0);
+    height: 12px;
+    left: 0;
+    position: absolute;
+    top: -1px;
+    width: 25px;
+  }
+}

packages/design-system/package.json

@@ -141,6 +141,7 @@
     "./Link": "./lib/components/Link/index.tsx",
     "./LoadingSpinner": "./lib/components/LoadingSpinner/index.tsx",
     "./LoginButton": "./lib/components/LoginButton/index.tsx",
+    "./Map/InfoWindow": "./lib/components/Map/InfoWindow/index.tsx",
     "./Map/InteractiveMap": "./lib/components/Map/InteractiveMap/index.tsx",
     "./Map/mapConstants": "./lib/components/Map/mapConstants.ts",
     "./Map/Markers/HotelMarkerByType": "./lib/components/Map/Markers/HotelMarkerByType.tsx",