From c0efbd17ffd6440b0f90dbb7b0c7e32539c48134 Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Wed, 25 Jun 2025 11:04:44 +0000
Subject: [PATCH] Merged in feat/SW-1512-selectrateenterdetails-room- (pull
 request #2407)

feat: SW-1512 Moved room description below amenities & bed options in sidepeek

* feat: SW-1512 Moved room description below amenities & bed options in sidepeek

* feat: SW-1512 Added sub-title for room description

* feat: SW-1512 Optimized styles


Approved-by: Erik Tiekstra
---
 .../RoomSidePeekContent/index.tsx             | 160 ++++++++++--------
 .../roomSidePeekContent.module.css            |  29 +---
 2 files changed, 99 insertions(+), 90 deletions(-)

diff --git a/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx
index 831da13cd..076c9a1a7 100644
--- a/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx
+++ b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/index.tsx
@@ -1,11 +1,10 @@
 import { useIntl } from "react-intl"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { BED_TYPE_ICONS, type BedTypes } from "@/constants/booking"
 
 import ImageGallery from "@/components/ImageGallery"
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
 
 import { FacilityIcon } from "../facilityIcon"
@@ -30,64 +29,69 @@ export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
     <div className={styles.wrapper}>
       <div className={styles.mainContent}>
         {totalOccupancy && (
-          <Caption color="uiTextMediumContrast">
-            {intl.formatMessage(
-              {
-                defaultMessage:
-                  "Max. {max, plural, one {{range} guest} other {{range} guests}}",
-              },
-              {
-                max: totalOccupancy.max,
-                range: totalOccupancy.range,
-              }
-            )}
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
+              {intl.formatMessage(
+                {
+                  defaultMessage:
+                    "Max. {max, plural, one {{range} guest} other {{range} guests}}",
+                },
+                {
+                  max: totalOccupancy.max,
+                  range: totalOccupancy.range,
+                }
+              )}
+            </p>
+          </Typography>
         )}
         {roomSize && (
-          <Caption color="uiTextMediumContrast">
-            {roomSize.min === roomSize.max
-              ? intl.formatMessage(
-                  {
-                    defaultMessage: "{roomSize} m²",
-                  },
-                  {
-                    roomSize: roomSize.min,
-                  }
-                )
-              : intl.formatMessage(
-                  {
-                    defaultMessage: "{roomSizeMin}–{roomSizeMax} m²",
-                  },
-                  {
-                    roomSizeMin: roomSize.min,
-                    roomSizeMax: roomSize.max,
-                  }
-                )}
-          </Caption>
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <p>
+              {roomSize.min === roomSize.max
+                ? intl.formatMessage(
+                    {
+                      defaultMessage: "{roomSize} m²",
+                    },
+                    {
+                      roomSize: roomSize.min,
+                    }
+                  )
+                : intl.formatMessage(
+                    {
+                      defaultMessage: "{roomSizeMin}–{roomSizeMax} m²",
+                    },
+                    {
+                      roomSizeMin: roomSize.min,
+                      roomSizeMax: roomSize.max,
+                    }
+                  )}
+            </p>
+          </Typography>
         )}
         <div className={styles.imageContainer}>
           <ImageGallery images={galleryImages} title={room.name} height={280} />
         </div>
-        <Body color="uiTextHighContrast">{roomDescription}</Body>
       </div>
       <div className={styles.listContainer}>
-        <Subtitle type="two" color="uiTextHighContrast">
-          {intl.formatMessage({
-            defaultMessage: "Room amenities",
-          })}
-        </Subtitle>
-        <ul className={styles.facilityList}>
-          {room.roomFacilities
-            .sort((a, b) => a.sortOrder - b.sortOrder)
-            .map((facility) => {
-              return (
-                <li key={facility.name}>
-                  <FacilityIcon
-                    name={facility.icon}
-                    size={24}
-                    color="Icon/Default"
-                  />
-                  <Body asChild color="uiTextMediumContrast">
+        <Typography variant="Title/Subtitle/md">
+          <p>
+            {intl.formatMessage({
+              defaultMessage: "Room amenities",
+            })}
+          </p>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <ul className={styles.facilityList}>
+            {room.roomFacilities
+              .sort((a, b) => a.sortOrder - b.sortOrder)
+              .map((facility) => {
+                return (
+                  <li key={facility.name}>
+                    <FacilityIcon
+                      name={facility.icon}
+                      size={24}
+                      color="Icon/Default"
+                    />
                     <span>
                       {facility.availableInAllRooms
                         ? facility.name
@@ -101,23 +105,27 @@ export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
                             }
                           )}
                     </span>
-                  </Body>
-                </li>
-              )
-            })}
-        </ul>
+                  </li>
+                )
+              })}
+          </ul>
+        </Typography>
       </div>
       <div className={styles.listContainer}>
