84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import { useEffect } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { useRatesStore } from "@/stores/select-rate"
|
|
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import { useRoomContext } from "@/contexts/Room"
|
|
|
|
import SelectedRoomPanel from "./SelectedRoomPanel"
|
|
import { roomSelectionPanelVariants } from "./variants"
|
|
|
|
import styles from "./multiRoomWrapper.module.css"
|
|
|
|
export default function MultiRoomWrapper({
|
|
children,
|
|
isMultiRoom,
|
|
}: React.PropsWithChildren<{ isMultiRoom: boolean }>) {
|
|
const intl = useIntl()
|
|
const activeRoom = useRatesStore((state) => state.activeRoom)
|
|
const { bookingRoom, isActiveRoom, roomNr, selectedRate } = useRoomContext()
|
|
|
|
const onlyAdultsMsg = intl.formatMessage(
|
|
{ id: "{adults} adults" },
|
|
{ adults: bookingRoom.adults }
|
|
)
|
|
const adultsAndChildrenMsg = intl.formatMessage(
|
|
{ id: "{adults} adults, {children} children" },
|
|
{
|
|
adults: bookingRoom.adults,
|
|
children: bookingRoom.childrenInRoom?.length,
|
|
}
|
|
)
|
|
|
|
useEffect(() => {
|
|
requestAnimationFrame(() => {
|
|
const SCROLL_OFFSET = 100
|
|
const roomElements = document.querySelectorAll(`.${styles.roomContainer}`)
|
|
|
|
const selectedRoom = roomElements[activeRoom]
|
|
|
|
if (selectedRoom) {
|
|
const elementPosition = selectedRoom.getBoundingClientRect().top
|
|
const offsetPosition = elementPosition + window.scrollY - SCROLL_OFFSET
|
|
|
|
window.scrollTo({
|
|
top: offsetPosition,
|
|
behavior: "smooth",
|
|
})
|
|
}
|
|
})
|
|
}, [activeRoom])
|
|
|
|
if (isMultiRoom) {
|
|
const classNames = roomSelectionPanelVariants({
|
|
active: isActiveRoom,
|
|
selected: !!selectedRate && !isActiveRoom,
|
|
})
|
|
return (
|
|
<div className={styles.roomContainer}>
|
|
{selectedRate && !isActiveRoom ? null : (
|
|
<Subtitle className={styles.subtitle} color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "Room {roomIndex}" },
|
|
{ roomIndex: roomNr }
|
|
)}
|
|
,{" "}
|
|
{bookingRoom.childrenInRoom?.length
|
|
? adultsAndChildrenMsg
|
|
: onlyAdultsMsg}
|
|
</Subtitle>
|
|
)}
|
|
<div className={classNames}>
|
|
<div className={styles.roomPanel}>
|
|
<SelectedRoomPanel room={bookingRoom} />
|
|
</div>
|
|
<div className={styles.roomSelectionPanel}>{children}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return children
|
|
}
|