From d2bbbc0a4786cf570f148093139ce5438274fe6d Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Thu, 21 Aug 2025 09:47:54 +0000
Subject: [PATCH] Merged in fix/SW-2366-alerts-the-list-bullet-display (pull
 request #2679)

fix(SW-2366): Fixed hotel alerts in booking page as per design

* fix(SW-2366): Fixed hotel alerts in booking page as per design

* fix(SW-2366): Optimise code


Approved-by: Erik Tiekstra
---
 .../BookingSummary/bookingSummary.module.css  |  5 ----
 .../MyStay/BookingSummary/index.tsx           | 25 +++++++------------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css
index 693795e05..f9a7504c8 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css
+++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/bookingSummary.module.css
@@ -11,11 +11,6 @@
   gap: 80px;
 }
 
-.toast {
-  width: var(--max-width-content);
-  margin: 0 auto;
-}
-
 .title {
   color: var(--Scandic-Brand-Burgundy);
   text-align: center;
diff --git a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
index fd07d00f3..066325955 100644
--- a/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/index.tsx
@@ -5,7 +5,7 @@ import { useIntl } from "react-intl"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { Toast } from "@/components/TempDesignSystem/Toasts"
+import Alert from "@/components/TempDesignSystem/Alert"
 import { trackMyStayPageLink } from "@/utils/tracking"
 
 import SummaryCard from "./SummaryCard"
@@ -103,21 +103,14 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
           ]}
         />
       </div>
-      {hotel.specialAlerts.length > 0 && (
-        <div className={styles.toast}>
-          <Toast variant="info">
-            <ul>
-              {hotel.specialAlerts.map((alert) => (
-                <li key={alert.id}>
-                  <Typography variant="Body/Paragraph/mdRegular">
-                    <span>{alert.text}</span>
-                  </Typography>
-                </li>
-              ))}
-            </ul>
-          </Toast>
-        </div>
-      )}
+      {hotel.specialAlerts.map((alert) => (
+        <Alert
+          key={alert.id}
+          type={alert.type}
+          heading={alert.heading}
+          text={alert.text}
+        />
+      ))}
     </div>
   )
 }