Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/Room/Header/header.module.css

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

packages/booking-flow/lib/components/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>
+}

packages/booking-flow/lib/components/EnterDetails/Room/Multiroom.tsx

@@ -0,0 +1,93 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import Title from "@scandic-hotels/design-system/Title"
+import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
+
+import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
+import { useEnterDetailsStore } from "../../../stores/enter-details"
+import { EnterDetailsStepEnum } from "../../../stores/enter-details/enterDetailsStep"
+import BedType from "../BedType"
+import Breakfast from "../Breakfast"
+import Details from "../Details/Multiroom"
+import Header from "../Room/Header"
+import Section from "../Section"
+import SelectedRoom from "../SelectedRoom"
+import { getBedTypeInfoText } from "./utils"
+
+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={EnterDetailsStepEnum.selectBed}
+        >
+          <BedType />
+        </Section>
+      ) : null}
+
+      {showBreakfastStep ? (
+        <Section
+          header={intl.formatMessage({
+            defaultMessage: "Breakfast",
+          })}
+          label={intl.formatMessage({
+            defaultMessage: "Select breakfast options",
+          })}
+          step={EnterDetailsStepEnum.breakfast}
+        >
+          <Breakfast />
+        </Section>
+      ) : null}
+
+      <Section
+        header={intl.formatMessage({
+          defaultMessage: "Details",
+        })}
+        step={EnterDetailsStepEnum.details}
+        label={intl.formatMessage({
+          defaultMessage: "Contact details",
+        })}
+      >
+        <Details />
+      </Section>
+    </section>
+  )
+}

packages/booking-flow/lib/components/EnterDetails/Room/One.tsx

@@ -0,0 +1,98 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import Title from "@scandic-hotels/design-system/Title"
+import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
+
+import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
+import { useEnterDetailsStore } from "../../../stores/enter-details"
+import { EnterDetailsStepEnum } from "../../../stores/enter-details/enterDetailsStep"
+import BedType from "../BedType"
+import Breakfast from "../Breakfast"
+import Details from "../Details/RoomOne"
+import Header from "../Room/Header"
+import Section from "../Section"
+import SelectedRoom from "../SelectedRoom"
+import { getBedTypeInfoText } from "./utils"
+
+import type { User } from "@scandic-hotels/trpc/types/user"
+
+export default function RoomOne({ user }: { user: User | null }) {
+  const intl = useIntl()
+  const { room } = useRoomContext()
+  const { breakfastPackages, isMultiroom } = useEnterDetailsStore((state) => ({
+    breakfastPackages: state.breakfastPackages,
+    isMultiroom: state.rooms.length > 1,
+  }))
+
+  const hasChildWithExtraBed = room.childrenInRoom?.some(
+    (child) => Number(child.bed) === ChildBedMapEnum.IN_EXTRA_BED
+  )
+
+  const bedTypeInfoText = getBedTypeInfoText(
+    intl,
+    !!hasChildWithExtraBed,
+    room.bedTypes.length > 1
+  )
+
+  const showBreakfastStep =
+    !room.breakfastIncluded && !!breakfastPackages.length
+
+  return (
+    <section id="room-1">
+      {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: "Bed preference" })}
+          label={intl.formatMessage({ defaultMessage: "Preferred bed type" })}
+          additionalInfo={bedTypeInfoText}
+          step={EnterDetailsStepEnum.selectBed}
+        >
+          <BedType />
+        </Section>
+      ) : null}
+
+      {showBreakfastStep ? (
+        <Section
+          header={intl.formatMessage({
+            defaultMessage: "Breakfast",
+          })}
+          label={intl.formatMessage({
+            defaultMessage: "Select breakfast options",
+          })}
+          step={EnterDetailsStepEnum.breakfast}
+        >
+          <Breakfast />
+        </Section>
+      ) : null}
+
+      <Section
+        header={intl.formatMessage({
+          defaultMessage: "Details",
+        })}
+        step={EnterDetailsStepEnum.details}
+        label={intl.formatMessage({
+          defaultMessage: "Contact details",
+        })}
+      >
+        <Details user={user} />
+      </Section>
+    </section>
+  )
+}

packages/booking-flow/lib/components/EnterDetails/Room/utils.ts

@@ -0,0 +1,25 @@
+import type { IntlShape } from "react-intl"
+
+export function getBedTypeInfoText(
+  intl: IntlShape,
+  hasChildWithExtraBed: boolean,
+  hasMultipleBedTypes: boolean
+) {
+  const availabilityText = intl.formatMessage({
+    defaultMessage: "Subject to availability",
+  })
+
+  const extraBedText = intl.formatMessage({
+    defaultMessage: "Extra bed will be provided additionally",
+  })
+
+  if (hasMultipleBedTypes && hasChildWithExtraBed) {
+    return `${availabilityText}. ${extraBedText}`
+  } else if (hasMultipleBedTypes) {
+    return availabilityText
+  } else if (hasChildWithExtraBed) {
+    return extraBedText
+  }
+
+  return null
+}