diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingList/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingList/index.tsx new file mode 100644 index 000000000..dd858d9b7 --- /dev/null +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingList/index.tsx @@ -0,0 +1,50 @@ +import Body from "@/components/TempDesignSystem/Text/Body" +import { getIntl } from "@/i18n" + +import styles from "./parkingList.module.css" + +import type { ParkingListProps } from "@/types/components/hotelPage/sidepeek/parking" + +export default async function ParkingList({ + numberOfChargingSpaces, + canMakeReservation, + numberOfParkingSpots, + distanceToHotel, + address, +}: ParkingListProps) { + const intl = await getIntl() + return ( + + + + ) +} diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingList/parkingList.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingList/parkingList.module.css new file mode 100644 index 000000000..6e837a4fd --- /dev/null +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingList/parkingList.module.css @@ -0,0 +1,11 @@ +.listStyling { + list-style-type: none; +} + +.listStyling > li::before { + content: url("/_static/icons/heart.svg"); + position: relative; + height: 8px; + top: 3px; + margin-right: var(--Spacing-x1); +} diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx index 0fa61798e..b524c9896 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx @@ -18,7 +18,7 @@ export default async function ParkingPrices({ const night = intl.formatMessage({ id: "Price per night" }) const allDay = intl.formatMessage({ id: "Price per 24 hours" }) - function getPeriod(period: string | undefined) { + function getPeriod(period?: string) { switch (period) { case Periods.day: return day @@ -27,7 +27,7 @@ export default async function ParkingPrices({ case Periods.allDay: return allDay default: - return "" + return period } } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx index b70db205e..d706f03a8 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx @@ -4,6 +4,7 @@ import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import { getIntl } from "@/i18n" +import ParkingList from "./ParkingList" import ParkingPrices from "./ParkingPrices" import styles from "./parkingAmenity.module.css" @@ -24,23 +25,13 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
{data.type} - - - +
diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css index 04a62de0a..7535e3543 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css @@ -10,18 +10,6 @@ gap: var(--Spacing-x-one-and-half); } -.listStyling { - list-style-type: none; -} - -.listStyling > li::before { - content: url("/_static/icons/heart.svg"); - position: relative; - height: 8px; - top: 3px; - margin-right: var(--Spacing-x1); -} - .weekday, .weekend { background-color: var(--Base-Surface-Subtle-Normal); diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx index 7f35ca6e2..4026621b1 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx @@ -25,18 +25,20 @@ export default async function AmenitiesSidePeek({ const lang = getLang() const intl = await getIntl() - const filteredAmenities = amenitiesList.filter((amenity) => { - return ( - amenity.id !== FacilityEnum.ParkingAdditionalCost && - amenity.id !== FacilityEnum.ParkingElectricCharging && - amenity.id !== FacilityEnum.ParkingFreeParking && - amenity.id !== FacilityEnum.ParkingGarage && - amenity.id !== FacilityEnum.ParkingOutdoor && - amenity.id !== FacilityEnum.MeetingArea && - amenity.id !== FacilityEnum.ServesBreakfastAlwaysIncluded && - amenity.id !== FacilityEnum.LateCheckOutUntil1400Guaranteed - ) - }) + const amenitiesToRemove = [ + FacilityEnum.ParkingAdditionalCost, + FacilityEnum.ParkingElectricCharging, + FacilityEnum.ParkingFreeParking, + FacilityEnum.ParkingGarage, + FacilityEnum.ParkingOutdoor, + FacilityEnum.MeetingArea, + FacilityEnum.ServesBreakfastAlwaysIncluded, + FacilityEnum.LateCheckOutUntil1400Guaranteed, + ] + + const filteredAmenities = amenitiesList.filter( + (amenity) => !amenitiesToRemove.includes(amenity.id) + ) return (