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: , + onClick: () => trackMyStayPageLink("see on map"), }, { href: `mailto:${hotel.contactInformation.email}`, text: intl.formatMessage({ id: "Email" }), icon: , + onClick: () => trackMyStayPageLink("email us"), }, { href: hotel.contactInformation.websiteUrl, text: intl.formatMessage({ id: "Homepage" }), icon: , + 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 ( {intl.formatMessage({ id: "Add to calendar" })} 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 ( setActiveView("modifyStay")} + onClick={handleModifyStay} intent="text" className={styles.button} > @@ -90,7 +114,7 @@ export default function ActionPanel({ {showGuaranteeButton && ( @@ -106,7 +130,7 @@ export default function ActionPanel({ /> {}} + onClick={handleDownloadInvoice} intent="text" className={styles.button} > @@ -116,7 +140,7 @@ export default function ActionPanel({ {showCancelStayButton && ( 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} > {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, + }, + }) +}