From ba06bf28c00faf4139a5c1ee81c1ee285bfa1917 Mon Sep 17 00:00:00 2001 From: Swapnil Bendal <84583651+Swapnil155@users.noreply.github.com> Date: Fri, 17 Jan 2025 16:19:35 +0530 Subject: [PATCH] Add account deletion reversal functionality and update DeletionHistory component --- src/Pages/AccountDeletion/DeletionHistory.jsx | 171 +++++++++++++----- .../reversal.account.deletion.service.js | 38 +++- 2 files changed, 162 insertions(+), 47 deletions(-) diff --git a/src/Pages/AccountDeletion/DeletionHistory.jsx b/src/Pages/AccountDeletion/DeletionHistory.jsx index 1108499..48c5c01 100644 --- a/src/Pages/AccountDeletion/DeletionHistory.jsx +++ b/src/Pages/AccountDeletion/DeletionHistory.jsx @@ -7,6 +7,8 @@ import { Input, Text, Tooltip, + useBoolean, + useDisclosure, useToast, } from "@chakra-ui/react"; import React, { useContext, useEffect, useState } from "react"; @@ -19,25 +21,36 @@ import { formatDate } from "../../Components/Functions/UTCConvertor"; import { CheckIcon, CloseIcon } from "@chakra-ui/icons"; import { useGetDeleteHistoryQuery } from "../../Services/delete.request.service"; import { TABLE_PAGINATION } from "../../Constants/Paginations"; +import InitiateReversalPopup from "../../Components/Popups/InitiateReversalPopups"; +import ToastBox from "../../Components/ToastBox"; +import { useCreateAccountDeletionReversalRequestMutation } from "../../Services/reversal.account.deletion.service"; // import { formatDate } from "../../Components/Functions/UTCConvertor"; const DeletionHistory = () => { const toast = useToast(); - const { slideFromRight, setDeleteHistory } = - useContext(GlobalStateContext); + const { slideFromRight, setDeleteHistory } = useContext(GlobalStateContext); const [deleteAlert, setDeleteAlert] = useState(false); const [actionId, setActionId] = useState(false); const [mouseEntered, setMouseEntered] = useState(false); const [mouseEnteredId, setMouseEnteredId] = useState(""); - - - // =========================== [Use State] ============================= + // =========================== [Use State] ============================= const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size); const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page); const [searchTerm, setSearchTerm] = useState(""); const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(""); + const [reversalId, setReversalId] = useState(); + const { + isOpen: isOpenInRev, + onOpen: onOpenInRev, + onClose: onCloseInRev, + } = useDisclosure(); + const [isReversalLoading, setIsReversalLoading] = useBoolean(); + + const [createAccountDeletionReversalRequest] = + useCreateAccountDeletionReversalRequestMutation(); + // Debounce the search term to avoid making a request on every keystroke useEffect(() => { const handler = setTimeout(() => { @@ -48,33 +61,33 @@ const DeletionHistory = () => { }; }, [searchTerm]); - const { data: deleteHistory, isLoading, - refetch - } = useGetDeleteHistoryQuery({ - page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search - size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search - search: debouncedSearchTerm, - }, - { - skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request - }) + refetch, + } = useGetDeleteHistoryQuery( + { + page: debouncedSearchTerm ? undefined : currentPage, // Omit pagination for search + size: debouncedSearchTerm ? undefined : pageSize, // Omit pagination for search + search: debouncedSearchTerm, + }, + { + skip: debouncedSearchTerm === "" && searchTerm !== "", // Skip if search is empty and it's not the initial request + } + ); const formatDate = (date) => { - return new Date(date).toLocaleDateString('en-GB', { - day: '2-digit', - month: '2-digit', - year: 'numeric', + return new Date(date).toLocaleDateString("en-GB", { + day: "2-digit", + month: "2-digit", + year: "numeric", }); }; - // Use useEffect to refetch data when the component mounts - useEffect(() => { - refetch(); -}, [refetch]); - + // Use useEffect to refetch data when the component mounts + useEffect(() => { + refetch(); + }, [refetch]); // ====================================================[Table Setup]================================================================ const tableHeadRow = [ @@ -85,7 +98,8 @@ const DeletionHistory = () => { "Last Name", "Country", "Phone Number", - "Status" + "Status", + "Reversal Action", ]; const extractedArray = deleteHistory?.data?.rows?.map((item, index) => ({ @@ -96,7 +110,7 @@ const DeletionHistory = () => { as={"span"} color={"gray.800"} className="d-flex align-items-center web-text-small" - fontWeight={'500'} + fontWeight={"500"} > {index + 1}. @@ -107,7 +121,7 @@ const DeletionHistory = () => { as={"span"} color={"gray.600"} className="d-flex align-items-center web-text-small" - fontWeight={'500'} + fontWeight={"500"} > {formatDate(item.Requested_on)} @@ -118,7 +132,7 @@ const DeletionHistory = () => { as={"span"} color={"gray.600"} className="d-flex align-items-center web-text-small" - fontWeight={'500'} + fontWeight={"500"} > {item.clientId} @@ -129,7 +143,7 @@ const DeletionHistory = () => { as={"span"} color={"gray.800"} className="d-flex align-items-center web-text-small" - fontWeight={'500'} + fontWeight={"500"} > {item.firstName} {/* {formatDate(item.charge)} */} @@ -141,51 +155,77 @@ const DeletionHistory = () => { as={"span"} color={"gray.800"} className="d-flex align-items-center web-text-small" - fontWeight={'500'} + fontWeight={"500"} > {item.lastName} ), - "Country": ( - {item.country} ), "Phone Number": ( - {item.phoneNumber} ), - "Status": ( - {item.deletionStatus} ), + "Reversal Action": ( + + {item.deletionStatus === "Approved" ? ( + + {!item.isReversal ? ( + + ) : ( + "Under process" + )} + + ) : ( + "" + )} + + ), })); const handleDelete = () => { - const deleteHistory = sponser.filter( - (sponsor) => sponsor.id !== actionId - ); + const deleteHistory = sponser.filter((sponsor) => sponsor.id !== actionId); setTimeout(() => { setSponser(deleteHistory); @@ -195,6 +235,45 @@ const DeletionHistory = () => { setIsLoading(true); }; + const handleApproved = async (data) => { + setIsReversalLoading.on(); // Start loading + try { + const { error, data: responseData } = + await createAccountDeletionReversalRequest({ + id: reversalId, + data, + }); + + if (error) { + throw error; // Explicitly handle the error + } + + // Success: Perform necessary actions + refetch(); + toast({ + render: () => ( + + ), + }); + onCloseInRev(); + } catch (error) { + // Handle errors + toast({ + render: () => ( + + ), + }); + console.error("Error:", error); + } finally { + setIsReversalLoading.off(); // Ensure loading is toggled off + } + }; + return ( @@ -244,6 +323,12 @@ const DeletionHistory = () => { alertHandler={handleDelete} isLoading={isLoading} /> + ); }; diff --git a/src/Services/reversal.account.deletion.service.js b/src/Services/reversal.account.deletion.service.js index 068150e..66100d0 100644 --- a/src/Services/reversal.account.deletion.service.js +++ b/src/Services/reversal.account.deletion.service.js @@ -6,7 +6,7 @@ import { baseQuery } from "./token.serivce"; export const reversalAccountDeletionMaster = createApi({ reducerPath: "accountDeletion", baseQuery: baseQuery, - tagTypes: ["getAccountDeletion"], + tagTypes: ["getAccountDeletion", "getHistory"], endpoints: (builder) => ({ // ======[Get All]===== @@ -14,9 +14,39 @@ export const reversalAccountDeletionMaster = createApi({ query: () => `/reversal-transactions/account-deletion/getAll`, providesTags: ["getAccountDeletion"], }), + + approveAccountDeletionRequest: builder.mutation({ + query: ({ id, data }) => ({ + url: `/reversal-transactions/account-deletion/approve/${id}`, + method: "PATCH", + body: data, + }), + invalidatesTags: ["getAccountDeletion", "getHistory"], + }), + + createAccountDeletionReversalRequest: builder.mutation({ + query: ({ id, data }) => ({ + url: `/reversal-transactions/account-deletion/create/${id}`, + method: "POST", + body: data, + }), + invalidatesTags: ["getAccountDeletion", "getHistory"], + }), + + rejectAccountDeletionRequest: builder.mutation({ + query: ({ id, data }) => ({ + url: `/reversal-transactions/account-deletion/reject/${id}`, + method: "PATCH", + body: data, + }), + invalidatesTags: ["getAccountDeletion", "getHistory"], + }), }), }); -export const { - useGetAccountDeletionMasterQuery, - } = reversalAccountDeletionMaster; +export const { + useGetAccountDeletionMasterQuery, + useCreateAccountDeletionReversalRequestMutation, + useApproveAccountDeletionRequestMutation, + useRejectAccountDeletionRequestMutation +} = reversalAccountDeletionMaster;