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

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/Section/index.tsx

@@ -0,0 +1,87 @@
+"use client"
+import { useEffect, useState } from "react"
+import { useIntl } from "react-intl"
+
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { useRoomContext } from "../../../contexts/EnterDetails/RoomContext"
+import { EnterDetailsStepEnum } from "../../../stores/enter-details/enterDetailsStep"
+
+import styles from "./section.module.css"
+
+export type SectionProps = {
+  header: string
+  label: string
+  additionalInfo?: string | null
+  step: EnterDetailsStepEnum
+  disabled?: boolean
+}
+
+export default function Section({
+  children,
+  header,
+  label,
+  additionalInfo,
+  step,
+  disabled,
+}: React.PropsWithChildren<SectionProps>) {
+  const intl = useIntl()
+
+  const {
+    room: { bedType, breakfast },
+  } = useRoomContext()
+
+  const [title, setTitle] = useState(label)
+
+  const noBreakfastTitle = intl.formatMessage({
+    defaultMessage: "No breakfast",
+  })
+  const breakfastTitle = intl.formatMessage({
+    defaultMessage: "Breakfast buffet",
+  })
+
+  useEffect(() => {
+    if (step === EnterDetailsStepEnum.selectBed && bedType) {
+      setTitle(bedType.description)
+    }
+    // If breakfast step, check if an option has been selected
+    if (step === EnterDetailsStepEnum.breakfast && breakfast !== undefined) {
+      if (breakfast === false) {
+        setTitle(noBreakfastTitle)
+      } else {
+        setTitle(breakfastTitle)
+      }
+    }
+  }, [bedType, breakfast, setTitle, step, breakfastTitle, noBreakfastTitle])
+
+  return (
+    <div
+      className={`${styles.section} ${disabled ? styles.disabled : ""}`}
+      data-step={step}
+    >
+      <header className={styles.header}>
+        <Typography variant="Title/Overline/sm">
+          <h2 data-at-id="details-section-heading" className={styles.heading}>
+            {header}
+          </h2>
+        </Typography>
+        <Typography variant="Title/Subtitle/md">
+          <p
+            data-at-id="details-section-subheading"
+            className={styles.subheading}
+          >
+            {title}
+          </p>
+        </Typography>
+        {additionalInfo ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p className={styles.additionalInfo}>{additionalInfo}</p>
+          </Typography>
+        ) : null}
+      </header>
+      <div className={styles.content}>
+        <div className={styles.contentWrapper}>{children}</div>
+      </div>
+    </div>
+  )
+}

packages/booking-flow/lib/components/EnterDetails/Section/section.module.css

@@ -0,0 +1,29 @@
+.section {
+  display: grid;
+  gap: var(--Space-x3);
+  width: 100%;
+  padding-top: var(--Space-x3);
+}
+
+.heading,
+.subheading {
+  color: var(--Text-Default);
+}
+
+.additionalInfo {
+  color: var(--Text-Secondary);
+  margin-top: var(--Space-x05);
+}
+
+.contentWrapper {
+  padding-bottom: var(--Spacing-x3);
+}
+
+.content {
+  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}