feat(SW-914): add parking
This commit is contained in:
Fredrik Thorsson
@@ -1,16 +0,0 @@
|
||||
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
||||
import { getIntl } from "@/i18n"
|
||||
|
||||
import { IconName } from "@/types/components/icon"
|
||||
|
||||
export default async function MeetingsAmenity() {
|
||||
const intl = await getIntl()
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({ id: "Meetings & Conferences" })}
|
||||
icon={IconName.Business}
|
||||
>
|
||||
Meeting and Conferences
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
@@ -1,16 +1,123 @@
|
||||
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import { getIntl } from "@/i18n"
|
||||
|
||||
import styles from "./parking.module.css"
|
||||
|
||||
import { ParkingProps } from "@/types/components/hotelPage/sidepeek/parking"
|
||||
import { IconName } from "@/types/components/icon"
|
||||
|
||||
export default async function ParkingAmenity() {
|
||||
export default async function ParkingAmenity({ parking }: ParkingProps) {
|
||||
const intl = await getIntl()
|
||||
const hour = intl.formatMessage({ id: "per hour during" })
|
||||
const day = intl.formatMessage({ id: "per day during" })
|
||||
const night = intl.formatMessage({ id: "per night during" })
|
||||
const allDay = intl.formatMessage({ id: "per whole day" })
|
||||
|
||||
function translatePeriods(period: string) {
|
||||
switch (period) {
|
||||
case "Hour":
|
||||
return hour
|
||||
case "Day":
|
||||
return day
|
||||
case "Night":
|
||||
return night
|
||||
case "AllDay":
|
||||
return allDay
|
||||
}
|
||||
}
|
||||
|
||||
const test = parking.map((data) => data.pricing.localCurrency.range)
|
||||
console.log("dfafda", test)
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
title={intl.formatMessage({ id: "Parking" })}
|
||||
icon={IconName.Parking}
|
||||
>
|
||||
Parking
|
||||
<div className={styles.wrapper}>
|
||||
{parking.map((data) => (
|
||||
<>
|
||||
<div key={data.type} className={styles.information}>
|
||||
<Body textTransform="bold">{`${data.type} (${data.name})`}</Body>
|
||||
<Body color="uiTextHighContrast" asChild>
|
||||
<ul>
|
||||
{data.numberOfChargingSpaces && (
|
||||
<li>{`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}</li>
|
||||
)}
|
||||
{data.canMakeReservation && (
|
||||
<li>{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${data.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}</li>
|
||||
)}
|
||||
{data.numberOfParkingSpots && (
|
||||
<li>{`${intl.formatMessage({ id: "Number of parking spots" })}: ${data.numberOfParkingSpots}`}</li>
|
||||
)}
|
||||
{data.distanceToHotel && (
|
||||
<li>{`${intl.formatMessage({ id: "Distance to hotel" })}: ${data.distanceToHotel}`}</li>
|
||||
)}
|
||||
{data.address && (
|
||||
<li>{`${intl.formatMessage({ id: "Address" })}: ${data.address}`}</li>
|
||||
)}
|
||||
</ul>
|
||||
</Body>
|
||||
</div>
|
||||
<div>
|
||||
<Body textTransform="bold">
|
||||
{intl.formatMessage({ id: "Prices" })}
|
||||
</Body>
|
||||
<div className={styles.prices}>
|
||||
<div>
|
||||
{data.pricing.localCurrency.ordinary && (
|
||||
<>
|
||||
<Body color="uiTextMediumContrast">
|
||||
{intl.formatMessage({ id: "Weekday" })}
|
||||
</Body>
|
||||
{data.pricing.localCurrency.ordinary.map((ordinary) => {
|
||||
return (
|
||||
ordinary.amount &&
|
||||
ordinary.period &&
|
||||
ordinary.startTime &&
|
||||
ordinary.endTime && (
|
||||
<Body
|
||||
key={ordinary.period}
|
||||
color="uiTextHighContrast"
|
||||
>
|
||||
{`${ordinary.amount} ${translatePeriods(ordinary.period)} ${ordinary.startTime}-${ordinary.endTime}`}
|
||||
</Body>
|
||||
)
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{data.pricing.localCurrency.weekend && (
|
||||
<>
|
||||
<Body color="uiTextMediumContrast">
|
||||
{intl.formatMessage({ id: "Weekday" })}
|
||||
</Body>
|
||||
{data.pricing.localCurrency.weekend.map((weekend) => {
|
||||
return (
|
||||
weekend.amount &&
|
||||
weekend.period &&
|
||||
weekend.startTime &&
|
||||
weekend.endTime && (
|
||||
<Body
|
||||
key={weekend.period}
|
||||
color="uiTextHighContrast"
|
||||
>
|
||||
{`${weekend.amount} ${translatePeriods(weekend.period)} ${weekend.startTime}-${weekend.endTime}`}
|
||||
</Body>
|
||||
)
|
||||
)
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</AccordionItem>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.information {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x-one-and-half);
|
||||
}
|
||||
|
||||
.prices {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
export { default as AccessibilityAmenity } from "./Accessibility"
|
||||
export { default as BreakfastAmenity } from "./Breakfast"
|
||||
export { default as CheckInCheckOutAmenity } from "./CheckInCheckOut"
|
||||
export { default as MeetingsAmenity } from "./Meetings"
|
||||
export { default as ParkingAmenity } from "./Parking"
|
||||
|
||||
@@ -10,7 +10,7 @@ import type { AmenityProps } from "@/types/components/hotelPage/sidepeek/amenity
|
||||
export default function Amenity({ filteredAmenities }: AmenityProps) {
|
||||
return (
|
||||
<>
|
||||
{filteredAmenities.map((amenity) => {
|
||||
{filteredAmenities?.map((amenity) => {
|
||||
const Icon = mapFacilityToIcon(amenity.id)
|
||||
return (
|
||||
<div key={amenity.name} className={styles.wrapper}>
|
||||
|
||||
@@ -9,7 +9,6 @@ import {
|
||||
AccessibilityAmenity,
|
||||
BreakfastAmenity,
|
||||
CheckInCheckOutAmenity,
|
||||
MeetingsAmenity,
|
||||
ParkingAmenity,
|
||||
} from "./AccordionAmenities"
|
||||
import Amenity from "./Amenity"
|
||||
@@ -18,14 +17,18 @@ import type { AmenitiesSidePeekProps } from "@/types/components/hotelPage/sidepe
|
||||
|
||||
export default async function AmenitiesSidePeek({
|
||||
amenitiesList,
|
||||
parking,
|
||||
}: AmenitiesSidePeekProps) {
|
||||
const lang = getLang()
|
||||
const intl = await getIntl()
|
||||
|
||||
const filteredAmenities = amenitiesList
|
||||
.filter((filter) => !filter.name.startsWith("Parking"))
|
||||
.filter((filter) => !filter.name.startsWith("Meeting"))
|
||||
.filter((filter) => filter.name !== "Late check-out until 14:00 guaranteed")
|
||||
const filteredAmenities = amenitiesList?.filter((filter) => {
|
||||
return (
|
||||
!filter.name.startsWith("Parking") &&
|
||||
filter.name !== "Meeting / conference facilities" &&
|
||||
filter.name !== "Late check-out until 14:00 guaranteed"
|
||||
)
|
||||
})
|
||||
|
||||
return (
|
||||
<SidePeek
|
||||
@@ -33,11 +36,10 @@ export default async function AmenitiesSidePeek({
|
||||
title={intl.formatMessage({ id: "Amenities" })}
|
||||
>
|
||||
<Accordion>
|
||||
<ParkingAmenity />
|
||||
{parking?.length ? <ParkingAmenity parking={parking} /> : null}
|
||||
<BreakfastAmenity />
|
||||
<CheckInCheckOutAmenity />
|
||||
<AccessibilityAmenity />
|
||||
<MeetingsAmenity />
|
||||
<Amenity filteredAmenities={filteredAmenities} />
|
||||
</Accordion>
|
||||
</SidePeek>
|
||||
|
||||
Reference in New Issue
Block a user