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>