feat(SW-1901): Adjusted parking pricing on hotel pages

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-06-03 05:27:41 +00:00
parent 726ea44105
commit 958906d3bf

View File

@@ -22,41 +22,60 @@ export default function ParkingPrices({
}: ParkingPricesProps) { }: ParkingPricesProps) {
const intl = useIntl() const intl = useIntl()
return freeParking ? ( if (freeParking) {
<Typography variant="Body/Paragraph/mdBold"> return (
<p className={styles.wrapper}> <Typography variant="Body/Paragraph/mdBold">
{intl.formatMessage({ defaultMessage: "Free parking" })} <p className={styles.wrapper}>
</p> {intl.formatMessage({ defaultMessage: "Free parking" })}
</Typography> </p>
) : ( </Typography>
<dl className={styles.wrapper}> )
{pricing?.map((parking) => ( }
<div key={parking.period} className={styles.period}>
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}> <div className={styles.information}>
<Typography variant="Body/Paragraph/mdBold"> <Typography variant="Body/Paragraph/mdBold">
<dt>{getPeriod(intl, parking.period)}</dt> <dt>{getPeriod(intl, "Hour")}</dt>
</Typography> </Typography>
<Typography variant="Body/Paragraph/mdRegular"> <Typography variant="Body/Paragraph/mdRegular">
<dd> <dd>
{parking.amount {intl.formatMessage({
? formatPrice(intl, parking.amount, currency) defaultMessage: "At a cost",
: intl.formatMessage({ })}
defaultMessage: "At a cost",
})}
</dd> </dd>
</Typography> </Typography>
</div> </div>
{parking.startTime && </div>
parking.endTime && </dl>
parking.period !== Periods.allDay && ( )
<Typography variant="Body/Paragraph/mdRegular"> }
<div className={styles.information}>
<dt>{intl.formatMessage({ defaultMessage: "From" })}</dt> return (
{/* eslint-disable formatjs/no-literal-string-in-jsx */} <dl className={styles.wrapper}>
<dd>{`${parking.startTime}-${parking.endTime}`}</dd> {filteredPricing.map(({ period, amount, startTime, endTime }) => (
</div> <div key={period} className={styles.period}>
</Typography> <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> </div>
))} ))}
</dl> </dl>