130 lines
4.1 KiB
TypeScript
130 lines
4.1 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import { Divider } from "@scandic-hotels/design-system/Divider"
|
|
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
|
|
import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import ButtonLink from "@/components/ButtonLink"
|
|
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
|
import ImageGallery from "@/components/ImageGallery"
|
|
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
|
|
import { getSingleDecimal } from "@/utils/numberFormatting"
|
|
|
|
import styles from "./hotelListingItem.module.css"
|
|
|
|
import type { Hotel } from "@/types/hotel"
|
|
|
|
interface HotelListingItemProps {
|
|
hotel: Hotel
|
|
url: string
|
|
}
|
|
|
|
export default function HotelListingItem({
|
|
hotel,
|
|
url,
|
|
}: HotelListingItemProps) {
|
|
const intl = useIntl()
|
|
const galleryImages = mapApiImagesToGalleryImages(hotel.galleryImages || [])
|
|
const tripadvisorRating = hotel.ratings?.tripAdvisor.rating
|
|
const address = `${hotel.address.streetAddress}, ${hotel.address.city}`
|
|
const amenities = hotel.detailedFacilities.slice(0, 5)
|
|
const hotelDescription = hotel.hotelContent.texts.descriptions?.short
|
|
|
|
return (
|
|
<article className={styles.hotelListingItem}>
|
|
<div className={styles.imageWrapper}>
|
|
<ImageGallery
|
|
images={galleryImages}
|
|
fill
|
|
sizes="(min-width: 768px) 450px, 100vw"
|
|
title={intl.formatMessage(
|
|
{
|
|
defaultMessage: "{title} - Image gallery",
|
|
},
|
|
{ title: hotel.name }
|
|
)}
|
|
/>
|
|
{tripadvisorRating ? (
|
|
<Typography variant="Title/Overline/sm">
|
|
<div className={styles.tripAdvisor}>
|
|
<TripadvisorIcon color="CurrentColor" />
|
|
<span>{tripadvisorRating}</span>
|
|
</div>
|
|
</Typography>
|
|
) : null}
|
|
</div>
|
|
<div className={styles.content}>
|
|
<div className={styles.intro}>
|
|
<HotelLogoIcon
|
|
hotelId={hotel.operaId}
|
|
hotelType={hotel.hotelType}
|
|
height={30}
|
|
/>
|
|
<Typography variant="Title/Subtitle/md">
|
|
<h3>{hotel.name}</h3>
|
|
</Typography>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<div className={styles.captions}>
|
|
<span>{address}</span>
|
|
<span>
|
|
<Divider
|
|
className={styles.divider}
|
|
variant="vertical"
|
|
color="Border/Divider/Default"
|
|
/>
|
|
</span>
|
|
<span>
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "{number} km to city center",
|
|
},
|
|
{
|
|
number: getSingleDecimal(
|
|
hotel.location.distanceToCentre / 1000
|
|
),
|
|
}
|
|
)}
|
|
</span>
|
|
</div>
|
|
</Typography>
|
|
</div>
|
|
{hotelDescription ? (
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>{hotelDescription}</p>
|
|
</Typography>
|
|
) : null}
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<ul className={styles.amenityList}>
|
|
{amenities.map((amenity) => {
|
|
return (
|
|
<li className={styles.amenityItem} key={amenity.id}>
|
|
<FacilityToIcon
|
|
id={amenity.id}
|
|
color="CurrentColor"
|
|
size={20}
|
|
/>
|
|
{amenity.name}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</Typography>
|
|
</div>
|
|
<div className={styles.ctaWrapper}>
|
|
<ButtonLink
|
|
href={url}
|
|
variant="Tertiary"
|
|
color="Primary"
|
|
size="Small"
|
|
typography="Body/Supporting text (caption)/smBold"
|
|
>
|
|
{intl.formatMessage({
|
|
defaultMessage: "See hotel details",
|
|
})}
|
|
</ButtonLink>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|