fix: toggle section accordion open

app/[lang]/(live)/(public)/hotelreservation/[step]/page.module.css

@@ -16,10 +16,15 @@
   gap: var(--Spacing-x7);
 }
 
-.main {
+.section {
   flex-grow: 1;
 }
 
 .summary {
   max-width: 340px;
 }
+
+.form {
+  display: grid;
+  gap: var(--Spacing-x2);
+}

app/[lang]/(live)/(public)/hotelreservation/[step]/page.tsx

@@ -1,58 +1,18 @@
 "use client"
 
-import { notFound } from "next/navigation"
+import { useState } from "react"
 import { useIntl } from "react-intl"
 
+import { notFound } from "@/server/errors/next"
+
+import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
 import Summary from "@/components/HotelReservation/SelectRate/Summary"
+import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./page.module.css"
 
 import { LangParams, PageArgs } from "@/types/params"
 
-// const bedAlternatives = [
-//   {
-//     value: "queen",
-//     name: "Queen bed",
-//     payment: "160 cm",
-//     pricePerNight: 0,
-//     membersPricePerNight: 0,
-//     currency: "SEK",
-//   },
-//   {
-//     value: "king",
-//     name: "King bed",
-//     payment: "160 cm",
-//     pricePerNight: 0,
-//     membersPricePerNight: 0,
-//     currency: "SEK",
-//   },
-//   {
-//     value: "twin",
-//     name: "Twin bed",
-//     payment: "90 cm + 90 cm",
-//     pricePerNight: 82,
-//     membersPricePerNight: 67,
-//     currency: "SEK",
-//   },
-// ]
-
-// const breakfastAlternatives = [
-//   {
-//     value: "no",
-//     name: "No breakfast",
-//     payment: "Always cheeper to get it online",
-//     pricePerNight: 0,
-//     currency: "SEK",
-//   },
-//   {
-//     value: "buffe",
-//     name: "Breakfast buffé",
-//     payment: "Always cheeper to get it online",
-//     pricePerNight: 150,
-//     currency: "SEK",
-//   },
-// ]
-
 enum StepEnum {
   "select-bed" = "select-bed",
   breakfast = "breakfast",
@@ -68,22 +28,100 @@ function isValidStep(step: string): step is Step {
 
 export default function StepPage({
   params,
-}: PageArgs<LangParams & { step: string }>) {
-  const { step } = params
+}: PageArgs<LangParams & { step: Step }>) {
+  const [activeStep, setActiveStep] = useState<Step>(params.step)
   const intl = useIntl()
 
-  if (isValidStep(step)) {
+  if (!isValidStep(activeStep)) {
     return notFound()
   }
 
-  switch (step) {
+  switch (activeStep) {
     case StepEnum.breakfast:
-      return <div>Select BREAKFAST</div>
+    //return <div>Select BREAKFAST</div>
     case StepEnum.details:
-      return <div>Select DETAILS</div>
+    //return <div>Select DETAILS</div>
     case StepEnum.payment:
-      return <div>Select PAYMENT</div>
+    //return <div>Select PAYMENT</div>
     case StepEnum["select-bed"]:
-      return <div>Select BED</div>
+    // return <div>Select BED</div>
   }
+
+  function onNav(step: Step) {
+    setActiveStep(step)
+    if (typeof window !== "undefined") {
+      window.history.pushState({}, "", step)
+    }
+  }
+
+  return (
+    <main className={styles.page}>
+      <div className={styles.content}>
+        <section className={styles.section}>
+          <SectionAccordion
+            header="Select bed"
+            isCompleted={true}
+            isOpen={activeStep === StepEnum["select-bed"]}
+            label={intl.formatMessage({ id: "Request bedtype" })}
+            path="/select-bed"
+          >
+            <div className={styles.form}>
+              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
+              cskdfaen
+              <Button onClick={() => onNav("breakfast")}>
+                Go to breakfast!
+              </Button>
+            </div>
+          </SectionAccordion>
+          <SectionAccordion
+            header="Food options"
+            isCompleted={true}
+            isOpen={activeStep === StepEnum.breakfast}
+            label={intl.formatMessage({ id: "Select breakfast options" })}
+            path="/breakfast"
+          >
+            <div className={styles.form}>
+              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
+              cskdfaen
+              <Button onClick={() => onNav("details")}>Go to details!</Button>
+            </div>
+          </SectionAccordion>
+          <SectionAccordion
+            header="Details"
+            isCompleted={false}
+            isOpen={activeStep === StepEnum.details}
+            label={intl.formatMessage({ id: "Enter your details" })}
+            path="/details"
+          >
+            <div className={styles.form}>
+              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
+              cskdfaen
+              <Button onClick={() => onNav("payment")}>Go to payment!</Button>
+            </div>
+          </SectionAccordion>
+          <SectionAccordion
+            header="Payment"
+            isCompleted={false}
+            isOpen={activeStep === StepEnum.payment}
+            label={intl.formatMessage({ id: "Select payment method" })}
+            path="/hotelreservation/select-bed"
+          >
+            <div className={styles.form}>
+              Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw aoiwube
+              cskdfaen Hejhej lorem ipsim heheheheh andi fpok veoi cdfionaw
+              aoiwube cskdfaen Hejhej lorem ipsim heheheheh andi fpok veoi
+              cdfionaw aoiwube cskdfaen Hejhej lorem ipsim heheheheh andi fpok
+              veoi cdfionaw aoiwube cskdfaen v Hejhej lorem ipsim heheheheh andi
+              fpok veoi cdfionaw aoiwube cskdfaen Hejhej lorem ipsim heheheheh
+              andi fpok veoi cdfionaw aoiwube cskdfaen
+              <Button onClick={() => onNav("select-bed")}>Go to beds!</Button>
+            </div>
+          </SectionAccordion>
+        </section>
+        <aside className={styles.summary}>
+          <Summary />
+        </aside>
+      </div>
+    </main>
+  )
 }