From 216cb706ad67483dda63de230d9ef50b48e04a01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 30 Jul 2025 08:00:17 +0000
Subject: [PATCH] Merged in feat/SW-1974-handle-missing-data-hotel-page (pull
 request #2575)

Feat/SW-1974 handle missing data hotel page

* fix(SW-1974): adjust image gallery styling

* fix(SW-1974): add border radius to fullview image

* fix(SW-1974): handle no rooms

* fix(SW-1974): adjust amenity list

* fix(SW-1974): hide parking accordion if no data


Approved-by: Anton Gunnarsson
---
 .../AmenitiesList/amenitiesList.module.css    | 13 ++--
 .../HotelPage/AmenitiesList/index.tsx         | 13 ++--
 .../PreviewImages/previewImages.module.css    | 59 +++++++++++--------
 .../ContentType/HotelPage/index.tsx           | 13 ++--
 .../components/ContentType/HotelPage/utils.ts | 10 +++-
 .../Lightbox/FullView/fullView.module.css     |  1 +
 .../Accordions/Parking.tsx                    |  4 ++
 .../types/components/hotelPage/sections.ts    |  2 +-
 8 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
index 84bb73b19..9ec9151d5 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css
@@ -1,10 +1,9 @@
 .amenitiesContainer {
   background-color: var(--Base-Surface-Subtle-Normal);
   border-radius: var(--Corner-radius-lg);
-  padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x-one-and-half)
-    var(--Spacing-x3);
+  padding: var(--Space-x3) var(--Space-x3) var(--Space-x15) var(--Space-x3);
   display: grid;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
   height: fit-content;
   width: min(100%, 300px);
   justify-items: start;
@@ -13,13 +12,12 @@
 .amenityItemList {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
+  gap: var(--Space-x1);
 }
 
 .amenityItem {
   display: inline-flex;
-  gap: var(--Spacing-x1);
-  align-items: center;
+  gap: var(--Space-x1);
 }
 
 .icon {
@@ -32,10 +30,11 @@
 
 .facility {
   color: var(--Text-Secondary);
+  align-items: center;
 }
 
 @media screen and (min-width: 1367px) {
   .amenitiesContainer {
-    margin-top: var(--Spacing-x5);
+    margin-top: var(--Space-x5);
   }
 }
diff --git a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx
index 79a01fc69..2198c8216 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/AmenitiesList/index.tsx
@@ -37,13 +37,12 @@ export default async function AmenitiesList({
           )
           return (
             <div className={styles.amenityItem} key={facility.id}>
-              {Icon && Icon}
-              <Typography
-                variant="Body/Paragraph/mdRegular"
-                className={styles.facility}
-              >
-                <p>{facility.name}</p>
-              </Typography>
+              {Icon}
+              <span className={styles.facility}>
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <p>{facility.name}</p>
+                </Typography>
+              </span>
             </div>
           )
         })}
diff --git a/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/previewImages.module.css b/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
index 543bcc0e5..9255ca90f 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
+++ b/apps/scandic-web/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
@@ -15,13 +15,13 @@
   cursor: pointer;
   border-radius: var(--Corner-radius-sm);
   overflow: hidden;
+  max-height: 30vh;
 }
 
 .image {
   object-fit: cover;
   width: 100%;
   height: 100%;
-  max-height: 30vh;
   margin: 0 auto;
 }
 
@@ -32,42 +32,24 @@
 
 .seeAllButton {
   position: absolute;
-  bottom: var(--Spacing-x2);
-  right: var(--Spacing-x4);
+  bottom: var(--Space-x2);
+  right: var(--Space-x4);
   z-index: 1;
 }
 
 @media screen and (min-width: 768px) {
   .seeAllButton {
-    right: calc(var(--Spacing-x2) + var(--Layout-Tablet-Margin-Margin-min));
+    right: calc(var(--Space-x2) + var(--Layout-Tablet-Margin-Margin-min));
   }
 }
 
 @media screen and (min-width: 1367px) {
   .imageWrapper {
-    grid-template-columns: 70% 30%;
-    grid-template-rows: repeat(2, 16.625rem);
-    grid-template-areas:
-      "main side1"
-      "main side2";
-    padding: 0 var(--Spacing-x5);
+    padding: 0 var(--Space-x5);
   }
 
-  .image {
-    max-height: none;
-  }
-
-  .imageWrapper > :first-child {
-    grid-area: main;
-  }
-
-  .imageWrapper > :nth-child(2),
-  .imageWrapper > :nth-child(3) {
-    display: initial;
-  }
-
-  .imageWrapper > :nth-child(2) {
-    grid-area: side1;
+  .imageButton {
+    max-height: 540px;
   }
 
   .desktopGrid > :nth-child(3) {
@@ -75,6 +57,31 @@
   }
 
   .seeAllButton {
-    right: var(--Spacing-x7);
+    right: var(--Space-x7);
+  }
+
+  .imageWrapper:has(> :nth-child(2)) {
+    grid-template-columns: 70% 30%;
+    grid-template-rows: repeat(2, 16.625rem);
+    grid-template-areas:
+      "main side1"
+      "main side2";
+
+    > :first-child {
+      grid-area: main;
+    }
+
+    > :nth-child(2),
+    > :nth-child(3) {
+      display: initial;
+    }
+
+    > :nth-child(2) {
+      grid-area: side1;
+    }
+
+    .imageButton {
+      max-height: none;
+    }
   }
 }
diff --git a/apps/scandic-web/components/ContentType/HotelPage/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/index.tsx
index 5bad35841..ee1d318ed 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/index.tsx
@@ -123,6 +123,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
       hasMeetingRooms: !!(meetingRoomsData && meetingRoomsData.length > 0),
       hasActivities: activitiesCards.length > 0,
       hasFAQ: !!(faq && faq.accordions.length > 0),
+      hasRooms: roomCategories.length > 0,
     },
     sectionHeadings
   )
