From 51f8412e2b70f88c70e13dabcbca8e8ba84d4fb3 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 15 Nov 2024 12:04:07 +0100
Subject: [PATCH 1/2] feat(SW-630) Added alerts

---
 components/HotelReservation/HotelCard/index.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index 451de4630..e9204c709 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -7,6 +7,7 @@ import { selectHotelMap } from "@/constants/routes/hotelReservation"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
+import Alert from "@/components/TempDesignSystem/Alert"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
@@ -38,6 +39,8 @@ export default function HotelCard({
   const { hotelData } = hotel
   const { price } = hotel
 
+  console.log(hotelData)
+
   const amenities = hotelData.detailedFacilities.slice(0, 5)
 
   const classNames = hotelCardVariants({
@@ -132,6 +135,17 @@ export default function HotelCard({
             hotel={hotelData}
             showCTA={true}
           />
+          {hotelData.specialAlerts.length > 0 && (
+            <div className={styles.specialAlerts}>
+              {hotelData.specialAlerts.map((alert) => (
+                <Alert
+                  key={alert.id}
+                  type={alert.type}
+                  heading={alert.heading}
+                />
+              ))}
+            </div>
+          )}
         </section>
         <div className={styles.prices}>
           <HotelPriceList price={price} />

From 821f667d064463e3e502d904ef7d5f569f9a21a6 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Fri, 15 Nov 2024 14:06:33 +0100
Subject: [PATCH 2/2] feat(SW-630) Added alerts to hotel cards

---
 .../HotelCard/hotelCard.module.css            |  6 ++++
 .../HotelReservation/HotelCard/index.tsx      |  8 +----
 components/TempDesignSystem/Alert/index.tsx   | 36 ++++++++++---------
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css
index a0c15eb5b..b20a7e30d 100644
--- a/components/HotelReservation/HotelCard/hotelCard.module.css
+++ b/components/HotelReservation/HotelCard/hotelCard.module.css
@@ -85,6 +85,12 @@
   min-width: 160px;
 }
 
+.specialAlerts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x1);
+}
+
 @media screen and (min-width: 1367px) {
   .card.pageListing {
     flex-direction: row;
diff --git a/components/HotelReservation/HotelCard/index.tsx b/components/HotelReservation/HotelCard/index.tsx
index e9204c709..4c478d275 100644
--- a/components/HotelReservation/HotelCard/index.tsx
+++ b/components/HotelReservation/HotelCard/index.tsx
@@ -39,8 +39,6 @@ export default function HotelCard({
   const { hotelData } = hotel
   const { price } = hotel
 
-  console.log(hotelData)
-
   const amenities = hotelData.detailedFacilities.slice(0, 5)
 
   const classNames = hotelCardVariants({
@@ -138,11 +136,7 @@ export default function HotelCard({
           {hotelData.specialAlerts.length > 0 && (
             <div className={styles.specialAlerts}>
               {hotelData.specialAlerts.map((alert) => (
-                <Alert
-                  key={alert.id}
-                  type={alert.type}
-                  heading={alert.heading}
-                />
+                <Alert key={alert.id} type={alert.type} text={alert.text} />
               ))}
             </div>
           )}
diff --git a/components/TempDesignSystem/Alert/index.tsx b/components/TempDesignSystem/Alert/index.tsx
index 2c511b725..8f063d39d 100644
--- a/components/TempDesignSystem/Alert/index.tsx
+++ b/components/TempDesignSystem/Alert/index.tsx
@@ -44,23 +44,25 @@ export default function Alert({
                 <h2>{heading}</h2>
               </Body>
             ) : null}
-            <Body className={styles.text}>
-              {text}
-              {phoneContact?.phoneNumber ? (
-                <>
-                  <span> {phoneContact.displayText} </span>
-                  <Link
-                    color="burgundy"
-                    href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
-                  >
-                    {phoneContact.phoneNumber}
-                  </Link>
-                  {phoneContact.footnote ? (
-                    <span>. ({phoneContact.footnote})</span>
-                  ) : null}
-                </>
-              ) : null}
-            </Body>
+            {text ? (
+              <Body className={styles.text}>
+                {text}
+                {phoneContact?.phoneNumber ? (
+                  <>
+                    <span> {phoneContact.displayText} </span>
+                    <Link
+                      color="burgundy"
+                      href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
+                    >
+                      {phoneContact.phoneNumber}
+                    </Link>
+                    {phoneContact.footnote ? (
+                      <span>. ({phoneContact.footnote})</span>
+                    ) : null}
+                  </>
+                ) : null}
+              </Body>
+            ) : null}
           </div>
           {link ? (
             <Link color="burgundy" href={link.url}>