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

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)
+  padding: var(--Space-x3) var(--Space-x3) var(--Space-x15) var(--Space-x3);
-    var(--Spacing-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);
+  gap: var(--Space-x1);
-  align-items: center;
 }
 
 .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);
   }
 }

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}
+              {Icon}
-              <Typography
+              <span className={styles.facility}>
-                variant="Body/Paragraph/mdRegular"
+                <Typography variant="Body/Paragraph/mdRegular">
-                className={styles.facility}
+                  <p>{facility.name}</p>
-              >
+                </Typography>
-                <p>{facility.name}</p>
+              </span>
-              </Typography>
             </div>
           )
         })}

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);
+  bottom: var(--Space-x2);
-  right: var(--Spacing-x4);
+  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%;
+    padding: 0 var(--Space-x5);
-    grid-template-rows: repeat(2, 16.625rem);
-    grid-template-areas:
-      "main side1"
-      "main side2";
-    padding: 0 var(--Spacing-x5);
   }
 
-  .image {
+  .imageButton {
-    max-height: none;
+    max-height: 540px;
-  }
-
-  .imageWrapper > :first-child {
-    grid-area: main;
-  }
-
-  .imageWrapper > :nth-child(2),
-  .imageWrapper > :nth-child(3) {
-    display: initial;
-  }
-
-  .imageWrapper > :nth-child(2) {
-    grid-area: side1;
   }
 
   .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;
+    }
   }
 }

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
+        {pageSections.rooms ? (
-          heading={pageSections.rooms.heading}
+          <Rooms
-          rooms={roomCategories}
+            heading={pageSections.rooms.heading}
-          preamble={hotelRoomElevatorPitchText}
+            rooms={roomCategories}
-        />
+            preamble={hotelRoomElevatorPitchText}
+          />
+        ) : null}
         {facilities && (
           <Facilities
             facilities={facilities}

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,

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 {

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({

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