cancel request

src/components/wallet/wallet-address.tsx

@@ -6,7 +6,7 @@ import { Controller, SubmitHandler, useForm } from "react-hook-form"
 import { CardBank, SendWithdraw } from "../../types"
 import { ErrorComponent } from "../common/error"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { sendwithdraw } from "../../services/api/wallet"
+import { cancelWithdraw, sendwithdraw } from "../../services/api/wallet"
 import toast from "react-hot-toast"
 import { handleError } from "../../utility/error-handle"
 import { Input } from "../common/input"
@@ -25,6 +25,11 @@ export const WalletAddress: FC<Props> = ({ pending, walletBalance }) => {
         mutationKey: ["withdraw"]
     })
 
+    const { mutate: cancelWithdrawMutation, isPending: isCancelPending } = useMutation({
+        mutationFn: cancelWithdraw,
+        mutationKey: ["cancel-withdraw"]
+    })
+
     const [price, setPrice] = useState<string>('')
     const { handleSubmit, formState: { errors }, control, watch } = useForm<any>({
     })
@@ -86,8 +91,20 @@ export const WalletAddress: FC<Props> = ({ pending, walletBalance }) => {
             }
         }
     }
+
+    const handleCancelWithdraw = async () => {
+        await cancelWithdrawMutation(undefined, {
+            onSuccess: () => {
+                toast.success("درخواست برداشت با موفقیت لغو شد")
+                queryClient.invalidateQueries({ queryKey: ["wallet"] })
+                setPrice('')
+            },
+            onError: (err: any) => handleError(err)
+        })
+    }
+
     return (
-        <form onSubmit={handleSubmit(handleSendWithdraw)} className="w-full flex flex-col lg:flex-row bg-auth-form p-[30px] rounded-[40px] gap-8">
+        <form onSubmit={handleSubmit(pending ? handleCancelWithdraw : handleSendWithdraw)} className="w-full flex flex-col lg:flex-row bg-auth-form p-[30px] rounded-[40px] gap-8">
             <div className="w-full h-full flex items-center justify-center">
                 <img src="/svgs/dashboard/wallet.svg" alt="wallet" className="size-full max-w-[500px] max-h-[500px]" />
             </div>

src/services/api/wallet.ts

@@ -1,6 +1,10 @@
-
 import axiosInstance from "../axios";
 import { OverviewResponse } from "./overview";
 
-export const getWalletDetails = () => axiosInstance.get<OverviewResponse[] | OverviewResponse | [], any>("/gps/overview/wallet")
-export const sendwithdraw = (payload: any) => axiosInstance.post("/gps/withdraw", payload)
+export const getWalletDetails = () =>
+  axiosInstance.get<OverviewResponse[] | OverviewResponse | [], any>(
+    "/gps/overview/wallet"
+  );
+export const sendwithdraw = (payload: any) =>
+  axiosInstance.post("/gps/withdraw", payload);
+export const cancelWithdraw = () => axiosInstance.delete("/gps/withdraw");