101 lines
3.1 KiB
TypeScript
101 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
|
import { CloseLargeIcon } 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 Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./hotelCardDialog.module.css"
|
|
|
|
import type { HotelCardDialogProps } from "@/types/components/hotelReservation/selectHotel/map"
|
|
|
|
export default function HotelCardDialog({
|
|
pin,
|
|
isOpen,
|
|
handleClose,
|
|
}: HotelCardDialogProps) {
|
|
const intl = useIntl()
|
|
|
|
if (!pin) {
|
|
return null
|
|
}
|
|
|
|
const {
|
|
name,
|
|
publicPrice,
|
|
memberPrice,
|
|
currency,
|
|
amenities,
|
|
images,
|
|
ratings,
|
|
} = pin
|
|
|
|
const firstImage = images[0]?.imageSizes?.small
|
|
const altText = images[0]?.metaData?.altText
|
|
|
|
return (
|
|
<dialog open={isOpen} className={styles.dialog}>
|
|
<div className={styles.dialogContainer}>
|
|
<CloseLargeIcon
|
|
onClick={handleClose}
|
|
className={styles.closeIcon}
|
|
width={16}
|
|
height={16}
|
|
/>
|
|
<div className={styles.imageContainer}>
|
|
<Image src={firstImage} alt={altText} fill />
|
|
<div className={styles.tripAdvisor}>
|
|
<Chip intent="primary" className={styles.tripAdvisor}>
|
|
<TripAdvisorIcon color="white" />
|
|
{ratings}
|
|
</Chip>
|
|
</div>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<Body textTransform="bold">{name}</Body>
|
|
<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="uiTextMediumContrast">
|
|
{facility.name}
|
|
</Caption>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
<div className={styles.prices}>
|
|
<Caption type="bold">{intl.formatMessage({ id: "From" })}</Caption>
|
|
<Subtitle type="two">
|
|
{publicPrice} {currency}
|
|
<Body asChild>
|
|
<span>/{intl.formatMessage({ id: "night" })}</span>
|
|
</Body>
|
|
</Subtitle>
|
|
{memberPrice && (
|
|
<Subtitle type="two" color="red" className={styles.memberPrice}>
|
|
{memberPrice} {currency}
|
|
<Body asChild color="red">
|
|
<span>/{intl.formatMessage({ id: "night" })}</span>
|
|
</Body>
|
|
</Subtitle>
|
|
)}
|
|
</div>
|
|
<Button size="small" theme="base" className={styles.button}>
|
|
{intl.formatMessage({ id: "See rooms" })}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
)
|
|
}
|