Merged in feat/SW-1737-design-mystay-multiroom (pull request #1565)

Feat/SW-1737 design mystay multiroom

* feat(SW-1737) Fixed member view of guest details

* feat(SW-1737) fix merge issues

* feat(SW-1737) Fixed price details

* feat(SW-1737) removed unused imports

* feat(SW-1737) removed true as statement

* feat(SW-1737) updated store handling

* feat(SW-1737) fixed bug showing double numbers

* feat(SW-1737) small design fixed

* feat(SW-1737) fixed rebase errors

* feat(SW-1737) fixed create booking error with dates

* feat(SW-1737) fixed view multiroom as singleroom

* feat(SW-1737) fixes for multiroom

* feat(SW-1737) fixed bookingsummary

* feat(SW-1737) dont hide modify dates

* feat(SW-1737) updated breakfast to handle number

* feat(SW-1737) Added red color if member rate

* feat(SW-1737) fix PR comments

* feat(SW-1737) updated member tiers svg

* feat(SW-1737) updated how to handle paymentMethodDescription

* feat(SW-1737) fixes after testing mystay

* feat(SW-1737) updated Room type to just use whats used

* feat(SW-1737) fixed access

* feat(SW-1737) refactor my stay after PR comments

* feat(SW-1737) fix roomNumber translation

* feat(SW-1737) removed log


Approved-by: Arvid Norlin

apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/RoomDetails.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { getBedIcon } from "../RoomSidePeek/bedIcon"
+import { getFacilityIcon } from "../RoomSidePeek/facilityIcon"
+
+import styles from "./bookedRoomSidePeek.module.css"
+
+import type { RoomDetailsProps } from "@/types/components/sidePeeks/bookedRoomSidePeek"
+
+export default function RoomDetails({
+  roomDescription,
+  roomFacilities,
+  roomTypes,
+}: RoomDetailsProps) {
+  const intl = useIntl()
+
+  const sortedFacilities = roomFacilities
+    .sort((a, b) => a.sortOrder - b.sortOrder)
+    .map((facility) => {
+      const Icon = getFacilityIcon(facility.icon)
+      return { ...facility, Icon }
+    })
+
+  const bedOptions = roomTypes.map((roomType) => {
+    const BedIcon = getBedIcon(roomType.mainBed.type)
+    return { ...roomType, BedIcon }
+  })
+
+  return (
+    <div className={styles.descriptionContainer}>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <p className={styles.text}>{roomDescription}</p>
+      </Typography>
+      <div className={styles.listContainer}>
+        <Typography variant="Title/Subtitle/md">
+          <p className={styles.text}>
+            {intl.formatMessage({ id: "This room is equipped with" })}
+          </p>
+        </Typography>
+        <ul className={styles.facilityList}>
+          {sortedFacilities.map(({ name, Icon }) => (
+            <li key={name}>
+              {Icon && (
+                <Icon width={24} height={24} color="uiTextMediumContrast" />
+              )}
+              <Typography variant="Body/Paragraph/mdRegular">
+                <span className={styles.listText}>{name}</span>
+              </Typography>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className={styles.listContainer}>
+        <Typography variant="Title/Subtitle/md">
+          <p className={styles.text}>
+            {intl.formatMessage({ id: "Bed options" })}
+          </p>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.text}>
+            {intl.formatMessage({ id: "Based on availability" })}
+          </p>
+        </Typography>
+        <ul className={styles.bedOptions}>
+          {bedOptions.map(({ code, mainBed, BedIcon }) => (
+            <li key={code}>
+              {BedIcon && (
+                <BedIcon color="uiTextMediumContrast" width={24} height={24} />
+              )}
+              <Typography variant="Body/Paragraph/mdRegular">
+                <span className={styles.listText}>{mainBed.description}</span>
+              </Typography>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}