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

components/HotelReservation/EnterDetails/Details/details.module.css

@@ -1,7 +1,6 @@
 .form {
   display: grid;
   gap: var(--Spacing-x2);
-  padding: var(--Spacing-x3) 0px;
 }
 
 .container {

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -1,9 +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 { useDetailsStore } from "@/stores/details"
+import { useStepsStore } from "@/stores/steps"
 
 import Button from "@/components/TempDesignSystem/Button"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
@@ -24,19 +26,22 @@ import type {
 const formID = "enter-details"
 export default function Details({ user }: DetailsProps) {
   const intl = useIntl()
-  const initialData = useEnterDetailsStore((state) => ({
-    countryCode: state.userData.countryCode,
-    email: state.userData.email,
-    firstName: state.userData.firstName,
-    lastName: state.userData.lastName,
-    phoneNumber: state.userData.phoneNumber,
-    join: state.userData.join,
-    dateOfBirth: state.userData.dateOfBirth,
-    zipCode: state.userData.zipCode,
-    termsAccepted: state.userData.termsAccepted,
-    membershipNo: state.userData.membershipNo,
+  const initialData = useDetailsStore((state) => ({
+    countryCode: state.data.countryCode,
+    email: state.data.email,
+    firstName: state.data.firstName,
+    lastName: state.data.lastName,
+    phoneNumber: state.data.phoneNumber,
+    join: state.data.join,
+    dateOfBirth: state.data.dateOfBirth,
+    zipCode: state.data.zipCode,
+    termsAccepted: state.data.termsAccepted,
+    membershipNo: state.data.membershipNo,
   }))
 
+  const updateDetails = useDetailsStore((state) => state.actions.updateDetails)
+  const completeStep = useStepsStore((state) => state.completeStep)
+
   const methods = useForm<DetailsSchema>({
     defaultValues: {
       countryCode: user?.address?.countryCode ?? initialData.countryCode,
@@ -56,14 +61,20 @@ export default function Details({ user }: DetailsProps) {
     reValidateMode: "onChange",
   })
 
-  const completeStep = useEnterDetailsStore((state) => state.completeStep)
+  const onSubmit = useCallback(
+    (values: DetailsSchema) => {
+      updateDetails(values)
+      completeStep()
+    },
+    [completeStep, updateDetails]
+  )
 
   return (
     <FormProvider {...methods}>
       <form
         className={styles.form}
         id={formID}
-        onSubmit={methods.handleSubmit(completeStep)}
+        onSubmit={methods.handleSubmit(onSubmit)}
       >
         {user ? null : <Signup name="join" />}
         <Footnote
@@ -107,7 +118,7 @@ export default function Details({ user }: DetailsProps) {
             readOnly={!!user}
             registerOptions={{ required: true }}
           />
-          {user ? null : (
+          {user || methods.watch("join") ? null : (
             <Input
               className={styles.membershipNo}
               label={intl.formatMessage({ id: "Membership no" })}
@@ -119,7 +130,6 @@ export default function Details({ user }: DetailsProps) {
         <footer className={styles.footer}>
           <Button
             disabled={!methods.formState.isValid}
-            form={formID}
             intent="secondary"
             size="small"
             theme="base"