From fe7134882791a989d3d30b98a72f7b53cd47df2d Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Thu, 22 May 2025 11:01:18 +0000
Subject: [PATCH] feat(SW-2836): Added bed-size to room sidepeek on hotel pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Matilda Landström
---
 .../HotelPage/SidePeeks/Room/index.tsx        | 11 ++++++--
 .../HotelPage/SidePeeks/Room/utils.ts         | 28 +++++++++++++++++++
 2 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/utils.ts

diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
index e2b33b8c6..f34419725 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
+++ b/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>
               )
diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/utils.ts b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/utils.ts
new file mode 100644
index 000000000..982e4295b
--- /dev/null
+++ b/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})`
+}