64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { useRoomContext } from "@/contexts/SelectRate/Room"
|
|
|
|
import BookingCodeFilter from "./BookingCodeFilter"
|
|
import RoomPackageFilter from "./RoomPackageFilter"
|
|
|
|
import styles from "./roomsHeader.module.css"
|
|
|
|
import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
|
|
|
|
export default function RoomsHeader() {
|
|
const { isFetchingPackages, rooms, totalRooms } = useRoomContext()
|
|
const intl = useIntl()
|
|
|
|
const availableRooms = rooms.filter(
|
|
(room) => room.status === AvailabilityEnum.Available
|
|
).length
|
|
|
|
const notAllRoomsAvailableText = intl.formatMessage(
|
|
{
|
|
defaultMessage:
|
|
"{availableRooms}/{numberOfRooms, plural, one {# room type} other {# room types}} available",
|
|
},
|
|
{
|
|
availableRooms,
|
|
numberOfRooms: totalRooms,
|
|
}
|
|
)
|
|
|
|
const allRoomsAvailableText = intl.formatMessage(
|
|
{
|
|
defaultMessage:
|
|
"{numberOfRooms, plural, one {# room type} other {# room types}} available",
|
|
},
|
|
{
|
|
numberOfRooms: totalRooms,
|
|
}
|
|
)
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<Typography variant="Title/Subtitle/md" className={styles.availableRooms}>
|
|
{isFetchingPackages ? (
|
|
<p></p>
|
|
) : (
|
|
<p>
|
|
{availableRooms !== totalRooms
|
|
? notAllRoomsAvailableText
|
|
: allRoomsAvailableText}
|
|
</p>
|
|
)}
|
|
</Typography>
|
|
<div className={styles.filters}>
|
|
<RoomPackageFilter />
|
|
<BookingCodeFilter />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|