fix: toggle section accordion open

2024-10-03 17:00:04 +02:00
parent 1bb2d3f687
commit 668eedd837
12 changed files with 245 additions and 289 deletions
--- a/components/HotelReservation/SelectRate/SectionAccordion/index.tsx
+++ b/components/HotelReservation/SelectRate/SectionAccordion/index.tsx
@@ -1,57 +1,91 @@
-import { getHotelDataSchema } from "@/server/routers/hotels/output"
-import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
+"use client"
+import { useEffect, useRef } from "react"
+import { useIntl } from "react-intl"

-import { CheckCircleIcon, ChevronDownIcon } from "@/components/Icons"
-import Button from "@/components/TempDesignSystem/Button"
+import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
 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 HotelSelectionHeader from "../../HotelSelectionHeader"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

 import styles from "./sectionAccordion.module.css"

 import { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"

-export default async function SectionAccordion({
+export default function SectionAccordion({
  header,
-  selection,
+  isOpen,
+  isCompleted,
+  label,
  path,
  children,
 }: React.PropsWithChildren<SectionAccordionProps>) {
-  const hotel = getHotelDataSchema.parse(tempHotelData)
+  const intl = useIntl()

-  const intl = await getIntl()
+  const contentRef = useRef<HTMLDivElement>(null)
+  const circleRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const content = contentRef.current
+    const circle = circleRef.current
+    if (content) {
+      if (isOpen) {
+        content.style.maxHeight = `${content.scrollHeight}px`
+      } else {
+        content.style.maxHeight = "0"
+      }
+    }
+
+    if (circle) {
+      if (isOpen) {
+        circle.style.backgroundColor = `var(--UI-Text-Placeholder);`
+      } else {
+        circle.style.backgroundColor = `var(--Base-Surface-Subtle-Hover);`
+      }
+    }
+  }, [isOpen])

  return (
-    <div className={styles.wrapper}>
-      <HotelSelectionHeader hotel={hotel.data.attributes} />
-
-      <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 />
+    <section className={styles.wrapper} data-open={isOpen}>
+      <div className={styles.iconWrapper}>
+        <div
+          className={styles.circle}
+          data-checked={isCompleted}
+          ref={circleRef}
+        >
+          {isCompleted ? (
+            <CheckIcon color="white" height="16" width="16" />
+          ) : null}
        </div>
      </div>
-      {children}
-    </div>
+      <main className={styles.main}>
+        <header className={styles.headerContainer}>
+          <div>
+            <Footnote
+              asChild
+              textTransform="uppercase"
+              color="uiTextPlaceholder"
+            >
+              <h2>{header}</h2>
+            </Footnote>
+            <Subtitle
+              type="two"
+              className={styles.selection}
+              color="highContrast"
+            >
+              {label}
+            </Subtitle>
+          </div>
+          {isCompleted && !isOpen && (
+            <Link href={path} color="burgundy" variant="icon">
+              {intl.formatMessage({ id: "Modify" })}{" "}
+              <ChevronDownIcon color="burgundy" />
+            </Link>
+          )}
+        </header>
+        <div className={styles.content} ref={contentRef}>
+          {children}
+        </div>
+      </main>
+    </section>
  )
 }