70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
"use client"
|
|
import { useEffect } from "react"
|
|
|
|
import { useRatesStore } from "@/stores/select-rate"
|
|
|
|
import RoomProvider from "@/providers/RoomProvider"
|
|
import { trackLowestRoomPrice } from "@/utils/tracking"
|
|
|
|
import MultiRoomWrapper from "./MultiRoomWrapper"
|
|
import RoomSelectionPanel from "./RoomSelectionPanel"
|
|
|
|
import styles from "./rooms.module.css"
|
|
|
|
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.allRooms,
|
|
}))
|
|
|
|
useEffect(() => {
|
|
const pricesWithCurrencies = visibleRooms.flatMap((room) =>
|
|
room.products.map((product) => ({
|
|
price: product.productType.public.localPrice.pricePerNight,
|
|
currency: product.productType.public.localPrice.currency,
|
|
}))
|
|
)
|
|
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}>
|
|
<RoomSelectionPanel />
|
|
</MultiRoomWrapper>
|
|
</RoomProvider>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|