change type number to type tel in textFields

public/locales/fa/app.json

@@ -135,6 +135,7 @@
   },
   "LoanRequest": {
     "finish_loan_request": "درخواست شما با موفقیت ثبت شد",
+    "button_while_submit": "درحال بارگذاری ...",
     "checkbox": "بدینوسیله صحت کلیه اطلاعات مندرج در این فرم را تایید و گواهی میدهم .",
     "back_to_dashboard": "پیگیری درخواست ها",
     "cityList_empty": "ابتدا استان را وارد کنید",

src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx

@@ -78,7 +78,7 @@ const AddFormComponent = () => {
             .required(
                 t("LoanRequest.error_message_postal_code")
             ),
-        plate_part1: Yup.mixed()
+        plate_part1: Yup.mixed().test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 2)
             .required(
                 t("LoanRequest.error_message_plate_number")
             ),
@@ -86,11 +86,11 @@ const AddFormComponent = () => {
             .required(
                 t("LoanRequest.error_message_plate_number")
             ),
-        plate_part3: Yup.mixed()
+        plate_part3: Yup.mixed().test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 3)
             .required(
                 t("LoanRequest.error_message_plate_number")
             ),
-        plate_part4: Yup.mixed()
+        plate_part4: Yup.mixed().test("max", `${t("LoanRequest.error_message_plate_number")}`, (value) => value.toString().length === 2)
             .required(
                 t("LoanRequest.error_message_plate_number")
             ),
@@ -103,14 +103,12 @@ const AddFormComponent = () => {
             .test("positive", `${t("LoanRequest.national_code_positive")}`, (value) => value >= 0)
             .test("max", `${t("LoanRequest.national_code_max")}`, (value) => value.toString().length === 10)
             .required(t("LoanRequest.error_message_national_id")),
-        national_serial_number: Yup.mixed()
+        national_serial_number: Yup.string().required(t("LoanRequest.error_message_shenasname_serial")),
-            .test("max", `${t("LoanRequest.shenasname_serial_max")}`, (value) => value.toString().length === 10)
-            .required(t("LoanRequest.error_message_shenasname_serial")
-            ),
     });
 
 
     const handleSubmit = async (values, props) => {
+        props.setSubmitting(true)
         const formData = new FormData();
         formData.append("telephone_number", values.telephone_number);
         formData.append("navgan_type", values.navgan_type);
@@ -130,7 +128,7 @@ const AddFormComponent = () => {
         formData.append("education_id", values.education_id);
         formData.append("occupation_id", values.occupation_id);
 
-        requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {
+        await requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {
             auth: true, notification: true, data: {
                 telephone_number: values.telephone_number,
                 vehicle_type: values.vehicle_type,
@@ -153,6 +151,7 @@ const AddFormComponent = () => {
         }).then(() => {
             setFinishLoanRequest(true)
         }).catch(() => {
+        }).finally(() => {
             props.setSubmitting(false)
         })
     };
@@ -187,7 +186,8 @@ const AddFormComponent = () => {
                                     name="national_id"
                                     variant="outlined"
                                     size="small"
-                                    type={"number"}
+                                    inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
+                                    type={'tel'}
                                     onChange={formik.handleChange}
                                     label={t("LoanRequest.text_field_national_code")}
                                     placeholder={t(
@@ -231,7 +231,8 @@ const AddFormComponent = () => {
                                     sx={{width: "100%"}}
                                     name="postal_code"
                                     variant="outlined"
-                                    type={'number'}
+                                    inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
+                                    type={'tel'}
                                     onChange={formik.handleChange}
                                     size="small"
                                     label={t("LoanRequest.text_field_postal_code")}
@@ -314,7 +315,8 @@ const AddFormComponent = () => {
                                     sx={{width: "100%"}}
                                     name="navgan_id"
                                     variant="outlined"
-                                    type={'number'}
+                                    inputProps={{inputMode: 'numeric', pattern: '[0-9]*'}}
+                                    type={'tel'}
                                     onChange={formik.handleChange}
                                     size="small"
                                     label={t("LoanRequest.text_field_navgan_id")}
@@ -500,7 +502,9 @@ const AddFormComponent = () => {
                                 endIcon={<DataSaverOnIcon/>}
                                 disabled={formik.values.checkedBox ? (formik.isSubmitting || !formik.dirty || !formik.isValid) : true}
                             >
-                                {t("LoanRequest.button_submit")}
+                                {formik.isSubmitting
+                                    ? t("LoanRequest.button_while_submit")
+                                    : t("LoanRequest.button_submit")}
                             </Button>
                         </Box>
                     </>

src/core/components/PlateNumber.jsx

@@ -135,7 +135,7 @@ const PlateNumber = ({formik}) => {
                        borderRadius: 1
                    }}>
                 <TextField
-                    type={'number'}
+                    type={'tel'}
                     value={formik.values.plate_part4}
                     onInput={(event) => event.target.value.length <= 2 ? formik.setFieldValue("plate_part4", event.target.value) : null}
                     size={'small'}
@@ -146,7 +146,7 @@ const PlateNumber = ({formik}) => {
                     error={formik.touched.plate_part4 && Boolean(formik.errors.plate_part4)}
                 />
                 <TextField
-                    type={'number'}
+                    type={'tel'}
                     value={formik.values.plate_part3}
                     onInput={(event) => event.target.value.length <= 3 ? formik.setFieldValue("plate_part3", event.target.value) : null}
                     size={'small'}
@@ -206,7 +206,7 @@ const PlateNumber = ({formik}) => {
                     </Box>
                 </Drawer>
                 <TextField
-                    type={'number'}
+                    type={'tel'}
                     value={formik.values.plate_part1}
                     onInput={(event) => event.target.value.length <= 2 ? formik.setFieldValue("plate_part1", event.target.value) : null}
                     size={'small'}