fix: add forms in accordions

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

@@ -1,41 +1,61 @@
 "use client"
 
+import { notFound } from "next/navigation"
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { notFound } from "@/server/errors/next"
+import { trpc } from "@/lib/trpc/client"
 
+import BedType from "@/components/HotelReservation/EnterDetails/BedType"
+import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
+import Details from "@/components/HotelReservation/EnterDetails/Details"
+import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
+import Payment from "@/components/HotelReservation/SelectRate/Payment"
 import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
 import Summary from "@/components/HotelReservation/SelectRate/Summary"
-import Button from "@/components/TempDesignSystem/Button"
+import LoadingSpinner from "@/components/LoadingSpinner"
 
 import styles from "./page.module.css"
 
 import { LangParams, PageArgs } from "@/types/params"
 
 enum StepEnum {
-  "select-bed" = "select-bed",
+  selectBed = "select-bed",
   breakfast = "breakfast",
   details = "details",
   payment = "payment",
 }
 
-type Step = keyof typeof StepEnum
-
-function isValidStep(step: string): step is Step {
-  return Object.keys(StepEnum).includes(step)
+function isValidStep(step: string): step is StepEnum {
+  return Object.values(StepEnum).includes(step as StepEnum)
 }
 
 export default function StepPage({
   params,
-}: PageArgs<LangParams & { step: Step }>) {
-  const [activeStep, setActiveStep] = useState<Step>(params.step)
+}: PageArgs<LangParams & { step: StepEnum }>) {
+  const { step } = params
+  const [activeStep, setActiveStep] = useState<StepEnum>(step)
   const intl = useIntl()
 
   if (!isValidStep(activeStep)) {
     return notFound()
   }
 
+  const { data: hotel, isLoading: loadingHotel } =
+    trpc.hotel.hotelData.get.useQuery({
+      hotelId: "811",
+      language: params.lang,
+    })
+
+  if (loadingHotel) {
+    return <LoadingSpinner />
+  }
+
+  if (!hotel) {
+    // TODO: handle case with hotel missing
+    return notFound()
+  }
+
   switch (activeStep) {
     case StepEnum.breakfast:
     //return <div>Select BREAKFAST</div>
@@ -43,11 +63,11 @@ export default function StepPage({
     //return <div>Select DETAILS</div>
     case StepEnum.payment:
     //return <div>Select PAYMENT</div>
-    case StepEnum["select-bed"]:
+    case StepEnum.selectBed:
     // return <div>Select BED</div>
   }
 
-  function onNav(step: Step) {
+  function onNav(step: StepEnum) {
     setActiveStep(step)
     if (typeof window !== "undefined") {
       window.history.pushState({}, "", step)
@@ -56,22 +76,17 @@ export default function StepPage({
 
   return (
     <main className={styles.page}>
+      <HotelSelectionHeader hotel={hotel.data.attributes} />
       <div className={styles.content}>
         <section className={styles.section}>
           <SectionAccordion
             header="Select bed"
             isCompleted={true}
-            isOpen={activeStep === StepEnum["select-bed"]}
+            isOpen={activeStep === StepEnum.selectBed}
             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>
+            <BedType />
           </SectionAccordion>
           <SectionAccordion
             header="Food options"
@@ -80,11 +95,7 @@ export default function StepPage({
             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>
+            <Breakfast />
           </SectionAccordion>
           <SectionAccordion
             header="Details"
@@ -93,11 +104,7 @@ export default function StepPage({
             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>
+            <Details user={null} />
           </SectionAccordion>
           <SectionAccordion
             header="Payment"
@@ -106,16 +113,7 @@ export default function StepPage({
             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>
+            <Payment hotel={hotel.data.attributes} />
           </SectionAccordion>
         </section>
         <aside className={styles.summary}>