Merged in feat/sw-3225-move-parking-information-to-booking-flow (pull request #2614)

feat(SW-3225): Move ParkingInformation to design-system

* Inline ParkingInformation types to remove trpc dependency

* Move ParkingInformation to design-system

* Move numberFormatting to common package

* Add deps to external

* Fix imports and i18n script

* Add common as dependency

* Merge branch 'master' into feat/sw-3225-move-parking-information-to-booking-flow


Approved-by: Linus Flood

packages/design-system/lib/components/ParkingInformation/index.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useIntl } from 'react-intl'
+
+import { Divider } from '../Divider'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
+import ButtonLink from '../ButtonLink'
+import ParkingList from './ParkingList'
+import ParkingPrices from './ParkingPrices'
+
+import styles from './parkingInformation.module.css'
+
+import type { Parking } from './parkingInformationTypes'
+
+type ParkingInformationProps = {
+  parking: Parking
+  showExternalParkingButton?: boolean
+}
+
+export default function ParkingInformation({
+  parking,
+  showExternalParkingButton = true,
+}: ParkingInformationProps) {
+  const intl = useIntl()
+  const title = `${parking.type}${parking.name ? ` (${parking.name})` : ''}`
+
+  return (
+    <div className={styles.parkingInformation}>
+      <div className={styles.list}>
+        <Typography variant="Title/Subtitle/md">
+          <h4 className={styles.heading}>{title}</h4>
+        </Typography>
+        <ParkingList
+          numberOfChargingSpaces={parking.numberOfChargingSpaces}
+          canMakeReservation={parking.canMakeReservation}
+          numberOfParkingSpots={parking.numberOfParkingSpots}
+          distanceToHotel={parking.distanceToHotel}
+          address={parking.address}
+        />
+      </div>
+      <div className={styles.prices}>
+        <Typography variant="Body/Paragraph/mdBold">
+          <h5 className={styles.heading}>
+            {intl.formatMessage({ defaultMessage: 'Prices' })}
+          </h5>
+        </Typography>
+        <div className={styles.priceWrapper}>
+          <Typography variant="Title/Overline/sm">
+            <h6 className={styles.priceHeading}>
+              {intl.formatMessage({ defaultMessage: 'Weekday prices' })}
+            </h6>
+          </Typography>
+          <Divider />
+          {parking.pricing.localCurrency ? (
+            <ParkingPrices
+              currency={parking.pricing.localCurrency.currency}
+              freeParking={parking.pricing.freeParking}
+              pricing={parking.pricing.localCurrency.ordinary}
+            />
+          ) : null}
+        </div>
+        <div className={styles.priceWrapper}>
+          <Typography variant="Title/Overline/sm">
+            <h6 className={styles.priceHeading}>
+              {intl.formatMessage({ defaultMessage: 'Weekend prices' })}
+            </h6>
+          </Typography>
+          <Divider />
+          {parking.pricing.localCurrency ? (
+            <ParkingPrices
+              currency={parking.pricing.localCurrency.currency}
+              freeParking={parking.pricing.freeParking}
+              pricing={parking.pricing.localCurrency.weekend}
+            />
+          ) : null}
+        </div>
+      </div>
+      {parking.externalParkingUrl && showExternalParkingButton && (
+        <ButtonLink
+          typography="Body/Paragraph/mdBold"
+          href={parking.externalParkingUrl}
+          target="_blank"
+        >
+          {intl.formatMessage({ defaultMessage: 'Book parking' })}
+          <MaterialIcon icon="open_in_new" color="CurrentColor" />
+        </ButtonLink>
+      )}
+    </div>
+  )
+}