feat: SW-631 Added hotel alerts for select-rate page

components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css

@@ -77,6 +77,12 @@
   color: var(--UI-Text-Medium-contrast);
 }
 
+.hotelAlert {
+  max-width: var(--max-width-navigation);
+  margin: 0 auto;
+  padding-top: var(--Spacing-x-one-and-half);
+}
+
 @media screen and (min-width: 1367px) {
   .container {
     padding: var(--Spacing-x4) var(--Spacing-x5);

components/HotelReservation/SelectRate/HotelInfoCard/index.tsx

@@ -3,6 +3,7 @@ import { useIntl } from "react-intl"
 
 import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
+import Alert from "@/components/TempDesignSystem/Alert"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -94,6 +95,18 @@ export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
           </div>
         </section>
       )}
+      {hotelAttributes?.meta?.specialAlerts.map((alert) => {
+        return (
+          <div className={styles.hotelAlert} key={`wrapper_${alert.id}`}>
+            <Alert
+              key={alert.id}
+              type={alert.type}
+              heading={alert.heading}
+              text={alert.text}
+            />
+          </div>
+        )
+      })}
     </article>
   )
 }