integrated partiallly payment gatway , in this changes handle if payment suucess, fail and close - response

src/components/UserSubscription/ProcessedPayment.jsx

@@ -54,12 +54,12 @@ const ProcessedPayment = ({
 
   const { mutate: MakePayment, isPending } = useMakePayment(
     (response) => {
-      debugger
+   
       unblockUI();
       onNext(response);
     },
     (fail) => {
-      debu
+ 
       unblockUI();
       setFailPayment(fail);
       onNext(fail);

src/components/UserSubscription/SubscriptionForm.jsx

@@ -237,7 +237,7 @@ const SubscriptionForm = ({ currentStep, setCurrentStep, setStepStatus }) => {
                     className="btn btn-label-primary d-flex align-items-center me-2"
                   >
                     {isPending ? (
-                      <span><i class='bx bx-loader-alt bx-md bx-spin me-2'></i>Please Wait...</span>
+                      <span><i className='bx bx-loader-alt bx-md bx-spin me-2'></i>Please Wait...</span>
                     ) : (
                       <>
                         <span className="me-1">Next</span>

src/hooks/usePayment.jsx

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { PaymentRepository } from "../repositories/PaymentRepository";
 import showToast from "../services/toastService";
 import { useSelector } from "react-redux";
-import { blockUI } from "../utils/blockUI";
+import { blockUI, unblockUI } from "../utils/blockUI";
 
 export const removeRazorpayArtifacts=()=> {
   try {
@@ -85,13 +85,10 @@ export const useMakePayment = (
   const { tenantEnquireId, planId } = useSelector(
     (store) => store.localVariables.selfTenant
   );
+
   const { mutate: verifyPayment } = useVerifyPayment(
-    (response) => {
+    (response) => onSuccessCallBack?.(response),
-      if (onSuccessCallBack) onSuccessCallBack(response);
+    (error) => onFailureCallBack?.(error)
-    },
-    (error) => {
-      if (onFailureCallBack) onFailureCallBack(error);
-    }
   );
 
   return useMutation({
@@ -106,6 +103,8 @@ export const useMakePayment = (
         return;
       }
 
+      let manuallyClosed = false;
+
       const options = {
         key,
         amount: (currentPlan?.amount ?? 1) * 100,
@@ -114,10 +113,15 @@ export const useMakePayment = (
         order_id: orderId,
 
         handler: async (response) => {
+          if (manuallyClosed) {
+            unblockUI()
+            return;
+          } 
+
           try {
             const payload = {
-              tenantEnquireId: tenantEnquireId,
+              tenantEnquireId,
-              planId: planId,
+              planId,
               orderId: response.razorpay_order_id,
               paymentId: response.razorpay_payment_id,
               signature: response.razorpay_signature,
@@ -138,46 +142,33 @@ export const useMakePayment = (
 
         modal: {
           ondismiss: () => {
-            if (onFailureCallBack) {
+            manuallyClosed = true; 
-              onFailureCallBack({
+            unblockUI();
-                status: "failed",
-                message: "Payment was cancelled before completion.",
-                reason: "popup_closed",
-              });
-            }
             closeRazorpayPopup();
           },
         },
       };
 
       try {
-        setTimeout(() => {
         const razorpay = new window.Razorpay(options);
 
         razorpay.on("payment.failed", (response) => {
-            if (onFailureCallBack) {
+          if (manuallyClosed) return; 
-              onFailureCallBack({
+          onFailureCallBack?.({
             status: "failed",
             message: response.error?.description || "Payment failed.",
             error: response.error,
             reason: "transaction_failed",
           });
-            }
           closeRazorpayPopup();
         });
 
-          try {
+        blockUI("Please Wait...");
-           blockUI("Please Wait...")
         razorpay.open();
       } catch (err) {
         alert("This browser is not supported. Please try another browser.");
         closeRazorpayPopup();
       }
-        }, 300);
-      } catch (err) {
-        alert("This browser is not supported. Please try another browser.");
-        closeRazorpayPopup();
-      }
     },
 
     onError: (error) => {

src/pages/Home/MakeSubscription.jsx

@@ -8,7 +8,7 @@ import SelectPlan from "../../components/UserSubscription/SelectPlan";
 import Review from "../../components/UserSubscription/Review";
 
 const MakeSubscription = () => {
-  const [currentStep, setCurrentStep] = useState(4);
+  const [currentStep, setCurrentStep] = useState(1);
   const [responsePayment, setResponsePayment] = useState(null);
 
   const [stepStatus, setStepStatus] = useState({
@@ -23,18 +23,20 @@ const MakeSubscription = () => {
     setResponsePayment(resp);
     if (resp?.success) {
       setStepStatus((prev) => ({ ...prev, 4: "success" }));
-      setCurrentStep(3);
+      setCurrentStep(5);
     } else {
       setStepStatus((prev) => ({ ...prev, 4: "failed" }));
     }
   };
-const handleNext = () => {
+  const handleNext = () => {
     setStepStatus((prev) => ({
       ...prev,
+      [currentStep]: "success",
       [currentStep + 1]: "pending",
     }));
+
     setCurrentStep((prev) => prev + 1);
-};
+  };
 
   const checkOut_Steps = [
     {
@@ -62,7 +64,6 @@ const handleNext = () => {
       component: () => (
         <ProcessedPayment
           onNext={(resp) => handleVerification(resp)}
-         
           resetPaymentStep={() =>
             setStepStatus((prev) => ({ ...prev, 4: "pending" }))
           }
@@ -80,7 +81,6 @@ const handleNext = () => {
       component: () => (
         <ProcessedPayment
           onNext={(resp) => handleVerification(resp)}
-         
           resetPaymentStep={() =>
             setStepStatus((prev) => ({ ...prev, 4: "pending" }))
           }
@@ -97,7 +97,9 @@ const handleNext = () => {
       name: "Verified",
       component: () => (
         <VerifiedPayment
-          onNext={(prev) => ({ ...prev, 4: "success" })}
+          onNext={() => {
+            setStepStatus((prev) => ({ ...prev, 5: "success" }))
+          }}
           responsePayment={responsePayment}
         />
       ),