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

Merged in feat/SW-1598-hotel-parking-prices (pull request #1458)

Browse Source 
feat(SW-1598): Now only showing "Free parking" when free parking is chosen

* feat(SW-1598): Now only showing "Free parking" when free parking is chosen


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-03-04 13:38:35 +00:00
parent edcae22e45
commit f80c2e9583
9 changed files with 44 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/index.tsx
View File

@@ -34,7 +34,7 @@ export default function SidebarContentWrapper({
return (
<div ref={sidebarRef} className={styles.sidebarContent}>
<Title level="h2">
<Title level="h1" as="h2">
{getHeadingText(intl, location, allFilters, activeFilters[0])}
</Title>
{children}

64
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingList/index.tsx
View File

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

11
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingList/parkingList.module.css
View File

@@ -1,11 +0,0 @@
.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);
}

75
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/index.tsx
View File

@@ -1,75 +0,0 @@
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import { formatPrice } from "@/utils/numberFormatting"
import styles from "./parkingPrices.module.css"
import {
type ParkingPricesProps,
Periods,
} from "@/types/components/hotelPage/sidepeek/parking"
export default async function ParkingPrices({
currency = "",
freeParking,
pricing,
}: ParkingPricesProps) {
const intl = await getIntl()
const day = intl.formatMessage({ id: "Price per day" })
const night = intl.formatMessage({ id: "Price per night" })
const allDay = intl.formatMessage({ id: "Price per 24 hours" })
function getPeriod(period?: string) {
switch (period) {
case Periods.day:
return day
case Periods.night:
return night
case Periods.allDay:
return allDay
default:
return period
}
}
const filteredPeriods = pricing?.filter((filter) => filter.period !== "Hour")
return (
<div className={styles.wrapper}>
{filteredPeriods?.map((parking) => (
<div key={parking.period} className={styles.period}>
<div className={styles.information}>
<Body textTransform="bold" color="uiTextHighContrast">
{getPeriod(parking.period)}
</Body>
<Body color="uiTextHighContrast">
{parking.amount
? freeParking
? intl.formatMessage({ id: "Free parking" })
: formatPrice(intl, parking.amount, currency)
: intl.formatMessage({ id: "N/A" })}
</Body>
</div>
{parking.startTime &&
parking.endTime &&
parking.period !== Periods.allDay && (
<div className={styles.information}>
<Body color="uiTextHighContrast">
{intl.formatMessage({ id: "From" })}
</Body>
<Body color="uiTextHighContrast">
{intl.formatMessage(
{ id: "{parkingStartTime}-{parkingEndTime}" },
{
parkingStartTime: parking.startTime,
parkingEndTime: parking.endTime,
}
)}
</Body>
</div>
)}
</div>
))}
</div>
)
}

13
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Amenities/AccordionAmenities/Parking/ParkingPrices/parkingPrices.module.css
View File

@@ -1,13 +0,0 @@
.wrapper {
display: grid;
row-gap: var(--Spacing-x1);
}
.period {
display: flex;
gap: var(--Spacing-x5);
}
.information {
flex: 1;
}

56
apps/scandic-web/components/ParkingInformation/ParkingPrices/index.tsx
View File

@@ -2,6 +2,8 @@ import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
import { formatPrice } from "@/utils/numberFormatting"
import { getPeriod } from "./utils"
import styles from "./parkingPrices.module.css"
import {
@@ -15,55 +17,41 @@ export default async function ParkingPrices({
pricing,
}: ParkingPricesProps) {
const intl = await getIntl()
const day = intl.formatMessage({ id: "Price per day" })
const night = intl.formatMessage({ id: "Price per night" })
const allDay = intl.formatMessage({ id: "Price per 24 hours" })
function getPeriod(period?: string) {
switch (period) {
case Periods.day:
return day
case Periods.night:
return night
case Periods.allDay:
return allDay
default:
return period
}
}
const filteredPeriods = pricing?.filter((filter) => filter.period !== "Hour")
return (
<div className={styles.wrapper}>
{filteredPeriods?.map((parking) => (
return freeParking ? (
<Body textTransform="bold" color="uiTextHighContrast">
{intl.formatMessage({ id: "Free parking" })}
</Body>
) : (
<dl className={styles.wrapper}>
{pricing?.map((parking) => (
<div key={parking.period} className={styles.period}>
<div className={styles.information}>
<Body textTransform="bold" color="uiTextHighContrast">
{getPeriod(parking.period)}
<Body textTransform="bold" color="uiTextHighContrast" asChild>
<dt>{getPeriod(intl, parking.period)}</dt>
</Body>
<Body color="uiTextHighContrast">
{parking.amount
? freeParking
? intl.formatMessage({ id: "Free parking" })
: formatPrice(intl, parking.amount, currency)
: intl.formatMessage({ id: "N/A" })}
<Body color="uiTextHighContrast" asChild>
<dd>
{parking.amount
? formatPrice(intl, parking.amount, currency)
: intl.formatMessage({ id: "At a cost" })}
</dd>
</Body>
</div>
{parking.startTime &&
parking.endTime &&
parking.period !== Periods.allDay && (
<div className={styles.information}>
<Body color="uiTextHighContrast">
{intl.formatMessage({ id: "From" })}
<Body color="uiTextHighContrast" asChild>
<dt>{intl.formatMessage({ id: "From" })}</dt>
</Body>
<Body color="uiTextHighContrast">
{`${parking.startTime}-${parking.endTime}`}
<Body color="uiTextHighContrast" asChild>
<dd>{`${parking.startTime}-${parking.endTime}`}</dd>
</Body>
</div>
)}
</div>
))}
</div>
</dl>
)
}

2
apps/scandic-web/components/ParkingInformation/ParkingPrices/parkingPrices.module.css
View File

@@ -1,6 +1,7 @@
.wrapper {
display: grid;
row-gap: var(--Spacing-x1);
margin: 0;
}
.period {
@@ -9,5 +10,6 @@
}
.information {
margin: 0;
flex: 1;
}

18
apps/scandic-web/components/ParkingInformation/ParkingPrices/utils.ts Normal file
View File

@@ -0,0 +1,18 @@
import type { IntlShape } from "react-intl"
import { Periods } from "@/types/components/hotelPage/sidepeek/parking"
export function getPeriod(intl: IntlShape, period?: string) {
switch (period) {
case Periods.hour:
return intl.formatMessage({ id: "Price per hour" })
case Periods.day:
return intl.formatMessage({ id: "Price per day" })
case Periods.night:
return intl.formatMessage({ id: "Price per night" })
case Periods.allDay:
return intl.formatMessage({ id: "Price per 24 hours" })
default:
return period
}
}

1
apps/scandic-web/types/components/hotelPage/sidepeek/parking.ts
View File

@@ -2,6 +2,7 @@ import type { Hotel, Parking } from "@/types/hotel"
export enum Periods {
allDay = "AllDay",
hour = "Hour",
day = "Day",
night = "Night",
}