Refactor DeletionRequestApprove component to include refetch functionality and improve error handling

Merge branch 'sprint10/reversal' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into sprint10/reversal
[ deletion request modal bugs ]
2025-01-20 20:13:30 +05:30 · 2025-01-20 19:36:56 +05:30 · 2025-01-20 19:35:58 +05:30 · 2025-01-20 18:40:20 +05:30 · 2025-01-20 18:07:09 +05:30 · 2025-01-20 18:04:55 +05:30
10 changed files with 176 additions and 92 deletions
--- a/src/Components/Popups/ConfirmReversalPopups.jsx
+++ b/src/Components/Popups/ConfirmReversalPopups.jsx
@@ -29,6 +29,7 @@ export const conformModalSchema = yup.object().shape({
    .string()
    .min(2, "Minimum length should be 2 characters.")
    .max(150, "Maximum length should be 150 characters.")
+    // .matches(/^[^\d]+$/, "Sponsor Name cannot contain numbers")
    .required("Comment is required"),
  subject: yup.string().notRequired(),
  emailTemplate: yup.string().notRequired(),
@@ -58,6 +59,13 @@ const ConfirmReversalPopups = ({
    setValue("emailTemplate", richTextValue);
  }, [richTextValue]);

+   // Reset the form when the modal closes
+   useEffect(() => {
+    if (!isOpen) {
+      reset(); // Clear the form state
+    }
+  }, [isOpen, reset]);
+
  const [emailApproval, setEmailApproval] = useBoolean(false);

  const modules = {
--- a/src/Components/Popups/InitiateReversalPopups.jsx
+++ b/src/Components/Popups/InitiateReversalPopups.jsx
@@ -13,7 +13,7 @@ import {
  Text,
  Textarea,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";

 import * as yup from "yup";
@@ -25,6 +25,7 @@ export const conformModalSchema = yup.object().shape({
    .string()
    .min(2, "Minimum length should be 2 characters.")
    .max(150, "Maximum length should be 150 characters.")
+    // .matches(/^[^\d]+$/, "Sponsor Name cannot contain numbers")
    .required("Comment is required"),
 });

@@ -45,6 +46,13 @@ const InitiateReversalPopup = ({
    mode: "all",
  });

+    // Reset the form when the modal closes
+    useEffect(() => {
+      if (!isOpen) {
+        reset(); // Clear the form state
+      }
+    }, [isOpen, reset]);
+
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
--- a/src/Components/Popups/RejectReversalPopups.jsx
+++ b/src/Components/Popups/RejectReversalPopups.jsx
@@ -13,7 +13,7 @@ import {
  Text,
  Textarea,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { useEffect } from "react";
 import PropTypes from "prop-types";

 import * as yup from "yup";
@@ -25,6 +25,7 @@ export const conformModalSchema = yup.object().shape({
    .string()
    .min(2, "Minimum length should be 2 characters.")
    .max(150, "Maximum length should be 150 characters.")
+    // .matches(/^[^\d]+$/, "Sponsor Name cannot contain numbers")
    .required("Comment is required"),
 }); 

@@ -45,6 +46,13 @@ const RejectReversalPopups = ({
    mode: "all",
  });

+   // Reset the form when the modal closes
+   useEffect(() => {
+    if (!isOpen) {
+      reset(); // Clear the form state
+    }
+  }, [isOpen, reset]);
+
  return (
    <Modal isOpen={isOpen} onClose={onClose}>
      <ModalOverlay />
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -259,21 +259,21 @@ const DashboardLayout = ({ isOnline }) => {
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Withdrawal pending request
+            Withdrawal Pending Request
          </span>
        );
      case path.startsWith("/withdraw-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
-            Withdrawal request
+            Withdrawal Request
          </span>
        );
      case path.startsWith("/investor-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Investor pending request
+            Investor Pending Request
          </span>
        );
      case path.startsWith("/investor-history"):
@@ -287,14 +287,14 @@ const DashboardLayout = ({ isOnline }) => {
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Deletion pending request
+            Deletion Pending Request
          </span>
        );
      case path.startsWith("/deletion-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
-            Deletion request
+            Deletion Request
          </span>
        );

@@ -302,7 +302,7 @@ const DashboardLayout = ({ isOnline }) => {
        return (
          <span className="d-flex align-items-end gap-2">
            <RiBankLine className="h4 m-0 fw-normal" />
-            Bank Deposit Request
+            Reversal Transaction / Deposit Request
          </span>
        );
      case path.startsWith("/reversal-fawateer-deposit"):
@@ -366,7 +366,7 @@ const DashboardLayout = ({ isOnline }) => {
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Deletion pending request
+            Deletion Pending Request
          </span>
        );
      case path.startsWith("/deletion-history"):
@@ -380,7 +380,7 @@ const DashboardLayout = ({ isOnline }) => {
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
-            Deletion pending request
+            Deletion Pending Request
          </span>
        );
      case path.startsWith("/deletion-history"):
@@ -733,6 +733,7 @@ const DashboardLayout = ({ isOnline }) => {
                  } else if (type === "single") {
                    return (
                      <Tooltip
+                        isDisabled={isDrawerOpen || openDrawerClick}
                        hasArrow
                        bg={"#fff"}
                        fontSize={"xs"}
--- a/src/Pages/AccountDeletion/DeletionRequest.jsx
+++ b/src/Pages/AccountDeletion/DeletionRequest.jsx
@@ -91,17 +91,17 @@ const DeletionRequest = () => {
  // ====================================================[Table Setup]================================================================
  const tableHeadRow = [
    "Sr No.",
-    "Requested on",
+    "Requested On",
    "Client ID",
-    "First name",
-    "Last name",
+    "First Name",
+    "Last Name",
    "Country",
-    "Phone number",
+    "Phone Number",
    "Status",
    "Action"
  ];

-  const extractedArray = filteredData?.map((item, index) => ({
+  const extractedArray = data?.data?.rows?.map((item, index) => ({
    id: item?.id,
    "Sr No.": (
      <Text
@@ -114,7 +114,7 @@ const DeletionRequest = () => {
        {index + 1}.
      </Text>
    ),
-    "Requested on": (
+    "Requested On": (
      <Text
        justifyContent={"left"}
        as={"span"}
@@ -136,7 +136,7 @@ const DeletionRequest = () => {
        {item?.clientId}
      </Text>
    ),
-    "First name": (
+    "First Name": (
      <Text
        justifyContent={"left"}
        as={"span"}
@@ -148,7 +148,7 @@ const DeletionRequest = () => {
        {/* {formatDate(item.charge)} */}
      </Text>
    ),
-    "Last name": (
+    "Last Name": (
      <Text
        justifyContent={"left"}
        as={"span"}
@@ -171,7 +171,7 @@ const DeletionRequest = () => {
      </Text>
    ),

-    "Phone number": (
+    "Phone Number": (
      <Text
        justifyContent={"left"}
        as={"span"}
--- a/src/Pages/AccountDeletion/DeletionRequestApprove.jsx
+++ b/src/Pages/AccountDeletion/DeletionRequestApprove.jsx
@@ -3,6 +3,7 @@ import {
  Box,
  Button,
  FormControl,
+  FormHelperText,
  FormLabel,
  Input,
  Modal,
@@ -21,60 +22,78 @@ import React, { useEffect, useState } from "react";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
-import { useGetDepositRequestByIdQuery, useGetDepositRequestQuery, useUpdateDepositRequestMutation } from "../../Services/deposit.request.service";
+import {
+  useGetDepositRequestByIdQuery,
+  useGetDepositRequestQuery,
+  useUpdateDepositRequestMutation,
+} from "../../Services/deposit.request.service";
 import FullscreenLoaders from "../../Components/Loaders/FullscreenLoaders";
 import ToastBox from "../../Components/ToastBox";
 import { useGetDrawalRequestQuery } from "../../Services/drawal.request.service";
-import { useApproveDepositRequestMutation, useGetDeleteRequestByIdQuery } from "../../Services/delete.request.service";
+import {
+  useApproveDepositRequestMutation,
+  useGetDeleteRequestByIdQuery,
+  useGetDeleteRequestQuery,
+} from "../../Services/delete.request.service";

 const FILE_TYPES = ["image/jpeg", "image/png", "image/gif"];

+// export const conformModalSchema = yup.object().shape({
+//   adminComment: yup.string().notRequired(),
+// });
+
 export const conformModalSchema = yup.object().shape({
  adminComment: yup.string().notRequired(),
 });

-const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestData }) => {
-  const toast = useToast()
+const DeletionRequestApprove = ({
+  isOpen,
+  onClose,
+  firstField,
+  id,
+  data: requestData,
+}) => {
+  const toast = useToast();
  const [file, setFile] = useState();
-  const [isBtnLoading , setIsBtnLoading] = useState(false)
-  const [isBtnLoadingReject , setIsBtnLoadingReject] = useState(false)
-  const [isReject , setIsReject] = useState(false)
+  const [isBtnLoading, setIsBtnLoading] = useState(false);
+  const [isBtnLoadingReject, setIsBtnLoadingReject] = useState(false);
+  const [isReject, setIsReject] = useState(false);

-  const fileredData = requestData?.find((item)=> item?.id === id)
-  const [ updateApproveRequest ] = useApproveDepositRequestMutation()
+  const fileredData = requestData?.find((item) => item?.id === id);
+  const [updateApproveRequest] = useApproveDepositRequestMutation();
  const { data, isLoading } = useGetDeleteRequestByIdQuery(id, {
    skip: !id,
  });

-
  const {
    register,
    reset,
+    watch,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(conformModalSchema),
+    mode: "all",
  });

+  const { refetch } = useGetDeleteRequestQuery();
+
  useEffect(() => {
    reset({
-      comment:fileredData?.comment
-    })
-  
-   
-  }, [requestData, id])
+      comment: fileredData?.comment,
+    });
+  }, [requestData, id]);

  const onSubmit = async (data) => {
-    setIsBtnLoading(isReject?false:true)
-    setIsBtnLoadingReject(isReject)
+    setIsBtnLoading(isReject ? false : true);
+    setIsBtnLoadingReject(isReject);
    const approveReq = {
      adminComment: data?.adminComment,
-      deletionStatus: isReject?"Reject": "Approved"
-    }
+      deletionStatus: isReject ? "Reject" : "Approved",
+    };

    try {
-    const res = await updateApproveRequest({ id ,data:approveReq })
-
+      const res = await updateApproveRequest({ id, data: approveReq });

      if (res?.error) {
        toast({
@@ -82,27 +101,20 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
            <ToastBox message={res?.error?.data?.message} status={"error"} />
          ),
        });
-      heandleOnClose()
+        heandleOnClose();
      } else if (res?.data?.statusCode === 200) {
        toast({
-        render: () => (
-          <ToastBox message={res?.data?.message} />
-        ),
+          render: () => <ToastBox message={res?.data?.message} />,
        });
-      heandleOnClose()
+        refetch();
+        heandleOnClose();
      }
-    
    } catch (error) {
- 
+      console.log(error);
    }
-
  };

-  const onReject = () => {
-
-  }
-
-
+  const onReject = () => {};

  useEffect(() => {
    if (data) {
@@ -113,15 +125,19 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
  }, [data, reset]);

  const heandleOnClose = () => {
-    reset()
-    onClose()
-    setIsBtnLoading(false)
-    setIsReject(false)
-    setIsBtnLoadingReject(false)
-  }
+    reset();
+    onClose();
+    setIsBtnLoading(false);
+    setIsReject(false);
+    setIsBtnLoadingReject(false);
+  };

  return (
-    <Modal isOpen={isOpen} onClose={heandleOnClose} initialFocusRef={firstField}>
+    <Modal
+      isOpen={isOpen}
+      onClose={heandleOnClose}
+      initialFocusRef={firstField}
+    >
      <ModalOverlay />

      <ModalContent pb={4}>
@@ -133,7 +149,10 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
          <Box as="form" onSubmit={handleSubmit(onSubmit)}>
            <ModalBody>
              <FormControl mt={6} mb={4}>
-                <FormLabel fontSize="sm">Investor Comment <Badge colorScheme="green">{fileredData?.currencyCode}</Badge></FormLabel>
+                <FormLabel fontSize="sm">
+                  Investor Comment{" "}
+                  <Badge colorScheme="green">{fileredData?.currencyCode}</Badge>
+                </FormLabel>
                {/* <Textarea
                  focusBorderColor="green.400"
                  name="comment"
@@ -150,8 +169,9 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
                  </Text>
                )} */}

-
-                <Text fontSize="sm" fontWeight={500} color={'gray.600'}>{data?.data?.comment}</Text>
+                <Text fontSize="sm" fontWeight={500} color={"gray.600"}>
+                  {data?.data?.comment}
+                </Text>
              </FormControl>
              <FormControl mb={4} isRequired>
                <FormLabel fontSize="sm">Admin Comment</FormLabel>
@@ -163,14 +183,22 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
                  fontSize="sm"
                  type="textarea"
                  size="sm"
-                  placeholder={"Enter your comments...."}
+                  placeholder={"Enter your comment...."}
                  resize={"none"}
+                  mb={2}
                />
                {errors.adminComment && (
                  <Text fontSize="xs" color="red">
                    {errors.adminComment.message}
                  </Text>
                )}
+                <FormHelperText fontSize="xs" color="gray.500">
+                  <Text as={"span"} me={2}>
+                    {" "}
+                    Maximum length should be 200 characters. You have entered
+                  </Text>
+                  {watch("adminComment")?.length || 0} characters.
+                </FormHelperText>
              </FormControl>
            </ModalBody>
            <ModalFooter>
@@ -180,9 +208,10 @@ const DeletionRequestApprove = ({ isOpen, onClose, firstField, id, data:requestD
                type="submit"
                size={"sm"}
                rounded={"sm"}
-                variant={'ghost'}
+                variant={"ghost"}
                onClick={() => setIsReject(true)}
                isLoading={isBtnLoadingReject}
+                fontWeight={500}
              >
                Reject
              </Button>
--- a/src/Pages/FawateerChecker/ApproveRequest/RequestApproveModal.jsx
+++ b/src/Pages/FawateerChecker/ApproveRequest/RequestApproveModal.jsx
@@ -104,6 +104,12 @@ const RequestApproveModal = ({ isOpen, onClose, firstField ,id}) => {
    }
  }, [data, reset]);

+  useEffect(() => {
+    if (!isOpen) {
+      reset(); 
+    }
+  }, [isOpen, reset]);
+
  const heandleOnClose = () =>{
    reset()
    onClose() 
--- a/src/Pages/FawateerChecker/ApproveRequest/RequestRejectModal.jsx
+++ b/src/Pages/FawateerChecker/ApproveRequest/RequestRejectModal.jsx
@@ -2,6 +2,7 @@ import {
  Box,
  Button,
  FormControl,
+  FormHelperText,
  FormLabel,
  Input,
  Modal,
@@ -24,8 +25,18 @@ import { useDepositRejectMutation } from "../../../Services/deposit.request.serv
 import ToastBox from "../../../Components/ToastBox";
 import { useRejectCommentMutation } from "../../../Services/fawateer.request.service";

+// export const conformModalSchema = yup.object().shape({
+//   comments: yup.string().required("Comment is required")
+//   .max(200, "Approve Comment cannot be more than 200 characters"),
+// });
+
 export const conformModalSchema = yup.object().shape({
-  comments: yup.string().required("Comment is required"),
+  // checkerComment: yup.string().required("Comment is required")
+  // .max(50, "Investment name cannot be more than 50 characters"),
+  comments: yup
+  .string()
+  .required("Comment is required")
+  .max(200, "Approve Comment cannot be more than 200 characters"),
 });

 const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
@@ -36,12 +47,20 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
  const {
    register,
    reset,
+    watch,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(conformModalSchema),
  });

+  useEffect(() => {
+    if (!isOpen) {
+      reset(); // Clear the form state
+    }
+  }, [isOpen, reset]);
+
+
  const [ rejectFawateer ] = useRejectCommentMutation()
  

@@ -126,12 +145,17 @@ const RequestRejectModal = ({ isOpen, onClose, firstField ,id}) => {
                placeholder={"Enter your comments...."}
                rounded={"md"}
                resize={"none"}
+                maxLength={200}
              />
              {errors.comments && (
                <Text fontSize="xs" color="red">
                  {errors.comments.message}
                </Text>
              )}
+              <FormHelperText fontSize="xs" color="gray.500">
+                Maximum length should be 200 characters. You have entered
+                <Text as={'span'} ml={2}>{watch("comments")?.length || 0} </Text>characters.
+              </FormHelperText>
            </FormControl>
          </ModalBody>
          <ModalFooter>
--- a/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx
+++ b/src/Pages/WithDrawal/DrawalView/ViewHistory.jsx
@@ -133,7 +133,7 @@ const ViewHistory = () => {
    "Status",
  ];

-  const extractedArray = filteredData?.map((item, index) => ({
+  const extractedArray = data?.data?.rows?.map((item, index) => ({
    // id: item?.id,
    "Sr.no": (
      <Text
--- a/src/Routes/Nav.js
+++ b/src/Routes/Nav.js
@@ -109,7 +109,7 @@ export const nav = [
    title: "Fawateer Deposit",
    submenu: [
      {
-        title: "Aprover Request",
+        title: "Approver Request",
        path: "/fawateer",
        icon: RiMoneyDollarBoxLine,
      },
Author	SHA1	Message	Date
Swapnil Bendal	f2d8aee6a9	Refactor DeletionRequestApprove component to include refetch functionality and improve error handling	2025-01-20 20:13:30 +05:30
YasinShaikh123	a108dcdb17	Merge branch 'sprint10/reversal' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into sprint10/reversal	2025-01-20 19:36:56 +05:30
YasinShaikh123	41a1bde62b	[ deletion request modal bugs ]	2025-01-20 19:35:58 +05:30
Swapnil Bendal	efddfe6d7a	Fix data extraction in DeletionRequest component to use correct data structure	2025-01-20 18:40:20 +05:30
Swapnil Bendal	abe9b14436	Add validation mode to form and adjust comment input margin	2025-01-20 18:07:09 +05:30
Swapnil Bendal	f31b67f676	Enhance comment validation in deletion request approval and refactor code for clarity	2025-01-20 18:04:55 +05:30
YasinShaikh123	066e2fc169	[ bud update 🔥 ]	2025-01-20 17:26:42 +05:30
YasinShaikh123	2892334e41	[ bug fixing done]	2025-01-20 16:56:31 +05:30
YasinShaikh123	103959b40b	Merge branch 'sprint10/reversal' of http://git.wdipl.com/Siddhesh.More/tanami-admin-panel into sprint10/reversal	2025-01-20 15:06:33 +05:30
YasinShaikh123	714804fdd6	[ Bug Fixing 👍 ]	2025-01-20 15:05:39 +05:30