feat: bedtypes is selectable again

2025-04-07 13:43:52 +02:00
parent f62723c6e5
commit afb37d0cc5
69 changed files with 2135 additions and 2349 deletions
--- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx
@@ -1,14 +1,12 @@
 import { notFound, redirect } from "next/navigation"
 import { Suspense } from "react"

-import { REDEMPTION } from "@/constants/booking"
 import { selectRate } from "@/constants/routes/hotelReservation"
 import {
  getBreakfastPackages,
  getHotel,
-  getPackages,
  getProfileSafely,
-  getSelectedRoomAvailability,
+  getSelectedRoomsAvailability,
 } from "@/lib/trpc/memoizedRequests"

 import HotelHeader from "@/components/HotelReservation/EnterDetails/Header"
@@ -17,7 +15,6 @@ import Multiroom from "@/components/HotelReservation/EnterDetails/Room/Multiroom
 import RoomOne from "@/components/HotelReservation/EnterDetails/Room/One"
 import DesktopSummary from "@/components/HotelReservation/EnterDetails/Summary/Desktop"
 import MobileSummary from "@/components/HotelReservation/EnterDetails/Summary/Mobile"
-import { generateChildrenString } from "@/components/HotelReservation/utils"
 import Alert from "@/components/TempDesignSystem/Alert"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
@@ -29,7 +26,6 @@ import { getTracking } from "./tracking"

 import styles from "./page.module.css"

-import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { AlertTypeEnum } from "@/types/enums/alert"
 import type { LangParams, PageArgs } from "@/types/params"
