feat: make steps of enter details flow dynamic depending on data

components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -5,7 +5,8 @@ import { useCallback, useEffect } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import { useEnterDetailsStore } from "@/stores/enter-details"
+import { useDetailsStore } from "@/stores/details"
+import { useStepsStore } from "@/stores/steps"
 
 import { Highlight } from "@/components/TempDesignSystem/Form/ChoiceCard/_Card"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
@@ -23,34 +24,37 @@ import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 export default function Breakfast({ packages }: BreakfastProps) {
   const intl = useIntl()
 
-  const breakfast = useEnterDetailsStore((state) => state.userData.breakfast)
+  const breakfast = useDetailsStore(({ data }) =>
+    data.breakfast
+      ? data.breakfast.code
+      : data.breakfast === false
+        ? "false"
+        : data.breakfast
+  )
+  const updateBreakfast = useDetailsStore(
+    (state) => state.actions.updateBreakfast
+  )
+  const completeStep = useStepsStore((state) => state.completeStep)
 
-  let defaultValues = undefined
-  if (breakfast === BreakfastPackageEnum.NO_BREAKFAST) {
-    defaultValues = { breakfast: BreakfastPackageEnum.NO_BREAKFAST }
-  } else if (breakfast?.code) {
-    defaultValues = { breakfast: breakfast.code }
-  }
   const methods = useForm<BreakfastFormSchema>({
-    defaultValues,
+    defaultValues: breakfast ? { breakfast } : undefined,
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(breakfastFormSchema),
     reValidateMode: "onChange",
   })
 
-  const completeStep = useEnterDetailsStore((state) => state.completeStep)
-
   const onSubmit = useCallback(
     (values: BreakfastFormSchema) => {
       const pkg = packages?.find((p) => p.code === values.breakfast)
       if (pkg) {
-        completeStep({ breakfast: pkg })
+        updateBreakfast(pkg)
       } else {
-        completeStep({ breakfast: BreakfastPackageEnum.NO_BREAKFAST })
+        updateBreakfast(false)
       }
+      completeStep()
     },
-    [completeStep, packages]
+    [completeStep, packages, updateBreakfast]
   )
 
   useEffect(() => {
@@ -61,10 +65,6 @@ export default function Breakfast({ packages }: BreakfastProps) {
     return () => subscription.unsubscribe()
   }, [methods, onSubmit])
 
-  if (!packages) {
-    return null
-  }
-
   return (
     <FormProvider {...methods}>
       <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
@@ -100,7 +100,6 @@ export default function Breakfast({ packages }: BreakfastProps) {
           />
         ))}
         <RadioCard
-          id={BreakfastPackageEnum.NO_BREAKFAST}
           name="breakfast"
           subtitle={intl.formatMessage(
             { id: "{amount} {currency}" },
@@ -113,7 +112,7 @@ export default function Breakfast({ packages }: BreakfastProps) {
             id: "You can always change your mind later and add breakfast at the hotel.",
           })}
           title={intl.formatMessage({ id: "No breakfast" })}
-          value={BreakfastPackageEnum.NO_BREAKFAST}
+          value="false"
         />
       </form>
     </FormProvider>