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}>
+    <EnterDetailsProvider step={params.step}>
-      <HotelSelectionHeader hotel={hotel.data.attributes} />
+      <main className={styles.layout}>
-      <div className={styles.content}>
+        <HotelSelectionHeader hotel={hotel.data.attributes} />
-        <SelectedRoom />
+        <div className={styles.content}>
-        {children}
+          <SelectedRoom />
-        <aside className={styles.summary}>
+          {children}
-          <Summary />
+          <aside className={styles.summary}>
-        </aside>
+            <Summary />
-      </div>
+          </aside>
-    </main>
+        </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 { getIntl } from "@/i18n"
-import LoadingSpinner from "@/components/LoadingSpinner"
 
+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 { step, lang } = params
-  const [activeStep, setActiveStep] = useState<StepEnum>(step)
-  const intl = useIntl()
 
-  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}
+        step={StepEnum.selectBed}
-        isOpen={activeStep === StepEnum.selectBed}
         label={intl.formatMessage({ id: "Request bedtype" })}
-        path="/select-bed"
       >
         <BedType />
       </SectionAccordion>
       <SectionAccordion
         header="Food options"
-        isCompleted={true}
+        step={StepEnum.breakfast}
-        isOpen={activeStep === StepEnum.breakfast}
         label={intl.formatMessage({ id: "Select breakfast options" })}
-        path="/breakfast"
       >
         <Breakfast />
       </SectionAccordion>
       <SectionAccordion
         header="Details"
-        isCompleted={false}
+        step={StepEnum.details}
-        isOpen={activeStep === StepEnum.details}
         label={intl.formatMessage({ id: "Enter your details" })}
-        path="/details"
       >
         <Details user={user} />
       </SectionAccordion>
       <SectionAccordion
         header="Payment"
-        isCompleted={false}
+        step={StepEnum.payment}
-        isOpen={activeStep === StepEnum.payment}
         label={intl.formatMessage({ id: "Select payment method" })}
