use request and grid instead of box

public/locales/fa/app.json

@@ -140,6 +140,7 @@
     "text_field_phone_number": "شماره تلفن",
     "text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید",
     "text_field_name": "نام",
+    "text_field_city_id": "شهر",
     "text_field_enter_your_name": "نام خود را وارد کنید",
     "text_field_vehicle_type": "نام وسیله نقلیه",
     "text_field_enter_your_vehicle_type": "نام وسیله نقلیه خود را وارد کنید",
@@ -148,6 +149,7 @@
     "text_field_error_fetching_provinces": "خطا در دریافت استان ها",
     "text_field_enter_your_national_code": "کد ملی خود را وارد کنید",
     "text_field_enter_your_province_id": "استان خود را وارد کنید",
+    "text_field_enter_your_city_id": "شهر خود را وارد کنید",
     "text_field_navgan_id": "شماره ناوگان",
     "text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید",
     "text_field_national_code": "کد ملی",
@@ -157,18 +159,7 @@
     "text_field_plate_number": "شماره پلاک",
     "text_field_enter_your_plate_number": "شماره پلاک خود را وارد کنید",
     "button_submit": "ثبت درخواست",
-    "file_field_sherkat_naft_doc": "مجوز شرکت نفت",
+    "error_message_city_id": "لطفا شهر خود را وارد کنید!",
-    "file_field_estate_doc": "سند مالکیت",
-    "file_field_agreement_doc": "موافقت نامه اصولی",
-    "error_message_sherkat_naft_doc": "مجوز شرکت نفت خود را وارد کنید",
-    "error_message_estate_doc": "سند مالکیت خود را وارد کنید",
-    "error_message_agreement_doc": "موافقت نامه اصولی خود را وارد کنید",
-    "file_field_shenasname_image": "تصویر شناسنامه",
-    "file_field_national_card_image": "تصویر کارت ملی",
-    "file_field_payan_khedmat_image": "تصویر کارت پایان خدمت",
-    "error_message_national_card_image": "تصویر کارت ملی خود را وارد کنید",
-    "error_message_shenasname_image": "تصویر شناسنامه خود را وارد کنید",
-    "error_message_payan_khedmat_image": "تصویر کارت پایان خدمت خود را وارد کنید",
     "add_loan_request_permission": "اکنون امکان ثبت درخواست جدید برای شما مقدور نیست"
   },
   "EditLoanRequest": {

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

@@ -1,32 +1,28 @@
 import SelectBox from "@/core/components/SelectBox";
 import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_NAVGAN,} from "@/core/data/apiRoutes";
 import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
-import {Box, Button, Stack, TextField} from "@mui/material";
+import {Box, Button, Grid, TextField} from "@mui/material";
 import axios from "axios";
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
 import {useEffect, useState} from "react";
 import * as Yup from "yup";
