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 451de4630..4c478d275 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" @@ -132,6 +133,13 @@ export default function HotelCard({ hotel={hotelData} showCTA={true} /> + {hotelData.specialAlerts.length > 0 && ( +
+ {hotelData.specialAlerts.map((alert) => ( + + ))} +
+ )}
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({

{heading}

) : null} - - {text} - {phoneContact?.phoneNumber ? ( - <> - {phoneContact.displayText} - - {phoneContact.phoneNumber} - - {phoneContact.footnote ? ( - . ({phoneContact.footnote}) - ) : null} - - ) : null} - + {text ? ( + + {text} + {phoneContact?.phoneNumber ? ( + <> + {phoneContact.displayText} + + {phoneContact.phoneNumber} + + {phoneContact.footnote ? ( + . ({phoneContact.footnote}) + ) : null} + + ) : null} + + ) : null}
{link ? (