112 lines
3.1 KiB
TypeScript
112 lines
3.1 KiB
TypeScript
import { useEffect } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { useRatesStore } from "@/stores/select-rate"
|
|
|
|
import { ChevronUpIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
import { useRoomContext } from "@/contexts/SelectRate/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 {
|
|
actions: { closeSection },
|
|
bookingRoom,
|
|
isActiveRoom,
|
|
roomNr,
|
|
selectedRate,
|
|
} = useRoomContext()
|
|
|
|
const roomMsg = intl.formatMessage(
|
|
{ id: "Room {roomIndex}" },
|
|
{ roomIndex: roomNr }
|
|
)
|
|
|
|
const adultsMsg = intl.formatMessage(
|
|
{ id: "{adults, plural, one {# adult} other {# adults}}" },
|
|
{ adults: bookingRoom.adults }
|
|
)
|
|
|
|
const childrenMsg = intl.formatMessage(
|
|
{
|
|
id: "{children, plural, one {# child} other {# children}}",
|
|
},
|
|
{
|
|
children: bookingRoom.childrenInRoom?.length,
|
|
}
|
|
)
|
|
|
|
const onlyAdultsMsg = adultsMsg
|
|
const adultsAndChildrenMsg = [adultsMsg, childrenMsg].join(", ")
|
|
const guestsMsg = bookingRoom.childrenInRoom?.length
|
|
? adultsAndChildrenMsg
|
|
: onlyAdultsMsg
|
|
|
|
const title = [roomMsg, guestsMsg].join(", ")
|
|
|
|
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} data-multiroom="true">
|
|
<div className={styles.header}>
|
|
{selectedRate && !isActiveRoom ? null : (
|
|
<Subtitle color="uiTextHighContrast">{title}</Subtitle>
|
|
)}
|
|
{selectedRate && isActiveRoom ? (
|
|
<Button
|
|
intent="text"
|
|
onClick={closeSection}
|
|
size="medium"
|
|
theme="base"
|
|
variant="icon"
|
|
>
|
|
{intl.formatMessage({ id: "Close" })}
|
|
<ChevronUpIcon height={20} width={20} />
|
|
</Button>
|
|
) : null}
|
|
</div>
|
|
<div className={classNames}>
|
|
<div className={styles.roomPanel}>
|
|
<SelectedRoomPanel />
|
|
</div>
|
|
<div className={styles.roomSelectionPanel}>{children}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return children
|
|
}
|