ea3b86c33e
Feat/SW-451 ui hotel card * feat(SW-451): initial design * feat(SW-451): add gallery icon and responsive design for mobile * feat(SW-451): refactor name, add routing to sidepeek * feat(SW-451): add updated design * feat(SW-451): add tripadvisor chip * feat(SW-451): fix gallery icon * feat(SW-451): fix additional falsy value check * feat(SW-451): fix import type * feat(SW-451): remove galleryIcon until image data exists * feat(SW-451): fix css styling * feat(SW-451): add new design for mobile * feat(SW-451): add translation * feat(SW-451): change css to mobile first * feat(SW-451): change div to article Approved-by: Matilda Landström
98 lines
3.8 KiB
TypeScript
98 lines
3.8 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
|
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
|
|
import Image from "@/components/Image"
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import ReadMore from "../../ReadMore"
|
|
|
|
import styles from "./hotelInfoCard.module.css"
|
|
|
|
import type { HotelInfoCardProps } from "@/types/components/hotelReservation/selectRate/hotelInfoCardProps"
|
|
|
|
export default function HotelInfoCard({ hotelData }: HotelInfoCardProps) {
|
|
const hotelAttributes = hotelData?.data.attributes
|
|
const intl = useIntl()
|
|
|
|
const sortedFacilities = hotelAttributes?.detailedFacilities
|
|
.sort((a, b) => b.sortOrder - a.sortOrder)
|
|
.slice(0, 5)
|
|
|
|
return (
|
|
<article className={styles.container}>
|
|
{hotelAttributes && (
|
|
<section className={styles.wrapper}>
|
|
<div className={styles.imageWrapper}>
|
|
<Image
|
|
src={hotelAttributes.hotelContent.images.imageSizes.medium}
|
|
alt={hotelAttributes.hotelContent.images.metaData.altText}
|
|
className={styles.image}
|
|
fill
|
|
/>
|
|
{hotelAttributes.ratings?.tripAdvisor && (
|
|
<div className={styles.tripAdvisor}>
|
|
<TripAdvisorIcon color="burgundy" />
|
|
<Caption color="burgundy">
|
|
{hotelAttributes.ratings.tripAdvisor.rating}
|
|
</Caption>
|
|
</div>
|
|
)}
|
|
{/* TODO: gallery icon and image carousel */}
|
|
</div>
|
|
<div className={styles.hotelContent}>
|
|
<div className={styles.hotelInformation}>
|
|
<Title
|
|
level="h3"
|
|
textTransform="uppercase"
|
|
className={styles.title}
|
|
>
|
|
{hotelAttributes.name}
|
|
</Title>
|
|
<Caption color="uiTextMediumContrast">
|
|
{`${hotelAttributes.address.streetAddress}, ${hotelAttributes.address.city} ∙ ${hotelAttributes.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}
|
|
</Caption>
|
|
<Body color="uiTextHighContrast" className={styles.body}>
|
|
{hotelAttributes.hotelContent.texts.descriptions.medium}
|
|
</Body>
|
|
</div>
|
|
<Divider color="subtle" variant="vertical" />
|
|
<div className={styles.facilities}>
|
|
<div className={styles.facilityList}>
|
|
<Body textTransform="bold" className={styles.facilityTitle}>
|
|
{intl.formatMessage({ id: "At the hotel" })}
|
|
</Body>
|
|
{sortedFacilities?.map((facility) => {
|
|
const IconComponent = mapFacilityToIcon(facility.name)
|
|
return (
|
|
<div className={styles.facilitiesItem} key={facility.id}>
|
|
{IconComponent && (
|
|
<IconComponent
|
|
className={styles.facilitiesIcon}
|
|
color="grey80"
|
|
/>
|
|
)}
|
|
<Caption className={styles.facilityName}>
|
|
{facility.name}
|
|
</Caption>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
<ReadMore
|
|
label={intl.formatMessage({ id: "Show all amenities" })}
|
|
hotelId={hotelAttributes.operaId}
|
|
hotel={hotelAttributes}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)}
|
|
</article>
|
|
)
|
|
}
|