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

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

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]
   )
 

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

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

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

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,
     ]
   )