feat: add validation to enter details flow

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

@@ -2,6 +2,7 @@ import { redirect } from "next/navigation"
 
 import { serverClient } from "@/lib/trpc/server"
 
+import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
 import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
 import Summary from "@/components/HotelReservation/EnterDetails/Summary"
 import HotelSelectionHeader from "@/components/HotelReservation/HotelSelectionHeader"
@@ -9,12 +10,13 @@ import { setLang } from "@/i18n/serverContext"
 
 import styles from "./layout.module.css"
 
+import { StepEnum } from "@/types/components/enterDetails/step"
 import type { LangParams, LayoutArgs } from "@/types/params"
 
 export default async function StepLayout({
   children,
   params,
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+}: React.PropsWithChildren<LayoutArgs<LangParams & { step: StepEnum }>>) {
   setLang(params.lang)
   const hotel = await serverClient().hotel.hotelData.get({
     hotelId: "811",
@@ -26,15 +28,17 @@ export default async function StepLayout({
   }
 
   return (
-    <main className={styles.layout}>
-      <HotelSelectionHeader hotel={hotel.data.attributes} />
-      <div className={styles.content}>
-        <SelectedRoom />
-        {children}
-        <aside className={styles.summary}>
-          <Summary />
-        </aside>
-      </div>
-    </main>
+    <EnterDetailsProvider step={params.step}>
+      <main className={styles.layout}>
+        <HotelSelectionHeader hotel={hotel.data.attributes} />
+        <div className={styles.content}>
+          <SelectedRoom />
+          {children}
+          <aside className={styles.summary}>
+            <Summary />
+          </aside>
+        </div>
+      </main>
+    </EnterDetailsProvider>
   )
 }

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

@@ -1,117 +1,67 @@
-"use client"
-
 import { notFound } from "next/navigation"
-import { useState } from "react"
-import { useIntl } from "react-intl"
 
-import { trpc } from "@/lib/trpc/client"
+import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
+import { serverClient } from "@/lib/trpc/server"
 
 import BedType from "@/components/HotelReservation/EnterDetails/BedType"
 import Breakfast from "@/components/HotelReservation/EnterDetails/Breakfast"
 import Details from "@/components/HotelReservation/EnterDetails/Details"
+import SectionAccordion from "@/components/HotelReservation/EnterDetails/SectionAccordion"
 import Payment from "@/components/HotelReservation/SelectRate/Payment"
-import SectionAccordion from "@/components/HotelReservation/SelectRate/SectionAccordion"
-import LoadingSpinner from "@/components/LoadingSpinner"
+import { getIntl } from "@/i18n"
 
+import { StepEnum } from "@/types/components/enterDetails/step"
 import type { LangParams, PageArgs } from "@/types/params"
 
-enum StepEnum {
-  selectBed = "select-bed",
-  breakfast = "breakfast",
-  details = "details",
-  payment = "payment",
-}
-
 function isValidStep(step: string): step is StepEnum {
   return Object.values(StepEnum).includes(step as StepEnum)
 }
 
-export default function StepPage({
+export default async function StepPage({
   params,
 }: PageArgs<LangParams & { step: StepEnum }>) {
-  const { step } = params
-  const [activeStep, setActiveStep] = useState<StepEnum>(step)
-  const intl = useIntl()
+  const { step, lang } = params
 
-  if (!isValidStep(activeStep)) {
+  const intl = await getIntl()
+
+  const hotel = await serverClient().hotel.hotelData.get({
+    hotelId: "811",
+    language: lang,
+  })
+
+  const user = await getProfileSafely()
+
+  if (!isValidStep(step) || !hotel) {
     return notFound()
   }
 
-  const { data: hotel, isLoading: loadingHotel } =
-    trpc.hotel.hotelData.get.useQuery({
-      hotelId: "811",
-      language: params.lang,
-    })
-
-  const { data: userData } = trpc.user.getSafely.useQuery()
-
-  if (loadingHotel) {
-    return <LoadingSpinner />
-  }
-
-  if (!hotel) {
-    // TODO: handle case with hotel missing
-    return notFound()
-  }
-
-  switch (activeStep) {
-    case StepEnum.breakfast:
-    //return <div>Select BREAKFAST</div>
-    case StepEnum.details:
-    //return <div>Select DETAILS</div>
-    case StepEnum.payment:
-    //return <div>Select PAYMENT</div>
-    case StepEnum.selectBed:
-    // return <div>Select BED</div>
-  }
-
-  function onNav(step: StepEnum) {
-    setActiveStep(step)
-    if (typeof window !== "undefined") {
-      window.history.pushState({}, "", step)
-    }
-  }
-
-  let user = null
-  if (userData && !("error" in userData)) {
-    user = userData
-  }
-
   return (
     <section>
       <SectionAccordion
         header="Select bed"
-        isCompleted={true}
-        isOpen={activeStep === StepEnum.selectBed}
+        step={StepEnum.selectBed}
         label={intl.formatMessage({ id: "Request bedtype" })}
-        path="/select-bed"
       >
         <BedType />
       </SectionAccordion>
       <SectionAccordion
         header="Food options"
-        isCompleted={true}
-        isOpen={activeStep === StepEnum.breakfast}
+        step={StepEnum.breakfast}
         label={intl.formatMessage({ id: "Select breakfast options" })}
-        path="/breakfast"
       >
         <Breakfast />
       </SectionAccordion>
       <SectionAccordion
         header="Details"
-        isCompleted={false}
-        isOpen={activeStep === StepEnum.details}
+        step={StepEnum.details}
         label={intl.formatMessage({ id: "Enter your details" })}
-        path="/details"
       >
         <Details user={user} />
       </SectionAccordion>
       <SectionAccordion
         header="Payment"
-        isCompleted={false}
-        isOpen={activeStep === StepEnum.payment}
+        step={StepEnum.payment}
         label={intl.formatMessage({ id: "Select payment method" })}
-        path="/payment"
       >
         <Payment hotel={hotel.data.attributes} />
       </SectionAccordion>