Merged in feat/SW-392-hotel-page-tracking-additions (pull request #1251)

feat(SW-392): Added tracking when clicking mobile map button

* feat(SW-392): Added tracking when clicking mobile map button

* fix: button padding and margin inside map sidebar on mobile


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström

components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx

@@ -96,6 +96,7 @@ export default function Sidebar({
         <Button
           theme="base"
           intent="text"
+          wrapping
           fullWidth
           className={styles.sidebarToggle}
           onClick={toggleFullScreenSidebar}

components/ContentType/HotelPage/Map/DynamicMap/Sidebar/sidebar.module.css

@@ -84,12 +84,13 @@
     bottom: 0;
   }
 
-  .sidebarToggle {
+  button.sidebarToggle {
     position: relative;
     margin-top: var(--Spacing-x4);
+    padding: var(--Spacing-x2) !important;
   }
 
-  .sidebarToggle::before {
+  button.sidebarToggle::before {
     content: "";
     position: absolute;
     display: block;

components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 import useHotelPageStore from "@/stores/hotel-page"
 
 import { HouseIcon, MapIcon } from "@/components/Icons"
+import { trackHotelMapClick } from "@/utils/tracking"
 
 import styles from "./mobileToggle.module.css"
 
@@ -12,6 +13,11 @@ export default function MobileMapToggle() {
   const { isDynamicMapOpen, openDynamicMap, closeDynamicMap } =
     useHotelPageStore()
 
+  function handleOpenMapClick() {
+    openDynamicMap()
+    trackHotelMapClick()
+  }
+
   return (
     <div className={styles.mobileToggle}>
       <button
@@ -29,7 +35,7 @@ export default function MobileMapToggle() {
       <button
         type="button"
         className={`${styles.button} ${isDynamicMapOpen ? styles.active : ""}`}
-        onClick={openDynamicMap}
+        onClick={handleOpenMapClick}
       >
         <MapIcon
           color={isDynamicMapOpen ? "white" : "red"}