added block ui script to block ui until processing

index.html

@@ -81,7 +81,10 @@
   <script src="/assets/vendor/js/menu.js"></script>
 
 
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
+<!-- BlockUI core plugin -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>
 
 
   <!-- endbuild -->
@@ -97,6 +100,8 @@
   <!-- Main JS -->
   <script src="/assets/js/main.js"></script>
 
+  <!-- Bloack Ui -->
+   <!-- <script src="/assets/js/extended-ui-blockui.js"></script> -->
   <!-- Page JS -->
   <script src="/assets/js/form-wizard-icons.js"></script>
   <script src="/assets/js/dashboards-analytics.js"></script>

public/assets/js/extended-ui-blockui.js

@@ -0,0 +1,504 @@
+/**
+ * Block UI (jquery)
+ */
+
+'use strict';
+
+$(function () {
+  var section = $('#section-block'),
+    sectionBlock = $('.btn-section-block'),
+    sectionBlockOverlay = $('.btn-section-block-overlay'),
+    sectionBlockSpinner = $('.btn-section-block-spinner'),
+    sectionBlockCustom = $('.btn-section-block-custom'),
+    sectionBlockMultiple = $('.btn-section-block-multiple'),
+    cardSection = $('#card-block'),
+    cardBlock = $('.btn-card-block'),
+    cardBlockOverlay = $('.btn-card-block-overlay'),
+    cardBlockSpinner = $('.btn-card-block-spinner'),
+    cardBlockCustom = $('.btn-card-block-custom'),
+    cardBlockMultiple = $('.btn-card-block-multiple'),
+    pageBlock = $('.btn-page-block'),
+    pageBlockOverlay = $('.btn-page-block-overlay'),
+    pageBlockSpinner = $('.btn-page-block-spinner'),
+    pageBlockCustom = $('.btn-page-block-custom'),
+    pageBlockMultiple = $('.btn-page-block-multiple'),
+    formSection = $('.form-block'),
+    formBlock = $('.btn-form-block'),
+    formBlockOverlay = $('.btn-form-block-overlay'),
+    formBlockSpinner = $('.btn-form-block-spinner'),
+    formBlockCustom = $('.btn-form-block-custom'),
+    formBlockMultiple = $('.btn-form-block-multiple');
+
+  // Block UI
+  // --------------------------------------------------------------------
+
+  // Default
+  if (sectionBlock.length && section.length) {
+    sectionBlock.on('click', function () {
+      $('#section-block').block({
+        message: '<div class="spinner-border text-white" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Overlay Color
+  if (sectionBlockOverlay.length && section.length) {
+    sectionBlockOverlay.on('click', function () {
+      $('#section-block').block({
+        message: '<div class="spinner-border text-primary" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          backgroundColor: '#fff',
+          opacity: 0.8
+        }
+      });
+    });
+  }
+  // Custom Spinner
+  if (sectionBlockSpinner.length && section.length) {
+    sectionBlockSpinner.on('click', function () {
+      $('#section-block').block({
+        message:
+          '<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Custom Message
+  if (sectionBlockCustom.length && section.length) {
+    sectionBlockCustom.on('click', function () {
+      $('#section-block').block({
+        message:
+          '<div class="d-flex justify-content-center align-items-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Multiple Message
+  if (sectionBlockMultiple.length && section.length) {
+    sectionBlockMultiple.on('click', function () {
+      $('#section-block').block({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        },
+        timeout: 1000,
+        onUnblock: function () {
+          $('#section-block').block({
+            message: '<p class="mb-0">Almost Done...</p>',
+            timeout: 1000,
+            css: {
+              backgroundColor: 'transparent',
+              color: '#fff',
+              border: '0'
+            },
+            overlayCSS: {
+              opacity: 0.25
+            },
+            onUnblock: function () {
+              $('#section-block').block({
+                message: '<div class="p-3 bg-success">Success</div>',
+                timeout: 500,
+                css: {
+                  backgroundColor: 'transparent',
+                  color: '#fff',
+                  border: '0'
+                },
+                overlayCSS: {
+                  opacity: 0.25
+                }
+              });
+            }
+          });
+        }
+      });
+    });
+  }
+
+  // Card Blocking
+  // --------------------------------------------------------------------
+
+  // Default
+  if (cardBlock.length && cardSection.length) {
+    cardBlock.on('click', function () {
+      $('#card-block').block({
+        message: '<div class="spinner-border text-white" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Overlay Color
+  if (cardBlockOverlay.length && cardSection.length) {
+    cardBlockOverlay.on('click', function () {
+      $('#card-block').block({
+        message: '<div class="spinner-border text-primary" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          backgroundColor: '#fff',
+          opacity: 0.8
+        }
+      });
+    });
+  }
+  // Custom Spinner
+  if (cardBlockSpinner.length && cardSection.length) {
+    cardBlockSpinner.on('click', function () {
+      $('#card-block').block({
+        message:
+          '<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Custom Message
+  if (cardBlockCustom.length && cardSection.length) {
+    cardBlockCustom.on('click', function () {
+      $('#card-block').block({
+        message:
+          '<div class="d-flex justify-content-center align-items-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Multiple Message
+  if (cardBlockMultiple.length && cardSection.length) {
+    cardBlockMultiple.on('click', function () {
+      $('#card-block').block({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        },
+        timeout: 1000,
+        onUnblock: function () {
+          $('#card-block').block({
+            message: '<p class="mb-0">Almost Done...</p>',
+            timeout: 1000,
+            css: {
+              backgroundColor: 'transparent',
+              color: '#fff',
+              border: '0'
+            },
+            overlayCSS: {
+              opacity: 0.25
+            },
+            onUnblock: function () {
+              $('#card-block').block({
+                message: '<div class="p-3 bg-success">Success</div>',
+                timeout: 500,
+                css: {
+                  backgroundColor: 'transparent',
+                  color: '#fff',
+                  border: '0'
+                },
+                overlayCSS: {
+                  opacity: 0.25
+                }
+              });
+            }
+          });
+        }
+      });
+    });
+  }
+
+  // Page Blocking
+  // --------------------------------------------------------------------
+
+  // Default
+  if (pageBlock.length) {
+    pageBlock.on('click', function () {
+      $.blockUI({
+        message: '<div class="spinner-border text-white" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Overlay Color
+  if (pageBlockOverlay.length) {
+    pageBlockOverlay.on('click', function () {
+      $.blockUI({
+        message: '<div class="spinner-border text-primary" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          backgroundColor: '#fff',
+          opacity: 0.8
+        }
+      });
+    });
+  }
+  // Custom Spinner
+  if (pageBlockSpinner.length) {
+    pageBlockSpinner.on('click', function () {
+      $.blockUI({
+        message:
+          '<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Custom Message
+  if (pageBlockCustom.length) {
+    pageBlockCustom.on('click', function () {
+      $.blockUI({
+        message:
+          '<div class="d-flex justify-content-center align-items-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Multiple Message
+  if (pageBlockMultiple.length) {
+    pageBlockMultiple.on('click', function () {
+      $.blockUI({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        },
+        timeout: 1000,
+        onUnblock: function () {
+          $.blockUI({
+            message: '<p class="mb-0">Almost Done...</p>',
+            timeout: 1000,
+            css: {
+              backgroundColor: 'transparent',
+              color: '#fff',
+              border: '0'
+            },
+            overlayCSS: {
+              opacity: 0.5
+            },
+            onUnblock: function () {
+              $.blockUI({
+                message: '<div class="p-3 bg-success">Success</div>',
+                timeout: 500,
+                css: {
+                  backgroundColor: 'transparent',
+                  color: '#fff',
+                  border: '0'
+                },
+                overlayCSS: {
+                  opacity: 0.5
+                }
+              });
+            }
+          });
+        }
+      });
+    });
+  }
+
+  // Form Blocking
+  // --------------------------------------------------------------------
+
+  // Default
+  if (formBlock.length && formSection.length) {
+    formBlock.on('click', function () {
+      formSection.block({
+        message: '<div class="spinner-border text-white" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Overlay Color
+  if (formBlockOverlay.length && formSection.length) {
+    formBlockOverlay.on('click', function () {
+      formSection.block({
+        message: '<div class="spinner-border text-primary" role="status"></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          border: '0'
+        },
+        overlayCSS: {
+          backgroundColor: '#fff',
+          opacity: 0.8
+        }
+      });
+    });
+  }
+  // Custom Spinner
+  if (formBlockSpinner.length && formSection.length) {
+    formBlockSpinner.on('click', function () {
+      formSection.block({
+        message:
+          '<div class="sk-wave mx-auto"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Custom Message
+  if (formBlockCustom.length && formSection.length) {
+    formBlockCustom.on('click', function () {
+      formSection.block({
+        message:
+          '<div class="d-flex justify-content-center align-items-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        timeout: 1000,
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        }
+      });
+    });
+  }
+  // Multiple Message
+  if (formBlockMultiple.length && formSection.length) {
+    formBlockMultiple.on('click', function () {
+      formSection.block({
+        message:
+          '<div class="d-flex justify-content-center"><p class="mb-0">Please wait...</p> <div class="sk-wave m-0"><div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div> <div class="sk-rect sk-wave-rect"></div></div> </div>',
+        css: {
+          backgroundColor: 'transparent',
+          color: '#fff',
+          border: '0'
+        },
+        overlayCSS: {
+          opacity: 0.5
+        },
+        timeout: 1000,
+        onUnblock: function () {
+          formSection.block({
+            message: '<p class="mb-0">Almost Done...</p>',
+            timeout: 1000,
+            css: {
+              backgroundColor: 'transparent',
+              border: '0'
+            },
+            overlayCSS: {
+              opacity: 0.25
+            },
+            onUnblock: function () {
+              formSection.block({
+                message: '<div class="p-3 bg-success">Success</div>',
+                timeout: 500,
+                css: {
+                  backgroundColor: 'transparent',
+                  border: '0'
+                },
+                overlayCSS: {
+                  opacity: 0.25
+                }
+              });
+            }
+          });
+        }
+      });
+    });
+  }
+});

src/components/UserSubscription/ProcessedPayment.jsx

@@ -12,6 +12,7 @@ import { PaymentRepository } from "../../repositories/PaymentRepository";
 import { useMakePayment } from "../../hooks/usePayment";
 import { useDispatch } from "react-redux";
 import { setSelfTenant } from "../../slices/localVariablesSlice";
+import { unblockUI } from "../../utils/blockUI";
 
 const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
   const { frequency, planName } = useParams();
@@ -62,9 +63,11 @@ const ProcessedPayment = ({ onNext, resetPaymentStep }) => {
 
   const { mutate: MakePayment, isPending } = useMakePayment(
     (response) => {
+      unblockUI()
       onNext(response);
     },
     (fail) => {
+       unblockUI()
       setFailPayment(fail);
       onNext(fail);
     },

src/components/UserSubscription/SubscriptionForm.jsx

@@ -10,6 +10,7 @@ import { orgSize, reference } from "../../utils/constants";
 import DatePicker from "../common/DatePicker";
 import { useCreateTenant, useIndustries } from "../../hooks/useTenant";
 import { useCreateSelfTenant } from "../../hooks/useAuth";
+import { blockUI } from "../../utils/blockUI";
 
 const SubscriptionForm = ({currentStep,
           setCurrentStep,
@@ -41,7 +42,7 @@ const SubscriptionForm = ({currentStep,
     // reset();
   };
   return (
-    <div className="container-md vh-100">
+    <div className="container-md ">
       <div className="row">
         <div className="col-12 col-md-6">
           <div className="row px-4">

src/hooks/usePayment.jsx

@@ -2,8 +2,9 @@ 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";
 
-export function removeRazorpayArtifacts() {
+export const removeRazorpayArtifacts=()=> {
   try {
     document
       .querySelectorAll("iframe[src*='razorpay'], iframe[name^='__PRIVATE']")
@@ -40,7 +41,7 @@ export function removeRazorpayArtifacts() {
   }
 }
 
-function closeRazorpayPopup() {
+const closeRazorpayPopup=()=> {
   try {
     if (window.Razorpay && typeof window.Razorpay.close === "function") {
       window.Razorpay.close();
@@ -166,6 +167,7 @@ export const useMakePayment = (
           });
 
           try {
+           blockUI("Please Wait...")
             razorpay.open();
           } catch (err) {
             alert("This browser is not supported. Please try another browser.");

src/pages/Home/MakeSubscription.jsx

@@ -10,7 +10,7 @@ const MakeSubscription = () => {
   const [responsePayment, setResponsePayment] = useState(null);
 
   const [stepStatus, setStepStatus] = useState({
-    1: "success",
+    1: "pending",
     2: "pending",
     3: "pending",
   });

src/utils/blockUI.js

@@ -0,0 +1,32 @@
+export const blockUI = (message = 'Please wait...') => {
+  if (window.$ && window.$.blockUI) {
+    window.$.blockUI({
+      message: `
+        <div class="d-flex flex-column align-items-center">
+          <div class="sk-wave mb-2">
+            <div class="sk-wave-rect"></div>
+            <div class="sk-wave-rect"></div>
+            <div class="sk-wave-rect"></div>
+            <div class="sk-wave-rect"></div>
+            <div class="sk-wave-rect"></div>
+          </div>
+          <p class="text-white">${message}</p>
+        </div>`,
+      css: {
+        backgroundColor: 'transparent',
+        border: '0',
+        color: '#fff',
+      },
+      overlayCSS: {
+        opacity: 0.5,
+        cursor: 'wait',
+      },
+    });
+  }
+};
+
+export const unblockUI = () => {
+  if (window.$ && window.$.unblockUI) {
+    window.$.unblockUI();
+  }
+};