88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { guestsRoomsStore } from "@/stores/guests-rooms"
|
|
|
|
import { guestRoomsSchema } from "../Forms/BookingWidget/schema"
|
|
import { CloseLarge } from "../Icons"
|
|
import Button from "../TempDesignSystem/Button"
|
|
import Divider from "../TempDesignSystem/Divider"
|
|
import Subtitle from "../TempDesignSystem/Text/Subtitle"
|
|
import AdultSelector from "./AdultSelector"
|
|
import ChildSelector from "./ChildSelector"
|
|
|
|
import styles from "./guests-rooms-picker.module.css"
|
|
|
|
import { GuestsRoomsPickerProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function GuestsRoomsPicker({
|
|
closePicker,
|
|
}: GuestsRoomsPickerProps) {
|
|
const intl = useIntl()
|
|
const doneLabel = intl.formatMessage({ id: "Done" })
|
|
|
|
const guestsData = guestsRoomsStore().rooms
|
|
const guestRoomsValidData = guestRoomsSchema.safeParse(guestsData)
|
|
const isInValid = !guestRoomsValidData.success
|
|
const roomLabel = intl.formatMessage({ id: "Room" })
|
|
|
|
// Not in MVP
|
|
// const { increaseRoom, decreaseRoom } = guestsRoomsStore()
|
|
|
|
return (
|
|
<>
|
|
<header className={styles.header}>
|
|
<button type="button" className={styles.close} onClick={closePicker}>
|
|
<CloseLarge />
|
|
</button>
|
|
</header>
|
|
{guestsData.map((room, index) => (
|
|
<section 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" />
|
|
</section>
|
|
))}
|
|
<footer className={styles.footer}>
|
|
{/* Not in MVP
|
|
{guestsData.length < 4 ? (
|
|
<Button intent="text" onClick={increaseRoom}>
|
|
Add Room
|
|
</Button>
|
|
) : null} */}
|
|
<Button
|
|
onClick={closePicker}
|
|
disabled={isInValid}
|
|
className={styles.hideOnMobile}
|
|
intent="tertiary"
|
|
theme="base"
|
|
size="small"
|
|
>
|
|
{doneLabel}
|
|
</Button>
|
|
<Button
|
|
onClick={closePicker}
|
|
disabled={isInValid}
|
|
className={styles.hideOnDesktop}
|
|
intent="tertiary"
|
|
theme="base"
|
|
size="large"
|
|
>
|
|
{doneLabel}
|
|
</Button>
|
|
</footer>
|
|
</>
|
|
)
|
|
}
|