LFFE-18 make cofirm img validation on format and size in province manager and transportation

public/locales/fa/app.json

@@ -161,7 +161,9 @@
     "navgan_id": "کد ناوگان",
     "vehicle_type": "نوع ماشین",
     "state_name": "وضعیت درخواست",
-    "confirm": "ارجاع به کارشناس ماشین آلات"
+    "confirm": "ارجاع به کارشناس ماشین آلات",
+    "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
+    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf"
   },
   "CommercialChief": {
     "name": "نام",
@@ -184,7 +186,9 @@
     "navgan_id": "کد ناوگان",
     "vehicle_type": "نوع ماشین",
     "state_name": "وضعیت درخواست",
-    "confirm": "تایید نهایی و ارجاع به بانک"
+    "confirm": "تایید نهایی و ارجاع به بانک",
+    "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
+    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf"
   },
   "PassengerBoss": {
     "name": "نام",
@@ -269,7 +273,9 @@
     "navgan_id": "کد ناوگان",
     "vehicle_type": "نوع ماشین",
     "state_name": "وضعیت درخواست",
-    "confirm": "ارجاع به مدیر کل استانی"
+    "confirm": "ارجاع به مدیر کل استانی",
+    "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
+    "upload_file_format": "فرمت قابل قبول : png,jpg,pdf"
   },
   "InspectorExpert": {
     "name": "نام",

src/components/dashboard/navgan-province-manager/Form/ConfirmForm/ConfirmContent.jsx

@@ -1,12 +1,12 @@
 import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
-import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
+import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
 import {CONFIRM_NAVGAN_PROVINCE_MANAGER} from "@/core/data/apiRoutes";
-import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import {useState} from "react";
+import * as Yup from "yup";
 
 const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
     const t = useTranslations();
@@ -17,11 +17,24 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
     const requestServer = useRequest({auth: true})
     const {update_notification} = useNotification()
 
+    const validationSchema = Yup.object().shape({
+        confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error"))
+            .test('fileSize', `${t("NavganProvinceManager.upload_file_unit")}`, (value) => {
+                if (!value) return true
+                return value.size <= 2 * 1024 * 1024;
+            })
+            .test('fileType', `${t("NavganProvinceManager.upload_file_format")}`, (value) => {
+                if (!value) return true
+                const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types
+                return allowedTypes.includes(value.type);
+            })
+    })
+
     const formik = useFormik({
         initialValues: {
             description: "",
             confirm_img: null
-        },
+        }, validationSchema,
         onSubmit: (values, {setSubmitting}) => {
             const formData = new FormData();
             if (values.description != "") formData.append("expert_description", values.description);
@@ -47,19 +60,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
     const handleUploadChange = (event) => {
         const uploadedFile = event.target?.files?.[0];
         if (uploadedFile) {
-            const maxFileSize = 2 * 1024 * 1024;
-            if (uploadedFile.size > maxFileSize) {
-                UploadFileNotification(t);
-                event.target.value = "";
-                return;
-            }
-
             const fileType = event.target?.files?.[0].type;
             const fileName = event.target?.files?.[0].name;
             setSelectedImage(URL.createObjectURL(uploadedFile));
             setfileType(fileType);
             setfileName(fileName);
-            formik.setFieldValue("confirm_img", uploadedFile);
+            formik.setFieldValue("confirm_img", uploadedFile).then(() => {
+                formik.setFieldTouched("confirm_img", true);
+            })
             setShowAddIcon(false);
         }
     };
@@ -96,7 +104,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                             imageSize={[250, 150]}
                             setShowAddIcon={setShowAddIcon}
                             showAddIcon={showAddIcon}
+                            onBlur={() => formik.handleBlur("confirm_img")}
+                            error={
+                                formik.touched.confirm_img &&
+                                Boolean(formik.errors.confirm_img)
+                            }
                         />
+                        <FormHelperText
+                            error={Boolean(formik.errors.confirm_img)}
+                        >
+                            {formik.touched.confirm_img && formik.errors.confirm_img}
+                        </FormHelperText>
                     </Stack>
                 </Stack>
             </DialogContent>
@@ -106,7 +124,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                     {t("ConfirmDialog.button-cancel")}
                 </Button>
                 <Button onClick={formik.handleSubmit} variant="contained" color="primary"
-                        disabled={formik.isSubmitting}>
+                        disabled={formik.isSubmitting || !formik.isValid}>
                     {t("ConfirmDialog.button-confirm")}
                 </Button>
             </DialogActions>

src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx

@@ -19,11 +19,11 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
 
     const validationSchema = Yup.object().shape({
         confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error"))
-            .test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => {
+            .test('fileSize', `${t("PassengerOffice.upload_file_unit")}`, (value) => {
                 if (!value) return true
                 return value.size <= 2 * 1024 * 1024;
             })
-            .test('fileType', `${t("PassengerBoss.upload_file_format")}`, (value) => {
+            .test('fileType', `${t("PassengerOffice.upload_file_format")}`, (value) => {
                 if (!value) return true
                 const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types
                 return allowedTypes.includes(value.type);

src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx

@@ -1,12 +1,12 @@
 import UploadSystem from "@/core/components/UploadSystem";
 import useNotification from "@/lib/app/hooks/useNotification";
 import useRequest from "@/lib/app/hooks/useRequest";
-import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material"
+import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material"
 import {useFormik} from "formik";
 import {useTranslations} from "next-intl";
 import {CONFIRM_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes";
-import UploadFileNotification from "@/core/components/notifications/UploadFileNotification";
 import {useState} from "react";
+import * as Yup from "yup";
 
 const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
     const t = useTranslations();
@@ -17,11 +17,24 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
     const requestServer = useRequest({auth: true})
     const {update_notification} = useNotification()
 
+    const validationSchema = Yup.object().shape({
+        confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error"))
+            .test('fileSize', `${t("TransportationAssistance.upload_file_unit")}`, (value) => {
+                if (!value) return true
+                return value.size <= 2 * 1024 * 1024;
+            })
+            .test('fileType', `${t("TransportationAssistance.upload_file_format")}`, (value) => {
+                if (!value) return true
+                const allowedTypes = ['image/jpg', 'image/png', 'application/pdf']; // Define your allowed file types
+                return allowedTypes.includes(value.type);
+            })
+    })
+
     const formik = useFormik({
         initialValues: {
             description: "",
             confirm_img: null
-        },
+        }, validationSchema,
         onSubmit: (values, {setSubmitting}) => {
             const formData = new FormData();
             if (values.description != "") formData.append("expert_description", values.description);
@@ -47,19 +60,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
     const handleUploadChange = (event) => {
         const uploadedFile = event.target?.files?.[0];
         if (uploadedFile) {
-            const maxFileSize = 2 * 1024 * 1024;
-            if (uploadedFile.size > maxFileSize) {
-                UploadFileNotification(t);
-                event.target.value = "";
-                return;
-            }
-
             const fileType = event.target?.files?.[0].type;
             const fileName = event.target?.files?.[0].name;
             setSelectedImage(URL.createObjectURL(uploadedFile));
             setfileType(fileType);
             setfileName(fileName);
-            formik.setFieldValue("confirm_img", uploadedFile);
+            formik.setFieldValue("confirm_img", uploadedFile).then(() => {
+                formik.setFieldTouched("confirm_img", true);
+            })
             setShowAddIcon(false);
         }
     };
@@ -96,7 +104,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                             imageSize={[250, 150]}
                             setShowAddIcon={setShowAddIcon}
                             showAddIcon={showAddIcon}
+                            onBlur={() => formik.handleBlur("confirm_img")}
+                            error={
+                                formik.touched.confirm_img &&
+                                Boolean(formik.errors.confirm_img)
+                            }
                         />
+                        <FormHelperText
+                            error={Boolean(formik.errors.confirm_img)}
+                        >
+                            {formik.touched.confirm_img && formik.errors.confirm_img}
+                        </FormHelperText>
                     </Stack>
                 </Stack>
             </DialogContent>
@@ -106,7 +124,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
                     {t("ConfirmDialog.button-cancel")}
                 </Button>
                 <Button onClick={formik.handleSubmit} variant="contained" color="primary"
-                        disabled={formik.isSubmitting}>
+                        disabled={formik.isSubmitting || !formik.isValid}>
                     {t("ConfirmDialog.button-confirm")}
                 </Button>
             </DialogActions>