98 lines
3.3 KiB
TypeScript
98 lines
3.3 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
|
import Contact from "@/components/HotelReservation/Contact"
|
|
import Accordion from "@/components/TempDesignSystem/Accordion"
|
|
import SidePeek from "@/components/TempDesignSystem/SidePeek"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import Accessibility from "./Accordions/Accessibility"
|
|
import CheckinCheckOut from "./Accordions/CheckInCheckOut"
|
|
import MeetingsAndConferences from "./Accordions/MeetingsAndConferences"
|
|
import Parking from "./Accordions/Parking"
|
|
import Restaurant from "./Accordions/Restaurant"
|
|
|
|
import styles from "./hotelSidePeek.module.css"
|
|
|
|
import type { HotelSidePeekProps } from "@/types/components/hotelReservation/hotelSidePeek"
|
|
import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
|
|
|
|
export default function HotelSidePeek({
|
|
hotel,
|
|
additionalHotelData,
|
|
activeSidePeek,
|
|
close,
|
|
}: HotelSidePeekProps) {
|
|
const intl = useIntl()
|
|
const amenitiesList = hotel.detailedFacilities.filter(
|
|
(facility) => facility.public
|
|
)
|
|
const parking = hotel.parking.filter(
|
|
(p) => p?.numberOfParkingSpots || p?.numberOfChargingSpaces || p?.address
|
|
)
|
|
|
|
return (
|
|
<SidePeek
|
|
title={hotel.name}
|
|
isOpen={activeSidePeek === SidePeekEnum.hotelDetails}
|
|
handleClose={close}
|
|
>
|
|
<div className={styles.content}>
|
|
<Subtitle color="baseTextHighContrast">
|
|
{intl.formatMessage({ id: "Practical information" })}
|
|
</Subtitle>
|
|
<Contact hotel={hotel} />
|
|
<Accordion>
|
|
{parking?.length > 0 && <Parking parking={parking} />}
|
|
{additionalHotelData?.restaurantsOverviewPage
|
|
?.restaurantsContentDescriptionMedium && (
|
|
<Restaurant
|
|
restaurantsContentDescriptionMedium={
|
|
additionalHotelData.restaurantsOverviewPage
|
|
.restaurantsContentDescriptionMedium
|
|
}
|
|
/>
|
|
)}
|
|
{additionalHotelData?.hotelSpecialNeeds.elevatorPitch && (
|
|
<Accessibility
|
|
elevatorPitchText={
|
|
additionalHotelData.hotelSpecialNeeds.elevatorPitch
|
|
}
|
|
/>
|
|
)}
|
|
{hotel.hotelFacts?.checkin && (
|
|
<CheckinCheckOut checkin={hotel.hotelFacts.checkin} />
|
|
)}
|
|
{hotel.hotelContent.texts?.meetingDescription?.medium && (
|
|
<MeetingsAndConferences
|
|
meetingDescription={
|
|
hotel.hotelContent.texts.meetingDescription.medium
|
|
}
|
|
/>
|
|
)}
|
|
</Accordion>
|
|
<div className={styles.amenity}>
|
|
{amenitiesList.map((amenity) => {
|
|
const Icon = mapFacilityToIcon(amenity.id)
|
|
return (
|
|
<Subtitle type="two" key={amenity.id} color="uiTextHighContrast">
|
|
{Icon && (
|
|
<Icon width={24} height={24} color="uiTextHighContrast" />
|
|
)}
|
|
{amenity.name}
|
|
</Subtitle>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* TODO: handle linking to Hotel Page */}
|
|
{/* {showCTA && (
|
|
<Button theme="base" intent="secondary" size="large">
|
|
Read more about the hotel
|
|
</Button>
|
|
)} */}
|
|
</div>
|
|
</SidePeek>
|
|
)
|
|
}
|