more

src/Components/SignupPage/SignupPage.js

@@ -49,7 +49,7 @@ const SignupPage = () => {
     process.env.NODE_ENV === "development"
       ? process.env.REACT_APP_API_DEV
       : process.env.REACT_APP_API_PROD;
-  const [selectedPlanToProcess, setSelectedPlanToProcess] = useState();
+  const [showAddAccount, setShowAddAccount] = useState(false);
   const modalText = "MAYBE PUT TOTAL HERE";
 
   const handleChangeInput = (e, name) => {
@@ -425,7 +425,30 @@ const SignupPage = () => {
                 </div>
               ))}
             </div>
+            {showAddAccount ? (
+              <div className="show-addaccount-container">
+                {" "}
+                <div className="plan-header-right">
+                  <h5 className="signup-subheader-text">
+                    Add additional accounts
+                  </h5>
+                  <p className="signup-accounts-info">
+                    Account holder access will be setup later
+                  </p>
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
             <div className="signup-button-box">
+              <Button
+                className="primary-button signup-proceed"
+                type="button"
+                size="lg"
+                onClick={() => setShowAddAccount(!showAddAccount)}
+                disabled={isBusy}
+                labelText="Add Account(s)"
+              />
               <Button
                 className="primary-button signup-proceed"
                 type="button"

src/styles/signup.scss

@@ -62,7 +62,6 @@
   flex-direction: row;
   margin-top: 24px;
   width: 920px;
-  height: 600px;
 }
 
 .select-plan-header {
@@ -191,3 +190,15 @@
   border-radius: 10px;
   margin-top: 25px;
 }
+
+.show-addaccount-container {
+  display: flex;
+  flex-direction: column;
+  width: 880px;
+  min-height: 350px;
+  padding: 12px;
+  border-radius: 10px;
+  //background-color: rgb(240, 247, 250);
+  background-color: red;
+  border: 1px solid #e9e9e9;
+}