150 lines
4.2 KiB
JavaScript
150 lines
4.2 KiB
JavaScript
import {
|
|
Box,
|
|
Button,
|
|
Checkbox,
|
|
FormControl,
|
|
FormLabel,
|
|
Input,
|
|
Modal,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalOverlay,
|
|
Text,
|
|
Textarea,
|
|
useDisclosure,
|
|
} from "@chakra-ui/react";
|
|
import React, { useState } from "react";
|
|
import * as yup from "yup";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { useForm } from "react-hook-form";
|
|
import ReactQuill from "react-quill";
|
|
|
|
export const conformModalSchema = yup.object().shape({
|
|
fees: yup.string().required("File name is required"),
|
|
totalAmount: yup.string().required("File name is required"),
|
|
});
|
|
|
|
const ConfirmModal = ({ isOpen, onClose, firstField }) => {
|
|
|
|
const [emailApproval,setEmailApproval] = useState(false)
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(conformModalSchema),
|
|
});
|
|
|
|
const onSubmit = (data) => {
|
|
setFile(data.document[0]);
|
|
|
|
const newDocument = {
|
|
...data,
|
|
document: data.document[0].name, // Store the document name
|
|
status: true,
|
|
id: uuidv4(),
|
|
createdAt: new Date().toISOString(),
|
|
Type: getFileIcon(file.type),
|
|
};
|
|
|
|
setCreate((prevCreate) => [...prevCreate, newDocument]);
|
|
onClose();
|
|
};
|
|
|
|
const handleFileChange = (event) => {
|
|
const selectedFile = event.target.files[0];
|
|
setFile(selectedFile);
|
|
};
|
|
|
|
const modules = {
|
|
toolbar: [
|
|
// [{ header: "1" }, { header: "2" },
|
|
// // { font: [] }
|
|
// ],
|
|
// [{ size: [] }],
|
|
["bold", "italic", "underline", "strike", "blockquote"],
|
|
[{ list: "ordered" }, { list: "bullet" }],
|
|
["clean"],
|
|
],
|
|
};
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose} initialFocusRef={firstField}>
|
|
<ModalOverlay />
|
|
<ModalContent pb={4}>
|
|
<ModalHeader fontSize={"md"}>Confirm</ModalHeader>
|
|
<ModalCloseButton />
|
|
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
|
|
<ModalBody>
|
|
<FormControl mb={4} isRequired>
|
|
<FormLabel fontSize="sm">Comment</FormLabel>
|
|
<Textarea rows={5}
|
|
focusBorderColor='green.400'
|
|
name="fileName"
|
|
{...register("fileName")}
|
|
fontSize="sm"
|
|
type="textarea"
|
|
size="md"
|
|
placeholder={"Enter your comments...."}
|
|
rounded={'md'}
|
|
resize={'none'}
|
|
/>
|
|
{errors.comment && (
|
|
<Text fontSize="xs" color="red">
|
|
{errors.comment.message}
|
|
</Text>
|
|
)}
|
|
</FormControl>
|
|
|
|
<Checkbox colorScheme='forestGreen'
|
|
onChange={(e) =>setEmailApproval(e.target.checked)}
|
|
>
|
|
<Text mb={0} fontSize={'sm'}>Send an email to the user upon approval</Text>
|
|
</Checkbox>
|
|
{emailApproval && <Box className="messageBox">
|
|
<FormControl mb={4}>
|
|
<FormLabel fontSize="sm" mb={1}>Subject</FormLabel>
|
|
<Input
|
|
focusBorderColor='green.400'
|
|
name="fileName"
|
|
{...register("fileName")}
|
|
fontSize="sm"
|
|
type="text"
|
|
size="sm"
|
|
/>
|
|
</FormControl>
|
|
<FormControl mb={12}>
|
|
<FormLabel fontSize="sm" mb={1}>Message</FormLabel>
|
|
<ReactQuill
|
|
theme="snow"
|
|
style={{
|
|
height: 150,
|
|
}}
|
|
// value={value}
|
|
// onChange={setValue}
|
|
modules={modules}
|
|
placeholder="Start typing here..."
|
|
/>
|
|
</FormControl>
|
|
</Box>}
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button colorScheme="gray" mr={3} onClick={onClose} size={'sm'} rounded={'sm'}>
|
|
Cancel
|
|
</Button>
|
|
<Button colorScheme="forestGreen" variant="solid" size={'sm'} rounded={'sm'}>
|
|
Confirm
|
|
</Button>
|
|
</ModalFooter>
|
|
</Box>
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default ConfirmModal;
|