feat: add multiroom tracking to booking flow

apps/scandic-web/components/HotelReservation/SelectHotel/NoAvailabilityAlert.tsx

@@ -8,9 +8,10 @@ import type { NoAvailabilityAlertProp } from "@/types/components/hotelReservatio
 import { AlertTypeEnum } from "@/types/enums/alert"
 
 export default async function NoAvailabilityAlert({
-  hotels,
+  hotelsLength,
   isAllUnavailable,
   isAlternative,
+  operaId,
 }: NoAvailabilityAlertProp) {
   const intl = await getIntl()
   const lang = getLang()
@@ -19,7 +20,7 @@ export default async function NoAvailabilityAlert({
     return null
   }
 
-  if (hotels.length === 1 && !isAlternative) {
+  if (hotelsLength === 1 && !isAlternative && operaId) {
     return (
       <Alert
         type={AlertTypeEnum.Info}
@@ -29,7 +30,7 @@ export default async function NoAvailabilityAlert({
         })}
         link={{
           title: intl.formatMessage({ id: "See alternative hotels" }),
-          url: `${alternativeHotels(lang)}?hotel=${hotels[0].hotelData.operaId}`,
+          url: `${alternativeHotels(lang)}?hotel=${operaId}`,
           keepSearchParams: true,
         }}
       />

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainer.tsx

@@ -1,40 +1,26 @@
-import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 import { notFound } from "next/navigation"
 
 import { env } from "@/env/server"
 import { getCityCoordinates } from "@/lib/trpc/memoizedRequests"
 
-import {
-  fetchAlternativeHotels,
-  fetchAvailableHotels,
-  fetchBookingCodeAvailableHotels,
-  getFiltersFromHotels,
-} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
-import { getHotelSearchDetails } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils"
 import TrackingSDK from "@/components/TrackingSDK"
-import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
+import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
 import { safeTry } from "@/utils/safeTry"
 
 import { getHotelPins } from "../../HotelCardDialogListing/utils"
+import { getFiltersFromHotels, getHotels } from "../helpers"
+import { getTracking } from "./tracking"
 import SelectHotelMap from "."
 
-import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { SelectHotelMapContainerProps } from "@/types/components/hotelReservation/selectHotel/map"
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
-import {
-  TrackingChannelEnum,
-  type TrackingSDKHotelInfo,
-  type TrackingSDKPageData,
-} from "@/types/components/tracking"
 
 export async function SelectHotelMapContainer({
   searchParams,
   isAlternativeHotels,
 }: SelectHotelMapContainerProps) {
   const lang = getLang()
-  const intl = await getIntl()
   const googleMapId = env.GOOGLE_DYNAMIC_MAP_ID
   const googleMapsApiKey = env.GOOGLE_STATIC_MAP_KEY
   const getHotelSearchDetailsPromise = safeTry(
@@ -50,106 +36,58 @@ export async function SelectHotelMapContainer({
 
   const [searchDetails] = await getHotelSearchDetailsPromise
 
-  if (!searchDetails) return notFound()
+  if (!searchDetails) {
+    return notFound()
+  }
 
   const {
-    city,
-    selectHotelParams,
     adultsInRoom,
-    childrenInRoom,
-    childrenInRoomString,
-    hotel: isAlternativeFor,
     bookingCode,
+    childrenInRoom,
+    city,
+    hotel: isAlternativeFor,
+    noOfRooms,
     redemption,
+    selectHotelParams,
   } = searchDetails
 
-  if (!city) return notFound()
+  if (!city) {
+    return notFound()
+  }
 
-  const fetchAvailableHotelsPromise = isAlternativeFor
-    ? safeTry(
-        fetchAlternativeHotels(isAlternativeFor.id, {
-          roomStayStartDate: selectHotelParams.fromDate,
-          roomStayEndDate: selectHotelParams.toDate,
-          adults: adultsInRoom[0],
-          children: childrenInRoomString,
-          bookingCode,
-          redemption,
-        })
-      )
-    : bookingCode
-      ? safeTry(
-          fetchBookingCodeAvailableHotels({
-            cityId: city.id,
-            roomStayStartDate: selectHotelParams.fromDate,
-            roomStayEndDate: selectHotelParams.toDate,
-            adults: adultsInRoom[0],
-            children: childrenInRoomString,
-            bookingCode,
-          })
-        )
-      : safeTry(
-          fetchAvailableHotels({
-            cityId: city.id,
-            roomStayStartDate: selectHotelParams.fromDate,
-            roomStayEndDate: selectHotelParams.toDate,
-            adults: adultsInRoom[0],
-            children: childrenInRoomString,
-            redemption,
-          })
-        )
+  const hotels = await getHotels(
+    selectHotelParams,
+    isAlternativeFor,
+    bookingCode,
+    city,
+    !!redemption
+  )
 
-  const [hotels] = await fetchAvailableHotelsPromise
-
-  const validHotels = (hotels?.filter(Boolean) as HotelData[]) || []
-
-  const currencyValue = redemption
-    ? intl.formatMessage({ id: "Points" })
-    : undefined
-  const hotelPins = getHotelPins(validHotels, currencyValue)
-  const filterList = getFiltersFromHotels(validHotels)
+  const hotelPins = getHotelPins(hotels)
+  const filterList = getFiltersFromHotels(hotels)
   const cityCoordinates = await getCityCoordinates({
     city: city.name,
-    hotel: { address: hotels?.[0]?.hotelData?.address.streetAddress },
+    hotel: { address: hotels?.[0]?.hotel?.address.streetAddress },
   })
 
   const arrivalDate = new Date(selectHotelParams.fromDate)
   const departureDate = new Date(selectHotelParams.toDate)
 
-  const pageTrackingData: TrackingSDKPageData = {
-    pageId: isAlternativeFor ? "alternative-hotels" : "select-hotel",
-    domainLanguage: lang,
-    channel: TrackingChannelEnum["hotelreservation"],
-    pageName: isAlternativeHotels
-      ? "hotelreservation|alternative-hotels|mapview"
-      : "hotelreservation|select-hotel|mapview",
-    siteSections: isAlternativeHotels
-      ? "hotelreservation|altervative-hotels|mapview"
-      : "hotelreservation|select-hotel|mapview",
-    pageType: "bookinghotelsmapviewpage",
-    siteVersion: "new-web",
-  }
-
-  const hotelsTrackingData: TrackingSDKHotelInfo = {
-    availableResults: validHotels.length,
-    searchTerm: isAlternativeFor
-      ? selectHotelParams.hotelId
-      : (selectHotelParams.city as string),
-    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
-    departureDate: format(departureDate, "yyyy-MM-dd"),
-    noOfAdults: adultsInRoom[0], // TODO: Handle multiple rooms
-    noOfChildren: childrenInRoom?.length,
-    ageOfChildren: childrenInRoom?.map((c) => c.age).join(","),
-    childBedPreference: childrenInRoom
-      ?.map((c) => ChildBedMapEnum[c.bed])
-      .join("|"),
-    noOfRooms: 1, // // TODO: Handle multiple rooms
-    duration: differenceInCalendarDays(departureDate, arrivalDate),
-    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
-    searchType: "destination",
-    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
-    country: validHotels?.[0]?.hotelData.address.country,
-    region: validHotels?.[0]?.hotelData.address.city,
-  }
+  const { hotelsTrackingData, pageTrackingData } = getTracking(
+    lang,
+    !!isAlternativeFor,
+    !!isAlternativeHotels,
+    arrivalDate,
+    departureDate,
+    adultsInRoom,
+    childrenInRoom,
+    hotels.length,
+    selectHotelParams.hotelId,
+    noOfRooms,
+    hotels?.[0]?.hotel.address.country,
+    hotels?.[0]?.hotel.address.city,
+    selectHotelParams.city
+  )
 
   return (
     <>
@@ -157,7 +95,7 @@ export async function SelectHotelMapContainer({
         apiKey={googleMapsApiKey}
         hotelPins={hotelPins}
         mapId={googleMapId}
-        hotels={validHotels}
+        hotels={hotels}
         filterList={filterList}
         cityCoordinates={cityCoordinates}
         bookingCode={bookingCode ?? ""}

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/index.tsx

@@ -26,10 +26,10 @@ import { getVisibleHotels } from "./utils"
 
 import styles from "./selectHotelMapContent.module.css"
 
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"
 import { BookingCodeFilterEnum } from "@/types/enums/bookingCodeFilter"
 import { RateTypeEnum } from "@/types/enums/rateType"
+import type { HotelResponse } from "@/components/HotelReservation/SelectHotel/helpers"
 
 const SKELETON_LOAD_DELAY = 750
 
@@ -46,7 +46,7 @@ export default function SelectHotelContent({
   const map = useMap()
 
   const isAboveMobile = useMediaQuery("(min-width: 768px)")
-  const [visibleHotels, setVisibleHotels] = useState<HotelData[]>([])
+  const [visibleHotels, setVisibleHotels] = useState<HotelResponse[]>([])
   const [showSkeleton, setShowSkeleton] = useState<boolean>(true)
   const listingContainerRef = useRef<HTMLDivElement | null>(null)
 

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContent/utils.ts

@@ -1,5 +1,5 @@
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
+import type { HotelResponse } from "@/components/HotelReservation/SelectHotel/helpers"
 
 export function getVisibleHotelPins(
   map: google.maps.Map | null,
@@ -17,13 +17,13 @@ export function getVisibleHotelPins(
 }
 
 export function getVisibleHotels(
-  hotels: HotelData[],
+  hotels: HotelResponse[],
   filteredHotelPins: HotelPin[],
   map: google.maps.Map | null
 ) {
   const visibleHotelPins = getVisibleHotelPins(map, filteredHotelPins)
   const visibleHotels = hotels.filter((hotel) =>
-    visibleHotelPins.some((pin) => pin.operaId === hotel.hotelData.operaId)
+    visibleHotelPins.some((pin) => pin.operaId === hotel.hotel.operaId)
   )
   return visibleHotels
 }

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelMap/tracking.ts

@@ -0,0 +1,67 @@
+import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+
+import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
+import {
+  TrackingChannelEnum,
+  type TrackingSDKHotelInfo,
+  type TrackingSDKPageData,
+} from "@/types/components/tracking"
+import type { Lang } from "@/constants/languages"
+import type { ChildrenInRoom } from "@/utils/hotelSearchDetails"
+
+export function getTracking(
+  lang: Lang,
+  isAlternativeFor: boolean,
+  isAlternativeHotels: boolean,
+  arrivalDate: Date,
+  departureDate: Date,
+  adultsInRoom: number[],
+  childrenInRoom: ChildrenInRoom,
+  hotelsResult: number,
+  hotelId: string,
+  noOfRooms: number,
+  country: string | undefined,
+  hotelCity: string | undefined,
+  paramCity: string | undefined
+) {
+  const pageTrackingData: TrackingSDKPageData = {
+    channel: TrackingChannelEnum["hotelreservation"],
+    domainLanguage: lang,
+    pageId: isAlternativeFor ? "alternative-hotels" : "select-hotel",
+    pageName: isAlternativeHotels
+      ? "hotelreservation|alternative-hotels|mapview"
+      : "hotelreservation|select-hotel|mapview",
+    pageType: "bookinghotelsmapviewpage",
+    siteSections: isAlternativeHotels
+      ? "hotelreservation|altervative-hotels|mapview"
+      : "hotelreservation|select-hotel|mapview",
+    siteVersion: "new-web",
+  }
+
+  const hotelsTrackingData: TrackingSDKHotelInfo = {
+    ageOfChildren: childrenInRoom
+      ?.map((c) => c?.map((k) => k.age).join(",") ?? "-")
+      .join("|"),
+    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
+    availableResults: hotelsResult,
+    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
+    childBedPreference: childrenInRoom
+      ?.map((c) => c?.map((k) => ChildBedMapEnum[k.bed]).join(",") ?? "-")
+      .join("|"),
+    country,
+    departureDate: format(departureDate, "yyyy-MM-dd"),
+    duration: differenceInCalendarDays(departureDate, arrivalDate),
+    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
+    noOfAdults: adultsInRoom.join(","),
+    noOfChildren: childrenInRoom?.map((kids) => kids?.length ?? 0).join(","),
+    noOfRooms,
+    region: hotelCity,
+    searchTerm: isAlternativeFor ? hotelId : (paramCity as string),
+    searchType: "destination",
+  }
+
+  return {
+    hotelsTrackingData,
+    pageTrackingData,
+  }
+}

apps/scandic-web/components/HotelReservation/SelectHotel/helpers.ts

@@ -0,0 +1,270 @@
+import { getHotel } from "@/lib/trpc/memoizedRequests"
+import { serverClient } from "@/lib/trpc/server"
+
+import { getLang } from "@/i18n/serverContext"
+
+import { generateChildrenString } from "../utils"
+
+import type {
+  AlternativeHotelsAvailabilityInput,
+  AvailabilityInput,
+} from "@/types/components/hotelReservation/selectHotel/availabilityInput"
+import type { CategorizedFilters } from "@/types/components/hotelReservation/selectHotel/hotelFilters"
+import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
+import type { DetailedFacility, Hotel } from "@/types/hotel"
+import type { HotelsAvailabilityItem } from "@/types/trpc/routers/hotel/availability"
+import type {
+  HotelLocation,
+  Location,
+} from "@/types/trpc/routers/hotel/locations"
+
+interface AvailabilityResponse {
+  availability: HotelsAvailabilityItem[]
+}
+
+export interface HotelResponse {
+  availability: HotelsAvailabilityItem
+  hotel: Hotel
+}
+
+type Result = AvailabilityResponse | null
+type SettledResult = PromiseSettledResult<Result>[]
+
+async function enhanceHotels(hotels: HotelsAvailabilityItem[]) {
+  const language = getLang()
+  return await Promise.allSettled(
+    hotels.map(async (availability) => {
+      const hotelData = await getHotel({
+        hotelId: availability.hotelId.toString(),
+        isCardOnlyPayment: false,
+        language,
+      })
+
+      if (!hotelData) {
+        return null
+      }
+
+      return {
+        availability,
+        hotel: hotelData.hotel,
+      }
+    })
+  )
+}
+
+async function fetchAlternativeHotels(
+  hotelId: string,
+  input: AlternativeHotelsAvailabilityInput
+) {
+  const alternativeHotelIds = await serverClient().hotel.nearbyHotelIds({
+    hotelId,
+  })
+
+  if (!alternativeHotelIds) {
+    return null
+  }
+
+  return await serverClient().hotel.availability.hotelsByHotelIds({
+    ...input,
+    hotelIds: alternativeHotelIds,
+  })
+}
+
+async function fetchAvailableHotels(input: AvailabilityInput) {
+  return await serverClient().hotel.availability.hotelsByCity(input)
+}
+
+async function fetchBookingCodeAvailableHotels(input: AvailabilityInput) {
+  return await serverClient().hotel.availability.hotelsByCityWithBookingCode(
+    input
+  )
+}
+
+function getFulfilledResponses<T>(result: PromiseSettledResult<T | null>[]) {
+  const fulfilledResponses: NonNullable<T>[] = []
+  for (const res of result) {
+    if (res.status === "fulfilled" && res.value) {
+      fulfilledResponses.push(res.value)
+    }
+  }
+  return fulfilledResponses
+}
+
+function getHotelAvailabilityItems(hotels: AvailabilityResponse[]) {
+  return hotels.map((hotel) => hotel.availability)
+}
+
+// Filter out hotels that are unavailable for
+// at least one room.
+function sortAndFilterHotelsByAvailability(
+  fulfilledHotels: HotelsAvailabilityItem[][]
+) {
+  const availableHotels = new Map<
+    HotelsAvailabilityItem["hotelId"],
+    HotelsAvailabilityItem
+  >()
+  const unavailableHotels = new Map<
+    HotelsAvailabilityItem["hotelId"],
+    HotelsAvailabilityItem
+  >()
+  const unavailableHotelIds = new Set<HotelsAvailabilityItem["hotelId"]>()
+
+  for (const availabilityHotels of fulfilledHotels) {
+    for (const hotel of availabilityHotels) {
+      if (hotel.status === AvailabilityEnum.Available) {
+        if (availableHotels.has(hotel.hotelId)) {
+          const currentAddedHotel = availableHotels.get(hotel.hotelId)
+          // Make sure the cheapest version of the room is the one
+          // we keep so that it matches the cheapest room on select-rate
+          if (
+            (hotel.productType?.public &&
+              currentAddedHotel?.productType?.public &&
+              hotel.productType.public.localPrice.pricePerNight <
+              currentAddedHotel.productType.public.localPrice
+                .pricePerNight) ||
+            (hotel.productType?.member &&
+              currentAddedHotel?.productType?.member &&
+              hotel.productType.member.localPrice.pricePerNight <
+              currentAddedHotel.productType.member.localPrice.pricePerNight)
+          ) {
+            availableHotels.set(hotel.hotelId, hotel)
+          }
+        } else {
+          availableHotels.set(hotel.hotelId, hotel)
+        }
+      } else {
+        unavailableHotels.set(hotel.hotelId, hotel)
+        unavailableHotelIds.add(hotel.hotelId)
+      }
+    }
+  }
+
+  for (const [hotelId] of unavailableHotelIds.entries()) {
+    if (availableHotels.has(hotelId)) {
+      availableHotels.delete(hotelId)
+    }
+  }
+
+  return [
+    Array.from(availableHotels.values()),
+    Array.from(unavailableHotels.values()),
+  ].flat()
+}
+
+export async function getHotels(
+  booking: SelectHotelSearchParams,
+  isAlternativeFor: HotelLocation | null,
+  bookingCode: string | undefined,
+  city: Location,
+  redemption: boolean
+) {
+  let availableHotelsResponse: SettledResult = []
+  if (isAlternativeFor) {
+    availableHotelsResponse = await Promise.allSettled(
+      booking.rooms.map(async (room) => {
+        return fetchAlternativeHotels(isAlternativeFor.id, {
+          adults: room.adults,
+          bookingCode,
+          children: room.childrenInRoom
+            ? generateChildrenString(room.childrenInRoom)
+            : undefined,
+          redemption,
+          roomStayEndDate: booking.toDate,
+          roomStayStartDate: booking.fromDate,
+        })
+      })
+    )
+  } else if (bookingCode) {
+    availableHotelsResponse = await Promise.allSettled(
+      booking.rooms.map(async (room) => {
+        return fetchBookingCodeAvailableHotels({
+          adults: room.adults,
+          bookingCode,
+          children: room.childrenInRoom
+            ? generateChildrenString(room.childrenInRoom)
+            : undefined,
+          cityId: city.id,
+          roomStayStartDate: booking.fromDate,
+          roomStayEndDate: booking.toDate,
+        })
+      })
+    )
+  } else {
+    availableHotelsResponse = await Promise.allSettled(
+      booking.rooms.map(
+        async (room) =>
+          await fetchAvailableHotels({
+            adults: room.adults,
+            children: room.childrenInRoom
+              ? generateChildrenString(room.childrenInRoom)
+              : undefined,
+            cityId: city.id,
+            redemption,
+            roomStayEndDate: booking.toDate,
+            roomStayStartDate: booking.fromDate,
+          })
+      )
+    )
+  }
+
+  const fulfilledAvailabilities = getFulfilledResponses<AvailabilityResponse>(
+    availableHotelsResponse
+  )
+  const availablilityItems = getHotelAvailabilityItems(fulfilledAvailabilities)
+  const availableHotels = sortAndFilterHotelsByAvailability(availablilityItems)
+  if (!availableHotels.length) {
+    return []
+  }
+  const hotelsResponse = await enhanceHotels(availableHotels)
+  const hotels = getFulfilledResponses<HotelResponse>(hotelsResponse)
+
+  return hotels
+}
+
+const hotelSurroundingsFilterNames = [
+  "Hotel surroundings",
+  "Hotel omgivelser",
+  "Hotelumgebung",
+  "Hotellia lähellä",
+  "Hotellomgivelser",
+  "Omgivningar",
+]
+
+const hotelFacilitiesFilterNames = [
+  "Hotel facilities",
+  "Hotellfaciliteter",
+  "Hotelfaciliteter",
+  "Hotel faciliteter",
+  "Hotel-Infos",
+  "Hotellin palvelut",
+]
+
+export function getFiltersFromHotels(
+  hotels: HotelResponse[]
+): CategorizedFilters {
+  const defaultFilters = { facilityFilters: [], surroundingsFilters: [] }
+  if (!hotels.length) {
+    return defaultFilters
+  }
+
+  const filters = hotels.flatMap(({ hotel }) => hotel.detailedFacilities)
+
+  const uniqueFilterIds = [...new Set(filters.map((filter) => filter.id))]
+  const filterList: DetailedFacility[] = uniqueFilterIds
+    .map((filterId) => filters.find((filter) => filter.id === filterId))
+    .filter((filter): filter is DetailedFacility => filter !== undefined)
+    .sort((a, b) => b.sortOrder - a.sortOrder)
+
+  return filterList.reduce<CategorizedFilters>((filters, filter) => {
+    if (filter.filter && hotelSurroundingsFilterNames.includes(filter.filter)) {
+      filters.surroundingsFilters.push(filter)
+    }
+
+    if (filter.filter && hotelFacilitiesFilterNames.includes(filter.filter)) {
+      filters.facilityFilters.push(filter)
+    }
+
+    return filters
+  }, defaultFilters)
+}

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -1,4 +1,4 @@
-import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+import stringify from "json-stable-stringify-without-jsonify"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"
 
@@ -9,13 +9,6 @@ import {
   selectHotelMap,
 } from "@/constants/routes/hotelReservation"
 
-import {
-  fetchAlternativeHotels,
-  fetchAvailableHotels,
-  fetchBookingCodeAvailableHotels,
-  getFiltersFromHotels,
-} from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
-import { getHotelSearchDetails } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils"
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
@@ -24,28 +17,23 @@ import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
-import { safeTry } from "@/utils/safeTry"
+import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
 import { convertObjToSearchParams } from "@/utils/url"
 
 import HotelCardListing from "../HotelCardListing"
 import BookingCodeFilter from "./BookingCodeFilter"
+import { getFiltersFromHotels, getHotels } from "./helpers"
 import HotelCount from "./HotelCount"
 import HotelFilter from "./HotelFilter"
 import HotelSorter from "./HotelSorter"
 import MobileMapButtonContainer from "./MobileMapButtonContainer"
 import NoAvailabilityAlert from "./NoAvailabilityAlert"
+import { getTracking } from "./tracking"
 
 import styles from "./selectHotel.module.css"
 
-import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import type { SelectHotelProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import type { SelectHotelSearchParams } from "@/types/components/hotelReservation/selectHotel/selectHotelSearchParams"
-import {
-  TrackingChannelEnum,
-  type TrackingSDKHotelInfo,
-  type TrackingSDKPageData,
-} from "@/types/components/tracking"
 
 export default async function SelectHotel({
   params,
@@ -54,78 +42,44 @@ export default async function SelectHotel({
 }: SelectHotelProps) {
   const intl = await getIntl()
 
-  const getHotelSearchDetailsPromise = safeTry(
-    getHotelSearchDetails(
-      {
-        searchParams: searchParams as SelectHotelSearchParams & {
-          [key: string]: string
-        },
+  const searchDetails = await getHotelSearchDetails(
+    {
+      searchParams: searchParams as SelectHotelSearchParams & {
+        [key: string]: string
       },
-      isAlternativeHotels
-    )
+    },
+    isAlternativeHotels
   )
 
-  const [searchDetails] = await getHotelSearchDetailsPromise
-
   if (!searchDetails) return notFound()
 
   const {
-    city,
-    selectHotelParams,
     adultsInRoom,
-    childrenInRoomString,
-    childrenInRoom,
-    hotel: isAlternativeFor,
     bookingCode,
+    childrenInRoom,
+    city,
+    hotel: isAlternativeFor,
+    noOfRooms,
     redemption,
+    selectHotelParams,
   } = searchDetails
 
   if (!city) return notFound()
 
-  const hotelsPromise = isAlternativeFor
-    ? safeTry(
-        fetchAlternativeHotels(isAlternativeFor.id, {
-          roomStayStartDate: selectHotelParams.fromDate,
-          roomStayEndDate: selectHotelParams.toDate,
-          adults: adultsInRoom[0],
-          children: childrenInRoomString,
-          bookingCode,
-          redemption,
-        })
-      )
-    : bookingCode
-      ? safeTry(
-          fetchBookingCodeAvailableHotels({
-            cityId: city.id,
-            roomStayStartDate: selectHotelParams.fromDate,
-            roomStayEndDate: selectHotelParams.toDate,
-            adults: adultsInRoom[0],
-            children: childrenInRoomString,
-            bookingCode,
-          })
-        )
-      : safeTry(
-          fetchAvailableHotels({
-            cityId: city.id,
-            roomStayStartDate: selectHotelParams.fromDate,
-            roomStayEndDate: selectHotelParams.toDate,
-            adults: adultsInRoom[0],
-            children: childrenInRoomString,
-            redemption,
-          })
-        )
-
-  const [hotels] = await hotelsPromise
+  const hotels = await getHotels(
+    selectHotelParams,
+    isAlternativeFor,
+    bookingCode,
+    city,
+    !!redemption,
+  )
 
   const arrivalDate = new Date(selectHotelParams.fromDate)
   const departureDate = new Date(selectHotelParams.toDate)
 
   const isCityWithCountry = (city: any): city is { country: string } =>
     "country" in city
-  const validHotels =
-    hotels?.filter((hotel): hotel is HotelData => hotel?.hotelData !== null) ||
-    []
-  const filterList = getFiltersFromHotels(validHotels)
+  const filterList = getFiltersFromHotels(hotels)
 
   const convertedSearchParams = convertObjToSearchParams(selectHotelParams)
   const breadcrumbs = [
@@ -141,65 +95,44 @@ export default async function SelectHotel({
     },
     isAlternativeFor
       ? {
-          title: intl.formatMessage({ id: "Alternative hotels" }),
-          href: `${alternativeHotels(params.lang)}/?${convertedSearchParams}`,
-          uid: "alternative-hotels",
-        }
+        title: intl.formatMessage({ id: "Alternative hotels" }),
+        href: `${alternativeHotels(params.lang)}/?${convertedSearchParams}`,
+        uid: "alternative-hotels",
+      }
       : {
-          title: intl.formatMessage({ id: "Select hotel" }),
-          href: `${selectHotel(params.lang)}/?${convertedSearchParams}`,
-          uid: "select-hotel",
-        },
+        title: intl.formatMessage({ id: "Select hotel" }),
+        href: `${selectHotel(params.lang)}/?${convertedSearchParams}`,
+        uid: "select-hotel",
+      },
     isAlternativeFor
       ? {
-          title: isAlternativeFor.name,
-          uid: isAlternativeFor.id,
-        }
+        title: isAlternativeFor.name,
+        uid: isAlternativeFor.id,
+      }
       : {
-          title: city.name,
-          uid: city.id,
-        },
+        title: city.name,
+        uid: city.id,
+      },
   ]
 
-  const isAllUnavailable =
-    hotels?.every((hotel) => hotel.price === undefined) || false
+  const isAllUnavailable = !hotels.length
 
-  const pageTrackingData: TrackingSDKPageData = {
-    pageId: isAlternativeFor ? "alternative-hotels" : "select-hotel",
-    domainLanguage: params.lang,
-    channel: TrackingChannelEnum["hotelreservation"],
-    pageName: isAlternativeFor
-      ? "hotelreservation|alternative-hotels"
-      : "hotelreservation|select-hotel",
-    siteSections: isAlternativeFor
-      ? "hotelreservation|alternative-hotels"
-      : "hotelreservation|select-hotel",
-    pageType: "bookinghotelspage",
-    siteVersion: "new-web",
-  }
-
-  const hotelsTrackingData: TrackingSDKHotelInfo = {
-    availableResults: validHotels.length,
-    searchTerm: isAlternativeFor
-      ? selectHotelParams.hotelId
-      : (selectHotelParams.city as string),
-    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
-    departureDate: format(departureDate, "yyyy-MM-dd"),
-    noOfAdults: adultsInRoom[0], // TODO: Handle multiple rooms,
-    noOfChildren: childrenInRoom?.length,
-    ageOfChildren: childrenInRoom?.map((c) => c.age).join(","),
-    childBedPreference: childrenInRoom
-      ?.map((c) => ChildBedMapEnum[c.bed])
-      .join("|"),
-    noOfRooms: 1, // // TODO: Handle multiple rooms
-    duration: differenceInCalendarDays(departureDate, arrivalDate),
-    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
-    searchType: "destination",
-    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
-    country: validHotels?.[0]?.hotelData.address.country,
-    region: validHotels?.[0]?.hotelData.address.city,
-  }
+  const { hotelsTrackingData, pageTrackingData } = getTracking(
+    params.lang,
+    !!isAlternativeFor,
+    arrivalDate,
+    departureDate,
+    adultsInRoom,
+    childrenInRoom,
+    hotels.length,
+    selectHotelParams.hotelId,
+    noOfRooms,
+    hotels?.[0]?.hotel.address.country,
+    hotels?.[0]?.hotel.address.city,
+    selectHotelParams.city
+  )
 
+  const suspenseKey = stringify(searchParams)
   return (
     <>
       <header className={styles.header}>
@@ -229,7 +162,7 @@ export default async function SelectHotel({
       <main className={styles.main}>
         {bookingCode ? <BookingCodeFilter /> : null}
         <div className={styles.sideBar}>
-          {hotels && hotels.length > 0 ? ( // TODO: Temp fix until API returns hotels that are not available
+          {hotels.length ? (
             <Link
               className={styles.link}
               color="burgundy"
@@ -276,14 +209,15 @@ export default async function SelectHotel({
         </div>
         <div className={styles.hotelList}>
           <NoAvailabilityAlert
+            hotelsLength={hotels.length}
             isAlternative={!!isAlternativeFor}
-            hotels={validHotels}
             isAllUnavailable={isAllUnavailable}
+            operaId={hotels?.[0]?.hotel.operaId}
           />
-          <HotelCardListing hotelData={validHotels} />
+          <HotelCardListing hotelData={hotels} />
         </div>
       </main>
-      <Suspense fallback={null}>
+      <Suspense key={`${suspenseKey}-tracking`} fallback={null}>
         <TrackingSDK
           pageData={pageTrackingData}
           hotelInfo={hotelsTrackingData}

apps/scandic-web/components/HotelReservation/SelectHotel/tracking.ts

@@ -0,0 +1,66 @@
+import { differenceInCalendarDays, format, isWeekend } from "date-fns"
+
+import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
+import {
+  TrackingChannelEnum,
+  type TrackingSDKHotelInfo,
+  type TrackingSDKPageData,
+} from "@/types/components/tracking"
+import type { Lang } from "@/constants/languages"
+import type { ChildrenInRoom } from "@/utils/hotelSearchDetails"
+
+export function getTracking(
+  lang: Lang,
+  isAlternativeFor: boolean,
+  arrivalDate: Date,
+  departureDate: Date,
+  adultsInRoom: number[],
+  childrenInRoom: ChildrenInRoom,
+  hotelsResult: number,
+  hotelId: string,
+  noOfRooms: number,
+  country: string | undefined,
+  hotelCity: string | undefined,
+  paramCity: string | undefined
+) {
+  const pageTrackingData: TrackingSDKPageData = {
+    channel: TrackingChannelEnum["hotelreservation"],
+    domainLanguage: lang,
+    pageId: isAlternativeFor ? "alternative-hotels" : "select-hotel",
+    pageName: isAlternativeFor
+      ? "hotelreservation|alternative-hotels"
+      : "hotelreservation|select-hotel",
+    pageType: "bookinghotelspage",
+    siteSections: isAlternativeFor
+      ? "hotelreservation|alternative-hotels"
+      : "hotelreservation|select-hotel",
+    siteVersion: "new-web",
+  }
+
+  const hotelsTrackingData: TrackingSDKHotelInfo = {
+    ageOfChildren: childrenInRoom
+      ?.map((c) => c?.map((k) => k.age).join(",") ?? "-")
+      .join("|"),
+    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
+    availableResults: hotelsResult,
+    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
+    childBedPreference: childrenInRoom
+      ?.map((c) => c?.map((k) => ChildBedMapEnum[k.bed]).join(",") ?? "-")
+      .join("|"),
+    country,
+    departureDate: format(departureDate, "yyyy-MM-dd"),
+    duration: differenceInCalendarDays(departureDate, arrivalDate),
+    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
+    noOfAdults: adultsInRoom.join(","),
+    noOfChildren: childrenInRoom?.map((kids) => kids?.length ?? 0).join(","),
+    noOfRooms,
+    region: hotelCity,
+    searchTerm: isAlternativeFor ? hotelId : (paramCity as string),
+    searchType: "destination",
+  }
+
+  return {
+    hotelsTrackingData,
+    pageTrackingData,
+  }
+}