55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { alternativeHotels } from "@/constants/routes/hotelReservation"
|
|
|
|
import Alert from "@/components/TempDesignSystem/Alert"
|
|
import { useRoomContext } from "@/contexts/Room"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import RoomCard from "./RoomCard"
|
|
import RoomTypeFilter from "./RoomTypeFilter"
|
|
|
|
import styles from "./roomSelectionPanel.module.css"
|
|
|
|
import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
|
|
import { AlertTypeEnum } from "@/types/enums/alert"
|
|
|
|
export default function RoomSelectionPanel() {
|
|
const { rooms } = useRoomContext()
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const noAvailableRooms = rooms.every(
|
|
(roomConfig) => roomConfig.status === AvailabilityEnum.NotAvailable
|
|
)
|
|
return (
|
|
<>
|
|
{noAvailableRooms ? (
|
|
<div className={styles.hotelAlert}>
|
|
<Alert
|
|
type={AlertTypeEnum.Info}
|
|
heading={intl.formatMessage({ id: "No availability" })}
|
|
text={intl.formatMessage({
|
|
id: "There are no rooms available that match your request.",
|
|
})}
|
|
link={{
|
|
title: intl.formatMessage({ id: "See alternative hotels" }),
|
|
url: `${alternativeHotels(lang)}`,
|
|
keepSearchParams: true,
|
|
}}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
<RoomTypeFilter />
|
|
<ul className={styles.roomList}>
|
|
{rooms.map((roomConfiguration) => (
|
|
<RoomCard
|
|
key={roomConfiguration.roomTypeCode}
|
|
roomConfiguration={roomConfiguration}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</>
|
|
)
|
|
}
|