feat: add validation to enter details flow

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 ?? "",
-      email: user?.email ?? "",
-      firstname: user?.firstName ?? "",
-      lastname: user?.lastName ?? "",
-      phoneNumber: user?.phoneNumber ?? "",
+      countryCode: user?.address?.countryCode ?? initialData.countryCode,
+      email: user?.email ?? initialData.email,
+      firstname: user?.firstName ?? initialData.firstname,
+      lastname: user?.lastName ?? initialData.lastname,
+      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>