55622f582c
- Use new tokens - Make button text bold in parking information (as in Figma) - Make local call charges a reusable component - Adds mountain facility icon - Hide “Follow us” when the hotel doesn’t have any linked socials, to avoid empty heading Approved-by: Erik Tiekstra
94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Divider } from "@scandic-hotels/design-system/Divider"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import ButtonLink from "@/components/ButtonLink"
|
|
|
|
import ParkingList from "./ParkingList"
|
|
import ParkingPrices from "./ParkingPrices"
|
|
|
|
import styles from "./parkingInformation.module.css"
|
|
|
|
import type { Parking } from "@scandic-hotels/trpc/types/hotel"
|
|
|
|
interface ParkingInformationProps {
|
|
parking: Parking
|
|
showExternalParkingButton?: boolean
|
|
}
|
|
|
|
export default function ParkingInformation({
|
|
parking,
|
|
showExternalParkingButton = true,
|
|
}: ParkingInformationProps) {
|
|
const intl = useIntl()
|
|
const title = `${parking.type}${parking.name ? ` (${parking.name})` : ""}`
|
|
|
|
return (
|
|
<div className={styles.parkingInformation}>
|
|
<div className={styles.list}>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<h4 className={styles.heading}>{title}</h4>
|
|
</Typography>
|
|
<ParkingList
|
|
numberOfChargingSpaces={parking.numberOfChargingSpaces}
|
|
canMakeReservation={parking.canMakeReservation}
|
|
numberOfParkingSpots={parking.numberOfParkingSpots}
|
|
distanceToHotel={parking.distanceToHotel}
|
|
address={parking.address}
|
|
/>
|
|
</div>
|
|
<div className={styles.prices}>
|
|
<Typography variant="Body/Paragraph/mdBold">
|
|
<h5 className={styles.heading}>
|
|
{intl.formatMessage({ defaultMessage: "Prices" })}
|
|
</h5>
|
|
</Typography>
|
|
<div className={styles.priceWrapper}>
|
|
<Typography variant="Title/Overline/sm">
|
|
<h6 className={styles.priceHeading}>
|
|
{intl.formatMessage({ defaultMessage: "Weekday prices" })}
|
|
</h6>
|
|
</Typography>
|
|
<Divider />
|
|
{parking.pricing.localCurrency ? (
|
|
<ParkingPrices
|
|
currency={parking.pricing.localCurrency.currency}
|
|
freeParking={parking.pricing.freeParking}
|
|
pricing={parking.pricing.localCurrency.ordinary}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
<div className={styles.priceWrapper}>
|
|
<Typography variant="Title/Overline/sm">
|
|
<h6 className={styles.priceHeading}>
|
|
{intl.formatMessage({ defaultMessage: "Weekend prices" })}
|
|
</h6>
|
|
</Typography>
|
|
<Divider />
|
|
{parking.pricing.localCurrency ? (
|
|
<ParkingPrices
|
|
currency={parking.pricing.localCurrency.currency}
|
|
freeParking={parking.pricing.freeParking}
|
|
pricing={parking.pricing.localCurrency.weekend}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
{parking.externalParkingUrl && showExternalParkingButton && (
|
|
<ButtonLink
|
|
typography="Body/Paragraph/mdBold"
|
|
href={parking.externalParkingUrl}
|
|
target="_blank"
|
|
>
|
|
{intl.formatMessage({ defaultMessage: "Book parking" })}
|
|
<MaterialIcon icon="open_in_new" color="CurrentColor" />
|
|
</ButtonLink>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|