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

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}

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"),
             },
           ]}
         />

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

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(

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" })}

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,

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,
+    },
+  })
+}