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 Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import ParkingPrices from "./ParkingPrices"
import styles from "./parking.module.css" import styles from "./parking.module.css"
import { ParkingAmenityProps } from "@/types/components/hotelPage/sidepeek/parking" 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) { export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
const intl = await getIntl() 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 ( return (
<AccordionItem <AccordionItem
@@ -39,21 +24,11 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
<Body textTransform="bold">{`${data.type} (${data.name})`}</Body> <Body textTransform="bold">{`${data.type} (${data.name})`}</Body>
<Body color="uiTextHighContrast" asChild> <Body color="uiTextHighContrast" asChild>
<ul> <ul>
{data.numberOfChargingSpaces && ( <li>{`Number of charging points for electric cars: ${data.numberOfChargingSpaces}`}</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>
{data.canMakeReservation && ( <li>{`${intl.formatMessage({ id: "Distance to hotel" })}: ${data.distanceToHotel}`}</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: "Address" })}: ${data.address}`}</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> </ul>
</Body> </Body>
</div> </div>
@@ -63,52 +38,22 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
</Body> </Body>
<div className={styles.prices}> <div className={styles.prices}>
<div> <div>
{data.pricing.localCurrency.ordinary && ( <Body color="uiTextMediumContrast">
<> {intl.formatMessage({ id: "Ordinary" })}
<Body color="uiTextMediumContrast"> </Body>
{intl.formatMessage({ id: "Weekday" })} <ParkingPrices
</Body> data={data.pricing.localCurrency.ordinary}
{data.pricing.localCurrency.ordinary.map((ordinary) => { currency={data.pricing.localCurrency.currency}
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>
<div> <div>
{data.pricing.localCurrency.weekend && ( <Body color="uiTextMediumContrast">
<> {intl.formatMessage({ id: "Weekday" })}
<Body color="uiTextMediumContrast"> </Body>
{intl.formatMessage({ id: "Weekday" })} <ParkingPrices
</Body> data={data.pricing.localCurrency.weekend}
{data.pricing.localCurrency.weekend.map((weekend) => { currency={data.pricing.localCurrency.currency}
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>
</div> </div>

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

@@ -3,3 +3,15 @@ import type { Hotel } from "@/types/hotel"
export type ParkingAmenityProps = { export type ParkingAmenityProps = {
parking: Hotel["parking"] 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"]
}