115 lines
3.1 KiB
TypeScript
115 lines
3.1 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
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 {
|
|
Child,
|
|
ChildBed,
|
|
ChildSelectorProps,
|
|
} from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function ChildSelector({
|
|
roomChildren = [],
|
|
adultCount = 1,
|
|
updateChildren = (children: Child[]) => {},
|
|
isValid,
|
|
}: ChildSelectorProps) {
|
|
const intl = useIntl()
|
|
const childrenLabel = intl.formatMessage({ id: "Children" })
|
|
|
|
function decreaseChildren() {
|
|
if (roomChildren.length > 0) {
|
|
roomChildren.pop()
|
|
updateChildren(roomChildren)
|
|
}
|
|
}
|
|
|
|
function increaseChildren() {
|
|
if (roomChildren.length < 5) {
|
|
roomChildren.push({ age: -1, bed: -1 })
|
|
updateChildren(roomChildren)
|
|
}
|
|
}
|
|
|
|
function updateChildInfo(child: Child, index: number) {
|
|
roomChildren[index] = child
|
|
updateChildren(roomChildren)
|
|
}
|
|
|
|
const childInAdultsBedIndices: number[] = []
|
|
let availableInAdultsBed = adultCount
|
|
const availableBedTypes: ChildBed[] = [
|
|
{ label: intl.formatMessage({ id: "In adults bed" }), value: 0 },
|
|
{ label: intl.formatMessage({ id: "In crib" }), value: 1 },
|
|
{ label: intl.formatMessage({ id: "In extra bed" }), value: 2 },
|
|
]
|
|
|
|
const childBedTypes: ChildBed[][] = []
|
|
for (let i = 0; i < roomChildren.length; i++) {
|
|
if (roomChildren[i].bed == 0 && availableInAdultsBed > 0) {
|
|
childInAdultsBedIndices.push(i)
|
|
availableInAdultsBed = availableInAdultsBed - 1
|
|
}
|
|
}
|
|
roomChildren.forEach((child, index) => {
|
|
let types: typeof availableBedTypes = []
|
|
let selectedBed: boolean = false
|
|
if (
|
|
child.age <= 5 &&
|
|
(availableInAdultsBed > 0 || childInAdultsBedIndices.indexOf(index) != -1)
|
|
) {
|
|
types.push(availableBedTypes[0])
|
|
if (child.bed == 0) {
|
|
selectedBed = true
|
|
}
|
|
}
|
|
if (child.age < 3) {
|
|
types.push(availableBedTypes[1])
|
|
if (child.bed == 1) {
|
|
selectedBed = true
|
|
}
|
|
}
|
|
if (child.age > 2) {
|
|
types.push(availableBedTypes[2])
|
|
if (child.bed == 2) {
|
|
selectedBed = true
|
|
}
|
|
}
|
|
childBedTypes[index] = types
|
|
if (!selectedBed) {
|
|
child.bed = types[0].value
|
|
}
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<section className={styles.container}>
|
|
<Caption>{childrenLabel}</Caption>
|
|
<Button intent="text" size="small" onClick={decreaseChildren}>
|
|
-
|
|
</Button>
|
|
<span className={styles.textCenter}>{roomChildren.length}</span>
|
|
<Button intent="text" size="small" onClick={increaseChildren}>
|
|
+
|
|
</Button>
|
|
</section>
|
|
{roomChildren.map((child, index) => (
|
|
<div key={index} className={styles.childInfoContainer}>
|
|
<ChildInfoSelector
|
|
index={index}
|
|
child={child}
|
|
availableBedTypes={childBedTypes[index]}
|
|
updateChild={updateChildInfo}
|
|
isValid={isValid}
|
|
/>
|
|
</div>
|
|
))}
|
|
</>
|
|
)
|
|
}
|