feat: add multiroom signup

apps/scandic-web/components/HotelReservation/EnterDetails/Room/Multiroom.tsx

@@ -0,0 +1,66 @@
+"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 SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
+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 { room, roomNr } = useRoomContext()
+  const breakfastPackages = useEnterDetailsStore(
+    (state) => state.breakfastPackages
+  )
+  const showBreakfastStep =
+    !room.breakfastIncluded && !!breakfastPackages?.length
+  return (
+    <section>
+      <Header>
+        <Title level="h2" as="h4">
+          {`${intl.formatMessage({ id: "Room" })} ${roomNr}`}
+        </Title>
+      </Header>
+
+      <SelectedRoom />
+
+      {room.bedTypes ? (
+        <SectionAccordion
+          header={intl.formatMessage({ id: "Select bed" })}
+          label={intl.formatMessage({ id: "Request bedtype" })}
+          step={StepEnum.selectBed}
+        >
+          <BedType />
+        </SectionAccordion>
+      ) : null}
+
+      {showBreakfastStep ? (
+        <SectionAccordion
+          header={intl.formatMessage({ id: "Food options" })}
+          label={intl.formatMessage({
+            id: "Select breakfast options",
+          })}
+          step={StepEnum.breakfast}
+        >
+          <Breakfast />
+        </SectionAccordion>
+      ) : null}
+
+      <SectionAccordion
+        header={intl.formatMessage({ id: "Details" })}
+        step={StepEnum.details}
+        label={intl.formatMessage({ id: "Enter your details" })}
+      >
+        <Details />
+      </SectionAccordion>
+    </section>
+  )
+}