From 1bd2f4938b8a0e012290cd823ad865cda765aa1c Mon Sep 17 00:00:00 2001
From: AminGhasempoor <aminghasempoor79@gmail.com>
Date: Tue, 7 Nov 2023 11:25:41 +0330
Subject: [PATCH] LFFE-18 make cofirm img validation on format and size in
 passenger office

---
 .../Form/ConfirmForm/ConfirmContent.jsx       | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx
index 46a735f..2a6084b 100644
--- a/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx
+++ b/src/components/dashboard/passenger-office/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_PASSENGER_OFFICE} 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("PassengerBoss.upload_file_unit")}`, (value) => {
+                if (!value) return true
+                return value.size <= 2 * 1024 * 1024;
+            })
+            .test('fileType', `${t("PassengerBoss.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("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>