94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
"use client"
|
|
|
|
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { guestsRoomsStore } from "@/stores/guests-rooms"
|
|
|
|
import { MinusIcon, PlusIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import styles from "./adult-selector.module.css"
|
|
|
|
import { BedTypeEnum } from "@/types/components/bookingWidget/enums"
|
|
import { AdultSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function AdultSelector({ roomIndex = 0 }: AdultSelectorProps) {
|
|
const intl = useIntl()
|
|
const adultsLabel = intl.formatMessage({ id: "Adults" })
|
|
const { setValue } = useFormContext()
|
|
const { adults, children } = guestsRoomsStore().rooms[roomIndex]
|
|
const { increaseAdults, decreaseAdults } = guestsRoomsStore()
|
|
|
|
function increaseAdultsCount(roomIndex: number) {
|
|
if (adults < 6) {
|
|
increaseAdults(roomIndex)
|
|
setValue(`rooms.${roomIndex}.adults`, adults + 1)
|
|
}
|
|
}
|
|
|
|
function decreaseAdultsCount(roomIndex: number) {
|
|
if (adults > 1) {
|
|
decreaseAdults(roomIndex)
|
|
setValue(`rooms.${roomIndex}.adults`, adults - 1)
|
|
let inAdultsBed = 0
|
|
let toUpdateIndex = -1
|
|
children.forEach((child, index) => {
|
|
if (child.bed == BedTypeEnum["In adults bed"]) {
|
|
inAdultsBed = inAdultsBed + 1
|
|
if (inAdultsBed > adults - 1) toUpdateIndex = index
|
|
}
|
|
})
|
|
if (toUpdateIndex != -1) {
|
|
setValue(
|
|
`rooms.${roomIndex}.children.${toUpdateIndex}.bed`,
|
|
children[toUpdateIndex].age < 3 ? 1 : 2
|
|
)
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className={styles.container}>
|
|
<Caption color="uiTextHighContrast" textTransform="bold">
|
|
{adultsLabel}
|
|
</Caption>
|
|
<div className={styles.counterContainer}>
|
|
<Button
|
|
className={styles.counterBtn}
|
|
intent="elevated"
|
|
onClick={() => {
|
|
decreaseAdultsCount(roomIndex)
|
|
}}
|
|
size="small"
|
|
theme="base"
|
|
variant="icon"
|
|
wrapping={true}
|
|
disabled={adults == 1}
|
|
>
|
|
<MinusIcon color="burgundy" />
|
|
</Button>
|
|
<Body color="textHighContrast" textAlign="center">
|
|
{adults}
|
|
</Body>
|
|
<Button
|
|
className={styles.counterBtn}
|
|
onClick={() => {
|
|
increaseAdultsCount(roomIndex)
|
|
}}
|
|
intent="elevated"
|
|
variant="icon"
|
|
theme="base"
|
|
wrapping={true}
|
|
size="small"
|
|
disabled={adults == 6}
|
|
>
|
|
<PlusIcon color="burgundy" />
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|