feat: add multiroom tracking to booking flow

2025-03-05 11:53:05 +01:00
parent 540402b969
commit 1812591903
72 changed files with 2277 additions and 1308 deletions
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/index.tsx
@@ -0,0 +1,189 @@
+"use client"
+
+import { Fragment } from "react"
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import { PriceTagIcon } from "@/components/Icons"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import useLang from "@/hooks/useLang"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./priceDetailsTable.module.css"
+
+import type { Price } from "@/types/components/hotelReservation/price"
+import type { SelectRateSummaryProps } from "@/types/components/hotelReservation/summary"
+
+function Row({
+  label,
+  value,
+  bold,
+}: {
+  label: string
+  value: string
+  bold?: boolean
+}) {
+  return (
+    <tr className={styles.row}>
+      <td>
+        <Caption type={bold ? "bold" : undefined}>{label}</Caption>
+      </td>
+      <td className={styles.price}>
+        <Caption type={bold ? "bold" : undefined}>{value}</Caption>
+      </td>
+    </tr>
+  )
+}
+
+function TableSection({ children }: React.PropsWithChildren) {
+  return <tbody className={styles.tableSection}>{children}</tbody>
+}
+
+function TableSectionHeader({
+  title,
+  subtitle,
+}: {
+  title: string
+  subtitle?: string
+}) {
+  return (
+    <tr>
+      <th colSpan={2}>
+        <Body>{title}</Body>
+        {subtitle ? <Body>{subtitle}</Body> : null}
+      </th>
+    </tr>
+  )
+}
+
+export interface PriceDetailsTableProps {
+  bookingCode?: string
+  fromDate: string
+  isMember: boolean
+  rooms: SelectRateSummaryProps["rooms"]
+  toDate: string
+  totalPrice: Price
+  vat: number
+}
+
+export default function PriceDetailsTable({
+  bookingCode,
+  fromDate,
+  isMember,
+  rooms,
+  toDate,
+  totalPrice,
+  vat,
+}: PriceDetailsTableProps) {
+  const intl = useIntl()
+  const lang = useLang()
+
+  const diff = dt(toDate).diff(fromDate, "days")
+  const nights = intl.formatMessage(
+    { id: "{totalNights, plural, one {# night} other {# nights}}" },
+    { totalNights: diff }
+  )
+  const vatPercentage = vat / 100
+  const vatAmount = totalPrice.local.price * vatPercentage
+
+  const priceExclVat = totalPrice.local.price - vatAmount
+
+  const duration = ` ${dt(fromDate).locale(lang).format("ddd, D MMM")}
+          -
+          ${dt(toDate).locale(lang).format("ddd, D MMM")} (${nights})`
+  return (
+    <table className={styles.priceDetailsTable}>
+      {rooms.map((room, idx) => {
+        const getMemberRate = idx === 0 && isMember
+        const price =
+          getMemberRate && room.roomRate.memberRate
+            ? room.roomRate.memberRate
+            : room.roomRate.publicRate
+        if (!price) {
+          return null
+        }
+        return (
+          <Fragment key={idx}>
+            <TableSection>
+              {rooms.length > 1 && (
+                <Body textTransform="bold">
+                  {intl.formatMessage({ id: "Room" })} {idx + 1}
+                </Body>
+              )}
+              <TableSectionHeader title={room.roomType} subtitle={duration} />
+              <Row
+                label={intl.formatMessage({ id: "Average price per night" })}
+                value={formatPrice(
+                  intl,
+                  price.localPrice.pricePerNight,
+                  price.localPrice.currency
+                )}
+              />
+              <Row
+                bold
+                label={intl.formatMessage({ id: "Room charge" })}
+                value={formatPrice(
+                  intl,
+                  price.localPrice.pricePerStay,
+                  price.localPrice.currency
+                )}
+              />
+            </TableSection>
+          </Fragment>
+        )
+      })}
+      <TableSection>
+        <TableSectionHeader title={intl.formatMessage({ id: "Total" })} />
+        <Row
+          label={intl.formatMessage({ id: "Price excluding VAT" })}
+          value={formatPrice(intl, priceExclVat, totalPrice.local.currency)}
+        />
+        <Row
+          label={intl.formatMessage({ id: "VAT {vat}%" }, { vat })}
+          value={formatPrice(intl, vatAmount, totalPrice.local.currency)}
+        />
+        <tr className={styles.row}>
+          <td>
+            <Body textTransform="bold">
+              {intl.formatMessage({ id: "Price including VAT" })}
+            </Body>
+          </td>
+          <td className={styles.price}>
+            <Body textTransform="bold">
+              {formatPrice(
+                intl,
+                totalPrice.local.price,
+                totalPrice.local.currency
+              )}
+            </Body>
+          </td>
+        </tr>
+        {totalPrice.local.regularPrice && (
+          <tr className={styles.row}>
+            <td></td>
+            <td className={styles.price}>
+              <Caption color="uiTextMediumContrast" striked={true}>
+                {formatPrice(
+                  intl,
+                  totalPrice.local.regularPrice,
+                  totalPrice.local.currency
+                )}
+              </Caption>
+            </td>
+          </tr>
+        )}
+        {bookingCode && totalPrice.local.regularPrice && (
+          <tr className={styles.row}>
+            <td>
+              <PriceTagIcon />
+              {bookingCode}
+            </td>
+            <td></td>
+          </tr>
+        )}
+      </TableSection>
+    </table>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/priceDetailsTable.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/priceDetailsTable.module.css
@@ -0,0 +1,36 @@
+.priceDetailsTable {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.price {
+  text-align: end;
+}
+
+.tableSection {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  flex-direction: column;
+  width: 100%;
+}
+
+.tableSection:has(tr > th) {
+  padding-top: var(--Spacing-x2);
+}
+
+.tableSection:has(tr > th):not(:first-of-type) {
+  border-top: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+}
+
+.tableSection:not(:last-child) {
+  padding-bottom: var(--Spacing-x2);
+}
+.row {
+  display: flex;
+  justify-content: space-between;
+}
+@media screen and (min-width: 768px) {
+  .priceDetailsTable {
+    min-width: 512px;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
@@ -20,6 +20,8 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"

+import PriceDetailsTable from "./PriceDetailsTable"
+
 import styles from "./summary.module.css"

 import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
@@ -249,19 +251,17 @@ export default function Summary({
                { b: (str) => <b>{str}</b> }
              )}
            </Body>
-            <PriceDetailsModal
-              fromDate={booking.fromDate}
-              toDate={booking.toDate}
-              rooms={rooms.map((r) => ({
-                adults: r.adults,
-                childrenInRoom: r.childrenInRoom,
-                roomPrice: r.roomPrice,
-                roomType: r.roomType,
-              }))}
-              totalPrice={totalPrice}
-              vat={vat}
-              bookingCode={booking.bookingCode}
-            />
+            <PriceDetailsModal>
+              <PriceDetailsTable
+                bookingCode={booking.bookingCode}
+                fromDate={booking.fromDate}
+                isMember={isMember}
+                rooms={rooms}
+                toDate={booking.toDate}
+                totalPrice={totalPrice}
+                vat={vat}
+              />
+            </PriceDetailsModal>
          </div>
          <div>
            <Body
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
@@ -15,6 +15,7 @@ import styles from "./mobileSummary.module.css"

 import type { MobileSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
 import { RateTypeEnum } from "@/types/enums/rateType"
+import type { RoomsAvailability } from "@/types/trpc/routers/hotel/roomAvailability"

 export default function MobileSummary({
  isAllRoomsSelected,
@@ -25,11 +26,11 @@ export default function MobileSummary({
  const scrollY = useRef(0)
  const [isSummaryOpen, setIsSummaryOpen] = useState(false)

-  const { booking, bookingRooms, rateDefinitions, rateSummary, vat } =
+  const { booking, bookingRooms, roomsAvailability, rateSummary, vat } =
    useRatesStore((state) => ({
      booking: state.booking,
      bookingRooms: state.booking.rooms,
-      rateDefinitions: state.roomsAvailability?.rateDefinitions,
+      roomsAvailability: state.roomsAvailability,
      rateSummary: state.rateSummary,
      vat: state.vat,
    }))
@@ -61,10 +62,15 @@ export default function MobileSummary({
    }
  }, [isSummaryOpen])

-  if (!rateDefinitions) {
+  const roomRateDefinitions = roomsAvailability?.find(
+    (ra): ra is RoomsAvailability => "rateDefinitions" in ra
+  )
+  if (!roomRateDefinitions) {
    return null
  }

+  const rateDefinitions = roomRateDefinitions.rateDefinitions
+
  const rooms = rateSummary.map((room, index) => ({
    adults: bookingRooms[index].adults,
    childrenInRoom: bookingRooms[index].childrenInRoom ?? undefined,
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
@@ -28,12 +28,17 @@ import { RateTypeEnum } from "@/types/enums/rateType"
 export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
  const {
    bookingRooms,
+    dates,
    petRoomPackage,
    rateSummary,
    roomsAvailability,
    searchParams,
  } = useRatesStore((state) => ({
    bookingRooms: state.booking.rooms,
+    dates: {
+      checkInDate: state.booking.fromDate,
+      checkOutDate: state.booking.toDate,
+    },
    petRoomPackage: state.petRoomPackage,
    rateSummary: state.rateSummary,
    roomsAvailability: state.roomsAvailability,
@@ -50,8 +55,8 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
    return null
  }

-  const checkInDate = new Date(roomsAvailability.checkInDate)
-  const checkOutDate = new Date(roomsAvailability.checkOutDate)
+  const checkInDate = new Date(dates.checkInDate)
+  const checkOutDate = new Date(dates.checkOutDate)
  const nights = dt(checkOutDate).diff(dt(checkInDate), "days")
  const bookingCode = params.get("bookingCode")

@@ -186,8 +191,15 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
                <SignupPromoDesktop
                  memberPrice={{
                    amount: rateSummary.reduce((total, room) => {
-                      const memberPrice =
-                        room.member?.localPrice.pricePerStay ?? 0
+                      const memberPrice = room.member?.localPrice.pricePerStay
+                      if (!memberPrice) {
+                        return total
+                      }
+                      const hasSelectedPetRoom =
+                        room.package === RoomPackageCodeEnum.PET_ROOM
+                      if (!hasSelectedPetRoom) {
+                        return total + memberPrice
+                      }
                      const isPetRoom = room.features.find(
                        (feature) =>
                          feature.code === RoomPackageCodeEnum.PET_ROOM
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -20,7 +20,6 @@ export default function SelectedRoomPanel() {
  const intl = useIntl()
  const { isUserLoggedIn, roomCategories } = useRatesStore((state) => ({
    isUserLoggedIn: state.isUserLoggedIn,
-    rateDefinitions: state.roomsAvailability?.rateDefinitions,
    roomCategories: state.roomCategories,
  }))
  const {
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx
@@ -75,24 +75,18 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
  const searchParams = useSearchParams()
  const bookingCode = searchParams.get("bookingCode")

-  const {
-    hotelId,
-    hotelType,
-    isUserLoggedIn,
-    petRoomPackage,
-    rateDefinitions,
-    roomCategories,
-  } = useRatesStore((state) => ({
-    hotelId: state.booking.hotelId,
-    hotelType: state.hotelType,
-    isUserLoggedIn: state.isUserLoggedIn,
-    petRoomPackage: state.petRoomPackage,
-    rateDefinitions: state.roomsAvailability?.rateDefinitions,
-    roomCategories: state.roomCategories,
-  }))
-  const { isMainRoom, roomNr, selectedPackage } = useRoomContext()
+  const { hotelId, hotelType, isUserLoggedIn, petRoomPackage, roomCategories } =
+    useRatesStore((state) => ({
+      hotelId: state.booking.hotelId,
+      hotelType: state.hotelType,
+      isUserLoggedIn: state.isUserLoggedIn,
+      petRoomPackage: state.petRoomPackage,
+      roomCategories: state.roomCategories,
+    }))
+  const { isMainRoom, roomAvailability, roomNr, selectedPackage } =
+    useRoomContext()

-  if (!rateDefinitions) {
+  if (!roomAvailability || !("rateDefinitions" in roomAvailability)) {
    return null
  }

@@ -217,16 +211,16 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
          <Caption color="uiTextMediumContrast">
            {occupancy.max === occupancy.min
              ? intl.formatMessage(
-                  { id: "{guests, plural, one {# guest} other {# guests}}" },
-                  { guests: occupancy.max }
-                )
+                { id: "{guests, plural, one {# guest} other {# guests}}" },
+                { guests: occupancy.max }
+              )
              : intl.formatMessage(
-                  { id: "{min}-{max} guests" },
-                  {
-                    min: occupancy.min,
-                    max: occupancy.max,
-                  }
-                )}
+                { id: "{min}-{max} guests" },
+                {
+                  min: occupancy.min,
+                  max: occupancy.max,
+                }
+              )}
          </Caption>
        )}
        <RoomSize roomSize={roomSize} />
@@ -282,7 +276,10 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
              const isAvailable =
                product.public ||
                (product.member && isUserLoggedIn && isMainRoom)
-              const rateDefinition = getRateDefinition(product, rateDefinitions)
+              const rateDefinition = getRateDefinition(
+                product,
+                roomAvailability.rateDefinitions
+              )
              return (
                <FlexibilityOption
                  key={product.rate}
@@ -296,7 +293,7 @@ export default function RoomCard({ roomConfiguration }: RoomCardProps) {
                  title={rateTitle}
                  rateTitle={
                    product.public &&
-                    product.public?.rateType !== RateTypeEnum.Regular
+                      product.public?.rateType !== RateTypeEnum.Regular
                      ? rateDefinition?.title
                      : undefined
                  }
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomTypeFilter/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomTypeFilter/index.tsx
@@ -27,7 +27,7 @@ export default function RoomTypeFilter() {
  const intl = useIntl()

  const availableRooms = rooms.filter(
-    (r) => r.status === AvailabilityEnum.Available
+    (room) => room.status === AvailabilityEnum.Available
  ).length

  // const tooltipText = intl.formatMessage({
@@ -48,7 +48,7 @@ export default function RoomTypeFilter() {
      id: "{availableRooms}/{numberOfRooms, plural, one {# room type} other {# room types}} available",
    },
    {
-      availableRooms: availableRooms,
+      availableRooms,
      numberOfRooms: totalRooms,
    }
  )
@@ -81,7 +81,7 @@ export default function RoomTypeFilter() {
            aria-label={option.description}
            className={styles.radio}
            id={option.code}
-            key={option.itemCode}
+            key={option.code}
          >
            <div className={styles.circle} />
            <Caption color="uiTextHighContrast">{option.description}</Caption>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/index.tsx
@@ -25,19 +25,21 @@ export default function Rooms() {
    departureDate: state.booking.toDate,
    hotelId: state.booking.hotelId,
    rooms: state.rooms,
-    visibleRooms: state.allRooms,
+    visibleRooms: state.roomConfigurations,
  }))

  useEffect(() => {
-    const pricesWithCurrencies = visibleRooms.flatMap((room) =>
-      room.products
-        .filter((product) => product.member || product.public)
-        .map((product) => ({
-          currency: (product.public?.localPrice.currency ||
-            product.member?.localPrice.currency)!,
-          price: (product.public?.localPrice.pricePerNight ||
-            product.member?.localPrice.pricePerNight)!,
-        }))
+    const pricesWithCurrencies = visibleRooms.flatMap((roomConfiguration) =>
+      roomConfiguration.flatMap((room) =>
+        room.products
+          .filter((product) => product.member || product.public)
+          .map((product) => ({
+            currency: (product.public?.localPrice.currency ||
+              product.member?.localPrice.currency)!,
+            price: (product.public?.localPrice.pricePerNight ||
+              product.member?.localPrice.pricePerNight)!,
+          }))
+      )
    )
    const lowestPrice = pricesWithCurrencies.reduce(
      (minPrice, { price }) => Math.min(minPrice, price),
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx
@@ -26,11 +26,9 @@ export function RoomsContainer({
  const fromDateString = dt(fromDate).format("YYYY-MM-DD")
  const toDateString = dt(toDate).format("YYYY-MM-DD")

-  const uniqueAdultsCount = Array.from(new Set(adultArray))
-
-  const { isPending: isLoadingAvailability, data: roomsAvailability } =
+  const { data: roomsAvailability, isPending: isLoadingAvailability } =
    useRoomsAvailability(
-      uniqueAdultsCount,
+      adultArray,
      hotelId,
      fromDateString,
      toDateString,
--- a/apps/scandic-web/components/HotelReservation/SelectRate/getValidDates.test.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/getValidDates.test.ts
@@ -0,0 +1,54 @@
+import { beforeAll, describe, expect, it } from "@jest/globals"
+
+import { getValidFromDate, getValidToDate } from "./getValidDates"
+
+const NOW = new Date("2020-10-01T00:00:00Z")
+
+describe("getValidFromDate", () => {
+  beforeAll(() => {
+    jest.useFakeTimers({ now: NOW })
+  })
+
+  afterAll(() => {
+    jest.useRealTimers()
+  })
+
+  describe("getValidFromDate", () => {
+    it("returns today when empty string is provided", () => {
+      const actual = getValidFromDate("")
+      expect(actual.toISOString()).toBe("2020-10-01T00:00:00.000Z")
+    })
+
+    it("returns today when undefined is provided", () => {
+      const actual = getValidFromDate(undefined)
+      expect(actual.toISOString()).toBe("2020-10-01T00:00:00.000Z")
+    })
+
+    it("returns given date in utc", () => {
+      const actual = getValidFromDate("2024-01-01")
+      expect(actual.toISOString()).toBe("2024-01-01T00:00:00.000Z")
+    })
+  })
+
+  describe("getValidToDate", () => {
+    it("returns day after fromDate when empty string is provided", () => {
+      const actual = getValidToDate("", NOW)
+      expect(actual.toISOString()).toBe("2020-10-02T00:00:00.000Z")
+    })
+
+    it("returns day after fromDate when undefined is provided", () => {
+      const actual = getValidToDate(undefined, NOW)
+      expect(actual.toISOString()).toBe("2020-10-02T00:00:00.000Z")
+    })
+
+    it("returns given date in utc", () => {
+      const actual = getValidToDate("2024-01-01", NOW)
+      expect(actual.toISOString()).toBe("2024-01-01T00:00:00.000Z")
+    })
+
+    it("fallsback to day after fromDate when given date is before fromDate", () => {
+      const actual = getValidToDate("2020-09-30", NOW)
+      expect(actual.toISOString()).toBe("2020-10-02T00:00:00.000Z")
+    })
+  })
+})
--- a/apps/scandic-web/components/HotelReservation/SelectRate/getValidDates.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/getValidDates.ts
@@ -0,0 +1,55 @@
+import { dt } from "@/lib/dt"
+
+import type { Dayjs } from "dayjs"
+
+/**
+ * Get valid dates from stringFromDate and stringToDate making sure that they are not in the past and chronologically correct
+ * @example const { fromDate, toDate} = getValidDates("2021-01-01", "2021-01-02")
+ */
+export function getValidDates(
+  stringFromDate: string | undefined,
+  stringToDate: string | undefined
+): { fromDate: Dayjs; toDate: Dayjs } {
+  const fromDate = getValidFromDate(stringFromDate)
+  const toDate = getValidToDate(stringToDate, fromDate)
+
+  return { fromDate, toDate }
+}
+
+/**
+ * Get valid fromDate from stringFromDate making sure that it is not in the past
+ */
+export function getValidFromDate(stringFromDate: string | undefined): Dayjs {
+  const now = dt().utc()
+  if (!stringFromDate) {
+    return now
+  }
+  const toDate = dt(stringFromDate)
+
+  const yesterday = now.subtract(1, "day")
+  if (!toDate.isAfter(yesterday)) {
+    return now
+  }
+
+  return toDate
+}
+
+/**
+ * Get valid toDate from stringToDate making sure that it is after fromDate
+ */
+export function getValidToDate(
+  stringToDate: string | undefined,
+  fromDate: Dayjs | Date
+): Dayjs {
+  const tomorrow = dt().utc().add(1, "day")
+  if (!stringToDate) {
+    return tomorrow
+  }
+
+  const toDate = dt(stringToDate)
+  if (toDate.isAfter(fromDate)) {
+    return toDate
+  }
+
+  return tomorrow
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/index.tsx
@@ -1,12 +1,9 @@
-import { differenceInCalendarDays, format, isWeekend } from "date-fns"
 import stringify from "json-stable-stringify-without-jsonify"
 import { notFound } from "next/navigation"
 import { Suspense } from "react"

 import { getHotel } from "@/lib/trpc/memoizedRequests"

-import { getValidDates } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/getValidDates"
-import { getHotelSearchDetails } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/utils"
 import { auth } from "@/auth"
 import HotelInfoCard, {
  HotelInfoCardSkeleton,
@@ -14,16 +11,14 @@ import HotelInfoCard, {
 import { RoomsContainer } from "@/components/HotelReservation/SelectRate/RoomsContainer"
 import TrackingSDK from "@/components/TrackingSDK"
 import { setLang } from "@/i18n/serverContext"
+import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
 import { isValidSession } from "@/utils/session"
 import { convertSearchParamsToObj } from "@/utils/url"

-import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
+import { getValidDates } from "./getValidDates"
+import { getTracking } from "./tracking"
+
 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
-import {
-  TrackingChannelEnum,
-  type TrackingSDKHotelInfo,
-  type TrackingSDKPageData,
-} from "@/types/components/tracking"
 import type { LangParams, PageArgs } from "@/types/params"

 export default async function SelectRatePage({
@@ -35,7 +30,7 @@ export default async function SelectRatePage({
  if (!searchDetails?.hotel) {
    return notFound()
  }
-  const { hotel, adultsInRoom, childrenInRoom, selectHotelParams } =
+  const { adultsInRoom, childrenInRoom, hotel, noOfRooms, selectHotelParams } =
    searchDetails

  const { fromDate, toDate } = getValidDates(
@@ -55,41 +50,24 @@ export default async function SelectRatePage({
  const arrivalDate = fromDate.toDate()
  const departureDate = toDate.toDate()

-  const pageTrackingData: TrackingSDKPageData = {
-    pageId: "select-rate",
-    domainLanguage: params.lang,
-    channel: TrackingChannelEnum["hotelreservation"],
-    pageName: "hotelreservation|select-rate",
-    siteSections: "hotelreservation|select-rate",
-    pageType: "bookingroomsandratespage",
-    siteVersion: "new-web",
-  }
-
-  const hotelsTrackingData: TrackingSDKHotelInfo = {
-    searchTerm: selectHotelParams.city ?? hotel?.name,
-    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: "hotel",
-    bookingTypeofDay: isWeekend(arrivalDate) ? "weekend" : "weekday",
-    country: hotelData?.hotel.address.country,
-    hotelID: hotel?.id,
-    region: hotelData?.hotel.address.city,
-  }
-
-  const hotelId = +hotel.id
+  const { hotelsTrackingData, pageTrackingData } = getTracking(
+    params.lang,
+    arrivalDate,
+    departureDate,
+    adultsInRoom,
+    childrenInRoom,
+    hotel.id,
+    hotel.name,
+    noOfRooms,
+    hotelData?.hotel.address.country,
+    hotelData?.hotel.address.city,
+    selectHotelParams.city
+  )

  const booking = convertSearchParamsToObj<SelectRateSearchParams>(searchParams)
-  const suspenseKey = stringify(searchParams)

+  const hotelId = +hotel.id
+  const suspenseKey = stringify(searchParams)
  return (
    <>
      <Suspense fallback={<HotelInfoCardSkeleton />}>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/tracking.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/tracking.ts
@@ -0,0 +1,61 @@
+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,
+  arrivalDate: Date,
+  departureDate: Date,
+  adultsInRoom: number[],
+  childrenInRoom: ChildrenInRoom,
+  hotelId: string,
+  hotelName: string,
+  noOfRooms: number,
+  country: string | undefined,
+  hotelCity: string | undefined,
+  paramCity: string | undefined
+) {
+  const pageTrackingData: TrackingSDKPageData = {
+    channel: TrackingChannelEnum.hotelreservation,
+    domainLanguage: lang,
+    pageId: "select-rate",
+    pageName: "hotelreservation|select-rate",
+    pageType: "bookingroomsandratespage",
+    siteSections: "hotelreservation|select-rate",
+    siteVersion: "new-web",
+  }
+
+  const hotelsTrackingData: TrackingSDKHotelInfo = {
+    ageOfChildren: childrenInRoom
+      ?.map((c) => c?.map((k) => k.age).join(",") ?? "none")
+      .join("|"),
+    arrivalDate: format(arrivalDate, "yyyy-MM-dd"),
+    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),
+    hotelID: hotelId,
+    leadTime: differenceInCalendarDays(arrivalDate, new Date()),
+    noOfAdults: adultsInRoom.join(","),
+    noOfChildren: childrenInRoom?.map((kids) => kids?.length ?? 0).join(","),
+    noOfRooms,
+    region: hotelCity,
+    searchTerm: paramCity ?? hotelName,
+    searchType: "hotel",
+  }
+
+  return {
+    hotelsTrackingData,
+    pageTrackingData,
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/utils.ts
@@ -1,73 +1,48 @@
 import { trpc } from "@/lib/trpc/client"

 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
-import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
-import type { RoomsAvailability } from "@/types/trpc/routers/hotel/roomAvailability"
 import type { Lang } from "@/constants/languages"
-
-export function combineRoomAvailabilities(
-  availabilityResults: PromiseSettledResult<RoomsAvailability | null>[]
-) {
-  return availabilityResults.reduce<RoomsAvailability | null>((acc, result) => {
-    if (result.status === "fulfilled" && result.value) {
-      if (acc) {
-        acc = {
-          ...acc,
-          roomConfigurations: [
-            ...acc.roomConfigurations,
-            ...result.value.roomConfigurations,
-          ],
-        }
-      } else {
-        acc = result.value
-      }
-    }
-
-    // Ping monitoring about fail?
-    if (result.status === "rejected") {
-      console.info(`RoomAvailability fetch failed`)
-      console.error(result.reason)
-    }
-
-    return acc
-  }, null)
-}
+import type { ChildrenInRoom } from "@/utils/hotelSearchDetails"

 export function useRoomsAvailability(
-  uniqueAdultsCount: number[],
+  adultsCount: number[],
  hotelId: number,
  fromDateString: string,
  toDateString: string,
  lang: Lang,
-  childArray?: Child[],
+  childArray: ChildrenInRoom,
  bookingCode?: string
 ) {
-  const returnValue =
+  const roomsAvailability =
    trpc.hotel.availability.roomsCombinedAvailability.useQuery({
-      hotelId,
-      roomStayStartDate: fromDateString,
-      roomStayEndDate: toDateString,
-      uniqueAdultsCount,
-      childArray,
-      lang,
+      adultsCount,
      bookingCode,
+      childArray,
+      hotelId,
+      lang,
+      roomStayEndDate: toDateString,
+      roomStayStartDate: fromDateString,
    })

-  const combinedAvailability = returnValue.data?.length
-    ? combineRoomAvailabilities(
-        returnValue.data as PromiseSettledResult<RoomsAvailability | null>[]
-      )
-    : null
+  const data = roomsAvailability.data?.map((ra) => {
+    if (ra.status === "fulfilled") {
+      return ra.value
+    }
+    return {
+      details: ra.reason,
+      error: "request_failure",
+    }
+  })

  return {
-    ...returnValue,
-    data: combinedAvailability,
+    ...roomsAvailability,
+    data,
  }
 }

 export function useHotelPackages(
  adultArray: number[],
-  childArray: Child[] | undefined,
+  childArray: ChildrenInRoom,
  fromDateString: string,
  toDateString: string,
  hotelId: number,
@@ -75,7 +50,7 @@ export function useHotelPackages(
 ) {
  return trpc.hotel.packages.get.useQuery({
    adults: adultArray[0], // Using the first adult count
-    children: childArray ? childArray.length : undefined,
+    children: childArray?.[0]?.length, // Using the first children count
    endDate: toDateString,
    hotelId: hotelId.toString(),
    packageCodes: [