Merged in feature/select-rate-vertical-data-flow (pull request #2535)

Feature/select rate vertical data flow * add fix from SW-2666 * use translations for room packages * move types to it's own file * Merge branch 'master' of bitbucket.org:scandic-swap/web into feature/select-rate-vertical-data-flow * merge * feature/select-rate: double rate for campaing rates * revert NODE_ENV check in Cookiebot script * revert testing values * fix(SW-3171): fix all filter selected in price details * fix(SW-3166): multiroom anchoring when changing filter * fix(SW-3172): check hotelType, show correct breakfast message * Merge branch 'feature/select-rate-vertical-data-flow' of bitbucket.org:scandic-swap/web into feature/select-rate-vertical-data-flow * fix: show special needs icons for subsequent roomTypes SW-3167 * fix: Display strike through text when logged in SW-3168 * fix: Reinstate the scrollToView behaviour when selecting a rate SW-3169 * merge * . * PR fixes * fix: don't return notFound() * . * always include defaults for room packages * merge * merge * merge * Remove floating h1 for new select-rate Approved-by: Anton Gunnarsson
2025-08-13 12:45:40 +00:00
parent 706f2d8dfe
commit 68cd061c6d
126 changed files with 8751 additions and 315 deletions
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -0,0 +1,195 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { logger } from "@scandic-hotels/common/logger"
+import Body from "@scandic-hotels/design-system/Body"
+import Caption from "@scandic-hotels/design-system/Caption"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Image from "@scandic-hotels/design-system/Image"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
+
+import Chip from "@/components/TempDesignSystem/Chip"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn"
+
+import styles from "./selectedRoomPanel.module.css"
+
+export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
+  const intl = useIntl()
+
+  const isMainRoom = roomIndex === 0
+  const roomNr = roomIndex + 1
+  const {
+    selectedRates,
+    actions: { setActiveRoom },
+  } = useSelectRateContext()
+  const selectedRate = selectedRates.forRoom(roomIndex)
+  const images = selectedRate?.roomInfo?.roomInfo?.images
+
+  const rateTitle = useRateTitle(selectedRate?.rate)
+
+  const selectedProductTitle = useSelectedProductTitle({ roomIndex })
+
+  if (!selectedRate) {
+    return null
+  }
+
+  if (!selectedProductTitle) {
+    logger.error("Selected product is unknown")
+    return null
+  }
+
+  const showModifyButton =
+    isMainRoom ||
+    (!isMainRoom && selectedRates.rates.slice(0, roomNr).every((room) => room))
+
+  return (
+    <div className={styles.selectedRoomPanel}>
+      <div className={styles.content}>
+        <Caption color="uiTextHighContrast">
+          {intl.formatMessage(
+            {
+              defaultMessage: "Room {roomIndex}",
+            },
+            { roomIndex: roomNr }
+          )}
+        </Caption>
+        <Subtitle className={styles.subtitle} color="uiTextHighContrast">
+          {selectedRate.roomInfo.roomType}
+        </Subtitle>
+        <Body color="uiTextMediumContrast">{rateTitle}</Body>
+        <Body color="uiTextHighContrast">{selectedProductTitle}</Body>
+      </div>
+      <div className={styles.imageContainer}>
+        {images?.[0]?.imageSizes?.tiny ? (
+          <Image
+            alt={
+              selectedRate.roomInfo.roomType ??
+              images[0].metaData?.altText ??
+              ""
+            }
+            className={styles.img}
+            height={300}
+            src={images[0].imageSizes.tiny}
+            width={600}
+          />
+        ) : null}
+        {showModifyButton && (
+          <div className={styles.modifyButtonContainer}>
+            <Button clean onClick={() => setActiveRoom(roomIndex)}>
+              <Chip size="small" variant="uiTextHighContrast">
+                <MaterialIcon
+                  size={16}
+                  color="Icon/Inverted"
+                  icon="edit_square"
+                />
+                {intl.formatMessage({
+                  defaultMessage: "Change",
+                })}
+              </Chip>
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function useSelectedProductTitle({ roomIndex }: { roomIndex: number }) {
+  const intl = useIntl()
+  const isUserLoggedIn = useIsUserLoggedIn()
+  const {
+    selectedRates,
+    input: { nights },
+  } = useSelectRateContext()
+
+  const selectedRate = selectedRates.forRoom(roomIndex)
+
+  const night = intl.formatMessage({
+    defaultMessage: "night",
+  })
+
+  const isMainRoom = roomIndex === 0
+
+  if (!selectedRate) {
+    return null
+  }
+
+  const selectedPackagesCurrency = selectedRate.roomInfo.selectedPackages.find(
+    (pkg) => pkg.localPrice.currency
+  )
+  const selectedPackagesPrice = selectedRate.roomInfo.selectedPackages.reduce(
+    (total, pkg) => total + pkg.localPrice.totalPrice,
+    0
+  )
+  const selectedPackagesPricePerNight = Math.ceil(
+    selectedPackagesPrice / nights
+  )
+
+  if (
+    isUserLoggedIn &&
+    isMainRoom &&
+    "member" in selectedRate &&
+    selectedRate.member
+  ) {
+    const { localPrice } = selectedRate.member
+    return `${localPrice.pricePerNight + selectedPackagesPricePerNight} ${localPrice.currency} / ${night}`
+  }
+
+  if ("public" in selectedRate && selectedRate.public) {
+    const { localPrice } = selectedRate.public
+    return `${localPrice.pricePerNight + selectedPackagesPricePerNight} ${localPrice.currency} / ${night}`
+  }
+
+  if ("corporateCheque" in selectedRate) {
+    const { localPrice } = selectedRate.corporateCheque
+    const mainProductTitle = `${localPrice.numberOfCheques} ${CurrencyEnum.CC}`
+    if (
+      (localPrice.additionalPricePerStay || selectedPackagesPrice) &&
+      localPrice.currency
+    ) {
+      const packagesText = `${localPrice.additionalPricePerStay + selectedPackagesPrice} ${localPrice.currency}`
+      return `${mainProductTitle} + ${packagesText}`
+    }
+  }
+
+  if ("voucher" in selectedRate) {
+    const mainProductText = `${selectedRate.voucher.numberOfVouchers} ${CurrencyEnum.Voucher}`
+    if (selectedPackagesPrice && selectedPackagesCurrency) {
+      const packagesText = `${selectedPackagesPrice} ${selectedPackagesCurrency}`
+      return `${mainProductText} + ${packagesText}`
+    }
+  }
+}
+
+function useRateTitle(rate: RateEnum | undefined) {
+  const intl = useIntl()
+  const freeCancelation = intl.formatMessage({
+    defaultMessage: "Free cancellation",
+  })
+  const nonRefundable = intl.formatMessage({
+    defaultMessage: "Non-refundable",
+  })
+  const freeBooking = intl.formatMessage({
+    defaultMessage: "Free rebooking",
+  })
+  const payLater = intl.formatMessage({
+    defaultMessage: "Pay later",
+  })
+  const payNow = intl.formatMessage({
+    defaultMessage: "Pay now",
+  })
+
+  switch (rate) {
+    case RateEnum.change:
+      return `${freeBooking}, ${payNow}`
+    case RateEnum.flex:
+      return `${freeCancelation}, ${payLater}`
+    case RateEnum.save:
+    default:
+      return `${nonRefundable}, ${payNow}`
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
@@ -0,0 +1,53 @@
+.selectedRoomPanel {
+  display: grid;
+  grid-template-areas: "content image";
+  grid-template-columns: 1fr 190px;
+  position: relative;
+}
+
+.content {
+  grid-area: content;
+}
+
+.imageContainer {
+  border-radius: var(--Corner-radius-sm);
+  display: flex;
+  grid-area: image;
+}
+
+.img {
+  border-radius: var(--Corner-radius-sm);
+  height: auto;
+  max-height: 105px;
+  object-fit: fill;
+  width: 100%;
+}
+
+.modifyButtonContainer {
+  bottom: var(--Spacing-x1);
+  position: absolute;
+  right: var(--Spacing-x1);
+}
+
+div.selectedRoomPanel p.subtitle {
+  padding-bottom: var(--Spacing-x1);
+}
+
+@media screen and (max-width: 767px) {
+  .selectedRoomPanel {
+    gap: var(--Spacing-x1);
+    grid-template-areas: "image" "content";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto;
+  }
+
+  .img {
+    max-height: 300px;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .img {
+    max-height: 190px;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
@@ -0,0 +1,137 @@
+import { useEffect } from "react"
+import { useIntl } from "react-intl"
+
+import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+
+import { SelectedRoomPanel } from "./SelectedRoomPanel"
+import { roomSelectionPanelVariants } from "./variants"
+
+import styles from "./multiRoomWrapper.module.css"
+
+type Props = {
+  children: React.ReactNode
+  isMultiRoom: boolean
+  roomIndex: number
+}
+export function MultiRoomWrapper({ children, isMultiRoom, roomIndex }: Props) {
+  const intl = useIntl()
+
+  const { getTopOffset } = useStickyPosition()
+  const {
+    activeRoomIndex,
+    selectedRates,
+    actions: { setActiveRoom },
+    input: { data },
+  } = useSelectRateContext()
+  const roomNr = roomIndex + 1
+  const adultCount = data?.booking.rooms[roomIndex]?.adults || 0
+  const childCount = data?.booking.rooms[roomIndex]?.childrenInRoom?.length || 0
+  const isActiveRoom = activeRoomIndex === roomIndex
+
+  const roomMsg = intl.formatMessage(
+    {
+      defaultMessage: "Room {roomIndex}",
+    },
+    { roomIndex: roomNr }
+  )
+
+  const adultsMsg = intl.formatMessage(
+    {
+      defaultMessage: "{adults, plural, one {# adult} other {# adults}}",
+    },
+    { adults: adultCount }
+  )
+
+  const childrenMsg = intl.formatMessage(
+    {
+      defaultMessage: "{children, plural, one {# child} other {# children}}",
+    },
+    {
+      children: childCount,
+    }
+  )
+
+  const onlyAdultsMsg = adultsMsg
+  const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
+  const guestsMsg = childCount ? adultsAndChildrenMsg : onlyAdultsMsg
+
+  const title = [roomMsg, guestsMsg].join(", ")
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      const SCROLL_OFFSET = 12 + getTopOffset()
+      const roomElements = document.querySelectorAll(`.${styles.roomContainer}`)
+
+      // If no room is active we will show all rooms collapsed, hence we want
+      // to scroll to the first room.
+      const selectedRoom =
+        activeRoomIndex === -1 ? roomElements[0] : roomElements[activeRoomIndex]
+
+      if (selectedRoom) {
+        const elementPosition = selectedRoom.getBoundingClientRect().top
+        const offsetPosition = elementPosition + window.scrollY - SCROLL_OFFSET
+
+        // Setting a tiny delay for the scrolling. Without it the browser sometimes doesn't scroll up
+        // after modifying the first room.
+        setTimeout(() => {
+          window.scrollTo({
+            top: offsetPosition,
+            behavior: "smooth",
+          })
+        }, 5)
+      }
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeRoomIndex])
+
+  const selectedRate = selectedRates.rateSelectedForRoom(roomIndex)
+
+  if (isMultiRoom) {
+    const classNames = roomSelectionPanelVariants({
+      active: isActiveRoom,
+      selected: !!selectedRate && !isActiveRoom,
+    })
+    return (
+      <div className={styles.roomContainer} data-multiroom="true">
+        <div className={styles.header}>
+          {selectedRate && !isActiveRoom ? null : (
+            <Subtitle color="uiTextHighContrast">{title}</Subtitle>
+          )}
+          {selectedRate && isActiveRoom ? (
+            <Button
+              intent="text"
+              onClick={() => {
+                setActiveRoom("deselect")
+              }}
+              size="medium"
+              theme="base"
+              variant="icon"
+            >
+              {intl.formatMessage({
+                defaultMessage: "Close",
+              })}
+              <MaterialIcon
+                icon="keyboard_arrow_up"
+                size={20}
+                color="CurrentColor"
+              />
+            </Button>
+          ) : null}
+        </div>
+        <div className={classNames}>
+          <div className={styles.roomPanel}>
+            <SelectedRoomPanel roomIndex={roomIndex} />
+          </div>
+          <div className={styles.roomSelectionPanel}>{children}</div>
+        </div>
+      </div>
+    )
+  }
+
+  return children
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css
@@ -0,0 +1,55 @@
+.roomContainer {
+  background: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-lg);
+  display: flex;
+  flex-direction: column;
+  padding: var(--Spacing-x3);
+}
+
+.header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.roomPanel,
+.roomSelectionPanel {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  height: 0;
+  transition:
+    opacity 0.3s ease,
+    grid-template-rows 0.3s ease;
+  transform-origin: bottom;
+}
+
+.roomPanel > * {
+  overflow: hidden;
+}
+
+.roomSelectionPanel {
+  gap: var(--Spacing-x2);
+}
+
+.roomSelectionPanelContainer.active .roomSelectionPanel,
+.roomSelectionPanelContainer.selected .roomPanel {
+  grid-template-rows: 1fr;
+  height: auto;
+  opacity: 1;
+}
+
+.roomSelectionPanelContainer.active .roomPanel {
+  padding-top: var(--Spacing-x1);
+}
+
+.roomSelectionPanelContainer.selected .roomSelectionPanel {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .roomContainer {
+    padding: var(--Spacing-x2);
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/MultiRoomWrapper/variants.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/MultiRoomWrapper/variants.ts
@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./multiRoomWrapper.module.css"
+
+export const roomSelectionPanelVariants = cva(
+  styles.roomSelectionPanelContainer,
+  {
+    variants: {
+      active: {
+        true: styles.active,
+      },
+      selected: {
+        true: styles.selected,
+      },
+    },
+    defaultVariants: {
+      active: false,
+      selected: false,
+    },
+  }
+)
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/NoAvailabilityAlert/alert.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/NoAvailabilityAlert/alert.module.css
@@ -0,0 +1,5 @@
+.hotelAlert {
+  margin: 0 auto;
+  padding: var(--Spacing-x-one-and-half);
+  width: 100%;
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/NoAvailabilityAlert/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/NoAvailabilityAlert/index.tsx
@@ -0,0 +1,118 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { alternativeHotels } from "@scandic-hotels/common/constants/routes/hotelReservation"
+import { AvailabilityEnum } from "@scandic-hotels/trpc/enums/selectHotel"
+import { AlertTypeEnum } from "@scandic-hotels/trpc/types/alertType"
+
+import Alert from "@/components/TempDesignSystem/Alert"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import useLang from "@/hooks/useLang"
+
+import styles from "./alert.module.css"
+
+export default function NoAvailabilityAlert({
+  roomIndex,
+}: {
+  roomIndex: number
+}) {
+  const lang = useLang()
+  const intl = useIntl()
+
+  const { availability, input } = useSelectRateContext()
+  if (availability.isFetching || !availability.data) {
+    return null
+  }
+
+  const indexed = availability.data[roomIndex]
+  const hasAvailabilityError = "error" in indexed
+  if (hasAvailabilityError) {
+    return null
+  }
+
+  const noAvailableRooms = hasAvailableRoomsForRoom(indexed.roomConfigurations)
+
+  const alertLink =
+    roomIndex !== -1 &&
+    (input.data?.booking.rooms.at(roomIndex)?.packages ?? []).length === 0
+      ? {
+          title: intl.formatMessage({
+            defaultMessage: "See alternative hotels",
+          }),
+          url: `${alternativeHotels(lang)}`,
+          keepSearchParams: true,
+        }
+      : null
+
+  if (noAvailableRooms) {
+    const text = intl.formatMessage({
+      defaultMessage: "There are no rooms available that match your request.",
+    })
+    return (
+      <div className={styles.hotelAlert}>
+        <Alert
+          type={AlertTypeEnum.Info}
+          heading={intl.formatMessage({
+            defaultMessage: "No availability",
+          })}
+          text={text}
+          link={alertLink}
+        />
+      </div>
+    )
+  }
+
+  const isPublicPromotionWithCode = indexed.roomConfigurations.some((room) => {
+    const filteredCampaigns = room.campaign.filter(Boolean)
+    return filteredCampaigns.length
+      ? filteredCampaigns.every(
+          (product) => !!product.rateDefinition?.isCampaignRate
+        )
+      : false
+  })
+
+  const noAvailableBookingCodeRooms =
+    !isPublicPromotionWithCode &&
+    indexed.roomConfigurations.every(
+      (room) =>
+        room.status === AvailabilityEnum.NotAvailable || !room.code.length
+    )
+
+  if (input.bookingCode && noAvailableBookingCodeRooms) {
+    const bookingCodeText = intl.formatMessage(
+      {
+        defaultMessage:
+          "We found no available rooms using this booking code ({bookingCode}). See available rates below.",
+      },
+      { bookingCode: input.bookingCode }
+    )
+
+    return (
+      <div className={styles.hotelAlert}>
+        <Alert
+          type={AlertTypeEnum.Info}
+          heading={intl.formatMessage({
+            defaultMessage: "No availability",
+          })}
+          text={bookingCodeText}
+          link={alertLink}
+        />
+      </div>
+    )
+  }
+
+  return null
+}
+
+function hasAvailableRoomsForRoom(
+  roomConfigurations: Extract<
+    NonNullable<
+      ReturnType<typeof useSelectRateContext>["availability"]["data"]
+    >[number],
+    { roomConfigurations: unknown }
+  >["roomConfigurations"]
+) {
+  return roomConfigurations.every(
+    (roomConfig) => roomConfig.status === AvailabilityEnum.NotAvailable
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/bookingCodeFilter.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/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/SelectRate2/RoomsContainer/Rooms/RoomsHeader/BookingCodeFilter/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/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/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RemoveBookingCodeButton/RemoveBookingCodeButton.tsx
@@ -0,0 +1,34 @@
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+
+import BookingCodeChip from "@/components/BookingCodeChip"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+
+export function RemoveBookingCodeButton() {
+  const {
+    input: { bookingCode },
+  } = useSelectRateContext()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const pathname = usePathname()
+
+  if (!bookingCode) {
+    return null
+  }
+
+  return (
+    <BookingCodeChip
+      bookingCode={bookingCode}
+      filledIcon
+      withCloseButton={true}
+      withText={false}
+      onClose={() => {
+        const newSearchParams = new URLSearchParams(searchParams)
+        newSearchParams.delete("bookingCode")
+
+        const url = `${pathname}?${newSearchParams.toString()}`
+
+        router.replace(url)
+      }}
+    />
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/PetRoomMessage/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/PetRoomMessage/index.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import styles from "./petRoom.module.css"
+
+export default function PetRoomMessage({
+  priceData,
+}: {
+  priceData?: { price: number; currency: string }
+}) {
+  const intl = useIntl()
+
+  if (!priceData) {
+    return null
+  }
+
+  return (
+    <Typography variant="Body/Supporting text (caption)/smRegular">
+      <p className={styles.additionalInformation}>
+        {intl.formatMessage(
+          {
+            defaultMessage:
+              "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, priceData.price, priceData.currency),
+          }
+        )}
+      </p>
+    </Typography>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/PetRoomMessage/petRoom.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/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/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/checkbox.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/checkbox.module.css
@@ -0,0 +1,76 @@
+.checkboxGroup {
+  display: grid;
+  gap: var(--Space-x15);
+}
+
+.checkboxWrapper {
+  display: grid;
+  gap: var(--Space-x05);
+}
+
+.checkboxField {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--Space-x15);
+  padding: var(--Space-x1) var(--Space-x15);
+  cursor: pointer;
+  border-radius: var(--Corner-radius-md);
+  transition: background-color 0.3s;
+  color: var(--Text-Default);
+
+  &[data-disabled] {
+    cursor: unset;
+
+    .checkbox {
+      border-color: var(--Border-Interactive-Disabled);
+      background-color: var(--Surface-UI-Fill-Disabled);
+    }
+
+    .text {
+      color: var(--Base-Text-Disabled);
+    }
+  }
+
+  &:hover:not([data-disabled]) {
+    background-color: var(--UI-Input-Controls-Surface-Hover);
+  }
+
+  &[data-focus-visible] .checkbox {
+    /* Used this value as it makes sense from a token name perspective and has a good contrast, but we need to decide for a default ui state */
+    outline: 2px solid var(--Border-Interactive-Focus);
+    outline-offset: 2px;
+  }
+
+  &[data-selected] .checkbox {
+    border-color: var(--Surface-UI-Fill-Active);
+    background-color: var(--Surface-UI-Fill-Active);
+  }
+}
+
+.checkbox {
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  border: 1px solid var(--Border-Interactive-Default);
+  border-radius: var(--Corner-radius-sm);
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--Surface-UI-Fill-Default);
+}
+
+.text {
+  color: var(--Text-Default);
+}
+
+@media screen and (max-width: 767px) {
+  .checkboxField:hover:not([data-disabled]) {
+    background-color: transparent;
+  }
+
+  .checkboxField[data-selected] {
+    background-color: transparent;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/Checkboxes/index.tsx
@@ -0,0 +1,101 @@
+"use client"
+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 { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
+
+import { usePackageLabels } from "../../usePackageLabels"
+import { getIconNameByPackageCode } 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 function PackageCheckboxes({
+  availablePackages,
+}: {
+  availablePackages: {
+    code: RoomPackageCodeEnum
+    message?: ReactNode
+  }[]
+}) {
+  const { control } = useFormContext<FormValues>()
+  const packageLabels = usePackageLabels()
+
+  return (
+    <Controller
+      control={control}
+      name="selectedPackages"
+      render={({ field }) => {
+        const allergyRoomSelected = includesAllergyRoom(field.value)
+        const petRoomSelected = includesPetRoom(field.value)
+        return (
+          <CheckboxGroup {...field} className={styles.checkboxGroup}>
+            {availablePackages?.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 (
+                <div key={option.code} className={styles.checkboxWrapper}>
+                  <Checkbox
+                    key={option.code}
+                    className={styles.checkboxField}
+                    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>{packageLabels[option.code]}</span>
+                    </Typography>
+                    {iconName ? (
+                      <MaterialIcon icon={iconName} color="Icon/Default" />
+                    ) : null}
+                  </Checkbox>
+                  {option.message}
+                </div>
+              )
+            })}
+          </CheckboxGroup>
+        )
+      }}
+    />
+  )
+}
+
+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/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/form.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/form.module.css
@@ -0,0 +1,30 @@
+.footer {
+  padding: 0 var(--Space-x15);
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+}
+
+.divider {
+  margin: var(--Space-x15) 0;
+}
+
+@media screen and (max-width: 767px) {
+  .divider {
+    display: none;
+  }
+  .footer {
+    margin-top: var(--Space-x5);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .buttonContainer {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/formValues.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/formValues.ts
@@ -0,0 +1,5 @@
+import type { PackageEnum } from "@scandic-hotels/trpc/types/packages"
+
+export type FormValues = {
+  selectedPackages: PackageEnum[]
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
@@ -0,0 +1,79 @@
+"use client"
+import { FormProvider, useForm } from "react-hook-form"
+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 { 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 function RoomPackagesForm({
+  close,
+  selectedPackages,
+  onSelectPackages,
+  availablePackages,
+}: {
+  close: () => void
+  availablePackages: {
+    code: RoomPackageCodeEnum
+    message: ReactNode
+  }[]
+  selectedPackages: PackageEnum[]
+  onSelectPackages: (packages: PackageEnum[]) => void
+}) {
+  const intl = useIntl()
+
+  const methods = useForm<FormValues>({
+    values: {
+      selectedPackages: selectedPackages,
+    },
+  })
+
+  function clearSelectedPackages() {
+    onSelectPackages([])
+    close()
+  }
+
+  function onSubmit(data: FormValues) {
+    onSelectPackages(data.selectedPackages)
+    close()
+  }
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <PackageCheckboxes availablePackages={availablePackages} />
+        <div className={styles.footer}>
+          <Divider color="Border/Divider/Subtle" className={styles.divider} />
+          <div className={styles.buttonContainer}>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <Button variant="Tertiary" size="Small" type="submit">
+                {intl.formatMessage({ defaultMessage: "Apply" })}
+              </Button>
+            </Typography>
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <Button
+                onPress={clearSelectedPackages}
+                size="Small"
+                variant="Text"
+              >
+                {intl.formatMessage({
+                  defaultMessage: "Clear",
+                })}
+              </Button>
+            </Typography>
+          </div>
+        </div>
+      </form>
+    </FormProvider>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Modal.tsx
@@ -0,0 +1,76 @@
+import { type ReactNode, useState } from "react"
+import {
+  Dialog,
+  DialogTrigger,
+  Modal,
+  ModalOverlay,
+} from "react-aria-components"
+import { useIntl } from "react-intl"
+
+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 { RoomPackagesForm } from "./Form"
+
+import styles from "./roomPackageFilter.module.css"
+
+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)
+
+  return (
+    <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
+      <ChipButton variant="Outlined">
+        {intl.formatMessage({ defaultMessage: "Special needs" })}
+        <MaterialIcon
+          icon="keyboard_arrow_down"
+          size={20}
+          color="CurrentColor"
+        />
+      </ChipButton>
+
+      <ModalOverlay className={styles.modalOverlay} isDismissable>
+        <Modal className={styles.modal}>
+          <Dialog className={styles.modalDialog}>
+            <div className={styles.header}>
+              <Typography variant="Title/Subtitle/md">
+                <h3>
+                  {intl.formatMessage({ defaultMessage: "Special needs" })}
+                </h3>
+              </Typography>
+              <IconButton
+                theme="Black"
+                style="Muted"
+                onPress={() => setIsOpen(false)}
+              >
+                <MaterialIcon icon="close" size={24} color="CurrentColor" />
+              </IconButton>
+            </div>
+            <RoomPackagesForm
+              close={() => setIsOpen(false)}
+              availablePackages={availablePackages}
+              selectedPackages={selectedPackages}
+              onSelectPackages={onSelectPackages}
+            />
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
+    </DialogTrigger>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Popover.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Popover.tsx
@@ -0,0 +1,53 @@
+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 { RoomPackagesForm } from "./Form"
+
+import styles from "./roomPackageFilter.module.css"
+
+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)
+
+  return (
+    <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
+      <ChipButton variant="Outlined">
+        {intl.formatMessage({ defaultMessage: "Special needs" })}
+        <MaterialIcon
+          icon="keyboard_arrow_down"
+          size={20}
+          color="CurrentColor"
+        />
+      </ChipButton>
+
+      <Popover placement="bottom end" className={styles.popover}>
+        <Dialog>
+          <RoomPackagesForm
+            close={() => setIsOpen(false)}
+            availablePackages={availablePackages}
+            selectedPackages={selectedPackages}
+            onSelectPackages={onSelectPackages}
+          />
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/index.tsx
@@ -0,0 +1,134 @@
+"use client"
+import { Button as ButtonRAC } from "react-aria-components"
+
+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 { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import { useBreakpoint } from "@/hooks/useBreakpoint"
+
+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 function RoomPackageFilter({ roomIndex }: { roomIndex: number }) {
+  const displayAsModal = useBreakpoint("mobile")
+
+  const {
+    getPackagesForRoom,
+    actions: { selectPackages },
+  } = useSelectRateContext()
+
+  const { selectedPackages, availablePackages } = getPackagesForRoom(roomIndex)
+
+  function deletePackage(code: PackageEnum) {
+    selectPackages({
+      roomIndex,
+      packages: selectedPackages
+        .filter((pkg) => pkg.code !== code)
+        .map((pkg) => pkg.code),
+    })
+  }
+
+  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}>
+        {selectedPackages.map((pkg) => (
+          <Typography
+            key={pkg.code}
+            variant="Body/Supporting text (caption)/smRegular"
+          >
+            <span className={styles.selectedPackage}>
+              <MaterialIcon
+                icon={getIconNameByPackageCode(pkg.code)}
+                size={16}
+                color="CurrentColor"
+              />
+              {packageLabels[pkg.code] ?? pkg.description}
+              <ButtonRAC
+                onPress={() => deletePackage(pkg.code)}
+                className={styles.removeButton}
+              >
+                <MaterialIcon icon="close" size={16} color="CurrentColor" />
+              </ButtonRAC>
+            </span>
+          </Typography>
+        ))}
+      </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/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/roomPackageFilter.module.css
@@ -0,0 +1,142 @@
+.roomPackageFilter {
+  display: flex;
+  gap: var(--Space-x1);
+  flex-direction: column-reverse;
+  align-items: flex-start;
+}
+
+.selectedPackages {
+  display: flex;
+  gap: var(--Space-x1);
+  flex-wrap: wrap;
+}
+
+.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);
+}
+
+.dialog {
+  display: grid;
+  gap: var(--Space-x2);
+  max-width: 340px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 var(--Space-x15);
+}
+
+.footer {
+  display: grid;
+  gap: var(--Space-x1);
+  padding: 0 var(--Space-x15);
+}
+
+.selectedPackage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--Space-x1);
+  gap: var(--Space-x05);
+  border-radius: var(--Corner-radius-sm);
+  background-color: var(--Surface-Secondary-Default-dark);
+  color: var(--Text-Interactive-Default);
+}
+
+.removeButton {
+  background-color: transparent;
+  border-width: 0;
+  cursor: pointer;
+  padding: var(--Space-x05);
+  margin: calc(-1 * var(--Space-x05));
+}
+
+@media screen and (max-width: 767px) {
+  .popover {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .roomPackageFilter {
+    flex-direction: row;
+    align-items: stretch;
+  }
+
+  .modalOverlay {
+    display: none;
+  }
+
+  .popover {
+    padding: var(--Space-x2);
+    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;
+    overflow-y: auto;
+  }
+
+  .checkboxContainer {
+    padding: 0 var(--Space-x1);
+  }
+
+  .header {
+    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/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/usePackageLabels.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/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/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/utils.ts
@@ -0,0 +1,19 @@
+import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
+
+import type { MaterialSymbolProps } from "@scandic-hotels/design-system/Icons/MaterialIcon/MaterialSymbol"
+import type { PackageEnum } from "@scandic-hotels/trpc/types/packages"
+
+export function getIconNameByPackageCode(
+  packageCode: PackageEnum
+): MaterialSymbolProps["icon"] {
+  switch (packageCode) {
+    case RoomPackageCodeEnum.PET_ROOM:
+      return "pets"
+    case RoomPackageCodeEnum.ACCESSIBILITY_ROOM:
+      return "accessible"
+    case RoomPackageCodeEnum.ALLERGY_ROOM:
+      return "mode_fan"
+    default:
+      return "star"
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/index.tsx
@@ -0,0 +1,84 @@
+"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 { ErrorBoundary } from "@/components/ErrorBoundary/ErrorBoundary"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+
+import { RemoveBookingCodeButton } from "./RemoveBookingCodeButton/RemoveBookingCodeButton"
+import { RoomPackageFilter } from "./RoomPackageFilter"
+
+import styles from "./roomsHeader.module.css"
+
+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>
+  )
+}
+
+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:
+        "{availableRooms}/{numberOfRooms, plural, one {# room type} other {# room types}} available",
+    },
+    {
+      availableRooms,
+      numberOfRooms: totalRooms,
+    }
+  )
+
+  const allRoomsAvailableText = intl.formatMessage(
+    {
+      defaultMessage:
+        "{numberOfRooms, plural, one {# room type} other {# room types}} available",
+    },
+    {
+      numberOfRooms: totalRooms,
+    }
+  )
+
+  if (isFetching) {
+    return <SkeletonShimmer height="30px" width="25ch" />
+  }
+
+  return (
+    <Typography variant="Title/Subtitle/md" className={styles.availableRooms}>
+      <p>
+        {availableRooms !== totalRooms
+          ? notAllRoomsAvailableText
+          : allRoomsAvailableText}
+      </p>
+    </Typography>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/roomsHeader.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsHeader/roomsHeader.module.css
@@ -0,0 +1,21 @@
+.container {
+  display: grid;
+  gap: var(--Space-x3);
+  align-items: center;
+}
+
+.availableRooms {
+  color: var(--Text-Default);
+}
+
+.filters {
+  display: flex;
+  gap: var(--Space-x1);
+  align-items: flex-start;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    grid-template-columns: 1fr auto;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/RoomSize.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/RoomSize.tsx
@@ -0,0 +1,56 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import type { RoomSizeProps } from "@/types/components/hotelReservation/selectRate/roomListItem"
+
+export default function RoomSize({ roomSize }: RoomSizeProps) {
+  const intl = useIntl()
+
+  if (!roomSize) {
+    return null
+  }
+
+  if (roomSize.min === roomSize.max) {
+    return (
+      <>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          <p>∙</p>
+        </Typography>
+        <Typography variant="Body/Supporting text (caption)/smBold">
+          <h4>
+            {intl.formatMessage(
+              {
+                defaultMessage: "{roomSize} m²",
+              },
+              { roomSize: roomSize.min }
+            )}
+          </h4>
+        </Typography>
+      </>
+    )
+  }
+  return (
+    <>
+      <Typography variant="Body/Supporting text (caption)/smBold">
+        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+        <p>∙</p>
+      </Typography>
+      <Typography variant="Body/Supporting text (caption)/smBold">
+        <h4>
+          {intl.formatMessage(
+            {
+              defaultMessage: "{roomSizeMin} - {roomSizeMax} m²",
+            },
+            {
+              roomSizeMin: roomSize.min,
+              roomSizeMax: roomSize.max,
+            }
+          )}
+        </h4>
+      </Typography>
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import useSidePeekStore from "@/stores/sidepeek"
+
+import styles from "./details.module.css"
+
+import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
+import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
+
+export default function ToggleSidePeek({
+  hotelId,
+  roomTypeCode,
+}: ToggleSidePeekProps) {
+  const intl = useIntl()
+  const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
+
+  return (
+    <Button
+      onClick={() =>
+        openSidePeek({
+          key: SidePeekEnum.roomDetails,
+          hotelId,
+          roomTypeCode,
+        })
+      }
+      size="Small"
+      variant="Text"
+      wrapping
+      typography="Body/Supporting text (caption)/smBold"
+      color="Inverted"
+      className={styles.sidePeekButton}
+    >
+      {intl.formatMessage({ defaultMessage: "View room details" })}
+      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
+    </Button>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/details.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/details.module.css
@@ -0,0 +1,18 @@
+.specification {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  gap: var(--Space-x1);
+}
+
+.roomDetails {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  gap: var(--Space-x1);
+  padding-bottom: var(--Space-x05);
+}
+
+.sidePeekButton {
+  width: 100%;
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/index.tsx
@@ -0,0 +1,56 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import RoomSize from "./RoomSize"
+
+import styles from "./details.module.css"
+
+import type { RoomInfo } from "@/contexts/SelectRate/types"
+
+type Props = {
+  roomInfo: RoomInfo
+}
+
+export default function Details({ roomInfo }: Props) {
+  const intl = useIntl()
+
+  const { name, occupancy, roomSize } = roomInfo || {}
+
+  return (
+    <>
+      <div className={styles.specification}>
+        {occupancy && (
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <h4>
+              {occupancy.max === occupancy.min
+                ? intl.formatMessage(
+                    {
+                      defaultMessage:
+                        "{guests, plural, one {# guest} other {# guests}}",
+                    },
+                    { guests: occupancy.max }
+                  )
+                : intl.formatMessage(
+                    {
+                      defaultMessage: "{min}-{max} guests",
+                    },
+                    {
+                      min: occupancy.min,
+                      max: occupancy.max,
+                    }
+                  )}
+            </h4>
+          </Typography>
+        )}
+        <RoomSize roomSize={roomSize} />
+      </div>
+      <div className={styles.roomDetails}>
+        <Typography variant="Title/Subtitle/lg">
+          <h2>{name}</h2>
+        </Typography>
+      </div>
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/breakfastMessage.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/breakfastMessage.module.css
@@ -0,0 +1,15 @@
+.message {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  gap: var(--Space-x1);
+}
+
+.breakfastMessage {
+  flex: 0 1 auto;
+}
+
+.divider {
+  flex: 1;
+  min-width: 5%;
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/getBreakfastMessage.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/getBreakfastMessage.ts
@@ -0,0 +1,31 @@
+import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"
+
+export function getBreakfastMessage(
+  publicBreakfastIncluded: boolean,
+  memberBreakfastIncluded: boolean,
+  hotelType: string | undefined,
+  userIsLoggedIn: boolean,
+  msgs: Record<
+    "included" | "noSelection" | "scandicgo" | "notIncluded",
+    string
+  >,
+  roomNr: number
+) {
+  if (hotelType === HotelTypeEnum.ScandicGo) {
+    return msgs.scandicgo
+  }
+
+  if (userIsLoggedIn && memberBreakfastIncluded && roomNr === 1) {
+    return msgs.included
+  }
+
+  if (publicBreakfastIncluded && memberBreakfastIncluded) {
+    return msgs.included
+  }
+
+  if (!publicBreakfastIncluded && !memberBreakfastIncluded) {
+    return msgs.notIncluded
+  }
+
+  return msgs.notIncluded
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/index.tsx
@@ -0,0 +1,80 @@
+"use client"
+import { useSession } from "next-auth/react"
+import { useIntl } from "react-intl"
+
+import { BookingCodeFilterEnum } from "@scandic-hotels/booking-flow/stores/bookingCode-filter"
+import { Divider } from "@scandic-hotels/design-system/Divider"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import { isValidClientSession } from "@/utils/clientSession"
+
+import { getBreakfastMessage } from "./getBreakfastMessage"
+
+import styles from "./breakfastMessage.module.css"
+
+export function BreakfastMessage({
+  breakfastIncludedMember,
+  breakfastIncludedStandard,
+  hasRegularRates,
+  roomIndex,
+}: {
+  breakfastIncludedMember: boolean
+  breakfastIncludedStandard: boolean
+  hasRegularRates: boolean
+  roomIndex: number
+}) {
+  const intl = useIntl()
+  const { hotel } = useSelectRateContext()
+  const roomNr = roomIndex + 1
+
+  // TODO: Replace with context value when we have support for dropdown "Show all rates"
+  const selectedFilter = BookingCodeFilterEnum.All as BookingCodeFilterEnum
+  const hotelType = hotel.data?.hotel.hotelType
+
+  const { data: session } = useSession()
+  const isUserLoggedIn = isValidClientSession(session)
+
+  const breakfastMessages = {
+    included: intl.formatMessage({
+      defaultMessage: "Breakfast is included.",
+    }),
+    notIncluded: intl.formatMessage({
+      defaultMessage: "Breakfast excluded, add in next step.",
+    }),
+    noSelection: intl.formatMessage({
+      defaultMessage: "Select a rate",
+    }),
+    scandicgo: intl.formatMessage({
+      defaultMessage: "Breakfast deal can be purchased at the hotel.",
+    }),
+  }
+
+  const breakfastMessage = getBreakfastMessage(
+    breakfastIncludedStandard,
+    breakfastIncludedMember,
+    hotelType,
+    isUserLoggedIn,
+    breakfastMessages,
+    roomNr
+  )
+
+  const isDiscount = selectedFilter === BookingCodeFilterEnum.Discounted
+
+  if (isDiscount || !hasRegularRates) {
+    return null
+  }
+
+  return (
+    <div className={styles.message}>
+      <Divider className={styles.divider} color="Border/Divider/Subtle" />
+      <Typography
+        variant={"Body/Supporting text (caption)/smRegular"}
+        className={styles.breakfastMessage}
+      >
+        <p>{breakfastMessage}</p>
+      </Typography>
+      <Divider className={styles.divider} color="Border/Divider/Subtle" />
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx
@@ -0,0 +1,284 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { BookingCodeFilterEnum } from "@scandic-hotels/booking-flow/stores/bookingCode-filter"
+import CampaignRateCard from "@scandic-hotels/design-system/CampaignRateCard"
+import NoRateAvailableCard from "@scandic-hotels/design-system/NoRateAvailableCard"
+
+import {
+  sumPackages,
+  sumPackagesRequestedPrice,
+} from "@/components/HotelReservation/utils"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import useRateTitles from "@/hooks/booking/useRateTitles"
+import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn"
+
+import { calculatePricePerNightPriceProduct } from "./totalPricePerNight"
+
+import type {
+  AvailabilityWithRoomInfo,
+  Package,
+} from "@/contexts/SelectRate/types"
+
+type CampaignProps = {
+  nights: number
+  campaign: AvailabilityWithRoomInfo["campaign"]
+  roomIndex: number
+  roomTypeCode: string
+  selectedPackages: Package[]
+}
+
+export default function Campaign({
+  campaign,
+  roomIndex,
+  nights,
+  roomTypeCode,
+  selectedPackages,
+}: CampaignProps) {
+  // TODO: Replace with context value when we have support for dropdown "Show all rates"
+  const selectedFilter = BookingCodeFilterEnum.All as BookingCodeFilterEnum
+
+  const isCampaignRate = campaign.some(
+    (c) =>
+      c.rateDefinition.isCampaignRate || c.rateDefinitionMember?.isCampaignRate
+  )
+
+  if (selectedFilter === BookingCodeFilterEnum.Discounted && !isCampaignRate) {
+    return null
+  }
+
+  if (selectedFilter === BookingCodeFilterEnum.Discounted) {
+    campaign = campaign.filter((product) => product.bookingCode)
+  }
+
+  return campaign.map((product, ix) => {
+    return (
+      <Inner
+        key={ix}
+        product={product}
+        nights={nights}
+        roomIndex={roomIndex}
+        roomTypeCode={roomTypeCode}
+        selectedPackages={selectedPackages}
+      />
+    )
+  })
+}
+
+function Inner({
+  product,
+  roomIndex,
+  roomTypeCode,
+  selectedPackages,
+  nights,
+}: {
+  roomIndex: number
+  nights: number
+  roomTypeCode: string
+  product: AvailabilityWithRoomInfo["campaign"][number]
+  selectedPackages: Package[]
+}) {
+  const roomNr = roomIndex + 1
+  const {
+    isRateSelected,
+    actions: { selectRate },
+  } = useSelectRateContext()
+
+  const rateTitles = useRateTitles()
+  const isUserLoggedIn = useIsUserLoggedIn()
+  const intl = useIntl()
+  const night = intl
+    .formatMessage({
+      defaultMessage: "night",
+    })
+    .toUpperCase()
+
+  const standardPriceMsg = intl.formatMessage({
+    defaultMessage: "Standard price",
+  })
+
+  const memberPriceMsg = intl.formatMessage({
+    defaultMessage: "Member price",
+  })
+
+  if (!product.public) {
+    return (
+      <NoRateAvailableCard
+        key={product.rate}
+        noPricesAvailableText={rateTitles.noPriceAvailable}
+        paymentTerm={rateTitles[product.rate].paymentTerm}
+        rateTitle={rateTitles[product.rate].title}
+        variant="Campaign"
+      />
+    )
+  }
+
+  const rateTermDetails = product.rateDefinitionMember
+    ? [
+        {
+          title: product.bookingCode
+            ? product.rateDefinition.title
+            : standardPriceMsg,
+          terms: product.rateDefinition.generalTerms,
+        },
+        {
+          title: product.bookingCode
+            ? product.rateDefinitionMember.title
+            : memberPriceMsg,
+          terms: product.rateDefinitionMember.generalTerms,
+        },
+      ]
+    : [
+        {
+          title: product.bookingCode
+            ? product.rateDefinition.title
+            : standardPriceMsg,
+          terms: product.rateDefinition.generalTerms,
+        },
+      ]
+  const isSelected = isRateSelected({
+    roomIndex,
+    rate: { ...product, type: "campaign" },
+    roomTypeCode,
+  })
+
+  let bannerText = intl.formatMessage({
+    defaultMessage: "Campaign",
+  })
+  if (product.bookingCode) {
+    bannerText = product.bookingCode
+  }
+
+  if (product.rateDefinition.breakfastIncluded) {
+    bannerText = `${bannerText} ∙ ${intl.formatMessage({
+      defaultMessage: "Breakfast included",
+    })}`
+  } else {
+    bannerText = `${bannerText} ∙ ${intl.formatMessage({
+      defaultMessage: "Breakfast excluded",
+    })}`
+  }
+
+  const pkgsSum = sumPackages(selectedPackages)
+  const pkgsSumRequested = sumPackagesRequestedPrice(selectedPackages)
+
+  const pricePerNight = calculatePricePerNightPriceProduct(
+    product.public.localPrice.pricePerNight,
+    product.public.requestedPrice?.pricePerNight,
+    nights,
+    pkgsSum.price,
+    pkgsSumRequested.price
+  )
+
+  const pricePerNightMember = product.member
+    ? calculatePricePerNightPriceProduct(
+        product.member.localPrice.pricePerNight,
+        product.member.requestedPrice?.pricePerNight,
+        nights,
+        pkgsSum.price,
+        pkgsSumRequested.price
+      )
+    : undefined
+
+  const isMainRoom = roomIndex === 0
+  const isMainRoomAndLoggedIn = isMainRoom && isUserLoggedIn
+
+  let approximateRatePrice = undefined
+  if (isMainRoomAndLoggedIn && pricePerNightMember) {
+    approximateRatePrice = pricePerNightMember.totalRequestedPrice
+  } else if (
+    pricePerNight.totalRequestedPrice &&
+    pricePerNightMember?.totalRequestedPrice
+  ) {
+    approximateRatePrice = `${pricePerNight.totalRequestedPrice}/${pricePerNightMember.totalRequestedPrice}`
+  } else if (pricePerNight.totalRequestedPrice) {
+    approximateRatePrice = pricePerNight.totalRequestedPrice
+  }
+
+  const approximateRate =
+    approximateRatePrice && product.public.requestedPrice
+      ? {
+          label: intl.formatMessage({
+            defaultMessage: "Approx.",
+          }),
+          price: approximateRatePrice,
+          unit: product.public.requestedPrice.currency,
+        }
+      : undefined
+
+  const rateCode = isMainRoomAndLoggedIn
+    ? product.member!.rateCode
+    : product.public!.rateCode
+
+  const counterRateCode = isMainRoomAndLoggedIn
+    ? product.public?.rateCode
+    : product.member?.rateCode
+
+  const campaignMemberLabel =
+    product.rateDefinitionMember?.title || memberPriceMsg
+
+  return (
+    <CampaignRateCard
+      key={product.rate}
+      approximateRate={approximateRate}
+      bannerText={bannerText}
+      handleChange={() =>
+        selectRate({
+          roomIndex,
+          rateCode: rateCode,
+          counterRateCode: counterRateCode,
+          roomTypeCode,
+          bookingCode: product.bookingCode,
+        })
+      }
+      isSelected={isSelected}
+      isHighlightedRate={
+        !!product.rateDefinition?.displayPriceRed || isMainRoomAndLoggedIn
+      }
+      memberRate={
+        pricePerNightMember && !isMainRoomAndLoggedIn
+          ? {
+              label: memberPriceMsg,
+              price: pricePerNightMember.totalPrice,
+              unit: `${product.member!.localPrice.currency}/${night}`,
+            }
+          : undefined
+      }
+      comparisonRate={
+        isMainRoomAndLoggedIn
+          ? {
+              price: pricePerNight.totalPrice,
+              unit: product.public.localPrice.currency,
+            }
+          : undefined
+      }
+      name={`rateCode-${roomNr}-${product.public.rateCode}`}
+      paymentTerm={rateTitles[product.rate].paymentTerm}
+      rate={{
+        label: isMainRoomAndLoggedIn ? campaignMemberLabel : standardPriceMsg,
+        price:
+          isMainRoomAndLoggedIn && pricePerNightMember
+            ? pricePerNightMember.totalPrice
+            : pricePerNight.totalPrice,
+
+        unit: `${product.public.localPrice.currency}/${night}`,
+      }}
+      rateTitle={rateTitles[product.rate].title}
+      omnibusRate={
+        product.public.localPrice.omnibusPricePerNight
+          ? {
+              label: intl
+                .formatMessage({
+                  defaultMessage: "Lowest price (last 30 days)",
+                })
+                .toUpperCase(),
+              price: product.public.localPrice.omnibusPricePerNight.toString(),
+              unit: product.public.localPrice.currency,
+            }
+          : undefined
+      }
+      rateTermDetails={rateTermDetails}
+      value={product.public.rateCode}
+    />
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Code.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Code.tsx
@@ -0,0 +1,390 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import CodeRateCard from "@scandic-hotels/design-system/CodeRateCard"
+
+import {
+  sumPackages,
+  sumPackagesRequestedPrice,
+} from "@/components/HotelReservation/utils"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import useRateTitles from "@/hooks/booking/useRateTitles"
+
+import { calculatePricePerNightPriceProduct } from "./totalPricePerNight"
+
+import type { CodeProduct } from "@scandic-hotels/trpc/types/roomAvailability"
+
+import type { Package } from "@/contexts/SelectRate/types"
+
+type CodeProps = {
+  nights: number
+  roomTypeCode: string
+  code: CodeProduct[]
+  roomIndex: number
+  selectedPackages: Package[]
+}
+
+export default function Code({
+  code,
+  nights,
+  roomTypeCode,
+  roomIndex,
+  selectedPackages,
+}: CodeProps) {
+  return code.map((product) => {
+    return (
+      <InnerCode
+        key={product.rate}
+        codeProduct={product}
+        roomIndex={roomIndex}
+        roomTypeCode={roomTypeCode}
+        nights={nights}
+        selectedPackages={selectedPackages}
+      />
+    )
+  })
+}
+
+function InnerCode({
+  codeProduct,
+  roomIndex,
+  roomTypeCode,
+  nights,
+  selectedPackages,
+}: {
+  codeProduct: CodeProduct
+  roomIndex: number
+  roomTypeCode: string
+  nights: number
+  selectedPackages: Package[]
+}) {
+  const {
+    input: { bookingCode },
+    actions: { selectRate },
+    isRateSelected,
+  } = useSelectRateContext()
+
+  function handleSelectRate(rateCode: string) {
+    selectRate({ roomIndex, rateCode, roomTypeCode })
+  }
+
+  const bannerText = useBannerText({
+    bookingCode: bookingCode ?? "",
+    breakfastIncluded: codeProduct.rateDefinition.breakfastIncluded,
+  })
+
+  const pkgsSum = sumPackages(selectedPackages)
+  const pkgsSumRequested = sumPackagesRequestedPrice(selectedPackages)
+
+  const isSelected = isRateSelected({
+    roomIndex,
+    roomTypeCode,
+    rate: { ...codeProduct, type: "code" },
+  })
+
+  if ("corporateCheque" in codeProduct) {
+    return (
+      <CorporateChequeCode
+        codeProduct={codeProduct}
+        roomIndex={roomIndex}
+        roomTypeCode={roomTypeCode}
+        bannerText={bannerText}
+        packagesSum={pkgsSum}
+        handleSelectRate={handleSelectRate}
+        isSelected={isSelected}
+      />
+    )
+  }
+
+  if ("voucher" in codeProduct) {
+    return (
+      <VoucherCode
+        codeProduct={codeProduct}
+        roomIndex={roomIndex}
+        roomTypeCode={roomTypeCode}
+        bannerText={bannerText}
+        packagesSum={pkgsSum}
+        handleSelectRate={handleSelectRate}
+        isSelected={isSelected}
+      />
+    )
+  }
+
+  if (codeProduct.public) {
+    return (
+      <PublicCode
+        codeProduct={codeProduct}
+        roomIndex={roomIndex}
+        roomTypeCode={roomTypeCode}
+        bannerText={bannerText}
+        packagesSum={pkgsSum}
+        packagesSumRequested={pkgsSumRequested}
+        nights={nights}
+        handleSelectRate={handleSelectRate}
+        isSelected={isSelected}
+      />
+    )
+  }
+
+  return null
+}
+
+function useBannerText({
+  bookingCode,
+  breakfastIncluded,
+}: {
+  breakfastIncluded: boolean
+  bookingCode: string
+}) {
+  const intl = useIntl()
+
+  if (breakfastIncluded) {
+    return `${bookingCode} ∙ ${intl.formatMessage({
+      defaultMessage: "Breakfast included",
+    })}`
+  } else {
+    return `${bookingCode} ∙ ${intl.formatMessage({
+      defaultMessage: "Breakfast excluded",
+    })}`
+  }
+}
+
+function CorporateChequeCode({
+  codeProduct,
+  roomIndex,
+  bannerText,
+  packagesSum,
+  handleSelectRate,
+  isSelected,
+}: {
+  codeProduct: Extract<CodeProduct, { corporateCheque: any }>
+  roomIndex: number
+  roomTypeCode: string
+  bannerText: string
+  packagesSum: ReturnType<typeof sumPackages>
+  handleSelectRate: (rateCode: string) => void
+  isSelected: boolean
+}) {
+  const roomNr = roomIndex + 1
+  const intl = useIntl()
+  const rateTitles = useRateTitles()
+  const { localPrice, rateCode, requestedPrice } = codeProduct.corporateCheque
+
+  const rateTermDetails = getRateTermDetails(codeProduct)
+
+  let price = `${localPrice.numberOfCheques} CC`
+
+  if (localPrice.additionalPricePerStay) {
+    price = `${price} + ${localPrice.additionalPricePerStay + packagesSum.price}`
+  } else if (packagesSum.price) {
+    price = `${price} + ${packagesSum.price}`
+  }
+
+  const currency =
+    localPrice.additionalPricePerStay > 0 || packagesSum.price > 0
+      ? (localPrice.currency ?? packagesSum.currency ?? "")
+      : ""
+
+  const approximateRate =
+    requestedPrice?.additionalPricePerStay && requestedPrice?.currency
+      ? {
+          label: intl.formatMessage({
+            defaultMessage: "Approx.",
+          }),
+          price:
+            `${requestedPrice.numberOfCheques} CC + ` +
+            requestedPrice.additionalPricePerStay,
+          unit: requestedPrice.currency,
+        }
+      : undefined
+
+  return (
+    <CodeRateCard
+      key={codeProduct.rate}
+      approximateRate={approximateRate}
+      bannerText={bannerText}
+      handleChange={() =>
+        handleSelectRate(codeProduct.corporateCheque.rateCode)
+      }
+      isSelected={isSelected}
+      name={`rateCode-${roomNr}-${rateCode}`}
+      paymentTerm={rateTitles[codeProduct.rate].paymentTerm}
+      rate={{
+        label: codeProduct.rateDefinition?.title,
+        price,
+        unit: currency,
+      }}
+      rateTitle={rateTitles[codeProduct.rate].title}
+      rateTermDetails={rateTermDetails}
+      value={rateCode}
+    />
+  )
+}
+
+function PublicCode({
+  codeProduct,
+  roomIndex,
+  bannerText,
+  packagesSum,
+  packagesSumRequested,
+  nights,
+  handleSelectRate,
+  isSelected,
+}: {
+  codeProduct: Extract<CodeProduct, { public: unknown }>
+  roomIndex: number
+  roomTypeCode: string
+  bannerText: string
+  packagesSum: ReturnType<typeof sumPackages>
+  packagesSumRequested: ReturnType<typeof sumPackagesRequestedPrice>
+  nights: number
+  handleSelectRate: (rateCode: string) => void
+  isSelected: boolean
+}) {
+  const roomNr = roomIndex + 1
+  const intl = useIntl()
+  const rateTitles = useRateTitles()
+  if (!codeProduct.public) {
+    return null
+  }
+
+  const rateTermDetails = getRateTermDetails(codeProduct)
+
+  const night = intl
+    .formatMessage({
+      defaultMessage: "night",
+    })
+    .toUpperCase()
+
+  const { localPrice, rateCode, requestedPrice } = codeProduct.public
+  const pricePerNight = calculatePricePerNightPriceProduct(
+    localPrice.pricePerNight,
+    requestedPrice?.pricePerNight,
+    nights,
+    packagesSum.price,
+    packagesSumRequested.price
+  )
+
+  const approximateRate =
+    pricePerNight.totalRequestedPrice && requestedPrice?.currency
+      ? {
+          label: intl.formatMessage({
+            defaultMessage: "Approx.",
+          }),
+          price: pricePerNight.totalRequestedPrice,
+          unit: requestedPrice.currency,
+        }
+      : undefined
+
+  const regularPricePerNight = calculatePricePerNightPriceProduct(
+    localPrice.regularPricePerNight,
+    requestedPrice?.regularPricePerNight,
+    nights,
+    packagesSum.price,
+    packagesSumRequested.price
+  )
+
+  const comparisonRate =
+    +regularPricePerNight.totalPrice > +pricePerNight.totalPrice
+      ? {
+          price: regularPricePerNight.totalPrice,
+          unit: localPrice.currency,
+        }
+      : undefined
+
+  return (
+    <CodeRateCard
+      key={codeProduct.rate}
+      approximateRate={approximateRate}
+      bannerText={bannerText}
+      comparisonRate={comparisonRate}
+      handleChange={() => handleSelectRate(codeProduct.public!.rateCode)}
+      isSelected={isSelected}
+      name={`rateCode-${roomNr}-${rateCode}`}
+      paymentTerm={rateTitles[codeProduct.rate].paymentTerm}
+      rate={{
+        label: codeProduct.rateDefinition?.title,
+        price: pricePerNight.totalPrice,
+        unit: `${localPrice.currency}/${night}`,
+      }}
+      rateTitle={rateTitles[codeProduct.rate].title}
+      rateTermDetails={rateTermDetails}
+      value={rateCode}
+    />
+  )
+}
+
+function VoucherCode({
+  codeProduct,
+  bannerText,
+  packagesSum,
+  roomIndex,
+  handleSelectRate,
+  isSelected,
+}: {
+  codeProduct: Extract<CodeProduct, { voucher: any }>
+  roomIndex: number
+  roomTypeCode: string
+  bannerText: string
+  packagesSum: ReturnType<typeof sumPackages>
+  handleSelectRate: (rateCode: string) => void
+  isSelected: boolean
+}) {
+  const roomNr = roomIndex + 1
+  const intl = useIntl()
+  const rateTitles = useRateTitles()
+  const { numberOfVouchers, rateCode } = codeProduct.voucher
+
+  const rateTermDetails = getRateTermDetails(codeProduct)
+
+  const voucherMsg = intl
+    .formatMessage({
+      defaultMessage: "Voucher",
+    })
+    .toUpperCase()
+  let price = `${numberOfVouchers} ${voucherMsg}`
+  if (packagesSum.price) {
+    price = `${price} + ${packagesSum.price}`
+  }
+  return (
+    <CodeRateCard
+      key={codeProduct.rate}
+      bannerText={bannerText}
+      handleChange={() => handleSelectRate(codeProduct.voucher.rateCode)}
+      isSelected={isSelected}
+      name={`rateCode-${roomNr}-${rateCode}`}
+      paymentTerm={rateTitles[codeProduct.rate].paymentTerm}
+      rate={{
+        label: codeProduct.rateDefinition?.title,
+        price,
+        unit: packagesSum.currency ?? "",
+      }}
+      rateTitle={rateTitles[codeProduct.rate].title}
+      rateTermDetails={rateTermDetails}
+      value={rateCode}
+    />
+  )
+}
+
+function getRateTermDetails(codeProduct: CodeProduct): RateTermDetails {
+  return codeProduct.rateDefinitionMember
+    ? [
+        {
+          title: codeProduct.rateDefinition.title,
+          terms: codeProduct.rateDefinition.generalTerms,
+        },
+        {
+          title: codeProduct.rateDefinitionMember.title,
+          terms: codeProduct.rateDefinitionMember.generalTerms,
+        },
+      ]
+    : [
+        {
+          title: codeProduct.rateDefinition.title,
+          terms: codeProduct.rateDefinition.generalTerms,
+        },
+      ]
+}
+
+type RateTermDetails = { title: string; terms: string[] }[]
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Redemptions.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Redemptions.tsx
@@ -0,0 +1,130 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { BookingCodeFilterEnum } from "@scandic-hotels/booking-flow/stores/bookingCode-filter"
+import PointsRateCard from "@scandic-hotels/design-system/PointsRateCard"
+
+import { sumPackages } from "@/components/HotelReservation/utils"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import useRateTitles from "@/hooks/booking/useRateTitles"
+
+import type {
+  AvailabilityWithRoomInfo,
+  Package,
+} from "@/contexts/SelectRate/types"
+
+type RedemptionsProps = {
+  redemptions: AvailabilityWithRoomInfo["redemptions"]
+  roomTypeCode: string
+  selectedPackages: Package[]
+  roomIndex: number
+}
+
+export default function Redemptions({
+  redemptions,
+  roomTypeCode,
+  roomIndex,
+  selectedPackages,
+}: RedemptionsProps) {
+  const intl = useIntl()
+  const rateTitles = useRateTitles()
+  const {
+    actions: { selectRate },
+    selectedRates,
+  } = useSelectRateContext()
+
+  // TODO: Replace with context value when we have support for dropdown "Show all rates"
+  const selectedFilter = BookingCodeFilterEnum.All as BookingCodeFilterEnum
+  const selectedRate = selectedRates.forRoom(roomIndex)
+
+  if (
+    selectedFilter === BookingCodeFilterEnum.Discounted ||
+    !redemptions.length
+  ) {
+    return null
+  }
+
+  const rewardNight = intl.formatMessage({
+    defaultMessage: "Reward night",
+  })
+  const pkgsSum = sumPackages(selectedPackages)
+
+  const breakfastIncluded = intl.formatMessage({
+    defaultMessage: "Breakfast included",
+  })
+  const breakfastExcluded = intl.formatMessage({
+    defaultMessage: "Breakfast excluded",
+  })
+
+  const selectedRateCode =
+    selectedRate &&
+    "redemption" in selectedRate &&
+    selectedRate.roomInfo.roomTypeCode === roomTypeCode
+      ? selectedRate.redemption.rateCode
+      : ""
+
+  const rates = redemptions.map((r) => {
+    let additionalPrice
+    if (r.redemption.localPrice.additionalPricePerStay) {
+      additionalPrice =
+        r.redemption.localPrice.additionalPricePerStay + pkgsSum.price
+    } else if (pkgsSum.price) {
+      additionalPrice = pkgsSum.price
+    }
+    let additionalPriceCurrency
+    if (r.redemption.localPrice.currency) {
+      additionalPriceCurrency = r.redemption.localPrice.currency
+    } else if (pkgsSum.currency) {
+      additionalPriceCurrency = pkgsSum.currency
+    }
+    return {
+      additionalPrice:
+        additionalPrice && additionalPriceCurrency
+          ? {
+              currency: additionalPriceCurrency,
+              price: additionalPrice.toString(),
+            }
+          : undefined,
+      currency: "PTS",
+      isDisabled: !r.redemption.hasEnoughPoints,
+      points: r.redemption.localPrice.pointsPerStay.toString(),
+      rateCode: r.redemption.rateCode,
+    }
+  })
+
+  const notEnoughPoints = rates.every((rate) => rate.isDisabled)
+  const firstRedemption = redemptions[0]
+  const bannerText = firstRedemption.rateDefinition.breakfastIncluded
+    ? `${rewardNight} ∙ ${breakfastIncluded}`
+    : `${rewardNight} ∙ ${breakfastExcluded}`
+
+  const rateTermDetails = [
+    {
+      title: rateTitles[firstRedemption.rate].title,
+      terms: firstRedemption.rateDefinition.generalTerms,
+    },
+  ]
+
+  return (
+    <PointsRateCard
+      key={firstRedemption.rate}
+      bannerText={bannerText}
+      onRateSelect={(rateCode: string) => {
+        selectRate({
+          roomIndex: roomIndex,
+          rateCode: rateCode,
+          roomTypeCode: roomTypeCode,
+        })
+      }}
+      paymentTerm={rateTitles[firstRedemption.rate].paymentTerm}
+      rates={rates}
+      rateTitle={rateTitles[firstRedemption.rate].title}
+      rateTermDetails={rateTermDetails}
+      selectedRate={selectedRateCode}
+      isNotEnoughPoints={notEnoughPoints}
+      notEnoughPointsText={intl.formatMessage({
+        defaultMessage: "Not enough points",
+      })}
+    />
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Regular.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Regular.tsx
@@ -0,0 +1,257 @@
+"use client"
+import { useSession } from "next-auth/react"
+import { useIntl } from "react-intl"
+
+import { BookingCodeFilterEnum } from "@scandic-hotels/booking-flow/stores/bookingCode-filter"
+import NoRateAvailableCard from "@scandic-hotels/design-system/NoRateAvailableCard"
+import RegularRateCard from "@scandic-hotels/design-system/RegularRateCard"
+
+import {
+  sumPackages,
+  sumPackagesRequestedPrice,
+} from "@/components/HotelReservation/utils"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import useRateTitles from "@/hooks/booking/useRateTitles"
+import { isValidClientSession } from "@/utils/clientSession"
+
+import { calculatePricePerNightPriceProduct } from "./totalPricePerNight"
+
+import type { Package } from "@scandic-hotels/trpc/types/packages"
+
+import type { AvailabilityWithRoomInfo } from "@/contexts/SelectRate/types"
+
+interface Rate {
+  label: string
+  price: string
+  unit: string
+}
+
+interface Rates {
+  memberRate?: Rate
+  rate?: Rate
+}
+type RegularRateProps = {
+  nights: number
+  regular: AvailabilityWithRoomInfo["regular"]
+  roomIndex: number
+  roomTypeCode: string
+  selectedPackages: Package[]
+}
+
+export function RegularRate({
+  nights,
+  regular,
+  roomTypeCode,
+  roomIndex,
+  selectedPackages,
+}: RegularRateProps) {
+  const { data: session } = useSession()
+  const isUserLoggedIn = isValidClientSession(session)
+
+  return regular.map((product, ix) => (
+    <Inner
+      key={ix}
+      product={product}
+      isUserLoggedIn={isUserLoggedIn}
+      nights={nights}
+      roomTypeCode={roomTypeCode}
+      roomIndex={roomIndex}
+      selectedPackages={selectedPackages}
+    />
+  ))
+}
+
+function Inner({
+  product,
+  isUserLoggedIn,
+  nights,
+  roomTypeCode,
+  roomIndex,
+  selectedPackages,
+}: {
+  product: AvailabilityWithRoomInfo["regular"][number]
+  isUserLoggedIn: boolean
+  nights: number
+  roomTypeCode: string
+  roomIndex: number
+  selectedPackages: Package[]
+}) {
+  const intl = useIntl()
+
+  const rateTitles = useRateTitles()
+  const {
+    isRateSelected,
+    bookingCodeFilter,
+    actions: { selectRate },
+  } = useSelectRateContext()
+
+  const isMainRoom = roomIndex === 0
+
+  if (bookingCodeFilter === BookingCodeFilterEnum.Discounted) {
+    return null
+  }
+
+  const night = intl
+    .formatMessage({
+      defaultMessage: "night",
+    })
+    .toUpperCase()
+  const pkgsSum = sumPackages(selectedPackages)
+  const pkgsSumRequested = sumPackagesRequestedPrice(selectedPackages)
+
+  const standardPriceMsg = intl.formatMessage({
+    defaultMessage: "Standard price",
+  })
+
+  const memberPriceMsg = intl.formatMessage({
+    defaultMessage: "Member price",
+  })
+
+  const approxMsg = intl.formatMessage({
+    defaultMessage: "Approx.",
+  })
+
+  const { member, public: standard } = product
+  const isMainRoomAndLoggedIn = isMainRoom && isUserLoggedIn
+  const isMainRoomLoggedInWithoutMember =
+    isMainRoomAndLoggedIn && !product.member
+  const noRateAvailable = !product.member && !product.public
+  const hideStandardPrice = isMainRoomAndLoggedIn && !!member
+  const isNotLoggedInAndOnlyMemberRate = !isUserLoggedIn && !standard
+  const rateCode = hideStandardPrice ? member.rateCode : standard?.rateCode
+  const counterRateCode = isMainRoomAndLoggedIn
+    ? standard?.rateCode
+    : member?.rateCode
+
+  if (
+    noRateAvailable ||
+    isMainRoomLoggedInWithoutMember ||
+    !rateCode ||
+    isNotLoggedInAndOnlyMemberRate
+  ) {
+    return (
+      <NoRateAvailableCard
+        key={product.rate}
+        noPricesAvailableText={rateTitles.noPriceAvailable}
+        paymentTerm={rateTitles[product.rate].paymentTerm}
+        rateTitle={rateTitles[product.rate].title}
+        variant="Regular"
+      />
+    )
+  }
+
+  const memberPricePerNight = member
+    ? calculatePricePerNightPriceProduct(
+        member.localPrice.pricePerNight,
+        member.requestedPrice?.pricePerNight,
+        nights,
+        pkgsSum.price,
+        pkgsSumRequested.price
+      )
+    : undefined
+  const standardPricePerNight = standard
+    ? calculatePricePerNightPriceProduct(
+        standard.localPrice.pricePerNight,
+        standard.requestedPrice?.pricePerNight,
+        nights,
+        pkgsSum.price,
+        pkgsSumRequested.price
+      )
+    : undefined
+
+  let approximateMemberRatePrice = null
+  const rates: Rates = {}
+  if (memberPricePerNight) {
+    rates.memberRate = {
+      label: memberPriceMsg,
+      price: memberPricePerNight.totalPrice,
+      unit: `${member!.localPrice.currency}/${night}`,
+    }
+
+    if (memberPricePerNight.totalRequestedPrice) {
+      approximateMemberRatePrice = memberPricePerNight.totalRequestedPrice
+    }
+  }
+
+  let approximateStandardRatePrice = null
+  if (standardPricePerNight) {
+    rates.rate = {
+      label: standardPriceMsg,
+      price: standardPricePerNight.totalPrice,
+      unit: `${standard!.localPrice.currency}/${night}`,
+    }
+
+    if (standardPricePerNight.totalRequestedPrice && !isUserLoggedIn) {
+      approximateStandardRatePrice = standardPricePerNight.totalRequestedPrice
+    }
+  }
+
+  let approximatePrice = ""
+  if (approximateStandardRatePrice && approximateMemberRatePrice) {
+    approximatePrice = `${approximateStandardRatePrice}/${approximateMemberRatePrice}`
+  } else if (approximateStandardRatePrice) {
+    approximatePrice = approximateStandardRatePrice
+  } else if (approximateMemberRatePrice) {
+    approximatePrice = approximateMemberRatePrice
+  }
+
+  const requestedCurrency =
+    standard?.requestedPrice?.currency || member?.requestedPrice?.currency
+  const approximateRate =
+    approximatePrice && requestedCurrency
+      ? {
+          label: approxMsg,
+          price: approximatePrice,
+          unit: requestedCurrency,
+        }
+      : undefined
+
+  const rateTermDetails = product.rateDefinitionMember
+    ? [
+        {
+          title: standardPriceMsg,
+          terms: product.rateDefinition.generalTerms,
+        },
+        {
+          title: memberPriceMsg,
+          terms: product.rateDefinitionMember.generalTerms,
+        },
+      ]
+    : [
+        {
+          title: standardPriceMsg,
+          terms: product.rateDefinition.generalTerms,
+        },
+      ]
+
+  const isSelected = isRateSelected({
+    roomIndex,
+    rate: { ...product, type: "regular" },
+    roomTypeCode,
+  })
+
+  const isMemberRateActive = isUserLoggedIn && isMainRoom && !!member
+
+  return (
+    <RegularRateCard
+      {...rates}
+      key={product.rate}
+      approximateRate={approximateRate}
+      handleChange={() => {
+        selectRate({
+          roomIndex: roomIndex,
+          rateCode: rateCode,
+          roomTypeCode: roomTypeCode,
+          counterRateCode: counterRateCode,
+        })
+      }}
+      isMemberRateActive={isMemberRateActive}
+      isSelected={isSelected}
+      name={`rateCode-${roomIndex + 1}-${rateCode}`}
+      paymentTerm={rateTitles[product.rate].paymentTerm}
+      rateTitle={rateTitles[product.rate].title}
+      value={rateCode}
+      rateTermDetails={rateTermDetails}
+    />
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx
@@ -0,0 +1,67 @@
+"use client"
+
+import { BookingCodeFilterEnum } from "@scandic-hotels/booking-flow/stores/bookingCode-filter"
+import { Divider } from "@scandic-hotels/design-system/Divider"
+
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+
+import { BreakfastMessage } from "./BreakfastMessage"
+import Campaign from "./Campaign"
+import Code from "./Code"
+import Redemptions from "./Redemptions"
+import { RegularRate } from "./Regular"
+
+import type { Package } from "@scandic-hotels/trpc/types/packages"
+
+import type { AvailabilityWithRoomInfo } from "@/contexts/SelectRate/types"
+
+export interface RatesProps {
+  roomConfiguration: AvailabilityWithRoomInfo
+  roomIndex: number
+  selectedPackages: Package[]
+}
+export function Rates({
+  roomConfiguration: {
+    breakfastIncludedInAllRates,
+    breakfastIncludedInAllRatesMember,
+    campaign,
+    code,
+    redemptions,
+    regular,
+    roomTypeCode,
+  },
+  selectedPackages,
+  roomIndex,
+}: RatesProps) {
+  const {
+    bookingCodeFilter,
+    input: { nights },
+  } = useSelectRateContext()
+
+  const sharedProps = {
+    nights,
+    roomTypeCode,
+    roomIndex,
+    selectedPackages,
+  }
+  const showAllRates = bookingCodeFilter === BookingCodeFilterEnum.All
+  const hasBookingCodeRates = !!(campaign.length || code.length)
+  const hasRegularRates = !!regular.length
+  const showDivider = showAllRates && hasBookingCodeRates && hasRegularRates
+
+  return (
+    <>
+      <Code {...sharedProps} code={code} />
+      <Campaign {...sharedProps} campaign={campaign} />
+      <Redemptions {...sharedProps} redemptions={redemptions} />
+      {showDivider ? <Divider color="Border/Divider/Subtle" /> : null}
+      <BreakfastMessage
+        breakfastIncludedMember={breakfastIncludedInAllRatesMember}
+        breakfastIncludedStandard={breakfastIncludedInAllRates}
+        hasRegularRates={hasRegularRates && showAllRates}
+        roomIndex={roomIndex}
+      />
+      <RegularRate {...sharedProps} regular={regular} />
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/isSelected.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/isSelected.ts
@@ -0,0 +1,68 @@
+import type {
+  CorporateChequeProduct,
+  PriceProduct,
+  VoucherProduct,
+} from "@scandic-hotels/trpc/types/roomAvailability"
+
+import type { SelectedRate } from "@/types/stores/rates"
+
+export function isSelectedPriceProduct(
+  product: PriceProduct,
+  selectedRate: SelectedRate | null,
+  roomTypeCode: string
+) {
+  if (!selectedRate || roomTypeCode !== selectedRate.roomTypeCode) {
+    return false
+  }
+
+  const { member, public: standard } = product
+  let isSelected = false
+  if (
+    "member" in selectedRate.product &&
+    selectedRate.product.member &&
+    member
+  ) {
+    isSelected = selectedRate.product.member.rateCode === member.rateCode
+  }
+
+  if (
+    "public" in selectedRate.product &&
+    selectedRate.product.public &&
+    standard
+  ) {
+    isSelected = selectedRate.product.public.rateCode === standard.rateCode
+  }
+
+  return isSelected
+}
+
+export function isSelectedCorporateCheque(
+  product: CorporateChequeProduct,
+  selectedRate: SelectedRate | null,
+  roomTypeCode: string
+) {
+  if (!selectedRate || !("corporateCheque" in selectedRate.product)) {
+    return false
+  }
+
+  const isSameRateCode =
+    product.corporateCheque.rateCode ===
+    selectedRate.product.corporateCheque.rateCode
+  const isSameRoomTypeCode = selectedRate.roomTypeCode === roomTypeCode
+  return isSameRateCode && isSameRoomTypeCode
+}
+
+export function isSelectedVoucher(
+  product: VoucherProduct,
+  selectedRate: SelectedRate | null,
+  roomTypeCode: string
+) {
+  if (!selectedRate || !("voucher" in selectedRate.product)) {
+    return false
+  }
+
+  const isSameRateCode =
+    product.voucher.rateCode === selectedRate.product.voucher.rateCode
+  const isSameRoomTypeCode = selectedRate.roomTypeCode === roomTypeCode
+  return isSameRateCode && isSameRoomTypeCode
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/totalPricePerNight.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/totalPricePerNight.ts
@@ -0,0 +1,27 @@
+export function calculatePricePerNightPriceProduct(
+  pricePerNight: number,
+  requestedPricePerNight: number | undefined,
+  nights: number,
+  packagesSumLocal: number,
+  packagesSumRequested: number
+) {
+  const totalPrice = packagesSumLocal
+    ? Math.floor(pricePerNight + packagesSumLocal / nights)
+    : Math.floor(pricePerNight)
+
+  let totalRequestedPrice = undefined
+  if (requestedPricePerNight) {
+    if (packagesSumRequested) {
+      totalRequestedPrice = Math.floor(
+        requestedPricePerNight + packagesSumRequested / nights
+      )
+    } else {
+      totalRequestedPrice = Math.floor(requestedPricePerNight)
+    }
+  }
+
+  return {
+    totalPrice: totalPrice.toString(),
+    totalRequestedPrice: totalRequestedPrice?.toString(),
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css
@@ -0,0 +1,48 @@
+.imageContainer {
+  margin: 0 calc(-1 * var(--Spacing-x2));
+  min-height: 190px;
+  position: relative;
+  border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
+}
+
+div[data-multiroom="true"] .imageContainer {
+  margin: 0;
+}
+
+.chipContainer {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x1);
+  left: 12px;
+  position: absolute;
+  top: 12px;
+  z-index: 1;
+}
+
+.chip {
+  background-color: var(--Main-Grey-White);
+  border-radius: var(--Corner-radius-sm);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+.imageContainer img {
+  aspect-ratio: 16/9;
+  max-width: 100%;
+  object-fit: cover;
+}
+
+.toggleSidePeek {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  bottom: 0;
+  color: var(--Component-Button-Brand-Secondary-On-fill-Inverted);
+  background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
+  height: 40px;
+  width: 100%;
+}
+
+.inventory {
+  color: var(--Text-Interactive-Default);
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx
@@ -0,0 +1,88 @@
+"use client"
+import { memo } from "react"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { IconForFeatureCode } from "@/components/HotelReservation/utils"
+import ImageGallery from "@/components/ImageGallery"
+import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
+
+import ToggleSidePeek from "../Details/ToggleSidePeek"
+
+import styles from "./image.module.css"
+
+import type { ApiImage } from "@scandic-hotels/trpc/types/hotel"
+import type { PackageEnum } from "@scandic-hotels/trpc/types/packages"
+import type { RoomConfiguration } from "@scandic-hotels/trpc/types/roomAvailability"
+
+export type RoomListItemImageProps = Pick<
+  RoomConfiguration,
+  "roomType" | "roomTypeCode" | "roomsLeft"
+> & {
+  selectedPackages: PackageEnum[]
+  images: ApiImage[]
+  hotelId: string
+}
+
+const RoomImage = memo(function RoomImage({
+  roomsLeft,
+  roomType,
+  roomTypeCode,
+  selectedPackages,
+  images,
+  hotelId,
+}: RoomListItemImageProps) {
+  const galleryImages = mapApiImagesToGalleryImages(images || [])
+
+  return (
+    <div className={styles.imageContainer}>
+      <div className={styles.chipContainer}>
+        <LowInventoryTag roomsLeft={roomsLeft} />
+
+        {selectedPackages.map((pkg) => (
+          <span className={styles.chip} key={pkg}>
+            {IconForFeatureCode({ featureCode: pkg, size: 16 })}
+          </span>
+        ))}
+      </div>
+      <ImageGallery
+        images={galleryImages}
+        title={roomType}
+        fill
+        imageCountPosition="top"
+      />
+      <div className={styles.toggleSidePeek}>
+        {roomTypeCode && (
+          <ToggleSidePeek hotelId={hotelId} roomTypeCode={roomTypeCode} />
+        )}
+      </div>
+    </div>
+  )
+})
+
+export default RoomImage
+
+function LowInventoryTag({ roomsLeft }: { roomsLeft: number }) {
+  const intl = useIntl()
+  const showLowInventory = roomsLeft > 0 && roomsLeft < 5
+
+  if (!showLowInventory) {
+    return null
+  }
+
+  return (
+    <span className={styles.chip}>
+      <Typography variant="Tag/sm">
+        <p className={styles.inventory}>
+          {intl.formatMessage(
+            {
+              defaultMessage: "{amount, number} left",
+            },
+            { amount: roomsLeft }
+          )}
+        </p>
+      </Typography>
+    </span>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
@@ -0,0 +1,27 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import Caption from "@scandic-hotels/design-system/Caption"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import styles from "./notAvailable.module.css"
+
+export default function RoomNotAvailable() {
+  const intl = useIntl()
+  return (
+    <div className={styles.noRoomsContainer}>
+      <div className={styles.noRooms}>
+        <MaterialIcon
+          icon="error_circle_rounded"
+          color="Icon/Feedback/Error"
+          size={16}
+        />
+        <Caption color="uiTextHighContrast" type="bold">
+          {intl.formatMessage({
+            defaultMessage: "This room is not available",
+          })}
+        </Caption>
+      </div>
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/notAvailable.module.css
@@ -0,0 +1,8 @@
+.noRooms {
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-md);
+  display: flex;
+  gap: var(--Spacing-x1);
+  margin: 0;
+  padding: var(--Spacing-x2);
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/index.tsx
@@ -0,0 +1,64 @@
+import { AvailabilityEnum } from "@scandic-hotels/trpc/enums/selectHotel"
+
+import Details from "./Details"
+import { listItemVariants } from "./listItemVariants"
+import { Rates } from "./Rates"
+import RoomImage from "./RoomImage"
+import RoomNotAvailable from "./RoomNotAvailable"
+
+import styles from "./roomListItem.module.css"
+
+import type { Package } from "@scandic-hotels/trpc/types/packages"
+
+import type { AvailabilityWithRoomInfo } from "@/contexts/SelectRate/types"
+
+export type RoomListItemProps = {
+  room: AvailabilityWithRoomInfo
+  selectedPackages: Package[]
+  roomIndex: number
+  hotelId: string
+}
+
+export function RoomListItem({
+  room,
+  selectedPackages,
+  roomIndex,
+  hotelId,
+}: RoomListItemProps) {
+  if (!room || !room.roomInfo) {
+    return null
+  }
+
+  const classNames = listItemVariants({
+    availability:
+      room.status === AvailabilityEnum.NotAvailable
+        ? "noAvailability"
+        : "default",
+  })
+
+  return (
+    <li className={classNames}>
+      <RoomImage
+        roomType={room.roomType}
+        roomTypeCode={room.roomTypeCode}
+        roomsLeft={room.roomsLeft}
+        selectedPackages={selectedPackages.map((pkg) => pkg.code)}
+        images={room.roomInfo.images ?? []}
+        hotelId={hotelId}
+      />
+      <Details roomInfo={room.roomInfo} />
+
+      <div className={styles.container}>
+        {room.status === AvailabilityEnum.NotAvailable ? (
+          <RoomNotAvailable />
+        ) : (
+          <Rates
+            roomConfiguration={room}
+            roomIndex={roomIndex}
+            selectedPackages={selectedPackages}
+          />
+        )}
+      </div>
+    </li>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/listItemVariants.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/listItemVariants.ts
@@ -0,0 +1,12 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./roomListItem.module.css"
+
+export const listItemVariants = cva(styles.listItem, {
+  variants: {
+    availability: {
+      noAvailability: styles.noAvailability,
+      default: "",
+    },
+  },
+})
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomListItem/roomListItem.module.css
@@ -0,0 +1,25 @@
+.listItem {
+  align-content: flex-start;
+  background-color: #fff;
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-lg);
+  display: grid;
+  font-size: 14px;
+  gap: var(--Spacing-x-one-and-half);
+  padding: 0 var(--Spacing-x2) var(--Spacing-x2);
+  position: relative;
+}
+
+div[data-multiroom="true"] .listItem {
+  border: none;
+  padding: 0;
+}
+
+.listItem.noAvailability {
+  opacity: 0.6;
+}
+
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/RoomsListSkeleton.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/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/SelectRate2/RoomsContainer/Rooms/RoomsList/ScrollToList.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/ScrollToList.tsx
@@ -0,0 +1,52 @@
+"use client"
+import { useEffect } from "react"
+
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+
+import styles from "./rooms.module.css"
+
+export default function ScrollToList() {
+  const {
+    input: { isMultiRoom },
+    selectedRates,
+  } = useSelectRateContext()
+  const selectedRateCode = selectedRates.rates[0]
+    ? `${selectedRates.rates[0].rateDefinition.rateCode}${selectedRates.rates[0].roomInfo.roomTypeCode}`
+    : null
+
+  useEffect(() => {
+    if (isMultiRoom) {
+      return
+    }
+
+    if (!selectedRateCode) {
+      return
+    }
+
+    // Required to prevent the history.pushState on the first selection
+    // to scroll user back to top
+    requestAnimationFrame(() => {
+      const SCROLL_OFFSET = 173 // summary on mobile is 163px
+
+      const selectedRateCard: HTMLElement | null = document.querySelector(
+        `.${styles.roomList} label:has(input[type=radio]:checked)`
+      )
+
+      if (selectedRateCard) {
+        const elementPosition = selectedRateCard.getBoundingClientRect().top
+        const windowHeight = window.innerHeight
+        const offsetPosition =
+          elementPosition +
+          window.scrollY -
+          (windowHeight - selectedRateCard.offsetHeight - SCROLL_OFFSET)
+
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: "instant",
+        })
+      }
+    })
+  }, [isMultiRoom, selectedRateCode])
+
+  return null
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/index.tsx
@@ -0,0 +1,41 @@
+"use client"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+
+import { RoomListItem } from "./RoomListItem"
+import { RoomsListSkeleton } from "./RoomsListSkeleton"
+import ScrollToList from "./ScrollToList"
+
+import styles from "./rooms.module.css"
+
+export default function RoomsList({ roomIndex }: { roomIndex: number }) {
+  const { getAvailabilityForRoom, isFetching, input, getPackagesForRoom } =
+    useSelectRateContext()
+
+  if (isFetching) {
+    return <RoomsListSkeleton />
+  }
+
+  const hotelId = input?.data?.booking.hotelId
+  if (!hotelId) {
+    throw new Error("Hotel ID is required to display room availability")
+  }
+
+  return (
+    <>
+      <ScrollToList />
+      <ul className={styles.roomList}>
+        {getAvailabilityForRoom(roomIndex)?.map((room, ix) => {
+          return (
+            <RoomListItem
+              key={room.roomTypeCode + ix}
+              room={room}
+              selectedPackages={getPackagesForRoom(roomIndex).selectedPackages}
+              roomIndex={roomIndex}
+              hotelId={hotelId}
+            />
+          )
+        })}
+      </ul>
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/rooms.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/rooms.module.css
@@ -0,0 +1,11 @@
+.roomList {
+  list-style: none;
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  overflow: hidden;
+}
+
+.roomList > li {
+  width: 100%;
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/RoomsList/roomsListSkeleton.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/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/SelectRate2/RoomsContainer/Rooms/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/index.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+
+import { MultiRoomWrapper } from "./MultiRoomWrapper"
+import NoAvailabilityAlert from "./NoAvailabilityAlert"
+import { RoomsHeader } from "./RoomsHeader"
+import RoomsList from "./RoomsList"
+
+import styles from "./rooms.module.css"
+
+export default function Rooms() {
+  const {
+    availability,
+    input: { isMultiRoom },
+  } = useSelectRateContext()
+
+  if (!availability) {
+    return null
+  }
+
+  return (
+    <div className={styles.content}>
+      {availability.data?.map((_room, idx) => {
+        return (
+          <MultiRoomWrapper
+            key={`${idx}`}
+            roomIndex={idx}
+            isMultiRoom={isMultiRoom}
+          >
+            <RoomsHeader roomIndex={idx} />
+            <NoAvailabilityAlert roomIndex={idx} />
+            <RoomsList roomIndex={idx} />
+          </MultiRoomWrapper>
+        )
+      })}
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/rooms.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate2/RoomsContainer/Rooms/rooms.module.css
@@ -0,0 +1,8 @@
+.content {
+  max-width: var(--max-width-page);
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x5) 0;
+}