fix: re-add tracking my-stay

This commit is contained in:
Simon Emanuelsson
2025-05-09 15:33:48 +02:00
committed by Simon.Emanuelsson
parent 41acf6ee52
commit 2adb0e92eb
7 changed files with 48 additions and 8 deletions

View File

@@ -12,15 +12,21 @@ import styles from "./button.module.css"
interface ButtonProps extends React.PropsWithChildren { interface ButtonProps extends React.PropsWithChildren {
icon: MaterialIconProps["icon"] icon: MaterialIconProps["icon"]
isDisabled?: boolean isDisabled?: boolean
onClick?: () => void
} }
export default function Button({ export default function Button({
children, children,
icon, icon,
isDisabled = false, isDisabled = false,
onClick = () => {},
}: ButtonProps) { }: ButtonProps) {
return ( return (
<ButtonRAC className={styles.button} isDisabled={isDisabled}> <ButtonRAC
className={styles.button}
isDisabled={isDisabled}
onPress={onClick}
>
<MaterialIcon color="Icon/Interactive/Default" icon={icon} /> <MaterialIcon color="Icon/Interactive/Default" icon={icon} />
<Typography variant="Body/Paragraph/mdBold"> <Typography variant="Body/Paragraph/mdBold">
<span className={styles.text}>{children}</span> <span className={styles.text}>{children}</span>

View File

@@ -10,6 +10,7 @@ import { useMyStayStore } from "@/stores/my-stay"
import Modal from "@/components/HotelReservation/MyStay/Modal" import Modal from "@/components/HotelReservation/MyStay/Modal"
import { toast } from "@/components/TempDesignSystem/Toasts" import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import { trackCancelStay } from "@/utils/tracking"
import CancelStayPriceContainer from "../CancelStayPriceContainer" import CancelStayPriceContainer from "../CancelStayPriceContainer"
@@ -42,6 +43,11 @@ export default function FinalConfirmation({
const cancelBookingsMutation = trpc.booking.cancel.useMutation({ const cancelBookingsMutation = trpc.booking.cancel.useMutation({
onSuccess(data, variables) { onSuccess(data, variables) {
for (const confirmationNumber of data) {
if (confirmationNumber) {
trackCancelStay(bookedRoom.hotelId, confirmationNumber)
}
}
const allCancellationsWentThrough = data.every((cancelled) => cancelled) const allCancellationsWentThrough = data.every((cancelled) => cancelled)
if (allCancellationsWentThrough) { if (allCancellationsWentThrough) {
if (data.length === rooms.length) { if (data.length === rooms.length) {

View File

@@ -3,6 +3,7 @@ import { Dialog, DialogTrigger } from "react-aria-components"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import Modal from "@/components/HotelReservation/MyStay/Modal" import Modal from "@/components/HotelReservation/MyStay/Modal"
import { trackMyStayPageLink } from "@/utils/tracking"
import Alerts from "./Alerts" import Alerts from "./Alerts"
import Steps from "./Steps" import Steps from "./Steps"
@@ -11,9 +12,14 @@ import styles from "./cancelStay.module.css"
export default function CancelStay() { export default function CancelStay() {
const intl = useIntl() const intl = useIntl()
function trackCancelStay() {
trackMyStayPageLink("cancel booking")
}
return ( return (
<DialogTrigger> <DialogTrigger>
<Modal.Button icon="cancel"> <Modal.Button icon="cancel" onClick={trackCancelStay}>
{intl.formatMessage({ defaultMessage: "Cancel stay" })} {intl.formatMessage({ defaultMessage: "Cancel stay" })}
</Modal.Button> </Modal.Button>
<Modal> <Modal>

View File

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
import { useMyStayStore } from "@/stores/my-stay" import { useMyStayStore } from "@/stores/my-stay"
import Modal from "@/components/HotelReservation/MyStay/Modal" import Modal from "@/components/HotelReservation/MyStay/Modal"
import { trackMyStayPageLink } from "@/utils/tracking"
import { dateHasPassed } from "../utils" import { dateHasPassed } from "../utils"
import Alerts from "./Alerts" import Alerts from "./Alerts"
@@ -29,10 +30,18 @@ export default function ChangeDates() {
!isRewardNight && !isRewardNight &&
dateHasPassed(checkInDate, checkInTime) dateHasPassed(checkInDate, checkInTime)
function trackChangeDates() {
trackMyStayPageLink("modify dates")
}
const text = intl.formatMessage({ defaultMessage: "Change dates" }) const text = intl.formatMessage({ defaultMessage: "Change dates" })
return ( return (
<DialogTrigger> <DialogTrigger>
<Modal.Button icon="edit_calendar" isDisabled={isDisabled}> <Modal.Button
icon="edit_calendar"
isDisabled={isDisabled}
onClick={trackChangeDates}
>
{text} {text}
</Modal.Button> </Modal.Button>
<Modal> <Modal>

View File

@@ -4,12 +4,18 @@ import { useIntl } from "react-intl"
import Modal from "@/components/HotelReservation/MyStay/Modal" import Modal from "@/components/HotelReservation/MyStay/Modal"
import CustomerSupportModal from "@/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal" import CustomerSupportModal from "@/components/HotelReservation/MyStay/ReferenceCard/Actions/CustomerSupportModal"
import { trackMyStayPageLink } from "@/utils/tracking"
export default function CustomerSupport() { export default function CustomerSupport() {
const intl = useIntl() const intl = useIntl()
function trackCustomerSupport() {
trackMyStayPageLink("customer service")
}
return ( return (
<DialogTrigger> <DialogTrigger>
<Modal.Button icon="support_agent"> <Modal.Button icon="support_agent" onClick={trackCustomerSupport}>
{intl.formatMessage({ defaultMessage: "Customer support" })} {intl.formatMessage({ defaultMessage: "Customer support" })}
</Modal.Button> </Modal.Button>
<CustomerSupportModal /> <CustomerSupportModal />

View File

@@ -7,6 +7,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay" import { useMyStayStore } from "@/stores/my-stay"
import Modal from "@/components/HotelReservation/MyStay/Modal" import Modal from "@/components/HotelReservation/MyStay/Modal"
import { trackMyStayPageLink } from "@/utils/tracking"
import { dateHasPassed } from "../utils" import { dateHasPassed } from "../utils"
import Form from "./Form" import Form from "./Form"
@@ -37,6 +38,10 @@ export default function GuaranteeLateArrival() {
return null return null
} }
function trackGuaranteeLateArrival() {
trackMyStayPageLink("guarantee late arrival")
}
const arriveLateMsg = intl.formatMessage({ const arriveLateMsg = intl.formatMessage({
defaultMessage: defaultMessage:
"Planning to arrive after 18.00? Secure your room by guaranteeing it with a credit card. Without the guarantee and in case of no-show, the room might be reallocated after 18:00.", "Planning to arrive after 18.00? Secure your room by guaranteeing it with a credit card. Without the guarantee and in case of no-show, the room might be reallocated after 18:00.",
@@ -47,7 +52,9 @@ export default function GuaranteeLateArrival() {
return ( return (
<DialogTrigger> <DialogTrigger>
<Modal.Button icon="check">{text}</Modal.Button> <Modal.Button icon="check" onClick={trackGuaranteeLateArrival}>
{text}
</Modal.Button>
<Modal> <Modal>
<Dialog className={styles.dialog}> <Dialog className={styles.dialog}>
{({ close }) => ( {({ close }) => (

View File

@@ -163,11 +163,11 @@ export const bookingMutationRouter = router({
) )
) )
const cancelledRoomsSuccessfully = [] const cancelledRoomsSuccessfully: (string | null)[] = []
for (const [idx, response] of responses.entries()) { for (const [idx, response] of responses.entries()) {
if (response.status === "fulfilled") { if (response.status === "fulfilled") {
if (response.value) { if (response.value) {
cancelledRoomsSuccessfully.push(true) cancelledRoomsSuccessfully.push(confirmationNumbers[idx])
continue continue
} }
} else { } else {
@@ -177,7 +177,7 @@ export const bookingMutationRouter = router({
console.error(response.reason) console.error(response.reason)
} }
cancelledRoomsSuccessfully.push(false) cancelledRoomsSuccessfully.push(null)
} }
return cancelledRoomsSuccessfully return cancelledRoomsSuccessfully