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 d4ff915df..0edf4acba 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx @@ -1,6 +1,60 @@ +import Body from "@/components/TempDesignSystem/Text/Body" +import { getIntl } from "@/i18n" + +import styles from "./parkingPrices.module.css" + import type { ParkingPricesProps } from "@/types/components/hotelPage/sidepeek/parking" -export default async function ParkingPrices({ data }: ParkingPricesProps) { - // TODO: Parking prices to be implemented. - return
+export default async function ParkingPrices({ + data, + currency, +}: ParkingPricesProps) { + const intl = await getIntl() + const day = intl.formatMessage({ id: "Price per day" }) + const night = intl.formatMessage({ id: "Price per night" }) + const allDay = intl.formatMessage({ id: "Price per 24 hours" }) + + function getPeriod(period: string | undefined) { + switch (period) { + case "Day": + return day + case "Night": + return night + case "AllDay": + return allDay + } + } + + const filterdPeriods = data?.filter((filter) => filter.period !== "Hour") + + console.log("Parking log:", data) + + return ( +
+ {filterdPeriods?.map((parking) => { + return ( +
+
+ + {getPeriod(parking.period)} + + + {`${parking.amount} ${currency}`} + +
+ {parking.startTime && parking.endTime && ( +
+ + {intl.formatMessage({ id: "From" })} + + + {parking.startTime}-{parking.endTime} + +
+ )} +
+ ) + })} +
+ ) } diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/parkingPrices.module.css b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/parkingPrices.module.css new file mode 100644 index 000000000..436e883ec --- /dev/null +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/parkingPrices.module.css @@ -0,0 +1,13 @@ +.wrapper { + display: grid; + row-gap: var(--Spacing-x1); +} + +.period { + display: flex; + gap: var(--Spacing-x5); +} + +.information { + flex: 1; +} diff --git a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx index 37c443770..a72d61255 100644 --- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx +++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx @@ -1,5 +1,7 @@ import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem" +import Divider from "@/components/TempDesignSystem/Divider" import Body from "@/components/TempDesignSystem/Text/Body" +import Caption from "@/components/TempDesignSystem/Text/Caption" import { getIntl } from "@/i18n" import ParkingPrices from "./ParkingPrices" @@ -21,9 +23,9 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) { {parking.map((data) => (
- {`${data.type} ${data.name}`} + {data.type} -