132 lines
3.7 KiB
TypeScript
132 lines
3.7 KiB
TypeScript
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { guestsRoomsStore } from "@/stores/guests-rooms"
|
|
|
|
import Select from "@/components/TempDesignSystem/Select"
|
|
|
|
import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
|
|
import {
|
|
ChildBed,
|
|
ChildInfoSelectorProps,
|
|
} from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function ChildInfoSelector({
|
|
child = { age: -1, bed: -1 },
|
|
index = 0,
|
|
roomIndex = 0,
|
|
}: ChildInfoSelectorProps) {
|
|
const intl = useIntl()
|
|
const ageLabel = intl.formatMessage({ id: "Age" })
|
|
const ageReqdErrMsg = intl.formatMessage({ id: "Child age is required" })
|
|
const bedLabel = intl.formatMessage({ id: "Bed" })
|
|
const { setValue } = useFormContext()
|
|
const { adults, childrenInAdultsBed } = guestsRoomsStore().rooms[roomIndex]
|
|
const {
|
|
isValidated,
|
|
updateChildAge,
|
|
updateChildBed,
|
|
increaseChildInAdultsBed,
|
|
decreaseChildInAdultsBed,
|
|
} = guestsRoomsStore()
|
|
|
|
const ageList = [
|
|
{ label: "0", value: 0 },
|
|
{ label: "1", value: 1 },
|
|
{ label: "2", value: 2 },
|
|
{ label: "3", value: 3 },
|
|
{ label: "4", value: 4 },
|
|
{ label: "5", value: 5 },
|
|
{ label: "6", value: 6 },
|
|
{ label: "7", value: 7 },
|
|
{ label: "8", value: 8 },
|
|
{ label: "9", value: 9 },
|
|
{ label: "10", value: 10 },
|
|
{ label: "11", value: 11 },
|
|
{ label: "12", value: 12 },
|
|
]
|
|
|
|
function updateSelectedAge(age: number) {
|
|
updateChildAge(age, roomIndex, index)
|
|
setValue(`rooms.${roomIndex}.children.${index}.age`, age, {
|
|
shouldTouch: true,
|
|
})
|
|
const availableBedTypes = getAvailableBeds(age)
|
|
updateSelectedBed(availableBedTypes[0].value)
|
|
}
|
|
|
|
function updateSelectedBed(bed: number) {
|
|
if (bed == BedTypeEnum["In adults bed"] && childrenInAdultsBed < adults) {
|
|
increaseChildInAdultsBed(roomIndex)
|
|
} else if (child.bed == BedTypeEnum["In adults bed"]) {
|
|
decreaseChildInAdultsBed(roomIndex)
|
|
}
|
|
updateChildBed(bed, roomIndex, index)
|
|
setValue(`rooms.${roomIndex}.children.${index}.bed`, bed)
|
|
}
|
|
|
|
const allBedTypes: ChildBed[] = [
|
|
{
|
|
label: intl.formatMessage({ id: "In adults bed" }),
|
|
value: BedTypeEnum["In adults bed"],
|
|
},
|
|
{
|
|
label: intl.formatMessage({ id: "In crib" }),
|
|
value: BedTypeEnum["In crib"],
|
|
},
|
|
{
|
|
label: intl.formatMessage({ id: "In extra bed" }),
|
|
value: BedTypeEnum["In extra bed"],
|
|
},
|
|
]
|
|
|
|
function getAvailableBeds(age: number) {
|
|
let availableBedTypes: ChildBed[] = []
|
|
if (age <= 5 && (adults > childrenInAdultsBed || child.bed === 0)) {
|
|
availableBedTypes.push(allBedTypes[0])
|
|
}
|
|
if (age < 3) {
|
|
availableBedTypes.push(allBedTypes[1])
|
|
}
|
|
if (age > 2) {
|
|
availableBedTypes.push(allBedTypes[2])
|
|
}
|
|
return availableBedTypes
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div>
|
|
<Select
|
|
required={true}
|
|
items={ageList}
|
|
label={ageLabel}
|
|
aria-label={ageLabel}
|
|
value={child.age}
|
|
onSelect={(key) => {
|
|
updateSelectedAge(parseInt(key.toString()))
|
|
}}
|
|
name={`rooms.${roomIndex}.children.${index}.age`}
|
|
placeholder={ageLabel}
|
|
/>
|
|
{isValidated && child.age < 0 ? <span>{ageReqdErrMsg}</span> : null}
|
|
</div>
|
|
<div>
|
|
{child.age !== -1 ? (
|
|
<Select
|
|
items={getAvailableBeds(child.age)}
|
|
label={bedLabel}
|
|
aria-label={bedLabel}
|
|
value={child.bed}
|
|
onSelect={(key) => {
|
|
updateSelectedBed(parseInt(key.toString()))
|
|
}}
|
|
name={`rooms.${roomIndex}.children.${index}.age`}
|
|
placeholder={bedLabel}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|