From f0dbf294d89ad51beb2d0b259aa58851e04614c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Tue, 29 Apr 2025 10:20:47 +0200
Subject: [PATCH] feat(SW-2532): update room sidepeek amenities

---
 .../HotelPage/SidePeeks/Room/index.tsx        | 31 ++++++++++-------
 .../HotelPage/SidePeeks/Room/room.module.css  |  4 ---
 .../BookedRoomSidePeek/RoomDetails.tsx        | 33 ++++++++++++++-----
 3 files changed, 43 insertions(+), 25 deletions(-)

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 752e46a48..89f46c0f5 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/index.tsx
@@ -104,25 +104,32 @@ export default async function RoomSidePeek({
           </Typography>
           <ul className={styles.facilityList}>
             {room.roomFacilities
+              .filter((facility) => !!facility.isUniqueSellingPoint)
               .sort((a, b) => a.sortOrder - b.sortOrder)
               .map((facility) => {
-                const Icon = (
-                  <FacilityIcon
-                    name={facility.icon}
-                    size={24}
-                    color="Icon/Default"
-                  />
-                )
+                const facilityName = facility.availableInAllRooms
+                  ? facility.name
+                  : intl.formatMessage(
+                      {
+                        defaultMessage: "{facility} (available in some rooms)",
+                      },
+                      {
+                        facility: facility.name,
+                      }
+                    )
+
                 return (
                   <li className={styles.listItem} key={facility.name}>
-                    {Icon && Icon}
+                    <FacilityIcon
+                      name={facility.icon}
+                      size={24}
+                      color="Icon/Default"
+                    />
                     <Typography
                       variant="Body/Paragraph/mdRegular"
-                      className={cx(styles.iconText, {
-                        [styles.noIcon]: !Icon,
-                      })}
+                      className={styles.iconText}
                     >
-                      <span>{facility.name}</span>
+                      <span>{facilityName}</span>
                     </Typography>
                   </li>
                 )
diff --git a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css
index 8067df657..87843f876 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/room.module.css
@@ -45,10 +45,6 @@
   justify-content: flex-start;
 }
 
-.noIcon {
-  margin-left: var(--Spacing-x4);
-}
-
 .buttonContainer {
   background-color: var(--Base-Background-Primary-Normal);
   border-top: 1px solid var(--Base-Border-Subtle);
diff --git a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/RoomDetails.tsx b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/RoomDetails.tsx
index 5dcffa19d..966239d72 100644
--- a/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/RoomDetails.tsx
+++ b/apps/scandic-web/components/SidePeeks/BookedRoomSidePeek/RoomDetails.tsx
@@ -19,7 +19,8 @@ export default function RoomDetails({
 }: RoomDetailsProps) {
   const intl = useIntl()
 
-  const sortedFacilities = roomFacilities
+  const filteredSortedFacilities = roomFacilities
+    .filter((facility) => !!facility.isUniqueSellingPoint)
     .sort((a, b) => a.sortOrder - b.sortOrder)
     .map((facility) => {
       const Icon = <FacilityIcon name={facility.icon} color="Icon/Default" />
@@ -45,14 +46,28 @@ export default function RoomDetails({
           </p>
         </Typography>
         <ul className={styles.facilityList}>
-          {sortedFacilities.map(({ name, Icon }) => (
-            <li key={name}>
-              {Icon && Icon}
-              <Typography variant="Body/Paragraph/mdRegular">
-                <span className={styles.listText}>{name}</span>
-              </Typography>
-            </li>
-          ))}
+          {filteredSortedFacilities.map(
+            ({ name, Icon, availableInAllRooms }) => (
+              <li key={name}>
+                {Icon}
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <span className={styles.listText}>
+                    {availableInAllRooms
+                      ? name
+                      : intl.formatMessage(
+                          {
+                            defaultMessage:
+                              "{facility} (available in some rooms)",
+                          },
+                          {
+                            facility: name,
+                          }
+                        )}
+                  </span>
+                </Typography>
+              </li>
+            )
+          )}
         </ul>
       </div>
       <div className={styles.listContainer}>