feat(sw-453): fixed mobile view and some improvements

2024-10-28 13:11:24 +01:00
parent 8da94fc259
commit 917f44f323
20 changed files with 299 additions and 103 deletions
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-rate/page.tsx
@@ -58,6 +58,8 @@ export default async function SelectRatePage({
    return "No hotel data found" // TODO: Add a proper error message
  }

+  console.log(selectRoomParamsObject)
+
  const roomCategories = hotelData?.included

  return (
--- a/components/BookingWidget/MobileToggleButton/index.tsx
+++ b/components/BookingWidget/MobileToggleButton/index.tsx
@@ -68,7 +68,14 @@ export default function MobileToggleButton({
            {`${selectedFromDate} - ${selectedToDate} (${intl.formatMessage(
              { id: "booking.nights" },
              { totalNights: nights }
-            )}) ${intl.formatMessage({ id: "booking.adults" }, { totalAdults })}, ${intl.formatMessage({ id: "booking.children" }, { totalChildren })}, ${intl.formatMessage({ id: "booking.rooms" }, { totalRooms })}`}
+            )}) ${intl.formatMessage({ id: "booking.adults" }, { totalAdults })}, ${
+              totalChildren > 0
+                ? intl.formatMessage(
+                    { id: "booking.children" },
+                    { totalChildren }
+                  ) + ", "
+                : ""
+            }${intl.formatMessage({ id: "booking.rooms" }, { totalRooms })}`}
          </Caption>
        </div>
        <div className={styles.icon}>
--- a/components/HotelReservation/SelectRate/RoomFilter/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
@@ -9,6 +9,7 @@ import { z } from "zod"
 import { InfoCircleIcon } from "@/components/Icons"
 import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
 import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { Tooltip } from "@/components/TempDesignSystem/Tooltip"

 import { getIconForFeatureCode } from "../utils"
@@ -49,6 +50,12 @@ export default function RoomFilter({
  const petFriendly = watch(RoomPackageCodeEnum.PETR)
  const allergyFriendly = watch(RoomPackageCodeEnum.ALLG)

+  const selectedFilters = useMemo(() => getValues(), [getValues])
+
+  const tooltipText = intl.formatMessage({
+    id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
+  })
+
  const submitFilter = useCallback(() => {
    const data = getValues()
    onFilter(data)
@@ -61,9 +68,33 @@ export default function RoomFilter({

  return (
    <div className={styles.container}>
-      <Body color="uiTextHighContrast">
-        {intl.formatMessage({ id: "Room types available" }, { numberOfRooms })}
-      </Body>
+      <div className={styles.infoDesktop}>
+        <Body color="uiTextHighContrast">
+          {intl.formatMessage(
+            { id: "Room types available" },
+            { numberOfRooms }
+          )}
+        </Body>
+      </div>
+      <div className={styles.infoMobile}>
+        <div className={styles.filterInfo}>
+          <Caption type="label" color="burgundy" textTransform="uppercase">
+            {intl.formatMessage({ id: "Filter" })}
+          </Caption>
+          <Caption type="label" color="burgundy">
+            {Object.entries(selectedFilters)
+              .filter(([_, value]) => value)
+              .map(([key]) => intl.formatMessage({ id: key }))
+              .join(", ")}
+          </Caption>
+        </div>
+        <Caption color="uiTextHighContrast">
+          {intl.formatMessage(
+            { id: "Room types available" },
+            { numberOfRooms }
+          )}
+        </Caption>
+      </div>
      <FormProvider {...methods}>
        <form onSubmit={handleSubmit(submitFilter)}>
          <div className={styles.roomsFilter}>
@@ -80,13 +111,7 @@ export default function RoomFilter({
                Icon={getIconForFeatureCode(option.code)}
              />
            ))}
-            <Tooltip
-              text={intl.formatMessage({
-                id: "Pet-friendly rooms have an additional fee of 20 EUR per stay",
-              })}
-              position="bottom"
-              arrow="right"
-            >
+            <Tooltip text={tooltipText} position="bottom" arrow="right">
              <InfoCircleIcon className={styles.infoIcon} />
            </Tooltip>
          </div>
--- a/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
+++ b/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
@@ -17,3 +17,27 @@
  stroke: var(--UI-Text-Medium-contrast);
  fill: transparent;
 }
+.filterInfo {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x-half);
+  align-items: flex-end;
+}
+
+.infoDesktop {
+  display: none;
+}
+
+.infoMobile {
+  display: block;
+}
+
+@media (min-width: 768px) {
+  .infoDesktop {
+    display: block;
+  }
+
+  .infoMobile {
+    display: none;
+  }
+}
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/index.tsx
@@ -40,6 +40,9 @@ export default function PriceList({
              </Subtitle>
              <Body color="uiTextHighContrast" textTransform="bold">
                {publicLocalPrice.currency}
+                <span className={styles.perNight}>
+                  /{intl.formatMessage({ id: "night" })}
+                </span>
              </Body>
            </div>
          ) : (
@@ -64,6 +67,9 @@ export default function PriceList({
              </Subtitle>
              <Body color="red" textTransform="bold">
                {memberLocalPrice.currency}
+                <span className={styles.perNight}>
+                  /{intl.formatMessage({ id: "night" })}
+                </span>
              </Body>
            </div>
          ) : (
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
@@ -12,3 +12,8 @@
  display: flex;
  gap: var(--Spacing-x-half);
 }
+
+.perNight {
+  font-weight: 400;
+  font-size: var(--typography-Caption-Regular-fontSize);
+}
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
@@ -2,6 +2,8 @@ import { useIntl } from "react-intl"

 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 "./rateSummary.module.css"
@@ -13,12 +15,19 @@ export default function RateSummary({
  rateSummary,
  isUserLoggedIn,
  packages,
+  roomsAvailability,
 }: RateSummaryProps) {
  const intl = useIntl()
+  const {
+    member,
+    public: publicRate,
+    features,
+    roomType,
+    priceName,
+  } = rateSummary
+  const priceToShow = isUserLoggedIn ? member : publicRate

-  const priceToShow = isUserLoggedIn ? rateSummary.member : rateSummary.public
-
-  const isPetRoomSelect = rateSummary.features.some(
+  const isPetRoomSelect = features.some(
    (feature) => feature.code === RoomPackageCodeEnum.PETR
  )

@@ -26,17 +35,23 @@ export default function RateSummary({
    (pkg) => pkg.code === RoomPackageCodeEnum.PETR
  )

-  const petRoomPrice = petRoomPackage ? petRoomPackage.calculatedPrice : null
-  const petRoomCurrency = petRoomPackage ? petRoomPackage.currency : null
+  const petRoomPrice = petRoomPackage?.calculatedPrice ?? null
+  const petRoomCurrency = petRoomPackage?.currency ?? null
+
+  const checkInDate = new Date(roomsAvailability.checkInDate)
+  const checkOutDate = new Date(roomsAvailability.checkOutDate)
+  const nights = Math.ceil(
+    (checkOutDate.getTime() - checkInDate.getTime()) / (1000 * 60 * 60 * 24)
+  )

  return (
    <div className={styles.summary}>
      <div className={styles.summaryText}>
-        <Subtitle color="uiTextHighContrast">{rateSummary.roomType}</Subtitle>
-        <Body color="uiTextMediumContrast">{rateSummary.priceName}</Body>
+        <Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
+        <Body color="uiTextMediumContrast">{priceName}</Body>
      </div>
      <div className={styles.summaryPrice}>
-        <div className={styles.summaryPriceText}>
+        <div className={styles.summaryPriceTextDesktop}>
          <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
            {priceToShow?.localPrice.pricePerStay}{" "}
            {priceToShow?.localPrice.currency}
@@ -47,6 +62,38 @@ export default function RateSummary({
            {priceToShow?.requestedPrice?.currency}
          </Body>
        </div>
+        <div className={styles.summaryPriceTextMobile}>
+          <Caption color="uiTextHighContrast">
+            {intl.formatMessage({ id: "Total price" })}
+          </Caption>
+          <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
+            {priceToShow?.localPrice.pricePerStay}{" "}
+            {priceToShow?.localPrice.currency}
+          </Subtitle>
+          <Footnote
+            color="uiTextMediumContrast"
+            className={styles.summaryPriceTextMobile}
+          >
+            {intl.formatMessage(
+              { id: "booking.nights" },
+              { totalNights: nights }
+            )}
+            ,{" "}
+            {intl.formatMessage(
+              { id: "booking.adults" },
+              { totalAdults: roomsAvailability.occupancy?.adults }
+            )}
+            {roomsAvailability.occupancy?.children && (
+              <>
+                ,{" "}
+                {intl.formatMessage(
+                  { id: "booking.children" },
+                  { totalChildren: roomsAvailability.occupancy.children }
+                )}
+              </>
+            )}
+          </Footnote>
+        </div>
        {isPetRoomSelect && (
          <div className={styles.petInfo}>
            <Body color="uiTextHighContrast" textTransform="bold">
@@ -57,7 +104,7 @@ export default function RateSummary({
            </Body>
          </div>
        )}
-        <Button type="submit" theme="base">
+        <Button type="submit" theme="base" className={styles.continueButton}>
          {intl.formatMessage({ id: "Continue" })}
        </Button>
      </div>
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
@@ -5,7 +5,7 @@
  left: 0;
  right: 0;
  background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+  padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5);
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -13,10 +13,50 @@

 .summaryPrice {
  display: flex;
+  width: 100%;
  gap: var(--Spacing-x4);
 }

 .petInfo {
  border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
  padding-left: var(--Spacing-x2);
+  display: none;
+}
+
+.summaryText {
+  display: none;
+}
+
+.summaryPriceTextDesktop {
+  display: none;
+}
+
+.continueButton {
+  margin-left: auto;
+  height: fit-content;
+  width: 100%;
+}
+
+.summaryPriceTextMobile {
+  white-space: nowrap;
+}
+
+@media (min-width: 768px) {
+  .summary {
+    padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+  }
+  .petInfo,
+  .summaryText,
+  .summaryPriceTextDesktop {
+    display: block;
+  }
+  .summaryPriceTextMobile {
+    display: none;
+  }
+  .summaryPrice {
+    width: auto;
+  }
+  .continueButton {
+    width: auto;
+  }
 }
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -12,8 +12,8 @@ import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

 import ImageGallery from "../../ImageGallery"
-import RoomSidePeek from "../RoomSidePeek"
 import { getIconForFeatureCode } from "../../utils"
+import RoomSidePeek from "../RoomSidePeek"

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

@@ -26,17 +26,19 @@ export default function RoomCard({
  handleSelectRate,
 }: RoomCardProps) {
  const intl = useIntl()
-  const saveRate = rateDefinitions.find(
-    // TODO: Update string when API has decided
-    (rate) => rate.cancellationRule === "NonCancellable"
-  )
-  const changeRate = rateDefinitions.find(
-    // TODO: Update string when API has decided
-    (rate) => rate.cancellationRule === "Modifiable"
-  )
-  const flexRate = rateDefinitions.find(
-    // TODO: Update string when API has decided
-    (rate) => rate.cancellationRule === "CancellableBefore6PM"
+
+  // TODO: Update string when API has decided
+  const rateTypes = {
+    saveRate: "NonCancellable",
+    changeRate: "Modifiable",
+    flexRate: "CancellableBefore6PM",
+  }
+
+  const rates = Object.fromEntries(
+    Object.entries(rateTypes).map(([key, rule]) => [
+      key,
+      rateDefinitions.find((rate) => rate.cancellationRule === rule),
+    ])
  )

  function findProductForRate(rate: RateDefinition | undefined) {
@@ -49,9 +51,7 @@ export default function RoomCard({
      : undefined
  }

-  function getPriceInformationForRate(
-    rate: typeof saveRate | typeof changeRate | typeof flexRate
-  ) {
+  function getPriceInformationForRate(rate: RateDefinition | undefined) {
    return rateDefinitions.find((def) => def.rateCode === rate?.rateCode)
      ?.generalTerms
  }
@@ -59,10 +59,7 @@ export default function RoomCard({
  const selectedRoom = roomCategories.find(
    (room) => room.name === roomConfiguration.roomType
  )
-  const roomSize = selectedRoom?.roomSize
-  const occupancy = selectedRoom?.occupancy.total
-  const roomDescription = selectedRoom?.descriptions.short
-  const images = selectedRoom?.images
+  const { roomSize, occupancy, descriptions, images } = selectedRoom || {}
  const mainImage = images?.[0]

  return (
@@ -74,7 +71,7 @@ export default function RoomCard({
              {
                id: "booking.guests",
              },
-              { nrOfGuests: occupancy }
+              { nrOfGuests: occupancy?.total }
            )}
          </Caption>
          <Caption color="uiTextMediumContrast">
@@ -93,7 +90,7 @@ export default function RoomCard({
            <Subtitle className={styles.name} type="two">
              {roomConfiguration.roomType}
            </Subtitle>
-            <Body>{roomDescription}</Body>
+            <Body>{descriptions?.short}</Body>
          </div>
          <Caption color="uiTextHighContrast">
            {intl.formatMessage({
@@ -101,39 +98,29 @@ export default function RoomCard({
            })}
          </Caption>
          <div className={styles.flexibilityOptions}>
-            <FlexibilityOption
-              name={intl.formatMessage({ id: "Non-refundable" })}
-              value="non-refundable"
-              paymentTerm={intl.formatMessage({ id: "Pay now" })}
-              product={findProductForRate(saveRate)}
-              priceInformation={getPriceInformationForRate(saveRate)}
-              handleSelectRate={handleSelectRate}
-              roomType={roomConfiguration.roomType}
-              roomTypeCode={roomConfiguration.roomTypeCode}
-              features={roomConfiguration.features}
-            />
-            <FlexibilityOption
-              name={intl.formatMessage({ id: "Free rebooking" })}
-              value="free-rebooking"
-              paymentTerm={intl.formatMessage({ id: "Pay now" })}
-              product={findProductForRate(changeRate)}
-              priceInformation={getPriceInformationForRate(changeRate)}
-              handleSelectRate={handleSelectRate}
-              roomType={roomConfiguration.roomType}
-              roomTypeCode={roomConfiguration.roomTypeCode}
-              features={roomConfiguration.features}
-            />
-            <FlexibilityOption
-              name={intl.formatMessage({ id: "Free cancellation" })}
-              value="free-cancellation"
-              paymentTerm={intl.formatMessage({ id: "Pay later" })}
-              product={findProductForRate(flexRate)}
-              priceInformation={getPriceInformationForRate(flexRate)}
-              handleSelectRate={handleSelectRate}
-              roomType={roomConfiguration.roomType}
-              roomTypeCode={roomConfiguration.roomTypeCode}
-              features={roomConfiguration.features}
-            />
+            {Object.entries(rates).map(([key, rate]) => (
+              <FlexibilityOption
+                key={key}
+                name={intl.formatMessage({
+                  id:
+                    key === "flexRate"
+                      ? "Free cancellation"
+                      : key === "saveRate"
+                        ? "Non-refundable"
+                        : "Free rebooking",
+                })}
+                value={key.toLowerCase()}
+                paymentTerm={intl.formatMessage({
+                  id: key === "flexRate" ? "Pay later" : "Pay now",
+                })}
+                product={findProductForRate(rate)}
+                priceInformation={getPriceInformationForRate(rate)}
+                handleSelectRate={handleSelectRate}
+                roomType={roomConfiguration.roomType}
+                roomTypeCode={roomConfiguration.roomTypeCode}
+                features={roomConfiguration.features}
+              />
+            ))}
          </div>
        </div>
      </div>
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useState } from "react"
+import { useMemo,useState } from "react"

 import RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
@@ -23,27 +23,32 @@ export default function RoomSelection({
  const searchParams = useSearchParams()
  const isUserLoggedIn = !!user

-  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault()
-    const searchParamsObject = getHotelReservationQueryParams(searchParams)
+  const { roomConfigurations, rateDefinitions } = roomsAvailability

-    const queryParams = new URLSearchParams(searchParams)
+  const queryParams = useMemo(() => {
+    const params = new URLSearchParams(searchParams)
+    const searchParamsObject = getHotelReservationQueryParams(searchParams)

    searchParamsObject.room.forEach((item, index) => {
      if (rateSummary?.roomTypeCode) {
-        queryParams.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
+        params.set(`room[${index}].roomtype`, rateSummary.roomTypeCode)
      }
      if (rateSummary?.public?.rateCode) {
-        queryParams.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
+        params.set(`room[${index}].ratecode`, rateSummary.public.rateCode)
      }
      if (rateSummary?.member?.rateCode) {
-        queryParams.set(
+        params.set(
          `room[${index}].counterratecode`,
          rateSummary.member.rateCode
        )
      }
    })

+    return params
+  }, [searchParams, rateSummary])
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
    router.push(`select-bed?${queryParams}`)
  }

@@ -55,10 +60,10 @@ export default function RoomSelection({
        onSubmit={handleSubmit}
      >
        <ul className={styles.roomList}>
-          {roomsAvailability.roomConfigurations.map((roomConfiguration) => (
+          {roomConfigurations.map((roomConfiguration) => (
            <li key={roomConfiguration.roomType}>
              <RoomCard
-                rateDefinitions={roomsAvailability.rateDefinitions}
+                rateDefinitions={rateDefinitions}
                roomConfiguration={roomConfiguration}
                roomCategories={roomCategories}
                handleSelectRate={setRateSummary}
@@ -71,6 +76,7 @@ export default function RoomSelection({
            rateSummary={rateSummary}
            isUserLoggedIn={isUserLoggedIn}
            packages={packages}
+            roomsAvailability={roomsAvailability}
          />
        )}
      </form>
--- a/components/HotelReservation/SelectRate/Rooms/index.tsx
+++ b/components/HotelReservation/SelectRate/Rooms/index.tsx
@@ -1,6 +1,6 @@
 "use client"

-import { useState } from "react"
+import { useCallback,useState } from "react"

 import { RoomsAvailability } from "@/server/routers/hotels/output"

@@ -20,21 +20,25 @@ export default function Rooms({
 }: RoomSelectionProps) {
  const [rooms, setRooms] = useState<RoomsAvailability>(roomsAvailability)

-  function handleFilter(filter: Record<string, boolean | undefined>) {
-    const selectedCodes = Object.keys(filter).filter((key) => filter[key])
+  const handleFilter = useCallback(
+    (filter: Record<string, boolean | undefined>) => {
+      const selectedCodes = Object.keys(filter).filter((key) => filter[key])

-    if (selectedCodes.length === 0) {
-      setRooms(roomsAvailability)
-      return
-    }
+      if (selectedCodes.length === 0) {
+        setRooms(roomsAvailability)
+        return
+      }

-    const filteredRooms = roomsAvailability.roomConfigurations.filter((room) =>
-      room.features.some((feature) =>
-        selectedCodes.includes(feature.code as RoomPackageCodes)
+      const filteredRooms = roomsAvailability.roomConfigurations.filter(
+        (room) =>
+          room.features.some((feature) =>
+            selectedCodes.includes(feature.code as RoomPackageCodes)
+          )
      )
-    )
-    setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
-  }
+      setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
+    },
+    [roomsAvailability]
+  )

  return (
    <div className={styles.content}>
--- a/components/TempDesignSystem/Form/FilterChip/_Chip/chip.module.css
+++ b/components/TempDesignSystem/Form/FilterChip/_Chip/chip.module.css
@@ -25,3 +25,13 @@
  border-color: var(--Base-Button-Primary-Fill-Disabled);
  cursor: not-allowed;
 }
+
+.caption {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .caption {
+    display: block;
+  }
+}
--- a/components/TempDesignSystem/Form/FilterChip/_Chip/index.tsx
+++ b/components/TempDesignSystem/Form/FilterChip/_Chip/index.tsx
@@ -40,7 +40,7 @@ export default function FilterChip({
        height={iconHeight}
        width={iconWidth}
      />
-      <Caption type="bold" color={color}>
+      <Caption type="bold" color={color} className={styles.caption}>
        {label}
      </Caption>
      <input
--- a/i18n/dictionaries/da.json
+++ b/i18n/dictionaries/da.json
@@ -3,6 +3,8 @@
  "<b>{amount} {currency}</b>/night per adult": "<b>{amount} {currency}</b>/nat pr. voksen",
  "A destination or hotel name is needed to be able to search for a hotel room.": "Et destinations- eller hotelnavn er nødvendigt for at kunne søge efter et hotelværelse.",
  "A photo of the room": "Et foto af værelset",
+  "ACCE": "Tilgængelighed",
+  "ALLG": "Allergi",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "About the hotel",
  "Accessible Room": "Tilgængelighedsrum",
@@ -107,6 +109,7 @@
  "FAQ": "Ofte stillede spørgsmål",
  "Failed to delete credit card, please try again later.": "Kunne ikke slette kreditkort. Prøv venligst igen senere.",
  "Fair": "Messe",
+  "Filter": "Filter",
  "Find booking": "Find booking",
  "Find hotels": "Find hotel",
  "First name": "Fornavn",
@@ -211,6 +214,7 @@
  "Open menu": "Åbn menuen",
  "Open my pages menu": "Åbn mine sider menuen",
  "Overview": "Oversigt",
+  "PETR": "Kæledyr",
  "Parking": "Parkering",
  "Parking / Garage": "Parkering / Garage",
  "Password": "Adgangskode",
@@ -300,6 +304,7 @@
  "Things nearby HOTEL_NAME": "Ting i nærheden af {hotelName}",
  "Total Points": "Samlet antal point",
  "Total incl VAT": "Inkl. moms",
+  "Total price": "Samlet pris",
  "Tourist": "Turist",
  "Transaction date": "Overførselsdato",
  "Transactions": "Transaktioner",
--- a/i18n/dictionaries/de.json
+++ b/i18n/dictionaries/de.json
@@ -3,6 +3,8 @@
  "<b>{amount} {currency}</b>/night per adult": "<b>{amount} {currency}</b>/Nacht pro Erwachsener",
  "A destination or hotel name is needed to be able to search for a hotel room.": "Ein Reiseziel oder Hotelname wird benötigt, um nach einem Hotelzimmer suchen zu können.",
  "A photo of the room": "Ein Foto des Zimmers",
+  "ACCE": "Zugänglichkeit",
+  "ALLG": "Allergie",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "Über das Hotel",
  "Accessible Room": "Barrierefreies Zimmer",
@@ -107,6 +109,7 @@
  "FAQ": "Häufig gestellte Fragen",
  "Failed to delete credit card, please try again later.": "Kreditkarte konnte nicht gelöscht werden. Bitte versuchen Sie es später noch einmal.",
  "Fair": "Messe",
+  "Filter": "Filter",
  "Find booking": "Buchung finden",
  "Find hotels": "Hotels finden",
  "First name": "Vorname",
@@ -211,6 +214,7 @@
  "Open menu": "Menü öffnen",
  "Open my pages menu": "Meine Seiten Menü öffnen",
  "Overview": "Übersicht",
+  "PETR": "Haustier",
  "Parking": "Parken",
  "Parking / Garage": "Parken / Garage",
  "Password": "Passwort",
@@ -301,6 +305,7 @@
  "Things nearby HOTEL_NAME": "Dinge in der Nähe von {hotelName}",
  "Total Points": "Gesamtpunktzahl",
  "Total incl VAT": "Gesamt inkl. MwSt.",
+  "Total price": "Gesamtpreis",
  "Tourist": "Tourist",
  "Transaction date": "Transaktionsdatum",
  "Transactions": "Transaktionen",
--- a/i18n/dictionaries/en.json
+++ b/i18n/dictionaries/en.json
@@ -3,6 +3,8 @@
  "<b>{amount} {currency}</b>/night per adult": "<b>{amount} {currency}</b>/night per adult",
  "A destination or hotel name is needed to be able to search for a hotel room.": "A destination or hotel name is needed to be able to search for a hotel room.",
  "A photo of the room": "A photo of the room",
+  "ACCE": "Accessibility",
+  "ALLG": "Allergy",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "About the hotel",
  "Accessible Room": "Accessibility room",
@@ -114,6 +116,7 @@
  "FAQ": "FAQ",
  "Failed to delete credit card, please try again later.": "Failed to delete credit card, please try again later.",
  "Fair": "Fair",
+  "Filter": "Filter",
  "Find booking": "Find booking",
  "Find hotels": "Find hotels",
  "First name": "First name",
@@ -220,6 +223,7 @@
  "Open menu": "Open menu",
  "Open my pages menu": "Open my pages menu",
  "Overview": "Overview",
+  "PETR": "Pet",
  "Parking": "Parking",
  "Parking / Garage": "Parking / Garage",
  "Password": "Password",
@@ -315,6 +319,7 @@
  "Total Points": "Total Points",
  "Total cost": "Total cost",
  "Total incl VAT": "Total incl VAT",
+  "Total price": "Total price",
  "Tourist": "Tourist",
  "Transaction date": "Transaction date",
  "Transactions": "Transactions",
--- a/i18n/dictionaries/fi.json
+++ b/i18n/dictionaries/fi.json
@@ -3,6 +3,8 @@
  "<b>{amount} {currency}</b>/night per adult": "<b>{amount} {currency}</b>/yö per aikuinen",
  "A destination or hotel name is needed to be able to search for a hotel room.": "Kohteen tai hotellin nimi tarvitaan, jotta hotellihuonetta voidaan hakea.",
  "A photo of the room": "Kuva huoneesta",
+  "ACCE": "Saavutettavuus",
+  "ALLG": "Allergia",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "Tietoja hotellista",
  "Accessible Room": "Esteetön huone",
@@ -107,6 +109,7 @@
  "FAQ": "Usein kysytyt kysymykset",
  "Failed to delete credit card, please try again later.": "Luottokortin poistaminen epäonnistui, yritä myöhemmin uudelleen.",
  "Fair": "Messukeskus",
+  "Filter": "Suodatin",
  "Find booking": "Etsi varaus",
  "Find hotels": "Etsi hotelleja",
  "First name": "Etunimi",
@@ -211,6 +214,7 @@
  "Open menu": "Avaa valikko",
  "Open my pages menu": "Avaa omat sivut -valikko",
  "Overview": "Yleiskatsaus",
+  "PETR": "Lemmikki",
  "Parking": "Pysäköinti",
  "Parking / Garage": "Pysäköinti / Autotalli",
  "Password": "Salasana",
@@ -301,6 +305,7 @@
  "Things nearby HOTEL_NAME": "Lähellä olevia asioita {hotelName}",
  "Total Points": "Kokonaispisteet",
  "Total incl VAT": "Yhteensä sis. alv",
+  "Total price": "Kokonaishinta",
  "Tourist": "Turisti",
  "Transaction date": "Tapahtuman päivämäärä",
  "Transactions": "Tapahtumat",
--- a/i18n/dictionaries/no.json
+++ b/i18n/dictionaries/no.json
@@ -3,6 +3,8 @@
  "<b>{amount} {currency}</b>/night per adult": "<b>{amount} {currency}</b>/natt per voksen",
  "A destination or hotel name is needed to be able to search for a hotel room.": "Et reisemål eller hotellnavn er nødvendig for å kunne søke etter et hotellrom.",
  "A photo of the room": "Et bilde av rommet",
+  "ACCE": "Tilgjengelighet",
+  "ALLG": "Allergi",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "Om hotellet",
  "Accessible Room": "Tilgjengelighetsrom",
@@ -106,6 +108,7 @@
  "FAQ": "Ofte stilte spørsmål",
  "Failed to delete credit card, please try again later.": "Kunne ikke slette kredittkortet, prøv igjen senere.",
  "Fair": "Messe",
+  "Filter": "Filter",
  "Find booking": "Finn booking",
  "Find hotels": "Finn hotell",
  "First name": "Fornavn",
@@ -209,6 +212,7 @@
  "Open menu": "Åpne menyen",
  "Open my pages menu": "Åpne mine sider menyen",
  "Overview": "Oversikt",
+  "PETR": "Kjæledyr",
  "Parking": "Parkering",
  "Parking / Garage": "Parkering / Garasje",
  "Password": "Passord",
@@ -298,6 +302,7 @@
  "Things nearby HOTEL_NAME": "Ting i nærheten av {hotelName}",
  "Total Points": "Totale poeng",
  "Total incl VAT": "Sum inkl mva",
+  "Total price": "Totalpris",
  "Tourist": "Turist",
  "Transaction date": "Transaksjonsdato",
  "Transactions": "Transaksjoner",
--- a/i18n/dictionaries/sv.json
+++ b/i18n/dictionaries/sv.json
@@ -3,6 +3,8 @@
  "<b>{amount} {currency}</b>/night per adult": "<b>{amount} {currency}</b>/natt per vuxen",
  "A destination or hotel name is needed to be able to search for a hotel room.": "Ett destinations- eller hotellnamn behövs för att kunna söka efter ett hotellrum.",
  "A photo of the room": "Ett foto av rummet",
+  "ACCE": "Tillgänglighet",
+  "ALLG": "Allergi",
  "About meetings & conferences": "About meetings & conferences",
  "About the hotel": "Om hotellet",
  "Accessible Room": "Tillgänglighetsrum",
@@ -106,6 +108,7 @@
  "FAQ": "FAQ",
  "Failed to delete credit card, please try again later.": "Det gick inte att ta bort kreditkortet, försök igen senare.",
  "Fair": "Mässa",
+  "Filter": "Filter",
  "Find booking": "Hitta bokning",
  "Find hotels": "Hitta hotell",
  "First name": "Förnamn",
@@ -209,6 +212,7 @@
  "Open menu": "Öppna menyn",
  "Open my pages menu": "Öppna mina sidor menyn",
  "Overview": "Översikt",
+  "PETR": "Husdjur",
  "Parking": "Parkering",
  "Parking / Garage": "Parkering / Garage",
  "Password": "Lösenord",
@@ -298,6 +302,7 @@
  "Things nearby HOTEL_NAME": "Saker i närheten av {hotelName}",
  "Total Points": "Poäng totalt",
  "Total incl VAT": "Totalt inkl moms",
+  "Total price": "Totalpris",
  "Tourist": "Turist",
  "Transaction date": "Transaktionsdatum",
  "Transactions": "Transaktioner",
@@ -374,15 +379,15 @@
  "number": "nummer",
  "or": "eller",
  "points": "poäng",
+  "room type": "rumtyp",
+  "room types": "rumstyper",
  "special character": "speciell karaktär",
  "spendable points expiring by": "{points} poäng förfaller {date}",
  "to": "till",
-  "uppercase letter": "stor bokstav",
-  "{amount} out of {total}": "{amount} av {total}",
  "type": "typ",
  "types": "typer",
-  "room type": "rumtyp",
-  "room types": "rumstyper",
+  "uppercase letter": "stor bokstav",
+  "{amount} out of {total}": "{amount} av {total}",
  "{amount} {currency}": "{amount} {currency}",
  "{difference}{amount} {currency}": "{difference}{amount} {currency}",
  "{width} cm × {length} cm": "{width} cm × {length} cm"
--- a/types/components/hotelReservation/selectRate/rateSummary.ts
+++ b/types/components/hotelReservation/selectRate/rateSummary.ts
@@ -1,3 +1,5 @@
+import { RoomsAvailability } from "@/server/routers/hotels/output"
+
 import { RoomPackageData } from "./roomFilter"
 import { Rate } from "./selectRate"

@@ -5,4 +7,5 @@ export interface RateSummaryProps {
  rateSummary: Rate
  isUserLoggedIn: boolean
  packages: RoomPackageData
+  roomsAvailability: RoomsAvailability
 }