Enhance InitiateReversalPopup and DepositHistory: add loading state and integrate reversal request mutation

src/Components/Popups/InitiateReversalPopups.jsx

@@ -29,7 +29,12 @@ export const conformModalSchema = yup.object().shape({
     .required("Comment is required"),
 });
 
-const InitiateReversalPopup = ({ isOpen, onClose, handelApproved }) => {
+const InitiateReversalPopup = ({
+  isOpen,
+  onClose,
+  handelApproved,
+  isLoading,
+}) => {
   const {
     watch,
     register,
@@ -41,6 +46,8 @@ const InitiateReversalPopup = ({ isOpen, onClose, handelApproved }) => {
     mode: "all",
   });
 
+  console.log(isLoading);
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <ModalOverlay />
@@ -52,6 +59,7 @@ const InitiateReversalPopup = ({ isOpen, onClose, handelApproved }) => {
           onSubmit={handleSubmit((data) => {
             handelApproved(data);
             reset();
+            onClose()
           })}
         >
           <ModalBody>
@@ -99,6 +107,7 @@ const InitiateReversalPopup = ({ isOpen, onClose, handelApproved }) => {
               size={"sm"}
               rounded={"sm"}
               type={"submit"}
+              isDisabled={isLoading}
             >
               Send
             </Button>
@@ -111,6 +120,7 @@ const InitiateReversalPopup = ({ isOpen, onClose, handelApproved }) => {
 
 InitiateReversalPopup.propTypes = {
   isOpen: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   handelApproved: PropTypes.func.isRequired,
 };

src/Pages/Deposit/DepositViewHistory/DepositHistory.jsx

@@ -6,6 +6,7 @@ import {
   Input,
   Link,
   Text,
+  useBoolean,
   useDisclosure,
   useToast,
 } from "@chakra-ui/react";
@@ -24,6 +25,7 @@ import { ExternalLinkIcon } from "@chakra-ui/icons";
 import InitiateReversalPopup from "../../../Components/Popups/InitiateReversalPopups";
 import { generateSerialNumber } from "../../../Constants/Constants";
 import { TABLE_PAGINATION } from "../../../Constants/Paginations";
+import { useCreateBankDepositReversalRequestMutation } from "../../../Services/bankdeposit.request.service";
 
 const formatDate = (date) => {
   return new Date(date).toLocaleDateString("en-GB", {
@@ -44,6 +46,9 @@ const DepositHistory = () => {
   const [mouseEntered, setMouseEntered] = useState(false);
   const [mouseEnteredId, setMouseEnteredId] = useState("");
 
+  const [createBankDepositReversalRequest] =
+    useCreateBankDepositReversalRequestMutation();
+
   // =========================== [Use State] =============================
   const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
   const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
@@ -55,6 +60,7 @@ const DepositHistory = () => {
     onOpen: onOpenInRev,
     onClose: onCloseInRev,
   } = useDisclosure();
+  const [isReversalLoading, setIsReversalLoading] = useBoolean();
 
   // Debounce the search term to avoid making a request on every keystroke
   useEffect(() => {
@@ -315,8 +321,30 @@ const DepositHistory = () => {
   // };
 
   const handelApproved = async (data) => {
-    console.log(data, reversalId);
-    onCloseInRev();
+    setIsReversalLoading.on;
+    try {
+      const { error, data: responseData } =
+        await createBankDepositReversalRequest({
+          id: reversalId,
+          data,
+        });
+      refetch();
+      toast({
+        render: () => <ToastBox message={responseData.message} />,
+      });
+      onCloseInRev();
+      if (error) {
+        throw error;
+      }
+    } catch (error) {
+      toast({
+        render: () => (
+          <ToastBox message={error?.data?.message} status={"error"} />
+        ),
+      });
+      console.error("Error:", error);
+    }
+    setIsReversalLoading.off;
   };
 
   return (
@@ -379,6 +407,7 @@ const DepositHistory = () => {
         onClose={onCloseInRev}
         isOpen={isOpenInRev}
         handelApproved={handelApproved}
+        isLoading={isReversalLoading}
       />
     </Box>
   );

src/Services/bankdeposit.request.service.js

@@ -1,5 +1,5 @@
 // Need to use the React-specific entry point to import createApi
-import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQuery } from "./token.serivce";
 
 // Define a service using a base URL and expected endpoints
@@ -48,4 +48,5 @@ export const {
   useGetBankDepositMasterQuery,
   useApproveBankDepositRequestMutation,
   useRejectbankDepositRequestMutation,
+  useCreateBankDepositReversalRequestMutation,
 } = bankDepositRequestMaster;