-        <Subtitle type="two" color="uiTextHighContrast">
-          {intl.formatMessage({
-            defaultMessage: "Bed options",
-          })}
-        </Subtitle>
-        <Body color="grey">
-          {intl.formatMessage({
-            defaultMessage: "Subject to availability",
-          })}
-        </Body>
+        <Typography variant="Title/Subtitle/md">
+          <p>
+            {intl.formatMessage({
+              defaultMessage: "Bed options",
+            })}
+          </p>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>
+            {intl.formatMessage({
+              defaultMessage: "Subject to availability",
+            })}
+          </p>
+        </Typography>
         <ul className={styles.bedOptions}>
           {room.roomTypes.map((roomType) => {
             const description =
@@ -131,14 +139,26 @@ export function RoomSidePeekContent({ room }: RoomSidePeekContentProps) {
               <li key={roomType.code}>
                 {MainBedIcon ? <MainBedIcon height={24} width={24} /> : null}
                 {ExtraBedIcon ? <ExtraBedIcon height={24} width={30} /> : null}
-                <Body color="uiTextMediumContrast" asChild>
+                <Typography variant="Body/Paragraph/mdRegular">
                   <span>{description}</span>
-                </Body>
+                </Typography>
               </li>
             )
           })}
         </ul>
       </div>
+      <div className={styles.listContainer}>
+        <Typography variant="Title/Subtitle/md">
+          <p>
+            {intl.formatMessage({
+              defaultMessage: "About the hotel",
+            })}
+          </p>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p>{roomDescription}</p>
+        </Typography>
+      </div>
     </div>
   )
 }
diff --git a/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css
index e7c90049a..723427dd2 100644
--- a/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css
+++ b/apps/scandic-web/components/SidePeeks/RoomSidePeek/RoomSidePeekContent/roomSidePeekContent.module.css
@@ -1,9 +1,3 @@
-.button {
-  margin-left: auto;
-  padding: 0 0 0 var(--Spacing-x-half);
-  text-decoration: none;
-}
-
 .wrapper {
   display: flex;
   flex-direction: column;
@@ -14,6 +8,10 @@
   ); /* Creates space between the wrapper and buttonContainer */
 }
 
+.mainContent {
+  color: var(--Text-Secondary);
+}
+
 .mainContent,
 .listContainer {
   display: flex;
@@ -36,6 +34,7 @@
 .facilityList {
   column-count: 2;
   column-gap: var(--Spacing-x2);
+  color: var(--Text-Secondary);
 }
 
 .facilityList li {
@@ -44,6 +43,10 @@
   margin-bottom: var(--Spacing-x-half);
 }
 
+.bedOptions {
+  color: var(--Text-Secondary);
+}
+
 .bedOptions li {
   display: flex;
   gap: var(--Spacing-x1);
@@ -53,17 +56,3 @@
 .facilityList li svg {
   flex-shrink: 0;
 }
-
-.noIcon {
-  margin-left: var(--Spacing-x4);
-}
-
-.buttonContainer {
-  background-color: var(--Background-Primary);
-  border-top: 1px solid var(--Base-Border-Subtle);
-  padding: var(--Spacing-x4) var(--Spacing-x2);
-  width: 100%;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-}