feat(SW-2836): Added bed-size to room sidepeek on hotel pages

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx

@@ -16,6 +16,7 @@ import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import { getRoomNameAsParam } from "../../utils"
 import RoomFacilities from "./RoomFacilities"
+import { getBedDescriptionText } from "./utils"
 
 import styles from "./room.module.css"
 
@@ -35,7 +36,6 @@ export default async function RoomSidePeek({
   const fromdate = dt().format("YYYY-MM-DD")
   const todate = dt().add(1, "day").format("YYYY-MM-DD")
   const selectRateURL = selectRateWithParams(lang, hotelId, fromdate, todate)
-
   return (
     <SidePeek
       contentKey={`room-${getRoomNameAsParam(room.name)}`}
@@ -117,15 +117,20 @@ export default async function RoomSidePeek({
           <ul className={styles.bedOptions}>
             {room.roomTypes.map((roomType) => {
               const iconName = getBedIconName(roomType.mainBed.type)
+              const descriptionText = getBedDescriptionText(
+                intl,
+                roomType.mainBed
+              )
+
               return (
-                <li className={styles.listItem} key={roomType.code}>
+                <li key={roomType.code} className={styles.listItem}>
                   <MaterialIcon
                     color="CurrentColor"
                     icon={iconName}
                     className={styles.icon}
                   />
                   <Typography variant="Body/Paragraph/mdRegular">
-                    <span>{roomType.mainBed.description}</span>
+                    <span>{descriptionText}</span>
                   </Typography>
                 </li>
               )

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/utils.ts

@@ -0,0 +1,28 @@
+import type { IntlShape } from "react-intl"
+
+import type { Room } from "@/types/hotel"
+
+export function getBedDescriptionText(
+  intl: IntlShape,
+  bed: Room["roomTypes"][number]["mainBed"]
+) {
+  const { type, widthRange, description } = bed
+  const isCustomOccupancy = type === "CustomOccupancy"
+
+  if (isCustomOccupancy) {
+    return description
+  }
+
+  const mainBedWidthText = intl.formatMessage(
+    { defaultMessage: "{value} cm" },
+    { value: widthRange.min }
+  )
+  const mainBedWidthRangeText = intl.formatMessage(
+    { defaultMessage: "{min}–{max} cm" },
+    { min: widthRange.min, max: widthRange.max }
+  )
+  const sameWidth = widthRange.min === widthRange.max
+  const widthText = sameWidth ? mainBedWidthText : mainBedWidthRangeText
+
+  return `${description} (${widthText})`
+}