Files
web/apps/scandic-web/components/HotelReservation/EnterDetails/Room/One.tsx

96 lines
2.7 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/RoomOne"
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"
import type { SafeUser } from "@/types/user"
export default function RoomOne({ user }: { user: SafeUser }) {
const intl = useIntl()
const { room, steps } = useRoomContext()
const { breakfastPackages, isMultiroom } = useEnterDetailsStore((state) => ({
breakfastPackages: state.breakfastPackages,
isMultiroom: state.rooms.length > 1,
}))
const showBreakfastStep =
!room.breakfastIncluded && !!breakfastPackages?.length
return (
<section>
{isMultiroom ? (
<Header>
<Title level="h2" as="h4">
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{
roomIndex: 1,
}
)}
</Title>
</Header>
) : null}
<SelectedRoom />
{room.bedTypes ? (
<Section
header={intl.formatMessage({
defaultMessage: "Select bed",
})}
label={intl.formatMessage({
defaultMessage: "Request bedtype",
})}
step={StepEnum.selectBed}
>
<BedType />
</Section>
) : null}
{showBreakfastStep ? (
<Section
header={intl.formatMessage({
defaultMessage: "Food options",
})}
label={intl.formatMessage({
defaultMessage: "Select breakfast options",
})}
step={StepEnum.breakfast}
disabled={!steps[StepEnum.selectBed].isValid}
>
<Breakfast />
</Section>
) : null}
<Section
header={intl.formatMessage({
defaultMessage: "Details",
})}
step={StepEnum.details}
label={intl.formatMessage({
defaultMessage: "Enter your details",
})}
disabled={
!(
steps[StepEnum.selectBed].isValid &&
steps[StepEnum.breakfast]?.isValid !== false
)
}
>
<Details user={user} />
</Section>
</section>
)
}