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 allDay = intl.formatMessage({ id: "Price per 24 hours" })
function getPeriod(period: string | undefined) {
function getPeriod(period?: string) {
switch (period) {
case Periods.day:
return day
@@ -27,7 +27,7 @@ export default async function ParkingPrices({
case Periods.allDay:
return allDay
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 { getIntl } from "@/i18n"
import ParkingList from "./ParkingList"
import ParkingPrices from "./ParkingPrices"
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 className={styles.list}>
<Body textTransform="bold">{data.type}</Body>
<Body color="uiTextHighContrast" asChild>
<ul className={styles.listStyling}>
{data.numberOfChargingSpaces ? (
<li>{`${intl.formatMessage({ id: "Number of charging points for electric cars" })}: ${data.numberOfChargingSpaces}`}</li>
) : null}
<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>
) : 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>
<ParkingList
numberOfChargingSpaces={data.numberOfChargingSpaces}
canMakeReservation={data.canMakeReservation}
numberOfParkingSpots={data.numberOfParkingSpots}
distanceToHotel={data.distanceToHotel}
address={data.address}
/>
</div>
<div className={styles.prices}>
<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);
}
.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,
.weekend {
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 intl = await getIntl()
const filteredAmenities = amenitiesList.filter((amenity) => {
return (
amenity.id !== FacilityEnum.ParkingAdditionalCost &&
amenity.id !== FacilityEnum.ParkingElectricCharging &&
amenity.id !== FacilityEnum.ParkingFreeParking &&
amenity.id !== FacilityEnum.ParkingGarage &&
amenity.id !== FacilityEnum.ParkingOutdoor &&
amenity.id !== FacilityEnum.MeetingArea &&
amenity.id !== FacilityEnum.ServesBreakfastAlwaysIncluded &&
amenity.id !== FacilityEnum.LateCheckOutUntil1400Guaranteed
)
})
const amenitiesToRemove = [
FacilityEnum.ParkingAdditionalCost,
FacilityEnum.ParkingElectricCharging,
FacilityEnum.ParkingFreeParking,
FacilityEnum.ParkingGarage,
FacilityEnum.ParkingOutdoor,
FacilityEnum.MeetingArea,
FacilityEnum.ServesBreakfastAlwaysIncluded,
FacilityEnum.LateCheckOutUntil1400Guaranteed,
]
const filteredAmenities = amenitiesList.filter(
(amenity) => !amenitiesToRemove.includes(amenity.id)
)
return (
<SidePeek

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

@@ -10,6 +10,14 @@ export type ParkingAmenityProps = {
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 = {
data: Hotel["parking"][number]["pricing"]["localCurrency"]["ordinary"]
currency: Hotel["parking"][number]["pricing"]["localCurrency"]["currency"]