122 lines
3.3 KiB
TypeScript
122 lines
3.3 KiB
TypeScript
"use client"
|
|
|
|
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
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 { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
|
|
import {
|
|
ChildBed,
|
|
ChildInfoSelectorProps,
|
|
} from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function ChildInfoSelector({
|
|
child = { age: -1, bed: -1 },
|
|
childrenInAdultsBed,
|
|
adults,
|
|
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, formState } = useFormContext()
|
|
|
|
const ageList = Array.from(Array(13).keys()).map((age) => ({
|
|
label: `${age}`,
|
|
value: age,
|
|
}))
|
|
|
|
function updateSelectedAge(age: number) {
|
|
setValue(`rooms.${roomIndex}.child.${index}.age`, age, {
|
|
shouldValidate: true,
|
|
})
|
|
const availableBedTypes = getAvailableBeds(age)
|
|
updateSelectedBed(availableBedTypes[0].value)
|
|
}
|
|
|
|
function updateSelectedBed(bed: number) {
|
|
setValue(`rooms.${roomIndex}.child.${index}.bed`, bed)
|
|
}
|
|
|
|
const allBedTypes: ChildBed[] = [
|
|
{
|
|
label: intl.formatMessage({ id: "In adults bed" }),
|
|
value: ChildBedMapEnum.IN_ADULTS_BED,
|
|
},
|
|
{
|
|
label: intl.formatMessage({ id: "In crib" }),
|
|
value: ChildBedMapEnum.IN_CRIB,
|
|
},
|
|
{
|
|
label: intl.formatMessage({ id: "In extra bed" }),
|
|
value: ChildBedMapEnum.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
|
|
}
|
|
|
|
console.log("ALL TJHE ERORRORS", formState.errors)
|
|
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}.child.${index}.age`}
|
|
placeholder={ageLabel}
|
|
maxHeight={150}
|
|
/>
|
|
</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}.child.${index}.age`}
|
|
placeholder={bedLabel}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{/* {isValidated && child.age < 0 ? (
|
|
<Caption color="red" className={styles.error}>
|
|
<ErrorCircleIcon color="red" />
|
|
{ageReqdErrMsg}
|
|
</Caption>
|
|
) : null} */}
|
|
</>
|
|
)
|
|
}
|