Merged in feat/SW-1062-parking-page (pull request #1242)

Feat/SW-1062 parking page * feat(SW-1062): Added parking sub page Approved-by: Christian Andolf Approved-by: Fredrik Thorsson
2025-02-04 11:11:51 +00:00
parent 2e311be924
commit c4eafa419b
21 changed files with 393 additions and 87 deletions
--- a/components/ParkingInformation/ParkingPrices/index.tsx
+++ b/components/ParkingInformation/ParkingPrices/index.tsx
@@ -0,0 +1,69 @@
+import Body from "@/components/TempDesignSystem/Text/Body"
+import { getIntl } from "@/i18n"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import styles from "./parkingPrices.module.css"
+
+import {
+  type ParkingPricesProps,
+  Periods,
+} from "@/types/components/hotelPage/sidepeek/parking"
+
+export default async function ParkingPrices({
+  currency = "",
+  freeParking,
+  pricing,
+}: 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) {
+    switch (period) {
+      case Periods.day:
+        return day
+      case Periods.night:
+        return night
+      case Periods.allDay:
+        return allDay
+      default:
+        return period
+    }
+  }
+
+  const filteredPeriods = pricing?.filter((filter) => filter.period !== "Hour")
+
+  return (
+    <div className={styles.wrapper}>
+      {filteredPeriods?.map((parking) => (
+        <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
+                ? freeParking
+                  ? intl.formatMessage({ id: "Free parking" })
+                  : formatPrice(intl, parking.amount, currency)
+                : intl.formatMessage({ id: "N/A" })}
+            </Body>
+          </div>
+          {parking.startTime &&
+            parking.endTime &&
+            parking.period !== Periods.allDay && (
+              <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/ParkingInformation/ParkingPrices/parkingPrices.module.css
+++ b/components/ParkingInformation/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;
+}