-import {useUser} from "@witel/webapp-builder";
+import {useRequest, useUser} from "@witel/webapp-builder";
 
 const AddFormComponent = () => {
     const t = useTranslations();
     const {token} = useUser();
     const [provinceList, setProvinceList] = useState([]);
+    const requestServer = useRequest()
     useEffect(() => {
-        axios
+        requestServer(GET_PROVINCE_LIST, "get", {auth : true, notification : false}).then(({data}) => {
-            .get(GET_PROVINCE_LIST, {
+            const formattedData = data.map((province, index) => ({
-                headers: {Authorization: `Bearer ${token}`},
+                id: index,
-            })
+                name: province.name,
-            .then(({data}) => {
+                value: province.id,
-                const formattedData = data.map((province, index) => ({
+            }));
-                    id: index,
+            setProvinceList(formattedData);
-                    name: province.name,
+        }).catch(() => {});
-                    value: province.id,
-                }));
-                setProvinceList(formattedData);
-            })
-            .catch((error) => {});
     }, []);
 
 
@@ -35,6 +31,7 @@ const AddFormComponent = () => {
         vehicle_type: "",
         plate_number: "",
         province_id: "",
+        city_id: "",
         navgan_id: "",
         national_code: "",
         shenasname_id: "",
@@ -54,6 +51,7 @@ const AddFormComponent = () => {
         ),
         navgan_id: Yup.string().required(t("LoanRequest.error_message_navgan_id")),
         province_id: Yup.string().required(t("LoanRequest.error_message_province_id")),
+        city_id: Yup.string().required(t("LoanRequest.error_message_city_id")),
         national_code: Yup.string().required(
             t("LoanRequest.error_message_national_code")
         ),
@@ -67,6 +65,7 @@ const AddFormComponent = () => {
         formData.append("vehicle_type", values.vehicle_type);
         formData.append("plate_number", values.plate_number);
         formData.append("province_id", values.province_id);
+        formData.append("city_id", values.city_id);
         formData.append("navgan_id", values.navgan_id);
         formData.append("national_code", values.national_code);
         formData.append("shenasname_id", values.shenasname_id);
@@ -75,18 +74,9 @@ const AddFormComponent = () => {
         if (values.national_card_img != null)
             formData.append("national_card_image", values.national_card_img);
 
-        await axios
+        requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth : true, notification : true}).then().catch(() => {
-            .post(SEND_LOAN_REQUEST_NAVGAN, formData, {
+            props.setSubmitting(false)
-                headers: {
+        })
-                    Authorization: `Bearer ${token}`,
-                    "Content-Type": "multipart/form-data",
-                },
-            })
-            .then(function (response) {
-            })
-            .catch(function (error) {
-                props.setSubmitting(false);
-            });
     };
 
     const formik = useFormik({
@@ -96,21 +86,9 @@ const AddFormComponent = () => {
     return (
 
         <>
-            <Box
+            <Grid container spacing={2} sx={{padding : 2}}
-                sx={{
-                    display: "flex",
-                    flexDirection: {xs: "column", sm: "row"},
-                    alignItems: "start",
-                    justifyContent: "center",
-                    width: "100%",
-                }}
             >
-                <Box
+                <Grid item xs={12} sm={6}
-                    sx={{
-                        mx: {xs: 0, sm: 2},
-                        my: 2,
-                        width: "100%",
-                    }}
                 >
                     <TextField
                         sx={{width: "100%"}}
@@ -126,13 +104,8 @@ const AddFormComponent = () => {
                         helperText={formik.touched.national_code && formik.errors.national_code}
                         fullWidth
                     />
-                </Box>
+                </Grid>
-                <Box
+                <Grid item xs={12} sm={6}
-                    sx={{
-                        mx: {xs: 0, sm: 2},
-                        my: 2,
-                        width: "100%",
-                    }}
                 >
                     <TextField
                         sx={{width: "100%"}}
@@ -148,24 +121,10 @@ const AddFormComponent = () => {
                         error={formik.touched.phone_number && Boolean(formik.errors.phone_number)}
                         helperText={formik.touched.phone_number && formik.errors.phone_number}
                     />
-                </Box>
+                </Grid>
-            </Box>
+            </Grid>
-            <Box
+            <Grid container spacing={2} sx={{padding : 2}}>
-                sx={{
+                <Grid item xs={12} sm={6}>
-                    display: "flex",
-                    flexDirection: {xs: "column", sm: "row"},
-                    alignItems: "start",
-                    justifyContent: "center",
-                    width: "100%",
-                }}
-            >
-                <Box
-                    sx={{
-                        mx: {xs: 0, sm: 2},
-                        my: 2,
-                        width: "100%",
-                    }}
-                >
                     <TextField
                         sx={{width: "100%"}}
                         name="vehicle_type"
@@ -180,14 +139,8 @@ const AddFormComponent = () => {
                         error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
                         helperText={formik.touched.vehicle_type && formik.errors.vehicle_type}
                     />
-                </Box>
+                </Grid>
-                <Box
+                <Grid item xs={12} sm={6}>
-                    sx={{
-                        mx: {xs: 0, sm: 2},
-                        my: 2,
-                        width: "100%",
-                    }}
-                >
                     <TextField
                         sx={{width: "100%"}}
                         name="plate_number"
@@ -202,49 +155,46 @@ const AddFormComponent = () => {
                         error={formik.touched.plate_number && Boolean(formik.errors.plate_number)}
                         helperText={formik.touched.plate_number && formik.errors.plate_number}
                     />
-                </Box>
+                </Grid>
-                <Box
+            </Grid>
-                    sx={{
+            <Grid container spacing={2} sx={{padding: 2}}>
-                        mx: {xs: 0, sm: 2},
+                <Grid item xs={12} sm={6}></Grid>
-                        my: 2,
+                <Grid item xs={12} sm={6}></Grid>
-                        width: "100%",
+            </Grid>
-                    }}
+            <Grid container spacing={2} sx={{padding : 2}}>
-                >
+                <Grid item xs={12} sm={6}>
                     <SelectBox
                         name="province_id"
-                        label={t("LoanRequest.text_field_province_id")} // t("LoanRequest.text_field_enter_your_province")
+                        label={t("LoanRequest.text_field_province_id")}
                         size="small"
                         selectType="province_id"
                         selectors={provinceList}
                         select={formik.values.province_id}
                         setFieldValue={formik.setFieldValue}
                         setFieldTouched={formik.setFieldTouched}
-                        error={
+                        error={formik.touched.province_id && Boolean(formik.errors.province_id)}
-                            !!(formik.touched.gender && formik.errors.province_id)
+                        helperText={formik.touched.province_id && formik.errors.province_id}
-                        }
+                        onBlur={formik.handleBlur("province_id")}
-                        helperText={
-                            formik.touched.gender ? formik.errors.province_id : null
-                        }
-
                     />
-                </Box>
+                </Grid>
-            </Box>
+                <Grid item xs={12} sm={6}>
-            <Box
+                    <SelectBox
-                sx={{
+                        name="city_id"
-                    display: "flex",
+                        label={t("LoanRequest.text_field_city_id")}
-                    flexDirection: {xs: "column", sm: "row"},
+                        size="small"
-                    alignItems: "start",
+                        selectType="city_id"
-                    justifyContent: "center",
+                        selectors={provinceList}
-                    width: "100%",
+                        select={formik.values.city_id}
-                }}
+                        setFieldValue={formik.setFieldValue}
-            >
+                        setFieldTouched={formik.setFieldTouched}
-                <Box
+                        error={formik.touched.city_id && Boolean(formik.errors.city_id)}
-                    sx={{
+                        helperText={formik.touched.city_id && formik.errors.city_id}
-                        mx: {xs: 0, sm: 2},
+                        onBlur={formik.handleBlur("city_id")}
-                        my: 2,
+                    />
-                        width: "100%",
+                </Grid>
-                    }}
+            </Grid>
-                >
+            <Grid container spacing={2} sx={{padding : 2}}>
+                <Grid item xs={12} sm={6}>
                     <TextField
                         sx={{width: "100%"}}
                         name="navgan_id"
@@ -257,14 +207,8 @@ const AddFormComponent = () => {
                         error={formik.touched.navgan_id && Boolean(formik.errors.navgan_id)}
                         helperText={formik.touched.navgan_id && formik.errors.navgan_id}
                     />
-                </Box>
+                </Grid>
-                <Box
+                <Grid item xs={12} sm={6}>
-                    sx={{
-                        mx: {xs: 0, sm: 2},
-                        my: 2,
-                        width: "100%",
-                    }}
-                >
                     <TextField
                         sx={{width: "100%"}}
                         name="shenasname_id"
@@ -278,8 +222,8 @@ const AddFormComponent = () => {
                         error={formik.touched.shenasname_id && Boolean(formik.errors.shenasname_id)}
                         helperText={formik.touched.shenasname_id && formik.errors.shenasname_id}
                     />
-                </Box>
+                </Grid>
-            </Box>
+            </Grid>
             <Box
                 sx={{
                     display: "flex",

src/core/components/SelectBox.jsx

@@ -8,6 +8,7 @@ function SelectBox({
                        setFieldValue,
                        setFieldTouched,
                        error,
+                       onBlur,
                        helperText,
                    }) {
 
@@ -15,9 +16,6 @@ function SelectBox({
     const handleChange = (event) => {
         setFieldValue(selectType, event.target.value);
     };
-    const handleBlur = () => {
-        setFieldTouched(select, true);
-    };
     return (
         <FormControl
             variant="outlined"
@@ -29,14 +27,14 @@ function SelectBox({
         >
             <InputLabel id="language-label">{label}</InputLabel>
             <Select
-                labelId="language-label"
                 id={selectId}
+                label={label}
                 name={selectId}
                 size="small"
                 value={select}
                 onChange={handleChange}
-                label="Language"
+                onBlur={onBlur}
-                onBlur={handleBlur}
+
             >
                 {selectors.map((selector) => (
                     <MenuItem key={selector.id} value={selector.value}>