feat(SW-508): Added hotel alerts

components/ContentType/HotelPage/hotelPage.module.css

@@ -29,6 +29,11 @@
   display: none;
 }
 
+.overview {
+  display: grid;
+  gap: var(--Spacing-x3);
+}
+
 .introContainer {
   display: flex;
   flex-wrap: wrap;
@@ -37,6 +42,11 @@
   scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }
 
+.alertsContainer {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
 @media screen and (min-width: 1367px) {
   .pageContainer {
     grid-template-areas:
@@ -76,10 +86,4 @@
     padding-left: var(--Spacing-x5);
     padding-right: var(--Spacing-x5);
   }
-  .introContainer {
-    grid-template-columns: 38rem minmax(max-content, 16rem);
-    justify-content: space-between;
-    gap: var(--Spacing-x2);
-    align-items: end;
-  }
 }

components/ContentType/HotelPage/index.tsx

@@ -4,6 +4,7 @@ import { serverClient } from "@/lib/trpc/server"
 
 import AccordionSection from "@/components/Blocks/Accordion"
 import SidePeekProvider from "@/components/SidePeekProvider"
+import Alert from "@/components/TempDesignSystem/Alert"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
@@ -49,6 +50,7 @@ export default async function HotelPage() {
     pointsOfInterest,
     facilities,
     faq,
+    alerts,
   } = hotelData
 
   const topThreePois = pointsOfInterest.slice(0, 3)
@@ -69,16 +71,30 @@ export default async function HotelPage() {
         hasFAQ={!!faq}
       />
       <main className={styles.mainSection}>
-        <div id={HotelHashValues.overview} className={styles.introContainer}>
-          <IntroSection
-            hotelName={hotelName}
-            hotelDescription={hotelDescription}
-            location={hotelLocation}
-            address={hotelAddress}
-            tripAdvisor={hotelRatings?.tripAdvisor}
-          />
+        <div id={HotelHashValues.overview} className={styles.overview}>
+          <div className={styles.introContainer}>
+            <IntroSection
+              hotelName={hotelName}
+              hotelDescription={hotelDescription}
+              location={hotelLocation}
+              address={hotelAddress}
+              tripAdvisor={hotelRatings?.tripAdvisor}
+            />
 
-          <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
+            <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
+          </div>
+          {alerts.length ? (
+            <div className={styles.alertsContainer}>
+              {alerts.map((alert) => (
+                <Alert
+                  key={alert.id}
+                  type={alert.type}
+                  heading={alert.heading}
+                  text={alert.text}
+                />
+              ))}
+            </div>
+          ) : null}
         </div>
         <Rooms rooms={roomCategories} />
         <Facilities facilities={facilities} activitiesCard={activitiesCard} />