Merged in feature/select-room-ux-one-page (pull request #523)

This updates the select room page according to the new UX. It has different sections on the same page, but with specific URLs per section. Since neither UX, UI nor API is completely done both design and data structures are a bit temporary. Approved-by: Simon.Emanuelsson
2024-08-29 13:38:14 +00:00
parent 00fc2af3dd
commit f178f7fde0
35 changed files with 794 additions and 372 deletions
--- a/components/HotelReservation/SelectRate/SectionAccordion/index.tsx
+++ b/components/HotelReservation/SelectRate/SectionAccordion/index.tsx
@@ -0,0 +1,48 @@
+import { CheckCircleIcon, ChevronDownIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Link from "@/components/TempDesignSystem/Link"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { getIntl } from "@/i18n"
+
+import styles from "./sectionAccordion.module.css"
+
+import { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
+
+export default async function SectionAccordion({
+  header,
+  selection,
+  path,
+  children,
+}: React.PropsWithChildren<SectionAccordionProps>) {
+  const intl = await getIntl()
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.top}>
+        <div>
+          <CheckCircleIcon color={selection ? "green" : "pale"} />
+        </div>
+        <div className={styles.header}>
+          <Caption color={"burgundy"} asChild>
+            <h2>{header}</h2>
+          </Caption>
+          {(Array.isArray(selection) ? selection : [selection]).map((s) => (
+            <Body key={s} className={styles.selection} color={"burgundy"}>
+              {s}
+            </Body>
+          ))}
+        </div>
+        {selection && (
+          <Button intent="secondary" size="small" asChild>
+            <Link href={path}>{intl.formatMessage({ id: "Modify" })}</Link>
+          </Button>
+        )}
+        <div>
+          <ChevronDownIcon />
+        </div>
+      </div>
+      {children}
+    </div>
+  )
+}