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"

src/Constants/Fields/SignupFields.js

@@ -31,7 +31,13 @@ export const signupFields = {
   },
   barNumber: { required: true, label: "Bar Number", maxLength: 45 },
   practiceArea: { required: true, label: "Practice Area", maxLength: 45 },
-  email: { required: true, label: "Email", maxLength: 45, type: "email" },
+  email: {
+    required: true,
+    label: "Email",
+    maxLength: 45,
+    type: "email",
+    inputWidth: "80%",
+  },
   password: {
     required: true,
     label: "Password",

src/styles/signup.scss

@@ -32,12 +32,21 @@
   font-size: 2rem;
 }
 
+.signup-subheader-text {
+  letter-spacing: -0.6px;
+  font-weight: 400;
+  font-size: 1.7rem;
+  margin-left: 5px;
+  margin-top: 6px;
+}
+
 .signup-form {
   width: 880px;
 }
 
 .signup-button-box {
   width: 100%;
+  margin-bottom: 24px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -46,3 +55,38 @@
 .signup-proceed {
   width: 160px;
 }
+
+.select-plan-container {
+  display: flex;
+  flex-direction: row;
+  margin-top: 24px;
+  width: 920px;
+  height: 600px;
+}
+
+.select-sub-left {
+  width: 60%;
+  border-radius: 10px;
+  background-color: rgb(240, 247, 250);
+  margin-right: 8px;
+  border: 1px solid #e9e9e9;
+  padding: 6px;
+}
+
+.select-sub-right {
+  width: 40%;
+  border-radius: 10px;
+  background-color: rgb(240, 247, 250);
+  margin-left: 8px;
+  border: 1px solid #e9e9e9;
+  padding: 6px;
+}
+
+.radio-group-box {
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+  width: 100%;
+  height: 300px;
+  background-color: green;
+}