Merged in fix/tracking-fixes (pull request #1930)

Fix/tracking fixes

* fix: remove hotelInfo and paymentInfo when user reloads page on confirmation page

* fix: clean session storage item on unmount

* fix: commented out hard navigation hook

* fix: update price calculation on room ancillary in tracking

* fix: update discount calculation

* fix: add space between fns

* fix: allow useSoftNavigation to fire pageview again on same pathname

* fix: prevent bedSelection and breakfastSelection from tracking twice


Approved-by: Hrishikesh Vaipurkar

apps/scandic-web/components/HotelReservation/BookingConfirmation/Tracking/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { useEffect, useState } from "react"
+
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
 import TrackingSDK from "@/components/TrackingSDK"
@@ -17,6 +19,22 @@ export default function Tracking({
 }) {
   const lang = useLang()
   const bookingRooms = useBookingConfirmationStore((state) => state.rooms)
+
+  const [hasLoadedBookingConfirmation] = useState(() => {
+    if (typeof window !== "undefined") {
+      return sessionStorage.getItem("hasLoadedBookingConfirmation")
+    }
+    return null
+  })
+
+  useEffect(() => {
+    sessionStorage.setItem("hasLoadedBookingConfirmation", "true")
+
+    return () => {
+      sessionStorage.removeItem("hasLoadedBookingConfirmation")
+    }
+  }, [])
+
   if (!bookingRooms.every(Boolean)) {
     return null
   }
@@ -34,8 +52,8 @@ export default function Tracking({
   return (
     <TrackingSDK
       pageData={pageTrackingData}
-      hotelInfo={hotelsTrackingData}
+      hotelInfo={hasLoadedBookingConfirmation ? undefined : hotelsTrackingData}
-      paymentInfo={paymentInfo}
+      paymentInfo={hasLoadedBookingConfirmation ? undefined : paymentInfo}
       ancillaries={ancillaries}
     />
   )

apps/scandic-web/components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -57,7 +57,9 @@ export default function BedType() {
   const selectedBedType = methods.watch("bedType")
   const handleSubmit = methods.handleSubmit
   useEffect(() => {
-    handleSubmit(onSubmit)()
+    if (selectedBedType) {
+      handleSubmit(onSubmit)()
+    }
   }, [selectedBedType, handleSubmit, onSubmit])
 
   return (

apps/scandic-web/components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -69,7 +69,9 @@ export default function Breakfast() {
   const selectedBreakfast = methods.watch("breakfast")
   const handleSubmit = methods.handleSubmit
   useEffect(() => {
-    handleSubmit(onSubmit)()
+    if (selectedBreakfast) {
+      handleSubmit(onSubmit)()
+    }
   }, [selectedBreakfast, handleSubmit, onSubmit])
 
   return (

apps/scandic-web/components/HotelReservation/EnterDetails/Tracking/tracking.ts

@@ -93,22 +93,27 @@ export function getTracking(
       .join("|"),
     country: hotel?.address.country,
     departureDate: format(departureDate, "yyyy-MM-dd"),
-    discount: rooms
+    discount: rooms.reduce((total, room, idx) => {
-      .map((room, idx) => {
+      const isMainRoom = idx === 0
-        const isMainRoom = idx === 0
+      if (
-        if (
+        hasMemberPrice(room.roomRate) &&
-          hasMemberPrice(room.roomRate) &&
+        isMainRoom &&
-          isMainRoom &&
+        isMember &&
-          isMember &&
+        hasPublicPrice(room.roomRate)
-          hasPublicPrice(room.roomRate)
+      ) {
-        ) {
+        const memberPrice = room.roomRate.member.localPrice.pricePerStay
-          const memberPrice = room.roomRate.member.localPrice.pricePerStay
+        const publicPrice = room.roomRate.public.localPrice.pricePerStay
-          const publicPrice = room.roomRate.public.localPrice.pricePerStay
+        total += publicPrice - memberPrice
-          return publicPrice - memberPrice
+      } else if (
-        }
+        hasPublicPrice(room.roomRate) &&
-        return 0
+        room.roomRate.public.localPrice.regularPricePerStay
-      })
+      ) {
-      .join(","),
+        const publicPrice = room.roomRate.public.localPrice.pricePerStay
+        const regularPrice = room.roomRate.public.localPrice.regularPricePerStay
+        total += regularPrice - publicPrice
+      }
+      return total
+    }, 0),
     duration: differenceInCalendarDays(departureDate, arrivalDate),
     hotelID: hotel?.operaId,
     leadTime: differenceInCalendarDays(arrivalDate, new Date()),
@@ -194,19 +199,18 @@ export function getTracking(
   const ancillaries: TrackingSDKAncillaries = roomsWithPetRoom
     .slice(0, 1) // should only be one item
     .map((room) => {
-      const petRoomPackage = room.packages.find(
+      return room.packages
-        (p) => p.code === RoomPackageCodeEnum.PET_ROOM
+        .filter((p) => p.code === RoomPackageCodeEnum.PET_ROOM)
-      )
+        .map((pkg) => ({
-      return {
+          hotelId: hotel.operaId,
-        hotelId: hotel.operaId,
+          productId: pkg.code,
-        productId: petRoomPackage?.code!, // property is guaranteed at this point
+          productUnits: roomsWithPetRoom.length,
-        productUnits: roomsWithPetRoom.length,
+          productPoints: 0,
-        productPoints: 0,
+          productPrice: pkg.localPrice.totalPrice * roomsWithPetRoom.length,
-        productPrice: petRoomPackage?.localPrice.totalPrice ?? 0,
+          productType: "room preference",
-        productType: "room preference",
+          productName: "pet room",
-        productName: "pet room",
+          productCategory: "",
-        productCategory: "",
+        }))[0]
-      }
     })
 
   return {
@@ -215,6 +219,7 @@ export function getTracking(
     ancillaries,
   }
 }
+
 function hasPublicPrice(
   roomRate: Product
 ): roomRate is PriceProduct & { public: NonNullable<PriceProduct["public"]> } {
@@ -223,6 +228,7 @@ function hasPublicPrice(
   }
   return false
 }
+
 function hasMemberPrice(
   roomRate: Product
 ): roomRate is PriceProduct & { member: NonNullable<PriceProduct["member"]> } {
@@ -231,6 +237,7 @@ function hasMemberPrice(
   }
   return false
 }
+
 function hasPetRoom(
   room: Room
 ): room is Room & { packages: NonNullable<Room["packages"]> } {
@@ -239,6 +246,7 @@ function hasPetRoom(
   }
   return room.packages.some((p) => p.code === RoomPackageCodeEnum.PET_ROOM)
 }
+
 function calcTotalPrice(rooms: Room[], isMember: boolean) {
   const totalRoomPrice = calcTotalRoomPrice(rooms, isMember)
   const totalPackageSum = rooms.reduce((total, room) => {
@@ -247,6 +255,7 @@ function calcTotalPrice(rooms: Room[], isMember: boolean) {
   }, 0)
   return totalRoomPrice + totalPackageSum
 }
+
 function calcTotalRoomPrice(rooms: Room[], isMember: boolean) {
   return rooms.reduce((total, room, idx) => {
     // When it comes special rates, only redemption has additional price and that should be added

apps/scandic-web/components/TrackingSDK/hooks.ts

@@ -1,13 +1,7 @@
 "use client"
 
 import { usePathname } from "next/navigation"
-import {
+import { startTransition, useEffect, useRef, useState } from "react"
-  startTransition,
-  useEffect,
-  useOptimistic,
-  useRef,
-  useState,
-} from "react"
 
 import { trpc } from "@/lib/trpc/client"
 import useRouterTransitionStore from "@/stores/router-transition"
@@ -105,7 +99,6 @@ export const useTrackSoftNavigation = ({
     isError,
   } = trpc.user.userTrackingInfo.useQuery()
 
-  const [loading, setLoading] = useOptimistic(false)
   const [status, setStatus] = useState<TransitionStatus>(
     TransitionStatusEnum.NotRun
   )
@@ -125,22 +118,17 @@ export const useTrackSoftNavigation = ({
     if (isTransitioning && status === TransitionStatusEnum.NotRun) {
       startTransition(() => {
         setStatus(TransitionStatusEnum.Running)
-        setLoading(true)
       })
       return
     }
 
-    if (
+    if (isTransitioning && status === TransitionStatusEnum.Running) {
-      !loading &&
-      isTransitioning &&
-      status === TransitionStatusEnum.Running
-    ) {
       setStatus(TransitionStatusEnum.Done)
       stopRouterTransition()
       return
     }
 
-    if (!loading && !isTransitioning && status === TransitionStatusEnum.Done) {
+    if (!isTransitioning && status === TransitionStatusEnum.Done) {
       const pageLoadTime = getPageLoadTime()
       const trackingData = {
         ...pageData,
@@ -149,29 +137,27 @@ export const useTrackSoftNavigation = ({
         pageLoadTime: pageLoadTime,
       }
       const pageObject = createSDKPageObject(trackingData)
-      if (previousPathname.current !== pathName) {
+      const userData: TrackingSDKUserData = isError
-        const userData: TrackingSDKUserData = isError
+        ? { loginStatus: "Error" }
-          ? { loginStatus: "Error" }
+        : userTrackingData
-          : userTrackingData
 
-        trackPageView({
+      trackPageView({
-          event: "pageView",
+        event: "pageView",
-          pageInfo: pageObject,
+        pageInfo: pageObject,
-          userInfo: userData,
+        userInfo: userData,
-          hotelInfo: hotelInfo,
+        hotelInfo: hotelInfo,
-          paymentInfo,
+        paymentInfo,
-          ancillaries,
+        ancillaries,
-        })
+      })
-      }
+
+      setStatus(TransitionStatusEnum.NotRun) // Reset status
       previousPathname.current = pathName // Update for next render
     }
   }, [
     isError,
     isPending,
     isTransitioning,
-    loading,
     status,
-    setLoading,
     stopRouterTransition,
     pageData,
     pathName,

apps/scandic-web/components/TrackingSDK/index.tsx

@@ -1,9 +1,6 @@
 "use client"
 
-import {
+import { useTrackSoftNavigation } from "@/components/TrackingSDK/hooks"
-  useTrackHardNavigation,
-  useTrackSoftNavigation,
-} from "@/components/TrackingSDK/hooks"
 
 import type {
   TrackingSDKAncillaries,
@@ -23,7 +20,9 @@ export default function TrackingSDK({
   paymentInfo?: TrackingSDKPaymentInfo
   ancillaries?: TrackingSDKAncillaries
 }) {
-  useTrackHardNavigation({ pageData, hotelInfo, paymentInfo, ancillaries })
+  // This hook doesnt seem to be needed. Soft navigation hook seems to fire
+  // on both hard and soft navigations
+  // useTrackHardNavigation({ pageData, hotelInfo, paymentInfo, ancillaries })
   useTrackSoftNavigation({ pageData, hotelInfo, paymentInfo, ancillaries })
 
   return null