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

fix(SW-1241): Adjusted amenities sidepeek on hotel pages and booking flow

Browse Source 
Approved-by: Michael Zetterberg
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-04-23 08:41:04 +00:00
parent c23a32cd10
commit 8152aea649
46 changed files with 654 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,9 @@
import Body from "@/components/TempDesignSystem/Text/Body"
import { getIntl } from "@/i18n"
"use client"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { formatPrice } from "@/utils/numberFormatting"
import { getPeriod } from "./utils"
@@ -11,28 +15,28 @@ import {
Periods,
} from "@/types/components/hotelPage/sidepeek/parking"
export default async function ParkingPrices({
export default function ParkingPrices({
currency = "",
freeParking,
pricing,
}: ParkingPricesProps) {
const intl = await getIntl()
const intl = useIntl()
return freeParking ? (
<Body textTransform="bold" color="uiTextHighContrast">
{intl.formatMessage({
defaultMessage: "Free parking",
})}
</Body>
<Typography variant="Body/Paragraph/mdBold">
<p className={styles.wrapper}>
{intl.formatMessage({ defaultMessage: "Free parking" })}
</p>
</Typography>
) : (
<dl className={styles.wrapper}>
{pricing?.map((parking) => (
<div key={parking.period} className={styles.period}>
<div className={styles.information}>
<Body textTransform="bold" color="uiTextHighContrast" asChild>
<Typography variant="Body/Paragraph/mdBold">
<dt>{getPeriod(intl, parking.period)}</dt>
</Body>
<Body color="uiTextHighContrast" asChild>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<dd>
{parking.amount
? formatPrice(intl, parking.amount, currency)
@@ -40,24 +44,17 @@ export default async function ParkingPrices({
defaultMessage: "At a cost",
})}
</dd>
</Body>
</Typography>
</div>
{parking.startTime &&
parking.endTime &&
parking.period !== Periods.allDay && (
<div className={styles.information}>
<Body color="uiTextHighContrast" asChild>
<dt>
{intl.formatMessage({
defaultMessage: "From",
})}
</dt>
</Body>
<Body color="uiTextHighContrast" asChild>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Typography variant="Body/Paragraph/mdRegular">
<div className={styles.information}>
<dt>{intl.formatMessage({ defaultMessage: "From" })}</dt>
<dd>{`${parking.startTime}-${parking.endTime}`}</dd>
</Body>
</div>
</div>
</Typography>
)}
</div>
))}

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

@@ -2,6 +2,7 @@
display: grid;
row-gap: var(--Spacing-x1);
margin: 0;
color: var(--Text-Default);
}
.period {
@@ -13,3 +14,7 @@
margin: 0;
flex: 1;
}
.priceHeading {
color: var(--Text-Secondary);
}