Add account deletion reversal functionality and update DeletionHistory component
This commit is contained in:
Swapnil Bendal
@@ -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}.
|
||||
</Text>
|
||||
@@ -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)}
|
||||
</Text>
|
||||
@@ -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}
|
||||
</Text>
|
||||
@@ -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}
|
||||
</Text>
|
||||
),
|
||||
"Country": (
|
||||
<Text
|
||||
Country: (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item.country}
|
||||
</Text>
|
||||
),
|
||||
"Phone Number": (
|
||||
<Text
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "left"}
|
||||
as={"span"}
|
||||
color={"gray.600"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
fontWeight={'500'}
|
||||
fontWeight={"500"}
|
||||
>
|
||||
{item.phoneNumber}
|
||||
</Text>
|
||||
),
|
||||
"Status": (
|
||||
<Text
|
||||
Status: (
|
||||
<Text
|
||||
justifyContent={slideFromRight ? "right" : "center"}
|
||||
as={"span"}
|
||||
color={item?.deletionStatus? "red.500": "blue.500"}
|
||||
color={item?.deletionStatus === "Approved" ? "red.500" : "blue.500"}
|
||||
className="d-flex align-items-center web-text-small"
|
||||
|
||||
fontWeight={'600'}
|
||||
fontWeight={"600"}
|
||||
>
|
||||
{item.deletionStatus}
|
||||
</Text>
|
||||
),
|
||||
"Reversal Action": (
|
||||
<Box w={"120px"} isTruncated={true} cursor={"pointer"}>
|
||||
{item.deletionStatus === "Approved" ? (
|
||||
<Text
|
||||
as={"span"}
|
||||
color={!item.isReversal ? "green.500" : "#FFBB00"}
|
||||
fontWeight={700}
|
||||
>
|
||||
{!item.isReversal ? (
|
||||
<Button
|
||||
onClick={() => {
|
||||
onOpenInRev(); // Call the function
|
||||
setReversalId(item.id);
|
||||
}}
|
||||
colorScheme="teal"
|
||||
size="xs"
|
||||
variant="outline"
|
||||
>
|
||||
Initiate Reversal
|
||||
</Button>
|
||||
) : (
|
||||
"Under process"
|
||||
)}
|
||||
</Text>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</Box>
|
||||
),
|
||||
}));
|
||||
|
||||
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: () => (
|
||||
<ToastBox message={responseData?.message || "Action successful!"} />
|
||||
),
|
||||
});
|
||||
onCloseInRev();
|
||||
} 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}>
|
||||
<Box bg="white.500">
|
||||
@@ -244,6 +323,12 @@ const DeletionHistory = () => {
|
||||
alertHandler={handleDelete}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
<InitiateReversalPopup
|
||||
onClose={onCloseInRev}
|
||||
isOpen={isOpenInRev}
|
||||
handelApproved={handleApproved}
|
||||
isLoading={isReversalLoading}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user