From 2bc14a6eebe8dde4a9deee980ce6eb6a8a9b8734 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 21 Mar 2025 07:24:01 +0000
Subject: [PATCH] Merged in feat(SW-1993)-tracking-mystay-cancellation (pull
 request #1588)

Feat(SW-1993) tracking mystay

* feat(SW-1993) added trackEvent for cancelStay and mypagelink

* feat(SW-1993) implement trackCancelStay and trackMyStayPageLink


Approved-by: Linus Flood
---
 .../BookingSummary/SummaryCard/index.tsx      |  2 ++
 .../MyStay/BookingSummary/index.tsx           |  4 +++
 .../Actions/AddToCalendarButton.tsx           |  8 ++++-
 .../Actions/CancelStay/hooks/useCancelStay.ts |  2 ++
 .../MyStay/ManageStay/ActionPanel/index.tsx   | 33 ++++++++++++++++---
 apps/scandic-web/utils/tracking/index.ts      |  1 +
 apps/scandic-web/utils/tracking/myStay.ts     | 20 +++++++++++
 7 files changed, 65 insertions(+), 5 deletions(-)
 create mode 100644 apps/scandic-web/utils/tracking/myStay.ts

diff --git a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx
index 3314861b1..4c8e77203 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx
@@ -17,6 +17,7 @@ interface SummaryCardProps {
     href: string
     text: string
     icon: React.ReactNode
+    onClick?: () => void
   }[]
   chip?: React.ReactNode
 }
