From 7e8f5e11158dc44ab08e0dd5cd95fc61fd751900 Mon Sep 17 00:00:00 2001
From: YasinShaikh123 <123150391+YasinShaikh123@users.noreply.github.com>
Date: Fri, 17 Jan 2025 17:01:49 +0530
Subject: [PATCH] =?UTF-8?q?[=20=20kaam=20chalu=20hai=F0=9F=91=B7=E2=80=8D?=
 =?UTF-8?q?=E2=99=82=EF=B8=8F=20=20]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Popups/ConfirmReversalPopups.jsx          | 183 ++++++++++++++++++
 .../BankDepositRequest/BankDepositRequest.jsx |  49 ++++-
 .../ReversalFawateerDeposit.jsx               |  12 +-
 3 files changed, 234 insertions(+), 10 deletions(-)
 create mode 100644 src/Components/Popups/ConfirmReversalPopups.jsx

diff --git a/src/Components/Popups/ConfirmReversalPopups.jsx b/src/Components/Popups/ConfirmReversalPopups.jsx
new file mode 100644
index 0000000..b97551c
--- /dev/null
+++ b/src/Components/Popups/ConfirmReversalPopups.jsx
@@ -0,0 +1,183 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+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({
+  comments: yup
+    .string()
+    .min(2, "Minimum length should be 150 characters.")
+    .max(150, "Maximum length should be 150 characters.")
+    .matches(/^[^\d]+$/, "Sponsor Name cannot contain numbers")
+    .required("Comment is required"),
+});
+
+const ConfirmReversalPopups = ({
+  isOpen,
+  onClose,
+  handleConfirm,
+  isLoading,
+}) => {
+  const {
+    watch,
+    register,
+    reset,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: yupResolver(conformModalSchema),
+    mode: "all",
+  });
+
+  const [emailApproval, setEmailApproval] = useState(false);
+
+
+  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}>
+      <ModalOverlay />
+      <ModalContent pb={4}>
+        <ModalHeader fontSize={"md"}>Approve</ModalHeader>
+        <ModalCloseButton />
+        <Box
+          as="form"
+          onSubmit={handleSubmit((data) => {
+            handleConfirm(data);
+            reset();
+            onClose();
+          })}
+        >
+          <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 comments...."}
+                rounded={"md"}
+                resize={"none"}
+                mb={2}
+              />
+              {errors.comments ? (
+                <Text fontSize="xs" color="red">
+                  {errors.comments.message}
+                </Text>
+              ) : (
+                <Text fontSize="xs" color="gray.500">
+                  Maximum length should be 150 characters. You have entered{" "}
+                  {watch()?.comments?.length || 0} characters.
+                </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"}
+              type="submit"
+              fontWeight={400}
+            >
+              Send
+            </Button>
+          </ModalFooter>
+        </Box>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+ConfirmReversalPopups.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  handelApproved: PropTypes.func.isRequired,
+  isLoading: PropTypes.func.isRequired,
+};
+
+export default ConfirmReversalPopups;
diff --git a/src/Pages/BankDepositRequest/BankDepositRequest.jsx b/src/Pages/BankDepositRequest/BankDepositRequest.jsx
index 259dd61..cd47f28 100644
--- a/src/Pages/BankDepositRequest/BankDepositRequest.jsx
+++ b/src/Pages/BankDepositRequest/BankDepositRequest.jsx
@@ -330,19 +330,58 @@ const BankDepositRequest = () => {
     }
   };
 
+  const handleConfirm = async (data) => {
+    setIsReversalLoading.on(); // Start loading
+    try {
+      const { error, data: responseData } = await rejectbankDepositRequest({
+        id: actionId,
+        data,
+      });
+
+      if (error) {
+        throw error; // Explicitly handle the error
+      }
+
+      // Success: Perform necessary actions
+      refetch();
+      toast({
+        render: () => (
+          <ToastBox message={responseData?.message || "Action successful!"} />
+        ),
+      });
+      onRejectClose();
+    } catch (error) {
+      // Handle errors
+      toast({
+        render: () => (
+          <ToastBox
+            message={
+              error?.data?.message || "Something went wrong. Please try again."
+            }
+            status="error"
+          />
+        ),
+      });
+      console.error("Error:", error);
+    } finally {
+      setIsReversalLoading.off(); // Ensure loading is toggled off
+    }
+  };
+  
+
   return (
     <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
       {/* <ConfirmModal isOpen={isConfirmOpen} onClose={onConfirmClose} /> */}
       <RejectReversalPopups
-        isOpen={isConfirmOpen}
-        onClose={onConfirmClose}
+        isOpen={isRejectOpen}
+        onClose={onRejectClose}
         handelApproved={handleApproved}
         isLoading={isReversalLoading}
       />
       <ConfirmReversalPopups
-        isOpen={isRejectOpen}
-        onClose={onRejectClose}
-        handelApproved={handleApproved}
+        isOpen={isConfirmOpen}
+        onClose={onConfirmClose}
+        handleConfirm={handleConfirm}
         isLoading={isReversalLoading}
       />
       <Box bg="white.500">
diff --git a/src/Pages/ReversalFawateerDeposit/ReversalFawateerDeposit.jsx b/src/Pages/ReversalFawateerDeposit/ReversalFawateerDeposit.jsx
index b5e70ec..be5ea72 100644
--- a/src/Pages/ReversalFawateerDeposit/ReversalFawateerDeposit.jsx
+++ b/src/Pages/ReversalFawateerDeposit/ReversalFawateerDeposit.jsx
@@ -24,9 +24,10 @@ import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import { useGetFawateerForMakerRequestQuery } from "../../Services/fawateer.request.service";
 import ConfirmModal from "./ConfirmModal";
 import RejectModal from "./RejectModal";
-import { useGetFawateerDepositMasterQuery, useRejectFawateerRequestMutation } from "../../Services/reversal.fawateer.deposit.service";
+import { useApproveFawateerRequestMutation, useGetFawateerDepositMasterQuery, useRejectFawateerRequestMutation } from "../../Services/reversal.fawateer.deposit.service";
 import RejectReversalPopups from "../../Components/Popups/RejectReversalPopups";
 import ToastBox from "../../Components/ToastBox";
+import ConfirmReversalPopups from "../../Components/Popups/ConfirmReversalPopups";
   
   const ReversalFawateerDeposit = () => {
     const toast = useToast();
@@ -43,6 +44,8 @@ import ToastBox from "../../Components/ToastBox";
   
     const [rejectFawateerRequest] = useRejectFawateerRequestMutation();
 
+    const [approveFawateerRequest] = useApproveFawateerRequestMutation();
+
     const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
     const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
   
@@ -351,12 +354,11 @@ import ToastBox from "../../Components/ToastBox";
           alertHandler={handleDelete}
           isLoading={isLoading}
         />
-        <ConfirmModal
-          // data={data?.data?.rows}
+        <ConfirmReversalPopups
           isOpen={isConfirmOpen}
           onClose={onConfirmClose}
-          id={actionId}
-          // firstField={firstField}
+          handelApproved={handleApproved}
+          isLoading={isReversalLoading}
         />
         <RejectReversalPopups
           isOpen={isRejectOpen}