Merged in feat/sw-3473-remove-tracking-context (pull request #2843)

feat(SW-3473): Rework booking-flow tracking provider * Remove tracking context and import instead * Remove unused file Approved-by: Joakim Jäderberg
2025-09-22 13:08:10 +00:00
parent a7b19e8b14
commit 630e89c845
30 changed files with 77 additions and 382 deletions
--- 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 (
    <BookingFlowContextProvider data={{ isLoggedIn }}>
-      <BookingFlowTrackingProvider
-        trackingFunctions={{
-          trackBookingSearchClick,
-          trackAccordionItemOpen,
-          trackOpenSidePeek,
-          trackGenericEvent,
-          trackGlaSaveCardAttempt,
-          trackLoginClick,
-          trackPaymentEvent,
-          trackUpdatePaymentMethod,
-          trackBreakfastSelection,
-          trackBedSelection,
-        }}
-      >
-        {children}
-      </BookingFlowTrackingProvider>
+      {children}
    </BookingFlowContextProvider>
  )
 }
--- a/apps/partner-sas/utils/tracking.ts
+++ b/apps/partner-sas/utils/tracking.ts
@@ -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
-}
--- 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 (
    <BookingFlowContextProvider data={{ isLoggedIn }}>
-      <BookingFlowTrackingProvider
-        trackingFunctions={{
-          trackBookingSearchClick,
-          trackAccordionItemOpen: trackAccordionClick,
-          trackOpenSidePeek: trackOpenSidePeekEvent,
-          trackGenericEvent: trackEvent,
-          trackGlaSaveCardAttempt,
-          trackLoginClick,
-          trackPaymentEvent,
-          trackUpdatePaymentMethod,
-          trackBreakfastSelection,
-          trackBedSelection,
-        }}
-      >
-        {children}
-      </BookingFlowTrackingProvider>
+      {children}
    </BookingFlowContextProvider>
  )
 }
--- 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"

--- 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"
--- 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"
--- 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
--- a/packages/booking-flow/lib/components/BookingFlowTrackingProvider.tsx
+++ b/packages/booking-flow/lib/components/BookingFlowTrackingProvider.tsx
@@ -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 (
-    <TrackingContext value={props.trackingFunctions}>
-      {props.children}
-    </TrackingContext>
-  )
-}
--- 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
  )
--- 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<BedTypeFormSchema>({
    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")
--- 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]
  )

--- 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 (
    <div className={styles.guarantee}>
--- 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 },
--- 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 <LoadingSpinner fullPage />
 }
--- 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,
    ]
  )

--- 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")}
    >
      <div className={styles.accessibilityContent}>
        <Typography variant="Body/Paragraph/mdRegular">
--- 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,
--- 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,
--- 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(() => {
--- 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[] = [
    {
--- 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<HotelResponse[]>([])
@@ -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",
--- 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 ? (
        <OpeningHours
--- a/packages/booking-flow/lib/components/SidePeekAccordions/CheckInCheckOutAccordionItem.tsx
+++ b/packages/booking-flow/lib/components/SidePeekAccordions/CheckInCheckOutAccordionItem.tsx
@@ -6,8 +6,7 @@ import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
 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"

@@ -21,7 +20,6 @@ export default function CheckInCheckOutAccordionItem({
  checkInData,
 }: CheckInCheckOutAccordionItemProps) {
  const intl = useIntl()
-  const tracking = useTrackingContext()

  const { checkInTime, checkOutTime } = checkInData

@@ -31,7 +29,7 @@ export default function CheckInCheckOutAccordionItem({
      iconName={IconName.Business}
      type="sidepeek"
      className={styles.accordionItem}
-      onOpen={() => tracking.trackAccordionItemOpen("amenities:check-in")}
+      onOpen={() => trackAccordionClick("amenities:check-in")}
    >
      <div className={styles.checkInCheckOutContent}>
        <Typography variant="Title/Overline/sm">
--- 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")}
    >
      <div className={styles.parkingContent}>
        {elevatorPitch ? (
--- a/packages/booking-flow/lib/trackingContext.tsx
+++ b/packages/booking-flow/lib/trackingContext.tsx
@@ -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<TrackingFunctions | undefined>(
-  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
-}
--- 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",
--- a/apps/scandic-web/utils/tracking/booking.ts
+++ b/apps/scandic-web/utils/tracking/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"

--- a/apps/scandic-web/utils/tracking/componentEvents.ts
+++ b/apps/scandic-web/utils/tracking/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({
--- a/apps/scandic-web/utils/tracking/navigation.ts
+++ b/apps/scandic-web/utils/tracking/navigation.ts
--- a/apps/scandic-web/utils/tracking/payment.ts
+++ b/apps/scandic-web/utils/tracking/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,
+    },
+  })
+}