172 lines
4.2 KiB
JavaScript
172 lines
4.2 KiB
JavaScript
import {
|
|
Box,
|
|
Button,
|
|
FormControl,
|
|
FormHelperText,
|
|
FormLabel,
|
|
Input,
|
|
Modal,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalOverlay,
|
|
Text,
|
|
Textarea,
|
|
useDisclosure,
|
|
useToast,
|
|
} from "@chakra-ui/react";
|
|
import React, { useEffect, useState } from "react";
|
|
import * as yup from "yup";
|
|
import { yupResolver } from "@hookform/resolvers/yup";
|
|
import { useForm } from "react-hook-form";
|
|
import { useDepositRejectMutation } from "../../../Services/deposit.request.service";
|
|
import ToastBox from "../../../Components/ToastBox";
|
|
|
|
export const conformModalSchema = yup.object().shape({
|
|
comments: yup.string().required("Comment is required")
|
|
.max(200, "Approve Comment cannot be more than 200 characters"),
|
|
});
|
|
|
|
const DepositRequestReject = ({ isOpen, onClose, firstField ,id}) => {
|
|
const [isBtnLoading , setIsBtnLoading] = useState(false)
|
|
|
|
const toast = useToast()
|
|
|
|
const {
|
|
register,
|
|
reset,
|
|
watch,
|
|
handleSubmit,
|
|
formState: { errors },
|
|
} = useForm({
|
|
resolver: yupResolver(conformModalSchema),
|
|
});
|
|
|
|
const [ depositReject ] = useDepositRejectMutation()
|
|
|
|
|
|
const onSubmit = async(data) => {
|
|
setIsBtnLoading(true)
|
|
try {
|
|
const res = await depositReject({ id ,data})
|
|
|
|
if (res?.error) {
|
|
toast({
|
|
render: () => (
|
|
<ToastBox message={res?.error?.data?.message} status={"error"} />
|
|
),
|
|
});
|
|
setIsBtnLoading(false)
|
|
onClose();
|
|
|
|
}else if(res?.data?.statusCode === 200) {
|
|
toast({
|
|
render: () => (
|
|
<ToastBox message={res?.data?.message} />
|
|
),
|
|
});
|
|
setIsBtnLoading(false)
|
|
onClose();
|
|
|
|
}
|
|
|
|
} catch (error) {
|
|
console.log(error);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
const handleFileChange = (event) => {
|
|
const selectedFile = event.target.files[0];
|
|
setFile(selectedFile);
|
|
};
|
|
|
|
|
|
const { data, isLoading } =
|
|
(id, {
|
|
skip: !id,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (data) {
|
|
reset({
|
|
investorAmount: data?.data?.investorAmount,
|
|
});
|
|
}
|
|
}, [data, reset]);
|
|
|
|
const heandleOnClose = () =>{
|
|
reset()
|
|
onClose()
|
|
}
|
|
|
|
return (
|
|
<Modal isCentered isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
|
|
<ModalOverlay />
|
|
<ModalContent pb={4}>
|
|
<ModalHeader fontSize={"md"}>Investor Comment</ModalHeader>
|
|
<ModalCloseButton />
|
|
{isLoading ? (
|
|
<FullscreenLoaders height={"50vh"} />
|
|
) : (
|
|
<Box as="form" onSubmit={handleSubmit(onSubmit)}>
|
|
<ModalBody>
|
|
<FormControl mb={4} isRequired>
|
|
<FormLabel fontSize="sm">Comment</FormLabel>
|
|
<Textarea
|
|
rows={6}
|
|
focusBorderColor="green.400"
|
|
name="comments"
|
|
{...register("comments")}
|
|
fontSize="sm"
|
|
type="textarea"
|
|
size="md"
|
|
placeholder={"Enter your comment...."}
|
|
rounded={"md"}
|
|
resize={"none"}
|
|
maxLength={200}
|
|
/>
|
|
{errors.comments && (
|
|
<Text fontSize="xs" color="red">
|
|
{errors.comments.message}
|
|
</Text>
|
|
)}
|
|
<FormHelperText fontSize="xs" color="gray.500">
|
|
<Box as="span" me={1}>Maximum length should be 200 characters. You have entered </Box>
|
|
{watch("comments")?.length || 0} characters.
|
|
</FormHelperText>
|
|
</FormControl>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button
|
|
colorScheme="gray"
|
|
mr={3}
|
|
onClick={onClose}
|
|
size={"sm"}
|
|
rounded={"sm"}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
colorScheme="forestGreen"
|
|
variant="solid"
|
|
size={"sm"}
|
|
rounded={"sm"}
|
|
isLoading={isBtnLoading}
|
|
type="submit"
|
|
>
|
|
Send
|
|
</Button>
|
|
</ModalFooter>
|
|
</Box>
|
|
)}
|
|
</ModalContent>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default DepositRequestReject;
|