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)
+ }
/>
+
+ {formik.touched.confirm_img && formik.errors.confirm_img}
+
@@ -106,7 +124,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => {
{t("ConfirmDialog.button-cancel")}