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

feat(SW-914): add parking list component

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-11-29 11:02:46 +01:00
parent 0b4710f380
commit baecfdbfb4
7 changed files with 93 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingList/index.tsx Normal file
View File

@@ -0,0 +1,50 @@
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()
return (
<Body color="uiTextHighContrast" asChild>
<ul className={styles.listStyling}>
{numberOfChargingSpaces ? (
<li>
{intl.formatMessage(
{ id: "Number of charging points for electric cars" },
{ number: numberOfChargingSpaces }
)}
</li>
) : null}
<li>{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}</li>
{numberOfParkingSpots ? (
<li>
{intl.formatMessage(
{ id: "Number of parking spots" },
{ number: numberOfParkingSpots }
)}
</li>
) : null}
{distanceToHotel ? (
<li>
{intl.formatMessage(
{ id: "Distance to hotel" },
{ distance: distanceToHotel }
)}
</li>
) : null}
{address ? (
<li>{`${intl.formatMessage({ id: "Address" })}: ${address}`}</li>
) : null}
</ul>
</Body>
)
}

11
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingList/parkingList.module.css Normal file
View File

@@ -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);
}

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

@@ -18,7 +18,7 @@ export default async function ParkingPrices({
const night = intl.formatMessage({ id: "Price per night" }) const night = intl.formatMessage({ id: "Price per night" })
const allDay = intl.formatMessage({ id: "Price per 24 hours" }) const allDay = intl.formatMessage({ id: "Price per 24 hours" })
function getPeriod(period: string | undefined) { function getPeriod(period?: string) {
switch (period) { switch (period) {
case Periods.day: case Periods.day:
return day return day
@@ -27,7 +27,7 @@ export default async function ParkingPrices({
case Periods.allDay: case Periods.allDay:
return allDay return allDay
default: default:
return "" return period
} }
} }

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

@@ -4,6 +4,7 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getIntl } from "@/i18n" import { getIntl } from "@/i18n"
import ParkingList from "./ParkingList"
import ParkingPrices from "./ParkingPrices" import ParkingPrices from "./ParkingPrices"
import styles from "./parkingAmenity.module.css" import styles from "./parkingAmenity.module.css"
@@ -24,23 +25,13 @@ export default async function ParkingAmenity({ parking }: ParkingAmenityProps) {
<div key={data.type} className={styles.information}> <div key={data.type} className={styles.information}>
<div className={styles.list}> <div className={styles.list}>
<Body textTransform="bold">{data.type}</Body> <Body textTransform="bold">{data.type}</Body>
<Body color="uiTextHighContrast" asChild> <ParkingList
<ul className={styles.listStyling}> numberOfChargingSpaces={data.numberOfChargingSpaces}
{data.numberOfChargingSpaces ? ( canMakeReservation={data.canMakeReservation}
<li>{`${intl.formatMessage({ id: "Number of charging points for electric cars" })}: ${data.numberOfChargingSpaces}`}</li> numberOfParkingSpots={data.numberOfParkingSpots}
) : null} distanceToHotel={data.distanceToHotel}
<li>{`${intl.formatMessage({ id: "Parking can be reserved in advance" })}: ${data.canMakeReservation ? intl.formatMessage({ id: "Yes" }) : intl.formatMessage({ id: "No" })}`}</li> address={data.address}
{data.numberOfParkingSpots ? ( />
<li>{`${intl.formatMessage({ id: "Number of parking spots" })}: ${data.numberOfParkingSpots}`}</li>
) : null}
{data.distanceToHotel ? (
<li>{`${intl.formatMessage({ id: "Distance to hotel" })}: ${data.distanceToHotel}m`}</li>
) : null}
{data.address ? (
<li>{`${intl.formatMessage({ id: "Address" })}: ${data.address}`}</li>
) : null}
</ul>
</Body>
</div> </div>
<div className={styles.prices}> <div className={styles.prices}>
<Body textTransform="bold"> <Body textTransform="bold">

12
components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/parkingAmenity.module.css
View File

@@ -10,18 +10,6 @@
gap: var(--Spacing-x-one-and-half); gap: var(--Spacing-x-one-and-half);
} }
.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);
}
.weekday, .weekday,
.weekend { .weekend {
background-color: var(--Base-Surface-Subtle-Normal); background-color: var(--Base-Surface-Subtle-Normal);

26
components/ContentType/HotelPage/SidePeeks/Amenities/index.tsx
View File

@@ -25,18 +25,20 @@ export default async function AmenitiesSidePeek({
const lang = getLang() const lang = getLang()
const intl = await getIntl() const intl = await getIntl()
const filteredAmenities = amenitiesList.filter((amenity) => { const amenitiesToRemove = [
return ( FacilityEnum.ParkingAdditionalCost,
amenity.id !== FacilityEnum.ParkingAdditionalCost && FacilityEnum.ParkingElectricCharging,
amenity.id !== FacilityEnum.ParkingElectricCharging && FacilityEnum.ParkingFreeParking,
amenity.id !== FacilityEnum.ParkingFreeParking && FacilityEnum.ParkingGarage,
amenity.id !== FacilityEnum.ParkingGarage && FacilityEnum.ParkingOutdoor,
amenity.id !== FacilityEnum.ParkingOutdoor && FacilityEnum.MeetingArea,
amenity.id !== FacilityEnum.MeetingArea && FacilityEnum.ServesBreakfastAlwaysIncluded,
amenity.id !== FacilityEnum.ServesBreakfastAlwaysIncluded && FacilityEnum.LateCheckOutUntil1400Guaranteed,
amenity.id !== FacilityEnum.LateCheckOutUntil1400Guaranteed ]
)
}) const filteredAmenities = amenitiesList.filter(
(amenity) => !amenitiesToRemove.includes(amenity.id)
)
return ( return (
<SidePeek <SidePeek

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

@@ -10,6 +10,14 @@ export type ParkingAmenityProps = {
parking: Hotel["parking"] parking: Hotel["parking"]
} }
export type ParkingListProps = {
numberOfChargingSpaces: Hotel["parking"][number]["numberOfChargingSpaces"]
canMakeReservation: Hotel["parking"][number]["canMakeReservation"]
numberOfParkingSpots: Hotel["parking"][number]["numberOfParkingSpots"]
distanceToHotel: Hotel["parking"][number]["distanceToHotel"]
address: Hotel["parking"][number]["address"]
}
export type ParkingPricesProps = { export type ParkingPricesProps = {
data: Hotel["parking"][number]["pricing"]["localCurrency"]["ordinary"] data: Hotel["parking"][number]["pricing"]["localCurrency"]["ordinary"]
currency: Hotel["parking"][number]["pricing"]["localCurrency"]["currency"] currency: Hotel["parking"][number]["pricing"]["localCurrency"]["currency"]