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

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

View File

@@ -1,13 +1,13 @@
import Link from "next/link"
"use client"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { getIntl } from "@/i18n"
import ButtonLink from "@/components/ButtonLink"
import Divider from "@/components/TempDesignSystem/Divider"
import Button from "../TempDesignSystem/Button"
import Divider from "../TempDesignSystem/Divider"
import Caption from "../TempDesignSystem/Text/Caption"
import Subtitle from "../TempDesignSystem/Text/Subtitle"
import ParkingList from "./ParkingList"
import ParkingPrices from "./ParkingPrices"
@@ -20,17 +20,19 @@ interface ParkingInformationProps {
showExternalParkingButton?: boolean
}
export default async function ParkingInformation({
export default function ParkingInformation({
parking,
showExternalParkingButton = true,
}: ParkingInformationProps) {
const intl = await getIntl()
const intl = useIntl()
const title = `${parking.type}${parking.name ? ` (${parking.name})` : ""}`
return (
<div className={styles.parkingInformation}>
<div className={styles.list}>
<Subtitle type="two" asChild>
<h4>{parking.type}</h4>
</Subtitle>
<Typography variant="Title/Subtitle/md">
<h4 className={styles.heading}>{title}</h4>
</Typography>
<ParkingList
numberOfChargingSpaces={parking.numberOfChargingSpaces}
canMakeReservation={parking.canMakeReservation}
@@ -40,19 +42,17 @@ export default async function ParkingInformation({
/>
</div>
<div className={styles.prices}>
<Subtitle type="two" asChild>
<h5>
{intl.formatMessage({
defaultMessage: "Prices",
})}
<Typography variant="Body/Paragraph/mdBold">
<h5 className={styles.heading}>
{intl.formatMessage({ defaultMessage: "Prices" })}
</h5>
</Subtitle>
</Typography>
<div className={styles.priceWrapper}>
<Caption color="uiTextMediumContrast" textTransform="uppercase">
{intl.formatMessage({
defaultMessage: "Weekday prices",
})}
</Caption>
<Typography variant="Title/Overline/sm">
<h6 className={styles.priceHeading}>
{intl.formatMessage({ defaultMessage: "Weekday prices" })}
</h6>
</Typography>
<Divider color="baseSurfaceSubtleHover" />
{parking.pricing.localCurrency ? (
<ParkingPrices
@@ -63,11 +63,11 @@ export default async function ParkingInformation({
) : null}
</div>
<div className={styles.priceWrapper}>
<Caption color="uiTextMediumContrast" textTransform="uppercase">
{intl.formatMessage({
defaultMessage: "Weekend prices",
})}
</Caption>
<Typography variant="Title/Overline/sm">
<h6 className={styles.priceHeading}>
{intl.formatMessage({ defaultMessage: "Weekend prices" })}
</h6>
</Typography>
<Divider color="baseSurfaceSubtleHover" />
{parking.pricing.localCurrency ? (
<ParkingPrices
@@ -79,14 +79,10 @@ export default async function ParkingInformation({
</div>
</div>
{parking.externalParkingUrl && showExternalParkingButton && (
<Button theme="base" intent="primary" variant="icon" asChild>
<Link href={parking.externalParkingUrl} target="_blank">
{intl.formatMessage({
defaultMessage: "Book parking",
})}
<MaterialIcon icon="open_in_new" color="CurrentColor" />
</Link>
</Button>
<ButtonLink href={parking.externalParkingUrl} target="_blank">
{intl.formatMessage({ defaultMessage: "Book parking" })}
<MaterialIcon icon="open_in_new" color="CurrentColor" />
</ButtonLink>
)}
</div>
)