Merged in fix/remove-old-select-rate (pull request #2647)

Fix/remove old select rate * remove old select-rate * Fix imports * renamed SelectRate2 -> SelectRate
2025-08-13 13:43:48 +00:00
parent 51f53a717d
commit e3067331c6
127 changed files with 1859 additions and 8448 deletions
--- 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
@@ -0,0 +1,124 @@
+.bookingCodeFilter {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dialog {
+  border-radius: var(--Corner-radius-md);
+  background-color: var(--Surface-Primary-Default);
+  box-shadow: var(--popup-box-shadow);
+  max-width: 340px;
+}
+
+.radioGroup {
+  display: grid;
+  gap: var(--Space-x1);
+  padding: 0;
+}
+
+.radio {
+  padding: var(--Space-x1);
+}
+
+.radio[data-hovered] {
+  cursor: pointer;
+}
+.radio[data-focus-visible]::before {
+  outline: 1px auto var(--Border-Interactive-Focus);
+}
+
+.radio {
+  display: flex;
+  align-items: center;
+}
+
+.radio::before {
+  flex-shrink: 0;
+  content: "";
+  margin-right: var(--Space-x15);
+  background-color: var(--Surface-UI-Fill-Default);
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-shadow: inset 0 0 0 2px var(--Base-Border-Normal);
+}
+
+.radio[data-selected]::before {
+  box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
+}
+
+.modalOverlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--Overlay-40);
+
+  &[data-entering] {
+    animation: overlay-fade 200ms;
+  }
+
+  &[data-exiting] {
+    animation: overlay-fade 150ms reverse ease-in;
+  }
+}
+
+.modal {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--Space-x2) var(--Space-x05);
+  border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
+  background-color: var(--Surface-Primary-Default);
+  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+
+  &[data-entering] {
+    animation: modal-anim 200ms;
+  }
+
+  &[data-exiting] {
+    animation: modal-anim 150ms reverse ease-in;
+  }
+}
+
+.modalDialog {
+  display: grid;
+  gap: var(--Space-x2);
+  padding: 0 var(--Space-x1);
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 var(--Space-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .radioGroup {
+    padding: var(--Space-x1);
+  }
+
+  .modalOverlay {
+    display: none;
+  }
+}
+
+@keyframes overlay-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes modal-anim {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
--- 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
@@ -0,0 +1,199 @@
+"use client"
+
+import { useState } from "react"
+import {
+  Dialog,
+  DialogTrigger,
+  Modal,
+  ModalOverlay,
+  Popover,
+  Radio,
+  RadioGroup,
+} from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { BookingCodeFilterEnum } from "@scandic-hotels/booking-flow/stores/bookingCode-filter"
+import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"
+
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import { useBreakpoint } from "@/hooks/useBreakpoint"
+
+import styles from "./bookingCodeFilter.module.css"
+
+export function BookingCodeFilter({ roomIndex }: { roomIndex: number }) {
+  const intl = useIntl()
+  const [isOpen, setIsOpen] = useState(false)
+  const displayAsModal = useBreakpoint("mobile")
+
+  const {
+    input,
+    getAvailabilityForRoom,
+    bookingCodeFilter,
+    actions: { selectBookingCodeFilter },
+  } = useSelectRateContext()
+  const roomAvailability = getAvailabilityForRoom(roomIndex)
+
+  const bookingCodeFilterItems = [
+    {
+      label: intl.formatMessage({
+        defaultMessage: "Booking code rates",
+      }),
+      value: BookingCodeFilterEnum.Discounted,
+    },
+    {
+      label: intl.formatMessage({
+        defaultMessage: "All rates",
+      }),
+      value: BookingCodeFilterEnum.All,
+    },
+  ]
+
+  async function updateFilterValue(selectedFilter: string) {
+    selectBookingCodeFilter(selectedFilter as BookingCodeFilterEnum)
+  }
+
+  const hideFilter = (roomAvailability ?? []).some((room) => {
+    room.products.some((product) => {
+      const isRedemption = Array.isArray(product)
+      if (isRedemption) {
+        return true
+      }
+
+      switch (product.rateDefinition.rateType) {
+        case RateTypeEnum.Arb:
+        case RateTypeEnum.CorporateCheque:
+        case RateTypeEnum.Voucher:
+          return true
+        default:
+          return false
+      }
+    })
+  })
+
+  if (hideFilter || !input?.bookingCode) {
+    return null
+  }
+
+  return (
+    <>
+      <div className={styles.bookingCodeFilter}>
+        <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
+          <ChipButton variant="Outlined">
+            {
+              bookingCodeFilterItems.find(
+                (item) => item.value === bookingCodeFilter
+              )?.label
+            }
+            <MaterialIcon
+              icon="keyboard_arrow_down"
+              size={20}
+              color="CurrentColor"
+            />
+          </ChipButton>
+          {!displayAsModal ? (
+            <Popover placement="bottom end" isNonModal>
+              <Dialog className={styles.dialog}>
+                {({ close }) => {
+                  function handleChangeFilterValue(value: string) {
+                    updateFilterValue(value)
+                    close()
+                  }
+                  return (
+                    <Typography variant="Body/Paragraph/mdRegular">
+                      <RadioGroup
+                        aria-label={intl.formatMessage({
+                          defaultMessage: "Booking Code Filter",
+                        })}
+                        onChange={handleChangeFilterValue}
+                        name="bookingCodeFilter"
+                        value={bookingCodeFilter}
+                        className={styles.radioGroup}
+                      >
+                        {bookingCodeFilterItems.map((item) => (
+                          <Radio
+                            aria-label={item.label}
+                            key={item.value}
+                            value={item.value}
+                            className={styles.radio}
+                            autoFocus={bookingCodeFilter === item.value}
+                          >
+                            {item.label}
+                          </Radio>
+                        ))}
+                      </RadioGroup>
+                    </Typography>
+                  )
+                }}
+              </Dialog>
+            </Popover>
+          ) : (
+            <ModalOverlay className={styles.modalOverlay} isDismissable>
+              <Modal className={styles.modal}>
+                <Dialog className={styles.modalDialog}>
+                  {({ close }) => {
+                    function handleChangeFilterValue(value: string) {
+                      updateFilterValue(value)
+                      close()
+                    }
+                    return (
+                      <>
+                        <div className={styles.header}>
+                          <Typography variant="Title/Subtitle/md">
+                            <h3>
+                              {intl.formatMessage({
+                                defaultMessage: "Room rates",
+                              })}
+                            </h3>
+                          </Typography>
+                          <IconButton
+                            theme="Black"
+                            style="Muted"
+                            onPress={() => {
+                              close()
+                            }}
+                          >
+                            <MaterialIcon
+                              icon="close"
+                              size={24}
+                              color="CurrentColor"
+                            />
+                          </IconButton>
+                        </div>
+                        <Typography variant="Body/Paragraph/mdRegular">
+                          <RadioGroup
+                            aria-label={intl.formatMessage({
+                              defaultMessage: "Booking Code Filter",
+                            })}
+                            onChange={handleChangeFilterValue}
+                            name="bookingCodeFilter"
+                            value={bookingCodeFilter}
+                            className={styles.radioGroup}
+                          >
+                            {bookingCodeFilterItems.map((item) => (
+                              <Radio
+                                aria-label={item.label}
+                                key={item.value}
+                                value={item.value}
+                                className={styles.radio}
+                              >
+                                {item.label}
+                              </Radio>
+                            ))}
+                          </RadioGroup>
+                        </Typography>
+                      </>
+                    )
+                  }}
+                </Dialog>
+              </Modal>
+            </ModalOverlay>
+          )}
+        </DialogTrigger>
+      </div>
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
@@ -1,14 +1,12 @@
 import { usePathname, useRouter, useSearchParams } from "next/navigation"

-import { useRatesStore } from "@/stores/select-rate"
-
 import BookingCodeChip from "@/components/BookingCodeChip"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"

 export function RemoveBookingCodeButton() {
-  const bookingCode = useRatesStore((state) => state.booking.bookingCode)
-  const roomNr = useRatesStore((state) =>
-    state.activeRoom !== -1 ? state.activeRoom : 0
-  )
+  const {
+    input: { bookingCode },
+  } = useSelectRateContext()
  const router = useRouter()
  const searchParams = useSearchParams()
  const pathname = usePathname()
@@ -26,9 +24,6 @@ export function RemoveBookingCodeButton() {
      onClose={() => {
        const newSearchParams = new URLSearchParams(searchParams)
        newSearchParams.delete("bookingCode")
-        newSearchParams.delete(`room[${roomNr}].bookingCode`)
-        newSearchParams.delete(`room[${roomNr}].ratecode`)
-        newSearchParams.delete(`room[${roomNr}].roomtype`)

        const url = `${pathname}?${newSearchParams.toString()}`

--- 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
@@ -1,19 +1,23 @@
 "use client"
+
 import { useIntl } from "react-intl"

 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { Typography } from "@scandic-hotels/design-system/Typography"

-import { useRoomContext } from "@/contexts/SelectRate/Room"
-
 import styles from "./petRoom.module.css"

-export default function PetRoomMessage() {
+export default function PetRoomMessage({
+  priceData,
+}: {
+  priceData?: { price: number; currency: string }
+}) {
  const intl = useIntl()
-  const { petRoomPackage } = useRoomContext()
-  if (!petRoomPackage) {
+
+  if (!priceData) {
    return null
  }
+
  return (
    <Typography variant="Body/Supporting text (caption)/smRegular">
      <p className={styles.additionalInformation}>
@@ -28,11 +32,7 @@ export default function PetRoomMessage() {
                <span className={styles.additionalInformationPrice}>{str}</span>
              </Typography>
            ),
-            price: formatPrice(
-              intl,
-              petRoomPackage.localPrice.price,
-              petRoomPackage.localPrice.currency
-            ),
+            price: formatPrice(intl, priceData.price, priceData.currency),
          }
        )}
      </p>
--- 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
@@ -4,25 +4,29 @@ 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 { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"

-import { useRatesStore } from "@/stores/select-rate"
-
+import { usePackageLabels } from "../../usePackageLabels"
 import { getIconNameByPackageCode } from "../../utils"
-import PetRoomMessage from "./PetRoomMessage"
-import {
-  checkIsAllergyRoom,
-  checkIsPetRoom,
-  includesAllergyRoom,
-  includesPetRoom,
-} from "./utils"

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

+import type { PackageEnum } from "@scandic-hotels/trpc/types/packages"
+import type { ReactNode } from "react"
+
 import type { FormValues } from "../formValues"

-export default function Checkboxes() {
-  const packageOptions = useRatesStore((state) => state.packageOptions)
+export function PackageCheckboxes({
+  availablePackages,
+}: {
+  availablePackages: {
+    code: RoomPackageCodeEnum
+    message?: ReactNode
+  }[]
+}) {
  const { control } = useFormContext<FormValues>()
+  const packageLabels = usePackageLabels()
+
  return (
    <Controller
      control={control}
@@ -32,7 +36,7 @@ export default function Checkboxes() {
        const petRoomSelected = includesPetRoom(field.value)
        return (
          <CheckboxGroup {...field} className={styles.checkboxGroup}>
-            {packageOptions.map((option) => {
+            {availablePackages?.map((option) => {
              const isAllergyRoom = checkIsAllergyRoom(option.code)
              const isPetRoom = checkIsPetRoom(option.code)
              const isDisabled =
@@ -59,13 +63,13 @@ export default function Checkboxes() {
                      className={styles.text}
                      variant="Body/Paragraph/mdRegular"
                    >
-                      <span>{option.description}</span>
+                      <span>{packageLabels[option.code]}</span>
                    </Typography>
                    {iconName ? (
                      <MaterialIcon icon={iconName} color="Icon/Default" />
                    ) : null}
                  </Checkbox>
-                  {isPetRoom ? <PetRoomMessage /> : null}
+                  {option.message}
                </div>
              )
            })}
@@ -75,3 +79,23 @@ export default function Checkboxes() {
    />
  )
 }
+
+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
+): code is RoomPackageCodeEnum.ALLERGY_ROOM {
+  return code === RoomPackageCodeEnum.ALLERGY_ROOM
+}
+
+export function checkIsPetRoom(
+  code: PackageEnum
+): code is RoomPackageCodeEnum.PET_ROOM {
+  return code === RoomPackageCodeEnum.PET_ROOM
+}
--- 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
@@ -1,19 +0,0 @@
-import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
-
-import type { PackageEnum } from "@scandic-hotels/trpc/types/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/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
@@ -5,76 +5,53 @@ import { useIntl } from "react-intl"
 import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { trpc } from "@scandic-hotels/trpc/client"

-import { useRatesStore } from "@/stores/select-rate"
-
-import { useRoomContext } from "@/contexts/SelectRate/Room"
-import useLang from "@/hooks/useLang"
-
-import Checkboxes from "./Checkboxes"
+import { PackageCheckboxes } from "./Checkboxes"

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

+import type { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 import type { PackageEnum } from "@scandic-hotels/trpc/types/packages"
+import type { ReactNode } from "react"

 import type { FormValues } from "./formValues"

-export default function Form({ close }: { close: () => void }) {
+export function RoomPackagesForm({
+  close,
+  selectedPackages,
+  onSelectPackages,
+  availablePackages,
+}: {
+  close: () => void
+  availablePackages: {
+    code: RoomPackageCodeEnum
+    message: ReactNode
+  }[]
+  selectedPackages: PackageEnum[]
+  onSelectPackages: (packages: PackageEnum[]) => void
+}) {
  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),
+      selectedPackages: selectedPackages,
    },
  })

-  async function getFilteredRates(packages: PackageEnum[]) {
-    const bookingCode = bookingRoom.rateCode
-      ? bookingRoom.bookingCode
-      : booking.bookingCode
-    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: bookingCode ?? undefined,
-          packages,
-        },
-      },
-      lang,
-    })
-    updateRooms(filterRates?.roomConfigurations)
-  }
-
  function clearSelectedPackages() {
-    removeSelectedPackages()
+    onSelectPackages([])
    close()
-    getFilteredRates([])
  }

  function onSubmit(data: FormValues) {
-    selectPackages(data.selectedPackages)
+    onSelectPackages(data.selectedPackages)
    close()
-    getFilteredRates(data.selectedPackages)
  }

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit)}>
-        <Checkboxes />
+        <PackageCheckboxes availablePackages={availablePackages} />
        <div className={styles.footer}>
          <Divider color="Border/Divider/Subtle" className={styles.divider} />
          <div className={styles.buttonContainer}>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { type ReactNode, useState } from "react"
 import {
  Dialog,
  DialogTrigger,
@@ -12,11 +12,25 @@ import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"

-import Form from "./Form"
+import { RoomPackagesForm } from "./Form"

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

-export default function RoomPackageFilterModal() {
+import type { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
+import type { PackageEnum } from "@scandic-hotels/trpc/types/packages"
+
+export function RoomPackageFilterModal({
+  selectedPackages,
+  onSelectPackages,
+  availablePackages,
+}: {
+  onSelectPackages: (packages: PackageEnum[]) => void
+  selectedPackages: PackageEnum[]
+  availablePackages: {
+    code: RoomPackageCodeEnum
+    message: ReactNode
+  }[]
+}) {
  const intl = useIntl()
  const [isOpen, setIsOpen] = useState(false)

@@ -48,7 +62,12 @@ export default function RoomPackageFilterModal() {
                <MaterialIcon icon="close" size={24} color="CurrentColor" />
              </IconButton>
            </div>
-            <Form close={() => setIsOpen(false)} />
+            <RoomPackagesForm
+              close={() => setIsOpen(false)}
+              availablePackages={availablePackages}
+              selectedPackages={selectedPackages}
+              onSelectPackages={onSelectPackages}
+            />
          </Dialog>
        </Modal>
      </ModalOverlay>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Popover.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Popover.tsx
@@ -1,15 +1,29 @@
-import { useState } from "react"
+import { type ReactNode, useState } from "react"
 import { 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 Form from "./Form"
+import { RoomPackagesForm } from "./Form"

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

-export default function RoomPackageFilterPopover() {
+import type { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
+import type { PackageEnum } from "@scandic-hotels/trpc/types/packages"
+
+export function RoomPackageFilterPopover({
+  selectedPackages,
+  onSelectPackages,
+  availablePackages,
+}: {
+  onSelectPackages: (packages: PackageEnum[]) => void
+  selectedPackages: PackageEnum[]
+  availablePackages: {
+    code: RoomPackageCodeEnum
+    message: ReactNode
+  }[]
+}) {
  const intl = useIntl()
  const [isOpen, setIsOpen] = useState(false)

@@ -25,8 +39,13 @@ export default function RoomPackageFilterPopover() {
      </ChipButton>

      <Popover placement="bottom end" className={styles.popover}>
-        <Dialog className={styles.popoverDialog}>
-          <Form close={() => setIsOpen(false)} />
+        <Dialog>
+          <RoomPackagesForm
+            close={() => setIsOpen(false)}
+            availablePackages={availablePackages}
+            selectedPackages={selectedPackages}
+            onSelectPackages={onSelectPackages}
+          />
        </Dialog>
      </Popover>
    </DialogTrigger>
--- 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
@@ -1,64 +1,70 @@
 "use client"
 import { Button as ButtonRAC } from "react-aria-components"
-import { useMediaQuery } from "usehooks-ts"

 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
-import { trpc } from "@scandic-hotels/trpc/client"
+import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"

-import { useRatesStore } from "@/stores/select-rate"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import { useBreakpoint } from "@/hooks/useBreakpoint"

-import { useRoomContext } from "@/contexts/SelectRate/Room"
-import useLang from "@/hooks/useLang"
-
-import RoomPackageFilterModal from "./Modal"
-import RoomPackageFilterPopover from "./Popover"
+import PetRoomMessage from "./Form/Checkboxes/PetRoomMessage"
+import { RoomPackageFilterModal } from "./Modal"
+import { RoomPackageFilterPopover } from "./Popover"
+import { usePackageLabels } from "./usePackageLabels"
 import { getIconNameByPackageCode } from "./utils"

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

+import type { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
 import type { PackageEnum } from "@scandic-hotels/trpc/types/packages"
+import type { ReactNode } from "react"

-export default function RoomPackageFilter() {
-  const lang = useLang()
-  const utils = trpc.useUtils()
-  const displayAsPopover = useMediaQuery("(min-width: 768px)")
+export function RoomPackageFilter({ roomIndex }: { roomIndex: number }) {
+  const displayAsModal = useBreakpoint("mobile")

  const {
-    actions: { removeSelectedPackage, updateRooms },
-    bookingRoom,
-    selectedPackages,
-  } = useRoomContext()
-  const { booking, packageOptions } = useRatesStore((state) => ({
-    booking: state.booking,
-    packageOptions: state.packageOptions,
-  }))
+    getPackagesForRoom,
+    actions: { selectPackages },
+  } = useSelectRateContext()

-  async function deleteSelectedPackage(code: PackageEnum) {
-    removeSelectedPackage(code)
-    const bookingCode = bookingRoom.rateCode
-      ? bookingRoom.bookingCode
-      : booking.bookingCode
+  const { selectedPackages, availablePackages } = getPackagesForRoom(roomIndex)

-    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: bookingCode ?? undefined,
-          packages: selectedPackages
-            .filter((pkg) => pkg.code !== code)
-            .map((pkg) => pkg.code),
-        },
-      },
-      lang,
+  function deletePackage(code: PackageEnum) {
+    selectPackages({
+      roomIndex,
+      packages: selectedPackages
+        .filter((pkg) => pkg.code !== code)
+        .map((pkg) => pkg.code),
    })
-    updateRooms(filterRates?.roomConfigurations)
  }

+  const petRoomPackage = availablePackages.find(
+    (x) => x.code === RoomPackageCodeEnum.PET_ROOM
+  )
+  const packageLabels = usePackageLabels()
+  const packageMessages = packageMessageMap({
+    petRoomPrice:
+      petRoomPackage && !("type" in petRoomPackage)
+        ? petRoomPackage.localPrice
+        : undefined,
+  })
+
+  const packages = availablePackages
+    .map((x) => {
+      if (!isRoomPackage(x)) {
+        return undefined
+      }
+
+      return {
+        code: x.code,
+        message: packageMessages[x.code],
+      }
+    })
+    .filter((x) => {
+      return !!x
+    })
+
  return (
    <div className={styles.roomPackageFilter}>
      <div className={styles.selectedPackages}>
@@ -73,12 +79,9 @@ export default function RoomPackageFilter() {
                size={16}
                color="CurrentColor"
              />
-              {
-                packageOptions.find((pkgOption) => pkg.code === pkgOption.code)
-                  ?.description
-              }
+              {packageLabels[pkg.code] ?? pkg.description}
              <ButtonRAC
-                onPress={() => deleteSelectedPackage(pkg.code)}
+                onPress={() => deletePackage(pkg.code)}
                className={styles.removeButton}
              >
                <MaterialIcon icon="close" size={16} color="CurrentColor" />
@@ -87,12 +90,45 @@ export default function RoomPackageFilter() {
          </Typography>
        ))}
      </div>
-      <div hidden={displayAsPopover}>
-        <RoomPackageFilterModal />
-      </div>
-      <div hidden={!displayAsPopover}>
-        <RoomPackageFilterPopover />
-      </div>
+      {displayAsModal ? (
+        <div>
+          <RoomPackageFilterModal
+            availablePackages={packages}
+            selectedPackages={selectedPackages.map((pkg) => pkg.code)}
+            onSelectPackages={(packages) => {
+              selectPackages({ roomIndex, packages })
+            }}
+          />
+        </div>
+      ) : (
+        <div>
+          <RoomPackageFilterPopover
+            availablePackages={packages}
+            selectedPackages={selectedPackages.map((pkg) => pkg.code)}
+            onSelectPackages={(packages) => {
+              selectPackages({ roomIndex, packages })
+            }}
+          />
+        </div>
+      )}
    </div>
  )
 }
+
+function isRoomPackage(x: {
+  code: BreakfastPackageEnum | RoomPackageCodeEnum
+}): x is { code: RoomPackageCodeEnum } {
+  return Object.values(RoomPackageCodeEnum).includes(
+    x.code as RoomPackageCodeEnum
+  )
+}
+
+const packageMessageMap = ({
+  petRoomPrice,
+}: {
+  petRoomPrice?: { price: number; currency: string }
+}): Record<RoomPackageCodeEnum, ReactNode | undefined> => ({
+  [RoomPackageCodeEnum.PET_ROOM]: <PetRoomMessage priceData={petRoomPrice} />,
+  [RoomPackageCodeEnum.ACCESSIBILITY_ROOM]: undefined,
+  [RoomPackageCodeEnum.ALLERGY_ROOM]: undefined,
+})
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/usePackageLabels.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/usePackageLabels.ts
@@ -0,0 +1,21 @@
+import { useIntl } from "react-intl"
+
+import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
+
+export const usePackageLabels = () => {
+  const intl = useIntl()
+
+  const labels: Record<RoomPackageCodeEnum, string> = {
+    [RoomPackageCodeEnum.ALLERGY_ROOM]: intl.formatMessage({
+      defaultMessage: "Allergy-friendly room",
+    }),
+    [RoomPackageCodeEnum.PET_ROOM]: intl.formatMessage({
+      defaultMessage: "Pet-friendly room",
+    }),
+    [RoomPackageCodeEnum.ACCESSIBILITY_ROOM]: intl.formatMessage({
+      defaultMessage: "Accessible room",
+    }),
+  }
+
+  return labels
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx
@@ -1,24 +1,52 @@
 "use client"
 import { useIntl } from "react-intl"

+import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { AvailabilityEnum } from "@scandic-hotels/trpc/enums/selectHotel"

-import { useRoomContext } from "@/contexts/SelectRate/Room"
+import { ErrorBoundary } from "@/components/ErrorBoundary/ErrorBoundary"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"

 import { RemoveBookingCodeButton } from "./RemoveBookingCodeButton/RemoveBookingCodeButton"
-import RoomPackageFilter from "./RoomPackageFilter"
+import { RoomPackageFilter } from "./RoomPackageFilter"

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

-export default function RoomsHeader() {
-  const { isFetchingPackages, rooms, totalRooms } = useRoomContext()
-  const intl = useIntl()
+export function RoomsHeader({ roomIndex }: { roomIndex: number }) {
+  return (
+    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+    <ErrorBoundary fallback={<div>Unable to render rooms header</div>}>
+      <InnerRoomsHeader roomIndex={roomIndex} />
+    </ErrorBoundary>
+  )
+}

-  const availableRooms = rooms.filter(
-    (room) => room.status === AvailabilityEnum.Available
+function InnerRoomsHeader({ roomIndex }: { roomIndex: number }) {
+  return (
+    <div className={styles.container}>
+      <AvailableRoomCount roomIndex={roomIndex} />
+      <div className={styles.filters}>
+        <RemoveBookingCodeButton />
+        <RoomPackageFilter roomIndex={roomIndex} />
+        {/* <BookingCodeFilter roomIndex={roomIndex} /> */}
+      </div>
+    </div>
+  )
+}
+
+function AvailableRoomCount({ roomIndex }: { roomIndex: number }) {
+  const intl = useIntl()
+  const { isFetching, getAvailabilityForRoom } = useSelectRateContext()
+
+  const roomAvailability = getAvailabilityForRoom(roomIndex) ?? []
+
+  const availableRooms = roomAvailability.filter(
+    (x) => x.status === AvailabilityEnum.Available
  ).length

+  const totalRooms = roomAvailability.length
+
  const notAllRoomsAvailableText = intl.formatMessage(
    {
      defaultMessage:
@@ -40,23 +68,17 @@ export default function RoomsHeader() {
    }
  )

+  if (isFetching) {
+    return <SkeletonShimmer height="30px" width="25ch" />
+  }
+
  return (
-    <div className={styles.container}>
-      <Typography variant="Title/Subtitle/md" className={styles.availableRooms}>
-        {isFetchingPackages ? (
-          <p></p>
-        ) : (
-          <p>
-            {availableRooms !== totalRooms
-              ? notAllRoomsAvailableText
-              : allRoomsAvailableText}
-          </p>
-        )}
-      </Typography>
-      <div className={styles.filters}>
-        <RemoveBookingCodeButton />
-        <RoomPackageFilter />
-      </div>
-    </div>
+    <Typography variant="Title/Subtitle/md" className={styles.availableRooms}>
+      <p>
+        {availableRooms !== totalRooms
+          ? notAllRoomsAvailableText
+          : allRoomsAvailableText}
+      </p>
+    </Typography>
  )
 }