From d2e214ed6c3c9e99ae89e59b3596c2eb44d0c2a6 Mon Sep 17 00:00:00 2001 From: Fredrik Thorsson Date: Thu, 28 Nov 2024 14:32:45 +0100 Subject: [PATCH] feat(SW-914): update parking design --- .../Parking/ParkingPrices/index.tsx | 60 ++++++++++++++++++- .../ParkingPrices/parkingPrices.module.css | 13 ++++ .../AccordionAmenities/Parking/index.tsx | 24 ++++---- .../Parking/parkingAmenity.module.css | 35 +++++++---- i18n/dictionaries/da.json | 5 ++ i18n/dictionaries/de.json | 5 ++ i18n/dictionaries/en.json | 5 ++ i18n/dictionaries/fi.json | 5 ++ i18n/dictionaries/no.json | 5 ++ i18n/dictionaries/sv.json | 5 ++ 10 files changed, 138 insertions(+), 24 deletions(-) create mode 100644 components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/parkingPrices.module.css 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} -
    +
      {data.numberOfChargingSpaces ? (
    • {`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}
      • ) : null} @@ -44,19 +46,21 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) { {intl.formatMessage({ id: "Prices" })} -
      - - {intl.formatMessage({ id: "Ordinary" })} - +
      + + {intl.formatMessage({ id: "Weekday prices" })} + +
      -
      - - {intl.formatMessage({ id: "Weekday" })} - +
      + + {intl.formatMessage({ id: "Weekend prices" })} + + 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); + border-radius: var(--Corner-radius-Medium); + padding: var(--Spacing-x2) var(--Spacing-x3); + display: grid; + gap: var(--Spacing-x1); } diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index 0ff8e2620..2970f45c5 100644 --- a/i18n/dictionaries/da.json +++ b/i18n/dictionaries/da.json @@ -286,6 +286,9 @@ "Previous victories": "Tidligere sejre", "Price": "Pris", "Price details": "Prisoplysninger", + "Price per 24 hours": "Pris per 24 timer", + "Price per day": "Pris per dag", + "Price per night": "Pris per nat", "Prices": "Priser", "Proceed to login": "Fortsæt til login", "Proceed to payment method": "Fortsæt til betalingsmetode", @@ -400,8 +403,10 @@ "We have sent a detailed confirmation of your booking to your email:": "Vi har sendt en detaljeret bekræftelse af din booking til din email:", "We look forward to your visit!": "Vi ser frem til dit besøg!", "Weekday": "Ugedag", + "Weekday prices": "Ugedagspriser", "Weekdays": "Hverdage", "Weekend": "Weekend", + "Weekend prices": "Weekendpriser", "Weekends": "Weekender", "Welcome": "Velkommen", "Welcome to": "Velkommen til", diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index 981bd5470..f9d3a0e00 100644 --- a/i18n/dictionaries/de.json +++ b/i18n/dictionaries/de.json @@ -285,6 +285,9 @@ "Previous victories": "Bisherige Siege", "Price": "Preis", "Price details": "Preisdetails", + "Price per 24 hours": "Preis pro 24 Stunden", + "Price per day": "Preis pro Tag", + "Price per night": "Preis pro Nacht", "Prices": "Preise", "Proceed to login": "Weiter zum Login", "Proceed to payment method": "Weiter zur Zahlungsmethode", @@ -399,8 +402,10 @@ "We have sent a detailed confirmation of your booking to your email:": "Wir haben eine detaillierte Bestätigung Ihrer Buchung an Ihre E-Mail gesendet:", "We look forward to your visit!": "Wir freuen uns auf Ihren Besuch!", "Weekday": "Wochentag", + "Weekday prices": "Wochentagspreise", "Weekdays": "Wochentage", "Weekend": "Wochenende", + "Weekend prices": "Wochenendpreise", "Weekends": "Wochenenden", "Welcome": "Willkommen", "Welcome to": "Willkommen zu", diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index 6ec2c0201..bdbf8f7a6 100644 --- a/i18n/dictionaries/en.json +++ b/i18n/dictionaries/en.json @@ -309,6 +309,9 @@ "Price details": "Price details", "Price excl VAT": "Price excl VAT", "Price incl VAT": "Price incl VAT", + "Price per 24 hours": "Price per 24 hours", + "Price per day": "Price per day", + "Price per night": "Price per night", "Prices": "Prices", "Print confirmation": "Print confirmation", "Proceed to login": "Proceed to login", @@ -431,8 +434,10 @@ "We have sent a detailed confirmation of your booking to your email:": "We have sent a detailed confirmation of your booking to your email: ", "We look forward to your visit!": "We look forward to your visit!", "Weekday": "Weekday", + "Weekday prices": "Weekday prices", "Weekdays": "Weekdays", "Weekend": "Weekend", + "Weekend prices": "Weekend prices", "Weekends": "Weekends", "Welcome": "Welcome", "Welcome to": "Welcome to", diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index c64090513..4586e1a8f 100644 --- a/i18n/dictionaries/fi.json +++ b/i18n/dictionaries/fi.json @@ -286,6 +286,9 @@ "Previous victories": "Edelliset voitot", "Price": "Hinta", "Price details": "Hintatiedot", + "Price per 24 hours": "Hinta per 24 tuntia", + "Price per day": "Hinta per päivä", + "Price per night": "Hinta per yö", "Prices": "Hinnat", "Proceed to login": "Jatka kirjautumiseen", "Proceed to payment method": "Siirry maksutavalle", @@ -400,8 +403,10 @@ "We have sent a detailed confirmation of your booking to your email:": "Olemme lähettäneet yksityiskohtaisen varausvahvistuksen sähköpostiisi:", "We look forward to your visit!": "Odotamme innolla vierailuasi!", "Weekday": "Arkipäivä", + "Weekday prices": "Arkisin hinnat", "Weekdays": "Arkisin", "Weekend": "Viikonloppu", + "Weekend prices": "Viikonlopun hinnat", "Weekends": "Viikonloppuisin", "Welcome": "Tervetuloa", "Welcome to": "Tervetuloa", diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index b10702eba..5d6c33d1e 100644 --- a/i18n/dictionaries/no.json +++ b/i18n/dictionaries/no.json @@ -284,6 +284,9 @@ "Previous victories": "Tidligere seire", "Price": "Pris", "Price details": "Prisdetaljer", + "Price per 24 hours": "Pris per 24 timer", + "Price per day": "Pris per dag", + "Price per night": "Pris per natt", "Prices": "Priser", "Proceed to login": "Fortsett til innlogging", "Proceed to payment method": "Fortsett til betalingsmetode", @@ -397,8 +400,10 @@ "We have sent a detailed confirmation of your booking to your email:": "Vi har sendt en detaljert bekreftelse av din bestilling til din e-post:", "We look forward to your visit!": "Vi ser frem til ditt besøk!", "Weekday": "Ukedag", + "Weekday prices": "Ukedagspriser", "Weekdays": "Hverdager", "Weekend": "Helg", + "Weekend prices": "Helgepriser", "Weekends": "Helger", "Welcome": "Velkommen", "Welcome to": "Velkommen til", diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 7f965867d..525389569 100644 --- a/i18n/dictionaries/sv.json +++ b/i18n/dictionaries/sv.json @@ -284,6 +284,9 @@ "Previous victories": "Tidigare segrar", "Price": "Pris", "Price details": "Prisdetaljer", + "Price per 24 hours": "Pris per 24 timmar", + "Price per day": "Pris per dag", + "Price per night": "Pris per natt", "Prices": "Priser", "Proceed to login": "Fortsätt till inloggning", "Proceed to payment method": "Gå vidare till betalningsmetod", @@ -397,8 +400,10 @@ "We have sent a detailed confirmation of your booking to your email:": "Vi har skickat en detaljerad bekräftelse av din bokning till din e-post:", "We look forward to your visit!": "Vi ser fram emot ditt besök!", "Weekday": "Vardag", + "Weekday prices": "Vardagspriser", "Weekdays": "Vardagar", "Weekend": "Helg", + "Weekend prices": "Helgpriser", "Weekends": "Helger", "Welcome": "Välkommen", "Welcome to": "Välkommen till",