Merged in feat/SW-1889 (pull request #1670)

Feat/SW-1889

* fix: remove download invoice from confirmation page

* feat: remove EnterDetails Accordions


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/EnterDetails/Section/index.tsx

@@ -0,0 +1,69 @@
+"use client"
+import { useEffect, useState } from "react"
+import { useIntl } from "react-intl"
+
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { useRoomContext } from "@/contexts/Details/Room"
+
+import styles from "./section.module.css"
+
+import type { SectionProps } from "@/types/components/hotelReservation/enterDetails/section"
+import { StepEnum } from "@/types/enums/step"
+
+export default function Section({
+  children,
+  header,
+  label,
+  step,
+  disabled,
+}: React.PropsWithChildren<SectionProps>) {
+  const intl = useIntl()
+
+  const {
+    room: { bedType, breakfast },
+  } = useRoomContext()
+
+  const [title, setTitle] = useState(label)
+
+  const noBreakfastTitle = intl.formatMessage({ id: "No breakfast" })
+  const breakfastTitle = intl.formatMessage({ id: "Breakfast buffet" })
+
+  useEffect(() => {
+    if (step === StepEnum.selectBed && bedType) {
+      setTitle(bedType.description)
+    }
+    // If breakfast step, check if an option has been selected
+    if (step === StepEnum.breakfast && breakfast !== undefined) {
+      if (breakfast === false) {
+        setTitle(noBreakfastTitle)
+      } else {
+        setTitle(breakfastTitle)
+      }
+    }
+  }, [bedType, breakfast, setTitle, step, breakfastTitle, noBreakfastTitle])
+
+  return (
+    <div
+      className={`${styles.accordion} ${disabled ? styles.disabled : ""}`}
+      data-step={step}
+    >
+      <header className={styles.header}>
+        <Footnote
+          className={styles.title}
+          asChild
+          textTransform="uppercase"
+          type="label"
+        >
+          <h2>{header}</h2>
+        </Footnote>
+        <Subtitle className={styles.selection} type="two">
+          {title}
+        </Subtitle>
+      </header>
+      <div className={styles.content}>
+        <div className={styles.contentWrapper}>{children}</div>
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Section/section.module.css

@@ -0,0 +1,45 @@
+.accordion {
+  --header-height: 2.4em;
+  --circle-height: 24px;
+  gap: var(--Spacing-x3);
+  width: 100%;
+  padding-top: var(--Spacing-x3);
+  display: grid;
+  grid-template-areas: "header" "content";
+  grid-template-rows: var(--header-height) 1fr;
+  column-gap: var(--Spacing-x-one-and-half);
+}
+
+.header {
+  grid-area: header;
+}
+
+.title {
+  grid-area: title;
+  text-align: start;
+}
+
+.selection {
+  grid-area: selection;
+}
+
+.contentWrapper {
+  padding-bottom: var(--Spacing-x3);
+}
+
+.content {
+  grid-area: content;
+  border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+}
+
+.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+@media screen and (min-width: 768px) {
+  .accordion {
+    column-gap: var(--Spacing-x3);
+    grid-template-areas: "header" "content";
+  }
+}