84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { formatPrice } from "@/utils/numberFormatting"
|
|
|
|
import { getPeriod } from "./utils"
|
|
|
|
import styles from "./parkingPrices.module.css"
|
|
|
|
import {
|
|
type ParkingPricesProps,
|
|
Periods,
|
|
} from "@/types/components/hotelPage/sidepeek/parking"
|
|
|
|
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 !== Periods.allDay ? (
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<div className={styles.information}>
|
|
<dt>{intl.formatMessage({ defaultMessage: "From" })}</dt>
|
|
{/* eslint-disable formatjs/no-literal-string-in-jsx */}
|
|
<dd>{`${startTime}-${endTime}`}</dd>
|
|
</div>
|
|
</Typography>
|
|
) : null}
|
|
</div>
|
|
))}
|
|
</dl>
|
|
)
|
|
}
|