more

src/Components/SignupPage/SignupPage.js

@@ -33,6 +33,7 @@ const SignupPage = () => {
     getFormDataDefaults(paymentfields)
   );
   const [showPaymentModal, setShowPaymentModal] = useState(false);
+  const [showSelectPlan, setShowSelectPlan] = useState(true);
   const modalText = "Description of monthly and annual subscriptions";
 
   // this could also go in App.js if needed in the future
@@ -129,6 +130,11 @@ const SignupPage = () => {
   const handleProceedToPayment = (e) => {
     e.preventDefault();
 
+    setShowPaymentModal(true);
+  };
+
+  const handleOpenSelectPlan = (e) => {
+    e.preventDefault();
     if (isBusy) {
       return;
     }
@@ -137,10 +143,7 @@ const SignupPage = () => {
     if (dataValues === null) {
       return;
     }
-
-    setShowPaymentModal(true);
   };
-
   async function handleStripeAuthorization(
     user,
     paymentDataValues,
@@ -276,7 +279,6 @@ const SignupPage = () => {
             <Row key={`row${j}`}>
               {names.map((name, i) => (
                 <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-                  {console.log("data, name", data, name)}
                   <TextInput
                     name={name}
                     value={data[name].value}
@@ -296,7 +298,7 @@ const SignupPage = () => {
               ))}
             </Row>
           ))}
-          <Row>
+          <Row style={{ width: "80%" }}>
             <Col className="mb-3">
               <TextInput
                 id="signupPassword"
@@ -314,7 +316,7 @@ const SignupPage = () => {
               />
             </Col>
           </Row>
-          <Row>
+          <Row style={{ width: "80%" }}>
             <Col className="mb-3">
               <TextInput
                 id="confirmPassword"
@@ -338,15 +340,10 @@ const SignupPage = () => {
             className="primary-button signup-proceed"
             type="button"
             size="lg"
-            onClick={handleProceedToPayment}
+            onClick={handleOpenSelectPlan}
             disabled={isBusy}
-            labelText="Proceed to Payment"
+            labelText="Select A Plan"
           />
-          <div className="mt-3">
-            <span>
-              <Link to="/login">Go to login</Link>
-            </span>
-          </div>
         </div>
 
         {showNoticeOnPage ? (
@@ -360,6 +357,30 @@ const SignupPage = () => {
           <></>
         )}
       </div>
+      {showSelectPlan ? (
+        <div className="select-plan-container">
+          <div className="select-sub-left">
+            <div>
+              <h5 className="signup-subheader-text">
+                Select your subscription plan
+              </h5>
+            </div>
+            <div className="radio-group-box"></div>
+          </div>
+          <div className="select-sub-right">
+            <Button
+              className="primary-button signup-proceed"
+              type="button"
+              size="lg"
+              onClick={handleProceedToPayment}
+              disabled={isBusy}
+              labelText="Select A Plan"
+            />
+          </div>
+        </div>
+      ) : (
+        <></>
+      )}
       {showPaymentModal ? (
         <PaymentModal
           key="modal-one-xc"