141 lines
4.0 KiB
TypeScript
141 lines
4.0 KiB
TypeScript
"use client"
|
|
|
|
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { useGuestsRoomsStore } from "@/stores/guests-rooms"
|
|
|
|
import { ErrorCircleIcon } from "@/components/Icons"
|
|
import Select from "@/components/TempDesignSystem/Select"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import styles from "./child-selector.module.css"
|
|
|
|
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, trigger } = useFormContext()
|
|
const { adults, childrenInAdultsBed } = useGuestsRoomsStore(
|
|
(state) => state.rooms[roomIndex]
|
|
)
|
|
const {
|
|
isValidated,
|
|
updateChildAge,
|
|
updateChildBed,
|
|
increaseChildInAdultsBed,
|
|
decreaseChildInAdultsBed,
|
|
} = useGuestsRoomsStore((state) => ({
|
|
isValidated: state.isValidated,
|
|
updateChildAge: state.updateChildAge,
|
|
updateChildBed: state.updateChildBed,
|
|
increaseChildInAdultsBed: state.increaseChildInAdultsBed,
|
|
decreaseChildInAdultsBed: state.decreaseChildInAdultsBed,
|
|
}))
|
|
|
|
const ageList = Array.from(Array(13).keys()).map((age) => ({
|
|
label: `${age}`,
|
|
value: age,
|
|
}))
|
|
|
|
function updateSelectedAge(age: number) {
|
|
updateChildAge(age, roomIndex, index)
|
|
setValue(`rooms.${roomIndex}.children.${index}.age`, age)
|
|
const availableBedTypes = getAvailableBeds(age)
|
|
updateSelectedBed(availableBedTypes[0].value)
|
|
trigger("rooms")
|
|
}
|
|
|
|
function updateSelectedBed(bed: number) {
|
|
if (bed == BedTypeEnum.IN_ADULTS_BED) {
|
|
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 key={index} className={styles.childInfoContainer}>
|
|
<div>
|
|
<Select
|
|
required={true}
|
|
items={ageList}
|
|
label={ageLabel}
|
|
aria-label={ageLabel}
|
|
value={child.age}
|
|
onSelect={(key) => {
|
|
updateSelectedAge(key as number)
|
|
}}
|
|
name={`rooms.${roomIndex}.children.${index}.age`}
|
|
placeholder={ageLabel}
|
|
/>
|
|
</div>
|
|
<div>
|
|
{child.age !== -1 ? (
|
|
<Select
|
|
items={getAvailableBeds(child.age)}
|
|
label={bedLabel}
|
|
aria-label={bedLabel}
|
|
value={child.bed}
|
|
onSelect={(key) => {
|
|
updateSelectedBed(key as number)
|
|
}}
|
|
name={`rooms.${roomIndex}.children.${index}.age`}
|
|
placeholder={bedLabel}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
{isValidated && child.age < 0 ? (
|
|
<Caption color="red" className={styles.error}>
|
|
<ErrorCircleIcon color="red" />
|
|
{ageReqdErrMsg}
|
|
</Caption>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|