handle deep render error

src/components/UserSubscription/ProcessedPayment.jsx

@@ -84,6 +84,11 @@ const ProcessedPayment = ({
     setFailPayment(null);
     if (typeof resetPaymentStep === "function") resetPaymentStep();
   };
+  const handlPrevious=()=>{
+    setCurrentStep,
+     setStepStatus((prev) => ({ ...prev, 2: "pending" }));
+      setCurrentStep(2);
+  }
 
   // useEffect(() => {
   //   if (!client || Object.keys(client).length === 0) {
@@ -333,7 +338,14 @@ const ProcessedPayment = ({
           )}
         </div>
       </div>
-      <div className="col-12 d-flex justify-content-end">
+      <div className="col-12 d-flex justify-content-between">
+         <button
+      type="submit"
+      className="btn btn-label-primary d-flex align-items-center me-2"
+      onClick={handlPrevious}
+    >
+     <i className="bx bx-chevron-left"></i> Previous 
+    </button>
         <button
           type="submit"
           className="btn btn-label-primary d-flex align-items-center me-2"

src/components/UserSubscription/SubscriptionLayout.jsx

@@ -22,7 +22,7 @@ const SubscriptionLayout = ({
                 className={`timeline-point mx-auto mb-2 
                   ${status === "success" ? "completed" : ""}
                   ${status === "failed" ? "failed" : ""}
-                  ${stepNumber === currentStep && status !== "failed" ? "active" : ""}
+                  ${stepNumber === currentStep && status === "pending" ? "active" : ""}
                 `}
               >
                 {status === "failed" ? (
@@ -34,18 +34,7 @@ const SubscriptionLayout = ({
                 )}
               </div>
 
-              <small
+              <small className="fw-semibold fs-sm-6 fs-md-6 mb-0 text-muted">
-                className={`fw-semibold fs-sm-6 fs-md-6 mb-0 text-muted`}
-              >
-                {/* ${
-                  status === "success"
-                    ? "text-success"
-                    : status === "failed"
-                    ? "text-danger"
-                    : stepNumber === currentStep
-                    ? "text-primary"
-                    : "text-muted"
-                } */}
                 {step.name}
               </small>
 
@@ -64,5 +53,5 @@ const SubscriptionLayout = ({
   );
 };
 
-
 export default SubscriptionLayout;
+

src/components/UserSubscription/VerifiedPayment.jsx

@@ -4,8 +4,12 @@ import Invoice from "./Invoice";
 
 const VerifiedPayment = ({ onNext, responsePayment }) => {
   const [isGenerateInvoice, setIsGenerateInvoice] = useState(false);
-
+useEffect(() => {
-  if (!responsePayment) {
+  if (responsePayment?.success) {
+    onNext();
+  }
+}, [responsePayment]);
+  if (responsePayment) {
     return (
       <div className="container-md mt-5 text-center">
         <div className="d-flex flex-column align-items-center justify-content-center">
@@ -23,10 +27,10 @@ const VerifiedPayment = ({ onNext, responsePayment }) => {
     );
   }
 
-  if (responsePayment?.success) {
+  if (!responsePayment?.success) {
-    onNext();
+   
     return (
-      <div className="container-md mt-3 text-center">
+      <div className="container-md mt-3 text-center h-auto">
         {isGenerateInvoice && (
           <GlobalModel
             isOpen={isGenerateInvoice}
@@ -44,42 +48,19 @@ const VerifiedPayment = ({ onNext, responsePayment }) => {
           </span>
         </div>
 
-        <p className="text-muted mb-4 fs-6 fs-md-5 text-center mt-3">
+        <p className="text-muted mb-4 fs-6 fs-md-5 text-center mt-8">
           Thank you for your payment. Your <strong>subscription</strong> has
           been successfully activated.
         </p>
 
-        {/* <div className="row justify-content-center">
+       <div className="mt-8">
-          <div className="col-12 col-sm-10 col-md-8 bg-white rounded-4 p-3 p-md-4 text-start mb-4 shadow-sm">
+         <small className="text-muted ">
-            <h5 className="fw-bold mb-3 text-secondary">
+          A Set Password link has been sent to your registered email address .
-              Subscription Details
+          Please check your inbox .
-            </h5>
+        </small>
-            <ul className="list-unstyled mb-0">
-              <li className="mb-2 d-flex justify-content-between">
-                <span>Plan Name:</span>
-                <strong>Premium Plan</strong>
-              </li>
-              <li className="mb-2 d-flex justify-content-between">
-                <span>Amount Paid:</span>
-                <strong>₹999.00</strong>
-              </li>
-              <li className="mb-2 d-flex justify-content-between">
-                <span>Payment ID:</span>
-                <strong>{responsePayment?.paymentId}</strong>
-              </li>
-              <li className="mb-2 d-flex justify-content-between">
-                <span>Activation Date:</span>
-                <strong>{new Date().toLocaleDateString()}</strong>
-              </li>
-              <li className="d-flex justify-content-between">
-                <span>Expiry Date:</span>
-                <strong>27 Nov 2025</strong>
-              </li>
-            </ul>
        </div>
-        </div> */}
 
-        <div className="d-flex flex-column flex-md-row justify-content-center gap-3">
+        <div className="d-flex flex-column flex-md-row justify-content-center gap-3 my-12 ">
           <a href="/" className="btn btn-info px-4 py-2 fw-semibold">
             Go to Dashboard
           </a>

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(1);
+  const [currentStep, setCurrentStep] = useState(3);
   const [responsePayment, setResponsePayment] = useState(null);
 
   const [stepStatus, setStepStatus] = useState({
@@ -135,38 +135,7 @@ const MakeSubscription = () => {
             className="collapse navbar-collapse justify-content-end"
             id="navbarNav"
           >
-            <ul className="navbar-nav me-4">
+          
-              <li className="nav-item">
-                <a className="nav-link fw-semibold" href="#">
-                  Home
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link fw-semibold" href="#features">
-                  Features
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link fw-semibold" href="#pricing">
-                  Pricing
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link fw-semibold" href="#about">
-                  About
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link fw-semibold" href="#faq">
-                  FAQ
-                </a>
-              </li>
-              <li className="nav-item">
-                <a className="nav-link fw-semibold" href="#contact">
-                  Contact
-                </a>
-              </li>
-            </ul>
 
             {/* Auth Buttons */}
             <ul className="navbar-nav align-items-center">