Merged in monorepo-step-1 (pull request #1080)

Migrate to a monorepo setup - step 1 * Move web to subfolder /apps/scandic-web * Yarn + transitive deps - Move to yarn - design-system package removed for now since yarn doesn't support the parameter for token (ie project currently broken) - Add missing transitive dependencies as Yarn otherwise prevents these imports - VS Code doesn't pick up TS path aliases unless you open /apps/scandic-web instead of root (will be fixed with monorepo) * Pin framer-motion to temporarily fix typing issue https://github.com/adobe/react-spectrum/issues/7494 * Pin zod to avoid typ error There seems to have been a breaking change in the types returned by zod where error is now returned as undefined instead of missing in the type. We should just handle this but to avoid merge conflicts just pin the dependency for now. * Pin react-intl version Pin version of react-intl to avoid tiny type issue where formatMessage does not accept a generic any more. This will be fixed in a future commit, but to avoid merge conflicts just pin for now. * Pin typescript version Temporarily pin version as newer versions as stricter and results in a type error. Will be fixed in future commit after merge. * Setup workspaces * Add design-system as a monorepo package * Remove unused env var DESIGN_SYSTEM_ACCESS_TOKEN * Fix husky for monorepo setup * Update netlify.toml * Add lint script to root package.json * Add stub readme * Fix react-intl formatMessage types * Test netlify.toml in root * Remove root toml * Update netlify.toml publish path * Remove package-lock.json * Update build for branch/preview builds Approved-by: Linus Flood
2025-02-26 10:36:17 +00:00
parent 667cab6fb6
commit 80100e7631
2731 changed files with 30986 additions and 23708 deletions
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -0,0 +1,115 @@
+"use client"
+import { useSession } from "next-auth/react"
+import { useIntl } from "react-intl"
+
+import { useRatesStore } from "@/stores/select-rate"
+
+import { getRates } from "@/components/HotelReservation/SelectRate/utils"
+import { EditIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Button from "@/components/TempDesignSystem/Button"
+import Chip from "@/components/TempDesignSystem/Chip"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useRoomContext } from "@/contexts/Room"
+import { isValidClientSession } from "@/utils/clientSession"
+
+import styles from "./selectedRoomPanel.module.css"
+
+export default function SelectedRoomPanel() {
+  const intl = useIntl()
+  const { data: session } = useSession()
+  const isUserLoggedIn = isValidClientSession(session)
+  const { rateDefinitions, roomCategories } = useRatesStore((state) => ({
+    rateDefinitions: state.roomsAvailability?.rateDefinitions,
+    roomCategories: state.roomCategories,
+  }))
+  const {
+    actions: { modifyRate },
+    isMainRoom,
+    roomNr,
+    selectedRate,
+  } = useRoomContext()
+
+  const images = roomCategories.find((roomCategory) =>
+    roomCategory.roomTypes.some(
+      (roomType) => roomType.code === selectedRate?.roomTypeCode
+    )
+  )?.images
+
+  if (!rateDefinitions) {
+    return null
+  }
+
+  const rates = getRates(rateDefinitions)
+
+  const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
+  const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
+  const freeBooking = intl.formatMessage({ id: "Free rebooking" })
+  const payLater = intl.formatMessage({ id: "Pay later" })
+  const payNow = intl.formatMessage({ id: "Pay now" })
+
+  function getRateDetails(rateCode: string) {
+    const rate = Object.keys(rates).find((k) =>
+      rates[k as keyof typeof rates].find((a) => a.rateCode === rateCode)
+    )
+
+    switch (rate) {
+      case "change":
+        return `${freeBooking}, ${payNow}`
+      case "flex":
+        return `${freeCancelation}, ${payLater}`
+      case "save":
+      default:
+        return `${nonRefundable}, ${payNow}`
+    }
+  }
+
+  const rate =
+    isUserLoggedIn && isMainRoom && selectedRate?.product.productType.member
+      ? selectedRate?.product.productType.member
+      : selectedRate?.product.productType.public
+
+  return (
+    <div className={styles.selectedRoomPanel}>
+      <div className={styles.content}>
+        <Caption color="uiTextHighContrast">
+          {intl.formatMessage(
+            { id: "Room {roomIndex}" },
+            { roomIndex: roomNr }
+          )}
+        </Caption>
+        <Subtitle className={styles.subtitle} color="uiTextHighContrast">
+          {selectedRate?.roomType}
+        </Subtitle>
+        <Body color="uiTextMediumContrast">
+          {rate?.rateCode ? getRateDetails(rate.rateCode) : null}
+        </Body>
+        <Body color="uiTextHighContrast">
+          {rate?.localPrice.pricePerNight} {rate?.localPrice.currency}/
+          {intl.formatMessage({ id: "night" })}
+        </Body>
+      </div>
+      <div className={styles.imageContainer}>
+        {images?.[0]?.imageSizes?.tiny ? (
+          <Image
+            alt={selectedRate?.roomType ?? images[0].metaData?.altText ?? ""}
+            className={styles.img}
+            height={300}
+            src={images[0].imageSizes.tiny}
+            width={600}
+          />
+        ) : null}
+        <div className={styles.modifyButtonContainer}>
+          <Button clean onClick={modifyRate}>
+            <Chip size="small" variant="uiTextHighContrast">
+              <EditIcon />
+              {intl.formatMessage({ id: "Modify" })}
+            </Chip>
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/selectedRoomPanel.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/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-Small);
+  display: flex;
+  grid-area: image;
+}
+
+.img {
+  border-radius: var(--Corner-radius-Small);
+  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: 768px) {
+  .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/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx
@@ -0,0 +1,105 @@
+import { useEffect } from "react"
+import { useIntl } from "react-intl"
+
+import { useRatesStore } from "@/stores/select-rate"
+
+import { ChevronUpIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useRoomContext } from "@/contexts/Room"
+
+import SelectedRoomPanel from "./SelectedRoomPanel"
+import { roomSelectionPanelVariants } from "./variants"
+
+import styles from "./multiRoomWrapper.module.css"
+
+export default function MultiRoomWrapper({
+  children,
+  isMultiRoom,
+}: React.PropsWithChildren<{ isMultiRoom: boolean }>) {
+  const intl = useIntl()
+  const activeRoom = useRatesStore((state) => state.activeRoom)
+  const {
+    actions: { closeSection },
+    bookingRoom,
+    isActiveRoom,
+    roomNr,
+    selectedRate,
+  } = useRoomContext()
+
+  const onlyAdultsMsg = intl.formatMessage(
+    { id: "{adults} adults" },
+    { adults: bookingRoom.adults }
+  )
+  const adultsAndChildrenMsg = intl.formatMessage(
+    { id: "{adults} adults, {children} children" },
+    {
+      adults: bookingRoom.adults,
+      children: bookingRoom.childrenInRoom?.length,
+    }
+  )
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      const SCROLL_OFFSET = 100
+      const roomElements = document.querySelectorAll(`.${styles.roomContainer}`)
+
+      const selectedRoom = roomElements[activeRoom]
+
+      if (selectedRoom) {
+        const elementPosition = selectedRoom.getBoundingClientRect().top
+        const offsetPosition = elementPosition + window.scrollY - SCROLL_OFFSET
+
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: "smooth",
+        })
+      }
+    })
+  }, [activeRoom])
+
+  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 className={styles.subtitle} color="uiTextHighContrast">
+              {intl.formatMessage(
+                { id: "Room {roomIndex}" },
+                { roomIndex: roomNr }
+              )}
+              ,{" "}
+              {bookingRoom.childrenInRoom?.length
+                ? adultsAndChildrenMsg
+                : onlyAdultsMsg}
+            </Subtitle>
+          )}
+          {selectedRate && isActiveRoom ? (
+            <Button
+              intent="text"
+              onClick={closeSection}
+              size="medium"
+              theme="base"
+              variant="icon"
+            >
+              {intl.formatMessage({ id: "Close" })}
+              <ChevronUpIcon height={20} width={20} />
+            </Button>
+          ) : null}
+        </div>
+        <div className={classNames}>
+          <div className={styles.roomPanel}>
+            <SelectedRoomPanel />
+          </div>
+          <div className={styles.roomSelectionPanel}>{children}</div>
+        </div>
+      </div>
+    )
+  }
+
+  return children
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/multiRoomWrapper.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/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-Large);
+  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: 768px) {
+  .roomContainer {
+    padding: var(--Spacing-x2);
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/variants.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/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/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/PriceList/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/PriceList/index.tsx
@@ -0,0 +1,161 @@
+import { useSearchParams } from "next/navigation"
+import { useSession } from "next-auth/react"
+import { useIntl } from "react-intl"
+
+import { dt } from "@/lib/dt"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useRoomContext } from "@/contexts/Room"
+import { isValidClientSession } from "@/utils/clientSession"
+
+import { calculatePricesPerNight } from "./utils"
+
+import styles from "./priceList.module.css"
+
+import type { PriceListProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
+
+export default function PriceList({
+  publicPrice = {},
+  memberPrice = {},
+  petRoomPackage,
+}: PriceListProps) {
+  const intl = useIntl()
+  const { isMainRoom } = useRoomContext()
+  const { data: session } = useSession()
+  const isUserLoggedIn = isValidClientSession(session)
+
+  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
+    publicPrice
+  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
+    memberPrice
+
+  const petRoomLocalPrice = petRoomPackage?.localPrice
+  const petRoomRequestedPrice = petRoomPackage?.requestedPrice
+
+  const showRequestedPrice =
+    publicRequestedPrice &&
+    memberRequestedPrice &&
+    publicRequestedPrice.currency !== publicLocalPrice.currency
+  const searchParams = useSearchParams()
+  const fromDate = searchParams.get("fromDate")
+  const toDate = searchParams.get("toDate")
+
+  let nights = 1
+
+  if (fromDate && toDate) {
+    nights = dt(toDate).diff(dt(fromDate), "days")
+  }
+
+  const {
+    totalPublicLocalPricePerNight,
+    totalMemberLocalPricePerNight,
+    totalPublicRequestedPricePerNight,
+    totalMemberRequestedPricePerNight,
+  } = calculatePricesPerNight({
+    publicLocalPrice,
+    memberLocalPrice,
+    publicRequestedPrice,
+    memberRequestedPrice,
+    petRoomLocalPrice,
+    petRoomRequestedPrice,
+    nights,
+  })
+
+  return (
+    <dl className={styles.priceList}>
+      {isUserLoggedIn && isMainRoom ? null : (
+        <div className={styles.priceRow}>
+          <dt>
+            <Caption
+              type="bold"
+              color={
+                totalPublicLocalPricePerNight
+                  ? "uiTextHighContrast"
+                  : "disabled"
+              }
+            >
+              {intl.formatMessage({ id: "Standard price" })}
+            </Caption>
+          </dt>
+          <dd>
+            {publicLocalPrice ? (
+              <div className={styles.price}>
+                <Subtitle type="two" color="uiTextHighContrast">
+                  {totalPublicLocalPricePerNight}
+                </Subtitle>
+                <Body color="uiTextHighContrast" textTransform="bold">
+                  {publicLocalPrice.currency}
+                  <span className={styles.perNight}>
+                    /{intl.formatMessage({ id: "night" })}
+                  </span>
+                </Body>
+              </div>
+            ) : (
+              <Subtitle type="two" color="baseTextDisabled">
+                {intl.formatMessage({ id: "N/A" })}
+              </Subtitle>
+            )}
+          </dd>
+        </div>
+      )}
+
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption type="bold" color={memberLocalPrice ? "red" : "disabled"}>
+            {intl.formatMessage({ id: "Member price" })}
+          </Caption>
+        </dt>
+        <dd>
+          {memberLocalPrice ? (
+            <div className={styles.price}>
+              <Subtitle type="two" color="red">
+                {totalMemberLocalPricePerNight}
+              </Subtitle>
+              <Body color="red" textTransform="bold">
+                {memberLocalPrice.currency}
+                <span className={styles.perNight}>
+                  /{intl.formatMessage({ id: "night" })}
+                </span>
+              </Body>
+            </div>
+          ) : (
+            <Body textTransform="bold" color="disabled">
+              -
+            </Body>
+          )}
+        </dd>
+      </div>
+      {showRequestedPrice && (
+        <div className={styles.priceRow}>
+          <dt>
+            <Caption color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}
+            </Caption>
+          </dt>
+          <dd>
+            <Caption color="uiTextMediumContrast">
+              {isUserLoggedIn
+                ? intl.formatMessage(
+                  { id: "{memberPrice} {currency}" },
+                  {
+                    memberPrice: totalMemberRequestedPricePerNight,
+                    currency: publicRequestedPrice.currency,
+                  }
+                )
+                : intl.formatMessage(
+                  { id: "{publicPrice}/{memberPrice} {currency}" },
+                  {
+                    publicPrice: totalPublicRequestedPricePerNight,
+                    memberPrice: totalMemberRequestedPricePerNight,
+                    currency: publicRequestedPrice.currency,
+                  }
+                )}
+            </Caption>
+          </dd>
+        </div>
+      )}
+    </dl>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/PriceList/priceList.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/PriceList/priceList.module.css
@@ -0,0 +1,23 @@
+.priceList {
+  margin: 0;
+}
+
+.priceRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.priceTable {
+  margin: 0;
+}
+
+.price {
+  display: flex;
+  gap: var(--Spacing-x-half);
+}
+
+.perNight {
+  font-weight: 400;
+  font-size: var(--typography-Caption-Regular-fontSize);
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/PriceList/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/PriceList/utils.ts
@@ -0,0 +1,54 @@
+import type { CalculatePricesPerNightProps } from "@/types/components/hotelReservation/selectRate/roomCard"
+
+export function calculatePricesPerNight({
+  publicLocalPrice,
+  memberLocalPrice,
+  publicRequestedPrice,
+  memberRequestedPrice,
+  petRoomLocalPrice,
+  petRoomRequestedPrice,
+  nights,
+}: CalculatePricesPerNightProps) {
+  const totalPublicLocalPricePerNight = publicLocalPrice
+    ? petRoomLocalPrice
+      ? Math.floor(
+          Number(publicLocalPrice.pricePerNight) +
+            Number(petRoomLocalPrice.price) / nights
+        )
+      : Math.floor(Number(publicLocalPrice.pricePerNight))
+    : undefined
+
+  const totalMemberLocalPricePerNight = memberLocalPrice
+    ? petRoomLocalPrice
+      ? Math.floor(
+          Number(memberLocalPrice.pricePerNight) +
+            Number(petRoomLocalPrice.price) / nights
+        )
+      : Math.floor(Number(memberLocalPrice.pricePerNight))
+    : undefined
+
+  const totalPublicRequestedPricePerNight = publicRequestedPrice
+    ? petRoomRequestedPrice
+      ? Math.floor(
+          Number(publicRequestedPrice.pricePerNight) +
+            Number(petRoomRequestedPrice.price) / nights
+        )
+      : Math.floor(Number(publicRequestedPrice.pricePerNight))
+    : undefined
+
+  const totalMemberRequestedPricePerNight = memberRequestedPrice
+    ? petRoomRequestedPrice
+      ? Math.floor(
+          Number(memberRequestedPrice.pricePerNight) +
+            Number(petRoomRequestedPrice.price) / nights
+        )
+      : Math.floor(Number(memberRequestedPrice.pricePerNight))
+    : undefined
+
+  return {
+    totalPublicLocalPricePerNight,
+    totalMemberLocalPricePerNight,
+    totalPublicRequestedPricePerNight,
+    totalMemberRequestedPricePerNight,
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/flexibilityOption.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/flexibilityOption.module.css
@@ -0,0 +1,103 @@
+.card,
+.noPricesCard {
+  border-radius: var(--Corner-radius-Large);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border: 1px solid var(--Base-Surface-Secondary-light-Normal);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+  height: 100%;
+}
+
+.noPricesCard {
+  gap: var(--Spacing-x2);
+}
+
+.noPricesCard:hover {
+  cursor: not-allowed;
+}
+
+.card:hover {
+  cursor: pointer;
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
+
+.checkIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 100px;
+  background-color: var(--UI-Input-Controls-Fill-Selected);
+  border: 2px solid var(--Base-Border-Inverted);
+  justify-content: center;
+  align-items: center;
+  display: none;
+}
+
+input[type="radio"].radio {
+  opacity: 0;
+  position: fixed;
+  width: 0;
+}
+
+input[type="radio"]:checked + .card {
+  border: 1px solid var(--Primary-Dark-On-Surface-Divider);
+  background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
+
+input[type="radio"]:checked + .card .checkIcon {
+  display: flex;
+  position: absolute;
+  top: -10px;
+  right: -10px;
+}
+
+.header {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  align-items: flex-start;
+}
+
+.priceType {
+  display: flex;
+  gap: var(--Spacing-x-half);
+  flex-wrap: wrap;
+}
+
+.button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  grid-area: chevron;
+  height: 100%;
+  justify-self: flex-end;
+  padding: 1px 0 0 0;
+}
+
+.button:focus {
+  outline: none;
+}
+
+.noPricesLabel {
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  text-align: center;
+  background-color: var(--Base-Surface-Subtle-Normal);
+  border-radius: var(--Corner-radius-Rounded);
+  margin: 0 auto var(--Spacing-x2);
+}
+
+.terms {
+  padding-top: var(--Spacing-x3);
+}
+
+.termsText:nth-child(n) {
+  display: flex;
+  align-items: center;
+  padding-bottom: var(--Spacing-x1);
+}
+
+.termsIcon {
+  padding-right: var(--Spacing-x1);
+  flex-shrink: 0;
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/FlexibilityOption/index.tsx
@@ -0,0 +1,134 @@
+"use client"
+import { useSession } from "next-auth/react"
+import { useIntl } from "react-intl"
+
+import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
+import Modal from "@/components/Modal"
+import Button from "@/components/TempDesignSystem/Button"
+import Label from "@/components/TempDesignSystem/Form/Label"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { useRoomContext } from "@/contexts/Room"
+import { isValidClientSession } from "@/utils/clientSession"
+
+import PriceTable from "./PriceList"
+
+import styles from "./flexibilityOption.module.css"
+
+import type { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
+
+export default function FlexibilityOption({
+  features,
+  isSelected,
+  paymentTerm,
+  priceInformation,
+  petRoomPackage,
+  product,
+  roomType,
+  roomTypeCode,
+  title,
+}: FlexibilityOptionProps) {
+  const intl = useIntl()
+  const { data: session } = useSession()
+  const isUserLoggedIn = isValidClientSession(session)
+  const {
+    actions: { selectRate },
+    isMainRoom,
+    roomNr,
+  } = useRoomContext()
+
+  function handleSelect() {
+    if (product) {
+      selectRate({
+        features,
+        product,
+        roomType,
+        roomTypeCode,
+      })
+    }
+  }
+
+  if (!product) {
+    return (
+      <div className={styles.noPricesCard}>
+        <div className={styles.header}>
+          <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
+          <div className={styles.priceType}>
+            <Caption>{title}</Caption>
+            <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          </div>
+        </div>
+        <Label size="regular" className={styles.noPricesLabel}>
+          <Caption color="uiTextHighContrast" type="bold">
+            {intl.formatMessage({ id: "No prices available" })}
+          </Caption>
+        </Label>
+      </div>
+    )
+  }
+
+  const { public: publicPrice, member: memberPrice } = product.productType
+  const rate =
+    isUserLoggedIn && isMainRoom && memberPrice ? memberPrice : publicPrice
+
+  return (
+    <label>
+      <input
+        checked={isSelected}
+        className={styles.radio}
+        name={`rateCode-${roomNr}-${rate.rateCode}`}
+        onChange={handleSelect}
+        type="radio"
+        value={rate.rateCode}
+      />
+      <div className={styles.card}>
+        <div className={styles.header}>
+          <Modal
+            trigger={
+              <Button intent="text">
+                <InfoCircleIcon
+                  width={16}
+                  height={16}
+                  color="uiTextMediumContrast"
+                />
+              </Button>
+            }
+            title={title}
+            subtitle={paymentTerm}
+          >
+            <div className={styles.terms}>
+              {priceInformation?.map((info) => (
+                <Body
+                  key={info}
+                  color="uiTextHighContrast"
+                  className={styles.termsText}
+                >
+                  <CheckIcon
+                    color="uiSemanticSuccess"
+                    width={20}
+                    height={20}
+                    className={styles.termsIcon}
+                  ></CheckIcon>
+                  {info}
+                </Body>
+              ))}
+            </div>
+          </Modal>
+          <div className={styles.priceType}>
+            <Caption color="uiTextHighContrast">{title}</Caption>
+            <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
+          </div>
+        </div>
+        <PriceTable
+          memberPrice={memberPrice}
+          petRoomPackage={petRoomPackage}
+          publicPrice={publicPrice}
+        />
+
+        <div className={styles.checkIcon}>
+          <CheckIcon color="white" height="16" width="16" />
+        </div>
+      </div>
+    </label>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/RoomSize.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/RoomSize.tsx
@@ -0,0 +1,42 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+
+import type { RoomSizeProps } from "@/types/components/hotelReservation/selectRate/roomCard"
+
+export default function RoomSize({ roomSize }: RoomSizeProps) {
+  const intl = useIntl()
+
+  if (!roomSize) {
+    return null
+  }
+
+  if (roomSize.min === roomSize.max) {
+    return (
+      <>
+        <Caption color="uiTextMediumContrast">∙</Caption>
+        <Caption color="uiTextMediumContrast">
+          {intl.formatMessage(
+            { id: "{roomSize} m²" },
+            { roomSize: roomSize.min }
+          )}
+        </Caption>
+      </>
+    )
+  }
+  return (
+    <>
+      <Caption color="uiTextMediumContrast">∙</Caption>
+      <Caption color="uiTextMediumContrast">
+        {intl.formatMessage(
+          { id: "{roomSizeMin} - {roomSizeMax} m²" },
+          {
+            roomSizeMin: roomSize.min,
+            roomSizeMax: roomSize.max,
+          }
+        )}
+      </Caption>
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/cardVariants.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/cardVariants.ts
@@ -0,0 +1,12 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./roomCard.module.css"
+
+export const cardVariants = cva(styles.card, {
+  variants: {
+    availability: {
+      noAvailability: styles.noAvailability,
+      default: "",
+    },
+  },
+})
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/index.tsx
@@ -0,0 +1,322 @@
+"use client"
+
+import { useSession } from "next-auth/react"
+import { createElement } from "react"
+import { useIntl } from "react-intl"
+
+import { useRatesStore } from "@/stores/select-rate"
+
+import ToggleSidePeek from "@/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek"
+import { getRates } from "@/components/HotelReservation/SelectRate/utils"
+import { getIconForFeatureCode } from "@/components/HotelReservation/utils"
+import { ErrorCircleIcon } from "@/components/Icons"
+import ImageGallery from "@/components/ImageGallery"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useRoomContext } from "@/contexts/Room"
+import { isValidClientSession } from "@/utils/clientSession"
+import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
+
+import { cardVariants } from "./cardVariants"
+import FlexibilityOption from "./FlexibilityOption"
+import RoomSize from "./RoomSize"
+
+import styles from "./roomCard.module.css"
+
+import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import type { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
+import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+import { HotelTypeEnum } from "@/types/enums/hotelType"
+import type { Product } from "@/types/trpc/routers/hotel/roomAvailability"
+
+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
+  }
+
+  /** selected and rate does not include breakfast */
+  if (false) {
+    return msgs.notIncluded
+  }
+
+  if (!publicBreakfastIncluded && !memberBreakfastIncluded) {
+    return msgs.notIncluded
+  }
+
+  return msgs.noSelection
+}
+
+export default function RoomCard({ roomConfiguration }: RoomCardProps) {
+  const { data: session } = useSession()
+  const isUserLoggedIn = isValidClientSession(session)
+  const intl = useIntl()
+  const lessThanFiveRoomsLeft =
+    roomConfiguration.roomsLeft > 0 && roomConfiguration.roomsLeft < 5
+
+  const {
+    hotelId,
+    hotelType,
+    petRoomPackage,
+    rateDefinitions,
+    roomCategories,
+  } = useRatesStore((state) => ({
+    hotelId: state.booking.hotelId,
+    hotelType: state.hotelType,
+    petRoomPackage: state.petRoomPackage,
+    rateDefinitions: state.roomsAvailability?.rateDefinitions,
+    roomCategories: state.roomCategories,
+  }))
+  const { isMainRoom, roomNr, selectedPackage, selectedRate } = useRoomContext()
+
+  const classNames = cardVariants({
+    availability:
+      roomConfiguration.status === AvailabilityEnum.NotAvailable
+        ? "noAvailability"
+        : "default",
+  })
+
+  const breakfastMessages = {
+    included: intl.formatMessage({ id: "Breakfast is included." }),
+    notIncluded: intl.formatMessage({
+      id: "Breakfast selection in next step.",
+    }),
+    noSelection: intl.formatMessage({ id: "Select a rate" }),
+    scandicgo: intl.formatMessage({
+      id: "Breakfast deal can be purchased at the hotel.",
+    }),
+  }
+  const breakfastMessage = getBreakfastMessage(
+    roomConfiguration.breakfastIncludedInAllRatesPublic,
+    roomConfiguration.breakfastIncludedInAllRatesMember,
+    hotelType,
+    isUserLoggedIn,
+    breakfastMessages,
+    roomNr
+  )
+
+  if (!rateDefinitions) {
+    return null
+  }
+
+  const rates = getRates(rateDefinitions)
+
+  const petRoomPackageSelected =
+    (selectedPackage === RoomPackageCodeEnum.PET_ROOM && petRoomPackage) ||
+    undefined
+
+  const selectedRoom = roomCategories.find((roomCategory) =>
+    roomCategory.roomTypes.find(
+      (roomType) => roomType.code === roomConfiguration.roomTypeCode
+    )
+  )
+
+  const { images, name, occupancy, roomSize } = selectedRoom || {}
+  const galleryImages = mapApiImagesToGalleryImages(images || [])
+
+  const freeCancelation = intl.formatMessage({ id: "Free cancellation" })
+  const nonRefundable = intl.formatMessage({ id: "Non-refundable" })
+  const freeBooking = intl.formatMessage({ id: "Free rebooking" })
+  const payLater = intl.formatMessage({ id: "Pay later" })
+  const payNow = intl.formatMessage({ id: "Pay now" })
+
+  function getRate(rateCode: string) {
+    switch (rateCode) {
+      case "change":
+        return {
+          isFlex: false,
+          notAvailable: false,
+          title: freeBooking,
+        }
+      case "flex":
+        return {
+          isFlex: true,
+          notAvailable: false,
+          title: freeCancelation,
+        }
+      case "save":
+        return {
+          isFlex: false,
+          notAvailable: false,
+          title: nonRefundable,
+        }
+      default:
+        throw new Error(
+          `Unknown key for rate, should be "change", "flex" or "save", but got ${rateCode}`
+        )
+    }
+  }
+
+  function getRateInfo(product: Product) {
+    if (
+      !product.productType.public.rateCode &&
+      !product.productType.member?.rateCode
+    ) {
+      const possibleRate = getRate(product.productType.public.rate)
+      if (possibleRate) {
+        return {
+          ...possibleRate,
+          notAvailable: true,
+        }
+      }
+      return {
+        isFlex: false,
+        notAvailable: true,
+        title: "",
+      }
+    }
+
+    const publicRate = Object.keys(rates).find((k) =>
+      rates[k as keyof typeof rates].find(
+        (a) => a.rateCode === product.productType.public.rateCode
+      )
+    )
+    let memberRate
+    if (product.productType.member) {
+      memberRate = Object.keys(rates).find((k) =>
+        rates[k as keyof typeof rates].find(
+          (a) => a.rateCode === product.productType.member!.rateCode
+        )
+      )
+    }
+
+    if (!publicRate || !memberRate) {
+      throw new Error("We should never make it where without rateCodes")
+    }
+
+    const key = isUserLoggedIn && isMainRoom ? memberRate : publicRate
+    return getRate(key)
+  }
+
+  return (
+    <li className={classNames}>
+      <div className={styles.imageContainer}>
+        <div className={styles.chipContainer}>
+          {lessThanFiveRoomsLeft ? (
+            <span className={styles.chip}>
+              <Footnote color="burgundy" textTransform="uppercase">
+                {intl.formatMessage(
+                  { id: "{amount, number} left" },
+                  { amount: roomConfiguration.roomsLeft }
+                )}
+              </Footnote>
+            </span>
+          ) : null}
+          {roomConfiguration.features
+            .filter((feature) => selectedPackage === feature.code)
+            .map((feature) => (
+              <span className={styles.chip} key={feature.code}>
+                {createElement(getIconForFeatureCode(feature.code), {
+                  color: "burgundy",
+                  height: 16,
+                  width: 16,
+                })}
+              </span>
+            ))}
+        </div>
+        <ImageGallery
+          images={galleryImages}
+          title={roomConfiguration.roomType}
+          fill
+        />
+      </div>
+
+      <div className={styles.specification}>
+        {occupancy && (
+          <Caption color="uiTextMediumContrast">
+            {occupancy.max === occupancy.min
+              ? intl.formatMessage(
+                  { id: "guests.plural" },
+                  { guests: occupancy.max }
+                )
+              : intl.formatMessage({ id: "guests.span" }, occupancy)}
+          </Caption>
+        )}
+        <RoomSize roomSize={roomSize} />
+        <div className={styles.toggleSidePeek}>
+          {roomConfiguration.roomTypeCode && (
+            <ToggleSidePeek
+              hotelId={hotelId.toString()}
+              roomTypeCode={roomConfiguration.roomTypeCode}
+              title={intl.formatMessage({ id: "Room details" })}
+            />
+          )}
+        </div>
+      </div>
+      <div className={styles.roomDetails}>
+        <Subtitle className={styles.name} type="two">
+          {name}
+        </Subtitle>
+        {/* Out of scope for now
+            <Body>{descriptions?.short}</Body>
+            */}
+      </div>
+
+      <div className={styles.container}>
+        {roomConfiguration.status === AvailabilityEnum.NotAvailable ? (
+          <>
+            {/** The empty div is used to allow for subgrid to align rows */}
+            <div></div>
+            <div className={styles.noRoomsContainer}>
+              <div className={styles.noRooms}>
+                <ErrorCircleIcon color="red" width={16} />
+                <Caption color="uiTextHighContrast" type="bold">
+                  {intl.formatMessage({
+                    id: "This room is not available",
+                  })}
+                </Caption>
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            <Caption color="uiTextHighContrast">{breakfastMessage}</Caption>
+            {roomConfiguration.products.map((product) => {
+              const rate = getRateInfo(product)
+              const isSelectedRateCode =
+                selectedRate?.product.productType.public.rateCode ===
+                  product.productType.public.rateCode ||
+                selectedRate?.product.productType.member?.rateCode ===
+                  product.productType.member?.rateCode
+              return (
+                <FlexibilityOption
+                  key={product.productType.public.rateCode}
+                  features={roomConfiguration.features}
+                  isSelected={
+                    isSelectedRateCode &&
+                    selectedRate?.roomTypeCode ===
+                      roomConfiguration.roomTypeCode
+                  }
+                  paymentTerm={rate.isFlex ? payLater : payNow}
+                  petRoomPackage={petRoomPackageSelected}
+                  product={rate.notAvailable ? undefined : product}
+                  roomType={roomConfiguration.roomType}
+                  roomTypeCode={roomConfiguration.roomTypeCode}
+                  title={rate.title}
+                />
+              )
+            })}
+          </>
+        )}
+      </div>
+    </li>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/roomCard.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomCard/roomCard.module.css
@@ -0,0 +1,100 @@
+.card {
+  background-color: #fff;
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Large);
+  display: grid;
+  font-size: 14px;
+  gap: var(--Spacing-x-one-and-half);
+  grid-row: span 7;
+  grid-template-columns: 1fr;
+  grid-template-rows: subgrid;
+  justify-content: space-between;
+  padding: 0 var(--Spacing-x2) var(--Spacing-x2);
+  position: relative;
+}
+
+div[data-multiroom="true"] .card {
+  border: none;
+  padding: 0;
+}
+
+.card.noAvailability {
+  opacity: 0.6;
+}
+
+.imageContainer {
+  margin: 0 calc(-1 * var(--Spacing-x2));
+  min-height: 190px;
+  position: relative;
+}
+
+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-Small);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+}
+
+.card .imageContainer img {
+  aspect-ratio: 16/9;
+  border-radius: var(--Corner-radius-Medium) var(--Corner-radius-Medium) 0 0;
+  max-width: 100%;
+  object-fit: cover;
+}
+
+.specification {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x1);
+  justify-content: space-between;
+}
+
+.toggleSidePeek {
+  margin-left: auto;
+}
+
+.specification .toggleSidePeek button {
+  padding: 0;
+  text-align: start;
+}
+
+.roomDetails {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+  padding-bottom: var(--Spacing-x-half);
+}
+
+.name {
+  display: inline-block;
+}
+
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-row: span 4;
+  grid-template-rows: subgrid;
+}
+
+.noRooms {
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  display: flex;
+  gap: var(--Spacing-x1);
+  margin: 0;
+  padding: var(--Spacing-x2);
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomTypeFilter/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomTypeFilter/index.tsx
@@ -0,0 +1,71 @@
+"use client"
+import {
+  type Key,
+  ToggleButton,
+  ToggleButtonGroup,
+} from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { useRatesStore } from "@/stores/select-rate"
+
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { useRoomContext } from "@/contexts/Room"
+
+import styles from "./roomFilter.module.css"
+
+import type { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"
+
+export default function RoomTypeFilter() {
+  const filterOptions = useRatesStore((state) => state.filterOptions)
+  const {
+    actions: { selectFilter },
+    rooms,
+    selectedPackage,
+  } = useRoomContext()
+  const intl = useIntl()
+
+  // const tooltipText = intl.formatMessage({
+  //   id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
+  // })
+
+  function handleChange(selectedFilter: Set<Key>) {
+    if (selectedFilter.size) {
+      const selected = selectedFilter.values().next()
+      selectFilter(selected.value as RoomPackageCodeEnum)
+    } else {
+      selectFilter(undefined)
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      <Caption color="uiTextHighContrast">
+        {intl.formatMessage(
+          {
+            id: "{numberOfRooms, plural, one {# room type} other {# room types}} available",
+          },
+          { numberOfRooms: rooms.length }
+        )}
+      </Caption>
+      <ToggleButtonGroup
+        aria-label="Filter"
+        className={styles.roomsFilter}
+        defaultSelectedKeys={selectedPackage ? [selectedPackage] : undefined}
+        onSelectionChange={handleChange}
+        orientation="horizontal"
+      >
+        {filterOptions.map((option) => (
+          <ToggleButton
+            aria-label={option.description}
+            className={styles.radio}
+            id={option.code}
+            key={option.itemCode}
+          >
+            <div className={styles.circle} />
+            <Caption color="uiTextHighContrast">{option.description}</Caption>
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomTypeFilter/roomFilter.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/RoomTypeFilter/roomFilter.module.css
@@ -0,0 +1,70 @@
+.container {
+  align-items: center;
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
+.roomsFilter {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x2);
+  justify-content: flex-start;
+}
+
+.radio {
+  align-items: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+  outline: none;
+  padding: 0;
+}
+
+.circle {
+  border: 1px solid var(--UI-Input-Controls-Border-Normal);
+  border-radius: 50%;
+  grid-area: input;
+  height: 24px;
+  position: relative;
+  transition: background-color 200ms ease;
+  width: 24px;
+}
+
+.radio:hover .circle {
+  background-color: var(--UI-Input-Controls-Fill-Selected-hover);
+}
+
+.radio[data-selected="true"] .circle {
+  background-color: var(--UI-Input-Controls-Fill-Selected);
+}
+
+.radio[data-selected="true"]:hover .circle {
+  background-color: var(--UI-Input-Controls-Fill-Selected-hover);
+  border-color: var(--UI-Input-Controls-Border-Hover);
+}
+
+.radio[data-selected="true"] .circle::after {
+  background-color: var(--Main-Grey-White);
+  border-radius: 50%;
+  content: "";
+  height: 8px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 8px;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    grid-template-columns: auto 1fr;
+  }
+
+  .roomsFilter {
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+  }
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/index.tsx
@@ -0,0 +1,54 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { alternativeHotels } from "@/constants/routes/hotelReservation"
+
+import Alert from "@/components/TempDesignSystem/Alert"
+import { useRoomContext } from "@/contexts/Room"
+import useLang from "@/hooks/useLang"
+
+import RoomCard from "./RoomCard"
+import RoomTypeFilter from "./RoomTypeFilter"
+
+import styles from "./roomSelectionPanel.module.css"
+
+import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
+import { AlertTypeEnum } from "@/types/enums/alert"
+
+export default function RoomSelectionPanel() {
+  const { rooms } = useRoomContext()
+  const intl = useIntl()
+  const lang = useLang()
+  const noAvailableRooms = rooms.every(
+    (roomConfig) => roomConfig.status === AvailabilityEnum.NotAvailable
+  )
+  return (
+    <>
+      {noAvailableRooms ? (
+        <div className={styles.hotelAlert}>
+          <Alert
+            type={AlertTypeEnum.Info}
+            heading={intl.formatMessage({ id: "No availability" })}
+            text={intl.formatMessage({
+              id: "There are no rooms available that match your request.",
+            })}
+            link={{
+              title: intl.formatMessage({ id: "See alternative hotels" }),
+              url: `${alternativeHotels(lang)}`,
+              keepSearchParams: true,
+            }}
+          />
+        </div>
+      ) : null}
+      <RoomTypeFilter />
+      <ul className={styles.roomList}>
+        {rooms.map((roomConfiguration) => (
+          <RoomCard
+            key={roomConfiguration.roomTypeCode}
+            roomConfiguration={roomConfiguration}
+          />
+        ))}
+      </ul>
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/roomSelectionPanel.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomSelectionPanel/roomSelectionPanel.module.css
@@ -0,0 +1,16 @@
+.roomList {
+  list-style: none;
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+}
+
+.roomList > li {
+  width: 100%;
+}
+
+.hotelAlert {
+  width: 100%;
+  margin: 0 auto;
+  padding: var(--Spacing-x-one-and-half);
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/index.tsx
@@ -0,0 +1,69 @@
+"use client"
+import { useEffect } from "react"
+
+import { useRatesStore } from "@/stores/select-rate"
+
+import RoomProvider from "@/providers/RoomProvider"
+import { trackLowestRoomPrice } from "@/utils/tracking"
+
+import MultiRoomWrapper from "./MultiRoomWrapper"
+import RoomSelectionPanel from "./RoomSelectionPanel"
+
+import styles from "./rooms.module.css"
+
+export default function Rooms() {
+  const {
+    arrivalDate,
+    bookingRooms,
+    departureDate,
+    hotelId,
+    rooms,
+    visibleRooms,
+  } = useRatesStore((state) => ({
+    arrivalDate: state.booking.fromDate,
+    bookingRooms: state.booking.rooms,
+    departureDate: state.booking.toDate,
+    hotelId: state.booking.hotelId,
+    rooms: state.rooms,
+    visibleRooms: state.allRooms,
+  }))
+
+  useEffect(() => {
+    const pricesWithCurrencies = visibleRooms.flatMap((room) =>
+      room.products.map((product) => ({
+        price: product.productType.public.localPrice.pricePerNight,
+        currency: product.productType.public.localPrice.currency,
+      }))
+    )
+    const lowestPrice = pricesWithCurrencies.reduce(
+      (minPrice, { price }) => Math.min(minPrice, price),
+      Infinity
+    )
+
+    const currency = pricesWithCurrencies[0]?.currency
+
+    trackLowestRoomPrice({
+      hotelId,
+      arrivalDate,
+      departureDate,
+      lowestPrice: lowestPrice,
+      currency: currency,
+    })
+  }, [arrivalDate, departureDate, hotelId, visibleRooms])
+
+  return (
+    <div className={styles.content}>
+      {bookingRooms.map((room, idx) => (
+        <RoomProvider
+          key={`${room.rateCode}-${room.roomTypeCode}-${idx}`}
+          idx={idx}
+          room={rooms[idx]}
+        >
+          <MultiRoomWrapper isMultiRoom={bookingRooms.length > 1}>
+            <RoomSelectionPanel />
+          </MultiRoomWrapper>
+        </RoomProvider>
+      ))}
+    </div>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/rooms.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/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;
+}