Merge in feat/SW-415-select-room-card (pull request #663)

Feat/SW-415 select room card

.env.test

@@ -42,3 +42,4 @@ GOOGLE_STATIC_MAP_SIGNATURE_SECRET="test"
 GOOGLE_STATIC_MAP_ID="test"
 GOOGLE_DYNAMIC_MAP_ID="test"
 HIDE_FOR_NEXT_RELEASE="true"
+SALESFORCE_PREFERENCE_BASE_URL="test"

app/[lang]/(live)/(public)/hotelreservation/layout.module.css

@@ -1,6 +1,6 @@
 .layout {
   min-height: 100dvh;
+  background-color: var(--Base-Background-Primary-Normal);
   max-width: var(--max-width);
   margin: 0 auto;
-  background-color: var(--Base-Background-Primary-Normal);
 }

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.module.css

@@ -7,13 +7,13 @@
 }
 
 .content {
-  max-width: 1134px;
-  margin-top: var(--Spacing-x5);
+  max-width: 1434px;
   margin-left: auto;
   margin-right: auto;
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   gap: var(--Spacing-x7);
+  padding: var(--Spacing-x2);
 }
 
 .main {

app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx

@@ -15,8 +15,11 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
-  // TODO: Use real endpoint.
-  const hotel = tempHotelData.data.attributes
+  const hotelData = await serverClient().hotel.hotelData.get({
+    hotelId: searchParams.hotel,
+    language: params.lang,
+    include: ["RoomCategories"],
+  })
 
   const roomConfigurations = await serverClient().hotel.availability.rooms({
     hotelId: parseInt(searchParams.hotel, 10),
@@ -24,18 +27,27 @@ export default async function SelectRatePage({
     roomStayEndDate: "2024-11-03",
     adults: 1,
   })
+
   if (!roomConfigurations) {
-    return "No rooms found"
+    return "No rooms found" // TODO: Add a proper error message
   }
 
+  if (!hotelData) {
+    return "No hotel data found" // TODO: Add a proper error message
+  }
+
+  const roomCategories = hotelData?.included
+
   return (
     <div>
-      {/* TODO: Add Hotel Listing Card */}
-      <div>Hotel Listing Card TBI</div>
-
       <div className={styles.content}>
+        {/* TODO: Add Hotel Listing Card */}
+        <div>Hotel Listing Card TBI</div>
         <div className={styles.main}>
-          <RoomSelection roomConfigurations={roomConfigurations} />
+          <RoomSelection
+            roomConfigurations={roomConfigurations}
+            roomCategories={roomCategories ?? []}
+          />
         </div>
       </div>
     </div>

components/ContentType/HotelPage/Rooms/index.tsx

@@ -23,20 +23,20 @@ export function Rooms({ rooms }: RoomsProps) {
 
   const mappedRooms = rooms
     .map((room) => {
-      const size = `${room.attributes.roomSize.min} - ${room.attributes.roomSize.max} m²`
+      const size = `${room.roomSize.min} - ${room.roomSize.max} m²`
       const personLabel =
-        room.attributes.occupancy.total === 1
+        room.occupancy.total === 1
           ? intl.formatMessage({ id: "hotelPages.rooms.roomCard.person" })
           : intl.formatMessage({ id: "hotelPages.rooms.roomCard.persons" })
 
-      const subtitle = `${size} (${room.attributes.occupancy.total} ${personLabel})`
+      const subtitle = `${size} (${room.occupancy.total} ${personLabel})`
 
       return {
         id: room.id,
-        images: room.attributes.content.images,
-        title: room.attributes.name,
+        images: room.images,
+        title: room.name,
         subtitle: subtitle,
-        sortOrder: room.attributes.sortOrder,
+        sortOrder: room.sortOrder,
         popularChoice: null,
       }
     })

components/Forms/BookingWidget/FormContent/Voucher/voucher.module.css

@@ -32,6 +32,10 @@
   display: none;
 }
 
+.infoIcon {
+  stroke: var(--Base-Text-Disabled);
+}
+
 @media screen and (min-width: 768px) {
   .vouchers {
     display: none;

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -1,7 +1,3 @@
-.infoIcon {
-  stroke: var(--Base-Text-Disabled);
-}
-
 .vouchersHeader {
   display: flex;
   gap: var(--Spacing-x-one-and-half);

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx

@@ -0,0 +1,36 @@
+import { Button, Dialog, OverlayArrow, Popover } from "react-aria-components"
+
+import { CloseIcon } from "@/components/Icons"
+
+import styles from "./popover.module.css"
+
+import { PricePopoverProps } from "@/types/components/hotelReservation/selectRate/pricePopover"
+
+export default function PricePopover({
+  children,
+  ...props
+}: PricePopoverProps) {
+  return (
+    <Popover {...props}>
+      <OverlayArrow className={styles.arrow}>
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          style={{ display: "block", transform: "rotate(180deg)" }}
+        >
+          <path d="M0 0L6 6L12 0" fill="white" />
+        </svg>
+      </OverlayArrow>
+      <Dialog>
+        <Button
+          onPress={() => props.onOpenChange?.(false)}
+          className={styles.closeButton}
+        >
+          <CloseIcon className={styles.closeIcon} />
+        </Button>
+        {children}
+      </Dialog>
+    </Popover>
+  )
+}

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/popover.module.css

@@ -0,0 +1,12 @@
+.arrow {
+  top: -6px;
+}
+
+.closeButton {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+}

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx

@@ -0,0 +1,102 @@
+import { useIntl } from "react-intl"
+
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+
+import styles from "./priceList.module.css"
+
+import { PriceListProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
+
+export default function PriceList({
+  publicPrice = {},
+  memberPrice = {},
+}: PriceListProps) {
+  const intl = useIntl()
+
+  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
+    publicPrice
+  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
+    memberPrice
+
+  const showRequestedPrice = publicRequestedPrice && memberRequestedPrice
+
+  return (
+    <dl className={styles.priceList}>
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption
+            textTransform="bold"
+            color={publicLocalPrice ? "uiTextHighContrast" : "disabled"}
+          >
+            {intl.formatMessage({ id: "Standard price" })}
+          </Caption>
+        </dt>
+        <dd>
+          {publicLocalPrice ? (
+            <div className={styles.price}>
+              <Subtitle type="two" color="uiTextHighContrast">
+                {publicLocalPrice.pricePerNight}
+              </Subtitle>
+              <Body color="uiTextHighContrast" textTransform="bold">
+                {publicLocalPrice.currency}
+              </Body>
+            </div>
+          ) : (
+            <Subtitle type="two" color="disabled">
+              {intl.formatMessage({ id: "n/a" })}
+            </Subtitle>
+          )}
+        </dd>
+      </div>
+
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption
+            textTransform="bold"
+            color={memberLocalPrice ? "red" : "disabled"}
+          >
+            {intl.formatMessage({ id: "Member price" })}
+          </Caption>
+        </dt>
+        <dd>
+          {memberLocalPrice ? (
+            <div className={styles.price}>
+              <Subtitle type="two" color="red">
+                {memberLocalPrice.pricePerNight}
+              </Subtitle>
+              <Body color="red" textTransform="bold">
+                {memberLocalPrice.currency}
+              </Body>
+            </div>
+          ) : (
+            <Body textTransform="bold" color="disabled">
+              - {intl.formatMessage({ id: "Currency Code" })}
+            </Body>
+          )}
+        </dd>
+      </div>
+
+      <div className={styles.priceRow}>
+        <dt>
+          <Caption
+            color={showRequestedPrice ? "uiTextMediumContrast" : "disabled"}
+          >
+            {intl.formatMessage({ id: "Approx." })}
+          </Caption>
+        </dt>
+        <dd>
+          {showRequestedPrice ? (
+            <Caption color="uiTextMediumContrast">
+              {publicRequestedPrice.pricePerNight}/
+              {memberRequestedPrice.pricePerNight}{" "}
+              {publicRequestedPrice.currency}
+            </Caption>
+          ) : (
+            <Caption color="disabled">- / - EUR</Caption>
+          )}
+        </dd>
+      </div>
+    </dl>
+  )
+}

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css

@@ -0,0 +1,14 @@
+.priceRow {
+  display: flex;
+  justify-content: space-between;
+  padding: var(--Spacing-x-quarter) 0;
+}
+
+.priceTable {
+  margin: 0;
+}
+
+.price {
+  display: flex;
+  gap: var(--Spacing-x-half);
+}

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css

@@ -1,15 +1,80 @@
-.card {
-  font-size: 14px;
-  border-radius: var(--Corner-radius-Medium);
-  border: 1px solid var(--Base-Border-Normal);
+.card,
+.disabledCard {
+  border-radius: var(--Corner-radius-Large);
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  background-color: var(--Base-Surface-Secondary-light-Normal);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
 }
 
-input[type="radio"]:checked + .card {
+.disabledCard {
+  opacity: 0.6;
+}
+
+.disabledCard:hover {
+  cursor: not-allowed;
+}
+
+.card:hover {
+  cursor: pointer;
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
+.checkIcon {
+  display: none;
+}
+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: block;
+  position: absolute;
+  top: -10px;
+  right: -10px;
+}
 
 .header {
   display: flex;
-  justify-content: space-between;
+  gap: var(--Spacing-x-half);
+}
+
+.header .infoIcon,
+.header .infoIcon path {
+  stroke: var(--UI-Text-Medium-contrast);
+  fill: transparent;
+}
+
+.button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  grid-area: chevron;
+  height: 100%;
+  justify-self: flex-end;
+  padding: 0;
+}
+
+.popover {
+  background-color: var(--Main-Grey-White);
+
+  border-radius: var(--Corner-radius-Medium);
+  left: 0px;
+  max-height: 400px;
+  padding: var(--Spacing-x2);
+  top: calc(55px + var(--Spacing-x1));
+  width: 100%;
+  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
+}
+
+.popover section:focus-visible {
+  outline: none;
+}
+.popover .popoverText {
+  margin-bottom: var(--Spacing-x-half);
+}
+.popover .popoverHeading {
+  margin-bottom: var(--Spacing-x1);
+  font-weight: 600; /* TODO: Remove when this is updated in Design system */
 }

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx

@@ -1,9 +1,13 @@
 "use client"
-import { useIntl } from "react-intl"
+import { useState } from "react"
+import { Button, DialogTrigger } from "react-aria-components"
 
-import Body from "@/components/TempDesignSystem/Text/Body"
+import { CheckCircleIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
+import PricePopover from "./Popover"
+import PriceTable from "./PriceList"
+
 import styles from "./flexibilityOption.module.css"
 
 import { FlexibilityOptionProps } from "@/types/components/hotelReservation/selectRate/flexibilityOption"
@@ -12,59 +16,90 @@ export default function FlexibilityOption({
   product,
   name,
   paymentTerm,
+  priceInformation,
 }: FlexibilityOptionProps) {
-  const intl = useIntl()
+  const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
-  if (!product) {
-    // TODO: Implement empty state when this rate can't be booked
-    return <div>TBI: Rate not available</div>
+  function setRef(node: Element | null) {
+    if (node) {
+      setRootDiv(node)
+    }
   }
 
-  const { productType } = product
-  const { public: publicPrice, member: memberPrice } = productType
-  const { localPrice: publicLocalPrice, requestedPrice: publicRequestedPrice } =
-    publicPrice
-  const { localPrice: memberLocalPrice, requestedPrice: memberRequestedPrice } =
-    memberPrice
+  if (!product) {
+    return (
+      <div className={styles.disabledCard}>
+        <div className={styles.header}>
+          <InfoCircleIcon className={styles.infoIcon} />
+          <Caption color="disabled">{name}</Caption>
+          <Caption color="disabled">({paymentTerm})</Caption>
+        </div>
+        <PriceTable />
+      </div>
+    )
+  }
+
+  const { public: publicPrice, member: memberPrice } = product.productType
 
   return (
     <label>
-      <input
-        type="radio"
-        name="rateCode"
-        value={product.productType.public.rateCode}
-      />
+      <input type="radio" name="rateCode" value={publicPrice?.rateCode} />
       <div className={styles.card}>
-        <div className={styles.header}>
-          <Body>{name}</Body>
-          <Caption>{paymentTerm}</Caption>
+        <div className={styles.header} ref={setRef}>
+          <DialogTrigger>
+            <Button
+              aria-label="Help"
+              className={styles.button}
+              onPress={() => setIsPopoverOpen(true)}
+            >
+              <InfoCircleIcon className={styles.infoIcon} />
+            </Button>
+            <PricePopover
+              placement="bottom"
+              className={styles.popover}
+              isNonModal
+              shouldFlip={false}
+              shouldUpdatePosition={false}
+              /**
+               * react-aria uses portals to render Popover in body
+               * unless otherwise specified. We need it to be contained
+               * by this component to both access css variables assigned
+               * on the container as well as to not overflow it at any time.
+               */
+              UNSTABLE_portalContainer={rootDiv}
+              isOpen={isPopoverOpen}
+              onOpenChange={setIsPopoverOpen}
+            >
+              <Caption
+                color="uiTextHighContrast"
+                textTransform="bold"
+                className={styles.popoverHeading}
+              >
+                {name}
+              </Caption>
+              {priceInformation?.map((info) => (
+                <Caption
+                  key={info}
+                  color="uiTextHighContrast"
+                  className={styles.popoverText}
+                >
+                  {info}
+                </Caption>
+              ))}
+            </PricePopover>
+          </DialogTrigger>
+          <Caption color="uiTextHighContrast">{name}</Caption>
+          <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
         </div>
-        <dl>
-          <div>
-            <dt>{intl.formatMessage({ id: "Standard price" })}</dt>
-            <dd>
-              {publicLocalPrice.pricePerNight} {publicLocalPrice.currency}/
-              {intl.formatMessage({ id: "night" })}
-            </dd>
-          </div>
-          <div>
-            <dt>{intl.formatMessage({ id: "Member price" })}</dt>
-            <dd>
-              {memberLocalPrice.pricePerNight} {memberLocalPrice.currency}/
-              {intl.formatMessage({ id: "night" })}
-            </dd>
-          </div>
-          {publicRequestedPrice && memberRequestedPrice && (
-            <div>
-              <dt>{intl.formatMessage({ id: "Approx." })}</dt>
-              <dd>
-                {publicRequestedPrice.pricePerNight}/
-                {memberRequestedPrice.pricePerNight}{" "}
-                {publicRequestedPrice.currency}
-              </dd>
-            </div>
-          )}
-        </dl>
+        <PriceTable publicPrice={publicPrice} memberPrice={memberPrice} />
+        <CheckCircleIcon
+          color="blue"
+          className={styles.checkIcon}
+          width={24}
+          height={24}
+          stroke="white"
+        />
       </div>
     </label>
   )

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -1,9 +1,14 @@
 "use client"
 import { useIntl } from "react-intl"
 
+import { RateDefinition } from "@/server/routers/hotels/output"
+
 import FlexibilityOption from "@/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption"
+import { ChevronRightSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./roomCard.module.css"
@@ -13,6 +18,7 @@ import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/ro
 export default function RoomCard({
   rateDefinitions,
   roomConfiguration,
+  roomCategories,
 }: RoomCardProps) {
   const intl = useIntl()
 
@@ -29,90 +35,115 @@ export default function RoomCard({
     (rate) => rate.cancellationRule === "CancellableBefore6PM"
   )
 
-  const saveProduct = saveRate
-    ? roomConfiguration.products.find(
-        (product) =>
-          product.productType.public.rateCode === saveRate.rateCode ||
-          product.productType.member.rateCode === saveRate.rateCode
-      )
-    : undefined
-  const changeProduct = changeRate
-    ? roomConfiguration.products.find(
-        (product) =>
-          product.productType.public.rateCode === changeRate.rateCode ||
-          product.productType.member.rateCode === changeRate.rateCode
-      )
-    : undefined
-  const flexProduct = flexRate
-    ? roomConfiguration.products.find(
-        (product) =>
-          product.productType.public.rateCode === flexRate.rateCode ||
-          product.productType.member.rateCode === flexRate.rateCode
-      )
-    : undefined
+  function findProductForRate(rate: RateDefinition | undefined) {
+    return rate
+      ? roomConfiguration.products.find(
+          (product) =>
+            product.productType.public?.rateCode === rate.rateCode ||
+            product.productType.member?.rateCode === rate.rateCode
+        )
+      : undefined
+  }
+
+  function getPriceForRate(
+    rate: typeof saveRate | typeof changeRate | typeof flexRate
+  ) {
+    return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
+      ?.generalTerms
+  }
+
+  const roomSize = roomCategories.find(
+    (category) => category.name === roomConfiguration.roomType
+  )?.roomSize
+
+  const occupancy = roomCategories.find(
+    (category) => category.name === roomConfiguration.roomType
+  )?.occupancy.total
+
+  const roomDescription = roomCategories.find(
+    (room) => room.name === roomConfiguration.roomType
+  )?.descriptions.short
 
   return (
     <div className={styles.card}>
       <div className={styles.cardBody}>
         <div className={styles.specification}>
-          <Subtitle className={styles.name} type="two">
-            {roomConfiguration.roomType}
-          </Subtitle>
-          <Caption>Room size TBI</Caption>
-          <Button intent="text" type="button" size="small" theme="base">
-            {intl.formatMessage({ id: "See room details" })}
-          </Button>
-          <Caption>
+          <Caption color="uiTextMediumContrast" className={styles.guests}>
             {/*TODO: Handle pluralisation*/}
             {intl.formatMessage(
               {
-                id: "Max {nrOfGuests} guests",
-                defaultMessage: "Max {nrOfGuests} guests",
+                id: "booking.guests",
               },
-              // TODO: Correct number
-              { nrOfGuests: 2 }
+              { nrOfGuests: occupancy }
             )}
+          </Caption>
+          <Caption color="uiTextMediumContrast">
+            {roomSize?.min}-{roomSize?.max} m²
+          </Caption>
+          <Button
+            intent="text"
+            type="button"
+            size="small"
+            theme="base"
+            className={styles.button}
+          >
+            {intl.formatMessage({ id: "See room details" })}
+            <ChevronRightSmallIcon color="burgundy" width={20} height={20} />
+          </Button>
+        </div>
+        <div className={styles.container}>
+          <div className={styles.roomDetails}>
+            <Subtitle className={styles.name} type="two">
+              {roomConfiguration.roomType}
+            </Subtitle>
+            <Body>{roomDescription}</Body>
+          </div>
+          <Caption color="uiTextHighContrast">
             {intl.formatMessage({
-              id: "Breakfast included",
+              id: "Breakfast selection in next step.",
             })}
           </Caption>
+          <div>
+            <FlexibilityOption
+              name={intl.formatMessage({ id: "Non-refundable" })}
+              value="non-refundable"
+              paymentTerm={intl.formatMessage({ id: "Pay now" })}
+              product={findProductForRate(saveRate)}
+              priceInformation={getPriceForRate(saveRate)}
+            />
+            <FlexibilityOption
+              name={intl.formatMessage({ id: "Free rebooking" })}
+              value="free-rebooking"
+              paymentTerm={intl.formatMessage({ id: "Pay now" })}
+              product={findProductForRate(changeRate)}
+              priceInformation={getPriceForRate(changeRate)}
+            />
+            <FlexibilityOption
+              name={intl.formatMessage({ id: "Free cancellation" })}
+              value="free-cancellation"
+              paymentTerm={intl.formatMessage({ id: "Pay later" })}
+              product={findProductForRate(flexRate)}
+              priceInformation={getPriceForRate(flexRate)}
+            />
+          </div>
         </div>
-
-        <FlexibilityOption
-          name={intl.formatMessage({ id: "Non-refundable" })}
-          value="non-refundable"
-          paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          product={saveProduct}
-        />
-        <FlexibilityOption
-          name={intl.formatMessage({ id: "Free rebooking" })}
-          value="free-rebooking"
-          paymentTerm={intl.formatMessage({ id: "Pay now" })}
-          product={changeProduct}
-        />
-        <FlexibilityOption
-          name={intl.formatMessage({ id: "Free cancellation" })}
-          value="free-cancellation"
-          paymentTerm={intl.formatMessage({ id: "Pay later" })}
-          product={flexProduct}
-        />
-
-        <Button
-          type="submit"
-          size="small"
-          theme="primaryDark"
-          className={styles.button}
-        >
-          {intl.formatMessage({ id: "Choose room" })}
-        </Button>
       </div>
-      {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
-      {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img
-        alt={intl.formatMessage({ id: "A photo of the room" })}
-        // TODO: Correct image URL
-        src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
-      />
+
+      <div className={styles.imageContainer}>
+        <span className={styles.roomsLeft}>
+          <Footnote
+            color="burgundy"
+            textTransform="uppercase"
+          >{`${roomConfiguration.roomsLeft} ${intl.formatMessage({ id: "Left" })}`}</Footnote>
+        </span>
+        {/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          alt={intl.formatMessage({ id: "A photo of the room" })}
+          // TODO: Correct image URL
+          src="https://www.scandichotels.se/imageVault/publishedmedia/xnmqnmz6mz0uhuat0917/scandic-helsinki-hub-room-standard-KR-7.jpg"
+        />
+      </div>
     </div>
   )
 }

components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css

@@ -3,19 +3,44 @@
   display: flex;
   flex-direction: column-reverse;
   background-color: #fff;
-  border-radius: var(--Corner-radius-Small);
-  border: 1px solid rgba(77, 0, 27, 0.1);
+  border-radius: var(--Corner-radius-Large);
+  border: 1px solid var(--Base-Border-Subtle);
+  position: relative;
 }
 
 .cardBody {
-  padding: var(--Spacing-x1);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
 }
 
 .specification {
-  padding: var(--Spacing-x1);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--Spacing-x1);
+  padding: 0 var(--Spacing-x1) 0 var(--Spacing-x-one-and-half);
+  height: 40px;
+}
+
+.specification .guests {
+  border-right: 1px solid var(--Base-Border-Subtle);
+  padding-right: var(--Spacing-x1);
+}
+
+.specification .button {
+  margin-left: auto;
+  padding: 0 0 0 var(--Spacing-x-half);
+  text-decoration: none;
+}
+
+.container {
+  padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+}
+
+.roomDetails {
   display: flex;
   flex-direction: column;
   gap: var(--Spacing-x1);
@@ -25,12 +50,18 @@
   display: inline-block;
 }
 
-.card .button {
-  display: inline;
-}
-
 .card img {
   max-width: 100%;
-  aspect-ratio: 1.5;
+  aspect-ratio: 16/9;
   object-fit: cover;
+  border-radius: var(--Corner-radius-Medium) var(--Corner-radius-Medium) 0 0;
+}
+
+.roomsLeft {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background-color: var(--Main-Grey-White);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  border-radius: var(--Corner-radius-Small);
 }

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -12,6 +12,7 @@ import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRa
 
 export default function RoomSelection({
   roomConfigurations,
+  roomCategories,
 }: RoomSelectionProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
@@ -38,6 +39,7 @@ export default function RoomSelection({
               <RoomCard
                 rateDefinitions={roomConfigurations.rateDefinitions}
                 roomConfiguration={roomConfiguration}
+                roomCategories={roomCategories}
               />
             </li>
           ))}

components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css

@@ -1,5 +1,4 @@
 .wrapper {
-  border-bottom: 1px solid rgba(17, 17, 17, 0.2);
   padding-bottom: var(--Spacing-x3);
 }
 
@@ -7,9 +6,8 @@
   margin-top: var(--Spacing-x4);
   list-style: none;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  column-gap: var(--Spacing-x2);
-  row-gap: var(--Spacing-x4);
+  grid-template-columns: 1fr;
+  gap: var(--Spacing-x3);
 }
 
 .roomList > li {
@@ -30,3 +28,15 @@
   background-color: white;
   padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
 }
+
+@media (min-width: 767px) {
+  .roomList {
+    grid-template-columns: repeat(3, minmax(240px, 1fr));
+  }
+}
+
+@media (min-width: 1367px) {
+  .roomList {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}

components/TempDesignSystem/Text/Body/body.module.css

@@ -99,3 +99,7 @@
 .uiTextPlaceholder {
   color: var(--UI-Text-Placeholder);
 }
+
+.disabled {
+  color: var(--Base-Text-Disabled);
+}

components/TempDesignSystem/Text/Body/variants.ts

@@ -7,6 +7,7 @@ const config = {
     color: {
       black: styles.black,
       burgundy: styles.burgundy,
+      disabled: styles.disabled,
       grey: styles.grey,
       pale: styles.pale,
       red: styles.red,

components/TempDesignSystem/Text/Caption/caption.module.css

@@ -75,6 +75,10 @@ p.caption {
   color: var(--UI-Text-High-contrast);
 }
 
+.uiTextPlaceholder {
+  color: var(--UI-Text-Placeholder);
+}
+
 .disabled {
   color: var(--Base-Text-Disabled);
 }

components/TempDesignSystem/Text/Caption/variants.ts

@@ -15,6 +15,7 @@ const config = {
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextActive: styles.uiTextActive,
       uiTextMediumContrast: styles.uiTextMediumContrast,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
       disabled: styles.disabled,
     },
     textTransform: {

components/TempDesignSystem/Text/Subtitle/subtitle.module.css

@@ -66,3 +66,11 @@
 .uiTextMediumContrast {
   color: var(--UI-Text-Medium-contrast);
 }
+
+.red {
+  color: var(--Scandic-Brand-Scandic-Red);
+}
+
+.disabled {
+  color: var(--Base-Text-Disabled);
+}

components/TempDesignSystem/Text/Subtitle/variants.ts

@@ -7,9 +7,11 @@ const config = {
     color: {
       black: styles.black,
       burgundy: styles.burgundy,
+      disabled: styles.disabled,
       pale: styles.pale,
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextMediumContrast: styles.uiTextMediumContrast,
+      red: styles.red,
     },
     textAlign: {
       center: styles.center,

constants/routes/hotelReservation.js

@@ -18,6 +18,16 @@ export const selectHotel = {
   de: `${hotelReservation.de}/select-hotel`,
 }
 
+// TODO: Translate paths
+export const selectRate = {
+  en: `${hotelReservation.en}/select-rate`,
+  sv: `${hotelReservation.sv}/select-rate`,
+  no: `${hotelReservation.no}/select-rate`,
+  fi: `${hotelReservation.fi}/select-rate`,
+  da: `${hotelReservation.da}/select-rate`,
+  de: `${hotelReservation.de}/select-rate`,
+}
+
 // TODO: Translate paths
 export const selectBed = {
   en: `${hotelReservation.en}/select-bed`,
@@ -86,4 +96,5 @@ export const bookingFlow = [
   ...Object.values(payment),
   ...Object.values(selectHotelMap),
   ...Object.values(bookingConfirmation),
+  ...Object.values(selectRate),
 ]

i18n/dictionaries/da.json

@@ -34,6 +34,7 @@
   "Book reward night": "Book bonusnat",
   "Booking number": "Bookingnummer",
   "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
+  "booking.guests": "Maks {nrOfGuests, plural, one {# gæst} other {# gæster}}",
   "booking.nights": "{totalNights, plural, one {# nat} other {# nætter}}",
   "booking.rooms": "{totalRooms, plural, one {# værelse} other {# værelser}}",
   "booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
@@ -42,6 +43,7 @@
   "Breakfast excluded": "Morgenmad ikke inkluderet",
   "Breakfast included": "Morgenmad inkluderet",
   "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Valg af morgenmad i næste trin.",
   "Bus terminal": "Busstation",
   "Business": "Forretning",
   "by": "inden",
@@ -74,6 +76,7 @@
   "Country code": "Landekode",
   "Credit card": "Kreditkort",
   "Credit card deleted successfully": "Kreditkort blev slettet",
+  "Currency Code": "DKK",
   "Current password": "Nuværende kodeord",
   "Customer service": "Kundeservice",
   "Date of Birth": "Fødselsdato",
@@ -140,6 +143,7 @@
   "Language": "Sprog",
   "Lastname": "Efternavn",
   "Latest searches": "Seneste søgninger",
+  "Left": "tilbage",
   "Level": "Niveau",
   "Level 1": "Niveau 1",
   "Level 2": "Niveau 2",
@@ -197,6 +201,7 @@
   "Not found": "Ikke fundet",
   "Nr night, nr adult": "{nights, number} nat, {adults, number} voksen",
   "number": "nummer",
+  "n/a": "n/a",
   "On your journey": "På din rejse",
   "Open": "Åben",
   "Open language menu": "Åbn sprogmenuen",
@@ -240,6 +245,8 @@
   "Room & Terms": "Værelse & Vilkår",
   "Room facilities": "Værelsesfaciliteter",
   "Rooms": "Værelser",
+  "guest": "gæst",
+  "guests": "gæster",
   "Rooms & Guests": "Værelser & gæster",
   "Sauna and gym": "Sauna and gym",
   "Save": "Gemme",
@@ -285,7 +292,6 @@
   "There are no transactions to display": "Der er ingen transaktioner at vise",
   "Things nearby HOTEL_NAME": "Ting i nærheden af {hotelName}",
   "to": "til",
-  "Total incl VAT": "Inkl. moms",
   "Total Points": "Samlet antal point",
   "Tourist": "Turist",
   "Transaction date": "Overførselsdato",

i18n/dictionaries/de.json

@@ -33,13 +33,17 @@
   "Book": "Buchen",
   "Book reward night": "Bonusnacht buchen",
   "Booking number": "Buchungsnummer",
+  "booking.adults": "{totalAdults, plural, one {# erwachsene} other {# erwachsene}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# gast} other {# gäste}}",
   "booking.nights": "{totalNights, plural, one {# nacht} other {# Nächte}}",
+  "booking.rooms": "{totalRooms, plural, one {# zimmer} other {# räume}}",
   "booking.terms": "Ved at betale med en af de tilgængelige betalingsmetoder, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandics Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic kræver et gyldigt kreditkort under min besøg i tilfælde af, at noget er tilbagebetalt.",
   "Breakfast": "Frühstück",
   "Breakfast buffet": "Frühstücksbuffet",
   "Breakfast excluded": "Frühstück nicht inbegriffen",
   "Breakfast included": "Frühstück inbegriffen",
   "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Frühstücksauswahl in nächsten Schritt.",
   "Bus terminal": "Busbahnhof",
   "Business": "Geschäft",
   "by": "bis",
@@ -72,6 +76,7 @@
   "Country code": "Landesvorwahl",
   "Credit card": "Kreditkarte",
   "Credit card deleted successfully": "Kreditkarte erfolgreich gelöscht",
+  "Currency Code": "EUR",
   "Current password": "Aktuelles Passwort",
   "Customer service": "Kundendienst",
   "Date of Birth": "Geburtsdatum",
@@ -113,6 +118,8 @@
   "Get member benefits & offers": "Holen Sie sich Vorteile und Angebote für Mitglieder",
   "Go back to edit": "Zurück zum Bearbeiten",
   "Go back to overview": "Zurück zur Übersicht",
+  "guest": "gast",
+  "guests": "gäste",
   "Guest information": "Informationen für Gäste",
   "Guests & Rooms": "Gäste & Zimmer",
   "Hi": "Hallo",
@@ -131,12 +138,14 @@
   "Image gallery": "Bildergalerie",
   "Included": "Iinklusive",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Es ist derzeit nicht möglich, Ihre Kommunikationseinstellungen zu verwalten. Bitte versuchen Sie es später erneut oder wenden Sie sich an den Support, wenn das Problem weiterhin besteht.",
-  "Join Scandic Friends": "Treten Sie Scandic Friends bei",
   "Join at no cost": "Kostenlos beitreten",
+  "Join Scandic Friends": "Treten Sie Scandic Friends bei",
   "King bed": "Kingsize-Bett",
+  "km to city center": "km bis zum Stadtzentrum",
   "Language": "Sprache",
   "Lastname": "Nachname",
   "Latest searches": "Letzte Suchanfragen",
+  "Left": "übrig",
   "Level": "Level",
   "Level 1": "Level 1",
   "Level 2": "Level 2",
@@ -194,6 +203,7 @@
   "Not found": "Nicht gefunden",
   "Nr night, nr adult": "{nights, number} Nacht, {adults, number} Erwachsener",
   "number": "nummer",
+  "n/a": "n/a",
   "On your journey": "Auf deiner Reise",
   "Open": "Offen",
   "Open language menu": "Sprachmenü öffnen",

i18n/dictionaries/en.json

@@ -34,6 +34,7 @@
   "Book reward night": "Book reward night",
   "Booking number": "Booking number",
   "booking.adults": "{totalAdults, plural, one {# adult} other {# adults}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# guest} other {# guests}}",
   "booking.nights": "{totalNights, plural, one {# night} other {# nights}}",
   "booking.rooms": "{totalRooms, plural, one {# room} other {# rooms}}",
   "booking.terms": "By paying with any of the payment methods available, I accept the terms for this booking and the general <termsLink>Terms & Conditions</termsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyLink>Scandic's Privacy policy</privacyLink>. I also accept that Scandic require a valid credit card during my visit in case anything is left unpaid.",
@@ -42,6 +43,7 @@
   "Breakfast excluded": "Breakfast excluded",
   "Breakfast included": "Breakfast included",
   "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Breakfast selection in next step.",
   "Bus terminal": "Bus terminal",
   "Business": "Business",
   "by": "by",
@@ -74,6 +76,7 @@
   "Country code": "Country code",
   "Credit card": "Credit card",
   "Credit card deleted successfully": "Credit card deleted successfully",
+  "Currency Code": "EUR",
   "Current password": "Current password",
   "Customer service": "Customer service",
   "Date of Birth": "Date of Birth",
@@ -115,6 +118,8 @@
   "Get member benefits & offers": "Get member benefits & offers",
   "Go back to edit": "Go back to edit",
   "Go back to overview": "Go back to overview",
+  "guest": "guest",
+  "guests": "guests",
   "Guest information": "Guest information",
   "Guests & Rooms": "Guests & Rooms",
   "Hi": "Hi",
@@ -133,11 +138,12 @@
   "Image gallery": "Image gallery",
   "Included": "Included",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.",
-  "Join Scandic Friends": "Join Scandic Friends",
   "Join at no cost": "Join at no cost",
+  "Join Scandic Friends": "Join Scandic Friends",
   "King bed": "King bed",
   "Language": "Language",
   "Lastname": "Lastname",
+  "Left": "left",
   "Latest searches": "Latest searches",
   "Level": "Level",
   "Level 1": "Level 1",
@@ -196,6 +202,7 @@
   "Not found": "Not found",
   "Nr night, nr adult": "{nights, number} night, {adults, number} adult",
   "number": "number",
+  "n/a": "n/a",
   "On your journey": "On your journey",
   "Open": "Open",
   "Open language menu": "Open language menu",
@@ -213,6 +220,7 @@
   "Phone is required": "Phone is required",
   "Phone number": "Phone number",
   "Please enter a valid phone number": "Please enter a valid phone number",
+  "points": "Points",
   "Points": "Points",
   "points": "Points",
   "Points being calculated": "Points being calculated",

i18n/dictionaries/fi.json

@@ -33,15 +33,20 @@
   "Book": "Varaa",
   "Book reward night": "Kirjapalkinto-ilta",
   "Booking number": "Varausnumero",
+  "booking.adults": "{totalAdults, plural, one {# aikuinen} other {# aikuiset}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# vieras} other {# vieraita}}",
   "booking.nights": "{totalNights, plural, one {# yö} other {# yötä}}",
+  "booking.rooms": "{totalRooms, plural, one {# huone} other {# sviitti}}",
   "booking.terms": "Maksamalla minkä tahansa saatavilla olevan maksutavan avulla hyväksyn tämän varauksen ehdot ja yleiset <termsLink>ehdot ja ehtoja</termsLink>, ja ymmärrän, että Scandic käsittelee minun henkilötietoni tässä varauksessa mukaisesti <privacyLink>Scandicin tietosuojavaltuuden</privacyLink> mukaisesti. Hyväksyn myös, että Scandic vaatii validin luottokortin majoituksen ajan, jos jokin jää maksamatta.",
   "Breakfast": "Aamiainen",
   "Breakfast buffet": "Aamiaisbuffet",
   "Breakfast excluded": "Aamiainen ei sisälly",
   "Breakfast included": "Aamiainen sisältyy",
   "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Aamiaisvalinta seuraavassa vaiheessa.",
   "Bus terminal": "Bussiasema",
   "Business": "Business",
+  "by": "mennessä",
   "Cancel": "Peruuttaa",
   "characters": "hahmoja",
   "Check in": "Sisäänkirjautuminen",
@@ -71,6 +76,7 @@
   "Country code": "Maatunnus",
   "Credit card": "Luottokortti",
   "Credit card deleted successfully": "Luottokortti poistettu onnistuneesti",
+  "Currency Code": "EUR",
   "Current password": "Nykyinen salasana",
   "Customer service": "Asiakaspalvelu",
   "Date of Birth": "Syntymäaika",
@@ -112,6 +118,8 @@
   "Get member benefits & offers": "Hanki jäsenetuja ja -tarjouksia",
   "Go back to edit": "Palaa muokkaamaan",
   "Go back to overview": "Palaa yleiskatsaukseen",
+  "guest": "Vieras",
+  "guests": "Vieraita",
   "Guest information": "Vieraan tiedot",
   "Guests & Rooms": "Vieraat & Huoneet",
   "Hi": "Hi",
@@ -130,12 +138,13 @@
   "Image gallery": "Kuvagalleria",
   "Included": "Sisälly hintaan",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Viestintäasetuksiasi ei voi hallita juuri nyt. Yritä myöhemmin uudelleen tai ota yhteyttä tukeen, jos ongelma jatkuu.",
-  "Join Scandic Friends": "Liity jäseneksi",
   "Join at no cost": "Liity maksutta",
+  "Join Scandic Friends": "Liity jäseneksi",
   "King bed": "King-vuode",
   "Language": "Kieli",
   "Lastname": "Sukunimi",
   "Latest searches": "Viimeisimmät haut",
+  "Left": "jäljellä",
   "Level": "Level",
   "Level 1": "Taso 1",
   "Level 2": "Taso 2",
@@ -193,6 +202,7 @@
   "Not found": "Ei löydetty",
   "Nr night, nr adult": "{nights, number} yö, {adults, number} aikuinen",
   "number": "määrä",
+  "n/a": "n/a",
   "On your journey": "Matkallasi",
   "Open": "Avata",
   "Open language menu": "Avaa kielivalikko",

i18n/dictionaries/no.json

@@ -32,12 +32,16 @@
   "Book": "Bestill",
   "Book reward night": "Bestill belønningskveld",
   "Booking number": "Bestillingsnummer",
+  "booking.adults": "{totalAdults, plural, one {# voksen} other {# voksne}}",
+  "booking.guests": "Maks {nrOfGuests, plural, one {# gjest} other {# gjester}}",
   "booking.nights": "{totalNights, plural, one {# natt} other {# netter}}",
-  "booking.terms": "Ved å betale med en av de tilgjengelige betalingsmetodene, accepterer jeg vilkårene for denne booking og de generelle <termsLink>Vilkår og betingelser</termsLink>, og forstår, at Scandic vil behandle min personlige data i forbindelse med denne booking i henhold til <privacyLink>Scandic's Privatlivspolitik</privacyLink>. Jeg accepterer, at Scandic krever et gyldig kredittkort under min besøk i tilfelle at noe er tilbakebetalt.",
+  "booking.rooms": "{totalRooms, plural, one {# rom} other {# rom}}",
   "Breakfast": "Frokost",
   "Breakfast buffet": "Breakfast buffet",
   "Breakfast excluded": "Frokost ekskludert",
   "Breakfast included": "Frokost inkludert",
+  "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Frokostvalg i neste steg.",
   "Bus terminal": "Bussterminal",
   "Business": "Forretnings",
   "by": "innen",
@@ -68,8 +72,8 @@
   "Could not find requested resource": "Kunne ikke finne den forespurte ressursen",
   "Country": "Land",
   "Country code": "Landskode",
-  "Credit card": "Kredittkort",
   "Credit card deleted successfully": "Kredittkort slettet",
+  "Currency Code": "NOK",
   "Current password": "Nåværende passord",
   "Customer service": "Kundeservice",
   "Date of Birth": "Fødselsdato",
@@ -111,6 +115,8 @@
   "Get member benefits & offers": "Få medlemsfordeler og tilbud",
   "Go back to edit": "Gå tilbake til redigering",
   "Go back to overview": "Gå tilbake til oversikten",
+  "guest": "gjest",
+  "guests": "gjester",
   "Guest information": "Informasjon til gjester",
   "Guests & Rooms": "Gjester & rom",
   "Hi": "Hei",
@@ -125,16 +131,16 @@
   "Hotels": "Hoteller",
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det fungerer",
-  "I would like to get my booking confirmation via sms": "Jeg vil gerne få min booking bekræftelse via SMS",
   "Image gallery": "Bildegalleri",
   "Included": "Inkludert",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det er ikke mulig å administrere kommunikasjonspreferansene dine akkurat nå, prøv igjen senere eller kontakt support hvis problemet vedvarer.",
-  "Join Scandic Friends": "Bli med i Scandic Friends",
   "Join at no cost": "Bli med uten kostnad",
+  "Join Scandic Friends": "Bli med i Scandic Friends",
   "King bed": "King-size-seng",
   "Language": "Språk",
   "Lastname": "Etternavn",
   "Latest searches": "Siste søk",
+  "Left": "igjen",
   "Level": "Nivå",
   "Level 1": "Nivå 1",
   "Level 2": "Nivå 2",
@@ -192,6 +198,7 @@
   "Not found": "Ikke funnet",
   "Nr night, nr adult": "{nights, number} natt, {adults, number} voksen",
   "number": "antall",
+  "n/a": "n/a",
   "On your journey": "På reisen din",
   "Open": "Åpen",
   "Open language menu": "Åpne språkmenyen",
@@ -330,5 +337,8 @@
   "Zip code": "Post kode",
   "Zoo": "Dyrehage",
   "Zoom in": "Zoom inn",
-  "Zoom out": "Zoom ut"
+  "Zoom out": "Zoom ut",
+  "{amount} {currency}": "{amount} {currency}",
+  "{difference}{amount} {currency}": "{difference}{amount} {currency}",
+  "{width} cm × {length} cm": "{width} cm × {length} cm"
 }

i18n/dictionaries/sv.json

@@ -32,15 +32,20 @@
   "Book": "Boka",
   "Book reward night": "Boka frinatt",
   "Booking number": "Bokningsnummer",
+  "booking.adults": "{totalAdults, plural, one {# vuxen} other {# vuxna}}",
+  "booking.guests": "Max {nrOfGuests, plural, one {# gäst} other {# gäster}}",
   "booking.nights": "{totalNights, plural, one {# natt} other {# nätter}}",
+  "booking.rooms": "{totalRooms, plural, one {# rum} other {# rum}}",
   "booking.terms": "Genom att betala med någon av de tillgängliga betalningsmetoderna accepterar jag villkoren för denna bokning och de generella <termsLink>Villkoren och villkoren</termsLink>, och förstår att Scandic kommer att behandla min personliga data i samband med denna bokning i enlighet med <privacyLink>Scandics integritetspolicy</privacyLink>. Jag accepterar att Scandic kräver ett giltigt kreditkort under min besök i fall att något är tillbaka betalt.",
   "Breakfast": "Frukost",
   "Breakfast buffet": "Frukostbuffé",
   "Breakfast excluded": "Frukost ingår ej",
   "Breakfast included": "Frukost ingår",
   "Breakfast restaurant": "Breakfast restaurant",
+  "Breakfast selection in next step.": "Frukostval i nästa steg.",
   "Bus terminal": "Bussterminal",
   "Business": "Business",
+  "by": "innan",
   "Cancel": "Avbryt",
   "characters": "tecken",
   "Check in": "Checka in",
@@ -68,8 +73,8 @@
   "Could not find requested resource": "Det gick inte att hitta den begärda resursen",
   "Country": "Land",
   "Country code": "Landskod",
-  "Credit card": "Kreditkort",
   "Credit card deleted successfully": "Kreditkort har tagits bort",
+  "Currency Code": "SEK",
   "Current password": "Nuvarande lösenord",
   "Customer service": "Kundservice",
   "Date of Birth": "Födelsedatum",
@@ -111,6 +116,8 @@
   "Get member benefits & offers": "Ta del av medlemsförmåner och erbjudanden",
   "Go back to edit": "Gå tillbaka till redigeringen",
   "Go back to overview": "Gå tillbaka till översikten",
+  "guest": "gäst",
+  "guests": "gäster",
   "Guest information": "Information till gästerna",
   "Guests & Rooms": "Gäster & rum",
   "Hi": "Hej",
@@ -125,16 +132,16 @@
   "Hotels": "Hotell",
   "How do you want to sleep?": "Hur vill du sova?",
   "How it works": "Hur det fungerar",
-  "I would like to get my booking confirmation via sms": "Jag vill få min bokningsbekräftelse via SMS",
   "Image gallery": "Bildgalleri",
   "Included": "Inkluderad",
   "It is not posible to manage your communication preferences right now, please try again later or contact support if the problem persists.": "Det gick inte att hantera dina kommunikationsinställningar just nu, försök igen senare eller kontakta supporten om problemet kvarstår.",
-  "Join Scandic Friends": "Gå med i Scandic Friends",
   "Join at no cost": "Gå med utan kostnad",
+  "Join Scandic Friends": "Gå med i Scandic Friends",
   "King bed": "King size-säng",
   "Language": "Språk",
   "Lastname": "Efternamn",
   "Latest searches": "Senaste sökningarna",
+  "Left": "kvar",
   "Level": "Nivå",
   "Level 1": "Nivå 1",
   "Level 2": "Nivå 2",
@@ -192,6 +199,7 @@
   "Not found": "Hittades inte",
   "Nr night, nr adult": "{nights, number} natt, {adults, number} vuxen",
   "number": "nummer",
+  "n/a": "n/a",
   "On your journey": "På din resa",
   "Open": "Öppna",
   "Open language menu": "Öppna språkmenyn",
@@ -209,8 +217,8 @@
   "Phone is required": "Telefonnummer är obligatorisk",
   "Phone number": "Telefonnummer",
   "Please enter a valid phone number": "Var vänlig och ange ett giltigt telefonnummer",
-  "Points": "Poäng",
   "points": "poäng",
+  "Points": "Poäng",
   "Points being calculated": "Poäng beräknas",
   "Points earned prior to May 1, 2021": "Intjänade poäng före den 1 maj 2021",
   "Points may take up to 10 days to be displayed.": "Det kan ta upp till 10 dagar innan poäng visas.",

middleware.ts

@@ -17,6 +17,7 @@ import { findLang } from "@/utils/languages"
 export const middleware: NextMiddleware = async (request, event) => {
   const headers = getDefaultRequestHeaders(request)
   const lang = findLang(request.nextUrl.pathname)
+
   if (!lang) {
     // Lang is required for all our middleware.
     // Without it we shortcircuit early.

server/routers/hotels/output.ts

@@ -425,26 +425,39 @@ const roomFacilitiesSchema = z.object({
   sortOrder: z.number(),
 })
 
-export const roomSchema = z.object({
-  attributes: z.object({
-    name: z.string(),
-    sortOrder: z.number(),
-    content: roomContentSchema,
-    roomTypes: z.array(roomTypesSchema),
-    roomFacilities: z.array(roomFacilitiesSchema),
-    occupancy: z.object({
-      total: z.number(),
-      adults: z.number(),
-      children: z.number(),
+export const roomSchema = z
+  .object({
+    attributes: z.object({
+      name: z.string(),
+      sortOrder: z.number(),
+      content: roomContentSchema,
+      roomTypes: z.array(roomTypesSchema),
+      roomFacilities: z.array(roomFacilitiesSchema),
+      occupancy: z.object({
+        total: z.number(),
+        adults: z.number(),
+        children: z.number(),
+      }),
+      roomSize: z.object({
+        min: z.number(),
+        max: z.number(),
+      }),
     }),
-    roomSize: z.object({
-      min: z.number(),
-      max: z.number(),
-    }),
-  }),
-  id: z.string(),
-  type: z.enum(["roomcategories"]),
-})
+    id: z.string(),
+    type: z.enum(["roomcategories"]),
+  })
+  .transform((data) => {
+    return {
+      descriptions: data.attributes.content.texts.descriptions,
+      id: data.id,
+      images: data.attributes.content.images,
+      name: data.attributes.name,
+      occupancy: data.attributes.occupancy,
+      roomSize: data.attributes.roomSize,
+      sortOrder: data.attributes.sortOrder,
+      type: data.type,
+    }
+  })
 
 const merchantInformationSchema = z.object({
   webMerchantId: z.string(),
@@ -572,40 +585,23 @@ export type HotelsAvailability = z.infer<typeof hotelsAvailabilitySchema>
 export type HotelsAvailabilityPrices =
   HotelsAvailability["data"][number]["attributes"]["bestPricePerNight"]
 
+const priceSchema = z.object({
+  pricePerNight: z.string(),
+  pricePerStay: z.string(),
+  currency: z.string(),
+})
+
+export const productTypePriceSchema = z.object({
+  rateCode: z.string(),
+  rateType: z.string().optional(),
+  localPrice: priceSchema,
+  requestedPrice: priceSchema.optional(),
+})
+
 const productSchema = z.object({
   productType: z.object({
-    public: z.object({
-      rateCode: z.string(),
-      rateType: z.string().optional(),
-      localPrice: z.object({
-        pricePerNight: z.string(),
-        pricePerStay: z.string(),
-        currency: z.string(),
-      }),
-      requestedPrice: z
-        .object({
-          pricePerNight: z.string(),
-          pricePerStay: z.string(),
-          currency: z.string(),
-        })
-        .optional(),
-    }),
-    member: z.object({
-      rateCode: z.string(),
-      rateType: z.string().optional(),
-      localPrice: z.object({
-        pricePerNight: z.string(),
-        pricePerStay: z.string(),
-        currency: z.string(),
-      }),
-      requestedPrice: z
-        .object({
-          pricePerNight: z.string(),
-          pricePerStay: z.string(),
-          currency: z.string(),
-        })
-        .optional(),
-    }),
+    public: productTypePriceSchema.optional(),
+    member: productTypePriceSchema.optional(),
   }),
 })
 

server/routers/hotels/query.ts

@@ -635,6 +635,7 @@ export const hotelQueryRouter = router({
             query: { hotelId, params: params },
           })
         )
+
         return validateHotelData.data
       }),
   }),

types/components/hotelPage/roomCard.ts

@@ -2,7 +2,7 @@ import type { RoomData } from "@/types/hotel"
 
 export interface RoomCardProps {
   id: string
-  images: RoomData["attributes"]["content"]["images"]
+  images: RoomData["images"]
   title: string
   subtitle: string
   badgeTextTransKey: string | null

types/components/hotelReservation/selectRate/flexibilityOption.ts

@@ -1,8 +1,18 @@
-import { Product, RateDefinition } from "@/server/routers/hotels/output"
+import { z } from "zod"
+
+import { Product, productTypePriceSchema } from "@/server/routers/hotels/output"
+
+type ProductPrice = z.output<typeof productTypePriceSchema>
 
 export type FlexibilityOptionProps = {
   product: Product | undefined
   name: string
   value: string
   paymentTerm: string
+  priceInformation?: Array<string>
+}
+
+export interface PriceListProps {
+  publicPrice?: ProductPrice | Record<string, never>
+  memberPrice?: ProductPrice | Record<string, never>
 }

types/components/hotelReservation/selectRate/pricePopover.ts

@@ -0,0 +1,5 @@
+import type { PopoverProps } from "react-aria-components"
+
+export interface PricePopoverProps extends Omit<PopoverProps, "children"> {
+  children: React.ReactNode
+}

types/components/hotelReservation/selectRate/roomCard.ts

@@ -3,7 +3,10 @@ import {
   RoomConfiguration,
 } from "@/server/routers/hotels/output"
 
+import { RoomData } from "@/types/hotel"
+
 export type RoomCardProps = {
   roomConfiguration: RoomConfiguration
   rateDefinitions: RateDefinition[]
+  roomCategories: RoomData[]
 }

types/components/hotelReservation/selectRate/roomSelection.ts

@@ -1,5 +1,8 @@
 import { RoomsAvailability } from "@/server/routers/hotels/output"
 
+import { RoomData } from "@/types/hotel"
+
 export interface RoomSelectionProps {
   roomConfigurations: RoomsAvailability
+  roomCategories: RoomData[]
 }