Merged in feat/SW-2113-allow-feature-combinations (pull request #1719)

Feat/SW-2113 allow feature combinations * feat(SW-2113): Refactor features data to be fetched on filter room filter change * feat(SW-2113): added loading state * fix: now clear room selection when applying filter and room doesnt exists. And added room features to mobile summary * fix * fix: add package to price details * feat(SW-2113): added buttons to room filter * fix: active room * fix: remove console log * fix: added form and close handler to room package filter * fix: add restriction so you cannot select pet room with allergy room and vice versa * fix: fixes from review feedback * fix * fix: hide modify button if on nextcoming rooms if no selection is made, and adjust filter logic in togglePackage * fix: forgot to use roomFeatureCodes from input.. * fix: naming Approved-by: Simon.Emanuelsson
2025-04-07 11:36:34 +00:00
parent 8d34e1c8bb
commit e6ae6ff650
31 changed files with 725 additions and 359 deletions
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/PriceDetailsTable/index.tsx
@@ -100,6 +100,10 @@ export default function PriceDetailsTable({
        const isMainRoom = idx === 0
        const getMemberRate = isMainRoom && isMember

+        if (!room) {
+          return null
+        }
+
        let price
        if (
          getMemberRate &&
@@ -130,6 +134,17 @@ export default function PriceDetailsTable({
                  price.localPrice.currency
                )}
              />
+              {room.packages?.map((pkg) => (
+                <Row
+                  key={pkg.code}
+                  label={pkg.description}
+                  value={formatPrice(
+                    intl,
+                    +pkg.localPrice.totalPrice,
+                    pkg.localPrice.currency
+                  )}
+                />
+              ))}
              <Row
                bold
                label={intl.formatMessage({ id: "Room charge" })}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
@@ -56,10 +56,11 @@ export default function Summary({
    return null
  }

-  const memberPrice = getMemberPrice(rooms[0].roomRate)
+  const memberPrice =
+    rooms.length === 1 && rooms[0] ? getMemberPrice(rooms[0].roomRate) : null

-  const containsBookingCodeRate = rooms.find((r) =>
-    isBookingCodeRate(r.roomRate)
+  const containsBookingCodeRate = rooms.find(
+    (r) => r && isBookingCodeRate(r.roomRate)
  )
  const showDiscounted = containsBookingCodeRate || isMember

@@ -93,6 +94,10 @@ export default function Summary({
      </header>
      <Divider color="primaryLightSubtle" />
      {rooms.map((room, idx) => {
+        if (!room) {
+          return null
+        }
+
        const roomNumber = idx + 1
        const adults = room.adults
        const childrenInRoom = room.childrenInRoom
@@ -137,6 +142,8 @@ export default function Summary({
          guestsParts.push(childrenMsg)
        }

+        const roomPackages = room.packages
+
        return (
          <Fragment key={idx}>
            <div
@@ -245,6 +252,21 @@ export default function Summary({
                  </Body>
                </div>
              ) : null}
+              {roomPackages?.map((pkg) => (
+                <div className={styles.entry} key={pkg.code}>
+                  <div>
+                    <Body color="uiTextHighContrast">{pkg.description}</Body>
+                  </div>
+
+                  <Body color="uiTextHighContrast">
+                    {formatPrice(
+                      intl,
+                      pkg.localPrice.price,
+                      pkg.localPrice.currency
+                    )}
+                  </Body>
+                </div>
+              ))}
            </div>
            <Divider color="primaryLightSubtle" />
          </Fragment>
--- 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,14 +27,21 @@ export default function MobileSummary({
  const scrollY = useRef(0)
  const [isSummaryOpen, setIsSummaryOpen] = useState(false)

-  const { booking, bookingRooms, roomsAvailability, rateSummary, vat } =
-    useRatesStore((state) => ({
-      booking: state.booking,
-      bookingRooms: state.booking.rooms,
-      roomsAvailability: state.roomsAvailability,
-      rateSummary: state.rateSummary,
-      vat: state.vat,
-    }))
+  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,
+  }))

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

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

-  const containsBookingCodeRate = rateSummary.find((r) =>
-    isBookingCodeRate(r.product)
+  const containsBookingCodeRate = rateSummary.find(
+    (r) => r && isBookingCodeRate(r.product)
  )
  const showDiscounted = containsBookingCodeRate || isUserLoggedIn

--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mapRate.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mapRate.ts
@@ -3,8 +3,18 @@ import type {
  Room,
 } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { CurrencyEnum } from "@/types/enums/currency"
+import type { Packages } from "@/types/requests/packages"
+
+export function mapRate(
+  room: Rate,
+  index: number,
+  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))

-export function mapRate(room: Rate, index: number, bookingRooms: Room[]) {
  const rate = {
    adults: bookingRooms[index].adults,
    cancellationText: room.product.rateDefinition?.cancellationText ?? "",
@@ -29,6 +39,7 @@ export function mapRate(room: Rate, index: number, bookingRooms: Room[]) {
    },
    roomRate: room.product,
    roomType: room.roomType,
+    packages: roomPackages,
  }

  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
@@ -16,16 +16,10 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { formatPrice } from "@/utils/numberFormatting"

 import MobileSummary from "./MobileSummary"
-import {
-  calculateCorporateChequePrice,
-  calculateRedemptionTotalPrice,
-  calculateTotalPrice,
-  calculateVoucherPrice,
-} from "./utils"
+import { getTotalPrice } from "./utils"

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

-import type { Price } from "@/types/components/hotelReservation/price"
 import type { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import { RateEnum } from "@/types/enums/rate"
@@ -96,9 +90,10 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
  const summaryPriceText = `${totalNights}, ${totalAdults}${totalChildren}, ${totalRooms}`

  const totalRoomsRequired = bookingRooms.length
-  const isAllRoomsSelected = rateSummary.length === totalRoomsRequired
+  const isAllRoomsSelected =
+    rateSummary.filter((rate) => rate !== null).length === totalRoomsRequired
  const hasMemberRates = rateSummary.some(
-    (room) => "member" in room.product && room.product.member
+    (room) => room && "member" in room.product && room.product.member
  )
  const showMemberDiscountBanner = hasMemberRates && !isUserLoggedIn

@@ -134,12 +129,15 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {

  const isBookingCodeRate = rateSummary.some(
    (rate) =>
+      rate &&
      "public" in rate.product &&
      rate.product.public?.rateType !== RateTypeEnum.Regular
  )
-  const isVoucherRate = rateSummary.some((rate) => "voucher" in rate.product)
+  const isVoucherRate = rateSummary.some(
+    (rate) => rate && "voucher" in rate.product
+  )
  const isCorporateChequeRate = rateSummary.some(
-    (rate) => "corporateCheque" in rate.product
+    (rate) => rate && "corporateCheque" in rate.product
  )
  const showDiscounted =
    isUserLoggedIn ||
@@ -148,37 +146,29 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
    isCorporateChequeRate

  const mainRoomProduct = rateSummary[0]
-  let totalPriceToShow: Price
-  if ("redemption" in mainRoomProduct.product) {
-    // In case of reward night (redemption) only single room booking is supported by business rules
-    totalPriceToShow = calculateRedemptionTotalPrice(
-      mainRoomProduct.product.redemption
-    )
-  } else if ("voucher" in mainRoomProduct.product) {
-    totalPriceToShow = calculateVoucherPrice(rateSummary)
-  } else if ("corporateCheque" in mainRoomProduct.product) {
-    totalPriceToShow = calculateCorporateChequePrice(rateSummary)
-  } else {
-    totalPriceToShow = calculateTotalPrice(
-      rateSummary,
-      isUserLoggedIn,
-      petRoomPackage
-    )
+  const totalPriceToShow = getTotalPrice(
+    mainRoomProduct,
+    rateSummary,
+    isUserLoggedIn,
+    petRoomPackage
+  )
+
+  const rateProduct = rateSummary.find((rate) => rate?.product)?.product
+
+  if (!totalPriceToShow || !rateProduct) {
+    return null
  }

  let mainRoomCurrency = ""
-  if (
-    "member" in mainRoomProduct.product &&
-    mainRoomProduct.product.member?.localPrice
-  ) {
-    mainRoomCurrency = mainRoomProduct.product.member.localPrice.currency
+  if ("member" in rateProduct && rateProduct.member?.localPrice) {
+    mainRoomCurrency = rateProduct.member.localPrice.currency
  }
  if (
    !mainRoomCurrency &&
-    "public" in mainRoomProduct.product &&
-    mainRoomProduct.product.public?.localPrice
+    "public" in rateProduct &&
+    rateProduct.public?.localPrice
  ) {
-    mainRoomCurrency = mainRoomProduct.product.public.localPrice.currency
+    mainRoomCurrency = rateProduct.public.localPrice.currency
  }

  return (
@@ -186,38 +176,56 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
      <div className={styles.summary}>
        <div className={styles.content}>
          <div className={styles.summaryText}>
-            {rateSummary.map((room, index) => (
-              <div key={index} className={styles.roomSummary}>
-                {rateSummary.length > 1 ? (
-                  <>
-                    <Subtitle color="uiTextHighContrast">
+            {rateSummary.map((room, index) => {
+              if (!room) {
+                return (
+                  <div key={`unselected-${index}`}>
+                    <Subtitle color="uiTextPlaceholder">
                      {intl.formatMessage(
                        { id: "Room {roomIndex}" },
                        { roomIndex: index + 1 }
                      )}
                    </Subtitle>
-                    <Body color="uiTextMediumContrast">{room.roomType}</Body>
-                    <Caption color="uiTextMediumContrast">
-                      {getRateDetails(room.rate)}
-                    </Caption>
-                  </>
-                ) : (
-                  <>
-                    <Subtitle color="uiTextHighContrast">
-                      {room.roomType}
-                    </Subtitle>
-                    <Body color="uiTextMediumContrast">
-                      {getRateDetails(room.rate)}
+                    <Body color="uiTextPlaceholder">
+                      {intl.formatMessage({ id: "Select room" })}
                    </Body>
-                  </>
-                )}
-              </div>
-            ))}
+                  </div>
+                )
+              }
+
+              return (
+                <div key={index}>
+                  {rateSummary.length > 1 ? (
+                    <>
+                      <Subtitle color="uiTextHighContrast">
+                        {intl.formatMessage(
+                          { id: "Room {roomIndex}" },
+                          { roomIndex: index + 1 }
+                        )}
+                      </Subtitle>
+                      <Body color="uiTextMediumContrast">{room.roomType}</Body>
+                      <Caption color="uiTextMediumContrast">
+                        {getRateDetails(room.rate)}
+                      </Caption>
+                    </>
+                  ) : (
+                    <>
+                      <Subtitle color="uiTextHighContrast">
+                        {room.roomType}
+                      </Subtitle>
+                      <Body color="uiTextMediumContrast">
+                        {getRateDetails(room.rate)}
+                      </Body>
+                    </>
+                  )}
+                </div>
+              )
+            })}
            {/* Render unselected rooms */}
            {Array.from({
              length: totalRoomsRequired - rateSummary.length,
            }).map((_, index) => (
-              <div key={`unselected-${index}`} className={styles.roomSummary}>
+              <div key={`unselected-${index}`}>
                <Subtitle color="uiTextPlaceholder">
                  {intl.formatMessage(
                    { id: "Room {roomIndex}" },
@@ -235,47 +243,45 @@ export default function RateSummary({ isUserLoggedIn }: RateSummaryProps) {
              <div className={styles.promoContainer}>
                <SignupPromoDesktop
                  memberPrice={{
-                    amount: rateSummary.reduce(
-                      (
-                        total,
-                        { features, packages: roomPackages, product }
-                      ) => {
-                        const memberExists =
-                          "member" in product && product.member
-                        const publicExists =
-                          "public" in product && product.public
-                        if (!memberExists) {
-                          if (!publicExists) {
-                            return total
-                          }
-                        }
+                    amount: rateSummary.reduce((total, rate) => {
+                      if (!rate) {
+                        return total
+                      }

-                        const price =
-                          product.member?.localPrice.pricePerStay ||
-                          product.public?.localPrice.pricePerStay
+                      const { features, packages: roomPackages, product } = rate

-                        if (!price) {
+                      const memberExists = "member" in product && product.member
+                      const publicExists = "public" in product && product.public
+                      if (!memberExists) {
+                        if (!publicExists) {
                          return total
                        }
+                      }

-                        const hasSelectedPetRoom = roomPackages.includes(
-                          RoomPackageCodeEnum.PET_ROOM
-                        )
-                        if (!hasSelectedPetRoom) {
-                          return total + price
-                        }
-                        const isPetRoom = features.find(
-                          (feature) =>
-                            feature.code === RoomPackageCodeEnum.PET_ROOM
-                        )
-                        const petRoomPrice =
-                          isPetRoom && petRoomPackage
-                            ? Number(petRoomPackage.localPrice.totalPrice)
-                            : 0
-                        return total + price + petRoomPrice
-                      },
-                      0
-                    ),
+                      const price =
+                        product.member?.localPrice.pricePerStay ||
+                        product.public?.localPrice.pricePerStay
+
+                      if (!price) {
+                        return total
+                      }
+
+                      const hasSelectedPetRoom = roomPackages.includes(
+                        RoomPackageCodeEnum.PET_ROOM
+                      )
+                      if (!hasSelectedPetRoom) {
+                        return total + price
+                      }
+                      const isPetRoom = features.find(
+                        (feature) =>
+                          feature.code === RoomPackageCodeEnum.PET_ROOM
+                      )
+                      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
@@ -5,6 +5,7 @@ import {
 } 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(
@@ -194,3 +195,32 @@ export function calculateCorporateChequePrice(selectedRateSummary: Rate[]) {
    }
  )
 }
+
+export function getTotalPrice(
+  mainRoomProduct: Rate | null,
+  rateSummary: Array<Rate | null>,
+  isUserLoggedIn: boolean,
+  petRoomPackage: NonNullable<Packages>[number] | undefined
+): Price | null {
+  const summaryArray = rateSummary.filter((rate): rate is Rate => rate !== null)
+
+  if (summaryArray.some((rate) => "corporateCheque" in rate.product)) {
+    return calculateCorporateChequePrice(summaryArray)
+  }
+
+  if (!mainRoomProduct) {
+    return calculateTotalPrice(summaryArray, isUserLoggedIn, petRoomPackage)
+  }
+
+  const { product } = mainRoomProduct
+
+  // In case of reward night (redemption) or voucher only single room booking is supported by business rules
+  if ("redemption" in product) {
+    return calculateRedemptionTotalPrice(product.redemption)
+  }
+  if ("voucher" in product) {
+    return calculateVoucherPrice(summaryArray)
+  }
+
+  return calculateTotalPrice(summaryArray, isUserLoggedIn, petRoomPackage)
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -20,9 +20,10 @@ import { RateEnum } from "@/types/enums/rate"

 export default function SelectedRoomPanel() {
  const intl = useIntl()
-  const { isUserLoggedIn, roomCategories } = useRatesStore((state) => ({
+  const { isUserLoggedIn, roomCategories, rooms } = useRatesStore((state) => ({
    isUserLoggedIn: state.isUserLoggedIn,
    roomCategories: state.roomCategories,
+    rooms: state.rooms,
  }))
  const {
    actions: { modifyRate },
@@ -89,6 +90,10 @@ export default function SelectedRoomPanel() {
    return null
  }

+  const showModifyButton =
+    isMainRoom ||
+    (!isMainRoom && rooms.slice(0, roomNr).every((room) => room.selectedRate))
+
  return (
    <div className={styles.selectedRoomPanel}>
      <div className={styles.content}>
@@ -118,14 +123,16 @@ export default function SelectedRoomPanel() {
            width={600}
          />
        ) : null}
-        <div className={styles.modifyButtonContainer}>
-          <Button clean onClick={modifyRate}>
-            <Chip size="small" variant="uiTextHighContrast">
-              <MaterialIcon icon="edit_square" />
-              {intl.formatMessage({ id: "Modify" })}
-            </Chip>
-          </Button>
-        </div>
+        {showModifyButton && (
+          <div className={styles.modifyButtonContainer}>
+            <Button clean onClick={modifyRate}>
+              <Chip size="small" variant="uiTextHighContrast">
+                <MaterialIcon icon="edit_square" />
+                {intl.formatMessage({ id: "Modify" })}
+              </Chip>
+            </Button>
+          </div>
+        )}
      </div>
    </div>
  )
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomPackageFilter/Checkbox/checkbox.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomPackageFilter/Checkbox/checkbox.module.css
@@ -32,6 +32,15 @@
  background-color: var(--UI-Input-Controls-Fill-Selected);
 }

+.checkboxWrapper[data-disabled] .checkbox {
+  border-color: var(--UI-Input-Controls-Border-Disabled);
+  background-color: var(--UI-Input-Controls-Surface-Disabled);
+}
+
+.checkboxWrapper[data-disabled] .text {
+  color: var(--Base-Text-Disabled);
+}
+
@media screen and (max-width: 767px) {
  .checkboxWrapper:hover {
    background-color: transparent;
--- 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
@@ -14,6 +14,7 @@ interface CheckboxProps {
  value: string
  isSelected: boolean
  iconName: MaterialSymbolProps["icon"]
+  isDisabled: boolean
  onChange: (value: string) => void
 }

@@ -22,12 +23,14 @@ export default function Checkbox({
  name,
  value,
  iconName,
+  isDisabled,
  onChange,
 }: CheckboxProps) {
  return (
    <AriaCheckbox
      className={styles.checkboxWrapper}
      isSelected={isSelected}
+      isDisabled={isDisabled}
      onChange={() => onChange(value)}
    >
      {({ isSelected }) => (
@@ -35,7 +38,10 @@ export default function Checkbox({
          <span className={styles.checkbox}>
            {isSelected && <MaterialIcon icon="check" color="Icon/Inverted" />}
          </span>
-          <Typography variant="Body/Paragraph/mdRegular">
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.text}
+          >
            <span>{name}</span>
          </Typography>
          {iconName ? (
--- 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,7 +1,15 @@
 "use client"
-import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components"
+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"
@@ -16,20 +24,46 @@ 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: { togglePackage },
+    actions: { togglePackages },
    selectedPackages,
  } = useRoomContext()
-  const intl = useIntl()
+
+  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) => (
-        <Button
+        <AriaButton
          key={pkg}
-          onPress={() => togglePackage(pkg)}
+          onPress={() => {
+            const packages = selectedPackages.filter((s) => s !== pkg)
+            togglePackages(packages)
+          }}
          className={styles.activeFilterButton}
        >
          <MaterialIcon
@@ -42,9 +76,9 @@ export default function RoomPackageFilter() {
            size={16}
            color="Icon/Interactive/Default"
          />
-        </Button>
+        </AriaButton>
      ))}
-      <DialogTrigger>
+      <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
        <ChipButton variant="Outlined">
          {intl.formatMessage({ id: "Room preferences" })}
          <MaterialIcon
@@ -55,39 +89,105 @@ export default function RoomPackageFilter() {
        </ChipButton>
        <Popover placement="bottom end">
          <Dialog className={styles.dialog}>
-            <div className={styles.filters}>
-              {packageOptions.map((option) => (
-                <Checkbox
-                  key={option.code}
-                  name={option.description}
-                  value={option.code}
-                  iconName={getIconNameByPackageCode(option.code)}
-                  isSelected={selectedPackages.includes(option.code)}
-                  onChange={() => togglePackage(option.code)}
-                />
-              ))}
-            </div>
-            <div className={styles.footer}>
-              <Divider color="borderDividerSubtle" />
-              <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>
+            <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>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomPackageFilter/roomPackageFilter.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomPackageFilter/roomPackageFilter.module.css
@@ -23,6 +23,7 @@

 .additionalInformation {
  color: var(--Text-Tertiary);
+  padding: var(--Space-x1) var(--Space-x15);
 }

 .additionalInformationPrice {
@@ -40,3 +41,9 @@
  border-width: 0;
  cursor: pointer;
 }
+
+.buttonContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomsListSkeleton.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomsListSkeleton.tsx
@@ -0,0 +1,19 @@
+import { RoomCardSkeleton } from "@/components/HotelReservation/RoomCardSkeleton/RoomCardSkeleton"
+
+import styles from "./roomsListSkeleton.module.css"
+
+type Props = {
+  count?: number
+}
+
+export function RoomsListSkeleton({ count = 4 }: Props) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.skeletonContainer}>
+        {Array.from({ length: count }).map((_, index) => (
+          <RoomCardSkeleton key={index} />
+        ))}
+      </div>
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/index.tsx
@@ -2,12 +2,18 @@
 import { useRoomContext } from "@/contexts/SelectRate/Room"

 import RoomListItem from "./RoomListItem"
+import { RoomsListSkeleton } from "./RoomsListSkeleton"
 import ScrollToList from "./ScrollToList"

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

 export default function RoomsList() {
-  const { rooms } = useRoomContext()
+  const { rooms, isFetchingRoomFeatures } = useRoomContext()
+
+  if (isFetchingRoomFeatures) {
+    return <RoomsListSkeleton />
+  }
+
  return (
    <>
      <ScrollToList />
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/rooms.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/rooms.module.css
@@ -3,6 +3,7 @@
  display: grid;
  gap: var(--Spacing-x2);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  overflow: hidden;
 }

 .roomList > li {
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/roomsListSkeleton.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/roomsListSkeleton.module.css
@@ -0,0 +1,17 @@
+.container {
+  max-width: var(--max-width-page);
+}
+
+.skeletonContainer {
+  display: grid;
+
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  /* used to hide overflowing rows */
+  grid-template-rows: auto;
+  grid-auto-rows: 0;
+  overflow: hidden;
+
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--Spacing-x2);
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/index.tsx
@@ -1,5 +1,5 @@
 "use client"
-import { REDEMPTION } from "@/constants/booking"
+
 import { dt } from "@/lib/dt"

 import useLang from "@/hooks/useLang"
@@ -25,9 +25,6 @@ export function RoomsContainer({

  const fromDateString = dt(fromDate).format("YYYY-MM-DD")
  const toDateString = dt(toDate).format("YYYY-MM-DD")
-  const redemption = booking.searchType
-    ? booking.searchType === REDEMPTION
-    : undefined

  const { data: roomsAvailability, isPending: isLoadingAvailability } =
    useRoomsAvailability(
@@ -37,8 +34,7 @@ export function RoomsContainer({
      toDateString,
      lang,
      childArray,
-      booking.bookingCode,
-      redemption
+      booking
    )

  const { data: packages, isPending: isLoadingPackages } = useHotelPackages(
--- a/apps/scandic-web/components/HotelReservation/SelectRate/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/utils.ts
@@ -1,10 +1,6 @@
-import { useSearchParams } from "next/navigation"
-import { useEffect, useMemo, useState } from "react"
-
+import { REDEMPTION } from "@/constants/booking"
 import { trpc } from "@/lib/trpc/client"

-import { convertSearchParamsToObj, searchParamsToRecord } from "@/utils/url"
-
 import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
 import type { SelectRateSearchParams } from "@/types/components/hotelReservation/selectRate/selectRate"
 import type { Lang } from "@/constants/languages"
@@ -17,79 +13,30 @@ export function useRoomsAvailability(
  toDateString: string,
  lang: Lang,
  childArray: ChildrenInRoom,
-  bookingCode?: string,
-  redemption?: boolean
+  booking: SelectRateSearchParams
 ) {
-  const searchParams = useSearchParams()
-  const searchParamsObj = convertSearchParamsToObj<SelectRateSearchParams>(
-    searchParamsToRecord(searchParams)
+  const redemption = booking.searchType
+    ? booking.searchType === REDEMPTION
+    : undefined
+
+  const roomFeatureCodesArray = booking.rooms.map(
+    (room) => room.packages ?? null
  )

-  const hasPackagesParam = searchParamsObj.rooms.some((room) => room.packages)
-  const [hasRoomFeatures, setHasRoomFeatures] = useState(hasPackagesParam)
-
-  useEffect(() => {
-    setHasRoomFeatures(hasPackagesParam)
-  }, [hasPackagesParam, setHasRoomFeatures])
-
-  const { data: roomFeatures, isPending: isRoomFeaturesPending } =
-    trpc.hotel.availability.roomFeatures.useQuery(
-      {
-        hotelId,
-        startDate: fromDateString,
-        endDate: toDateString,
-        adultsCount,
-        childArray,
-      },
-      {
-        enabled: hasRoomFeatures,
-      }
-    )
-
-  const { data: roomsAvailability, isPending: isRoomsAvailabiltyPending } =
+  const roomsAvailability =
    trpc.hotel.availability.roomsCombinedAvailability.useQuery({
      adultsCount,
-      bookingCode,
      childArray,
      hotelId,
      lang,
      redemption,
      roomStayEndDate: toDateString,
      roomStayStartDate: fromDateString,
+      bookingCode: booking.bookingCode,
+      roomFeatureCodesArray,
    })

-  const combinedData = useMemo(() => {
-    if (!roomsAvailability) {
-      return undefined
-    }
-    if (!roomFeatures) {
-      return roomsAvailability
-    }
-
-    return roomsAvailability.map((room, idx) => {
-      if ("error" in room) {
-        return room
-      }
-
-      return {
-        ...room,
-        roomConfigurations: room.roomConfigurations.map((config) => ({
-          ...config,
-          features:
-            roomFeatures?.[idx]?.find(
-              (r) => r.roomTypeCode === config.roomTypeCode
-            )?.features ?? [],
-        })),
-      }
-    })
-  }, [roomFeatures, roomsAvailability])
-
-  return {
-    data: combinedData,
-    isPending: hasRoomFeatures
-      ? isRoomsAvailabiltyPending || isRoomFeaturesPending
-      : isRoomsAvailabiltyPending,
-  }
+  return roomsAvailability
 }

 export function useHotelPackages(