106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { useEnterDetailsStore } from "@/stores/enter-details"
|
|
|
|
import BedType from "@/components/HotelReservation/EnterDetails/BedType"
|
|
import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
|
|
import Details from "@/components/HotelReservation/EnterDetails/Details/Multiroom"
|
|
import Header from "@/components/HotelReservation/EnterDetails/Room/Header"
|
|
import Section from "@/components/HotelReservation/EnterDetails/Section"
|
|
import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { useRoomContext } from "@/contexts/Details/Room"
|
|
|
|
import { StepEnum } from "@/types/enums/step"
|
|
|
|
export default function Multiroom() {
|
|
const intl = useIntl()
|
|
const { idx, room, roomNr, steps } = useRoomContext()
|
|
const { breakfastPackages, rooms } = useEnterDetailsStore((state) => ({
|
|
breakfastPackages: state.breakfastPackages,
|
|
rooms: state.rooms,
|
|
}))
|
|
|
|
const showBreakfastStep =
|
|
!room.breakfastIncluded && !!breakfastPackages?.length
|
|
|
|
const arePreviousRoomsValid = rooms.slice(0, idx).every((r) => r.isComplete)
|
|
|
|
const isBreakfastStepValid = showBreakfastStep
|
|
? steps[StepEnum.breakfast]?.isValid
|
|
: true
|
|
|
|
const isBreakfastDisabled = !(
|
|
arePreviousRoomsValid && steps[StepEnum.selectBed].isValid
|
|
)
|
|
|
|
const isDetailsDisabled = !(
|
|
arePreviousRoomsValid &&
|
|
steps[StepEnum.selectBed].isValid &&
|
|
isBreakfastStepValid
|
|
)
|
|
|
|
return (
|
|
<section>
|
|
<Header>
|
|
<Title level="h2" as="h4">
|
|
{intl.formatMessage(
|
|
{
|
|
defaultMessage: "Room {roomIndex}",
|
|
},
|
|
{
|
|
roomIndex: roomNr,
|
|
}
|
|
)}
|
|
</Title>
|
|
</Header>
|
|
|
|
<SelectedRoom />
|
|
|
|
{room.bedTypes ? (
|
|
<Section
|
|
header={intl.formatMessage({
|
|
defaultMessage: "Select bed",
|
|
})}
|
|
label={intl.formatMessage({
|
|
defaultMessage: "Request bedtype",
|
|
})}
|
|
step={StepEnum.selectBed}
|
|
disabled={!arePreviousRoomsValid}
|
|
>
|
|
<BedType />
|
|
</Section>
|
|
) : null}
|
|
|
|
{showBreakfastStep ? (
|
|
<Section
|
|
header={intl.formatMessage({
|
|
defaultMessage: "Food options",
|
|
})}
|
|
label={intl.formatMessage({
|
|
defaultMessage: "Select breakfast options",
|
|
})}
|
|
step={StepEnum.breakfast}
|
|
disabled={isBreakfastDisabled}
|
|
>
|
|
<Breakfast />
|
|
</Section>
|
|
) : null}
|
|
|
|
<Section
|
|
header={intl.formatMessage({
|
|
defaultMessage: "Details",
|
|
})}
|
|
step={StepEnum.details}
|
|
label={intl.formatMessage({
|
|
defaultMessage: "Enter your details",
|
|
})}
|
|
disabled={isDetailsDisabled}
|
|
>
|
|
<Details />
|
|
</Section>
|
|
</section>
|
|
)
|
|
}
|