more

src/Components/SignupPage/SignupPage.js

@@ -44,11 +44,9 @@ const SignupPage = () => {
     getFormDataDefaults(paymentfields)
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
-
   const [showSelectPlan, setShowSelectPlan] = useState(
     isUpgrade ? true : false
   );
-
   //const [showSelectPlan, setShowSelectPlan] = useState(true);
   const [activeRadioOption, setActiveRadioOption] = useState("partner");
   const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
@@ -255,8 +253,19 @@ const SignupPage = () => {
     setShowPaymentModal(true);
   };
 
+  const scrollToLowerPanel = () => {
+    let target = document.getElementById("scroll-target-id");
+    if (target) {
+      window.scrollTo({
+        top: target.offsetTop,
+        behavior: "smooth",
+      });
+    }
+  };
+
   const handleCancelModal = () => {
     setShowPromoModal(!showPromoModal);
+    setTimeout(scrollToLowerPanel, 400);
     setShowSelectPlan(!showSelectPlan);
   };
 
@@ -574,7 +583,9 @@ const SignupPage = () => {
           labelText="Select A Plan"
         />
       </div>
-      <div className="signup-freebie-box ">Free trial available!</div>
+      <div className="signup-freebie-box" id="signup-freebiee">
+        Free trial available!
+      </div>
     </div>
   );
   const disableIndex =
@@ -585,7 +596,7 @@ const SignupPage = () => {
       {isBusy ? <LoadingSpinner message={""} loaderType="MoonLoader" /> : null}
       {!isUpgrade && !isBusy ? signupForm : <></>}
       {showSelectPlan && !isBusy ? (
-        <div className="select-plan-container">
+        <div className="select-plan-container" id="select-plan-scid">
           <div className="select-plan-header">
             <div className="plan-header-right">
               <h5 className="signup-subheader-text">