scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-914): add parking prices component

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-11-27 09:23:52 +01:00
parent 29e56d35eb
commit 9b208d01ea
3 changed files with 64 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { getIntl } from "@/i18n"
import { ParkingPricesProps } from "@/types/components/hotelPage/sidepeek/parking"
export default async function ParkingPrices({ data }: ParkingPricesProps) {
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
}
}
return (
<>
{data?.map((price) => {
return price.amount && <div>hello</div>
})}
</>
)
}

97
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/index.tsx
View File

@@ -2,6 +2,8 @@ import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import ParkingPrices from "./ParkingPrices"
import styles from "./parking.module.css"
import { ParkingAmenityProps } from "@/types/components/hotelPage/sidepeek/parking"
@@ -9,23 +11,6 @@ import { IconName } from "@/types/components/icon"
export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
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
}
}
return (
<AccordionItem
@@ -39,21 +24,11 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
<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>
)}
<li>{`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}</li>
<li>{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${data.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}</li>
<li>{`${intl.formatMessage({ id: "Number of parking spots" })}: ${data.numberOfParkingSpots}`}</li>
<li>{`${intl.formatMessage({ id: "Distance to hotel" })}: ${data.distanceToHotel}`}</li>
<li>{`${intl.formatMessage({ id: "Address" })}: ${data.address}`}</li>
</ul>
</Body>
</div>
@@ -63,52 +38,22 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
</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>
)
)
})}
</>
)}
<Body color="uiTextMediumContrast">
{intl.formatMessage({ id: "Ordinary" })}
</Body>
<ParkingPrices
data={data.pricing.localCurrency.ordinary}
currency={data.pricing.localCurrency.currency}
/>
</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>
)
)
})}
</>
)}
<Body color="uiTextMediumContrast">
{intl.formatMessage({ id: "Weekday" })}
</Body>
<ParkingPrices
data={data.pricing.localCurrency.weekend}
currency={data.pricing.localCurrency.currency}
/>
</div>
</div>
</div>

12
types/components/hotelPage/sidepeek/parking.ts
View File

@@ -3,3 +3,15 @@ import type { Hotel } from "@/types/hotel"
export type ParkingAmenityProps = {
parking: Hotel["parking"]
}
type parkingData = {
period?: string
amount?: number
startTime?: string
endTime?: string
}
export type ParkingPricesProps = {
data?: parkingData[]
currency?: Hotel["parking"][number]["pricing"]["localCurrency"]["currency"]
}