Merged in feat/SW-1062-parking-page (pull request #1242)
Feat/SW-1062 parking page * feat(SW-1062): Added parking sub page Approved-by: Christian Andolf Approved-by: Fredrik Thorsson
This commit is contained in:
Erik Tiekstra
64
components/ParkingInformation/ParkingList/index.tsx
Normal file
64
components/ParkingInformation/ParkingList/index.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import { getIntl } from "@/i18n"
|
||||
|
||||
import styles from "./parkingList.module.css"
|
||||
|
||||
import type { ParkingListProps } from "@/types/components/hotelPage/sidepeek/parking"
|
||||
|
||||
export default async function ParkingList({
|
||||
numberOfChargingSpaces,
|
||||
canMakeReservation,
|
||||
numberOfParkingSpots,
|
||||
distanceToHotel,
|
||||
address,
|
||||
}: ParkingListProps) {
|
||||
const intl = await getIntl()
|
||||
|
||||
const canMakeReservationYesMsg = intl.formatMessage({
|
||||
id: "Parking can be reserved in advance: Yes",
|
||||
})
|
||||
const canMakeReservationNoMsg = intl.formatMessage({
|
||||
id: "Parking can be reserved in advance: No",
|
||||
})
|
||||
|
||||
return (
|
||||
<Body color="uiTextHighContrast" asChild>
|
||||
<ul className={styles.listStyling}>
|
||||
{numberOfChargingSpaces ? (
|
||||
<li>
|
||||
{intl.formatMessage(
|
||||
{ id: "Number of charging points for electric cars: {number}" },
|
||||
{ number: numberOfChargingSpaces }
|
||||
)}
|
||||
</li>
|
||||
) : null}
|
||||
<li>
|
||||
{canMakeReservation
|
||||
? canMakeReservationYesMsg
|
||||
: canMakeReservationNoMsg}
|
||||
</li>
|
||||
{numberOfParkingSpots ? (
|
||||
<li>
|
||||
{intl.formatMessage(
|
||||
{ id: "Number of parking spots: {number}" },
|
||||
{ number: numberOfParkingSpots }
|
||||
)}
|
||||
</li>
|
||||
) : null}
|
||||
{distanceToHotel ? (
|
||||
<li>
|
||||
{intl.formatMessage(
|
||||
{ id: "Distance to hotel: {distanceInM} m" },
|
||||
{ distanceInM: distanceToHotel }
|
||||
)}
|
||||
</li>
|
||||
) : null}
|
||||
{address ? (
|
||||
<li>
|
||||
{intl.formatMessage({ id: "Address: {address}" }, { address })}
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</Body>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
.listStyling {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.listStyling > li::before {
|
||||
content: url("/_static/icons/heart.svg");
|
||||
position: relative;
|
||||
height: 8px;
|
||||
top: 3px;
|
||||
margin-right: var(--Spacing-x1);
|
||||
}
|
||||
69
components/ParkingInformation/ParkingPrices/index.tsx
Normal file
69
components/ParkingInformation/ParkingPrices/index.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.wrapper {
|
||||
display: grid;
|
||||
row-gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
.period {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x5);
|
||||
}
|
||||
|
||||
.information {
|
||||
flex: 1;
|
||||
}
|
||||
78
components/ParkingInformation/index.tsx
Normal file
78
components/ParkingInformation/index.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import Link from "next/link"
|
||||
|
||||
import { getIntl } from "@/i18n"
|
||||
|
||||
import { OpenInNewIcon } from "../Icons"
|
||||
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({ id: "Prices" })}</h5>
|
||||
</Subtitle>
|
||||
<div className={styles.priceWrapper}>
|
||||
<Caption color="uiTextMediumContrast" textTransform="uppercase">
|
||||
{intl.formatMessage({ id: "Weekday prices" })}
|
||||
</Caption>
|
||||
<Divider color="baseSurfaceSubtleHover" />
|
||||
<ParkingPrices
|
||||
pricing={parking.pricing.localCurrency?.ordinary}
|
||||
currency={parking.pricing.localCurrency?.currency}
|
||||
freeParking={parking.pricing.freeParking}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.priceWrapper}>
|
||||
<Caption color="uiTextMediumContrast" textTransform="uppercase">
|
||||
{intl.formatMessage({ id: "Weekend prices" })}
|
||||
</Caption>
|
||||
<Divider color="baseSurfaceSubtleHover" />
|
||||
<ParkingPrices
|
||||
pricing={parking.pricing.localCurrency?.weekend}
|
||||
currency={parking.pricing.localCurrency?.currency}
|
||||
freeParking={parking.pricing.freeParking}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{parking.externalParkingUrl && showExternalParkingButton && (
|
||||
<Button theme="base" intent="primary" variant="icon" asChild>
|
||||
<Link href={parking.externalParkingUrl} target="_blank">
|
||||
{intl.formatMessage({ id: "Book parking" })}
|
||||
<OpenInNewIcon />
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
18
components/ParkingInformation/parkingInformation.module.css
Normal file
18
components/ParkingInformation/parkingInformation.module.css
Normal file
@@ -0,0 +1,18 @@
|
||||
.parkingInformation {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.list,
|
||||
.prices {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x-one-and-half);
|
||||
}
|
||||
|
||||
.priceWrapper {
|
||||
background-color: var(--Base-Surface-Subtle-Normal);
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
padding: var(--Spacing-x2) var(--Spacing-x3);
|
||||
display: grid;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
Reference in New Issue
Block a user