From 4ed4b3585b8a2ed46045ab6762955bb9bdbdad29 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Tue, 4 Feb 2025 14:03:15 +0000
Subject: [PATCH] Merged in feat/SW-392-hotel-page-tracking-additions (pull
 request #1251)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../HotelPage/Map/DynamicMap/Sidebar/index.tsx            | 1 +
 .../HotelPage/Map/DynamicMap/Sidebar/sidebar.module.css   | 5 +++--
 .../ContentType/HotelPage/Map/MobileMapToggle/index.tsx   | 8 +++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
index dd0a0e7c2..3f608b440 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/index.tsx
+++ b/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}
diff --git a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/sidebar.module.css b/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/sidebar.module.css
index 6c54b131e..b552b940f 100644
--- a/components/ContentType/HotelPage/Map/DynamicMap/Sidebar/sidebar.module.css
+++ b/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;
diff --git a/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx b/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx
index 6dbd27425..7314ab0a6 100644
--- a/components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx
+++ b/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"}