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

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
}
}