feat: add multiroom tracking to booking flow

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

@@ -47,61 +47,66 @@ export default function HotelCardListing({
     (state) => state.activeCodeFilter
   )
 
-  const sortedHotels = useMemo(() => {
-    if (!hotelData) return []
-    return getSortedHotels({ hotels: hotelData, sortBy, bookingCode })
-  }, [hotelData, sortBy, bookingCode])
-
   const hotels = useMemo(() => {
+    const sortedHotels = getSortedHotels({
+      hotels: hotelData,
+      sortBy,
+      bookingCode,
+    })
     const updatedHotelsList = bookingCode
       ? sortedHotels.filter(
           (hotel) =>
-            !hotel.price ||
+            !hotel.availability.productType ||
             activeCodeFilter === BookingCodeFilterEnum.All ||
             (activeCodeFilter === BookingCodeFilterEnum.Discounted &&
-              hotel.price?.public?.rateType !== RateTypeEnum.Regular) ||
+              hotel.availability.productType.public?.rateType !==
+                RateTypeEnum.Regular) ||
             (activeCodeFilter === BookingCodeFilterEnum.Regular &&
-              hotel.price?.public?.rateType === RateTypeEnum.Regular)
+              hotel.availability.productType.public?.rateType ===
+                RateTypeEnum.Regular)
         )
       : sortedHotels
 
-    if (activeFilters.length === 0) return updatedHotelsList
+    if (!activeFilters.length) {
+      return updatedHotelsList
+    }
 
     return updatedHotelsList.filter((hotel) =>
       activeFilters.every((appliedFilterId) =>
-        hotel.hotelData.detailedFacilities.some(
+        hotel.hotel.detailedFacilities.some(
           (facility) => facility.id.toString() === appliedFilterId
         )
       )
     )
-  }, [activeFilters, sortedHotels, bookingCode, activeCodeFilter])
+  }, [activeCodeFilter, activeFilters, bookingCode, hotelData, sortBy])
 
   useEffect(() => {
-    setResultCount(hotels?.length ?? 0)
+    setResultCount(hotels.length)
   }, [hotels, setResultCount])
 
   return (
     <section className={styles.hotelCards}>
-      {hotels?.length ? (
-        hotels.map((hotel) => (
-          <div
-            key={hotel.hotelData.operaId}
-            data-active={
-              hotel.hotelData.name === activeHotelCard ? "true" : "false"
-            }
-          >
-            <HotelCard
-              hotel={hotel}
-              isUserLoggedIn={isUserLoggedIn}
-              state={
-                hotel.hotelData.name === activeHotelCard ? "active" : "default"
+      {hotels?.length
+        ? hotels.map((hotel) => (
+            <div
+              key={hotel.hotel.operaId}
+              data-active={
+                hotel.hotel.name === activeHotelCard ? "true" : "false"
               }
-              type={type}
-              bookingCode={bookingCode}
-            />
-          </div>
-        ))
-      ) : activeFilters ? (
+            >
+              <HotelCard
+                hotelData={hotel}
+                isUserLoggedIn={isUserLoggedIn}
+                state={
+                  hotel.hotel.name === activeHotelCard ? "active" : "default"
+                }
+                type={type}
+                bookingCode={bookingCode}
+              />
+            </div>
+          ))
+        : null}
+      {!hotels?.length && activeFilters ? (
         <Alert
           type={AlertTypeEnum.Info}
           heading={intl.formatMessage({ id: "No hotels match your filters" })}

apps/scandic-web/components/HotelReservation/HotelCardListing/utils.ts

@@ -1,37 +1,43 @@
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
 import { SortOrder } from "@/types/components/hotelReservation/selectHotel/hotelSorter"
+import type { HotelResponse } from "@/components/HotelReservation/SelectHotel/helpers"
+
+function getPricePerNight(hotel: HotelResponse): number {
+  return (
+    hotel.availability.productType?.member?.localPrice?.pricePerNight ??
+    hotel.availability.productType?.public?.localPrice?.pricePerNight ??
+    Infinity
+  )
+}
 
 export function getSortedHotels({
   hotels,
   sortBy,
   bookingCode,
 }: {
-  hotels: HotelData[]
+  hotels: HotelResponse[]
   sortBy: string
   bookingCode: string | null
 }) {
-  const getPricePerNight = (hotel: HotelData): number =>
-    hotel.price?.member?.localPrice?.pricePerNight ??
-    hotel.price?.public?.localPrice?.pricePerNight ??
-    hotel.price?.redemption?.localPrice?.pointsPerNight ??
-    Infinity
-  const availableHotels = hotels.filter((hotel) => !!hotel?.price)
-  const unAvailableHotels = hotels.filter((hotel) => !hotel?.price)
+  const availableHotels = hotels.filter(
+    (hotel) => !!hotel.availability.productType
+  )
+  const unavailableHotels = hotels.filter(
+    (hotel) => !hotel.availability.productType
+  )
 
   const sortingStrategies: Record<
     string,
-    (a: HotelData, b: HotelData) => number
+    (a: HotelResponse, b: HotelResponse) => number
   > = {
-    [SortOrder.Name]: (a: HotelData, b: HotelData) =>
-      a.hotelData.name.localeCompare(b.hotelData.name),
-    [SortOrder.TripAdvisorRating]: (a: HotelData, b: HotelData) =>
-      (b.hotelData.ratings?.tripAdvisor.rating ?? 0) -
-      (a.hotelData.ratings?.tripAdvisor.rating ?? 0),
-    [SortOrder.Price]: (a: HotelData, b: HotelData) =>
+    [SortOrder.Name]: (a: HotelResponse, b: HotelResponse) =>
+      a.hotel.name.localeCompare(b.hotel.name),
+    [SortOrder.TripAdvisorRating]: (a: HotelResponse, b: HotelResponse) =>
+      (b.hotel.ratings?.tripAdvisor.rating ?? 0) -
+      (a.hotel.ratings?.tripAdvisor.rating ?? 0),
+    [SortOrder.Price]: (a: HotelResponse, b: HotelResponse) =>
       getPricePerNight(a) - getPricePerNight(b),
-    [SortOrder.Distance]: (a: HotelData, b: HotelData) =>
-      a.hotelData.location.distanceToCentre -
-      b.hotelData.location.distanceToCentre,
+    [SortOrder.Distance]: (a: HotelResponse, b: HotelResponse) =>
+      a.hotel.location.distanceToCentre - b.hotel.location.distanceToCentre,
   }
 
   const sortStrategy =
@@ -40,21 +46,25 @@ export function getSortedHotels({
   if (bookingCode) {
     const bookingCodeHotels = hotels.filter(
       (hotel) =>
-        (hotel?.price?.public?.rateType?.toLowerCase() !== "regular" ||
-          hotel?.price?.member?.rateType?.toLowerCase() !== "regular") &&
-        !!hotel?.price
+        (hotel.availability.productType?.public?.rateType?.toLowerCase() !==
+          "regular" ||
+          hotel.availability.productType?.member?.rateType?.toLowerCase() !==
+          "regular") &&
+        !!hotel.availability.productType
     )
     const regularHotels = hotels.filter(
-      (hotel) => hotel?.price?.public?.rateType?.toLowerCase() === "regular"
+      (hotel) =>
+        hotel.availability.productType?.public?.rateType?.toLowerCase() ===
+        "regular"
     )
 
-    return [...bookingCodeHotels]
+    return bookingCodeHotels
       .sort(sortStrategy)
-      .concat([...regularHotels].sort(sortStrategy))
-      .concat([...unAvailableHotels].sort(sortStrategy))
+      .concat(regularHotels.sort(sortStrategy))
+      .concat(unavailableHotels.sort(sortStrategy))
   }
 
-  return [...availableHotels]
+  return availableHotels
     .sort(sortStrategy)
-    .concat([...unAvailableHotels].sort(sortStrategy))
+    .concat(unavailableHotels.sort(sortStrategy))
 }