Files
web/apps/scandic-web/components/HotelReservation/EnterDetails/Room/Multiroom.tsx
2025-05-22 09:37:52 +00:00

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/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 { getBedTypeInfoText } from "./utils"
import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import { StepEnum } from "@/types/enums/step"
export default function Multiroom() {
const intl = useIntl()
const { room, roomNr } = useRoomContext()
const breakfastPackages = useEnterDetailsStore(
(state) => state.breakfastPackages
)
const showBreakfastStep =
!room.breakfastIncluded && !!breakfastPackages.length
const hasChildWithExtraBed = room.childrenInRoom?.some(
(child) => Number(child.bed) === ChildBedMapEnum.IN_EXTRA_BED
)
const bedTypeInfoText = getBedTypeInfoText(
intl,
!!hasChildWithExtraBed,
room.bedTypes.length > 1
)
return (
<section id={`room-${roomNr}`}>
<Header>
<Title level="h2" as="h4">
{intl.formatMessage(
{
defaultMessage: "Room {roomIndex}",
},
{
roomIndex: roomNr,
}
)}
</Title>
</Header>
<SelectedRoom />
{room.bedTypes.length ? (
<Section
header={intl.formatMessage({ defaultMessage: "Bed preference" })}
label={intl.formatMessage({ defaultMessage: "Preferred bed type" })}
additionalInfo={bedTypeInfoText}
step={StepEnum.selectBed}
>
<BedType />
</Section>
) : null}
{showBreakfastStep ? (
<Section
header={intl.formatMessage({
defaultMessage: "Breakfast",
})}
label={intl.formatMessage({
defaultMessage: "Select breakfast options",
})}
step={StepEnum.breakfast}
>
<Breakfast />
</Section>
) : null}
<Section
header={intl.formatMessage({
defaultMessage: "Details",
})}
step={StepEnum.details}
label={intl.formatMessage({
defaultMessage: "Contact details",
})}
>
<Details />
</Section>
</section>
)
}