Merged in feat/BOOK-131-tracking-no-availability (pull request #2886)

feat(BOOK-131): add no availability tracking

* feat(BOOK-131): add no availability tracking

* feat(BOOK-131): add no availability tracking

* feat(BOOK-131): extract noAvailability function

* feat(BOOK-131): fix every render problem

* feat(BOOK-131): noavailability handle return in function


Approved-by: Erik Tiekstra
Approved-by: Joakim Jäderberg

packages/booking-flow/lib/components/EnterDetails/Payment/BookingAlert/index.tsx

@@ -1,17 +1,19 @@
 "use client"
 
 import { usePathname, useSearchParams } from "next/navigation"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { AlertTypeEnum } from "@scandic-hotels/common/constants/alert"
 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
 import { Alert } from "@scandic-hotels/design-system/Alert"
+import { trackNoAvailability } from "@scandic-hotels/tracking/NoAvailabilityTracking"
 import { BookingErrorCodeEnum } from "@scandic-hotels/trpc/enums/bookingErrorCode"
 
 import useLang from "../../../../hooks/useLang"
 import { useEnterDetailsStore } from "../../../../stores/enter-details"
+import { mapPackageToLabel } from "../../../../utils/getRoomFeatureDescription"
 
 import styles from "./bookingAlert.module.css"
 
@@ -19,6 +21,7 @@ function useBookingErrorAlert() {
   const updateSearchParams = useEnterDetailsStore(
     (state) => state.actions.updateSeachParamString
   )
+
   const intl = useIntl()
   const lang = useLang()
   const searchParams = useSearchParams()
@@ -102,6 +105,12 @@ export default function BookingAlert({ isVisible = false }: BookingAlertProps) {
     selectRateReturnUrl,
   } = useBookingErrorAlert()
 
+  const trackNoAvailabilityError = useNoAvailabilityTracking()
+
+  const isAvailabilityError =
+    errorCode === BookingErrorCodeEnum.AvailabilityError ||
+    errorCode === BookingErrorCodeEnum.NoAvailabilityForRateAndRoomType
+
   const ref = useRef<HTMLDivElement>(null)
   const { getTopOffset } = useStickyPosition()
 
@@ -122,11 +131,13 @@ export default function BookingAlert({ isVisible = false }: BookingAlertProps) {
     }
   }, [showAlert, getTopOffset])
 
-  if (!showAlert) return null
+  useEffect(() => {
+    if (showAlert && isAvailabilityError) {
+      trackNoAvailabilityError()
+    }
+  }, [showAlert, isAvailabilityError, trackNoAvailabilityError])
 
-  const isAvailabilityError =
-    errorCode === BookingErrorCodeEnum.AvailabilityError ||
-    errorCode === BookingErrorCodeEnum.NoAvailabilityForRateAndRoomType
+  if (!showAlert) return null
 
   return (
     <div className={styles.wrapper} ref={ref}>
@@ -149,3 +160,48 @@ export default function BookingAlert({ isVisible = false }: BookingAlertProps) {
     </div>
   )
 }
+
+function useNoAvailabilityTracking() {
+  const { fromDate, toDate, hotelId, bookingCode, searchType, rooms } =
+    useEnterDetailsStore((state) => state.booking)
+  const lang = useLang()
+
+  const specialRoomType = rooms
+    ?.map((room) => {
+      const packages = room.packages
+        ?.map((pkg) => mapPackageToLabel(pkg))
+        .join(",")
+      return packages ?? ""
+    })
+    .join("|")
+
+  const track = useCallback(
+    () =>
+      trackNoAvailability({
+        specialRoomType,
+        lang,
+        searchTerm: hotelId,
+        fromDate,
+        toDate,
+        hotelId,
+        noOfRooms: rooms.length,
+        searchType,
+        bookingCode: bookingCode ?? "n/a",
+        pageId: "details",
+        pageName: "hotelreservation|details",
+        pageType: "bookingenterdetailspage",
+        siteSections: "hotelreservation|details",
+      }),
+    [
+      specialRoomType,
+      lang,
+      hotelId,
+      fromDate,
+      toDate,
+      rooms.length,
+      searchType,
+      bookingCode,
+    ]
+  )
+  return track
+}