diff --git a/apps/partner-sas/components/BookingFlowProviders.tsx b/apps/partner-sas/components/BookingFlowProviders.tsx index d161c892e..6bc783db4 100644 --- a/apps/partner-sas/components/BookingFlowProviders.tsx +++ b/apps/partner-sas/components/BookingFlowProviders.tsx @@ -1,21 +1,8 @@ "use client" import { BookingFlowContextProvider } from "@scandic-hotels/booking-flow/BookingFlowContextProvider" -import { BookingFlowTrackingProvider } from "@scandic-hotels/booking-flow/BookingFlowTrackingProvider" import { useIsUserLoggedIn } from "../hooks/useIsUserLoggedIn" -import { - trackAccordionItemOpen, - trackBedSelection, - trackBookingSearchClick, - trackBreakfastSelection, - trackGenericEvent, - trackGlaSaveCardAttempt, - trackLoginClick, - trackOpenSidePeek, - trackPaymentEvent, - trackUpdatePaymentMethod, -} from "../utils/tracking" import type { ReactNode } from "react" @@ -24,22 +11,7 @@ export function BookingFlowProviders({ children }: { children: ReactNode }) { return ( - - {children} - + {children} ) } diff --git a/apps/partner-sas/utils/tracking.ts b/apps/partner-sas/utils/tracking.ts deleted file mode 100644 index de7a2f258..000000000 --- a/apps/partner-sas/utils/tracking.ts +++ /dev/null @@ -1,152 +0,0 @@ -"use client" - -import type { - PaymentEvent, - PaymentFailEvent, -} from "@scandic-hotels/tracking/types" -import type { BreakfastPackages } from "@scandic-hotels/trpc/routers/hotels/output" - -export function trackBookingSearchClick( - searchTerm: string, - searchType: "hotel" | "destination" -) { - console.warn("TODO: Implement trackBookingSearchClick", { - searchTerm, - searchType, - }) -} - -export function trackAccordionItemOpen(option: string) { - console.warn("TODO: Implement trackAccordionItemOpen", { option }) -} - -export function trackOpenSidePeek(input: { - name: string | null - hotelId: string - includePathname?: boolean - roomTypeCode?: string | null -}) { - console.warn("TODO: Implement trackOpenSidePeek", { input }) -} - -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export function trackGenericEvent(data: any) { - console.warn("TODO: Implement trackGenericEvent", { data }) -} - -export function trackGlaSaveCardAttempt({ - hotelId, - hasSavedCreditCard, - creditCardType, - lateArrivalGuarantee, -}: { - hotelId: string - hasSavedCreditCard: boolean - creditCardType?: string - lateArrivalGuarantee: "mandatory" | "yes" | "no" | "na" -}) { - console.warn("TODO: Implement trackGlaSaveCardAttempt", { - event: "glaCardSaveAttempt", - hotelInfo: { - hotelId, - lateArrivalGuarantee, - guaranteedProduct: "room", - }, - paymentInfo: { - status: "glacardsaveattempt", - isSavedCreditCard: hasSavedCreditCard, - type: creditCardType, - }, - }) -} - -export function trackLoginClick( - position: - | "top menu" - | "hamburger menu" - | "join scandic friends sidebar" - | "enter details" - | "my stay" -) { - console.warn("TODO: Implement trackLoginClick", { - event: "loginStart", - login: { - position, - action: "login start", - ctaName: "login", - }, - }) -} - -export function trackPaymentEvent(paymentEvent: PaymentEvent) { - console.warn("TODO: Implement trackPaymentEvent", { - event: paymentEvent.event, - hotelInfo: { - hotelId: paymentEvent.hotelId, - }, - paymentInfo: { - isSavedCard: paymentEvent.isSavedCreditCard, - status: paymentEvent.status, - type: paymentEvent.method, - smsEnable: paymentEvent.smsEnable, - errorMessage: isPaymentFailEvent(paymentEvent) - ? paymentEvent.errorMessage - : undefined, - }, - }) -} - -export function trackUpdatePaymentMethod({ method }: { method: string }) { - console.warn("TODO: Implement trackUpdatePaymentMethod", { - event: "paymentSelection", - hotelInfo: { - hotelId: "", // TODO: Needs to be verified with analytics if this should even be here - }, - cta: { - name: method, - }, - }) -} - -export function trackBreakfastSelection({ - breakfastPackage, - hotelId, - units, -}: { - breakfastPackage: BreakfastPackages[number] - hotelId: string - units: number -}) { - console.warn("TODO: Implement trackBreakfastSelection", { - event: "breakfastSelection", - selection: { - name: "breakfast options selection click", - }, - ...(units > 0 && { - ancillaries: [ - { - hotelId, - productCategory: "", - productId: breakfastPackage.code, - productUnits: units, - productPrice: breakfastPackage.localPrice.price * units, - productPoints: 0, - productType: "food", - productName: breakfastPackage.packageType, - }, - ], - }), - }) -} -export function trackBedSelection(bedType: string) { - console.warn("TODO: Implement trackBedSelection", { - event: "bedSelection", - selection: { - name: "bed options selection click", - bedType: bedType, - }, - }) -} -function isPaymentFailEvent(event: PaymentEvent): event is PaymentFailEvent { - return "errorMessage" in event -} diff --git a/apps/scandic-web/components/BookingFlowProviders.tsx b/apps/scandic-web/components/BookingFlowProviders.tsx index 4b9285268..1ce800214 100644 --- a/apps/scandic-web/components/BookingFlowProviders.tsx +++ b/apps/scandic-web/components/BookingFlowProviders.tsx @@ -1,23 +1,8 @@ "use client" import { BookingFlowContextProvider } from "@scandic-hotels/booking-flow/BookingFlowContextProvider" -import { BookingFlowTrackingProvider } from "@scandic-hotels/booking-flow/BookingFlowTrackingProvider" -import { trackEvent } from "@scandic-hotels/tracking/base" import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn" -import { - trackAccordionClick, - trackLoginClick, - trackOpenSidePeekEvent, - trackPaymentEvent, - trackUpdatePaymentMethod, -} from "@/utils/tracking" -import { - trackBedSelection, - trackBookingSearchClick, - trackBreakfastSelection, -} from "@/utils/tracking/booking" -import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay" import type { ReactNode } from "react" @@ -26,22 +11,7 @@ export function BookingFlowProviders({ children }: { children: ReactNode }) { return ( - - {children} - + {children} ) } diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx index 6931e578c..36e217f20 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx @@ -19,6 +19,7 @@ import Link from "@scandic-hotels/design-system/Link" import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { toast } from "@scandic-hotels/design-system/Toast" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trackGlaSaveCardAttempt } from "@scandic-hotels/tracking/payment" import { isWebview } from "@/constants/routes/webviews" import { env } from "@/env/client" @@ -27,7 +28,6 @@ import { useMyStayStore } from "@/stores/my-stay" import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking" import useLang from "@/hooks/useLang" import { trackUpdatePaymentMethod } from "@/utils/tracking" -import { trackGlaSaveCardAttempt } from "@/utils/tracking/myStay" import { type GuaranteeFormData, paymentSchema } from "./schema" diff --git a/apps/scandic-web/components/LanguageSwitcher/index.tsx b/apps/scandic-web/components/LanguageSwitcher/index.tsx index 9f3c687bd..43771a06b 100644 --- a/apps/scandic-web/components/LanguageSwitcher/index.tsx +++ b/apps/scandic-web/components/LanguageSwitcher/index.tsx @@ -8,6 +8,7 @@ import { useIntl } from "react-intl" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trackLanguageSwitchClick } from "@scandic-hotels/tracking/navigation" import { trpc } from "@scandic-hotels/trpc/client" import { languages } from "@/constants/languages" @@ -16,7 +17,6 @@ import useDropdownStore from "@/stores/main-menu" import useClickOutside from "@/hooks/useClickOutside" import { useHandleKeyUp } from "@/hooks/useHandleKeyUp" import useLang from "@/hooks/useLang" -import { trackLanguageSwitchClick } from "@/utils/tracking/navigation" import LanguageSwitcherContainer from "./LanguageSwitcherContainer" import LanguageSwitcherContent from "./LanguageSwitcherContent" diff --git a/apps/scandic-web/utils/tracking/index.ts b/apps/scandic-web/utils/tracking/index.ts index e8fceb980..5722a392d 100644 --- a/apps/scandic-web/utils/tracking/index.ts +++ b/apps/scandic-web/utils/tracking/index.ts @@ -1,11 +1,17 @@ -export { trackAccordionClick, trackOpenSidePeekEvent } from "./componentEvents" export { trackHotelMapClick, trackHotelTabClick } from "./hotelPage" export { trackCancelStay, trackMyStayPageLink } from "./myStay" +export { trackClick } from "@scandic-hotels/tracking/base" +export { + trackAccordionClick, + trackOpenSidePeekEvent, +} from "@scandic-hotels/tracking/componentEvents" export { trackFooterClick, trackLoginClick, trackSocialMediaClick, -} from "./navigation" -export { trackPaymentEvent, trackUpdatePaymentMethod } from "./payment" -export { trackClick } from "@scandic-hotels/tracking/base" +} from "@scandic-hotels/tracking/navigation" export { trackPageViewStart } from "@scandic-hotels/tracking/pageview" +export { + trackPaymentEvent, + trackUpdatePaymentMethod, +} from "@scandic-hotels/tracking/payment" diff --git a/apps/scandic-web/utils/tracking/myStay.ts b/apps/scandic-web/utils/tracking/myStay.ts index b28a0f77e..3a8b3be87 100644 --- a/apps/scandic-web/utils/tracking/myStay.ts +++ b/apps/scandic-web/utils/tracking/myStay.ts @@ -35,32 +35,6 @@ export function trackMyStayPageLink(ctaName: string) { }) } -export function trackGlaSaveCardAttempt({ - hotelId, - hasSavedCreditCard, - creditCardType, - lateArrivalGuarantee, -}: { - hotelId: string - hasSavedCreditCard: boolean - creditCardType?: string - lateArrivalGuarantee: "mandatory" | "yes" | "no" | "na" -}) { - trackEvent({ - event: "glaCardSaveAttempt", - hotelInfo: { - hotelId, - lateArrivalGuarantee, - guaranteedProduct: "room", - }, - paymentInfo: { - status: "glacardsaveattempt", - isSavedCreditCard: hasSavedCreditCard, - type: creditCardType, - }, - }) -} - export function buildAncillariesTracking( packages: { code: string diff --git a/packages/booking-flow/lib/components/BookingFlowTrackingProvider.tsx b/packages/booking-flow/lib/components/BookingFlowTrackingProvider.tsx deleted file mode 100644 index 668839214..000000000 --- a/packages/booking-flow/lib/components/BookingFlowTrackingProvider.tsx +++ /dev/null @@ -1,16 +0,0 @@ -"use client" - -import { TrackingContext, type TrackingFunctions } from "../trackingContext" - -import type { ReactNode } from "react" - -export function BookingFlowTrackingProvider(props: { - children: ReactNode - trackingFunctions: TrackingFunctions -}) { - return ( - - {props.children} - - ) -} diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/index.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/index.tsx index 04551a19b..4091d9441 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/index.tsx +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/index.tsx @@ -10,6 +10,7 @@ import { selectHotelMap, selectRate, } from "@scandic-hotels/common/constants/routes/hotelReservation" +import { trackBookingSearchClick } from "@scandic-hotels/tracking/booking" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" import useLang from "../../../hooks/useLang" @@ -17,7 +18,6 @@ import { BookingCodeFilterEnum, useBookingCodeFilterStore, } from "../../../stores/bookingCode-filter" -import { useTrackingContext } from "../../../trackingContext" import { serializeBookingSearchParams } from "../../../utils/url" import FormContent, { BookingWidgetFormContentSkeleton } from "./FormContent" import { bookingWidgetVariants } from "./variants" @@ -38,7 +38,6 @@ export default function Form({ type, onClose }: BookingWidgetFormProps) { const pathname = usePathname() const lang = useLang() const [isPending, startTransition] = useTransition() - const { trackBookingSearchClick } = useTrackingContext() const setBookingCodeFilter = useBookingCodeFilterStore( (state) => state.setFilter ) diff --git a/packages/booking-flow/lib/components/EnterDetails/BedType/index.tsx b/packages/booking-flow/lib/components/EnterDetails/BedType/index.tsx index 96f617781..6e8f80b75 100644 --- a/packages/booking-flow/lib/components/EnterDetails/BedType/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/BedType/index.tsx @@ -5,6 +5,7 @@ import { useCallback, useEffect, useState } from "react" import { FormProvider, useForm } from "react-hook-form" import RadioCard from "@scandic-hotels/design-system/Form/RadioCard" +import { trackBedSelection } from "@scandic-hotels/tracking/booking" import { BedTypeEnum, type ExtraBedTypeEnum, @@ -13,7 +14,6 @@ import { import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext" import { BED_TYPE_ICONS } from "../../../misc/bedTypeIcons" import { useEnterDetailsStore } from "../../../stores/enter-details" -import { useTrackingContext } from "../../../trackingContext" import { type BedTypeFormSchema, bedTypeFormSchema } from "./schema" import styles from "./bedOptions.module.css" @@ -29,8 +29,6 @@ export default function BedType() { const initialBedType = bedType?.roomTypeCode const [previousBedType, setPreviousBedType] = useState("") - const { trackBedSelection } = useTrackingContext() - const methods = useForm({ criteriaMode: "all", mode: "all", @@ -55,7 +53,7 @@ export default function BedType() { trackBedSelection(bedType.description) } }, - [bedTypes, updateBedType, trackBedSelection] + [bedTypes, updateBedType] ) const selectedBedType = methods.watch("bedType") diff --git a/packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx index b25813d10..e42255806 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Breakfast/index.tsx @@ -10,11 +10,11 @@ import Body from "@scandic-hotels/design-system/Body" import RadioCard from "@scandic-hotels/design-system/Form/RadioCard" import BreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/BreakfastBuffetIcon" import NoBreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/NoBreakfastBuffetIcon" +import { trackBreakfastSelection } from "@scandic-hotels/tracking/booking" import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast" import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext" import { useEnterDetailsStore } from "../../../stores/enter-details" -import { useTrackingContext } from "../../../trackingContext" import { type BreakfastFormSchema, breakfastFormSchema } from "./schema" import styles from "./breakfast.module.css" @@ -28,8 +28,6 @@ export default function Breakfast() { room, } = useRoomContext() - const { trackBreakfastSelection } = useTrackingContext() - const hasChildrenInRoom = !!room.childrenInRoom?.length const totalPriceForNoBreakfast = 0 @@ -63,7 +61,7 @@ export default function Breakfast() { breakfastOption: pkg ? "breakfast buffet" : "no breakfast", }) }, - // eslint-disable-next-line react-hooks/exhaustive-deps + [packages, hotelId, room.adults, updateBreakfast] ) diff --git a/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/index.tsx index 42b6e7929..92fef9c1a 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/index.tsx @@ -18,8 +18,7 @@ import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentO import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from "@scandic-hotels/design-system/Typography" - -import { useTrackingContext } from "../../../../trackingContext" +import { trackUpdatePaymentMethod } from "@scandic-hotels/tracking/payment" import styles from "./guarantee.module.css" @@ -32,7 +31,6 @@ interface GuaranteeProps { export default function Guarantee({ savedCreditCards }: GuaranteeProps) { const intl = useIntl() const guarantee = useWatch({ name: "guarantee" }) - const { trackUpdatePaymentMethod } = useTrackingContext() return (
diff --git a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx index a4b824a26..164f964e7 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx @@ -11,10 +11,10 @@ import Link from "@scandic-hotels/design-system/Link" import { LoginButton } from "@scandic-hotels/design-system/LoginButton" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trackLoginClick } from "@scandic-hotels/tracking/navigation" import { useRoomContext } from "../../../../../contexts/EnterDetails/RoomContext" import useLang from "../../../../../hooks/useLang" -import { useTrackingContext } from "../../../../../trackingContext" import styles from "./joinScandicFriendsCard.module.css" @@ -25,7 +25,6 @@ export default function JoinScandicFriendsCard({ name = "join" }: Props) { const lang = useLang() const intl = useIntl() const loginPathname = useLazyPathname({ includeSearchParams: true }) - const { trackLoginClick } = useTrackingContext() const { room, actions: { updateJoin }, diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx index baff78f19..dae1c47de 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentCallback/HandleErrorCallback.tsx @@ -6,9 +6,9 @@ import { useEffect } from "react" import { PaymentCallbackStatusEnum } from "@scandic-hotels/common/constants/paymentCallbackStatusEnum" import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner" import { trackEvent } from "@scandic-hotels/tracking/base" +import { trackPaymentEvent } from "@scandic-hotels/tracking/payment" import { detailsStorageName } from "../../../../stores/enter-details" -import { useTrackingContext } from "../../../../trackingContext" import { serializeBookingSearchParams } from "../../../../utils/url" import { clearPaymentInfoSessionStorage, @@ -30,7 +30,6 @@ export function HandleErrorCallback({ errorMessage?: string }) { const router = useRouter() - const { trackPaymentEvent } = useTrackingContext() useEffect(() => { const bookingData = window.sessionStorage.getItem(detailsStorageName) @@ -106,7 +105,7 @@ export function HandleErrorCallback({ router.replace(`${returnUrl}?${searchParams.toString()}`) } } - }, [returnUrl, router, searchObject, status, errorMessage, trackPaymentEvent]) + }, [returnUrl, router, searchObject, status, errorMessage]) return } diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentClient.tsx b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentClient.tsx index 5d75007df..a9c25e88c 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentClient.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/PaymentClient.tsx @@ -26,6 +26,10 @@ import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption" import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup" import { Typography } from "@scandic-hotels/design-system/Typography" import { trackEvent } from "@scandic-hotels/tracking/base" +import { + trackGlaSaveCardAttempt, + trackPaymentEvent, +} from "@scandic-hotels/tracking/payment" import { trpc } from "@scandic-hotels/trpc/client" import { bedTypeMap } from "@scandic-hotels/trpc/constants/bedTypeMap" import { SEARCH_TYPE_REDEMPTION } from "@scandic-hotels/trpc/constants/booking" @@ -38,7 +42,6 @@ import { useHandleBookingStatus } from "../../../hooks/useHandleBookingStatus" import { useIsLoggedIn } from "../../../hooks/useIsLoggedIn" import useLang from "../../../hooks/useLang" import { useEnterDetailsStore } from "../../../stores/enter-details" -import { useTrackingContext } from "../../../trackingContext" import ConfirmBooking, { ConfirmBookingRedemption } from "../Confirm" import PriceChangeDialog from "../PriceChangeDialog" import { writeGlaToSessionStorage } from "./PaymentCallback/helpers" @@ -80,7 +83,6 @@ export default function PaymentClient({ const searchParams = useSearchParams() const isUserLoggedIn = useIsLoggedIn() const { getTopOffset } = useStickyPosition({}) - const { trackPaymentEvent, trackGlaSaveCardAttempt } = useTrackingContext() const [showBookingAlert, setShowBookingAlert] = useState(false) @@ -265,7 +267,6 @@ export default function PaymentClient({ bookingMustBeGuaranteed, hasOnlyFlexRates, setIsSubmitting, - trackPaymentEvent, ] ) @@ -504,8 +505,6 @@ export default function PaymentClient({ isUserLoggedIn, getTopOffset, setIsSubmitting, - trackGlaSaveCardAttempt, - trackPaymentEvent, ] ) diff --git a/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx b/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx index 3c32a3f5b..558fa2a0a 100644 --- a/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx +++ b/packages/booking-flow/lib/components/HotelDetailsSidePeek/HotelSidePeekContent/index.tsx @@ -5,8 +5,8 @@ import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trackAccordionClick } from "@scandic-hotels/tracking/componentEvents" -import { useTrackingContext } from "../../../trackingContext" import AdditionalAmenities from "../../AdditionalAmenities" import Contact from "../../Contact" import BreakfastAccordionItem from "../../SidePeekAccordions/BreakfastAccordionItem" @@ -82,7 +82,6 @@ function AccessibilityAccordionItem({ elevatorPitch, }: AccessibilityAccordionItemProps) { const intl = useIntl() - const tracking = useTrackingContext() if (!elevatorPitch) { return null @@ -96,7 +95,7 @@ function AccessibilityAccordionItem({ iconName={IconName.Accessibility} className={styles.accordionItem} type="sidepeek" - onOpen={() => tracking.trackAccordionItemOpen("amenities:accessibility")} + onOpen={() => trackAccordionClick("amenities:accessibility")} >
diff --git a/packages/booking-flow/lib/components/HotelDetailsSidePeek/index.tsx b/packages/booking-flow/lib/components/HotelDetailsSidePeek/index.tsx index 334006638..72044c644 100644 --- a/packages/booking-flow/lib/components/HotelDetailsSidePeek/index.tsx +++ b/packages/booking-flow/lib/components/HotelDetailsSidePeek/index.tsx @@ -5,8 +5,8 @@ import { DialogTrigger } from "react-aria-components" import { Button } from "@scandic-hotels/design-system/Button" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled" +import { trackOpenSidePeekEvent } from "@scandic-hotels/tracking/componentEvents" -import { useTrackingContext } from "../../trackingContext" import { HotelSidePeekContent } from "./HotelSidePeekContent" import type { @@ -58,7 +58,6 @@ export function HotelDetailsSidePeek({ wrapping = true, buttonVariant, }: HotelDetailsSidePeekProps) { - const tracking = useTrackingContext() const buttonProps = buttonPropsMap[buttonVariant] return ( @@ -67,7 +66,7 @@ export function HotelDetailsSidePeek({ {...buttonProps} wrapping={wrapping} onPress={() => - tracking.trackOpenSidePeek({ + trackOpenSidePeekEvent({ name: SidePeekEnum.hotelDetails, hotelId: hotel.operaId, includePathname: true, diff --git a/packages/booking-flow/lib/components/RoomDetailsSidePeek/index.tsx b/packages/booking-flow/lib/components/RoomDetailsSidePeek/index.tsx index 618baabf9..db98201a9 100644 --- a/packages/booking-flow/lib/components/RoomDetailsSidePeek/index.tsx +++ b/packages/booking-flow/lib/components/RoomDetailsSidePeek/index.tsx @@ -5,8 +5,8 @@ import { DialogTrigger } from "react-aria-components" import { Button } from "@scandic-hotels/design-system/Button" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled" +import { trackOpenSidePeekEvent } from "@scandic-hotels/tracking/componentEvents" -import { useTrackingContext } from "../../trackingContext" import { RoomSidePeekContent } from "./RoomSidePeekContent" import type { Room } from "@scandic-hotels/trpc/types/hotel" @@ -53,7 +53,6 @@ export function RoomDetailsSidePeek({ wrapping = true, buttonVariant: variant = "primary", }: RoomDetailsSidePeekProps) { - const tracking = useTrackingContext() const buttonProps = buttonPropsMap[variant] return ( @@ -62,7 +61,7 @@ export function RoomDetailsSidePeek({ {...buttonProps} wrapping={wrapping} onPress={() => - tracking.trackOpenSidePeek({ + trackOpenSidePeekEvent({ name: SidePeekEnum.roomDetails, hotelId, roomTypeCode, diff --git a/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/index.tsx b/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/index.tsx index 4e4260c26..37df296ac 100644 --- a/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/index.tsx +++ b/packages/booking-flow/lib/components/SelectHotel/Filters/HotelFilter/index.tsx @@ -3,9 +3,10 @@ import { usePathname, useSearchParams } from "next/navigation" import { useCallback, useEffect } from "react" +import { trackEvent } from "@scandic-hotels/tracking/base" + import useInitializeFiltersFromUrl from "../../../../hooks/useInitializeFiltersFromUrl" import { useHotelFilterStore } from "../../../../stores/hotel-filters" -import { useTrackingContext } from "../../../../trackingContext" import FilterContent from "../FilterContent" import type { CategorizedHotelFilters } from "../../../../types" @@ -16,7 +17,6 @@ type HotelFiltersProps = { } export default function HotelFilter({ className, filters }: HotelFiltersProps) { - const tracking = useTrackingContext() const searchParams = useSearchParams() const pathname = usePathname() useInitializeFiltersFromUrl() @@ -44,18 +44,13 @@ export default function HotelFilter({ className, filters }: HotelFiltersProps) { .map((id) => surroundingsMap.get(id)) .join(",") - tracking.trackGenericEvent({ + trackEvent({ event: "filterUsed", filter: { filtersUsed: `Filters values - hotelfacilities:${hotelFacilitiesFilter}|hotelsurroundings:${hotelSurroundingsFilter}`, }, }) - }, [ - tracking, - activeFilters, - filters.facilityFilters, - filters.surroundingsFilters, - ]) + }, [activeFilters, filters.facilityFilters, filters.surroundingsFilters]) // Update the URL when the filters changes useEffect(() => { diff --git a/packages/booking-flow/lib/components/SelectHotel/HotelSorter/index.tsx b/packages/booking-flow/lib/components/SelectHotel/HotelSorter/index.tsx index 697cc1aea..5f074ee20 100644 --- a/packages/booking-flow/lib/components/SelectHotel/HotelSorter/index.tsx +++ b/packages/booking-flow/lib/components/SelectHotel/HotelSorter/index.tsx @@ -5,8 +5,7 @@ import { useCallback } from "react" import { useIntl } from "react-intl" import DeprecatedSelect from "@scandic-hotels/design-system/DeprecatedSelect" - -import { useTrackingContext } from "../../../trackingContext" +import { trackEvent } from "@scandic-hotels/tracking/base" const enum SortOrder { Distance = "distance", @@ -27,7 +26,6 @@ type HotelSorterProps = { } export default function HotelSorter({ discreet }: HotelSorterProps) { - const tracking = useTrackingContext() const searchParams = useSearchParams() const pathname = usePathname() const intl = useIntl() @@ -41,7 +39,7 @@ export default function HotelSorter({ discreet }: HotelSorterProps) { const newSearchParams = new URLSearchParams(searchParams) newSearchParams.set("sort", newSort) - tracking.trackGenericEvent({ + trackEvent({ event: "sortOptionClick", filter: { sortOptions: newSort, @@ -53,7 +51,7 @@ export default function HotelSorter({ discreet }: HotelSorterProps) { `${pathname}?${newSearchParams.toString()}` ) }, - [tracking, pathname, searchParams] + [pathname, searchParams] ) const sortItems: SortItem[] = [ { diff --git a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx index 3e0b452d2..16d227d39 100644 --- a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx +++ b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx @@ -17,6 +17,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import Link from "@scandic-hotels/design-system/Link" import { InteractiveMap } from "@scandic-hotels/design-system/Map/InteractiveMap" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trackEvent } from "@scandic-hotels/tracking/base" import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn" import useLang from "../../../../hooks/useLang" @@ -27,7 +28,6 @@ import { } from "../../../../stores/bookingCode-filter" import { useHotelFilterStore } from "../../../../stores/hotel-filters" import { useHotelsMapStore } from "../../../../stores/hotels-map" -import { useTrackingContext } from "../../../../trackingContext" import BookingCodeFilter from "../../../BookingCodeFilter" import { getHotelPins } from "../../../HotelCardDialogListing/utils" import { RoomCardSkeleton } from "../../../RoomCardSkeleton/RoomCardSkeleton" @@ -68,7 +68,6 @@ export function SelectHotelMapContent({ const intl = useIntl() const map = useMap() const isUserLoggedIn = useIsLoggedIn() - const tracking = useTrackingContext() const isAboveMobile = useMediaQuery("(min-width: 900px)") const [visibleHotels, setVisibleHotels] = useState([]) @@ -284,7 +283,7 @@ export function SelectHotelMapContent({ return } - tracking.trackGenericEvent({ + trackEvent({ event: "hotelClickMap", map: { action: "hotel click - map", @@ -297,7 +296,7 @@ export function SelectHotelMapContent({ hotelMapStore.activate(args.hotelName) }} onClickHotel={(hotelId) => { - tracking.trackGenericEvent({ + trackEvent({ event: "hotelClickMap", map: { action: "hotel click - map", diff --git a/packages/booking-flow/lib/components/SidePeekAccordions/BreakfastAccordionItem.tsx b/packages/booking-flow/lib/components/SidePeekAccordions/BreakfastAccordionItem.tsx index 935f34614..60f777ff9 100644 --- a/packages/booking-flow/lib/components/SidePeekAccordions/BreakfastAccordionItem.tsx +++ b/packages/booking-flow/lib/components/SidePeekAccordions/BreakfastAccordionItem.tsx @@ -7,10 +7,9 @@ import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import OpeningHours from "@scandic-hotels/design-system/OpeningHours" import { Typography } from "@scandic-hotels/design-system/Typography" +import { trackAccordionClick } from "@scandic-hotels/tracking/componentEvents" import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType" -import { useTrackingContext } from "../../trackingContext" - import styles from "./sidePeekAccordion.module.css" import type { Restaurant } from "@scandic-hotels/trpc/types/hotel" @@ -25,7 +24,6 @@ export default function BreakfastAccordionItem({ hotelType, }: BreakfastAccordionItemProps) { const intl = useIntl() - const tracking = useTrackingContext() const openingHours = restaurants ?.map((restaurant) => { @@ -46,7 +44,7 @@ export default function BreakfastAccordionItem({ iconName={IconName.CoffeeAlt} type="sidepeek" className={styles.accordionItem} - onOpen={() => tracking.trackAccordionItemOpen("amenities:breakfast")} + onOpen={() => trackAccordionClick("amenities:breakfast")} > {openingHours ? ( tracking.trackAccordionItemOpen("amenities:check-in")} + onOpen={() => trackAccordionClick("amenities:check-in")} >
diff --git a/packages/booking-flow/lib/components/SidePeekAccordions/ParkingAccordionItem.tsx b/packages/booking-flow/lib/components/SidePeekAccordions/ParkingAccordionItem.tsx index ae5a7229a..b703e4bec 100644 --- a/packages/booking-flow/lib/components/SidePeekAccordions/ParkingAccordionItem.tsx +++ b/packages/booking-flow/lib/components/SidePeekAccordions/ParkingAccordionItem.tsx @@ -7,8 +7,7 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink" import { IconName } from "@scandic-hotels/design-system/Icons/iconName" import ParkingInformation from "@scandic-hotels/design-system/ParkingInformation" import { Typography } from "@scandic-hotels/design-system/Typography" - -import { useTrackingContext } from "../../trackingContext" +import { trackAccordionClick } from "@scandic-hotels/tracking/componentEvents" import styles from "./sidePeekAccordion.module.css" @@ -26,7 +25,6 @@ export default function ParkingAccordionItem({ parkingPageHref, }: ParkingAccordionItemProps) { const intl = useIntl() - const tracking = useTrackingContext() if (!parking.length && !elevatorPitch && !parkingPageHref) { return null @@ -40,7 +38,7 @@ export default function ParkingAccordionItem({ iconName={IconName.Parking} type="sidepeek" className={styles.accordionItem} - onOpen={() => tracking.trackAccordionItemOpen("amenities:parking")} + onOpen={() => trackAccordionClick("amenities:parking")} >
{elevatorPitch ? ( diff --git a/packages/booking-flow/lib/trackingContext.tsx b/packages/booking-flow/lib/trackingContext.tsx deleted file mode 100644 index 303bb2dff..000000000 --- a/packages/booking-flow/lib/trackingContext.tsx +++ /dev/null @@ -1,57 +0,0 @@ -"use client" - -import { createContext, useContext } from "react" - -import type { - PaymentEvent, - TrackingPosition, -} from "@scandic-hotels/tracking/types" -import type { BreakfastPackages } from "@scandic-hotels/trpc/routers/hotels/output" - -export type TrackingFunctions = { - trackBookingSearchClick: ( - searchTerm: string, - searchType: "hotel" | "destination" - ) => void - trackAccordionItemOpen: (option: string) => void - trackOpenSidePeek: (input: { - name: string | null - hotelId: string - includePathname?: boolean - roomTypeCode?: string | null - }) => void - // eslint-disable-next-line @typescript-eslint/no-explicit-any - trackGenericEvent(data: any): void - trackLoginClick(position: TrackingPosition & (string & {})): void - trackPaymentEvent(payment: PaymentEvent): void - trackGlaSaveCardAttempt(args: { - hotelId: string - hasSavedCreditCard: boolean - creditCardType?: string - lateArrivalGuarantee: "mandatory" | "yes" | "no" | "na" - }): void - trackUpdatePaymentMethod(args: { method: string }): void - trackBreakfastSelection(args: { - breakfastPackage: BreakfastPackages[number] - hotelId: string - units: number - breakfastOption: string - }): void - trackBedSelection(bedType: string): void -} - -export const TrackingContext = createContext( - undefined -) - -export const useTrackingContext = (): TrackingFunctions => { - const context = useContext(TrackingContext) - - if (!context) { - throw new Error( - "useTrackingContext must be used within a BookingFlowTrackingProvider. Did you forget to use the provider in the consuming app?" - ) - } - - return context -} diff --git a/packages/booking-flow/package.json b/packages/booking-flow/package.json index cbe080044..572525faa 100644 --- a/packages/booking-flow/package.json +++ b/packages/booking-flow/package.json @@ -13,7 +13,6 @@ "exports": { "./BookingFlowConfig": "./lib/bookingFlowConfig/bookingFlowConfig.tsx", "./BookingFlowContextProvider": "./lib/components/BookingFlowContextProvider.tsx", - "./BookingFlowTrackingProvider": "./lib/components/BookingFlowTrackingProvider.tsx", "./BookingWidget": "./lib/components/BookingWidget/index.tsx", "./BookingWidget/BookingWidgetForm/FormContent/Search": "./lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/index.tsx", "./BookingWidget/FloatingBookingWidget": "./lib/components/BookingWidget/FloatingBookingWidget/index.tsx", diff --git a/apps/scandic-web/utils/tracking/booking.ts b/packages/tracking/lib/booking.ts similarity index 95% rename from apps/scandic-web/utils/tracking/booking.ts rename to packages/tracking/lib/booking.ts index 0666f5b98..2becac598 100644 --- a/apps/scandic-web/utils/tracking/booking.ts +++ b/packages/tracking/lib/booking.ts @@ -1,6 +1,6 @@ "use client" -import { trackEvent } from "@scandic-hotels/tracking/base" +import { trackEvent } from "./base" import type { BreakfastPackages } from "@scandic-hotels/trpc/routers/hotels/output" diff --git a/apps/scandic-web/utils/tracking/componentEvents.ts b/packages/tracking/lib/componentEvents.ts similarity index 91% rename from apps/scandic-web/utils/tracking/componentEvents.ts rename to packages/tracking/lib/componentEvents.ts index 3d6077e68..e239533ce 100644 --- a/apps/scandic-web/utils/tracking/componentEvents.ts +++ b/packages/tracking/lib/componentEvents.ts @@ -1,5 +1,5 @@ "use client" -import { trackEvent } from "@scandic-hotels/tracking/base" +import { trackEvent } from "./base" export function trackAccordionClick(option: string) { trackEvent({ diff --git a/apps/scandic-web/utils/tracking/navigation.ts b/packages/tracking/lib/navigation.ts similarity index 100% rename from apps/scandic-web/utils/tracking/navigation.ts rename to packages/tracking/lib/navigation.ts diff --git a/apps/scandic-web/utils/tracking/payment.ts b/packages/tracking/lib/payment.ts similarity index 65% rename from apps/scandic-web/utils/tracking/payment.ts rename to packages/tracking/lib/payment.ts index 4bbb46e88..fdee2a93e 100644 --- a/apps/scandic-web/utils/tracking/payment.ts +++ b/packages/tracking/lib/payment.ts @@ -39,3 +39,29 @@ export function trackPaymentEvent(paymentEvent: PaymentEvent) { } trackEvent(paymentAttempt) } + +export function trackGlaSaveCardAttempt({ + hotelId, + hasSavedCreditCard, + creditCardType, + lateArrivalGuarantee, +}: { + hotelId: string + hasSavedCreditCard: boolean + creditCardType?: string + lateArrivalGuarantee: "mandatory" | "yes" | "no" | "na" +}) { + trackEvent({ + event: "glaCardSaveAttempt", + hotelInfo: { + hotelId, + lateArrivalGuarantee, + guaranteedProduct: "room", + }, + paymentInfo: { + status: "glacardsaveattempt", + isSavedCreditCard: hasSavedCreditCard, + type: creditCardType, + }, + }) +}