feat(SW-1901): Adjusted parking pricing on hotel pages
Approved-by: Michael Zetterberg Approved-by: Matilda Landström
This commit is contained in:
@@ -22,41 +22,60 @@ export default function ParkingPrices({
|
||||
}: ParkingPricesProps) {
|
||||
const intl = useIntl()
|
||||
|
||||
return freeParking ? (
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p className={styles.wrapper}>
|
||||
{intl.formatMessage({ defaultMessage: "Free parking" })}
|
||||
</p>
|
||||
</Typography>
|
||||
) : (
|
||||
<dl className={styles.wrapper}>
|
||||
{pricing?.map((parking) => (
|
||||
<div key={parking.period} className={styles.period}>
|
||||
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, parking.period)}</dt>
|
||||
<dt>{getPeriod(intl, "Hour")}</dt>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<dd>
|
||||
{parking.amount
|
||||
? formatPrice(intl, parking.amount, currency)
|
||||
: intl.formatMessage({
|
||||
defaultMessage: "At a cost",
|
||||
})}
|
||||
{intl.formatMessage({
|
||||
defaultMessage: "At a cost",
|
||||
})}
|
||||
</dd>
|
||||
</Typography>
|
||||
</div>
|
||||
{parking.startTime &&
|
||||
parking.endTime &&
|
||||
parking.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>{`${parking.startTime}-${parking.endTime}`}</dd>
|
||||
</div>
|
||||
</Typography>
|
||||
)}
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user