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/ParkingPrices/index.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { useIntl } from 'react-intl'
+
+import { Typography } from '../../Typography'
+
+import { formatPrice } from '@scandic-hotels/common/utils/numberFormatting'
+
+import { type Parking, ParkingPricePeriods } from '../parkingInformationTypes'
+import { getPeriod } from './utils'
+
+import styles from './parkingPrices.module.css'
+
+interface ParkingPricesProps
+  extends Pick<Parking['pricing'], 'freeParking'>,
+    Pick<NonNullable<Parking['pricing']['localCurrency']>, 'currency'> {
+  pricing: NonNullable<Parking['pricing']['localCurrency']>['ordinary']
+}
+
+export default function ParkingPrices({
+  currency = '',
+  freeParking,
+  pricing,
+}: ParkingPricesProps) {
+  const intl = useIntl()
+
+  if (freeParking) {
+    return (
+      <Typography variant="Body/Paragraph/mdBold">
+        <p className={styles.wrapper}>
+          {intl.formatMessage({ defaultMessage: 'Free parking' })}
+        </p>
+      </Typography>
+    )
+  }
+
+  const filteredPricing = pricing.filter((price) => price.amount > 0)
+
+  if (filteredPricing.length === 0) {
+    return (
+      <dl className={styles.wrapper}>
+        <div className={styles.period}>
+          <div className={styles.information}>
+            <Typography variant="Body/Paragraph/mdBold">
+              <dt>{getPeriod(intl, 'Hour')}</dt>
+            </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <dd>
+                {intl.formatMessage({
+                  defaultMessage: 'At a cost',
+                })}
+              </dd>
+            </Typography>
+          </div>
+        </div>
+      </dl>
+    )
+  }
+
+  return (
+    <dl className={styles.wrapper}>
+      {filteredPricing.map(({ period, amount, startTime, endTime }) => (
+        <div key={period} className={styles.period}>
+          <div className={styles.information}>
+            <Typography variant="Body/Paragraph/mdBold">
+              <dt>{getPeriod(intl, period)}</dt>
+            </Typography>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <dd>{formatPrice(intl, amount, currency)}</dd>
+            </Typography>
+          </div>
+          {startTime && endTime && period !== ParkingPricePeriods.allDay ? (
+            <Typography variant="Body/Paragraph/mdRegular">
+              <div className={styles.information}>
+                <dt>{intl.formatMessage({ defaultMessage: 'From' })}</dt>
+                <dd>{`${startTime}-${endTime}`}</dd>
+              </div>
+            </Typography>
+          ) : null}
+        </div>
+      ))}
+    </dl>
+  )
+}

packages/design-system/lib/components/ParkingInformation/ParkingPrices/parkingPrices.module.css

@@ -0,0 +1,20 @@
+.wrapper {
+  display: grid;
+  row-gap: var(--Spacing-x1);
+  margin: 0;
+  color: var(--Text-Default);
+}
+
+.period {
+  display: flex;
+  gap: var(--Spacing-x5);
+}
+
+.information {
+  margin: 0;
+  flex: 1;
+}
+
+.priceHeading {
+  color: var(--Text-Secondary);
+}

packages/design-system/lib/components/ParkingInformation/ParkingPrices/utils.ts

@@ -0,0 +1,26 @@
+import { ParkingPricePeriods } from '../parkingInformationTypes'
+
+import type { IntlShape } from 'react-intl'
+
+export function getPeriod(intl: IntlShape, period?: string) {
+  switch (period) {
+    case ParkingPricePeriods.hour:
+      return intl.formatMessage({
+        defaultMessage: 'Price per hour',
+      })
+    case ParkingPricePeriods.day:
+      return intl.formatMessage({
+        defaultMessage: 'Price per day',
+      })
+    case ParkingPricePeriods.night:
+      return intl.formatMessage({
+        defaultMessage: 'Price per night',
+      })
+    case ParkingPricePeriods.allDay:
+      return intl.formatMessage({
+        defaultMessage: 'Price per 24 hours',
+      })
+    default:
+      return period
+  }
+}