113 lines
4.1 KiB
TypeScript
113 lines
4.1 KiB
TypeScript
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
|
import { PriceTagIcon, ScandicLogoIcon } from "@/components/Icons"
|
|
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
|
|
import Image from "@/components/Image"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Chip from "@/components/TempDesignSystem/Chip"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import ReadMore from "../ReadMore"
|
|
|
|
import styles from "./hotelCard.module.css"
|
|
|
|
import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
|
|
|
|
export default async function HotelCard({ hotel }: HotelCardProps) {
|
|
const intl = await getIntl()
|
|
|
|
const { hotelData } = hotel
|
|
const { price } = hotel
|
|
|
|
const amenities = hotelData.detailedFacilities.slice(0, 5)
|
|
|
|
return (
|
|
<article className={styles.card}>
|
|
<section className={styles.imageContainer}>
|
|
<Image
|
|
src={hotelData.hotelContent.images.imageSizes.medium}
|
|
alt={hotelData.hotelContent.images.metaData.altText}
|
|
width={300}
|
|
height={200}
|
|
className={styles.image}
|
|
/>
|
|
<div className={styles.tripAdvisor}>
|
|
<Chip intent="primary" className={styles.tripAdvisor}>
|
|
<TripAdvisorIcon color="white" />
|
|
{hotelData.ratings?.tripAdvisor.rating}
|
|
</Chip>
|
|
</div>
|
|
</section>
|
|
<section className={styles.hotelInformation}>
|
|
<ScandicLogoIcon color="red" />
|
|
<Title as="h4" textTransform="capitalize">
|
|
{hotelData.name}
|
|
</Title>
|
|
<Footnote color="uiTextMediumContrast">
|
|
{`${hotelData.address.streetAddress}, ${hotelData.address.city}`}
|
|
</Footnote>
|
|
<Footnote color="uiTextMediumContrast">
|
|
{`${hotelData.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
|
|
</Footnote>
|
|
</section>
|
|
<section className={styles.hotel}>
|
|
<div className={styles.facilities}>
|
|
{amenities.map((facility) => {
|
|
const IconComponent = mapFacilityToIcon(facility.id)
|
|
return (
|
|
<div className={styles.facilitiesItem} key={facility.id}>
|
|
{IconComponent && <IconComponent color="grey80" />}
|
|
<Caption color="textMediumContrast">{facility.name}</Caption>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
<ReadMore
|
|
label={intl.formatMessage({ id: "See hotel details" })}
|
|
hotelId={hotelData.operaId}
|
|
hotel={hotelData}
|
|
/>
|
|
</section>
|
|
<section className={styles.prices}>
|
|
<div>
|
|
<Chip intent="primary" className={styles.public}>
|
|
<PriceTagIcon color="white" width={15} height={15} />
|
|
{intl.formatMessage({ id: "Public price from" })}
|
|
</Chip>
|
|
<Caption color="textMediumContrast">
|
|
{price?.regularAmount} {price?.currency} /
|
|
{intl.formatMessage({ id: "night" })}
|
|
</Caption>
|
|
<Footnote color="uiTextMediumContrast">approx 280 eur</Footnote>
|
|
</div>
|
|
<div>
|
|
<Chip intent="primary" className={styles.member}>
|
|
<PriceTagIcon color="white" width={15} height={15} />
|
|
{intl.formatMessage({ id: "Member price from" })}
|
|
</Chip>
|
|
<Caption color="textMediumContrast">
|
|
{price?.memberAmount} {price?.currency} /
|
|
{intl.formatMessage({ id: "night" })}
|
|
</Caption>
|
|
<Footnote color="uiTextMediumContrast">approx 280 eur</Footnote>
|
|
</div>
|
|
<Button
|
|
asChild
|
|
theme="base"
|
|
intent="tertiary"
|
|
size="small"
|
|
className={styles.button}
|
|
>
|
|
{/* TODO: Localize link and also use correct search params */}
|
|
<Link href="/en/hotelreservation/select-rate" color="none">
|
|
{intl.formatMessage({ id: "See rooms" })}
|
|
</Link>
|
|
</Button>
|
|
</section>
|
|
</article>
|
|
)
|
|
}
|