feat: add multiroom signup

apps/scandic-web/components/HotelReservation/EnterDetails/Room/Header/header.module.css

@@ -0,0 +1,3 @@
+.header {
+  padding-bottom: var(--Spacing-x3);
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Room/Header/index.tsx

@@ -0,0 +1,5 @@
+import styles from "./header.module.css"
+
+export default function Header({ children }: React.PropsWithChildren) {
+  return <header className={styles.header}>{children}</header>
+}

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>
+  )
+}

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

@@ -0,0 +1,72 @@
+"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 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"
+import type { SafeUser } from "@/types/user"
+
+export default function RoomOne({ user }: { user: SafeUser }) {
+  const intl = useIntl()
+  const { room } = useRoomContext()
+  const { breakfastPackages, rooms } = useEnterDetailsStore((state) => ({
+    breakfastPackages: state.breakfastPackages,
+    rooms: state.rooms,
+  }))
+
+  const isMultiroom = rooms.length > 1
+  const showBreakfastStep =
+    !room.breakfastIncluded && !!breakfastPackages?.length
+  return (
+    <section>
+      {isMultiroom ? (
+        <Header>
+          <Title level="h2" as="h4">
+            {`${intl.formatMessage({ id: "Room" })} 1`}
+          </Title>
+        </Header>
+      ) : null}
+
+      <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 user={user} />
+      </SectionAccordion>
+    </section>
+  )
+}