137 lines
4.2 KiB
TypeScript
137 lines
4.2 KiB
TypeScript
"use client"
|
|
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { useGuestsRoomsStore } from "@/stores/guests-rooms"
|
|
|
|
import { CloseLargeIcon, PlusCircleIcon, PlusIcon } from "../Icons"
|
|
import Button from "../TempDesignSystem/Button"
|
|
import Divider from "../TempDesignSystem/Divider"
|
|
import Subtitle from "../TempDesignSystem/Text/Subtitle"
|
|
import { Tooltip } from "../TempDesignSystem/Tooltip"
|
|
import AdultSelector from "./AdultSelector"
|
|
import ChildSelector from "./ChildSelector"
|
|
|
|
import styles from "./guests-rooms-picker.module.css"
|
|
|
|
import { BookingWidgetSchema } from "@/types/components/bookingWidget"
|
|
import { GuestsRoomsPickerProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function GuestsRoomsPicker({
|
|
closePicker,
|
|
}: GuestsRoomsPickerProps) {
|
|
const intl = useIntl()
|
|
const doneLabel = intl.formatMessage({ id: "Done" })
|
|
const roomLabel = intl.formatMessage({ id: "Room" })
|
|
const disabledBookingOptionsHeader = intl.formatMessage({
|
|
id: "Disabled booking options header",
|
|
})
|
|
const disabledBookingOptionsText = intl.formatMessage({
|
|
id: "Disabled booking options text",
|
|
})
|
|
const addRoomLabel = intl.formatMessage({ id: "Add Room" })
|
|
|
|
const { getFieldState } = useFormContext<BookingWidgetSchema>()
|
|
|
|
const rooms = useGuestsRoomsStore((state) => state.rooms)
|
|
|
|
// Not in MVP
|
|
// const increaseRoom = useGuestsRoomsStore.use.increaseRoom()
|
|
// const decreaseRoom = useGuestsRoomsStore.use.decreaseRoom()
|
|
|
|
return (
|
|
<div className={styles.pickerContainer}>
|
|
<header className={styles.header}>
|
|
<button type="button" className={styles.close} onClick={closePicker}>
|
|
<CloseLargeIcon />
|
|
</button>
|
|
</header>
|
|
<div className={styles.contentContainer}>
|
|
{rooms.map((room, index) => (
|
|
<div className={styles.roomContainer} key={index}>
|
|
<section className={styles.roomDetailsContainer}>
|
|
<Subtitle type="two" className={styles.roomHeading}>
|
|
{roomLabel} {index + 1}
|
|
</Subtitle>
|
|
<AdultSelector roomIndex={index} />
|
|
<ChildSelector roomIndex={index} />
|
|
</section>
|
|
{/* Not in MVP
|
|
{index > 0 ? (
|
|
<Button intent="text" onClick={() => decreaseRoom(index)}>
|
|
Remove Room
|
|
</Button>
|
|
) : null} */}
|
|
<Divider color="primaryLightSubtle" />
|
|
</div>
|
|
))}
|
|
<div className={styles.addRoomMobileContainer}>
|
|
<Tooltip
|
|
heading={disabledBookingOptionsHeader}
|
|
text={disabledBookingOptionsText}
|
|
position="top"
|
|
arrow="left"
|
|
>
|
|
{rooms.length < 4 ? (
|
|
<Button
|
|
intent="text"
|
|
variant="icon"
|
|
wrapping
|
|
disabled
|
|
theme="base"
|
|
fullWidth
|
|
>
|
|
<PlusIcon />
|
|
{addRoomLabel}
|
|
</Button>
|
|
) : null}
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
<footer className={styles.footer}>
|
|
<div className={styles.hideOnMobile}>
|
|
<Tooltip
|
|
heading={disabledBookingOptionsHeader}
|
|
text={disabledBookingOptionsText}
|
|
position="top"
|
|
arrow="left"
|
|
>
|
|
{rooms.length < 4 ? (
|
|
<Button
|
|
intent="text"
|
|
variant="icon"
|
|
wrapping
|
|
disabled
|
|
theme="base"
|
|
>
|
|
<PlusCircleIcon />
|
|
{addRoomLabel}
|
|
</Button>
|
|
) : null}
|
|
</Tooltip>
|
|
</div>
|
|
<Button
|
|
onClick={closePicker}
|
|
disabled={getFieldState("rooms").invalid}
|
|
className={styles.hideOnMobile}
|
|
intent="tertiary"
|
|
theme="base"
|
|
size="small"
|
|
>
|
|
{doneLabel}
|
|
</Button>
|
|
<Button
|
|
onClick={closePicker}
|
|
disabled={getFieldState("rooms").invalid}
|
|
className={styles.hideOnDesktop}
|
|
intent="tertiary"
|
|
theme="base"
|
|
size="large"
|
|
>
|
|
{doneLabel}
|
|
</Button>
|
|
</footer>
|
|
</div>
|
|
)
|
|
}
|