71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import Counter from "../Counter"
|
|
import ChildInfoSelector from "./ChildInfoSelector"
|
|
|
|
import styles from "./child-selector.module.css"
|
|
|
|
import type { SelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function ChildSelector({
|
|
roomIndex = 0,
|
|
currentAdults,
|
|
childrenInAdultsBed,
|
|
currentChildren,
|
|
}: SelectorProps) {
|
|
const intl = useIntl()
|
|
const childrenLabel = intl.formatMessage({ id: "Children" })
|
|
const { setValue } = useFormContext()
|
|
|
|
function increaseChildrenCount(roomIndex: number) {
|
|
if (currentChildren.length < 5) {
|
|
setValue(`rooms.${roomIndex}.child.${currentChildren.length}`, {
|
|
age: undefined,
|
|
bed: undefined,
|
|
})
|
|
}
|
|
}
|
|
function decreaseChildrenCount(roomIndex: number) {
|
|
if (currentChildren.length > 0) {
|
|
currentChildren.pop()
|
|
setValue(`rooms.${roomIndex}.child`, currentChildren)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<section className={styles.container}>
|
|
<Caption color="uiTextHighContrast" type="bold">
|
|
{childrenLabel}
|
|
</Caption>
|
|
<Counter
|
|
count={currentChildren.length}
|
|
handleOnDecrease={() => {
|
|
decreaseChildrenCount(roomIndex)
|
|
}}
|
|
handleOnIncrease={() => {
|
|
increaseChildrenCount(roomIndex)
|
|
}}
|
|
disableDecrease={currentChildren.length == 0}
|
|
disableIncrease={currentChildren.length == 5}
|
|
/>
|
|
</section>
|
|
{currentChildren.map((child, index) => (
|
|
<ChildInfoSelector
|
|
roomIndex={roomIndex}
|
|
index={index}
|
|
child={child}
|
|
adults={currentAdults}
|
|
key={"child_" + index}
|
|
childrenInAdultsBed={childrenInAdultsBed}
|
|
/>
|
|
))}
|
|
</>
|
|
)
|
|
}
|