90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
"use client"
|
|
import { useEffect } from "react"
|
|
|
|
import { useRatesStore } from "@/stores/select-rate"
|
|
|
|
import RoomProvider from "@/providers/SelectRate/RoomProvider"
|
|
import { trackLowestRoomPrice } from "@/utils/tracking"
|
|
|
|
import BookingCodeFilter from "./BookingCodeFilter"
|
|
import MultiRoomWrapper from "./MultiRoomWrapper"
|
|
import NoAvailabilityAlert from "./NoAvailabilityAlert"
|
|
import RoomsList from "./RoomsList"
|
|
import RoomTypeFilter from "./RoomTypeFilter"
|
|
|
|
import styles from "./rooms.module.css"
|
|
|
|
import type { PriceProduct } from "@/types/trpc/routers/hotel/roomAvailability"
|
|
|
|
export default function Rooms() {
|
|
const {
|
|
arrivalDate,
|
|
bookingRooms,
|
|
departureDate,
|
|
hotelId,
|
|
rooms,
|
|
visibleRooms,
|
|
} = useRatesStore((state) => ({
|
|
arrivalDate: state.booking.fromDate,
|
|
bookingRooms: state.booking.rooms,
|
|
departureDate: state.booking.toDate,
|
|
hotelId: state.booking.hotelId,
|
|
rooms: state.rooms,
|
|
visibleRooms: state.roomConfigurations,
|
|
}))
|
|
|
|
useEffect(() => {
|
|
const pricesWithCurrencies = visibleRooms.flatMap((roomConfiguration) =>
|
|
roomConfiguration.flatMap((room) =>
|
|
room.products
|
|
.filter(
|
|
(product): product is PriceProduct =>
|
|
!!(
|
|
("public" in product && product.public) ||
|
|
("member" in product && product.member)
|
|
)
|
|
)
|
|
.map((product) => ({
|
|
currency: (product.public?.localPrice.currency ||
|
|
product.member?.localPrice.currency)!,
|
|
price: (product.public?.localPrice.pricePerNight ||
|
|
product.member?.localPrice.pricePerNight)!,
|
|
}))
|
|
)
|
|
)
|
|
const lowestPrice = pricesWithCurrencies.reduce(
|
|
(minPrice, { price }) => Math.min(minPrice, price),
|
|
Infinity
|
|
)
|
|
|
|
const currency = pricesWithCurrencies[0]?.currency
|
|
|
|
trackLowestRoomPrice({
|
|
hotelId,
|
|
arrivalDate,
|
|
departureDate,
|
|
lowestPrice: lowestPrice,
|
|
currency: currency,
|
|
})
|
|
}, [arrivalDate, departureDate, hotelId, visibleRooms])
|
|
|
|
return (
|
|
<div className={styles.content}>
|
|
{bookingRooms.map((room, idx) => (
|
|
<RoomProvider
|
|
key={`${room.rateCode}-${room.roomTypeCode}-${idx}`}
|
|
idx={idx}
|
|
room={rooms[idx]}
|
|
>
|
|
<MultiRoomWrapper isMultiRoom={bookingRooms.length > 1}>
|
|
<NoAvailabilityAlert />
|
|
<RoomTypeFilter />
|
|
<BookingCodeFilter />
|
|
<RoomsList />
|
|
</MultiRoomWrapper>
|
|
</RoomProvider>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|