@@ -194,11 +195,13 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
             </div>
           ) : null}
         </div>
-        <Rooms
-          heading={pageSections.rooms.heading}
-          rooms={roomCategories}
-          preamble={hotelRoomElevatorPitchText}
-        />
+        {pageSections.rooms ? (
+          <Rooms
+            heading={pageSections.rooms.heading}
+            rooms={roomCategories}
+            preamble={hotelRoomElevatorPitchText}
+          />
+        ) : null}
         {facilities && (
           <Facilities
             facilities={facilities}
diff --git a/apps/scandic-web/components/ContentType/HotelPage/utils.ts b/apps/scandic-web/components/ContentType/HotelPage/utils.ts
index 72f830f99..9d3187aa2 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/utils.ts
+++ b/apps/scandic-web/components/ContentType/HotelPage/utils.ts
@@ -100,6 +100,7 @@ export function getPageSectionsData(
     hasMeetingRooms: boolean
     hasActivities: boolean
     hasFAQ: boolean
+    hasRooms: boolean
   },
   sectionHeadings?: HotelPageSectionHeadings | null
 ) {
@@ -109,6 +110,7 @@ export function getPageSectionsData(
     hasMeetingRooms,
     hasActivities,
     hasFAQ,
+    hasRooms,
   } = dynamicSections
   const sections: HotelPageSections = {
     overview: {
@@ -119,16 +121,18 @@ export function getPageSectionsData(
           defaultMessage: "Overview",
         }),
     },
-    rooms: {
+  }
+
+  if (hasRooms) {
+    sections.rooms = {
       hash: HotelHashValues.rooms,
       heading:
         sectionHeadings?.rooms ||
         intl.formatMessage({
           defaultMessage: "Rooms",
         }),
-    },
+    }
   }
-
   if (hasRestaurants) {
     sections.restaurant = {
       hash: HotelHashValues.restaurant,
diff --git a/apps/scandic-web/components/Lightbox/FullView/fullView.module.css b/apps/scandic-web/components/Lightbox/FullView/fullView.module.css
index 7c864cf27..a68f9b43a 100644
--- a/apps/scandic-web/components/Lightbox/FullView/fullView.module.css
+++ b/apps/scandic-web/components/Lightbox/FullView/fullView.module.css
@@ -50,6 +50,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  border-radius: var(--Corner-radius-Medium);
 }
 
 .imageCaption {
diff --git a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx
index cfda7e5d0..514b3223c 100644
--- a/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx
+++ b/apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Parking.tsx
@@ -20,6 +20,10 @@ export default function ParkingAccordionItem({
 }: ParkingAccordionItemProps) {
   const intl = useIntl()
 
+  if (!parking.length && !elevatorPitch && !parkingPageHref) {
+    return null
+  }
+
   return (
     <AccordionItem
       title={intl.formatMessage({
diff --git a/apps/scandic-web/types/components/hotelPage/sections.ts b/apps/scandic-web/types/components/hotelPage/sections.ts
index ca959a2c3..772f0e3f9 100644
--- a/apps/scandic-web/types/components/hotelPage/sections.ts
+++ b/apps/scandic-web/types/components/hotelPage/sections.ts
@@ -18,7 +18,7 @@ interface HotelPageSection {
 
 export interface HotelPageSections {
   overview: HotelPageSection
-  rooms: HotelPageSection
+  rooms?: HotelPageSection
   restaurant?: HotelPageSection
   meetings?: HotelPageSection
   wellness?: HotelPageSection