diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css b/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css index aacdf0449..d6fba4bc2 100644 --- a/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css +++ b/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); diff --git a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx b/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx index b48220795..b75e2b4ae 100644 --- a/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx +++ b/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) { )} + {hotelAttributes?.meta?.specialAlerts.map((alert) => { + return ( +