69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { guestsRoomsStore } from "@/stores/guests-rooms"
|
|
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import ChildInfoSelector from "./ChildInfoSelector"
|
|
|
|
import styles from "./child-selector.module.css"
|
|
|
|
import { ChildSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function ChildSelector({ roomIndex = 0 }: ChildSelectorProps) {
|
|
const intl = useIntl()
|
|
const childrenLabel = intl.formatMessage({ id: "Children" })
|
|
const { setValue } = useFormContext()
|
|
const children = guestsRoomsStore().rooms[roomIndex].children
|
|
const { increaseChildren, decreaseChildren, childCount } = guestsRoomsStore()
|
|
|
|
function updateChildrenCount(direction: string, roomIndex: number) {
|
|
if (direction == "up" && children.length < 5) {
|
|
increaseChildren(roomIndex)
|
|
setValue(`rooms.${roomIndex}.children.${children.length}`, {
|
|
age: -1,
|
|
bed: -1,
|
|
})
|
|
} else if (children.length > 0) {
|
|
decreaseChildren(roomIndex)
|
|
let newChildrenList = JSON.parse(JSON.stringify(children))
|
|
newChildrenList.pop()
|
|
setValue(`rooms.${roomIndex}.children`, newChildrenList)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<section className={styles.container}>
|
|
<Caption>{childrenLabel}</Caption>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
onClick={() => updateChildrenCount("down", roomIndex)}
|
|
>
|
|
-
|
|
</Button>
|
|
<span className={styles.textCenter}>{children.length}</span>
|
|
<Button
|
|
intent="text"
|
|
size="small"
|
|
onClick={() => updateChildrenCount("up", roomIndex)}
|
|
>
|
|
+
|
|
</Button>
|
|
</section>
|
|
{children.map((child, index) => (
|
|
<div key={index} className={styles.childInfoContainer}>
|
|
<ChildInfoSelector
|
|
roomIndex={roomIndex}
|
|
index={index}
|
|
child={child}
|
|
/>
|
|
</div>
|
|
))}
|
|
</>
|
|
)
|
|
}
|