refactor: enhance form validation and error handling in EditField, DefaultSelect, and Form components

components/appointment/detail/Form.js

@@ -2,7 +2,7 @@ import Content from "./Content";
 import EditField from "../../../app/component/fields/EditField";
 import DefaultSelect from "@/app/component/selectors/DefaultSelect";
 
-function Form({ changeData, insurance, supplementaryInsurance, data, isForAnother }) {
+function Form({ changeData, insurance, supplementaryInsurance, data, isForAnother, errors = {} }) {
   const findBasicInsuranceVal = () => {
     return insurance?.find(
       (g) =>
@@ -25,20 +25,21 @@ function Form({ changeData, insurance, supplementaryInsurance, data, isForAnothe
         justify-center gap-x-[24px] gap-y-[12px] md:gap-y-[14px] lg:gap-y-[16px] grid-cols-1 sm:grid-cols-2"
     >
       <Content title="شماره موبایل" isConfirmed={isForAnother ? false : true}>
-        <EditField changeData={changeData} data={data?.phone} name="phone" />
+        <EditField changeData={changeData} data={data?.phone} name="phone" error={errors?.phone} />
       </Content>
       <Content title="کد ملی">
         <EditField
           changeData={changeData}
           data={data?.national_code}
           name="national_code"
+          error={errors?.national_code}
         />
       </Content>
       <Content title="نام">
-        <EditField changeData={changeData} data={data?.name} name="name" />
+        <EditField changeData={changeData} data={data?.name} name="name" error={errors?.name} />
       </Content>
       <Content title="نام خانوادگی">
-        <EditField changeData={changeData} data={data?.family} name="family" />
+        <EditField changeData={changeData} data={data?.family} name="family" error={errors?.family} />
       </Content>
       <Content title="جنسیت">
         <DefaultSelect
@@ -54,8 +55,12 @@ function Form({ changeData, insurance, supplementaryInsurance, data, isForAnothe
               ? { id: data.gender.value, title: data.gender.value === "male" ? "مرد" : "زن" }
               : null
           }
+          error={errors?.gender}
         />
       </Content>
+      <Content title="شماره بیمه">
+        <EditField changeData={changeData} data={data?.insurance_id} name="insurance_id" error={errors?.insurance_id} />
+      </Content>
       <Content title="نوع بیمه">
         <DefaultSelect
           updateData={(name, val) => changeData(val, "value", name)}
@@ -63,6 +68,7 @@ function Form({ changeData, insurance, supplementaryInsurance, data, isForAnothe
           name="basic_insurance"
           list={insurance}
           value={findBasicInsuranceVal()}
+          error={errors?.basic_insurance}
         />
       </Content>
       <Content title="بیمه تکمیلی">
@@ -72,6 +78,7 @@ function Form({ changeData, insurance, supplementaryInsurance, data, isForAnothe
           name="supplementary_insurance"
           list={supplementaryInsurance}
           value={findSupplementaryInsuranceVal()}
+          error={errors?.supplementary_insurance}
         />
       </Content>
     </div>

components/appointment/detail/SubmitData.js

@@ -4,35 +4,51 @@ import { Button } from "@mui/material";
 import ArrowLeftB from "@/components/icons/ArrowLeftB";
 import { request } from "@/services/response";
 
-function SubmitData({ setStep, data, prevData }) {
+function SubmitData({ setStep, data, prevData, setErrors }) {
   const [loading, setLoading] = useState(false);
   const newStep = () => setStep((prev) => prev + 1);
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     const isChanged = JSON.stringify(prevData) !== JSON.stringify(data);
 
+    // پاک کردن error های قبلی
+    setErrors({});
+
     if (isChanged) {
       setLoading(true);
-      let newData = data;
-      const { basic_insurance, name, national_code, uuid } = newData;
+      const { basic_insurance, supplementary_insurance, name, family, national_code, gender, insurance_id, uuid } = data;
 
-      newData = {
-        basic_insurance: [basic_insurance.value?.id],
-        ...(prevData.name?.value === data.name.value ? {} : { name: name }),
-        ...(prevData.national_code?.value
-          ? {}
-          : { national_code: national_code }),
+      const payload = {
+        name: name?.value,
+        family: family?.value,
+        national_code: national_code?.value,
+        gender: gender?.value,
+        insurance_id: insurance_id?.value,
+        basic_insurance: basic_insurance?.value?.id ? [basic_insurance.value.id] : [],
+        supplementary_insurance: supplementary_insurance?.value?.id ? [supplementary_insurance.value.id] : [],
       };
 
-      request
-        .patchUserProfile(newData, uuid)
-        .then(() => {
-          setLoading(false);
-          newStep();
-        })
-        .catch(() => {
-          setLoading(false);
-        });
+      try {
+        if (uuid) {
+          // اگر uuid داریم، پروفایل وجود داره و باید PATCH کنیم
+          console.log('📤 ارسال درخواست PATCH - UUID:', uuid, 'Payload:', payload);
+          await request.patchUserProfile(payload, uuid);
+        } else {
+          // اگر uuid نداریم، پروفایل وجود نداره و باید POST کنیم
+          console.log('📤 ارسال درخواست POST - Payload:', payload);
+          await request.postUserProfile(payload);
+        }
+        console.log('✅ پروفایل با موفقیت ذخیره شد');
+        setLoading(false);
+        newStep();
+      } catch (error) {
+        console.log('❌ خطا در ذخیره پروفایل:', error?.response?.data || error);
+        setLoading(false);
+        // اگر خطای validation بود، error ها را ست می‌کنیم
+        if (error?.response?.data) {
+          setErrors(error.response.data);
+        }
+      }
     } else {
       newStep();
     }

components/appointment/detail/index.js

@@ -18,6 +18,8 @@ function Detail({
 }) {
   const [insurance, setInsurance] = useState();
   const [supplementaryInsurance, setSupplementaryInsurance] = useState();
+  const [errors, setErrors] = useState({});
+
   const changeData = (value, type, name) =>
     setData({
       ...data,
@@ -68,6 +70,7 @@ function Detail({
           supplementaryInsurance={supplementaryInsurance}
           changeData={changeData}
           isForAnother={isForAnother}
+          errors={errors}
         />
         {!isForAnother && (
           <Button
@@ -87,7 +90,7 @@ function Detail({
             </p>
           </Button>
         )}
-        <SubmitData setStep={setStep} data={data} prevData={prevData} />
+        <SubmitData setStep={setStep} data={data} prevData={prevData} setErrors={setErrors} />
       </div>
     </div>
   );

components/appointment/index.js

@@ -11,6 +11,7 @@ const defaultData = {
   name: { value: "", isEdit: true },
   family: { value: "", isEdit: true },
   gender: { value: "", isEdit: true },
+  insurance_id: { value: "", isEdit: true },
   basic_insurance: { value: "", isEdit: true },
 };
 
@@ -50,6 +51,7 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
       // سپس اگر uuid داریم، بقیه اطلاعات را از API می‌گیریم
       if (userInfo && parsedData) {
         try {
+          console.log('📤 درخواست دریافت پروفایل کاربر - UUID:', parsedData.uuid);
           const res = await request.getUserProfile(parsedData.uuid);
 
           if (res) {
@@ -63,6 +65,7 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
               name: { value: res.name || "", isEdit: true },
               family: { value: res.family || "", isEdit: true },
               gender: { value: res.gender || "", isEdit: true },
+              insurance_id: { value: res.insurance_id || "", isEdit: true },
               basic_insurance: {
                 value: res.basic_insurance,
                 isEdit: true,
@@ -80,6 +83,7 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
               name: { value: "", isEdit: true },
               family: { value: "", isEdit: true },
               gender: { value: "", isEdit: true },
+              insurance_id: { value: "", isEdit: true },
               basic_insurance: { value: "", isEdit: true },
             }));
           }
@@ -104,6 +108,7 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
 
         if (userInfo && parsedData && !data.uuid) {
           try {
+            console.log('📤 درخواست مجدد دریافت پروفایل (step 3) - UUID:', parsedData.uuid);
             const res = await request.getUserProfile(parsedData.uuid);
 
             if (res) {
@@ -117,6 +122,7 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
                 name: { value: res.name || "", isEdit: true },
                 family: { value: res.family || "", isEdit: true },
                 gender: { value: res.gender || "", isEdit: true },
+                insurance_id: { value: res.insurance_id || "", isEdit: true },
                 basic_insurance: {
                   value: res.basic_insurance,
                   isEdit: true,
@@ -134,6 +140,7 @@ function AppointmentPage({ doctor, disabledDates, matchedCity }) {
                 name: { value: "", isEdit: true },
                 family: { value: "", isEdit: true },
                 gender: { value: "", isEdit: true },
+                insurance_id: { value: "", isEdit: true },
                 basic_insurance: { value: "", isEdit: true },
               }));
             }