fix: extend bedType to include discription and roomTypeCode

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -3,45 +3,52 @@
 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"
 
-import { bedTypeSchema } from "./schema"
+import { bedTypeFormSchema } from "./schema"
 
 import styles from "./bedOptions.module.css"
 
 import type {
+  BedTypeFormSchema,
   BedTypeProps,
-  BedTypeSchema,
 } from "@/types/components/hotelReservation/enterDetails/bedType"
 
 export default function BedType({ bedTypes }: BedTypeProps) {
-  const intl = useIntl()
   const bedType = useEnterDetailsStore((state) => state.userData.bedType)
 
-  const methods = useForm<BedTypeSchema>({
-    defaultValues: bedType
+  const methods = useForm<BedTypeFormSchema>({
+    defaultValues: bedType?.roomTypeCode
       ? {
-          bedType,
+          bedType: bedType.roomTypeCode,
         }
       : undefined,
     criteriaMode: "all",
     mode: "all",
-    resolver: zodResolver(bedTypeSchema),
+    resolver: zodResolver(bedTypeFormSchema),
     reValidateMode: "onChange",
   })
 
   const completeStep = useEnterDetailsStore((state) => state.completeStep)
 
   const onSubmit = useCallback(
-    (values: BedTypeSchema) => {
-      completeStep(values)
+    (bedTypeRoomCode: BedTypeFormSchema) => {
+      const matchingRoom = bedTypes.find(
+        (roomType) => roomType.value === bedTypeRoomCode.bedType
+      )
+      if (matchingRoom) {
+        const bedType = {
+          description: matchingRoom.description,
+          roomTypeCode: matchingRoom.value,
+        }
+        completeStep({ bedType })
+      }
     },
-    [completeStep]
+    [completeStep, bedTypes]
   )
 
   useEffect(() => {
@@ -70,7 +77,7 @@ export default function BedType({ bedTypes }: BedTypeProps) {
               name="bedType"
               subtitle={width}
               title={roomType.description}
-              value={roomType.description}
+              value={roomType.value}
             />
           )
         })}

components/HotelReservation/EnterDetails/BedType/schema.ts

@@ -1,7 +1,9 @@
 import { z } from "zod"
 
-import { BedTypeEnum } from "@/types/enums/bedType"
-
 export const bedTypeSchema = z.object({
+  description: z.string(),
+  roomTypeCode: z.string(),
+})
+export const bedTypeFormSchema = z.object({
   bedType: z.string(),
 })

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -37,7 +37,7 @@ export default function SectionAccordion({
   useEffect(() => {
     if (step === StepEnum.selectBed) {
       const value = stepData.bedType
-      value && setTitle(value)
+      value && setTitle(value.description)
     }
     // If breakfast step, check if an option has been selected
     if (step === StepEnum.breakfast && stepData.breakfast) {

components/HotelReservation/EnterDetails/Summary/index.tsx

@@ -17,6 +17,7 @@ import { formatNumber } from "@/utils/format"
 
 import styles from "./summary.module.css"
 
+import { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
 import { RoomsData } from "@/types/components/hotelReservation/enterDetails/bookingData"
 import { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
@@ -32,7 +33,7 @@ export default function Summary({
   showMemberPrice: boolean
   room: RoomsData
 }) {
-  const [chosenBed, setChosenBed] = useState<string>()
+  const [chosenBed, setChosenBed] = useState<BedTypeSchema>()
   const [chosenBreakfast, setChosenBreakfast] = useState<
     BreakfastPackage | BreakfastPackageEnum.NO_BREAKFAST
   >()
@@ -136,7 +137,7 @@ export default function Summary({
         {chosenBed ? (
           <div className={styles.entry}>
             <div>
-              <Body color="textHighContrast">{chosenBed}</Body>
+              <Body color="textHighContrast">{chosenBed.description}</Body>
               <Caption color="uiTextMediumContrast">
                 {intl.formatMessage({ id: "Based on availability" })}
               </Caption>

server/routers/hotels/query.ts

@@ -57,7 +57,7 @@ import {
 } from "./utils"
 
 import { FacilityCardTypeEnum } from "@/types/components/hotelPage/facilities"
-import type { BedType } from "@/types/components/hotelReservation/enterDetails/bedType"
+import type { BedTypeSelection } from "@/types/components/hotelReservation/enterDetails/bedType"
 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
 import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 import type { RequestOptionsWithOutBody } from "@/types/fetch"
@@ -763,7 +763,7 @@ export const hotelQueryRouter = router({
               }
             }
           })
-          .filter((bed): bed is BedType => Boolean(bed))
+          .filter((bed): bed is BedTypeSelection => Boolean(bed))
 
         selectedRoomAvailabilitySuccessCounter.add(1, {
           hotelId,

stores/enter-details.ts

@@ -14,6 +14,7 @@ import {
   getQueryParamsForEnterDetails,
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
 
+import type { BedTypeSchema } from "@/types/components/hotelReservation/enterDetails/bedType"
 import { BookingData } from "@/types/components/hotelReservation/enterDetails/bookingData"
 import { BreakfastPackage } from "@/types/components/hotelReservation/enterDetails/breakfast"
 import { DetailsSchema } from "@/types/components/hotelReservation/enterDetails/details"
@@ -24,7 +25,7 @@ const SESSION_STORAGE_KEY = "enterDetails"
 
 interface EnterDetailsState {
   userData: {
-    bedType: string | undefined
+    bedType: BedTypeSchema | undefined
     breakfast: BreakfastPackage | BreakfastPackageEnum.NO_BREAKFAST | undefined
   } & DetailsSchema
   roomData: BookingData
@@ -35,7 +36,10 @@ interface EnterDetailsState {
   completeStep: (updatedData: Partial<EnterDetailsState["userData"]>) => void
   navigate: (
     step: StepEnum,
-    updatedData?: Record<string, string | boolean | BreakfastPackage>
+    updatedData?: Record<
+      string,
+      string | boolean | BreakfastPackage | BedTypeSchema
+    >
   ) => void
   setCurrentStep: (step: StepEnum) => void
 }

types/components/hotelReservation/enterDetails/bedType.ts

@@ -1,8 +1,11 @@
 import { z } from "zod"
 
-import { bedTypeSchema } from "@/components/HotelReservation/EnterDetails/BedType/schema"
+import {
+  bedTypeFormSchema,
+  bedTypeSchema,
+} from "@/components/HotelReservation/EnterDetails/BedType/schema"
 
-export type BedType = {
+export type BedTypeSelection = {
   description: string
   size: {
     min: number
@@ -11,7 +14,9 @@ export type BedType = {
   value: string
 }
 export type BedTypeProps = {
-  bedTypes: BedType[]
+  bedTypes: BedTypeSelection[]
 }
 
+export interface BedTypeFormSchema extends z.output<typeof bedTypeFormSchema> {}
+
 export interface BedTypeSchema extends z.output<typeof bedTypeSchema> {}

types/enums/bedType.ts

@@ -1,4 +0,0 @@
-export enum BedTypeEnum {
-  KING = "KING",
-  QUEEN = "QUEEN",
-}