feat(SW-914): update parking design

2024-11-28 14:32:45 +01:00
parent 7b68bc7ac7
commit d2e214ed6c
10 changed files with 138 additions and 24 deletions
--- 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 <div></div>
+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 (
+    <div className={styles.wrapper}>
+      {filterdPeriods?.map((parking) => {
+        return (
+          <div key={parking.period} className={styles.period}>
+            <div className={styles.information}>
+              <Body textTransform="bold" color="uiTextHighContrast">
+                {getPeriod(parking.period)}
+              </Body>
+              <Body color="uiTextHighContrast">
+                {`${parking.amount} ${currency}`}
+              </Body>
+            </div>
+            {parking.startTime && parking.endTime && (
+              <div className={styles.information}>
+                <Body color="uiTextHighContrast">
+                  {intl.formatMessage({ id: "From" })}
+                </Body>
+                <Body color="uiTextHighContrast">
+                  {parking.startTime}-{parking.endTime}
+                </Body>
+              </div>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
 }
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/parkingPrices.module.css
+++ 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;
+}
--- 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) => (
          <div key={data.type} className={styles.information}>
            <div className={styles.list}>
-              <Body textTransform="bold">{`${data.type} ${data.name}`}</Body>
+              <Body textTransform="bold">{data.type}</Body>
              <Body color="uiTextHighContrast" asChild>
-                <ul>
+                <ul className={styles.listStyling}>
                  {data.numberOfChargingSpaces ? (
                    <li>{`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}</li>
                  ) : null}
@@ -44,19 +46,21 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
              <Body textTransform="bold">
                {intl.formatMessage({ id: "Prices" })}
              </Body>
-              <div>
-                <Body color="uiTextMediumContrast">
-                  {intl.formatMessage({ id: "Ordinary" })}
-                </Body>
+              <div className={styles.weekday}>
+                <Caption color="uiTextMediumContrast" textTransform="uppercase">
+                  {intl.formatMessage({ id: "Weekday prices" })}
+                </Caption>
+                <Divider color="baseSurfaceSutbleHover" />
                <ParkingPrices
                  data={data.pricing.localCurrency.ordinary}
                  currency={data.pricing.localCurrency.currency}
                />
              </div>
-              <div>
-                <Body color="uiTextMediumContrast">
-                  {intl.formatMessage({ id: "Weekday" })}
-                </Body>
+              <div className={styles.weekend}>
+                <Caption color="uiTextMediumContrast" textTransform="uppercase">
+                  {intl.formatMessage({ id: "Weekend prices" })}
+                </Caption>
+                <Divider color="baseSurfaceSutbleHover" />
                <ParkingPrices
                  data={data.pricing.localCurrency.weekend}
                  currency={data.pricing.localCurrency.currency}
--- a/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css
+++ b/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css
@@ -1,19 +1,32 @@
 .wrapper {
-  display: flex;
-  flex-direction: column;
+  display: grid;
  gap: var(--Spacing-x3);
-  overflow: hidden;
 }

-.information {
-  display: flex;
-  flex-direction: column;
+.information,
+.list,
+.prices {
+  display: grid;
  gap: var(--Spacing-x-one-and-half);
 }

-.list,
-.prices {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-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);
+  border-radius: var(--Corner-radius-Medium);
+  padding: var(--Spacing-x2) var(--Spacing-x3);
+  display: grid;
+  gap: var(--Spacing-x1);
 }
--- 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",
--- 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",
--- 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",
--- 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": "Arkipäivä",
+  "Weekday prices": "Arkisin hinnat",
  "Weekdays": "Arkisin",
  "Weekend": "Viikonloppu",
+  "Weekend prices": "Viikonlopun hinnat",
  "Weekends": "Viikonloppuisin",
  "Welcome": "Tervetuloa",
  "Welcome to": "Tervetuloa",
--- 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",
--- 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",