@@ -40,92 +36,65 @@ export default async function DetailsPage({
  searchParams,
 }: PageArgs<LangParams, SelectRateSearchParams>) {
  const selectRoomParams = new URLSearchParams(searchParams)
-  selectRoomParams.delete("modifyRateIndex")
  const booking = convertSearchParamsToObj<SelectRateSearchParams>(searchParams)
  if ("modifyRateIndex" in booking) {
+    selectRoomParams.delete("modifyRateIndex")
    delete booking.modifyRateIndex
  }

-  void getProfileSafely()
-
  const breakfastInput = {
    adults: 1,
    fromDate: booking.fromDate,
    hotelId: booking.hotelId,
    toDate: booking.toDate,
  }
-  const breakfastPackages = await getBreakfastPackages(breakfastInput)
+  const hotelInput = {
+    hotelId: booking.hotelId,
+    // TODO: Remove this from input since it forces
+    //       waterfalls for no other reason than to
+    //       set merchantInformationData.alternatePaymentOptions
+    //       to an empty array
+    isCardOnlyPayment: false,
+    language: lang,
+  }
+  void getHotel(hotelInput)
+  void getBreakfastPackages(breakfastInput)
+  void getProfileSafely()
+
+  const roomsAvailability = await getSelectedRoomsAvailability({
+    booking,
+    lang,
+  })
+
  const rooms: Room[] = []
-
-  for (let room of booking.rooms) {
-    const childrenAsString =
-      room.childrenInRoom && generateChildrenString(room.childrenInRoom)
-
-    const packages = room.packages
-      ? await getPackages({
-          adults: room.adults,
-          children: room.childrenInRoom?.length,
-          endDate: booking.toDate,
-          hotelId: booking.hotelId,
-          packageCodes: room.packages,
-          startDate: booking.fromDate,
-          lang,
-        })
-      : null
-
-    const roomAvailability = await getSelectedRoomAvailability({
-      adults: room.adults,
-      bookingCode: booking.bookingCode,
-      children: childrenAsString,
-      counterRateCode: room.counterRateCode,
-      hotelId: booking.hotelId,
-      packageCodes: room.packages,
-      rateCode: room.rateCode,
-      roomStayEndDate: booking.toDate,
-      roomStayStartDate: booking.fromDate,
-      roomTypeCode: room.roomTypeCode,
-      redemption: booking.searchType === REDEMPTION,
-    })
-
-    if (!roomAvailability) {
+  for (let room of roomsAvailability) {
+    if (!room) {
+      // TODO: This could be done in the route already.
+      // (possibly also add an error case to url?)
+      // -------------------------------------------------------
      // redirect back to select-rate if availability call fails
      redirect(`${selectRate(lang)}?${selectRoomParams.toString()}`)
    }

-    rooms.push({
-      bedTypes: roomAvailability.bedTypes,
-      breakfastIncluded: roomAvailability.breakfastIncluded,
-      cancellationText: roomAvailability.cancellationText,
-      isFlexRate: roomAvailability.isFlexRate,
-      mustBeGuaranteed: roomAvailability.mustBeGuaranteed,
-      memberMustBeGuaranteed: roomAvailability.memberMustBeGuaranteed,
-      packages,
-      rate: roomAvailability.rate,
-      rateDefinitionTitle: roomAvailability.rateDefinitionTitle,
-      rateDetails: roomAvailability.rateDetails ?? [],
-      rateTitle: roomAvailability.rateTitle,
-      rateType: roomAvailability.rateType,
-      roomType: roomAvailability.selectedRoom.roomType,
-      roomTypeCode: roomAvailability.selectedRoom.roomTypeCode,
-      roomRate: roomAvailability.product,
-      isAvailable:
-        roomAvailability.selectedRoom.status === AvailabilityEnum.Available,
-    })
+    rooms.push(room)
  }
-  const isCardOnlyPayment = rooms.some((room) => room?.mustBeGuaranteed)

-  const hotelData = await getHotel({
-    hotelId: booking.hotelId,
-    isCardOnlyPayment,
-    language: lang,
-  })
-  const user = await getProfileSafely()
+  const hotelData = await getHotel(hotelInput)

-  if (!hotelData || !rooms) {
+  if (!hotelData || !rooms.length) {
    return notFound()
  }

+  const breakfastPackages = await getBreakfastPackages(breakfastInput)
+  const user = await getProfileSafely()
+
+  const isCardOnlyPayment = rooms.some((room) => room.mustBeGuaranteed)
  const { hotel } = hotelData
+  // TODO: Temp fix to avoid waterfall fetch and moving this
+  //       logic from the route here for now
+  if (isCardOnlyPayment) {
+    hotel.merchantInformationData.alternatePaymentOptions = []
+  }

  const { hotelsTrackingData, pageTrackingData } = getTracking(
    booking,
--- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
@@ -37,7 +37,7 @@ export default async function SelectRatePage({
  // If someone tries to update the url with
  // a bookingCode also, then we need to remove it
  if (isRedemption && searchParams.bookingCode) {
-    searchParams.bookingCode = ""
+    delete searchParams.bookingCode
  }

  return (
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/PriceDetailsTable/index.tsx
@@ -149,9 +149,13 @@ export default function PriceDetailsTable({
          <Fragment key={idx}>
            <TableSection>
              {rooms.length > 1 && (
-                <Body textTransform="bold">
-                  {intl.formatMessage({ id: "Room" })} {idx + 1}
-                </Body>
+                <tr>
+                  <th colSpan={2}>
+                    <Body textTransform="bold">
+                      {intl.formatMessage({ id: "Room" })} {idx + 1}
+                    </Body>
+                  </th>
+                </tr>
              )}
              <TableSectionHeader title={room.roomType} subtitle={duration} />
              {price && (
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/hooks/useModifyStay.ts
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/hooks/useModifyStay.ts
@@ -1,6 +1,5 @@
 import { useIntl } from "react-intl"

-import { dt } from "@/lib/dt"
 import { trpc } from "@/lib/trpc/client"
 import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
@@ -44,24 +43,11 @@ export default function useModifyStay({
        toast.error(intl.formatMessage({ id: "Failed to update your stay" }))
        return
      }
-
      // Update room details with server response data
-
-      const originalCheckIn = dt(bookedRoom.checkInDate)
-      const originalCheckOut = dt(bookedRoom.checkOutDate)
-
      updateBookedRoom({
        ...bookedRoom,
-        checkInDate: dt(updatedBooking.checkInDate)
-          .hour(originalCheckIn.hour())
-          .minute(originalCheckIn.minute())
-          .second(originalCheckIn.second())
-          .toDate(),
-        checkOutDate: dt(updatedBooking.checkOutDate)
-          .hour(originalCheckOut.hour())
-          .minute(originalCheckOut.minute())
-          .second(originalCheckOut.second())
-          .toDate(),
+        checkInDate: updatedBooking.checkInDate,
+        checkOutDate: updatedBooking.checkOutDate,
      })

      toast.success(intl.formatMessage({ id: "Your stay was updated" }))
@@ -90,22 +76,25 @@ export default function useModifyStay({
      let totalNewPrice = 0

      try {
-        const data = await utils.hotel.availability.room.fetch({
-          hotelId: bookedRoom.hotelId,
-          roomStayStartDate: formValues.checkInDate,
-          roomStayEndDate: formValues.checkOutDate,
-          adults: bookedRoom.adults,
-          children: bookedRoom.childrenAsString,
-          bookingCode: bookedRoom.bookingCode ?? undefined,
-          rateCode: bookedRoom.rateDefinition.rateCode,
-          roomTypeCode: bookedRoom.roomTypeCode,
+        const data = await utils.hotel.availability.myStay.fetch({
+          booking: {
+            fromDate: formValues.checkInDate,
+            hotelId: bookedRoom.hotelId,
+            room: {
+              adults: bookedRoom.adults,
+              bookingCode: bookedRoom.bookingCode ?? undefined,
+              childrenInRoom: bookedRoom.childrenInRoom,
+              rateCode: bookedRoom.rateDefinition.rateCode,
+              roomTypeCode: bookedRoom.roomTypeCode,
+            },
+            toDate: formValues.checkOutDate,
+          },
          lang,
        })

        if (!data?.selectedRoom || data.selectedRoom.roomsLeft <= 0) {
          return { success: false, noAvailability: true }
        }
-
        let roomPrice = 0
        if (isLoggedIn && "member" in data.product && data.product.member) {
          roomPrice = data.product.member.localPrice.pricePerStay
@@ -123,7 +112,6 @@ export default function useModifyStay({
        ) {
          roomPrice = data.product.redemption.localPrice.additionalPricePerStay
        }
-
        totalNewPrice += roomPrice
        availabilityResults.push(data)
      } catch (error) {
--- a/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/index.tsx
@@ -167,9 +167,7 @@ export default function ModifyStay({ isLoggedIn }: ModifyStayProps) {
                label: isFirstStep
                  ? intl.formatMessage({ id: "Check availability" })
                  : intl.formatMessage({ id: "Confirm" }),
-                onClick: isFirstStep
-                  ? () => void onCheckAvailability()
-                  : () => void handleModifyStay(),
+                onClick: isFirstStep ? onCheckAvailability : handleModifyStay,
                intent: isFirstStep ? "secondary" : "primary",
                isLoading: isLoading,
                disabled: isLoading,
--- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
@@ -94,6 +94,8 @@ export function ReferenceCard({
  const {
    confirmationNumber,
    cancellationNumber,
+    checkInDate,
+    checkOutDate,
    isCancelled,
    bookingCode,
    rateDefinition,
@@ -222,7 +224,7 @@ export function ReferenceCard({
            </Typography>
            <Typography variant="Body/Paragraph/mdBold">
              <p>
-                {`${dt(booking.checkInDate).locale(lang).format("dddd, D MMMM")} ${intl.formatMessage({ id: "from" })} ${hotel.hotelFacts.checkin.checkInTime}`}
+                {`${dt(checkInDate).locale(lang).format("dddd, D MMMM")} ${intl.formatMessage({ id: "from" })} ${hotel.hotelFacts.checkin.checkInTime}`}
              </p>
            </Typography>
          </div>
@@ -232,7 +234,7 @@ export function ReferenceCard({
            </Typography>
            <Typography variant="Body/Paragraph/mdBold">
              <p>
-                {`${dt(booking.checkOutDate).locale(lang).format("dddd, D MMMM")} ${intl.formatMessage({ id: "until" })} ${hotel.hotelFacts.checkin.checkOutTime}`}
+                {`${dt(checkOutDate).locale(lang).format("dddd, D MMMM")} ${intl.formatMessage({ id: "until" })} ${hotel.hotelFacts.checkin.checkOutTime}`}
              </p>
            </Typography>
          </div>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
@@ -27,21 +27,14 @@ export default function MobileSummary({
  const scrollY = useRef(0)
  const [isSummaryOpen, setIsSummaryOpen] = useState(false)

-  const {
-    booking,
-    bookingRooms,
-    roomsAvailability,
-    rateSummary,
-    vat,
-    packages,
-  } = useRatesStore((state) => ({
-    booking: state.booking,
-    bookingRooms: state.booking.rooms,
-    roomsAvailability: state.roomsAvailability,
-    rateSummary: state.rateSummary,
-    vat: state.vat,
-    packages: state.packages,
-  }))
+  const { booking, bookingRooms, roomsAvailability, rateSummary, vat } =
+    useRatesStore((state) => ({
+      booking: state.booking,
+      bookingRooms: state.booking.rooms,
+      roomsAvailability: state.roomsAvailability,
+      rateSummary: state.rateSummary,
+      vat: state.vat,
+    }))

  function toggleSummaryOpen() {
    setIsSummaryOpen(!isSummaryOpen)
@@ -78,7 +71,7 @@ export default function MobileSummary({
  }

  const rooms = rateSummary.map((room, index) =>
-    room ? mapRate(room, index, bookingRooms, packages) : null
+    room ? mapRate(room, index, bookingRooms, room.packages) : null
  )

  const containsBookingCodeRate = rateSummary.find(
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mapRate.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mapRate.ts
@@ -11,10 +11,6 @@ export function mapRate(
  bookingRooms: Room[],
  packages: NonNullable<Packages>
 ) {
-  const roomPackages = room.packages
-    .map((code) => packages.find((pkg) => pkg.code === code))
-    .filter((pkg): pkg is NonNullable<typeof pkg> => Boolean(pkg))
-
  const rate = {
    adults: bookingRooms[index].adults,
    cancellationText: room.product.rateDefinition?.cancellationText ?? "",
@@ -39,7 +35,7 @@ export function mapRate(
    },
    roomRate: room.product,
    roomType: room.roomType,
-    packages: roomPackages,
+    packages,
  }

  if ("corporateCheque" in room.product) {
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
@@ -30,7 +30,7 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
    bookingCode,
    bookingRooms,
    dates,
-    petRoomPackage,
+    isFetchingPackages,
    rateSummary,
    roomsAvailability,
    searchParams,
@@ -41,7 +41,7 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
      checkInDate: state.booking.fromDate,
      checkOutDate: state.booking.toDate,
    },
-    petRoomPackage: state.petRoomPackage,
+    isFetchingPackages: state.rooms.some((room) => room.isFetchingPackages),
    rateSummary: state.rateSummary,
    roomsAvailability: state.roomsAvailability,
    searchParams: state.searchParams,
@@ -123,7 +123,7 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
    })
  }

-  if (!rateSummary.length) {
+  if (!rateSummary.length || isFetchingPackages) {
    return null
  }

@@ -149,8 +149,7 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
  const totalPriceToShow = getTotalPrice(
    mainRoomProduct,
    rateSummary,
-    isUserLoggedIn,
-    petRoomPackage
+    isUserLoggedIn
  )

  const rateProduct = rateSummary.find((rate) => rate?.product)?.product
@@ -248,7 +247,7 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
                        return total
                      }

-                      const { features, packages: roomPackages, product } = rate
+                      const { packages: roomPackages, product } = rate

                      const memberExists = "member" in product && product.member
                      const publicExists = "public" in product && product.public
@@ -266,21 +265,15 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
                        return total
                      }

-                      const hasSelectedPetRoom = roomPackages.includes(
-                        RoomPackageCodeEnum.PET_ROOM
+                      const hasSelectedPetRoom = roomPackages.find(
+                        (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
                      )
                      if (!hasSelectedPetRoom) {
                        return total + price
                      }
-                      const isPetRoom = features.find(
-                        (feature) =>
-                          feature.code === RoomPackageCodeEnum.PET_ROOM
+                      return (
+                        total + price + hasSelectedPetRoom.localPrice.totalPrice
                      )
-                      const petRoomPrice =
-                        isPetRoom && petRoomPackage
-                          ? Number(petRoomPackage.localPrice.totalPrice)
-                          : 0
-                      return total + price + petRoomPrice
                    }, 0),
                    currency: mainRoomCurrency,
                  }}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
@@ -1,17 +1,11 @@
 import type { Price } from "@/types/components/hotelReservation/price"
-import {
-  type RoomPackage,
-  RoomPackageCodeEnum,
-} from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { CurrencyEnum } from "@/types/enums/currency"
-import type { Packages } from "@/types/requests/packages"
 import type { RedemptionProduct } from "@/types/trpc/routers/hotel/roomAvailability"

 export function calculateTotalPrice(
  selectedRateSummary: Rate[],
-  isUserLoggedIn: boolean,
-  petRoomPackage: RoomPackage | undefined
+  isUserLoggedIn: boolean
 ) {
  return selectedRateSummary.reduce<Price>(
    (total, room, idx) => {
@@ -32,35 +26,26 @@ export function calculateTotalPrice(
        return total
      }

-      const isPetRoom = room.features.find(
-        (feature) => feature.code === RoomPackageCodeEnum.PET_ROOM
+      const packagesPrice = room.packages.reduce(
+        (total, pkg) => {
+          total.local = total.local + pkg.localPrice.totalPrice
+          if (pkg.requestedPrice.totalPrice) {
+            total.requested = total.requested + pkg.requestedPrice.totalPrice
+          }
+          return total
+        },
+        { local: 0, requested: 0 }
      )
-      let petRoomPriceLocal = 0
-      if (
-        petRoomPackage &&
-        isPetRoom &&
-        room.packages.includes(RoomPackageCodeEnum.PET_ROOM)
-      ) {
-        petRoomPriceLocal = Number(petRoomPackage.localPrice.totalPrice)
-      }
-      let petRoomPriceRequested = 0
-      if (
-        petRoomPackage &&
-        isPetRoom &&
-        room.packages.includes(RoomPackageCodeEnum.PET_ROOM)
-      ) {
-        petRoomPriceRequested = Number(petRoomPackage.requestedPrice.totalPrice)
-      }

      total.local.currency = rate.localPrice.currency
      total.local.price =
-        total.local.price + rate.localPrice.pricePerStay + petRoomPriceLocal
+        total.local.price + rate.localPrice.pricePerStay + packagesPrice.local

      if (rate.localPrice.regularPricePerStay) {
        total.local.regularPrice =
          (total.local.regularPrice || 0) +
          rate.localPrice.regularPricePerStay +
-          petRoomPriceLocal
+          packagesPrice.local
      }

      if (rate.requestedPrice) {
@@ -78,13 +63,13 @@ export function calculateTotalPrice(
        total.requested.price =
          total.requested.price +
          rate.requestedPrice.pricePerStay +
-          petRoomPriceRequested
+          packagesPrice.requested

        if (rate.requestedPrice.regularPricePerStay) {
          total.requested.regularPrice =
            (total.requested.regularPrice || 0) +
            rate.requestedPrice.regularPricePerStay +
-            petRoomPriceRequested
+            packagesPrice.requested
        }
      }

@@ -199,8 +184,7 @@ export function calculateCorporateChequePrice(selectedRateSummary: Rate[]) {
 export function getTotalPrice(
  mainRoomProduct: Rate | null,
  rateSummary: Array<Rate | null>,
-  isUserLoggedIn: boolean,
-  petRoomPackage: NonNullable<Packages>[number] | undefined
+  isUserLoggedIn: boolean
 ): Price | null {
  const summaryArray = rateSummary.filter((rate): rate is Rate => rate !== null)

@@ -209,7 +193,7 @@ export function getTotalPrice(
  }

  if (!mainRoomProduct) {
-    return calculateTotalPrice(summaryArray, isUserLoggedIn, petRoomPackage)
+    return calculateTotalPrice(summaryArray, isUserLoggedIn)
  }

  const { product } = mainRoomProduct
@@ -222,5 +206,5 @@ export function getTotalPrice(
    return calculateVoucherPrice(summaryArray)
  }

-  return calculateTotalPrice(summaryArray, isUserLoggedIn, petRoomPackage)
+  return calculateTotalPrice(summaryArray, isUserLoggedIn)
 }
--- 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
@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

+import { dt } from "@/lib/dt"
 import { useRatesStore } from "@/stores/select-rate"

 import Image from "@/components/Image"
@@ -15,22 +16,31 @@ import { useRoomContext } from "@/contexts/SelectRate/Room"

 import styles from "./selectedRoomPanel.module.css"

+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import { CurrencyEnum } from "@/types/enums/currency"
 import { RateEnum } from "@/types/enums/rate"

 export default function SelectedRoomPanel() {
  const intl = useIntl()
-  const { isUserLoggedIn, roomCategories, rooms } = useRatesStore((state) => ({
-    isUserLoggedIn: state.isUserLoggedIn,
-    roomCategories: state.roomCategories,
-    rooms: state.rooms,
-  }))
+  const { dates, isUserLoggedIn, roomCategories, rooms } = useRatesStore(
+    (state) => ({
+      dates: {
+        from: state.booking.fromDate,
+        to: state.booking.toDate,
+      },
+      isUserLoggedIn: state.isUserLoggedIn,
+      roomCategories: state.roomCategories,
+      rooms: state.rooms,
+    })
+  )
  const {
    actions: { modifyRate },
    isMainRoom,
    roomNr,
+    selectedPackages,
    selectedRate,
  } = useRoomContext()
+  const nights = dt(dates.to).diff(dt(dates.from), "days")

  const images = roomCategories.find((roomCategory) =>
    roomCategory.roomTypes.some(
@@ -60,8 +70,16 @@ export default function SelectedRoomPanel() {
    return null
  }

+  let petRoomPrice = 0
+  const petRoomPackageSelected = selectedPackages.find(
+    (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
+  )
+  if (petRoomPackageSelected) {
+    petRoomPrice = petRoomPackageSelected.localPrice.totalPrice / nights
+  }
+
+  const night = intl.formatMessage({ id: "night" })
  let selectedProduct
-  let isPerNight = true
  if (
    isUserLoggedIn &&
    isMainRoom &&
@@ -69,19 +87,17 @@ export default function SelectedRoomPanel() {
    selectedRate.product.member
  ) {
    const { localPrice } = selectedRate.product.member
-    selectedProduct = `${localPrice.pricePerNight} ${localPrice.currency}`
+    selectedProduct = `${localPrice.pricePerNight + petRoomPrice} ${localPrice.currency} / ${night}`
  } else if ("public" in selectedRate.product && selectedRate.product.public) {
    const { localPrice } = selectedRate.product.public
-    selectedProduct = `${localPrice.pricePerNight} ${localPrice.currency}`
+    selectedProduct = `${localPrice.pricePerNight + petRoomPrice} ${localPrice.currency} / ${night}`
  } else if ("corporateCheque" in selectedRate.product) {
-    isPerNight = false
    const { localPrice } = selectedRate.product.corporateCheque
    selectedProduct = `${localPrice.numberOfCheques} ${CurrencyEnum.CC}`
    if (localPrice.additionalPricePerStay && localPrice.currency) {
      selectedProduct = `${selectedProduct} + ${localPrice.additionalPricePerStay} ${localPrice.currency}`
    }
  } else if ("voucher" in selectedRate.product) {
-    isPerNight = false
    selectedProduct = `${selectedRate.product.voucher.numberOfVouchers} ${CurrencyEnum.Voucher}`
  }

@@ -109,9 +125,7 @@ export default function SelectedRoomPanel() {
        <Body color="uiTextMediumContrast">
          {getRateTitle(selectedRate.product.rate)}
        </Body>
-        <Body color="uiTextHighContrast">
-          {`${selectedProduct}${isPerNight ? "/" + intl.formatMessage({ id: "night" }) : ""}`}
-        </Body>
+        <Body color="uiTextHighContrast">{selectedProduct}</Body>
      </div>
      <div className={styles.imageContainer}>
        {images?.[0]?.imageSizes?.tiny ? (
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/NoAvailabilityAlert/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/NoAvailabilityAlert/index.tsx
@@ -17,12 +17,16 @@ export default function NoAvailabilityAlert() {
  const lang = useLang()
  const intl = useIntl()
  const bookingCode = useRatesStore((state) => state.booking.bookingCode)
-  const { rooms } = useRoomContext()
+  const { isFetchingPackages, rooms } = useRoomContext()

  const noAvailableRooms = rooms.every(
    (roomConfig) => roomConfig.status === AvailabilityEnum.NotAvailable
  )

+  if (isFetchingPackages) {
+    return null
+  }
+
  if (noAvailableRooms) {
    const text = intl.formatMessage({
      id: "There are no rooms available that match your request.",
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomPackageFilter/Checkbox/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomPackageFilter/Checkbox/index.tsx
@@ -1,54 +0,0 @@
-"use client"
-
-import { Checkbox as AriaCheckbox } from "react-aria-components"
-
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import styles from "./checkbox.module.css"
-
-import type { MaterialSymbolProps } from "react-material-symbols"
-
-interface CheckboxProps {
-  name: string
-  value: string
-  isSelected: boolean
-  iconName: MaterialSymbolProps["icon"]
-  isDisabled: boolean
-  onChange: (value: string) => void
-}
-
-export default function Checkbox({
-  isSelected,
-  name,
-  value,
-  iconName,
-  isDisabled,
-  onChange,
-}: CheckboxProps) {
-  return (
-    <AriaCheckbox
-      className={styles.checkboxWrapper}
-      isSelected={isSelected}
-      isDisabled={isDisabled}
-      onChange={() => onChange(value)}
-    >
-      {({ isSelected }) => (
-        <>
-          <span className={styles.checkbox}>
-            {isSelected && <MaterialIcon icon="check" color="Icon/Inverted" />}
-          </span>
-          <Typography
-            variant="Body/Paragraph/mdRegular"
-            className={styles.text}
-          >
-            <span>{name}</span>
-          </Typography>
-          {iconName ? (
-            <MaterialIcon icon={iconName} color="Icon/Default" />
-          ) : null}
-        </>
-      )}
-    </AriaCheckbox>
-  )
-}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomPackageFilter/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomPackageFilter/index.tsx
@@ -1,196 +0,0 @@
-"use client"
-import { useEffect, useState } from "react"
-import {
-  Button as AriaButton,
-  Dialog,
-  DialogTrigger,
-  Popover,
-} from "react-aria-components"
-import { Controller, useForm } from "react-hook-form"
-import { useIntl } from "react-intl"
-
-import { Button } from "@scandic-hotels/design-system/Button"
-import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { Typography } from "@scandic-hotels/design-system/Typography"
-
-import { useRatesStore } from "@/stores/select-rate"
-
-import Divider from "@/components/TempDesignSystem/Divider"
-import { useRoomContext } from "@/contexts/SelectRate/Room"
-
-import Checkbox from "./Checkbox"
-import { getIconNameByPackageCode } from "./utils"
-
-import styles from "./roomPackageFilter.module.css"
-
-import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
-
-type FormValues = {
-  selectedPackages: RoomPackageCodeEnum[]
-}
-
-export default function RoomPackageFilter() {
-  const intl = useIntl()
-
-  const [isOpen, setIsOpen] = useState(false)
-  const packageOptions = useRatesStore((state) => state.packageOptions)
-  const {
-    actions: { togglePackages },
-    selectedPackages,
-  } = useRoomContext()
-
-  const { setValue, handleSubmit, control } = useForm<FormValues>({
-    defaultValues: {
-      selectedPackages: selectedPackages,
-    },
-  })
-
-  useEffect(() => {
-    setValue("selectedPackages", selectedPackages)
-  }, [selectedPackages, setValue])
-
-  function onSubmit(data: FormValues) {
-    togglePackages(data.selectedPackages)
-    setIsOpen(false)
-  }
-
-  return (
-    <div className={styles.roomPackageFilter}>
-      {selectedPackages.map((pkg) => (
-        <AriaButton
-          key={pkg}
-          onPress={() => {
-            const packages = selectedPackages.filter((s) => s !== pkg)
-            togglePackages(packages)
-          }}
-          className={styles.activeFilterButton}
-        >
-          <MaterialIcon
-            icon={getIconNameByPackageCode(pkg)}
-            size={16}
-            color="Icon/Interactive/Default"
-          />
-          <MaterialIcon
-            icon="close"
-            size={16}
-            color="Icon/Interactive/Default"
-          />
-        </AriaButton>
-      ))}
-      <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
-        <ChipButton variant="Outlined">
-          {intl.formatMessage({ id: "Room preferences" })}
-          <MaterialIcon
-            icon="keyboard_arrow_down"
-            size={20}
-            color="CurrentColor"
-          />
-        </ChipButton>
-        <Popover placement="bottom end">
-          <Dialog className={styles.dialog}>
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <Controller
-                control={control}
-                name="selectedPackages"
-                render={({ field }) => (
-                  <div>
-                    {packageOptions.map((option) => {
-                      const isPetRoom =
-                        option.code === RoomPackageCodeEnum.PET_ROOM
-
-                      const isAllergyRoom =
-                        option.code === RoomPackageCodeEnum.ALLERGY_ROOM
-
-                      const hasPetRoom = field.value.includes(
-                        RoomPackageCodeEnum.PET_ROOM
-                      )
-
-                      const hasAllergyRoom = field.value.includes(
-                        RoomPackageCodeEnum.ALLERGY_ROOM
-                      )
-
-                      const isDisabled =
-                        (isPetRoom && hasAllergyRoom) ||
-                        (isAllergyRoom && hasPetRoom)
-
-                      return (
-                        <>
-                          <Checkbox
-                            key={option.code}
-                            name={option.description}
-                            value={option.code}
-                            iconName={getIconNameByPackageCode(option.code)}
-                            isSelected={field.value.includes(option.code)}
-                            isDisabled={isDisabled}
-                            onChange={() => {
-                              const isSelected = field.value.includes(
-                                option.code
-                              )
-                              const newValue = isSelected
-                                ? field.value.filter(
-                                    (pkg) => pkg !== option.code
-                                  )
-                                : [...field.value, option.code]
-                              field.onChange(newValue)
-                            }}
-                          />
-                          {option.code === RoomPackageCodeEnum.PET_ROOM && (
-                            <Typography variant="Body/Supporting text (caption)/smRegular">
-                              <p className={styles.additionalInformation}>
-                                {intl.formatMessage(
-                                  {
-                                    id: "<b>200 SEK/night</b> Important information on pricing and features of pet-friendly rooms.",
-                                  },
-                                  {
-                                    b: (str) => (
-                                      <Typography variant="Body/Supporting text (caption)/smBold">
-                                        <span
-                                          className={
-                                            styles.additionalInformationPrice
-                                          }
-                                        >
-                                          {str}
-                                        </span>
-                                      </Typography>
-                                    ),
-                                  }
-                                )}
-                              </p>
-                            </Typography>
-                          )}
-                        </>
-                      )
-                    })}
-                  </div>
-                )}
-              />
-              <div className={styles.footer}>
-                <Divider color="borderDividerSubtle" />
-                <div className={styles.buttonContainer}>
-                  <Typography variant="Body/Supporting text (caption)/smBold">
-                    <Button
-                      variant="Text"
-                      size="Small"
-                      onPress={() => {
-                        togglePackages([])
-                        setIsOpen(false)
-                      }}
-                    >
-                      {intl.formatMessage({ id: "Clear" })}
-                    </Button>
-                  </Typography>
-                  <Typography variant="Body/Supporting text (caption)/smBold">
-                    <Button variant="Tertiary" size="Small" type="submit">
-                      {intl.formatMessage({ id: "Apply" })}
-                    </Button>
-                  </Typography>
-                </div>
-              </div>
-            </form>
-          </Dialog>
-        </Popover>
-      </DialogTrigger>
-    </div>
-  )
-}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/bookingCodeFilter.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/bookingCodeFilter.module.css
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx
@@ -2,10 +2,12 @@

 import { useIntl } from "react-intl"

+import { trpc } from "@/lib/trpc/client"
 import { useRatesStore } from "@/stores/select-rate"

 import Select from "@/components/TempDesignSystem/Select"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
+import useLang from "@/hooks/useLang"

 import styles from "./bookingCodeFilter.module.css"

@@ -16,12 +18,16 @@ import { RateTypeEnum } from "@/types/enums/rateType"

 export default function BookingCodeFilter() {
  const intl = useIntl()
+  const lang = useLang()
+  const utils = trpc.useUtils()
  const {
-    actions: { selectFilter },
-    selectedFilter,
+    actions: { appendRegularRates, selectFilter },
+    bookingRoom,
    rooms,
+    selectedFilter,
+    selectedPackages,
  } = useRoomContext()
-  const bookingCode = useRatesStore((state) => state.booking.bookingCode)
+  const booking = useRatesStore((state) => state.booking)

  const bookingCodeFilterItems = [
    {
@@ -38,25 +44,45 @@ export default function BookingCodeFilter() {
    },
  ]

-  function handleChangeFilter(selectedFilter: Key) {
+  async function handleChangeFilter(selectedFilter: Key) {
    selectFilter(selectedFilter as BookingCodeFilterEnum)
+    const room = await utils.hotel.availability.selectRate.room.fetch({
+      booking: {
+        ...booking,
+        room: {
+          ...bookingRoom,
+          bookingCode:
+            selectedFilter === BookingCodeFilterEnum.Discounted
+              ? booking.bookingCode
+              : undefined,
+          packages: selectedPackages.map((pkg) => pkg.code),
+        },
+      },
+      lang,
+    })
+    appendRegularRates(room?.roomConfigurations)
  }

-  const hideFilterDespiteBookingCode = rooms.every((room) =>
-    room.products.every((product) => {
-      const isRedemption = Array.isArray(product)
-      if (isRedemption) {
-        return true
-      }
-      const isCorporateCheque =
-        product.rateDefinition?.rateType === RateTypeEnum.CorporateCheque
-      const isVoucher =
-        product.rateDefinition?.rateType === RateTypeEnum.Voucher
-      return isCorporateCheque || isVoucher
-    })
-  )
+  const hideFilterDespiteBookingCode =
+    rooms.length &&
+    rooms.every((room) =>
+      room.products.every((product) => {
+        const isRedemption = Array.isArray(product)
+        if (isRedemption) {
+          return true
+        }
+        const isCorporateCheque =
+          product.rateDefinition?.rateType === RateTypeEnum.CorporateCheque
+        const isVoucher =
+          product.rateDefinition?.rateType === RateTypeEnum.Voucher
+        return isCorporateCheque || isVoucher
+      })
+    )

-  if ((bookingCode && hideFilterDespiteBookingCode) || !bookingCode) {
+  if (
+    (booking.bookingCode && hideFilterDespiteBookingCode) ||
+    !booking.bookingCode
+  ) {
    return null
  }

--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/PetRoomMessage/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/PetRoomMessage/index.tsx
@@ -0,0 +1,40 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useRoomContext } from "@/contexts/SelectRate/Room"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./petRoom.module.css"
+
+export default function PetRoomMessage() {
+  const intl = useIntl()
+  const { petRoomPackage } = useRoomContext()
+  if (!petRoomPackage) {
+    return null
+  }
+  return (
+    <Typography variant="Body/Supporting text (caption)/smRegular">
+      <p className={styles.additionalInformation}>
+        {intl.formatMessage(
+          {
+            id: "Pet-friendly rooms include a charge of approx. <b>{price}/stay</b>",
+          },
+          {
+            b: (str) => (
+              <Typography variant="Body/Supporting text (caption)/smBold">
+                <span className={styles.additionalInformationPrice}>{str}</span>
+              </Typography>
+            ),
+            price: formatPrice(
+              intl,
+              petRoomPackage.localPrice.price,
+              petRoomPackage.localPrice.currency
+            ),
+          }
+        )}
+      </p>
+    </Typography>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/PetRoomMessage/petRoom.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/PetRoomMessage/petRoom.module.css
@@ -0,0 +1,8 @@
+.additionalInformation {
+  color: var(--Text-Tertiary);
+  padding: var(--Space-x1) var(--Space-x15);
+}
+
+.additionalInformationPrice {
+  color: var(--Text-Default);
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/checkbox.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/checkbox.module.css
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/index.tsx
@@ -0,0 +1,80 @@
+"use client"
+import { Fragment } from "react"
+import { Checkbox, CheckboxGroup } from "react-aria-components"
+import { Controller, useFormContext } from "react-hook-form"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useRatesStore } from "@/stores/select-rate"
+
+import { getIconNameByPackageCode } from "../../utils"
+import PetRoomMessage from "./PetRoomMessage"
+import {
+  checkIsAllergyRoom,
+  checkIsPetRoom,
+  includesAllergyRoom,
+  includesPetRoom,
+} from "./utils"
+
+import styles from "./checkbox.module.css"
+
+import type { FormValues } from "../formValues"
+
+export default function Checkboxes() {
+  const packageOptions = useRatesStore((state) => state.packageOptions)
+  const { control } = useFormContext<FormValues>()
+  return (
+    <Controller
+      control={control}
+      name="selectedPackages"
+      render={({ field }) => {
+        const allergyRoomSelected = includesAllergyRoom(field.value)
+        const petRoomSelected = includesPetRoom(field.value)
+        return (
+          <CheckboxGroup {...field}>
+            <div>
+              {packageOptions.map((option) => {
+                const isAllergyRoom = checkIsAllergyRoom(option.code)
+                const isPetRoom = checkIsPetRoom(option.code)
+                const isDisabled =
+                  (isPetRoom && allergyRoomSelected) ||
+                  (isAllergyRoom && petRoomSelected)
+
+                const isSelected = field.value.includes(option.code)
+                const iconName = getIconNameByPackageCode(option.code)
+
+                return (
+                  <Fragment key={option.code}>
+                    <Checkbox
+                      key={option.code}
+                      className={styles.checkboxWrapper}
+                      isDisabled={isDisabled}
+                      value={option.code}
+                    >
+                      <span className={styles.checkbox}>
+                        {isSelected ? (
+                          <MaterialIcon icon="check" color="Icon/Inverted" />
+                        ) : null}
+                      </span>
+                      <Typography
+                        className={styles.text}
+                        variant="Body/Paragraph/mdRegular"
+                      >
+                        <span>{option.description}</span>
+                      </Typography>
+                      {iconName ? (
+                        <MaterialIcon icon={iconName} color="Icon/Default" />
+                      ) : null}
+                    </Checkbox>
+                    {isPetRoom ? <PetRoomMessage /> : null}
+                  </Fragment>
+                )
+              })}
+            </div>
+          </CheckboxGroup>
+        )
+      }}
+    />
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/utils.ts
@@ -0,0 +1,18 @@
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import type { PackageEnum } from "@/types/requests/packages"
+
+export function includesAllergyRoom(codes: PackageEnum[]) {
+  return codes.includes(RoomPackageCodeEnum.ALLERGY_ROOM)
+}
+
+export function includesPetRoom(codes: PackageEnum[]) {
+  return codes.includes(RoomPackageCodeEnum.PET_ROOM)
+}
+
+export function checkIsAllergyRoom(code: PackageEnum) {
+  return code === RoomPackageCodeEnum.ALLERGY_ROOM
+}
+
+export function checkIsPetRoom(code: PackageEnum) {
+  return code === RoomPackageCodeEnum.PET_ROOM
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/form.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/form.module.css
@@ -0,0 +1,11 @@
+.footer {
+  display: grid;
+  gap: var(--Space-x1);
+  padding: 0 var(--Space-x15);
+}
+
+.buttonContainer {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/formValues.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/formValues.ts
@@ -0,0 +1,5 @@
+import type { PackageEnum } from "@/types/requests/packages"
+
+export type FormValues = {
+  selectedPackages: PackageEnum[]
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
@@ -0,0 +1,98 @@
+"use client"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { trpc } from "@/lib/trpc/client"
+import { useRatesStore } from "@/stores/select-rate"
+
+import Divider from "@/components/TempDesignSystem/Divider"
+import { useRoomContext } from "@/contexts/SelectRate/Room"
+import useLang from "@/hooks/useLang"
+
+import Checkboxes from "./Checkboxes"
+
+import styles from "./form.module.css"
+
+import type { PackageEnum } from "@/types/requests/packages"
+import type { FormValues } from "./formValues"
+
+export default function Form({ close }: { close: VoidFunction }) {
+  const intl = useIntl()
+  const lang = useLang()
+  const utils = trpc.useUtils()
+
+  const {
+    actions: { removeSelectedPackages, selectPackages, updateRooms },
+    bookingRoom,
+    selectedPackages,
+  } = useRoomContext()
+  const booking = useRatesStore((state) => state.booking)
+
+  const methods = useForm<FormValues>({
+    values: {
+      selectedPackages: selectedPackages.map((pkg) => pkg.code),
+    },
+  })
+
+  async function getFilteredRates(packages: PackageEnum[]) {
+    const filterRates = await utils.hotel.availability.selectRate.room.fetch({
+      booking: {
+        fromDate: booking.fromDate,
+        hotelId: booking.hotelId,
+        searchType: booking.searchType,
+        toDate: booking.toDate,
+        room: {
+          ...bookingRoom,
+          bookingCode: bookingRoom.rateCode
+            ? bookingRoom.bookingCode
+            : booking.bookingCode,
+          packages,
+        },
+      },
+      lang,
+    })
+    updateRooms(filterRates?.roomConfigurations)
+  }
+
+  function clearSelectedPackages() {
+    removeSelectedPackages()
+    close()
+    getFilteredRates([])
+  }
+
+  function onSubmit(data: FormValues) {
+    selectPackages(data.selectedPackages)
+    close()
+    getFilteredRates(data.selectedPackages)
+  }
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <Checkboxes />
+        <div className={styles.footer}>
+          <Divider color="borderDividerSubtle" />
+          <div className={styles.buttonContainer}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <Button
+                onPress={clearSelectedPackages}
+                size="Small"
+                variant="Text"
+              >
+                {intl.formatMessage({ id: "Clear" })}
+              </Button>
+            </Typography>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <Button variant="Tertiary" size="Small" type="submit">
+                {intl.formatMessage({ id: "Apply" })}
+              </Button>
+            </Typography>
+          </div>
+        </div>
+      </form>
+    </FormProvider>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx
@@ -0,0 +1,101 @@
+"use client"
+import { useState } from "react"
+import {
+  Button as AriaButton,
+  Dialog,
+  DialogTrigger,
+  Popover,
+} from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import { trpc } from "@/lib/trpc/client"
+import { useRatesStore } from "@/stores/select-rate"
+
+import { useRoomContext } from "@/contexts/SelectRate/Room"
+import useLang from "@/hooks/useLang"
+
+import Form from "./Form"
+import { getIconNameByPackageCode } from "./utils"
+
+import styles from "./roomPackageFilter.module.css"
+
+import type { PackageEnum } from "@/types/requests/packages"
+
+export default function RoomPackageFilter() {
+  const intl = useIntl()
+  const lang = useLang()
+  const utils = trpc.useUtils()
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  const {
+    actions: { removeSelectedPackage, updateRooms },
+    bookingRoom,
+    selectedPackages,
+  } = useRoomContext()
+  const booking = useRatesStore((state) => state.booking)
+
+  async function deleteSelectedPackage(code: PackageEnum) {
+    removeSelectedPackage(code)
+    const filterRates = await utils.hotel.availability.selectRate.room.fetch({
+      booking: {
+        fromDate: booking.fromDate,
+        hotelId: booking.hotelId,
+        searchType: booking.searchType,
+        toDate: booking.toDate,
+        room: {
+          ...bookingRoom,
+          bookingCode: bookingRoom.rateCode
+            ? bookingRoom.bookingCode
+            : booking.bookingCode,
+          packages: selectedPackages
+            .filter((pkg) => pkg.code !== code)
+            .map((pkg) => pkg.code),
+        },
+      },
+      lang,
+    })
+    updateRooms(filterRates?.roomConfigurations)
+  }
+
+  return (
+    <div className={styles.roomPackageFilter}>
+      {selectedPackages.map((pkg) => (
+        <AriaButton
+          key={pkg.code}
+          className={styles.activeFilterButton}
+          onPress={() => deleteSelectedPackage(pkg.code)}
+        >
+          <MaterialIcon
+            icon={getIconNameByPackageCode(pkg.code)}
+            size={16}
+            color="Icon/Interactive/Default"
+          />
+          <MaterialIcon
+            icon="close"
+            size={16}
+            color="Icon/Interactive/Default"
+          />
+        </AriaButton>
+      ))}
+      <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
+        <ChipButton variant="Outlined">
+          {intl.formatMessage({ id: "Room preferences" })}
+          <MaterialIcon
+            icon="keyboard_arrow_down"
+            size={20}
+            color="CurrentColor"
+          />
+        </ChipButton>
+        <Popover placement="bottom end">
+          <Dialog className={styles.dialog}>
+            <Form close={() => setIsOpen(false)} />
+          </Dialog>
+        </Popover>
+      </DialogTrigger>
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css
@@ -3,33 +3,6 @@
  gap: var(--Space-x1);
 }

-.dialog {
-  display: grid;
-  gap: var(--Space-x1);
-  padding: var(--Space-x2);
-  flex-direction: column;
-  align-items: flex-end;
-  border-radius: var(--Corner-radius-md);
-  background-color: var(--Surface-Primary-Default);
-  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
-  max-width: 340px;
-}
-
-.footer {
-  display: grid;
-  gap: var(--Space-x1);
-  padding: 0 var(--Space-x15);
-}
-
-.additionalInformation {
-  color: var(--Text-Tertiary);
-  padding: var(--Space-x1) var(--Space-x15);
-}
-
-.additionalInformationPrice {
-  color: var(--Text-Default);
-}
-
 .activeFilterButton {
  display: flex;
  justify-content: center;
@@ -42,8 +15,14 @@
  cursor: pointer;
 }

-.buttonContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.dialog {
+  display: grid;
+  gap: var(--Space-x1);
+  padding: var(--Space-x2);
+  flex-direction: column;
+  align-items: flex-end;
+  border-radius: var(--Corner-radius-md);
+  background-color: var(--Surface-Primary-Default);
+  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+  max-width: 340px;
 }
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/utils.ts
@@ -1,10 +1,11 @@
-import type { MaterialSymbolProps } from "react-material-symbols"
+import type { SymbolCodepoints } from "react-material-symbols"

 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import type { PackageEnum } from "@/types/requests/packages"

 export function getIconNameByPackageCode(
-  packageCode: RoomPackageCodeEnum
-): MaterialSymbolProps["icon"] {
+  packageCode: PackageEnum
+): SymbolCodepoints {
  switch (packageCode) {
    case RoomPackageCodeEnum.PET_ROOM:
      return "pets"
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx
@@ -5,15 +5,15 @@ import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useRoomContext } from "@/contexts/SelectRate/Room"

-import BookingCodeFilter from "../BookingCodeFilter"
-import RoomPackageFilter from "../RoomPackageFilter"
+import BookingCodeFilter from "./BookingCodeFilter"
+import RoomPackageFilter from "./RoomPackageFilter"

 import styles from "./roomsHeader.module.css"

 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"

 export default function RoomsHeader() {
-  const { rooms, totalRooms } = useRoomContext()
+  const { isFetchingPackages, rooms, totalRooms } = useRoomContext()
  const intl = useIntl()

  const availableRooms = rooms.filter(
@@ -42,11 +42,15 @@ export default function RoomsHeader() {
  return (
    <div className={styles.container}>
      <Typography variant="Title/Subtitle/md" className={styles.availableRooms}>
-        <p>
-          {availableRooms !== totalRooms
-            ? notAllRoomsAvailableText
-            : allRoomsAvailableText}
-        </p>
+        {isFetchingPackages ? (
+          <p></p>
+        ) : (
+          <p>
+            {availableRooms !== totalRooms
+              ? notAllRoomsAvailableText
+              : allRoomsAvailableText}
+          </p>
+        )}
      </Typography>
      <div className={styles.filters}>
        <RoomPackageFilter />
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx
@@ -37,24 +37,21 @@ export default function Rates({
    selectedFilter,
    selectedPackages,
  } = useRoomContext()
-  const { nights, petRoomPackage } = useRatesStore((state) => ({
-    nights: dt(state.booking.toDate).diff(state.booking.fromDate, "days"),
-    petRoomPackage: state.petRoomPackage,
-  }))
-
+  const nights = useRatesStore((state) =>
+    dt(state.booking.toDate).diff(state.booking.fromDate, "days")
+  )
  function handleSelectRate(product: Product) {
    selectRate({ features, product, roomType, roomTypeCode })
  }

-  const petRoomPackageSelected = selectedPackages.includes(
-    RoomPackageCodeEnum.PET_ROOM
+  const petRoomPackageSelected = selectedPackages.find(
+    (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
  )

  const sharedProps = {
    handleSelectRate,
    nights,
-    petRoomPackage:
-      petRoomPackageSelected && petRoomPackage ? petRoomPackage : undefined,
+    petRoomPackage: petRoomPackageSelected,
    roomTypeCode,
  }
  const showAllRates = selectedFilter === BookingCodeFilterEnum.All
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/totalPricePerNight.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/totalPricePerNight.ts
@@ -1,10 +1,10 @@
-import type { RoomPackage } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import type { Package } from "@/types/requests/packages"

 export function calculatePricePerNightPriceProduct(
  pricePerNight: number,
  requestedPricePerNight: number | undefined,
  nights: number,
-  petRoomPackage?: RoomPackage
+  petRoomPackage?: Package
 ) {
  const totalPrice = petRoomPackage?.localPrice
    ? Math.floor(pricePerNight + petRoomPackage.localPrice.price / nights)
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx
@@ -14,7 +14,7 @@ import styles from "./image.module.css"
 import type { RoomListItemImageProps } from "@/types/components/hotelReservation/selectRate/roomListItem"

 export default function RoomImage({
-  features,
+  roomPackages,
  roomsLeft,
  roomType,
  roomTypeCode,
@@ -44,11 +44,13 @@ export default function RoomImage({
            </Footnote>
          </span>
        ) : null}
-        {features
-          .filter((feature) => selectedPackages.includes(feature.code))
-          .map((feature) => (
-            <span className={styles.chip} key={feature.code}>
-              {IconForFeatureCode({ featureCode: feature.code, size: 16 })}
+        {roomPackages
+          .filter((pkg) =>
+            selectedPackages.find((spkg) => spkg.code === pkg.code)
+          )
+          .map((pkg) => (
+            <span className={styles.chip} key={pkg.code}>
+              {IconForFeatureCode({ featureCode: pkg.code, size: 16 })}
            </span>
          ))}
      </div>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx
@@ -1,5 +1,7 @@
 "use client"

+import { useRoomContext } from "@/contexts/SelectRate/Room"
+
 import Details from "./Details"
 import { listItemVariants } from "./listItemVariants"
 import Rates from "./Rates"
@@ -12,6 +14,7 @@ import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHote
 import type { RoomListItemProps } from "@/types/components/hotelReservation/selectRate/roomListItem"

 export default function RoomListItem({ roomConfiguration }: RoomListItemProps) {
+  const { roomPackages } = useRoomContext()
  const classNames = listItemVariants({
    availability:
      roomConfiguration.status === AvailabilityEnum.NotAvailable
@@ -22,7 +25,7 @@ export default function RoomListItem({ roomConfiguration }: RoomListItemProps) {
  return (
    <li className={classNames}>
      <RoomImage
-        features={roomConfiguration.features}
+        roomPackages={roomPackages}
        roomType={roomConfiguration.roomType}
        roomTypeCode={roomConfiguration.roomTypeCode}
        roomsLeft={roomConfiguration.roomsLeft}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx
@@ -8,12 +8,10 @@ import ScrollToList from "./ScrollToList"
 import styles from "./rooms.module.css"

 export default function RoomsList() {
-  const { rooms, isFetchingRoomFeatures } = useRoomContext()
-
-  if (isFetchingRoomFeatures) {
+  const { isFetchingPackages, rooms } = useRoomContext()
+  if (isFetchingPackages) {
    return <RoomsListSkeleton />
  }
-
  return (
    <>
      <ScrollToList />
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx
@@ -1,11 +1,10 @@
 "use client"

-import { dt } from "@/lib/dt"
+import { trpc } from "@/lib/trpc/client"

 import useLang from "@/hooks/useLang"
 import RatesProvider from "@/providers/RatesProvider"

-import { useHotelPackages, useRoomsAvailability } from "../utils"
 import RateSummary from "./RateSummary"
 import Rooms from "./Rooms"
 import { RoomsContainerSkeleton } from "./RoomsContainerSkeleton"
@@ -13,57 +12,34 @@ import { RoomsContainerSkeleton } from "./RoomsContainerSkeleton"
 import type { RoomsContainerProps } from "@/types/components/hotelReservation/selectRate/roomsContainer"

 export function RoomsContainer({
-  adultArray,
  booking,
-  childArray,
-  fromDate,
-  hotelData,
+  hotelType,
  isUserLoggedIn,
-  toDate,
+  roomCategories,
+  vat,
 }: RoomsContainerProps) {
  const lang = useLang()

-  const fromDateString = dt(fromDate).format("YYYY-MM-DD")
-  const toDateString = dt(toDate).format("YYYY-MM-DD")
+  const roomsAvailability = trpc.hotel.availability.selectRate.rooms.useQuery({
+    booking,
+    lang,
+  })

-  const { data: roomsAvailability, isPending: isLoadingAvailability } =
-    useRoomsAvailability(
-      adultArray,
-      hotelData.hotel.id,
-      fromDateString,
-      toDateString,
-      lang,
-      childArray,
-      booking
-    )
-
-  const { data: packages, isPending: isLoadingPackages } = useHotelPackages(
-    adultArray,
-    childArray,
-    fromDateString,
-    toDateString,
-    hotelData.hotel.id,
-    lang
-  )
-
-  if (isLoadingAvailability || isLoadingPackages) {
+  if (
+    (roomsAvailability.isFetching || !roomsAvailability.data) &&
+    !roomsAvailability.isFetched
+  ) {
    return <RoomsContainerSkeleton />
  }

-  if (packages === null) {
-    // TODO: Log packages error
-    console.error("[RoomsContainer] unable to fetch packages")
-  }
-
  return (
    <RatesProvider
      booking={booking}
-      hotelType={hotelData.hotel.hotelType}
+      hotelType={hotelType}
      isUserLoggedIn={isUserLoggedIn}
-      packages={packages}
-      roomCategories={hotelData.roomCategories}
-      roomsAvailability={roomsAvailability}
-      vat={hotelData.hotel.vat}
+      roomCategories={roomCategories}
+      roomsAvailability={roomsAvailability.data}
+      vat={vat}
    >
      <Rooms />
      <RateSummary isUserLoggedIn={isUserLoggedIn} />
--- a/apps/scandic-web/components/HotelReservation/SelectRate/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/index.tsx
@@ -74,13 +74,11 @@ export default async function SelectRatePage({
      <HotelInfoCard hotel={hotelData.hotel} />

      <RoomsContainer
-        adultArray={adultsInRoom}
        booking={booking}
-        childArray={childrenInRoom}
-        fromDate={arrivalDate}
-        hotelData={hotelData}
+        hotelType={hotelData.hotel.hotelType}
        isUserLoggedIn={isUserLoggedIn}
-        toDate={departureDate}
+        roomCategories={hotelData.roomCategories}
+        vat={hotelData.hotel.vat}
      />

      <Suspense key={`${suspenseKey}-tracking`} fallback={null}>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/utils.ts
@@ -1,63 +0,0 @@
-import { REDEMPTION } from "@/constants/booking"
-import { trpc } from "@/lib/trpc/client"
-
-import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
-import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
-import type { Lang } from "@/constants/languages"
-import type { ChildrenInRoom } from "@/utils/hotelSearchDetails"
-
-export function useRoomsAvailability(
-  adultsCount: number[],
-  hotelId: string,
-  fromDateString: string,
-  toDateString: string,
-  lang: Lang,
-  childArray: ChildrenInRoom,
-  booking: SelectRateSearchParams
-) {
-  const redemption = booking.searchType
-    ? booking.searchType === REDEMPTION
-    : undefined
-
-  const roomFeatureCodesArray = booking.rooms.map(
-    (room) => room.packages ?? null
-  )
-
-  const roomsAvailability =
-    trpc.hotel.availability.roomsCombinedAvailability.useQuery({
-      adultsCount,
-      childArray,
-      hotelId,
-      lang,
-      redemption,
-      roomStayEndDate: toDateString,
-      roomStayStartDate: fromDateString,
-      bookingCode: booking.bookingCode,
-      roomFeatureCodesArray,
-    })
-
-  return roomsAvailability
-}
-
-export function useHotelPackages(
-  adultArray: number[],
-  childArray: ChildrenInRoom,
-  fromDateString: string,
-  toDateString: string,
-  hotelId: string,
-  lang: Lang
-) {
-  return trpc.hotel.packages.get.useQuery({
-    adults: adultArray[0], // Using the first adult count
-    children: childArray?.[0]?.length, // Using the first children count
-    endDate: toDateString,
-    hotelId,
-    packageCodes: [
-      RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
-      RoomPackageCodeEnum.PET_ROOM,
-      RoomPackageCodeEnum.ALLERGY_ROOM,
-    ],
-    startDate: fromDateString,
-    lang: lang,
-  })
-}
--- a/apps/scandic-web/i18n/dictionaries/da.json
+++ b/apps/scandic-web/i18n/dictionaries/da.json
@@ -2,7 +2,6 @@
  "+46 8 517 517 00": "+46 8 517 517 00",
  "/night per adult": "/nat per voksen",
  "1 EuroBonus point = 2 Scandic Friends points": "1 EuroBonus point = 2 Scandic Friends points",
-  "<b>200 SEK/night</b> Important information on pricing and features of pet-friendly rooms.": "<b>200 SEK/nat</b> Vigtig information om priser og funktioner i kæledyrsvenlige værelser.",
  "<b>Included</b> (based on availability)": "<b>Inkluderet</b> (baseret på tilgængelighed)",
  "<b>Total price</b> (incl VAT)": "<b>Samlet pris</b> (inkl. moms)",
  "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>": "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>",
@@ -610,6 +609,7 @@
  "Pet room charge including VAT": "Gebyr for kæledyrsværelse inkl. moms",
  "Pet-friendly": "Kæledyrsvenlig",
  "Pet-friendly rooms have an additional fee of 20 EUR per stay": "Kæledyrsrum har en ekstra gebyr på 20 EUR per ophold",
+  "Pet-friendly rooms include a charge of approx. <b>{price}/stay</b>": "Kæledyrsvenlige værelser inkluderer et gebyr på ca. <b>{price}</b>/ophold",
  "Phone": "Telefon",
  "Phone is required": "Telefonnummer er påkrævet",
  "Phone number": "Telefonnummer",
--- a/apps/scandic-web/i18n/dictionaries/de.json
+++ b/apps/scandic-web/i18n/dictionaries/de.json
@@ -2,7 +2,6 @@
  "+46 8 517 517 00": "+46 8 517 517 00",
  "/night per adult": "/Nacht pro Erwachsenem",
  "1 EuroBonus point = 2 Scandic Friends points": "1 EuroBonus point = 2 Scandic Friends points",
-  "<b>200 SEK/night</b> Important information on pricing and features of pet-friendly rooms.": "<b>200 SEK/Nacht</b> Wichtige Informationen zu Preisen und Eigenschaften von haustierfreundlichen Zimmern.",
  "<b>Included</b> (based on availability)": "<b>Inbegriffen</b> (je nach Verfügbarkeit)",
  "<b>Total price</b> (incl VAT)": "<b>Gesamtpreis</b> (inkl. MwSt.)",
  "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>": "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>",
@@ -609,6 +608,7 @@
  "Pet room charge including VAT": "Haustierzimmergebühr inkl. MwSt.",
  "Pet-friendly": "Haustierfreundlich",
  "Pet-friendly rooms have an additional fee of 20 EUR per stay": "Haustierzimmer haben einen zusätzlichen Preis von 20 EUR pro Aufenthalt",
+  "Pet-friendly rooms include a charge of approx. <b>{price}/stay</b>": "Für haustierfreundliche Zimmer fällt eine Gebühr von ca. <b>{price}</b>/Aufenthalt an.",
  "Phone": "Telefon",
  "Phone is required": "Telefon ist erforderlich",
  "Phone number": "Telefonnummer",
--- a/apps/scandic-web/i18n/dictionaries/en.json
+++ b/apps/scandic-web/i18n/dictionaries/en.json
@@ -2,7 +2,6 @@
  "+46 8 517 517 00": "+46 8 517 517 00",
  "/night per adult": "/night per adult",
  "1 EuroBonus point = 2 Scandic Friends points": "1 EuroBonus point = 2 Scandic Friends points",
-  "<b>200 SEK/night</b> Important information on pricing and features of pet-friendly rooms.": "<b>200 SEK/night</b> Important information on pricing and features of pet-friendly rooms.",
  "<b>Included</b> (based on availability)": "<b>Included</b> (based on availability)",
  "<b>Total price</b> (incl VAT)": "<b>Total price</b> (incl VAT)",
  "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>": "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>",
@@ -610,6 +609,7 @@
  "Pet room charge including VAT": "Pet room charge including VAT",
  "Pet-friendly": "Pet-friendly",
  "Pet-friendly rooms have an additional fee of 20 EUR per stay": "Pet-friendly rooms have an additional fee of 20 EUR per stay",
+  "Pet-friendly rooms include a charge of approx. <b>{price}/stay</b>": "Pet-friendly rooms include a charge of approx. <b>{price}/stay</b>",
  "Phone": "Phone",
  "Phone is required": "Phone is required",
  "Phone number": "Phone number",
--- a/apps/scandic-web/i18n/dictionaries/fi.json
+++ b/apps/scandic-web/i18n/dictionaries/fi.json
@@ -2,7 +2,6 @@
  "+46 8 517 517 00": "+46 8 517 517 00",
  "/night per adult": "/yötä aikuista kohti",
  "1 EuroBonus point = 2 Scandic Friends points": "1 EuroBonus point = 2 Scandic Friends points",
-  "<b>200 SEK/night</b> Important information on pricing and features of pet-friendly rooms.": "<b>200 SEK/yö</b> Tärkeitä tietoja hinnoista ja lemmikkieläinystävällisten huoneiden ominaisuuksista.",
  "<b>Included</b> (based on availability)": "<b>Sisältyy</b> (saatavuuden mukaan)",
  "<b>Total price</b> (incl VAT)": "<b>Kokonaishinta</b> (sis. ALV)",
  "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>": "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>",
@@ -608,6 +607,7 @@
  "Pet room charge including VAT": "Lemmikkihuoneen maksu sis. ALV",
  "Pet-friendly": "Lemmikkiystävällinen",
  "Pet-friendly rooms have an additional fee of 20 EUR per stay": "Lemmikkihuoneen lisäkustannus on 20 EUR per majoitus",
+  "Pet-friendly rooms include a charge of approx. <b>{price}/stay</b>": "Lemmikkiystävälliset huoneet sisältävät n. <b>{price}</b>/yöpyminen",
  "Phone": "Puhelin",
  "Phone is required": "Puhelin vaaditaan",
  "Phone number": "Puhelinnumero",
--- a/apps/scandic-web/i18n/dictionaries/no.json
+++ b/apps/scandic-web/i18n/dictionaries/no.json
@@ -2,7 +2,6 @@
  "+46 8 517 517 00": "+46 8 517 517 00",
  "/night per adult": "/natt per voksen",
  "1 EuroBonus point = 2 Scandic Friends points": "1 EuroBonus point = 2 Scandic Friends points",
-  "<b>200 SEK/night</b> Important information on pricing and features of pet-friendly rooms.": "<b>200 SEK/natt</b> Viktig informasjon om priser og funksjoner for dyrevennlige rom.",
  "<b>Included</b> (based on availability)": "<b>Inkludert</b> (basert på tilgjengelighet)",
  "<b>Total price</b> (incl VAT)": "<b>Totalpris</b> (inkl. mva)",
  "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>": "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>",
@@ -607,6 +606,7 @@
  "Pet room charge including VAT": "Kjæledyrromsgebyr inkl. MVA",
  "Pet-friendly": "Dyrevennlig",
  "Pet-friendly rooms have an additional fee of 20 EUR per stay": "Kjæledyrsrom har en tilleggsavgift på 20 EUR per opphold",
+  "Pet-friendly rooms include a charge of approx. <b>{price}/stay</b>": "Kjæledyrvennlige rom inkluderer en kostnad på ca. <b>{price}</b>/opphold",
  "Phone": "Telefon",
  "Phone is required": "Telefon kreves",
  "Phone number": "Telefonnummer",
--- a/apps/scandic-web/i18n/dictionaries/sv.json
+++ b/apps/scandic-web/i18n/dictionaries/sv.json
@@ -2,7 +2,6 @@
  "+46 8 517 517 00": "+46 8 517 517 00",
  "/night per adult": "/natt per vuxen",
  "1 EuroBonus point = 2 Scandic Friends points": "1 EuroBonus point = 2 Scandic Friends points",
-  "<b>200 SEK/night</b> Important information on pricing and features of pet-friendly rooms.": "<b>200 SEK/natt</b> Viktig information om prissättning och funktioner för husdjursvänliga rum.",
  "<b>Included</b> (based on availability)": "<b>Ingår</b> (baserat på tillgänglighet)",
  "<b>Total price</b> (incl VAT)": "<b>Totalpris</b> (inkl moms)",
  "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>": "<bold>{sasPoints, number} EuroBonus points</bold> to <bold>{scandicPoints, number} Scandic Friends points</bold>",
@@ -607,6 +606,7 @@
  "Pet room charge including VAT": "Avgift för husdjursrum inkl. moms",
  "Pet-friendly": "Husdjursvänlig",
  "Pet-friendly rooms have an additional fee of 20 EUR per stay": "Husdjursrum har en extra avgift på 20 EUR per vistelse",
+  "Pet-friendly rooms include a charge of approx. <b>{price}/stay</b>": "Husdjursvänliga rum har en avgift på ca. <b>{price}/vistelse",
  "Phone": "Telefon",
  "Phone is required": "Telefonnummer är obligatorisk",
  "Phone number": "Telefonnummer",
--- a/apps/scandic-web/lib/trpc/memoizedRequests/index.ts
+++ b/apps/scandic-web/lib/trpc/memoizedRequests/index.ts
@@ -11,15 +11,13 @@ import type {
  BreackfastPackagesInput,
  PackagesInput,
 } from "@/types/requests/packages"
+import type { RoomsAvailabilityExtendedInputSchema } from "@/types/trpc/routers/hotel/availability"
 import type {
  CityCoordinatesInput,
  HotelInput,
 } from "@/types/trpc/routers/hotel/hotel"
 import type { Lang } from "@/constants/languages"
-import type {
-  GetHotelsByCSFilterInput,
-  GetSelectedRoomAvailabilityInput,
-} from "@/server/routers/hotels/input"
+import type { GetHotelsByCSFilterInput } from "@/server/routers/hotels/input"
 import type { GetSavedPaymentCardsInput } from "@/server/routers/user/input"

 export const getLocations = cache(async function getMemoizedLocations() {
@@ -92,14 +90,6 @@ export const getHotelPage = cache(async function getMemoizedHotelPage() {
  return serverClient().contentstack.hotelPage.get()
 })

-export const getSelectedRoomAvailability = cache(
-  function getMemoizedSelectedRoomAvailability(
-    input: GetSelectedRoomAvailabilityInput
-  ) {
-    return serverClient().hotel.availability.room(input)
-  }
-)
-
 export const getFooter = cache(async function getMemoizedFooter() {
  return serverClient().contentstack.base.footer()
 })
@@ -352,3 +342,11 @@ export const getJumpToData = cache(async function getMemoizedJumpToData() {

  return null
 })
+
+export const getSelectedRoomsAvailability = cache(
+  async function getMemoizedSelectedRoomsAvailability(
+    input: RoomsAvailabilityExtendedInputSchema
+  ) {
+    return serverClient().hotel.availability.enterDetails(input)
+  }
+)
--- a/apps/scandic-web/providers/RatesProvider.tsx
+++ b/apps/scandic-web/providers/RatesProvider.tsx
@@ -15,7 +15,6 @@ export default function RatesProvider({
  children,
  hotelType,
  isUserLoggedIn,
-  packages,
  roomCategories,
  roomsAvailability,
  vat,
@@ -35,11 +34,10 @@ export default function RatesProvider({
        allergyRoom: intl.formatMessage({ id: "Allergy-friendly room" }),
        petRoom: intl.formatMessage({ id: "Pet room" }),
      },
-      packages: packages ?? [],
      pathname,
      roomCategories,
      roomsAvailability,
-      searchParams,
+      searchParams: new URLSearchParams(searchParams),
      vat,
    })
  }
--- a/apps/scandic-web/providers/SelectRate/RoomProvider.tsx
+++ b/apps/scandic-web/providers/SelectRate/RoomProvider.tsx
@@ -1,15 +1,10 @@
 "use client"
-import { useEffect } from "react"

-import { REDEMPTION } from "@/constants/booking"
-import { trpc } from "@/lib/trpc/client"
 import { useRatesStore } from "@/stores/select-rate"

 import { RoomContext } from "@/contexts/SelectRate/Room"
-import useLang from "@/hooks/useLang"

-import { BookingCodeFilterEnum } from "@/types/enums/bookingCodeFilter"
-import { RateTypeEnum } from "@/types/enums/rateType"
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { RoomProviderProps } from "@/types/providers/select-rate/room"

 export default function RoomProvider({
@@ -17,128 +12,28 @@ export default function RoomProvider({
  idx,
  room,
 }: RoomProviderProps) {
-  const lang = useLang()
-  const {
-    activeRoom,
-    booking,
-    roomAvailability,
-    searchParams,
-    selectedFilter,
-    selectedPackages,
-  } = useRatesStore((state) => ({
-    activeRoom: state.activeRoom,
-    booking: state.booking,
-    roomAvailability: state.roomsAvailability?.[idx],
-    searchParams: state.searchParams,
-    selectedFilter: state.rooms[idx].selectedFilter,
-    selectedPackages: state.rooms[idx].selectedPackages,
-  }))
-  const { appendRegularRates, addRoomFeatures, ...actions } = room.actions
-  const roomNr = idx + 1
-
-  const redemptionSearch = searchParams.has("searchType")
-    ? searchParams.get("searchType") === REDEMPTION
-    : false
-  const hasRedemptionRates =
-    redemptionSearch || room.rooms.some((room) => room.redemptions.length)
-  const hasCorporateChequeOrVoucherRates = room.rooms.some((room) =>
-    room.code.some((product) => {
-      if ("corporateCheque" in product) {
-        return product.corporateCheque.rateType === RateTypeEnum.CorporateCheque
-      } else if ("voucher" in product) {
-        return product.voucher.rateType === RateTypeEnum.Voucher
-      }
-      return false
+  const { activeRoom, roomAvailability, roomPackages } = useRatesStore(
+    (state) => ({
+      activeRoom: state.activeRoom,
+      roomPackages: state.roomsPackages[idx],
+      roomAvailability: state.roomsAvailability?.[idx],
    })
  )
+  const roomNr = idx + 1

-  const dontShowRegularRates =
-    hasRedemptionRates || hasCorporateChequeOrVoucherRates
-
-  // Since input would be the same on single room as already
-  // done in useRoomsAvailability hook, data is already present
-  // and thus runs the appendRegularRates updater resulting in
-  // duplicate data
-  const enabled = !!(
-    booking.bookingCode &&
-    selectedFilter !== BookingCodeFilterEnum.Discounted &&
-    !dontShowRegularRates
+  const petRoomPackage = roomPackages.find(
+    (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
  )
-  // Extra query needed to fetch regular rates upon user
-  // selecting to view all rates.
-  // TODO: Setup route to handle singular availability call
-  const { data, isFetched, isFetching } =
-    trpc.hotel.availability.roomsCombinedAvailability.useQuery(
-      {
-        adultsCount: [room.bookingRoom.adults],
-        childArray: room.bookingRoom.childrenInRoom
-          ? [room.bookingRoom.childrenInRoom]
-          : undefined,
-        hotelId: booking.hotelId,
-        lang,
-        roomStayEndDate: booking.toDate,
-        roomStayStartDate: booking.fromDate,
-      },
-      {
-        enabled,
-      }
-    )
-
-  useEffect(() => {
-    if (isFetched && !isFetching && data?.length && enabled) {
-      const regularRates = data[0]
-      if ("roomConfigurations" in regularRates) {
-        appendRegularRates(regularRates.roomConfigurations)
-      }
-    }
-  }, [appendRegularRates, data, enabled, isFetched, isFetching])
-
-  const {
-    data: roomFeaturesData,
-    isFetched: isRoomFeaturesFetched,
-    isFetching: isRoomFeaturesFetching,
-  } = trpc.hotel.availability.roomFeatures.useQuery(
-    {
-      adults: room.bookingRoom.adults,
-      childrenInRoom: room.bookingRoom.childrenInRoom,
-      hotelId: booking.hotelId,
-      startDate: booking.fromDate,
-      endDate: booking.toDate,
-      roomFeatureCodes: selectedPackages,
-      roomIndex: idx, // Creates a unique query key for each room
-    },
-    {
-      enabled: !!selectedPackages.length,
-    }
-  )
-
-  useEffect(() => {
-    if (
-      isRoomFeaturesFetched &&
-      !isRoomFeaturesFetching &&
-      roomFeaturesData?.length
-    ) {
-      addRoomFeatures(roomFeaturesData)
-    }
-  }, [
-    addRoomFeatures,
-    roomFeaturesData,
-    isRoomFeaturesFetched,
-    isRoomFeaturesFetching,
-  ])

  return (
    <RoomContext.Provider
      value={{
        ...room,
-        actions,
        isActiveRoom: activeRoom === idx,
-        isFetchingAdditionalRate: isFetched ? false : isFetching,
-        isFetchingRoomFeatures: isRoomFeaturesFetched
-          ? false
-          : isRoomFeaturesFetching,
        isMainRoom: roomNr === 1,
+        petRoomPackage,
        roomAvailability,
+        roomPackages,
        roomNr,
        totalRooms: room.rooms.length,
      }}
--- a/apps/scandic-web/server/routers/booking/query.ts
+++ b/apps/scandic-web/server/routers/booking/query.ts
@@ -8,7 +8,7 @@ import {
  serviceProcedure,
 } from "@/server/trpc"

-import { getHotel } from "../hotels/query"
+import { getHotel } from "../hotels/utils"
 import { encrypt } from "../utils/encryption"
 import {
  bookingConfirmationInput,
--- a/apps/scandic-web/server/routers/contentstack/metadata/query.ts
+++ b/apps/scandic-web/server/routers/contentstack/metadata/query.ts
@@ -16,7 +16,7 @@ import { contentStackUidWithServiceProcedure, router } from "@/server/trpc"

 import { generateTag } from "@/utils/generateTag"

-import { getHotel } from "../../hotels/query"
+import { getHotel } from "../../hotels/utils"
 import { getUrlsOfAllLanguages } from "../languageSwitcher/utils"
 import { getMetadataInput } from "./input"
 import { getNonContentstackUrls, metadataSchema } from "./output"
--- a/apps/scandic-web/server/routers/hotels/input.ts
+++ b/apps/scandic-web/server/routers/hotels/input.ts
@@ -4,6 +4,7 @@ import { Lang } from "@/constants/languages"

 import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 import { Country } from "@/types/enums/country"

 export const hotelsAvailabilityInputSchema = z.object({
@@ -25,55 +26,88 @@ export const getHotelsByHotelIdsAvailabilityInputSchema = z.object({
  bookingCode: z.string().optional().default(""),
 })

-export const roomsCombinedAvailabilityInputSchema = z.object({
-  adultsCount: z.array(z.number()),
+const childrenInRoomSchema = z
+  .array(
+    z.object({
+      age: z.number(),
+      bed: z.nativeEnum(ChildBedMapEnum),
+    })
+  )
+  .optional()
+
+const baseRoomSchema = z.object({
+  adults: z.number().int().min(1),
  bookingCode: z.string().optional(),
-  childArray: z
-    .array(
-      z
-        .array(
-          z.object({
-            age: z.number(),
-            bed: z.nativeEnum(ChildBedMapEnum),
-          })
-        )
-        .nullable()
-    )
-    .nullish(),
-  hotelId: z.string(),
-  lang: z.nativeEnum(Lang),
-  rateCode: z.string().optional(),
-  roomStayEndDate: z.string(),
-  roomStayStartDate: z.string(),
-  redemption: z.boolean().optional().default(false),
-  roomFeatureCodesArray: z
-    .array(z.array(z.nativeEnum(RoomPackageCodeEnum)).nullable())
+  childrenInRoom: childrenInRoomSchema,
+  packages: z
+    .array(z.nativeEnum({ ...BreakfastPackageEnum, ...RoomPackageCodeEnum }))
    .optional(),
 })

-export const selectedRoomAvailabilityInputSchema = z.object({
-  hotelId: z.string(),
-  roomStayStartDate: z.string(),
-  roomStayEndDate: z.string(),
-  adults: z.number(),
-  children: z.string().optional(),
-  bookingCode: z.string().optional(),
+const selectedRoomSchema = z.object({
+  counterRateCode: z.string().optional(),
  rateCode: z.string(),
  roomTypeCode: z.string(),
-  counterRateCode: z.string().optional(),
-  packageCodes: z.array(z.nativeEnum(RoomPackageCodeEnum)).optional(),
-  lang: z.nativeEnum(Lang).optional(),
-  redemption: z.boolean().optional(),
 })

-export type GetSelectedRoomAvailabilityInput = z.input<
-  typeof selectedRoomAvailabilityInputSchema
->
-
-export const ratesInputSchema = z.object({
+const baseBookingSchema = z.object({
+  bookingCode: z.string().optional(),
+  fromDate: z.string(),
  hotelId: z.string(),
+  searchType: z.string().optional(),
+  toDate: z.string(),
 })

+export const selectRateRoomsAvailabilityInputSchema = z.object({
+  booking: baseBookingSchema.extend({
+    rooms: z.array(
+      baseRoomSchema.extend({
+        rateCode: z.string().optional(),
+        roomTypeCode: z.string().optional(),
+      })
+    ),
+  }),
+  lang: z.nativeEnum(Lang),
+})
+
+export const selectRateRoomAvailabilityInputSchema = z.object({
+  booking: baseBookingSchema.extend({
+    room: baseRoomSchema.extend({
+      rateCode: z.string().optional(),
+      roomTypeCode: z.string().optional(),
+    }),
+  }),
+  lang: z.nativeEnum(Lang),
+})
+
+export const enterDetailsRoomsAvailabilityInputSchema = z.object({
+  booking: baseBookingSchema.extend({
+    rooms: z.array(baseRoomSchema.merge(selectedRoomSchema)),
+  }),
+  lang: z.nativeEnum(Lang),
+})
+
+export const myStayRoomAvailabilityInputSchema = z.object({
+  booking: baseBookingSchema.extend({
+    room: baseRoomSchema.merge(selectedRoomSchema),
+  }),
+  lang: z.nativeEnum(Lang),
+})
+
+export const roomFeaturesInputSchema = z.object({
+  adults: z.number(),
+  childrenInRoom: childrenInRoomSchema,
+  endDate: z.string(),
+  hotelId: z.string(),
+  lang: z.nativeEnum(Lang),
+  roomFeatureCodes: z
+    .array(z.nativeEnum({ ...BreakfastPackageEnum, ...RoomPackageCodeEnum }))
+    .optional(),
+  startDate: z.string(),
+})
+
+export type RoomFeaturesInput = z.input<typeof roomFeaturesInputSchema>
+
 export const hotelInputSchema = z.object({
  hotelId: z.string(),
  isCardOnlyPayment: z.boolean(),
@@ -91,7 +125,7 @@ export const getHotelsByCSFilterInput = z.object({
  hotelsToInclude: z.array(z.string()),
 })
 export interface GetHotelsByCSFilterInput
-  extends z.infer<typeof getHotelsByCSFilterInput> {}
+  extends z.infer<typeof getHotelsByCSFilterInput> { }

 export const nearbyHotelIdsInput = z.object({
  hotelId: z.string(),
@@ -127,13 +161,13 @@ export const ancillaryPackageInputSchema = z.object({
 })

 export const roomPackagesInputSchema = z.object({
-  hotelId: z.string(),
-  startDate: z.string(),
-  endDate: z.string(),
  adults: z.number(),
  children: z.number().optional().default(0),
-  packageCodes: z.array(z.string()).optional().default([]),
+  endDate: z.string(),
+  hotelId: z.string(),
  lang: z.nativeEnum(Lang),
+  packageCodes: z.array(z.string()).optional().default([]),
+  startDate: z.string(),
 })
 export const cityCoordinatesInputSchema = z.object({
  city: z.string(),
@@ -167,22 +201,3 @@ export const getLocationsInput = z.object({
 export const getLocationsUrlsInput = z.object({
  lang: z.nativeEnum(Lang),
 })
-
-export const roomFeaturesInputSchema = z.object({
-  hotelId: z.string(),
-  startDate: z.string(),
-  endDate: z.string(),
-  adults: z.number(),
-  childrenInRoom: z
-    .array(
-      z.object({
-        age: z.number(),
-        bed: z.nativeEnum(ChildBedMapEnum),
-      })
-    )
-    .optional(),
-  roomFeatureCodes: z.array(z.nativeEnum(RoomPackageCodeEnum)).optional(),
-  roomIndex: z.number().optional(),
-})
-
-export type RoomFeaturesInput = z.input<typeof roomFeaturesInputSchema>
--- a/apps/scandic-web/server/routers/hotels/metrics.ts
+++ b/apps/scandic-web/server/routers/hotels/metrics.ts
@@ -70,14 +70,10 @@ export const metrics = {
    fail: meter.createCounter("trpc.hotel.packages.get-fail"),
    success: meter.createCounter("trpc.hotel.packages.get-success"),
  },
-  roomsCombinedAvailability: {
-    counter: meter.createCounter("trpc.hotel.roomsCombinedAvailability.rooms"),
-    fail: meter.createCounter(
-      "trpc.hotel.roomsCombinedAvailability.rooms-fail"
-    ),
-    success: meter.createCounter(
-      "trpc.hotel.roomsCombinedAvailability.rooms-success"
-    ),
+  roomsAvailability: {
+    counter: meter.createCounter("trpc.hotel.roomsAvailability.rooms"),
+    fail: meter.createCounter("trpc.hotel.roomsAvailability.rooms-fail"),
+    success: meter.createCounter("trpc.hotel.roomsAvailability.rooms-success"),
  },
  selectedRoomAvailability: {
    counter: meter.createCounter("trpc.hotel.availability.room"),
--- a/apps/scandic-web/server/routers/hotels/output.ts
+++ b/apps/scandic-web/server/routers/hotels/output.ts
@@ -23,10 +23,10 @@ import {
  breakfastPackageSchema,
  packageSchema,
 } from "./schemas/packages"
-import { rateSchema } from "./schemas/rate"
 import { relationshipsSchema } from "./schemas/relationships"
 import { roomConfigurationSchema } from "./schemas/roomAvailability/configuration"
 import { rateDefinitionSchema } from "./schemas/roomAvailability/rateDefinition"
+import { sortRoomConfigs } from "./utils"

 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
@@ -42,7 +42,6 @@ import type {
 import type {
  Product,
  RateDefinition,
-  RoomConfiguration,
 } from "@/types/trpc/routers/hotel/roomAvailability"

 // NOTE: Find schema at: https://aks-test.scandichotels.com/hotel/swagger/v1/index.html
@@ -136,18 +135,6 @@ const cancellationRules = {
  NotCancellable: 0,
 } as const

-// Used to ensure `Available` rooms
-// are shown before all `NotAvailable`
-const statusLookup = {
-  [AvailabilityEnum.Available]: 1,
-  [AvailabilityEnum.NotAvailable]: 2,
-}
-
-function sortRoomConfigs(a: RoomConfiguration, b: RoomConfiguration) {
-  // @ts-expect-error - array indexing
-  return statusLookup[a.status] - statusLookup[b.status]
-}
-
 export const roomsAvailabilitySchema = z
  .object({
    data: z.object({
@@ -158,48 +145,10 @@ export const roomsAvailabilitySchema = z
        hotelId: z.number(),
        mustBeGuaranteed: z.boolean().optional(),
        occupancy: occupancySchema.optional(),
+        packages: z.array(packageSchema).optional().default([]),
        rateDefinitions: z.array(rateDefinitionSchema),
-        roomConfigurations: z
-          .array(roomConfigurationSchema)
-          .transform((data) => {
-            // Initial sort to guarantee if one bed is NotAvailable and whereas
-            // the other is Available to make sure data is added to the correct
-            // roomConfig
-            const configs = data.sort(sortRoomConfigs)
-            const roomConfigs = new Map<string, RoomConfiguration>()
-            for (const roomConfig of configs) {
-              if (roomConfigs.has(roomConfig.roomType)) {
-                const currentRoomConf = roomConfigs.get(roomConfig.roomType)
-                if (currentRoomConf) {
-                  currentRoomConf.features = roomConfig.features.reduce(
-                    (feats, feature) => {
-                      const currentFeatureIndex = feats.findIndex(
-                        (f) => f.code === feature.code
-                      )
-                      if (currentFeatureIndex !== -1) {
-                        feats[currentFeatureIndex].inventory =
-                          feats[currentFeatureIndex].inventory +
-                          feature.inventory
-                      } else {
-                        feats.push(feature)
-                      }
-                      return feats
-                    },
-                    currentRoomConf.features
-                  )
-                  currentRoomConf.roomsLeft =
-                    currentRoomConf.roomsLeft + roomConfig.roomsLeft
-                  roomConfigs.set(currentRoomConf.roomType, currentRoomConf)
-                }
-              } else {
-                roomConfigs.set(roomConfig.roomType, roomConfig)
-              }
-            }
-            return Array.from(roomConfigs.values())
-          }),
+        roomConfigurations: z.array(roomConfigurationSchema),
      }),
-      relationships: relationshipsSchema.optional(),
-      type: z.string().optional(),
    }),
  })
  .transform(({ data: { attributes } }) => {
@@ -425,8 +374,6 @@ export const roomsAvailabilitySchema = z
    }
  })

-export const ratesSchema = z.array(rateSchema)
-
 export const citiesByCountrySchema = z.object({
  data: z.array(
    citySchema.transform((data) => {
@@ -597,17 +544,6 @@ export const packagesSchema = z
          hotelId: z.number(),
          packages: z.array(packageSchema).default([]),
        }),
-        relationships: z
-          .object({
-            links: z.array(
-              z.object({
-                type: z.string(),
-                url: z.string(),
-              })
-            ),
-          })
-          .optional(),
-        type: z.string(),
      })
      .optional(),
  })
--- a/apps/scandic-web/server/routers/hotels/query.ts
+++ b/apps/scandic-web/server/routers/hotels/query.ts
--- a/apps/scandic-web/server/routers/hotels/schemas/rate.ts
+++ b/apps/scandic-web/server/routers/hotels/schemas/rate.ts
@@ -1,21 +0,0 @@
-import { z } from "zod"
-
-const flexibilityPrice = z.object({
-  member: z.number(),
-  standard: z.number(),
-})
-
-export const rateSchema = z.object({
-  breakfastIncluded: z.boolean(),
-  description: z.string(),
-  id: z.number(),
-  imageSrc: z.string(),
-  name: z.string(),
-  prices: z.object({
-    currency: z.string(),
-    freeCancellation: flexibilityPrice,
-    freeRebooking: flexibilityPrice,
-    nonRefundable: flexibilityPrice,
-  }),
-  size: z.string(),
-})
--- a/apps/scandic-web/server/routers/hotels/tempRatesData.json
+++ b/apps/scandic-web/server/routers/hotels/tempRatesData.json
@@ -1,104 +0,0 @@
-[
-  {
-    "id": 1,
-    "name": "Cabin",
-    "description": "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
-    "size": "17 - 24 m² (1 - 2 persons)",
-    "imageSrc": "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
-    "breakfastIncluded": false,
-    "prices": {
-      "currency": "SEK",
-      "nonRefundable": {
-        "standard": 2315,
-        "member": 2247
-      },
-      "freeRebooking": { "standard": 2437, "member": 2365 },
-      "freeCancellation": { "standard": 2620, "member": 2542 }
-    }
-  },
-  {
-    "id": 2,
-    "name": "Standard",
-    "description": "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
-    "size": "19 - 30 m² (1 - 2 persons)",
-    "imageSrc": "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
-    "breakfastIncluded": false,
-    "prices": {
-      "currency": "SEK",
-      "nonRefundable": {
-        "standard": 2315,
-        "member": 2247
-      },
-      "freeRebooking": { "standard": 2437, "member": 2365 },
-      "freeCancellation": { "standard": 2620, "member": 2542 }
-    }
-  },
-  {
-    "id": 3,
-    "name": "Superior",
-    "description": "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
-    "size": "22 - 40 m² (1 - 3 persons)",
-    "imageSrc": "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
-    "breakfastIncluded": false,
-    "prices": {
-      "currency": "SEK",
-      "nonRefundable": {
-        "standard": 2315,
-        "member": 2247
-      },
-      "freeRebooking": { "standard": 2437, "member": 2365 },
-      "freeCancellation": { "standard": 2620, "member": 2542 }
-    }
-  },
-  {
-    "id": 4,
-    "name": "Superior Family",
-    "description": "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
-    "size": "29 - 49 m² (3 - 4 persons)",
-    "imageSrc": "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
-    "breakfastIncluded": false,
-    "prices": {
-      "currency": "SEK",
-      "nonRefundable": {
-        "standard": 2315,
-        "member": 2247
-      },
-      "freeRebooking": { "standard": 2437, "member": 2365 },
-      "freeCancellation": { "standard": 2620, "member": 2542 }
-    }
-  },
-  {
-    "id": 5,
-    "name": "Superior PLUS",
-    "description": "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
-    "size": "21 - 28 m² (2 - 3 persons)",
-    "imageSrc": "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
-    "breakfastIncluded": false,
-    "prices": {
-      "currency": "SEK",
-      "nonRefundable": {
-        "standard": 2315,
-        "member": 2247
-      },
-      "freeRebooking": { "standard": 2437, "member": 2365 },
-      "freeCancellation": { "standard": 2620, "member": 2542 }
-    }
-  },
-  {
-    "id": 6,
-    "name": "Junior Suite",
-    "description": "Stylish, peaceful and air-conditioned room. The rooms have small clerestory windows.",
-    "size": "35 - 43 m² (2 - 4 persons)",
-    "imageSrc": "https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg",
-    "breakfastIncluded": false,
-    "prices": {
-      "currency": "SEK",
-      "nonRefundable": {
-        "standard": 2315,
-        "member": 2247
-      },
-      "freeRebooking": { "standard": 2437, "member": 2365 },
-      "freeCancellation": { "standard": 2620, "member": 2542 }
-    }
-  }
-]
--- a/apps/scandic-web/server/routers/hotels/utils.ts
+++ b/apps/scandic-web/server/routers/hotels/utils.ts
@@ -1,14 +1,19 @@
 import deepmerge from "deepmerge"
+import stringify from "json-stable-stringify-without-jsonify"

+import { REDEMPTION } from "@/constants/booking"
 import { Lang } from "@/constants/languages"
 import { env } from "@/env/server"
 import * as api from "@/lib/api"
 import { badRequestError } from "@/server/errors/trpc"
 import { toApiLang } from "@/server/utils"

+import { generateChildrenString } from "@/components/HotelReservation/utils"
 import { getCacheClient } from "@/services/dataCache"
+import { cache } from "@/utils/cache"

 import { getHotelPageUrls } from "../contentstack/hotelPage/utils"
+import { type RoomFeaturesInput, roomPackagesInputSchema } from "./input"
 import { metrics } from "./metrics"
 import {
  type Cities,
@@ -16,15 +21,31 @@ import {
  citiesSchema,
  countriesSchema,
  getHotelIdsSchema,
+  hotelsAvailabilitySchema,
+  hotelSchema,
  locationsSchema,
+  packagesSchema,
+  roomFeaturesSchema,
  roomsAvailabilitySchema,
 } from "./output"
-import { getHotel } from "./query"
-
-import type { z } from "zod"

+import type { BedTypeSelection } from "@/types/components/hotelReservation/enterDetails/bedType"
+import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import { HotelTypeEnum } from "@/types/enums/hotelType"
 import { PointOfInterestGroupEnum } from "@/types/enums/pointOfInterest"
-import type { DestinationPagesHotelData } from "@/types/hotel"
+import type {
+  DestinationPagesHotelData,
+  Room as RoomCategory,
+} from "@/types/hotel"
+import type { PackagesInput } from "@/types/requests/packages"
+import type {
+  HotelsAvailabilityInputSchema,
+  HotelsByHotelIdsAvailabilityInputSchema,
+  RoomsAvailabilityInputRoom,
+  RoomsAvailabilityInputSchema,
+} from "@/types/trpc/routers/hotel/availability"
+import type { HotelInput } from "@/types/trpc/routers/hotel/hotel"
 import type {
  CitiesGroupedByCountry,
  CityLocation,
@@ -34,9 +55,9 @@ import type {
  Products,
  RateDefinition,
  RedemptionsProduct,
+  RoomConfiguration,
 } from "@/types/trpc/routers/hotel/roomAvailability"
 import type { Endpoint } from "@/lib/api/endpoints"
-import type { selectedRoomAvailabilityInputSchema } from "./input"

 export function getPoiGroupByCategoryName(category: string | undefined) {
  if (!category) return PointOfInterestGroupEnum.LOCATION
@@ -608,51 +629,184 @@ function findProduct(product: Products, rateDefinition: RateDefinition) {
  }
 }

-export async function getSelectedRoomAvailability(
-  input: z.input<typeof selectedRoomAvailabilityInputSchema>,
-  lang: string,
-  serviceToken: string,
-  userPoints?: number
+export const getHotel = cache(
+  async (input: HotelInput, serviceToken: string) => {
+    const callable = async function (
+      hotelId: HotelInput["hotelId"],
+      language: HotelInput["language"],
+      isCardOnlyPayment?: HotelInput["isCardOnlyPayment"]
+    ) {
+      /**
+       * Since API expects the params appended and not just
+       * a comma separated string we need to initialize the
+       * SearchParams with a sequence of pairs
+       * (include=City&include=NearbyHotels&include=Restaurants etc.)
+       **/
+      const params = new URLSearchParams([
+        ["include", "AdditionalData"],
+        ["include", "City"],
+        ["include", "NearbyHotels"],
+        ["include", "Restaurants"],
+        ["include", "RoomCategories"],
+        ["language", toApiLang(language)],
+      ])
+      metrics.hotel.counter.add(1, {
+        hotelId,
+        language,
+      })
+      console.info(
+        "api.hotels.hotelData start",
+        JSON.stringify({ query: { hotelId, params: params.toString() } })
+      )
+
+      const apiResponse = await api.get(
+        api.endpoints.v1.Hotel.Hotels.hotel(hotelId),
+        {
+          headers: {
+            Authorization: `Bearer ${serviceToken}`,
+          },
+        },
+        params
+      )
+
+      if (!apiResponse.ok) {
+        const text = await apiResponse.text()
+        metrics.hotel.fail.add(1, {
+          hotelId,
+          language,
+          error_type: "http_error",
+          error: JSON.stringify({
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            text,
+          }),
+        })
+        console.error(
+          "api.hotels.hotelData error",
+          JSON.stringify({
+            query: { hotelId, params: params.toString() },
+            error: {
+              status: apiResponse.status,
+              statusText: apiResponse.statusText,
+              text,
+            },
+          })
+        )
+        return null
+      }
+
+      const apiJson = await apiResponse.json()
+      const validateHotelData = hotelSchema.safeParse(apiJson)
+
+      if (!validateHotelData.success) {
+        metrics.hotel.fail.add(1, {
+          hotelId,
+          language,
+          error_type: "validation_error",
+          error: JSON.stringify(validateHotelData.error),
+        })
+
+        console.error(
+          "api.hotels.hotelData validation error",
+          JSON.stringify({
+            query: { hotelId, params: params.toString() },
+            error: validateHotelData.error,
+          })
+        )
+        throw badRequestError()
+      }
+
+      metrics.hotel.success.add(1, {
+        hotelId,
+        language,
+      })
+      console.info(
+        "api.hotels.hotelData success",
+        JSON.stringify({
+          query: { hotelId, params: params.toString() },
+        })
+      )
+      const hotelData = validateHotelData.data
+
+      if (isCardOnlyPayment) {
+        hotelData.hotel.merchantInformationData.alternatePaymentOptions = []
+      }
+
+      const gallery = hotelData.additionalData?.gallery
+      if (gallery) {
+        const smallerImages = gallery.smallerImages
+        const hotelGalleryImages =
+          hotelData.hotel.hotelType === HotelTypeEnum.Signature
+            ? smallerImages.slice(0, 10)
+            : smallerImages.slice(0, 6)
+        hotelData.hotel.galleryImages = hotelGalleryImages
+      }
+
+      return hotelData
+    }
+
+    const cacheClient = await getCacheClient()
+    return await cacheClient.cacheOrGet(
+      `${input.language}:hotel:${input.hotelId}:${!!input.isCardOnlyPayment}`,
+      async () => {
+        return callable(input.hotelId, input.language, input.isCardOnlyPayment)
+      },
+      env.CACHE_TIME_HOTELS
+    )
+  }
+)
+
+export async function getHotelsAvailabilityByCity(
+  input: HotelsAvailabilityInputSchema,
+  apiLang: string,
+  token: string, // Either service token or user access token in case of redemption search
+  userPoints: number = 0
 ) {
  const {
-    adults,
-    bookingCode,
-    children,
-    hotelId,
-    roomStayEndDate,
+    cityId,
    roomStayStartDate,
+    roomStayEndDate,
+    adults,
+    children,
+    bookingCode,
    redemption,
  } = input

-  const params: Record<string, string | number | undefined> = {
+  const params: Record<string, string | number> = {
    roomStayStartDate,
    roomStayEndDate,
    adults,
    ...(children && { children }),
    ...(bookingCode && { bookingCode }),
-    ...(redemption && { isRedemption: "true" }),
-    language: lang,
+    ...(redemption ? { isRedemption: "true" } : {}),
+    language: apiLang,
  }
-
-  metrics.selectedRoomAvailability.counter.add(1, input)
+  metrics.hotelsAvailability.counter.add(1, {
+    cityId,
+    roomStayStartDate,
+    roomStayEndDate,
+    adults,
+    children,
+    bookingCode,
+    redemption,
+  })
  console.info(
-    "api.hotels.selectedRoomAvailability start",
-    JSON.stringify({ query: { hotelId: input.hotelId, params } })
+    "api.hotels.hotelsAvailability start",
+    JSON.stringify({ query: { cityId, params } })
  )
-  const apiResponseAvailability = await api.get(
-    api.endpoints.v1.Availability.hotel(hotelId.toString()),
+  const apiResponse = await api.get(
+    api.endpoints.v1.Availability.city(cityId),
    {
      headers: {
-        Authorization: `Bearer ${serviceToken}`,
+        Authorization: `Bearer ${token}`,
      },
    },
    params
  )
-
-  if (!apiResponseAvailability.ok) {
-    const text = await apiResponseAvailability.text()
-    metrics.selectedRoomAvailability.fail.add(1, {
-      hotelId,
+  if (!apiResponse.ok) {
+    const text = await apiResponse.text()
+    metrics.hotelsAvailability.fail.add(1, {
+      cityId,
      roomStayStartDate,
      roomStayEndDate,
      adults,
@@ -660,61 +814,611 @@ export async function getSelectedRoomAvailability(
      bookingCode,
      error_type: "http_error",
      error: JSON.stringify({
-        status: apiResponseAvailability.status,
-        statusText: apiResponseAvailability.statusText,
+        status: apiResponse.status,
+        statusText: apiResponse.statusText,
        text,
      }),
    })
    console.error(
-      "api.hotels.selectedRoomAvailability error",
+      "api.hotels.hotelsAvailability error",
      JSON.stringify({
-        query: { hotelId, params },
+        query: { cityId, params },
        error: {
-          status: apiResponseAvailability.status,
-          statusText: apiResponseAvailability.statusText,
+          status: apiResponse.status,
+          statusText: apiResponse.statusText,
          text,
        },
      })
    )

-    throw new Error("Failed to fetch selected room availability")
+    throw new Error("Failed to fetch hotels availability by city")
  }
-  const apiJsonAvailability = await apiResponseAvailability.json()
-  const validateAvailabilityData =
-    roomsAvailabilitySchema.safeParse(apiJsonAvailability)
+
+  const apiJson = await apiResponse.json()
+  const validateAvailabilityData = hotelsAvailabilitySchema.safeParse(apiJson)
  if (!validateAvailabilityData.success) {
-    metrics.selectedRoomAvailability.fail.add(1, {
-      hotelId,
+    metrics.hotelsAvailability.fail.add(1, {
+      cityId,
      roomStayStartDate,
      roomStayEndDate,
      adults,
      children,
      bookingCode,
+      redemption,
      error_type: "validation_error",
      error: JSON.stringify(validateAvailabilityData.error),
    })
    console.error(
-      "api.hotels.selectedRoomAvailability validation error",
+      "api.hotels.hotelsAvailability validation error",
      JSON.stringify({
-        query: { hotelId, params },
+        query: { cityId, params },
        error: validateAvailabilityData.error,
      })
    )
    throw badRequestError()
  }
-
-  const { rateDefinitions, roomConfigurations } = validateAvailabilityData.data
-
-  const rateDefinition = rateDefinitions.find(
-    (rd) => rd.rateCode === input.rateCode
+  metrics.hotelsAvailability.success.add(1, {
+    cityId,
+    roomStayStartDate,
+    roomStayEndDate,
+    adults,
+    children,
+    bookingCode,
+    redemption,
+  })
+  console.info(
+    "api.hotels.hotelsAvailability success",
+    JSON.stringify({
+      query: { cityId, params: params },
+    })
  )
+  if (redemption) {
+    validateAvailabilityData.data.data.forEach((data) => {
+      data.attributes.productType?.redemptions?.forEach((r) => {
+        r.hasEnoughPoints = userPoints >= r.localPrice.pointsPerStay
+      })
+    })
+  }
+
+  return {
+    availability: validateAvailabilityData.data.data.flatMap(
+      (hotels) => hotels.attributes
+    ),
+  }
+}
+
+export async function getHotelsAvailabilityByHotelIds(
+  input: HotelsByHotelIdsAvailabilityInputSchema,
+  apiLang: string,
+  serviceToken: string
+) {
+  const {
+    hotelIds,
+    roomStayStartDate,
+    roomStayEndDate,
+    adults,
+    children,
+    bookingCode,
+  } = input
+
+  const params = new URLSearchParams([
+    ["roomStayStartDate", roomStayStartDate],
+    ["roomStayEndDate", roomStayEndDate],
+    ["adults", adults.toString()],
+    ["children", children ?? ""],
+    ["bookingCode", bookingCode],
+    ["language", apiLang],
+  ])
+
+  const cacheClient = await getCacheClient()
+  return cacheClient.cacheOrGet(
+    `${apiLang}:hotels:availability:${hotelIds.join(",")}:${roomStayStartDate}:${roomStayEndDate}:${adults}:${children}:${bookingCode}`,
+    async () => {
+      /**
+       * Since API expects the params appended and not just
+       * a comma separated string we need to initialize the
+       * SearchParams with a sequence of pairs
+       * (hotelIds=810&hotelIds=879&hotelIds=222 etc.)
+       **/
+
+      hotelIds.forEach((hotelId) =>
+        params.append("hotelIds", hotelId.toString())
+      )
+      metrics.hotelsByHotelIdAvailability.counter.add(1, {
+        hotelIds,
+        roomStayStartDate,
+        roomStayEndDate,
+        adults,
+        children,
+        bookingCode,
+      })
+      console.info(
+        "api.hotels.hotelsByHotelIdAvailability start",
+        JSON.stringify({ query: { params } })
+      )
+      const apiResponse = await api.get(
+        api.endpoints.v1.Availability.hotels(),
+        {
+          headers: {
+            Authorization: `Bearer ${serviceToken}`,
+          },
+        },
+        params
+      )
+      if (!apiResponse.ok) {
+        const text = await apiResponse.text()
+        metrics.hotelsByHotelIdAvailability.fail.add(1, {
+          hotelIds,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          bookingCode,
+          error_type: "http_error",
+          error: JSON.stringify({
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+            text,
+          }),
+        })
+        console.error(
+          "api.hotels.hotelsByHotelIdAvailability error",
+          JSON.stringify({
+            query: { params },
+            error: {
+              status: apiResponse.status,
+              statusText: apiResponse.statusText,
+              text,
+            },
+          })
+        )
+
+        throw new Error("Failed to fetch hotels availability by hotelIds")
+      }
+      const apiJson = await apiResponse.json()
+      const validateAvailabilityData =
+        hotelsAvailabilitySchema.safeParse(apiJson)
+      if (!validateAvailabilityData.success) {
+        metrics.hotelsByHotelIdAvailability.fail.add(1, {
+          hotelIds,
+          roomStayStartDate,
+          roomStayEndDate,
+          adults,
+          children,
+          bookingCode,
+          error_type: "validation_error",
+          error: JSON.stringify(validateAvailabilityData.error),
+        })
+        console.error(
+          "api.hotels.hotelsByHotelIdAvailability validation error",
+          JSON.stringify({
+            query: { params },
+            error: validateAvailabilityData.error,
+          })
+        )
+        throw badRequestError()
+      }
+      metrics.hotelsByHotelIdAvailability.success.add(1, {
+        hotelIds,
+        roomStayStartDate,
+        roomStayEndDate,
+        adults,
+        children,
+        bookingCode,
+      })
+      console.info(
+        "api.hotels.hotelsByHotelIdAvailability success",
+        JSON.stringify({
+          query: { params },
+        })
+      )
+      return {
+        availability: validateAvailabilityData.data.data.flatMap(
+          (hotels) => hotels.attributes
+        ),
+      }
+    },
+    env.CACHE_TIME_CITY_SEARCH
+  )
+}
+
+async function getRoomFeaturesInventory(
+  input: RoomFeaturesInput,
+  token: string
+) {
+  const {
+    adults,
+    childrenInRoom,
+    endDate,
+    hotelId,
+    roomFeatureCodes,
+    startDate,
+  } = input
+  const cacheClient = await getCacheClient()
+  return cacheClient.cacheOrGet(
+    stringify(input),
+    async function () {
+      const params = {
+        adults,
+        hotelId,
+        roomFeatureCode: roomFeatureCodes,
+        roomStayEndDate: endDate,
+        roomStayStartDate: startDate,
+        ...(childrenInRoom?.length && {
+          children: generateChildrenString(childrenInRoom),
+        }),
+      }
+
+      metrics.roomFeatures.counter.add(1, params)
+
+      const apiResponse = await api.get(
+        api.endpoints.v1.Availability.roomFeatures(hotelId),
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
+        params
+      )
+
+      if (!apiResponse.ok) {
+        const text = apiResponse.text()
+        console.error(
+          "api.availability.roomfeature error",
+          JSON.stringify({
+            query: { hotelId, params },
+            error: {
+              status: apiResponse.status,
+              statusText: apiResponse.statusText,
+              text,
+            },
+          })
+        )
+        metrics.roomFeatures.fail.add(1, params)
+        return null
+      }
+
+      const data = await apiResponse.json()
+      const validatedRoomFeaturesData = roomFeaturesSchema.safeParse(data)
+      if (!validatedRoomFeaturesData.success) {
+        console.error(
+          "api.availability.roomfeature error",
+          JSON.stringify({
+            query: { hotelId, params },
+            error: validatedRoomFeaturesData.error,
+          })
+        )
+        return null
+      }
+
+      metrics.roomFeatures.success.add(1, params)
+
+      return validatedRoomFeaturesData.data
+    },
+    "5m"
+  )
+}
+
+export async function getPackages(
+  rawInput: PackagesInput,
+  serviceToken: string
+) {
+  const parsedInput = roomPackagesInputSchema.safeParse(rawInput)
+  if (!parsedInput.success) {
+    console.info(`Failed to parse input for Get Packages`)
+    console.error(parsedInput.error)
+    return null
+  }
+  const input = parsedInput.data
+  const cacheClient = await getCacheClient()
+  return cacheClient.cacheOrGet(
+    stringify(input),
+    async function () {
+      const {
+        adults,
+        children,
+        endDate,
+        hotelId,
+        lang,
+        packageCodes,
+        startDate,
+      } = input
+      const apiLang = toApiLang(lang)
+
+      const searchParams = new URLSearchParams({
+        adults: adults.toString(),
+        children: children.toString(),
+        endDate,
+        language: apiLang,
+        startDate,
+      })
+
+      packageCodes.forEach((code) => {
+        searchParams.append("packageCodes", code)
+      })
+
+      const params = searchParams.toString()
+
+      metrics.packages.counter.add(1, {
+        hotelId,
+      })
+      console.info(
+        "api.hotels.packages start",
+        JSON.stringify({ query: { hotelId, params } })
+      )
+
+      const apiResponse = await api.get(
+        api.endpoints.v1.Package.Packages.hotel(hotelId),
+        {
+          headers: {
+            Authorization: `Bearer ${serviceToken}`,
+          },
+        },
+        searchParams
+      )
+
+      if (!apiResponse.ok) {
+        metrics.packages.fail.add(1, {
+          hotelId,
+          error_type: "http_error",
+          error: JSON.stringify({
+            status: apiResponse.status,
+            statusText: apiResponse.statusText,
+          }),
+        })
+        console.error(
+          "api.hotels.packages error",
+          JSON.stringify({ query: { hotelId, params } })
+        )
+        return null
+      }
+
+      const apiJson = await apiResponse.json()
+      const validatedPackagesData = packagesSchema.safeParse(apiJson)
+      if (!validatedPackagesData.success) {
+        metrics.packages.fail.add(1, {
+          hotelId,
+          error_type: "validation_error",
+          error: JSON.stringify(validatedPackagesData.error),
+        })
+
+        console.error(
+          "api.hotels.packages validation error",
+          JSON.stringify({
+            query: { hotelId, params },
+            error: validatedPackagesData.error,
+          })
+        )
+        return null
+      }
+
+      metrics.packages.success.add(1, {
+        hotelId,
+      })
+      console.info(
+        "api.hotels.packages success",
+        JSON.stringify({ query: { hotelId, params: params } })
+      )
+
+      return validatedPackagesData.data
+    },
+    "3h"
+  )
+}
+
+export async function getRoomsAvailability(
+  input: RoomsAvailabilityInputSchema,
+  token: string,
+  serviceToken: string,
+  userPoints: number | undefined
+) {
+  const {
+    booking: { bookingCode, fromDate, hotelId, rooms, searchType, toDate },
+    lang,
+  } = input
+
+  const redemption = searchType === REDEMPTION
+
+  const apiLang = toApiLang(lang)
+
+  const kids = rooms
+    .map((r) => r.childrenInRoom)
+    .filter(Boolean)
+    .map((kid) => JSON.stringify(kid))
+  const metricsData = {
+    adultsCount: rooms.map((r) => r.adults),
+    bookingCode,
+    childArray: kids.length ? kids : undefined,
+    hotelId,
+    roomStayEndDate: toDate,
+    roomStayStartDate: fromDate,
+  }
+
+  metrics.roomsAvailability.counter.add(1, metricsData)
+
+  console.info(
+    "api.hotels.roomsAvailability start",
+    JSON.stringify({ query: { hotelId, params: metricsData } })
+  )
+
+  const baseCacheKey = {
+    bookingCode,
+    fromDate,
+    hotelId,
+    lang,
+    searchType,
+    toDate,
+  }
+
+  const cacheClient = await getCacheClient()
+  const availabilityResponses = await Promise.allSettled(
+    rooms.map(async (room: RoomsAvailabilityInputRoom) => {
+      const cacheKey = {
+        ...baseCacheKey,
+        room,
+      }
+      return await cacheClient.cacheOrGet(
+        stringify(cacheKey),
+        async function () {
+          {
+            const params = {
+              adults: room.adults,
+              language: apiLang,
+              roomStayStartDate: fromDate,
+              roomStayEndDate: toDate,
+              ...(room.childrenInRoom?.length && {
+                children: generateChildrenString(room.childrenInRoom),
+              }),
+              ...(room.bookingCode && { bookingCode: room.bookingCode }),
+              ...(redemption && { isRedemption: "true" }),
+            }
+
+            const apiResponse = await api.get(
+              api.endpoints.v1.Availability.hotel(hotelId),
+              {
+                headers: {
+                  Authorization: `Bearer ${token}`,
+                },
+                next: {
+                  revalidate: 60,
+                },
+              },
+              params
+            )
+
+            if (!apiResponse.ok) {
+              const text = await apiResponse.text()
+              metrics.roomsAvailability.fail.add(1, metricsData)
+              console.error("Failed API call", { params, text })
+              return { error: "http_error", details: text }
+            }
+
+            const apiJson = await apiResponse.json()
+            const validateAvailabilityData =
+              roomsAvailabilitySchema.safeParse(apiJson)
+            if (!validateAvailabilityData.success) {
+              console.error("Validation error", {
+                params,
+                error: validateAvailabilityData.error,
+              })
+              metrics.roomsAvailability.fail.add(1, metricsData)
+              return {
+                error: "validation_error",
+                details: validateAvailabilityData.error,
+              }
+            }
+
+            if (redemption) {
+              for (const roomConfig of validateAvailabilityData.data
+                .roomConfigurations) {
+                for (const product of roomConfig.redemptions) {
+                  if (userPoints) {
+                    product.redemption.hasEnoughPoints =
+                      userPoints >= product.redemption.localPrice.pointsPerStay
+                  }
+                }
+              }
+            }
+
+            const roomFeatures = await getPackages(
+              {
+                adults: room.adults,
+                children: room.childrenInRoom?.length,
+                endDate: input.booking.toDate,
+                hotelId: input.booking.hotelId,
+                lang,
+                packageCodes: [
+                  RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
+                  RoomPackageCodeEnum.ALLERGY_ROOM,
+                  RoomPackageCodeEnum.PET_ROOM,
+                ],
+                startDate: input.booking.fromDate,
+              },
+              serviceToken
+            )
+
+            if (roomFeatures) {
+              validateAvailabilityData.data.packages = roomFeatures
+            }
+
+            // Fetch packages
+            if (room.packages?.length) {
+              const roomFeaturesInventory = await getRoomFeaturesInventory(
+                {
+                  adults: room.adults,
+                  childrenInRoom: room.childrenInRoom,
+                  endDate: input.booking.toDate,
+                  hotelId: input.booking.hotelId,
+                  lang,
+                  roomFeatureCodes: room.packages,
+                  startDate: input.booking.fromDate,
+                },
+                serviceToken
+              )
+
+              if (roomFeaturesInventory) {
+                const features = roomFeaturesInventory.reduce<
+                  Record<string, number>
+                >((fts, feat) => {
+                  fts[feat.roomTypeCode] = feat.features?.[0]?.inventory ?? 0
+                  return fts
+                }, {})
+
+                const updatedRoomConfigurations =
+                  validateAvailabilityData.data.roomConfigurations
+                    // This filter is needed since we can get availability
+                    // back from roomFeatures yet the availability call
+                    // says there are no rooms left...
+                    .filter((rc) => rc.roomsLeft)
+                    .filter((rc) => features?.[rc.roomTypeCode])
+                    .map((rc) => ({
+                      ...rc,
+                      roomsLeft: features[rc.roomTypeCode],
+                      status: AvailabilityEnum.Available,
+                    }))
+
+                validateAvailabilityData.data.roomConfigurations =
+                  updatedRoomConfigurations
+              }
+            }
+
+            return validateAvailabilityData.data
+          }
+        },
+        "1m"
+      )
+    })
+  )
+  metrics.roomsAvailability.success.add(1, metricsData)
+
+  const data = availabilityResponses.map((availability) => {
+    if (availability.status === "fulfilled") {
+      return availability.value
+    }
+    return {
+      details: availability.reason,
+      error: "request_failure",
+    }
+  })
+
+  return data
+}
+
+export function getSelectedRoomAvailability(
+  rateCode: string,
+  rateDefinitions: RateDefinition[],
+  roomConfigurations: RoomConfiguration[],
+  roomTypeCode: string,
+  userPoints: number | undefined
+) {
+  const rateDefinition = rateDefinitions.find((rd) => rd.rateCode === rateCode)
  if (!rateDefinition) {
    return null
  }

  const selectedRoom = roomConfigurations.find(
    (room) =>
-      room.roomTypeCode === input.roomTypeCode &&
+      room.roomTypeCode === roomTypeCode &&
      room.products.find((product) => findProduct(product, rateDefinition))
  )

@@ -753,3 +1457,90 @@ export async function getSelectedRoomAvailability(
    selectedRoom,
  }
 }
+
+// Used to ensure `Available` rooms
+// are shown before all `NotAvailable`
+const statusLookup = {
+  [AvailabilityEnum.Available]: 1,
+  [AvailabilityEnum.NotAvailable]: 2,
+}
+
+export function sortRoomConfigs(a: RoomConfiguration, b: RoomConfiguration) {
+  // @ts-expect-error - array indexing
+  return statusLookup[a.status] - statusLookup[b.status]
+}
+
+export function getBedTypes(
+  rooms: RoomConfiguration[],
+  roomType: string,
+  roomCategories?: RoomCategory[]
+) {
+  if (!roomCategories) {
+    return []
+  }
+
+  return rooms
+    .filter((room) => room.roomType === roomType)
+    .map((availRoom) => {
+      const matchingRoom = roomCategories
+        ?.find((room) =>
+          room.roomTypes
+            .map((roomType) => roomType.code)
+            .includes(availRoom.roomTypeCode)
+        )
+        ?.roomTypes.find((roomType) => roomType.code === availRoom.roomTypeCode)
+
+      if (matchingRoom) {
+        return {
+          description: matchingRoom.description,
+          size: matchingRoom.mainBed.widthRange,
+          value: matchingRoom.code,
+          type: matchingRoom.mainBed.type,
+          extraBed: matchingRoom.fixedExtraBed
+            ? {
+                type: matchingRoom.fixedExtraBed.type,
+                description: matchingRoom.fixedExtraBed.description,
+              }
+            : undefined,
+        }
+      }
+    })
+    .filter((bed): bed is BedTypeSelection => Boolean(bed))
+}
+
+export function mergeRoomTypes(roomConfigurations: RoomConfiguration[]) {
+  // Initial sort to guarantee if one bed is NotAvailable and whereas
+  // the other is Available to make sure data is added to the correct
+  // roomConfig
+  roomConfigurations.sort(sortRoomConfigs)
+
+  const roomConfigs = new Map<string, RoomConfiguration>()
+  for (const roomConfig of roomConfigurations) {
+    if (roomConfigs.has(roomConfig.roomType)) {
+      const currentRoomConf = roomConfigs.get(roomConfig.roomType)
+      if (currentRoomConf) {
+        currentRoomConf.features = roomConfig.features.reduce(
+          (feats, feature) => {
+            const currentFeatureIndex = feats.findIndex(
+              (f) => f.code === feature.code
+            )
+            if (currentFeatureIndex !== -1) {
+              feats[currentFeatureIndex].inventory =
+                feats[currentFeatureIndex].inventory + feature.inventory
+            } else {
+              feats.push(feature)
+            }
+            return feats
+          },
+          currentRoomConf.features
+        )
+        currentRoomConf.roomsLeft =
+          currentRoomConf.roomsLeft + roomConfig.roomsLeft
+        roomConfigs.set(currentRoomConf.roomType, currentRoomConf)
+      }
+    } else {
+      roomConfigs.set(roomConfig.roomType, roomConfig)
+    }
+  }
+  return Array.from(roomConfigs.values())
+}
--- a/apps/scandic-web/stores/select-rate/helpers.ts
+++ b/apps/scandic-web/stores/select-rate/helpers.ts
@@ -107,15 +107,13 @@ export function isRoomPackageCode(
  )
 }

-export function filterRoomsBySelectedPackages(
-  selectedPackages: RoomPackageCodeEnum[],
-  rooms: RoomConfiguration[]
+export function clearRoomSelectionFromUrl(
+  roomIdx: number,
+  searchParams: URLSearchParams
 ) {
-  if (!selectedPackages.length) {
-    return rooms
-  }
-
-  return rooms.filter((r) =>
-    selectedPackages.every((pkg) => r.features.find((f) => f.code === pkg))
-  )
+  searchParams.delete(`room[${roomIdx}].bookingCode`)
+  searchParams.delete(`room[${roomIdx}].counterratecode`)
+  searchParams.delete(`room[${roomIdx}].ratecode`)
+  searchParams.delete(`room[${roomIdx}].roomtype`)
+  return searchParams
 }
--- a/apps/scandic-web/stores/select-rate/index.ts
+++ b/apps/scandic-web/stores/select-rate/index.ts
@@ -1,12 +1,13 @@
 import { produce } from "immer"
-import { ReadonlyURLSearchParams } from "next/navigation"
 import { useContext } from "react"
 import { create, useStore } from "zustand"

+import { REDEMPTION } from "@/constants/booking"
+
 import { RatesContext } from "@/contexts/Rates"

 import {
-  filterRoomsBySelectedPackages,
+  clearRoomSelectionFromUrl,
  findProductInRoom,
  findSelectedRate,
 } from "./helpers"
@@ -14,18 +15,15 @@ import {
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import { BookingCodeFilterEnum } from "@/types/enums/bookingCodeFilter"
 import { RateTypeEnum } from "@/types/enums/rateType"
+import type { Package, Packages } from "@/types/requests/packages"
 import type { InitialState, RatesState } from "@/types/stores/rates"
-import type {
-  PriceProduct,
-  RoomConfiguration,
-} from "@/types/trpc/routers/hotel/roomAvailability"
+import type { PriceProduct } from "@/types/trpc/routers/hotel/roomAvailability"

 export function createRatesStore({
  booking,
  hotelType,
  isUserLoggedIn,
  labels,
-  packages,
  pathname,
  roomCategories,
  roomsAvailability,
@@ -36,34 +34,28 @@ export function createRatesStore({
    {
      code: RoomPackageCodeEnum.ACCESSIBILITY_ROOM,
      description: labels.accessibilityRoom,
-      itemCode: packages.find(
-        (pkg) => pkg.code === RoomPackageCodeEnum.ACCESSIBILITY_ROOM
-      )?.itemCode,
    },
    {
      code: RoomPackageCodeEnum.ALLERGY_ROOM,
      description: labels.allergyRoom,
-      itemCode: packages.find(
-        (pkg) => pkg.code === RoomPackageCodeEnum.ALLERGY_ROOM
-      )?.itemCode,
    },
    {
      code: RoomPackageCodeEnum.PET_ROOM,
      description: labels.petRoom,
-      itemCode: packages.find(
-        (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
-      )?.itemCode,
    },
  ]

-  let roomConfigurations: RatesState["roomConfigurations"] = []
+  const roomsPackages: NonNullable<Packages>[] = []
+  const roomConfigurations: RatesState["roomConfigurations"] = []
  if (roomsAvailability) {
    for (const availability of roomsAvailability) {
      if ("error" in availability) {
        // Availability request failed, default to empty array
        roomConfigurations.push([])
+        roomsPackages.push([])
      } else {
        roomConfigurations.push(availability.roomConfigurations)
+        roomsPackages.push(availability.packages)
      }
    }
  }
@@ -72,21 +64,22 @@ export function createRatesStore({
  for (const [idx, room] of booking.rooms.entries()) {
    if (room.rateCode && room.roomTypeCode) {
      const roomConfiguration = roomConfigurations?.[idx]
-      const selectedPackages = room.packages ?? []
-
-      let rooms: RoomConfiguration[] = filterRoomsBySelectedPackages(
-        selectedPackages,
-        roomConfiguration
-      )

      const selectedRoom = findSelectedRate(
        room.rateCode,
        room.counterRateCode,
        room.roomTypeCode,
-        rooms
+        roomConfiguration
      )

      if (!selectedRoom) {
+        const updatedSearchParams = clearRoomSelectionFromUrl(idx, searchParams)
+        searchParams = updatedSearchParams
+        window.history.replaceState(
+          {},
+          "",
+          `${pathname}?${updatedSearchParams}`
+        )
        continue
      }

@@ -99,7 +92,9 @@ export function createRatesStore({
        rateSummary[idx] = {
          features: selectedRoom.features,
          product,
-          packages: room.packages ?? [],
+          packages: roomsPackages[idx].filter((pkg) =>
+            room.packages?.includes(pkg.code)
+          ),
          rate: product.rate,
          roomType: selectedRoom.roomType,
          roomTypeCode: selectedRoom.roomTypeCode,
@@ -126,22 +121,20 @@ export function createRatesStore({
      booking,
      packageOptions,
      hotelType,
+      isRedemptionBooking: searchParams.has("searchType")
+        ? searchParams.get("searchType") === REDEMPTION
+        : false,
      isUserLoggedIn,
-      packages,
      pathname,
-      petRoomPackage: packages.find(
-        (pkg) => pkg.code === RoomPackageCodeEnum.PET_ROOM
-      ),
      rateSummary,
      roomConfigurations,
      rooms: booking.rooms.map((room, idx) => {
        const roomConfiguration = roomConfigurations[idx]
-        const selectedPackages = room.packages ?? []
-
-        let rooms: RoomConfiguration[] = filterRoomsBySelectedPackages(
-          selectedPackages,
-          roomConfiguration
-        )
+        const roomPackages = roomsPackages[idx]
+        const selectedPackages =
+          room.packages
+            ?.map((code) => roomPackages.find((pkg) => pkg.code === code))
+            .filter((pkg): pkg is Package => Boolean(pkg)) ?? []

        const selectedRate =
          findSelectedRate(
@@ -159,91 +152,63 @@ export function createRatesStore({
            room.counterRateCode
          )
        }
+        let selectedFilter
+        const bookingCode = room.rateCode
+          ? room.bookingCode
+          : booking.bookingCode
+        if (bookingCode) {
+          selectedFilter = BookingCodeFilterEnum.Discounted
+        } else {
+          selectedFilter = BookingCodeFilterEnum.Regular
+        }

        return {
          actions: {
            appendRegularRates(roomConfigurations) {
              return set(
                produce((state: RatesState) => {
-                  const rooms = state.rooms[idx].rooms
-                  const updatedRooms = rooms.map((currentRoom) => {
-                    const incomingRoom = roomConfigurations.find(
-                      (room) =>
-                        room.roomType === currentRoom.roomType &&
-                        room.roomTypeCode === currentRoom.roomTypeCode
-                    )
+                  state.rooms[idx].isFetchingAdditionalRate = false
+                  if (roomConfigurations) {
+                    const rooms = state.rooms[idx].rooms
+                    const updatedRooms = rooms.map((currentRoom) => {
+                      const incomingRoom = roomConfigurations.find(
+                        (room) =>
+                          room.roomType === currentRoom.roomType &&
+                          room.roomTypeCode === currentRoom.roomTypeCode
+                      )

-                    if (incomingRoom) {
-                      let campaign = currentRoom.campaign
-                      if (incomingRoom.campaign.length) {
-                        const newCampaign = [
-                          ...campaign,
-                          ...incomingRoom.campaign,
-                        ].reduce((cpns, cpn) => {
-                          if (cpns.has(cpn.rateDefinition.rateCode)) {
+                      if (incomingRoom) {
+                        let campaign = currentRoom.campaign
+                        if (incomingRoom.campaign.length) {
+                          const newCampaign = [
+                            ...campaign,
+                            ...incomingRoom.campaign,
+                          ].reduce((cpns, cpn) => {
+                            if (cpns.has(cpn.rateDefinition.rateCode)) {
+                              return cpns
+                            }
+                            cpns.set(cpn.rateDefinition.rateCode, cpn)
                            return cpns
-                          }
-                          cpns.set(cpn.rateDefinition.rateCode, cpn)
-                          return cpns
-                        }, new Map<string, PriceProduct>())
-                        campaign = Array.from(newCampaign.values())
+                          }, new Map<string, PriceProduct>())
+                          campaign = Array.from(newCampaign.values())
+                        }
+                        return {
+                          ...currentRoom,
+                          campaign,
+                          products: [
+                            ...currentRoom.products,
+                            ...incomingRoom.products,
+                          ],
+                          regular: incomingRoom.regular,
+                        }
                      }
-                      return {
-                        ...currentRoom,
-                        campaign,
-                        products: [
-                          ...currentRoom.products,
-                          ...incomingRoom.products,
-                        ],
-                        regular: incomingRoom.regular,
-                      }
-                    }

-                    return currentRoom
-                  })
+                      return currentRoom
+                    })

-                  state.rooms[idx].rooms = updatedRooms
-                })
-              )
-            },
-            addRoomFeatures(roomFeatures) {
-              return set(
-                produce((state: RatesState) => {
-                  const selectedPackages = state.rooms[idx].selectedPackages
-                  const rateSummaryItem = state.rateSummary[idx]
-
-                  state.roomConfigurations[idx].forEach((room) => {
-                    const features = roomFeatures.find(
-                      (feat) => feat.roomTypeCode === room.roomTypeCode
-                    )?.features
-
-                    if (features) {
-                      room.features = features
-
-                      if (rateSummaryItem) {
-                        rateSummaryItem.packages = selectedPackages
-                        rateSummaryItem.features = features
-                      }
-                    }
-                  })
-
-                  state.rateSummary[idx] = rateSummaryItem
-
-                  state.rooms[idx].rooms = filterRoomsBySelectedPackages(
-                    selectedPackages,
-                    state.roomConfigurations[idx]
-                  )
-
-                  const selectedRate = findSelectedRate(
-                    room.rateCode,
-                    room.counterRateCode,
-                    room.roomTypeCode,
-                    state.rooms[idx].rooms
-                  )
-
-                  if (!selectedRate) {
-                    state.rooms[idx].selectedRate = null
-                    state.rateSummary[idx] = null
+                    state.rooms[idx].rooms = updatedRooms
+                  } else {
+                    state.rooms[idx].rooms = []
                  }
                })
              )
@@ -266,70 +231,75 @@ export function createRatesStore({
                })
              )
            },
+            removeSelectedPackage(code) {
+              return set(
+                produce((state: RatesState) => {
+                  state.rooms[idx].isFetchingPackages = true
+                  const filteredSelectedPackages = state.rooms[
+                    idx
+                  ].selectedPackages.filter((c) => c.code !== code)
+                  state.rooms[idx].selectedPackages = filteredSelectedPackages
+
+                  if (
+                    state.rooms[idx].selectedRate?.product.bookingCode ||
+                    state.booking.bookingCode
+                  ) {
+                    state.rooms[idx].selectedFilter =
+                      BookingCodeFilterEnum.Discounted
+                  }
+
+                  const searchParams = state.searchParams
+                  if (filteredSelectedPackages.length) {
+                    searchParams.set(
+                      `room[${idx}].packages`,
+                      filteredSelectedPackages.map((pkg) => pkg.code).join(",")
+                    )
+                  } else {
+                    searchParams.delete(`room[${idx}].packages`)
+                  }
+
+                  state.searchParams = searchParams
+
+                  window.history.replaceState(
+                    {},
+                    "",
+                    `${state.pathname}?${searchParams}`
+                  )
+                })
+              )
+            },
+            removeSelectedPackages() {
+              return set(
+                produce((state: RatesState) => {
+                  state.rooms[idx].isFetchingPackages = true
+                  state.rooms[idx].selectedPackages = []
+
+                  if (
+                    state.rooms[idx].selectedRate?.product.bookingCode ||
+                    state.booking.bookingCode
+                  ) {
+                    state.rooms[idx].selectedFilter =
+                      BookingCodeFilterEnum.Discounted
+                  }
+
+                  const searchParams = state.searchParams
+                  searchParams.delete(`room[${idx}].packages`)
+
+                  state.searchParams = searchParams
+
+                  window.history.replaceState(
+                    {},
+                    "",
+                    `${state.pathname}?${searchParams}`
+                  )
+                })
+              )
+            },
            selectFilter(filter) {
              return set(
                produce((state: RatesState) => {
                  state.rooms[idx].selectedFilter = filter
-                })
-              )
-            },
-            togglePackages(selectedPackages) {
-              return set(
-                produce((state: RatesState) => {
-                  state.rooms[idx].selectedPackages = selectedPackages
-                  const rateSummaryItem = state.rateSummary[idx]
-
-                  const roomConfiguration = state.roomConfigurations[idx]
-                  if (roomConfiguration) {
-                    const searchParams = new URLSearchParams(state.searchParams)
-                    if (selectedPackages.length) {
-                      searchParams.set(
-                        `room[${idx}].packages`,
-                        selectedPackages.join(",")
-                      )
-
-                      if (rateSummaryItem) {
-                        rateSummaryItem.packages = selectedPackages
-                      }
-                    } else {
-                      state.rooms[idx].rooms = roomConfiguration
-                      if (rateSummaryItem) {
-                        rateSummaryItem.packages = []
-                      }
-                      searchParams.delete(`room[${idx}].packages`)
-                    }
-
-                    // If we already have the features data 'addRoomFeatures' wont run
-                    // so we need to do additional filtering here if thats the case
-                    const filteredRooms = filterRoomsBySelectedPackages(
-                      selectedPackages,
-                      state.roomConfigurations[idx]
-                    )
-
-                    if (filteredRooms.length) {
-                      const selectedRate = findSelectedRate(
-                        room.rateCode,
-                        room.counterRateCode,
-                        room.roomTypeCode,
-                        state.rooms[idx].rooms
-                      )
-
-                      if (!selectedRate) {
-                        state.rooms[idx].selectedRate = null
-                        state.rateSummary[idx] = null
-                      }
-                    }
-
-                    state.searchParams = new ReadonlyURLSearchParams(
-                      searchParams
-                    )
-
-                    window.history.pushState(
-                      {},
-                      "",
-                      `${state.pathname}?${searchParams}`
-                    )
-                  }
+                  state.rooms[idx].isFetchingAdditionalRate = true
                })
              )
            },
@@ -393,6 +363,19 @@ export function createRatesStore({
                    isMainRoom &&
                    hasMemberRate &&
                    isRegularRate
+
+                  state.rooms[idx].bookingRoom.rateCode = isMemberRate
+                    ? memberRateCode
+                    : productRateCode
+                  if (!isMemberRate && hasMemberRate) {
+                    state.rooms[idx].bookingRoom.counterRateCode =
+                      memberRateCode
+                  }
+                  state.rooms[idx].bookingRoom.roomTypeCode =
+                    selectedRate.roomTypeCode
+                  state.rooms[idx].bookingRoom.bookingCode =
+                    selectedRate.product.bookingCode
+
                  const searchParams = new URLSearchParams(state.searchParams)
                  const counterratecode = isMemberRate
                    ? productRateCode
@@ -411,6 +394,17 @@ export function createRatesStore({
                    searchParams.set(`room[${idx}].ratecode`, rateCode)
                  }

+                  if (selectedRate.product.bookingCode) {
+                    searchParams.set(
+                      `room[${idx}].bookingCode`,
+                      selectedRate.product.bookingCode
+                    )
+                  } else {
+                    if (searchParams.has(`room[${idx}].bookingCode`)) {
+                      searchParams.delete(`room[${idx}].bookingCode`)
+                    }
+                  }
+
                  searchParams.set(
                    `room[${idx}].roomtype`,
                    selectedRate.roomTypeCode
@@ -422,8 +416,9 @@ export function createRatesStore({
                    state.activeRoom = idx + 1
                  }

-                  state.searchParams = new ReadonlyURLSearchParams(searchParams)
-                  window.history.pushState(
+                  state.searchParams = searchParams
+
+                  window.history.replaceState(
                    {},
                    "",
                    `${state.pathname}?${searchParams}`
@@ -431,13 +426,105 @@ export function createRatesStore({
                })
              )
            },
+            selectPackages(selectedPackages) {
+              return set(
+                produce((state: RatesState) => {
+                  state.rooms[idx].isFetchingPackages = true
+                  const pkgs = state.roomsPackages[idx].filter((pkg) =>
+                    selectedPackages.includes(pkg.code)
+                  )
+                  state.rooms[idx].selectedPackages = pkgs
+
+                  if (
+                    state.rooms[idx].selectedRate?.product.bookingCode ||
+                    state.booking.bookingCode
+                  ) {
+                    state.rooms[idx].selectedFilter =
+                      BookingCodeFilterEnum.Discounted
+                  }
+
+                  const searchParams = state.searchParams
+                  if (selectedPackages.length) {
+                    searchParams.set(
+                      `room[${idx}].packages`,
+                      selectedPackages.join(",")
+                    )
+                  } else {
+                    searchParams.delete(`room[${idx}].packages`)
+                  }
+
+                  state.searchParams = searchParams
+
+                  window.history.replaceState(
+                    {},
+                    "",
+                    `${state.pathname}?${searchParams}`
+                  )
+                })
+              )
+            },
+            updateRooms(rooms) {
+              return set(
+                produce((state: RatesState) => {
+                  state.rooms[idx].isFetchingPackages = false
+                  if (rooms) {
+                    state.rooms[idx].rooms = rooms
+                    const rateSummaryRoom = state.rateSummary[idx]
+                    if (rateSummaryRoom) {
+                      const room = state.rooms[idx].bookingRoom
+                      const selectedRoom = findSelectedRate(
+                        room.rateCode,
+                        room.counterRateCode,
+                        room.roomTypeCode,
+                        rooms
+                      )
+
+                      if (selectedRoom) {
+                        rateSummaryRoom.packages =
+                          state.rooms[idx].selectedPackages
+                      } else {
+                        const searchParams = clearRoomSelectionFromUrl(
+                          idx,
+                          state.searchParams
+                        )
+                        state.searchParams = searchParams
+                        state.rateSummary[idx] = null
+                        state.rooms[idx].selectedRate = null
+
+                        window.history.replaceState(
+                          {},
+                          "",
+                          `${pathname}?${searchParams}`
+                        )
+                      }
+                    }
+                  } else {
+                    state.rooms[idx].rooms = []
+                    if (state.rateSummary[idx]) {
+                      const searchParams = clearRoomSelectionFromUrl(
+                        idx,
+                        state.searchParams
+                      )
+                      state.searchParams = searchParams
+                      state.rateSummary[idx] = null
+                      state.rooms[idx].selectedRate = null
+                      window.history.replaceState(
+                        {},
+                        "",
+                        `${pathname}?${searchParams}`
+                      )
+                    }
+                  }
+                })
+              )
+            },
          },

          bookingRoom: room,
-          rooms,
-          selectedFilter: booking.bookingCode
-            ? BookingCodeFilterEnum.Discounted
-            : BookingCodeFilterEnum.All,
+          isFetchingAdditionalRate: false,
+          isFetchingPackages: false,
+          rooms: roomConfiguration,
+          selectedFilter,
          selectedPackages,
          selectedRate:
            selectedRate && product
@@ -452,6 +539,7 @@ export function createRatesStore({
        }
      }),
      roomCategories,
+      roomsPackages,
      roomsAvailability,
      searchParams,
      vat,
--- a/apps/scandic-web/types/components/hotelReservation/selectRate/flexibilityOption.ts
+++ b/apps/scandic-web/types/components/hotelReservation/selectRate/flexibilityOption.ts
@@ -1,39 +0,0 @@
-import type { z } from "zod"
-
-import type {
-  Product,
-  RoomConfiguration,
-} from "@/types/trpc/routers/hotel/roomAvailability"
-import type {
-  priceSchema,
-  productTypePriceSchema,
-} from "@/server/routers/hotels/schemas/productTypePrice"
-import type { RoomPackage } from "./roomFilter"
-
-export type ProductPrice = z.output<typeof productTypePriceSchema>
-export type RoomPriceSchema = z.output<typeof priceSchema>
-
-export type FlexibilityOptionProps = {
-  features: RoomConfiguration["features"]
-  paymentTerm: string
-  petRoomPackage: RoomPackage | undefined
-  priceInformation?: Array<string>
-  product: Product | undefined
-  roomType: RoomConfiguration["roomType"]
-  roomTypeCode: RoomConfiguration["roomTypeCode"]
-  title: string
-  rateName?: string // Obtained in case of booking code and redemption rates
-}
-
-export interface FlexibilityOptionVoucherProps
-  extends Omit<FlexibilityOptionProps, "| product"> {
-  product: Product
-}
-export type FlexibilityOptionChequeProps = FlexibilityOptionVoucherProps
-
-export interface PriceListProps {
-  publicPrice: ProductPrice
-  memberPrice: ProductPrice
-  petRoomPackage?: RoomPackage
-  rateName?: string // Obtained in case of booking code and redemption rates
-}
--- a/apps/scandic-web/types/components/hotelReservation/selectRate/rates.ts
+++ b/apps/scandic-web/types/components/hotelReservation/selectRate/rates.ts
@@ -1,4 +1,4 @@
-import type { Packages } from "@/types/requests/packages"
+import type { Package } from "@/types/requests/packages"
 import type {
  Product,
  RoomConfiguration,
@@ -12,5 +12,5 @@ export interface SharedRateCardProps
  extends Pick<RoomConfiguration, "roomTypeCode"> {
  handleSelectRate: (product: Product) => void
  nights: number
-  petRoomPackage: NonNullable<Packages>[number] | undefined
+  petRoomPackage: Package | undefined
 }
--- a/apps/scandic-web/types/components/hotelReservation/selectRate/roomFilter.ts
+++ b/apps/scandic-web/types/components/hotelReservation/selectRate/roomFilter.ts
@@ -11,7 +11,6 @@ export enum RoomPackageCodeEnum {
 export interface DefaultFilterOptions {
  code: RoomPackageCodeEnum
  description: string
-  itemCode: string | undefined
 }

 export type FilterValues = {
--- a/apps/scandic-web/types/components/hotelReservation/selectRate/roomListItem.ts
+++ b/apps/scandic-web/types/components/hotelReservation/selectRate/roomListItem.ts
@@ -1,8 +1,5 @@
-import type { z } from "zod"
-
+import type { Package } from "@/types/requests/packages"
 import type { RoomConfiguration } from "@/types/trpc/routers/hotel/roomAvailability"
-import type { packagePriceSchema } from "@/server/routers/hotels/schemas/packages"
-import type { RoomPriceSchema } from "./flexibilityOption"

 export type RoomListItemProps = {
  roomConfiguration: RoomConfiguration
@@ -10,19 +7,9 @@ export type RoomListItemProps = {

 export type RoomListItemImageProps = Pick<
  RoomConfiguration,
-  "features" | "roomType" | "roomTypeCode" | "roomsLeft"
->
-
-type RoomPackagePriceSchema = z.output<typeof packagePriceSchema>
-
-export type CalculatePricesPerNightProps = {
-  publicLocalPrice: RoomPriceSchema
-  memberLocalPrice: RoomPriceSchema
-  publicRequestedPrice: RoomPriceSchema | null
-  memberRequestedPrice: RoomPriceSchema | null
-  petRoomLocalPrice?: RoomPackagePriceSchema
-  petRoomRequestedPrice?: RoomPackagePriceSchema
-  nights: number
+  "roomType" | "roomTypeCode" | "roomsLeft"
+> & {
+  roomPackages: Package[]
 }

 export interface RoomSizeProps {
--- a/apps/scandic-web/types/components/hotelReservation/selectRate/roomsContainer.ts
+++ b/apps/scandic-web/types/components/hotelReservation/selectRate/roomsContainer.ts
@@ -1,14 +1,9 @@
 import type { HotelData } from "@/types/hotel"
-import type { ChildrenInRoom } from "@/utils/hotelSearchDetails"
 import type { SelectRateSearchParams } from "./selectRate"

-export interface RoomsContainerProps {
-  adultArray: number[]
+export interface RoomsContainerProps
+  extends Pick<HotelData, "roomCategories">,
+    Pick<HotelData["hotel"], "hotelType" | "vat"> {
  booking: SelectRateSearchParams
-  bookingCode?: string
-  childArray: ChildrenInRoom
-  fromDate: Date
-  hotelData: HotelData
  isUserLoggedIn: boolean
-  toDate: Date
 }
--- a/apps/scandic-web/types/components/hotelReservation/selectRate/selectRate.ts
+++ b/apps/scandic-web/types/components/hotelReservation/selectRate/selectRate.ts
@@ -1,10 +1,10 @@
 import type { RateEnum } from "@/types/enums/rate"
+import type { PackageEnum, Packages } from "@/types/requests/packages"
 import type {
  Product,
  RoomConfiguration,
 } from "@/types/trpc/routers/hotel/roomAvailability"
 import type { ChildBedMapEnum } from "../../bookingWidget/enums"
-import type { RoomPackageCodeEnum } from "./roomFilter"

 export interface Child {
  bed: ChildBedMapEnum
@@ -13,9 +13,10 @@ export interface Child {

 export interface Room {
  adults: number
+  bookingCode?: string
  childrenInRoom?: Child[]
  counterRateCode: string
-  packages?: RoomPackageCodeEnum[]
+  packages?: PackageEnum[]
  rateCode: string
  roomTypeCode: string
 }
@@ -32,7 +33,7 @@ export interface SelectRateSearchParams {

 export type Rate = {
  features: RoomConfiguration["features"]
-  packages: RoomPackageCodeEnum[]
+  packages: NonNullable<Packages>
  priceName?: string
  priceTerm?: string
  product: Product
--- a/apps/scandic-web/types/contexts/select-rate/room.ts
+++ b/apps/scandic-web/types/contexts/select-rate/room.ts
@@ -1,17 +1,16 @@
+import type { Package } from "@/types/requests/packages"
 import type { RatesState, SelectedRoom } from "@/types/stores/rates"

 export interface RoomContextValue extends Omit<SelectedRoom, "actions"> {
-  actions: Omit<
-    SelectedRoom["actions"],
-    "appendRegularRates" | "addRoomFeatures"
-  >
+  actions: SelectedRoom["actions"]
  isActiveRoom: boolean
  isFetchingAdditionalRate: boolean
-  isFetchingRoomFeatures: boolean
  isMainRoom: boolean
+  petRoomPackage: Package | undefined
  roomAvailability:
    | NonNullable<RatesState["roomsAvailability"]>[number]
    | undefined
+  roomPackages: Package[]
  roomNr: number
  totalRooms: number
 }
--- a/apps/scandic-web/types/providers/rates.ts
+++ b/apps/scandic-web/types/providers/rates.ts
@@ -1,5 +1,4 @@
 import type { Room } from "@/types/hotel"
-import type { Packages } from "@/types/requests/packages"
 import type { RoomsAvailability } from "@/types/trpc/routers/hotel/roomAvailability"
 import type { SelectRateSearchParams } from "../components/hotelReservation/selectRate/selectRate"
 import type { AvailabilityError } from "../stores/rates"
@@ -8,7 +7,6 @@ export interface RatesProviderProps extends React.PropsWithChildren {
  booking: SelectRateSearchParams
  hotelType: string | undefined
  isUserLoggedIn: boolean
-  packages: Packages | null
  roomCategories: Room[]
  roomsAvailability: (RoomsAvailability | AvailabilityError)[] | undefined
  vat: number
--- a/apps/scandic-web/types/requests/packages.ts
+++ b/apps/scandic-web/types/requests/packages.ts
@@ -6,6 +6,8 @@ import type {
  roomPackagesInputSchema,
 } from "@/server/routers/hotels/input"
 import type { packagesSchema } from "@/server/routers/hotels/output"
+import type { RoomPackageCodeEnum } from "../components/hotelReservation/selectRate/roomFilter"
+import type { BreakfastPackageEnum } from "../enums/breakfast"

 export interface BreackfastPackagesInput
  extends z.input<typeof breakfastPackageInputSchema> {}
@@ -17,3 +19,6 @@ export interface PackagesInput
  extends z.input<typeof roomPackagesInputSchema> {}

 export type Packages = z.output<typeof packagesSchema>
+export type Package = NonNullable<Packages>[number]
+
+export type PackageEnum = BreakfastPackageEnum | RoomPackageCodeEnum
--- a/apps/scandic-web/types/stores/rates.ts
+++ b/apps/scandic-web/types/stores/rates.ts
@@ -1,16 +1,11 @@
-import type { ReadonlyURLSearchParams } from "next/navigation"
-
-import type {
-  DefaultFilterOptions,
-  RoomPackageCodeEnum,
-} from "@/types/components/hotelReservation/selectRate/roomFilter"
+import type { DefaultFilterOptions } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type {
  Rate,
  Room as RoomBooking,
  SelectRateSearchParams,
 } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { Room } from "@/types/hotel"
-import type { Packages } from "@/types/requests/packages"
+import type { Package, PackageEnum } from "@/types/requests/packages"
 import type {
  Product,
  RoomConfiguration,
@@ -24,18 +19,17 @@ export interface AvailabilityError {
 }

 interface Actions {
-  appendRegularRates: (roomConfigurations: RoomConfiguration[]) => void
-  addRoomFeatures: (
-    roomFeatures: {
-      roomTypeCode: RoomConfiguration["roomTypeCode"]
-      features: RoomConfiguration["features"]
-    }[]
+  appendRegularRates: (
+    roomConfigurations: RoomConfiguration[] | undefined
  ) => void
-  closeSection: () => void
-  modifyRate: () => void
+  closeSection: VoidFunction
+  modifyRate: VoidFunction
+  removeSelectedPackage: (code: PackageEnum) => void
+  removeSelectedPackages: VoidFunction
  selectFilter: (filter: BookingCodeFilterEnum) => void
-  togglePackages: (codes: RoomPackageCodeEnum[]) => void
+  selectPackages: (codes: PackageEnum[]) => void
  selectRate: (rate: SelectedRate) => void
+  updateRooms: (rooms: RoomConfiguration[] | undefined) => void
 }

 export interface SelectedRate {
@@ -48,27 +42,29 @@ export interface SelectedRate {
 export interface SelectedRoom {
  actions: Actions
  bookingRoom: RoomBooking
+  isFetchingAdditionalRate: boolean
+  isFetchingPackages: boolean
  rooms: RoomConfiguration[]
  selectedFilter: BookingCodeFilterEnum | undefined
-  selectedPackages: RoomPackageCodeEnum[]
+  selectedPackages: Package[]
  selectedRate: SelectedRate | null
 }

 export interface RatesState {
  activeRoom: number
  booking: SelectRateSearchParams
-  packageOptions: DefaultFilterOptions[]
  hotelType: string | undefined
+  isRedemptionBooking: boolean
  isUserLoggedIn: boolean
-  packages: NonNullable<Packages>
+  packageOptions: DefaultFilterOptions[]
  pathname: string
-  petRoomPackage: NonNullable<Packages>[number] | undefined
  rateSummary: Array<Rate | null>
  rooms: SelectedRoom[]
  roomCategories: Room[]
  roomConfigurations: RoomConfiguration[][]
+  roomsPackages: Package[][]
  roomsAvailability: (RoomsAvailability | AvailabilityError)[] | undefined
-  searchParams: ReadonlyURLSearchParams
+  searchParams: URLSearchParams
  vat: number
 }

@@ -78,7 +74,6 @@ export interface InitialState
    | "booking"
    | "hotelType"
    | "isUserLoggedIn"
-    | "packages"
    | "pathname"
    | "roomCategories"
    | "roomsAvailability"
--- a/apps/scandic-web/types/trpc/routers/hotel/availability.ts
+++ b/apps/scandic-web/types/trpc/routers/hotel/availability.ts
@@ -1,12 +1,11 @@
-import {
-  type getHotelsByHotelIdsAvailabilityInputSchema,
-  type hotelsAvailabilityInputSchema,
-  type roomsCombinedAvailabilityInputSchema,
-  type selectedRoomAvailabilityInputSchema,
-} from "@/server/routers/hotels/input"
-
 import type { z } from "zod"

+import type {
+  enterDetailsRoomsAvailabilityInputSchema,
+  getHotelsByHotelIdsAvailabilityInputSchema,
+  hotelsAvailabilityInputSchema,
+  selectRateRoomsAvailabilityInputSchema,
+} from "@/server/routers/hotels/input"
 import type { hotelsAvailabilitySchema } from "@/server/routers/hotels/output"
 import type { productTypeSchema } from "@/server/routers/hotels/schemas/availability/productType"
 import type {
@@ -23,12 +22,15 @@ export type HotelsAvailabilityInputSchema = z.output<
 export type HotelsByHotelIdsAvailabilityInputSchema = z.output<
  typeof getHotelsByHotelIdsAvailabilityInputSchema
 >
-export type RoomsCombinedAvailabilityInputSchema = z.output<
-  typeof roomsCombinedAvailabilityInputSchema
+export type RoomsAvailabilityInputSchema = z.input<
+  typeof selectRateRoomsAvailabilityInputSchema
 >
-export type SelectedRoomAvailabilitySchema = z.output<
-  typeof selectedRoomAvailabilityInputSchema
+export type RoomsAvailabilityInputRoom =
+  RoomsAvailabilityInputSchema["booking"]["rooms"][number]
+export type RoomsAvailabilityExtendedInputSchema = z.input<
+  typeof enterDetailsRoomsAvailabilityInputSchema
 >
+
 export type ProductType = z.output<typeof productTypeSchema>
 export type ProductTypePrices = z.output<typeof productTypePriceSchema>
 export type ProductTypePoints = z.output<typeof productTypePointsSchema>
--- a/apps/scandic-web/types/trpc/routers/hotel/rate.ts
+++ b/apps/scandic-web/types/trpc/routers/hotel/rate.ts
@@ -1,5 +0,0 @@
-import type { z } from "zod"
-
-import type { rateSchema } from "@/server/routers/hotels/schemas/rate"
-
-export type Rate = z.output<typeof rateSchema>
--- a/apps/scandic-web/types/trpc/routers/hotel/roomAvailability.ts
+++ b/apps/scandic-web/types/trpc/routers/hotel/roomAvailability.ts
@@ -1,6 +1,5 @@
 import type { z } from "zod"

-import type { RouterOutput } from "@/lib/trpc/client"
 import type { roomsAvailabilitySchema } from "@/server/routers/hotels/output"
 import type { roomConfigurationSchema } from "@/server/routers/hotels/schemas/roomAvailability/configuration"
 import type {
@@ -13,10 +12,6 @@ import type {
 } from "@/server/routers/hotels/schemas/roomAvailability/product"
 import type { rateDefinitionSchema } from "@/server/routers/hotels/schemas/roomAvailability/rateDefinition"

-export type RoomAvailability = NonNullable<
-  RouterOutput["hotel"]["availability"]["room"]
->
-
 export type CorporateChequeProduct = z.output<typeof corporateChequeProduct>
 export type PriceProduct = z.output<typeof priceProduct>
 export type RedemptionProduct = z.output<typeof redemptionProduct>