c4eafa419b
Feat/SW-1062 parking page * feat(SW-1062): Added parking sub page Approved-by: Christian Andolf Approved-by: Fredrik Thorsson
70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import { getIntl } from "@/i18n"
|
|
import { formatPrice } from "@/utils/numberFormatting"
|
|
|
|
import styles from "./parkingPrices.module.css"
|
|
|
|
import {
|
|
type ParkingPricesProps,
|
|
Periods,
|
|
} from "@/types/components/hotelPage/sidepeek/parking"
|
|
|
|
export default async function ParkingPrices({
|
|
currency = "",
|
|
freeParking,
|
|
pricing,
|
|
}: ParkingPricesProps) {
|
|
const intl = await getIntl()
|
|
const day = intl.formatMessage({ id: "Price per day" })
|
|
const night = intl.formatMessage({ id: "Price per night" })
|
|
const allDay = intl.formatMessage({ id: "Price per 24 hours" })
|
|
|
|
function getPeriod(period?: string) {
|
|
switch (period) {
|
|
case Periods.day:
|
|
return day
|
|
case Periods.night:
|
|
return night
|
|
case Periods.allDay:
|
|
return allDay
|
|
default:
|
|
return period
|
|
}
|
|
}
|
|
|
|
const filteredPeriods = pricing?.filter((filter) => filter.period !== "Hour")
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
{filteredPeriods?.map((parking) => (
|
|
<div key={parking.period} className={styles.period}>
|
|
<div className={styles.information}>
|
|
<Body textTransform="bold" color="uiTextHighContrast">
|
|
{getPeriod(parking.period)}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{parking.amount
|
|
? freeParking
|
|
? intl.formatMessage({ id: "Free parking" })
|
|
: formatPrice(intl, parking.amount, currency)
|
|
: intl.formatMessage({ id: "N/A" })}
|
|
</Body>
|
|
</div>
|
|
{parking.startTime &&
|
|
parking.endTime &&
|
|
parking.period !== Periods.allDay && (
|
|
<div className={styles.information}>
|
|
<Body color="uiTextHighContrast">
|
|
{intl.formatMessage({ id: "From" })}
|
|
</Body>
|
|
<Body color="uiTextHighContrast">
|
|
{`${parking.startTime}-${parking.endTime}`}
|
|
</Body>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|