@@ -59,6 +60,7 @@ export default function SummaryCard({
                     target="_blank"
                     color="burgundy"
                     className={styles.link}
+                    onClick={link.onClick}
                   >
                     {link.icon}
                     {link.text}
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
index 174458ccc..bbeae8dbf 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
@@ -19,6 +19,7 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { Toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
+import { trackMyStayPageLink } from "@/utils/tracking"
 
 import { useMyStayRoomDetailsStore } from "../stores/myStayRoomDetailsStore"
 import { useMyStayTotalPriceStore } from "../stores/myStayTotalPrice"
@@ -146,16 +147,19 @@ export default function BookingSummary({
               href: directionsUrl,
               text: intl.formatMessage({ id: "Directions" }),
               icon: <DirectionsIcon width={20} height={20} color="burgundy" />,
+              onClick: () => trackMyStayPageLink("see on map"),
             },
             {
               href: `mailto:${hotel.contactInformation.email}`,
               text: intl.formatMessage({ id: "Email" }),
               icon: <EmailIcon width={20} height={20} color="burgundy" />,
+              onClick: () => trackMyStayPageLink("email us"),
             },
             {
               href: hotel.contactInformation.websiteUrl,
               text: intl.formatMessage({ id: "Homepage" }),
               icon: <LinkIcon width={20} height={20} color="burgundy" />,
+              onClick: () => trackMyStayPageLink("hotel homepage"),
             },
           ]}
         />
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/AddToCalendarButton.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/AddToCalendarButton.tsx
index 5bb3066b8..315d7502a 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/AddToCalendarButton.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/AddToCalendarButton.tsx
@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 
 import { CalendarAddIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
+import { trackMyStayPageLink } from "@/utils/tracking"
 
 import styles from "../actionPanel.module.css"
 
@@ -14,13 +15,18 @@ export default function AddToCalendarButton({
 }) {
   const intl = useIntl()
 
+  const handleAddToCalendar = () => {
+    trackMyStayPageLink("add to calendar")
+    onPress()
+  }
+
   return (
     <Button
       variant="icon"
       intent="text"
       theme="base"
       className={styles.button}
-      onPress={onPress}
+      onPress={handleAddToCalendar}
     >
       {intl.formatMessage({ id: "Add to calendar" })}
       <CalendarAddIcon width={24} height={24} color="burgundy" />
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/hooks/useCancelStay.ts b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/hooks/useCancelStay.ts
index 332dceb0b..33fc7edce 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/hooks/useCancelStay.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/CancelStay/hooks/useCancelStay.ts
@@ -5,6 +5,7 @@ import { trpc } from "@/lib/trpc/client"
 import { useManageStayStore } from "@/components/HotelReservation/MyStay/stores/manageStayStore"
 import { toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
+import { trackCancelStay } from "@/utils/tracking"
 
 import type {
   CancelStayFormValues,
@@ -90,6 +91,7 @@ export default function useCancelStay({
             { currency: booking.currencyCode }
           )
         )
+        trackCancelStay(booking.hotelId, booking.confirmationNumber)
       } else if (results.length > 0 && errors.length > 0) {
         setBookingStatus()
         toast.warning(
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx
index 2b63a7e0c..3736365da 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx
@@ -20,6 +20,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
+import { trackMyStayPageLink } from "@/utils/tracking"
 
 import { useManageStayStore } from "../../stores/manageStayStore"
 import AddToCalendarButton from "./Actions/AddToCalendarButton"
@@ -75,12 +76,35 @@ export default function ActionPanel({
     url: hotel.contactInformation.websiteUrl,
   }
 
+  const handleModifyStay = () => {
+    trackMyStayPageLink("modify dates")
+    setActiveView("modifyStay")
+  }
+
+  const handleCancelStay = () => {
+    trackMyStayPageLink("cancel booking")
+    setActiveView("cancelStay")
+  }
+
+  const handleDownloadInvoice = () => {
+    trackMyStayPageLink("download invoice")
+  }
+
+  const handleGuaranteeLateArrival = () => {
+    trackMyStayPageLink("guarantee late arrival")
+    onGuaranteeClick()
+  }
+
+  const handleCustomerSupport = () => {
+    trackMyStayPageLink("customer support")
+  }
+
   return (
     <div className={styles.actionPanel}>
       <div className={styles.menu}>
         <Button
           variant="icon"
-          onClick={() => setActiveView("modifyStay")}
+          onClick={handleModifyStay}
           intent="text"
           className={styles.button}
         >
@@ -90,7 +114,7 @@ export default function ActionPanel({
         {showGuaranteeButton && (
           <Button
             variant="icon"
-            onClick={onGuaranteeClick}
+            onClick={handleGuaranteeLateArrival}
             intent="text"
             className={styles.button}
           >
@@ -106,7 +130,7 @@ export default function ActionPanel({
         />
         <Button
           variant="icon"
-          onClick={() => {}}
+          onClick={handleDownloadInvoice}
           intent="text"
           className={styles.button}
         >
@@ -116,7 +140,7 @@ export default function ActionPanel({
         {showCancelStayButton && (
           <Button
             variant="icon"
-            onClick={() => setActiveView("cancelStay")}
+            onClick={handleCancelStay}
             intent="text"
             className={styles.button}
           >
@@ -154,6 +178,7 @@ export default function ActionPanel({
           href={customerService[lang]}
           variant="icon"
           className={styles.link}
+          onClick={handleCustomerSupport}
         >
           <Caption color="burgundy">
             {intl.formatMessage({ id: "Customer support" })}
diff --git a/apps/scandic-web/utils/tracking/index.ts b/apps/scandic-web/utils/tracking/index.ts
index 4db3bc218..67120a376 100644
--- a/apps/scandic-web/utils/tracking/index.ts
+++ b/apps/scandic-web/utils/tracking/index.ts
@@ -2,6 +2,7 @@ export { trackClick } from "./base"
 export { trackLowestRoomPrice } from "./booking"
 export { trackAccordionClick, trackOpenSidePeekEvent } from "./componentEvents"
 export { trackHotelMapClick, trackHotelTabClick } from "./hotelPage"
+export { trackCancelStay, trackMyStayPageLink } from "./myStay"
 export {
   trackFooterClick,
   trackLoginClick,
diff --git a/apps/scandic-web/utils/tracking/myStay.ts b/apps/scandic-web/utils/tracking/myStay.ts
new file mode 100644
index 000000000..e4f94fe34
--- /dev/null
+++ b/apps/scandic-web/utils/tracking/myStay.ts
@@ -0,0 +1,20 @@
+import { trackEvent } from "./base"
+
+export function trackCancelStay(hotelId: string, bnr: string) {
+  trackEvent({
+    event: "BookingCancellations",
+    hotelInfo: {
+      hotelId: hotelId,
+      bnr: bnr,
+    },
+  })
+}
+
+export function trackMyStayPageLink(ctaName: string) {
+  trackEvent({
+    event: "confirmationPageLinks",
+    cta: {
+      name: ctaName,
+    },
+  })
+}