-        path="/payment"
       >
         <Payment hotel={hotel.data.attributes} />
       </SectionAccordion>

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -1,9 +1,12 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import { KingBedIcon } from "@/components/Icons"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
@@ -16,8 +19,14 @@ import { bedTypeEnum } from "@/types/enums/bedType"
 
 export default function BedType() {
   const intl = useIntl()
+  const bedType = useEnterDetailsStore((state) => state.data.bedType)
 
   const methods = useForm<BedTypeSchema>({
+    defaultValues: bedType
+      ? {
+          bedType,
+        }
+      : undefined,
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(bedTypeSchema),
@@ -28,15 +37,32 @@ export default function BedType() {
     { id: "<b>Included</b> (based on availability)" },
     { b: (str) => <b>{str}</b> }
   )
+  const completeStep = useEnterDetailsStore((state) => state.completeStep)
+
+  const onSubmit = useCallback(
+    (values: BedTypeSchema) => {
+      completeStep(values)
+    },
+    [completeStep]
+  )
+
+  useEffect(() => {
+    if (methods.formState.isSubmitting) {
+      return
+    }
+
+    const subscription = methods.watch(() => methods.handleSubmit(onSubmit)())
+    return () => subscription.unsubscribe()
+  }, [methods, onSubmit])
 
   return (
     <FormProvider {...methods}>
-      <form className={styles.form}>
+      <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
         <RadioCard
           Icon={KingBedIcon}
           iconWidth={46}
           id={bedTypeEnum.KING}
-          name="bed"
+          name="bedType"
           subtitle={intl.formatMessage(
             { id: "{width} cm × {length} cm" },
             {
@@ -52,7 +78,7 @@ export default function BedType() {
           Icon={KingBedIcon}
           iconWidth={46}
           id={bedTypeEnum.QUEEN}
-          name="bed"
+          name="bedType"
           subtitle={intl.formatMessage(
             { id: "{width} cm × {length} cm" },
             {

components/HotelReservation/EnterDetails/BedType/schema.ts

@@ -3,5 +3,5 @@ import { z } from "zod"
 import { bedTypeEnum } from "@/types/enums/bedType"
 
 export const bedTypeSchema = z.object({
-  bed: z.nativeEnum(bedTypeEnum),
+  bedType: z.nativeEnum(bedTypeEnum),
 })

components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -1,9 +1,12 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import { BreakfastIcon, NoBreakfastIcon } from "@/components/Icons"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
@@ -17,16 +20,36 @@ import { breakfastEnum } from "@/types/enums/breakfast"
 export default function Breakfast() {
   const intl = useIntl()
 
+  const breakfast = useEnterDetailsStore((state) => state.data.breakfast)
+
   const methods = useForm<BreakfastSchema>({
+    defaultValues: breakfast ? { breakfast } : undefined,
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(breakfastSchema),
     reValidateMode: "onChange",
   })
 
+  const completeStep = useEnterDetailsStore((state) => state.completeStep)
+
+  const onSubmit = useCallback(
+    (values: BreakfastSchema) => {
+      completeStep(values)
+    },
+    [completeStep]
+  )
+
+  useEffect(() => {
+    if (methods.formState.isSubmitting) {
+      return
+    }
+    const subscription = methods.watch(() => methods.handleSubmit(onSubmit)())
+    return () => subscription.unsubscribe()
+  }, [methods, onSubmit])
+
   return (
     <FormProvider {...methods}>
-      <form className={styles.form}>
+      <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
         <RadioCard
           Icon={BreakfastIcon}
           id={breakfastEnum.BREAKFAST}

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -1,8 +1,11 @@
 "use client"
 import { zodResolver } from "@hookform/resolvers/zod"
+import { useCallback } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import Button from "@/components/TempDesignSystem/Button"
 import CheckboxCard from "@/components/TempDesignSystem/Form/ChoiceCard/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -19,6 +22,7 @@ import type {
   DetailsSchema,
 } from "@/types/components/enterDetails/details"
 
+const formID = "enter-details"
 export default function Details({ user }: DetailsProps) {
   const intl = useIntl()
 
@@ -28,13 +32,21 @@ export default function Details({ user }: DetailsProps) {
     { title: intl.formatMessage({ id: "Join at no cost" }) },
   ]
 
+  const initialData = useEnterDetailsStore((state) => ({
+    countryCode: state.data.countryCode,
+    email: state.data.email,
+    firstname: state.data.firstname,
+    lastname: state.data.lastname,
+    phoneNumber: state.data.phoneNumber,
+  }))
+
   const methods = useForm<DetailsSchema>({
     defaultValues: {
-      countryCode: user?.address?.countryCode ?? "",
+      countryCode: user?.address?.countryCode ?? initialData.countryCode,
-      email: user?.email ?? "",
+      email: user?.email ?? initialData.email,
-      firstname: user?.firstName ?? "",
+      firstname: user?.firstName ?? initialData.firstname,
-      lastname: user?.lastName ?? "",
+      lastname: user?.lastName ?? initialData.lastname,
-      phoneNumber: user?.phoneNumber ?? "",
+      phoneNumber: user?.phoneNumber ?? initialData.phoneNumber,
     },
     criteriaMode: "all",
     mode: "all",
@@ -42,6 +54,15 @@ export default function Details({ user }: DetailsProps) {
     reValidateMode: "onChange",
   })
 
+  const completeStep = useEnterDetailsStore((state) => state.completeStep)
+
+  const onSubmit = useCallback(
+    (values: DetailsSchema) => {
+      completeStep(values)
+    },
+    [completeStep]
+  )
+
   return (
     <FormProvider {...methods}>
       <section className={styles.container}>
@@ -50,7 +71,11 @@ export default function Details({ user }: DetailsProps) {
             {intl.formatMessage({ id: "Guest information" })}
           </Body>
         </header>
-        <form className={styles.form}>
+        <form
+          className={styles.form}
+          id={formID}
+          onSubmit={methods.handleSubmit(onSubmit)}
+        >
           <Input
             label={intl.formatMessage({ id: "Firstname" })}
             name="firstname"
@@ -106,9 +131,11 @@ export default function Details({ user }: DetailsProps) {
           )}
           <Button
             disabled={!methods.formState.isValid}
+            form={formID}
             intent="secondary"
             size="small"
             theme="base"
+            type="submit"
           >
             {intl.formatMessage({ id: "Proceed to payment method" })}
           </Button>

components/HotelReservation/EnterDetails/Provider/index.tsx

@@ -0,0 +1,26 @@
+"use client"
+import { PropsWithChildren, useRef } from "react"
+
+import {
+  EnterDetailsContext,
+  type EnterDetailsStore,
+  initEditDetailsState,
+} from "@/stores/enter-details"
+
+import { StepEnum } from "@/types/components/enterDetails/step"
+
+export default function EnterDetailsProvider({
+  step,
+  children,
+}: PropsWithChildren<{ step: StepEnum }>) {
+  const initialStore = useRef<EnterDetailsStore>()
+  if (!initialStore.current) {
+    initialStore.current = initEditDetailsState(step)
+  }
+
+  return (
+    <EnterDetailsContext.Provider value={initialStore.current}>
+      {children}
+    </EnterDetailsContext.Provider>
+  )
+}

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -1,9 +1,11 @@
 "use client"
-import { useEffect, useRef } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
 import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
-import Link from "@/components/TempDesignSystem/Link"
+import Button from "@/components/TempDesignSystem/Button"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
@@ -13,17 +15,22 @@ import { SectionAccordionProps } from "@/types/components/hotelReservation/selec
 
 export default function SectionAccordion({
   header,
-  isOpen,
-  isCompleted,
   label,
-  path,
+  step,
   children,
 }: React.PropsWithChildren<SectionAccordionProps>) {
   const intl = useIntl()
+  const [isComplete, setIsComplete] = useState(false)
+  const currentStep = useEnterDetailsStore((state) => state.currentStep)
+  const isValid = useEnterDetailsStore((state) => state.isValid[step])
+
+  const navigate = useEnterDetailsStore((state) => state.navigate)
 
   const contentRef = useRef<HTMLDivElement>(null)
   const circleRef = useRef<HTMLDivElement>(null)
 
+  const isOpen = currentStep === step
+
   useEffect(() => {
     const content = contentRef.current
     const circle = circleRef.current
@@ -44,15 +51,24 @@ export default function SectionAccordion({
     }
   }, [isOpen])
 
+  useEffect(() => {
+    // We need to set the state on mount because of hydration errors
+    setIsComplete(isValid)
+  }, [isValid])
+
+  function onModify() {
+    navigate(step)
+  }
+
   return (
     <section className={styles.wrapper} data-open={isOpen}>
       <div className={styles.iconWrapper}>
         <div
           className={styles.circle}
-          data-checked={isCompleted}
+          data-checked={isComplete}
           ref={circleRef}
         >
-          {isCompleted ? (
+          {isComplete ? (
             <CheckIcon color="white" height="16" width="16" />
           ) : null}
         </div>
@@ -75,11 +91,18 @@ export default function SectionAccordion({
               {label}
             </Subtitle>
           </div>
-          {isCompleted && !isOpen && (
+          {isComplete && !isOpen && (
-            <Link href={path} color="burgundy" variant="icon">
+            <Button
+              onClick={onModify}
+              theme="base"
+              size="small"
+              variant="icon"
+              intent="text"
+              wrapping
+            >
               {intl.formatMessage({ id: "Modify" })}{" "}
               <ChevronDownIcon color="burgundy" />
-            </Link>
+            </Button>
           )}
         </header>
         <div className={styles.content} ref={contentRef}>

components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css

@@ -75,3 +75,7 @@
   transition: max-height 0.4s ease-out;
   max-height: 0;
 }
+
+.wrapper[data-open="true"] .content {
+  max-height: 1000px;
+}

components/TempDesignSystem/Button/button.module.css

@@ -53,6 +53,7 @@ a.inverted {
 a.text {
   background: none;
   border: none;
+  outline: none;
 }
 
 /* VARIANTS */

components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { useFormContext } from "react-hook-form"
+
 import { CheckIcon, CloseIcon, HeartIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -23,6 +25,8 @@ export default function Card({
   type,
   value,
 }: CardProps) {
+  const { register } = useFormContext()
+
   return (
     <label className={styles.label} data-declined={declined}>
       <Caption className={styles.title} textTransform="bold" uppercase>
@@ -68,9 +72,9 @@ export default function Card({
         aria-hidden
         id={id || name}
         hidden
-        name={name}
         type={type}
         value={value}
+        {...register(name)}
       />
     </label>
   )

server/routers/user/query.ts

@@ -238,14 +238,10 @@ export const userQueryRouter = router({
 
     const data = await getVerifiedUser({ session: ctx.session })
 
-    if (!data) {
+    if (!data || "error" in data) {
       return null
     }
 
-    if ("error" in data) {
-      return data
-    }
-
     return parsedUser(data.data, true)
   }),
   name: safeProtectedProcedure.query(async function ({ ctx }) {

stores/enter-details.ts

@@ -0,0 +1,142 @@
+import { produce } from "immer"
+import { createContext, useContext } from "react"
+import { create, useStore } from "zustand"
+
+import { bedTypeSchema } from "@/components/HotelReservation/EnterDetails/BedType/schema"
+import { breakfastSchema } from "@/components/HotelReservation/EnterDetails/Breakfast/schema"
+import { detailsSchema } from "@/components/HotelReservation/EnterDetails/Details/schema"
+
+import { DetailsSchema } from "@/types/components/enterDetails/details"
+import { StepEnum } from "@/types/components/enterDetails/step"
+import { bedTypeEnum } from "@/types/enums/bedType"
+import { breakfastEnum } from "@/types/enums/breakfast"
+
+interface EnterDetailsState {
+  data: {
+    bedType: bedTypeEnum | undefined
+    breakfast: breakfastEnum | undefined
+  } & DetailsSchema
+  steps: StepEnum[]
+  currentStep: StepEnum
+  isValid: Record<StepEnum, boolean>
+  completeStep: (updatedData: Partial<EnterDetailsState["data"]>) => void
+  navigate: (step: StepEnum, searchParams?: Record<string, string>) => void
+}
+
+export function initEditDetailsState(currentStep: StepEnum) {
+  const isBrowser = typeof window !== "undefined"
+  const sessionData = isBrowser ? sessionStorage.getItem("editDetails") : null
+  const search = isBrowser ? new URLSearchParams(window.location.search) : null
+
+  const defaultData: EnterDetailsState["data"] = {
+    bedType: undefined,
+    breakfast: undefined,
+    countryCode: "",
+    email: "",
+    firstname: "",
+    lastname: "",
+    phoneNumber: "",
+  }
+
+  let inputData = {}
+  if (search?.size) {
+    const searchParams: Record<string, string> = {}
+    search.forEach((value, key) => {
+      searchParams[key] = value
+    })
+
+    inputData = searchParams
+  } else if (sessionData) {
+    inputData = JSON.parse(sessionData)
+  }
+
+  const validPaths = [StepEnum.selectBed]
+
+  let initialData = defaultData
+
+  const isValid = {
+    [StepEnum.selectBed]: false,
+    [StepEnum.breakfast]: false,
+    [StepEnum.details]: false,
+    [StepEnum.payment]: false,
+  }
+
+  const validatedBedType = bedTypeSchema.safeParse(inputData)
+  if (validatedBedType.success) {
+    validPaths.push(StepEnum.breakfast)
+    initialData = { ...initialData, ...validatedBedType.data }
+    isValid[StepEnum.selectBed] = true
+  }
+  const validatedBreakfast = breakfastSchema.safeParse(inputData)
+  if (validatedBreakfast.success) {
+    validPaths.push(StepEnum.details)
+    initialData = { ...initialData, ...validatedBreakfast.data }
+    isValid[StepEnum.breakfast] = true
+  }
+  const validatedDetails = detailsSchema.safeParse(inputData)
+  if (validatedDetails.success) {
+    validPaths.push(StepEnum.payment)
+    initialData = { ...initialData, ...validatedDetails.data }
+    isValid[StepEnum.details] = true
+  }
+
+  if (!validPaths.includes(currentStep)) {
+    currentStep = validPaths.pop()! // We will always have at least one valid path
+    if (isBrowser) {
+      window.history.pushState({}, "", currentStep + window.location.search)
+    }
+  }
+
+  return create<EnterDetailsState>()((set, get) => ({
+    data: initialData,
+    steps: Object.values(StepEnum),
+    navigate: (step, searchParams) =>
+      set(
+        produce((state) => {
+          const query = new URLSearchParams(window.location.search)
+          if (searchParams) {
+            Object.entries(searchParams).forEach(([key, value]) => {
+              query.set(key, value)
+            })
+          }
+
+          state.currentStep = step
+          window.history.pushState({}, "", step + "?" + query.toString())
+        })
+      ),
+    currentStep,
+    isValid,
+    completeStep: (updatedData) =>
+      set(
+        produce((state) => {
+          state.isValid[state.currentStep] = true
+
+          const nextStep =
+            state.steps[state.steps.indexOf(state.currentStep) + 1]
+
+          state.data = { ...state.data, ...updatedData }
+
+          state.currentStep = nextStep
+          get().navigate(nextStep, updatedData)
+        })
+      ),
+  }))
+}
+
+export type EnterDetailsStore = ReturnType<typeof initEditDetailsState>
+
+export const EnterDetailsContext = createContext<EnterDetailsStore | null>(null)
+
+export const useEnterDetailsStore = <T>(
+  selector: (store: EnterDetailsState) => T
+): T => {
+  const enterDetailsContextStore = useContext(EnterDetailsContext)
+
+  if (!enterDetailsContextStore) {
+    throw new Error(
+      `useEnterDetailsStore must be used within EnterDetailsContextProvider`
+    )
+  }
+
+  return useStore(enterDetailsContextStore, selector)
+}

types/components/enterDetails/details.ts

@@ -2,10 +2,10 @@ import { z } from "zod"
 
 import { detailsSchema } from "@/components/HotelReservation/EnterDetails/Details/schema"
 
-import { User } from "@/types/user"
+import type { SafeUser } from "@/types/user"
 
 export interface DetailsSchema extends z.output<typeof detailsSchema> {}
 
 export interface DetailsProps {
-  user: User | null
+  user: SafeUser
 }

types/components/enterDetails/step.ts

@@ -0,0 +1,6 @@
+export enum StepEnum {
+  selectBed = "select-bed",
+  breakfast = "breakfast",
+  details = "details",
+  payment = "payment",
+}

types/components/hotelReservation/selectRate/sectionAccordion.ts

@@ -1,7 +1,7 @@
+import { StepEnum } from "../../enterDetails/step"
+
 export interface SectionAccordionProps {
   header: string
-  isOpen: boolean
-  isCompleted: boolean
   label: string
-  path: string
+  step: StepEnum
 }

types/user.ts

@@ -1,15 +1,23 @@
 import { z } from "zod"
 
-import { creditCardSchema, getUserSchema, membershipSchema } from "@/server/routers/user/output"
+import {
+  creditCardSchema,
+  getUserSchema,
+  membershipSchema,
+} from "@/server/routers/user/output"
+
+import type { RouterOutput } from "@/lib/trpc/client"
 
 /**
  * All extended field needs to be added by API team to response or
  * we have to get the values from elsewhere
  */
-export interface User extends z.output<typeof getUserSchema> { }
+export interface User extends z.output<typeof getUserSchema> {}
+
+export type SafeUser = RouterOutput["user"]["getSafely"]
 
 export type CreditCard = z.output<typeof creditCardSchema>
 
-export interface Membership extends z.output<typeof membershipSchema> { }
+export interface Membership extends z.output<typeof membershipSchema> {}
 
 export type Memberships = Membership[]