Merged in feat/enter-details-tracking (pull request #1185)

Feat/enter details tracking

* feat: fixed bug in enter details tracking

* Sidepeek events, lowestroomPrice and analyticsRateCode

* Cleanup and fixed bug

* Fixed analyticsratecode

* Merge master

* merge master

* Removed console logs

* Added ancillaries tracking to enter details

* Added ancillary on confirmation page

* Removed console log

* Merge branch 'master' into feat/enter-details-tracking

* Refactor searchparams

* Hard code values for breakfast ancillary


Approved-by: Joakim Jäderberg

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx

@@ -75,7 +75,6 @@ export default async function SelectRatePage({
     country: hotelData?.data?.attributes.address.country,
     hotelID: hotel?.id,
     region: hotelData?.data?.attributes.address.city,
-    //lowestRoomPrice:
   }
 
   const hotelId = +hotel.id

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/enterDetailsTracking.tsx

@@ -9,6 +9,7 @@ import { createSDKPageObject, pushToDataLayer } from "@/utils/tracking"
 
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import {
+  type Ancillary,
   TrackingChannelEnum,
   type TrackingSDKHotelInfo,
   type TrackingSDKPageData,
@@ -35,21 +36,11 @@ export default function EnterDetailsTracking(props: Props) {
     cancellationRule,
   } = props
 
-  const {
-    currentStep,
-    bedType,
-    breakfast,
-    totalPrice,
-    roomPrice,
-    roomRate,
-    packages,
-  } = useEnterDetailsStore((state) => state)
+  const { bedType, breakfast, totalPrice, roomPrice, roomRate, packages } =
+    useEnterDetailsStore((state) => state)
   const pathName = usePathname()
   const sessionId = useSessionId()
 
-  // We need this check to differentiate hard vs soft navigations
-  // This is not because of StrictMode
-  const hasRunInitial = useRef<boolean>(false)
   const previousPathname = useRef<string | null>(null)
 
   const getSpecialRoomType = (packages: Packages | null) => {
@@ -77,34 +68,61 @@ export default function EnterDetailsTracking(props: Props) {
     }
   }
 
+  const getAnalyticsRateCode = (rateCodeName: string | undefined) => {
+    switch (rateCodeName) {
+      case "FLEXEU":
+        return "flex"
+      case "CHANGEEU":
+        return "change"
+      case "SAVEEU":
+        return "save"
+      default:
+        return rateCodeName
+    }
+  }
+
   const pageObject = useMemo(() => {
+    const stepByPathname = pathName.split("/").pop()!
     const pageTrackingData: TrackingSDKPageData = {
-      pageId: currentStep,
+      pageId: stepByPathname,
       domainLanguage: lang,
       channel: TrackingChannelEnum["hotelreservation"],
-      pageName: `hotelreservation|${currentStep}`,
-      siteSections: `hotelreservation|${currentStep}`,
-      pageType: currentStep,
+      pageName: `hotelreservation|${stepByPathname}`,
+      siteSections: `hotelreservation|${stepByPathname}`,
+      pageType: stepByPathname,
       siteVersion: "new-web",
     }
 
     const trackingData = {
       ...pageTrackingData,
-      sessionId,
       pathName,
+      sessionId,
       pageLoadTime: 0, // Yes, this is instant
     }
     const pageObject = createSDKPageObject(trackingData)
+
     return pageObject
-  }, [currentStep, lang, pathName, sessionId])
+  }, [lang, sessionId, pathName])
 
   const hotelDetailsData = useMemo(() => {
     const isMember = true
     const rate = isMember ? roomRate.memberRate : roomRate.publicRate
+
+    const breakfastAncillary = breakfast && {
+      hotelid: initialHotelsTrackingData.hotelID,
+      productName: "BreakfastAdult",
+      productCategory: "", // TODO: Add category
+      productId: breakfast.code,
+      productPrice: +breakfast.localPrice.price,
+      productUnits: initialHotelsTrackingData.noOfAdults,
+      productPoints: 0,
+      productType: "food",
+    }
+
     const data: TrackingSDKHotelInfo = {
       ...initialHotelsTrackingData,
       rateCode: rate?.rateCode,
-      rateCodeType: rate?.rateType,
+      rateCodeType: roomRate.publicRate.rateType,
       rateCodeName: rate?.rateCode,
       rateCodeCancellationRule: cancellationRule,
       revenueCurrencyCode: totalPrice.local?.currency,
@@ -119,39 +137,32 @@ export default function EnterDetailsTracking(props: Props) {
         ? roomRate.publicRate.localPrice.pricePerStay -
           roomRate.memberRate.localPrice.pricePerStay
         : 0,
+      analyticsrateCode: getAnalyticsRateCode(roomRate.publicRate.rateCode),
+      ancillaries: breakfastAncillary ? [breakfastAncillary] : [],
     }
 
     return data
   }, [
-    roomRate.memberRate,
-    roomRate.publicRate,
+    bedType,
+    breakfast,
+    totalPrice,
+    roomPrice,
+    roomRate,
+    packages,
     initialHotelsTrackingData,
     cancellationRule,
-    totalPrice.local?.currency,
-    totalPrice.local?.price,
-    breakfast,
-    packages,
     selectedRoom.roomType,
-    bedType?.description,
-    bedType?.roomTypeCode,
-    roomPrice.perStay.local.price,
   ])
 
   useEffect(() => {
-    if (!hasRunInitial.current) {
-      hasRunInitial.current = true
-      previousPathname.current = pathName // Set initial path to compare later
-      return
+    if (previousPathname.current !== pathName) {
+      pushToDataLayer({
+        event: "pageView",
+        pageInfo: pageObject,
+        userInfo: userTrackingData,
+        hotelInfo: hotelDetailsData,
+      })
     }
-
-    //if (previousPathname.current !== pathName) {
-    pushToDataLayer({
-      event: "pageView",
-      pageInfo: pageObject,
-      userInfo: userTrackingData,
-      //hotelInfo: hotelDetailsData,
-    })
-    //}
     previousPathname.current = pathName // Update for next render
   }, [userTrackingData, pageObject, hotelDetailsData, pathName])
 

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.tsx

@@ -162,16 +162,6 @@ export default async function StepPage({
   const departureDate = new Date(toDate)
   const hotelAttributes = hotelData?.data.attributes
 
-  const initialPageTrackingData: TrackingSDKPageData = {
-    pageId: searchParams.step,
-    domainLanguage: lang,
-    channel: TrackingChannelEnum["hotelreservation"],
-    pageName: `hotelreservation|${searchParams.step}`,
-    siteSections: `hotelreservation|${searchParams.step}`,
-    pageType: searchParams.step,
-    siteVersion: "new-web",
-  }
-
   const initialHotelsTrackingData: TrackingSDKHotelInfo = {
     searchTerm: searchParams.city,
     arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
@@ -297,12 +287,6 @@ export default async function StepPage({
         cancellationRule={roomAvailability.cancellationText}
         lang={lang}
       />
-      <Suspense fallback={null}>
-        <TrackingSDK
-          pageData={initialPageTrackingData}
-          hotelInfo={initialHotelsTrackingData}
-        />
-      </Suspense>
     </EnterDetailsProvider>
   )
 }