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

components/ParkingInformation/index.tsx

@@ -0,0 +1,78 @@
+import Link from "next/link"
+
+import { getIntl } from "@/i18n"
+
+import { OpenInNewIcon } from "../Icons"
+import Button from "../TempDesignSystem/Button"
+import Divider from "../TempDesignSystem/Divider"
+import Caption from "../TempDesignSystem/Text/Caption"
+import Subtitle from "../TempDesignSystem/Text/Subtitle"
+import ParkingList from "./ParkingList"
+import ParkingPrices from "./ParkingPrices"
+
+import styles from "./parkingInformation.module.css"
+
+import type { Parking } from "@/types/hotel"
+
+interface ParkingInformationProps {
+  parking: Parking
+  showExternalParkingButton?: boolean
+}
+
+export default async function ParkingInformation({
+  parking,
+  showExternalParkingButton = true,
+}: ParkingInformationProps) {
+  const intl = await getIntl()
+  return (
+    <div className={styles.parkingInformation}>
+      <div className={styles.list}>
+        <Subtitle type="two" asChild>
+          <h4>{parking.type}</h4>
+        </Subtitle>
+        <ParkingList
+          numberOfChargingSpaces={parking.numberOfChargingSpaces}
+          canMakeReservation={parking.canMakeReservation}
+          numberOfParkingSpots={parking.numberOfParkingSpots}
+          distanceToHotel={parking.distanceToHotel}
+          address={parking.address}
+        />
+      </div>
+      <div className={styles.prices}>
+        <Subtitle type="two" asChild>
+          <h5>{intl.formatMessage({ id: "Prices" })}</h5>
+        </Subtitle>
+        <div className={styles.priceWrapper}>
+          <Caption color="uiTextMediumContrast" textTransform="uppercase">
+            {intl.formatMessage({ id: "Weekday prices" })}
+          </Caption>
+          <Divider color="baseSurfaceSubtleHover" />
+          <ParkingPrices
+            pricing={parking.pricing.localCurrency?.ordinary}
+            currency={parking.pricing.localCurrency?.currency}
+            freeParking={parking.pricing.freeParking}
+          />
+        </div>
+        <div className={styles.priceWrapper}>
+          <Caption color="uiTextMediumContrast" textTransform="uppercase">
+            {intl.formatMessage({ id: "Weekend prices" })}
+          </Caption>
+          <Divider color="baseSurfaceSubtleHover" />
+          <ParkingPrices
+            pricing={parking.pricing.localCurrency?.weekend}
+            currency={parking.pricing.localCurrency?.currency}
+            freeParking={parking.pricing.freeParking}
+          />
+        </div>
+      </div>
+      {parking.externalParkingUrl && showExternalParkingButton && (
+        <Button theme="base" intent="primary" variant="icon" asChild>
+          <Link href={parking.externalParkingUrl} target="_blank">
+            {intl.formatMessage({ id: "Book parking" })}
+            <OpenInNewIcon />
+          </Link>
+        </Button>
+      )}
+    </div>
+  )
+}