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/SelectRate/AvailabilityError.tsx

@@ -1,16 +1,29 @@
 "use client"
 
 import { usePathname, useSearchParams } from "next/navigation"
-import { useEffect } from "react"
+import { useCallback, useEffect } from "react"
 import { useIntl } from "react-intl"
 
 import { toast } from "@scandic-hotels/design-system/Toast"
+import { trackNoAvailability } from "@scandic-hotels/tracking/NoAvailabilityTracking"
 import { BookingErrorCodeEnum } from "@scandic-hotels/trpc/enums/bookingErrorCode"
 
-export default function AvailabilityError() {
+import useLang from "../../hooks/useLang"
+import { mapPackageToLabel } from "../../utils/getRoomFeatureDescription"
+
+import type { SelectRateBooking } from "../../types/components/selectRate/selectRate"
+
+type AvailabilityErrorProps = {
+  booking: SelectRateBooking
+}
+
+export default function AvailabilityError({ booking }: AvailabilityErrorProps) {
   const intl = useIntl()
   const pathname = usePathname()
   const searchParams = useSearchParams()
+  const lang = useLang()
+
+  const { rooms, fromDate, toDate, hotelId, bookingCode, searchType } = booking
 
   const errorCode = searchParams.get("errorCode")
   const hasAvailabilityError =
@@ -21,15 +34,51 @@ export default function AvailabilityError() {
       "Unfortunately, one of the rooms you selected is sold out. Please choose another room to proceed.",
   })
 
+  const noAvailabilityTracking = useCallback(() => {
+    const specialRoomType = rooms
+      ?.map((room) => {
+        const packages = room.packages
+          ?.map((pkg) => {
+            mapPackageToLabel(pkg)
+          })
+          .join(",")
+
+        return packages ?? ""
+      })
+      .join("|")
+
+    trackNoAvailability({
+      specialRoomType,
+      searchTerm: hotelId,
+      lang,
+      fromDate,
+      toDate,
+      noOfRooms: rooms.length,
+      searchType,
+      hotelId,
+      bookingCode,
+      pageId: "select-rate",
+      pageName: "hotelreservation|select-rate",
+      pageType: "bookingroomsandratespage",
+      siteSections: "hotelreservation|select-rate",
+    })
+  }, [rooms, hotelId, lang, fromDate, toDate, searchType, bookingCode])
+
   useEffect(() => {
     if (hasAvailabilityError) {
       toast.error(errorMessage)
-
+      noAvailabilityTracking()
       const newParams = new URLSearchParams(searchParams.toString())
       newParams.delete("errorCode")
       window.history.replaceState({}, "", `${pathname}?${newParams.toString()}`)
     }
-  }, [errorMessage, hasAvailabilityError, pathname, searchParams])
+  }, [
+    errorMessage,
+    hasAvailabilityError,
+    noAvailabilityTracking,
+    pathname,
+    searchParams,
+  ])
 
   return null
 }