123 lines
4.3 KiB
TypeScript
123 lines
4.3 KiB
TypeScript
import { serverClient } from "@/lib/trpc/server"
|
|
import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
|
|
|
|
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
|
import {
|
|
ChevronRightIcon,
|
|
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 { getLang } from "@/i18n/serverContext"
|
|
|
|
import styles from "./hotelCard.module.css"
|
|
|
|
import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
|
|
|
|
export default async function HotelCard({
|
|
checkInDate,
|
|
checkOutDate,
|
|
hotelId,
|
|
price,
|
|
}: HotelCardProps) {
|
|
const intl = await getIntl()
|
|
|
|
// TODO: Use real endpoint.
|
|
const hotel = tempHotelData.data.attributes
|
|
|
|
const sortedAmenities = hotel.detailedFacilities
|
|
.sort((a, b) => b.sortOrder - a.sortOrder)
|
|
.slice(0, 5)
|
|
|
|
return (
|
|
<article className={styles.card}>
|
|
<section className={styles.imageContainer}>
|
|
<Image
|
|
src={hotel.hotelContent.images.imageSizes.large}
|
|
alt={hotel.hotelContent.images.metaData.altText}
|
|
width={300}
|
|
height={200}
|
|
className={styles.image}
|
|
/>
|
|
<div className={styles.tripAdvisor}>
|
|
<Chip intent="primary" className={styles.tripAdvisor}>
|
|
<TripAdvisorIcon color="white" />
|
|
{hotel.ratings?.tripAdvisor.rating}
|
|
</Chip>
|
|
</div>
|
|
</section>
|
|
<section className={styles.hotelInformation}>
|
|
<ScandicLogoIcon color="red" />
|
|
<Title as="h4" textTransform="capitalize">
|
|
{hotel.name}
|
|
</Title>
|
|
<Footnote color="textMediumContrast" className={styles.adress}>
|
|
{`${hotel.address.streetAddress}, ${hotel.address.city}`}
|
|
</Footnote>
|
|
<Footnote color="textMediumContrast">
|
|
{`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
|
|
</Footnote>
|
|
</section>
|
|
<section className={styles.hotel}>
|
|
<div className={styles.facilities}>
|
|
{sortedAmenities?.map((facility) => {
|
|
const IconComponent = mapFacilityToIcon(facility.name)
|
|
return (
|
|
<div className={styles.facilitiesItem} key={facility.id}>
|
|
{IconComponent && <IconComponent color="grey80" />}
|
|
<Caption color="textMediumContrast">{facility.name}</Caption>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
<Link href="#" color="burgundy" className={styles.link}>
|
|
{intl.formatMessage({ id: "See hotel details" })}
|
|
<ChevronRightIcon color="burgundy" />
|
|
</Link>
|
|
</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} SEK / night
|
|
</Caption>
|
|
<Footnote color="textMediumContrast">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} SEK / night
|
|
</Caption>
|
|
<Footnote color="textMediumContrast">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>
|
|
)
|
|
}
|