Files
web/apps/scandic-web/components/ParkingInformation/index.tsx

94 lines
3.1 KiB
TypeScript

import Link from "next/link"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { getIntl } from "@/i18n"
import Button from "../TempDesignSystem/Button"
import Divider from "../TempDesignSystem/Divider"
import Caption from "../TempDesignSystem/Text/Caption"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
import ParkingList from "./ParkingList"
import ParkingPrices from "./ParkingPrices"
import styles from "./parkingInformation.module.css"
import type { Parking } from "@/types/hotel"
interface ParkingInformationProps {
parking: Parking
showExternalParkingButton?: boolean
}
export default async function ParkingInformation({
parking,
showExternalParkingButton = true,
}: ParkingInformationProps) {
const intl = await getIntl()
return (
<div className={styles.parkingInformation}>
<div className={styles.list}>
<Subtitle type="two" asChild>
<h4>{parking.type}</h4>
</Subtitle>
<ParkingList
numberOfChargingSpaces={parking.numberOfChargingSpaces}
canMakeReservation={parking.canMakeReservation}
numberOfParkingSpots={parking.numberOfParkingSpots}
distanceToHotel={parking.distanceToHotel}
address={parking.address}
/>
</div>
<div className={styles.prices}>
<Subtitle type="two" asChild>
<h5>
{intl.formatMessage({
defaultMessage: "Prices",
})}
</h5>
</Subtitle>
<div className={styles.priceWrapper}>
<Caption color="uiTextMediumContrast" textTransform="uppercase">
{intl.formatMessage({
defaultMessage: "Weekday prices",
})}
</Caption>
<Divider color="baseSurfaceSubtleHover" />
{parking.pricing.localCurrency ? (
<ParkingPrices
currency={parking.pricing.localCurrency.currency}
freeParking={parking.pricing.freeParking}
pricing={parking.pricing.localCurrency.ordinary}
/>
) : null}
</div>
<div className={styles.priceWrapper}>
<Caption color="uiTextMediumContrast" textTransform="uppercase">
{intl.formatMessage({
defaultMessage: "Weekend prices",
})}
</Caption>
<Divider color="baseSurfaceSubtleHover" />
{parking.pricing.localCurrency ? (
<ParkingPrices
currency={parking.pricing.localCurrency.currency}
freeParking={parking.pricing.freeParking}
pricing={parking.pricing.localCurrency.weekend}
/>
) : null}
</div>
</div>
{parking.externalParkingUrl && showExternalParkingButton && (
<Button theme="base" intent="primary" variant="icon" asChild>
<Link href={parking.externalParkingUrl} target="_blank">
{intl.formatMessage({
defaultMessage: "Book parking",
})}
<MaterialIcon icon="open_in_new" color="CurrentColor" />
</Link>
</Button>
)}
</div>
)
}