Merge pull request #51 from kjannette/stripe7

Stripe7

src/Components/SignupPage/SignupPage.js

@@ -44,12 +44,11 @@ const SignupPage = () => {
   const [isAnnual, setIsAnnual] = useState(false);
   // Could also go in App.js if needed in the future
   const stripe = new Stripe(stripeApiKey);
-  console.log("activeRadioOption", activeRadioOption);
   const apiUrl =
     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) => {
@@ -184,7 +183,19 @@ const SignupPage = () => {
     setIsAnnual(!isAnnual);
     console.log("isAnnual", isAnnual);
   };
+  const handleAddAccounts = () => {
+    console.log("selectedPlan", selectedPlan);
+    setShowAddAccount(!showAddAccount);
+  };
 
+  const handleCancelAdd = () => {
+    setShowAddAccount(!showAddAccount);
+  };
+
+  const handleAdd = () => {
+    //add accounts, close sectin
+    setShowAddAccount(!showAddAccount);
+  };
   async function handleStripeAuthorization(
     user,
     paymentDataValues,
@@ -299,6 +310,10 @@ const SignupPage = () => {
   };
 
   const showNoticeOnPage = "" !== notice && !showPaymentModal;
+  const addAccountCopy =
+    selectedPlan[0].value === "seniorPartner"
+      ? "You ay add up to eight accounts"
+      : "You may add up to two accounts";
 
   return (
     <div className="signup-super-container">
@@ -380,7 +395,6 @@ const SignupPage = () => {
             labelText="Select A Plan"
           />
         </div>
-
         {showNoticeOnPage ? (
           <>
             <br></br>
@@ -425,7 +439,46 @@ const SignupPage = () => {
                 </div>
               ))}
             </div>
+            {showAddAccount ? (
+              <div className="show-addaccount-container">
+                {" "}
+                <div className="plan-header-right-lower">
+                  <h5 className="signup-button-wrapper-text">
+                    Add additional accounts
+                  </h5>
+                  <p className="signup-accounts-info">
+                    account username(s) and access will be setup later
+                  </p>
+                </div>
+                <div className="details-button-box">
+                  <Button
+                    className="secondary-button back-button"
+                    onClick={handleCancelAdd}
+                    labelText="Cancel"
+                  />
+                  <div className="upload-button-box">
+                    <Button
+                      className="p-2 mr-2 primary-button"
+                      onClick={handleAdd}
+                      labelText="Add And Proceed to Payment"
+                    />
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
             <div className="signup-button-box">
+              {!showAddAccount ? (
+                <>
+                  <Button
+                    className="secondary-button"
+                    type="button"
+                    size="lg"
+                    onClick={handleAddAccounts}
+                    disabled={isBusy}
+                    labelText="Add Account(s)"
+                  />
                   <Button
                     className="primary-button signup-proceed"
                     type="button"
@@ -434,6 +487,10 @@ const SignupPage = () => {
                     disabled={isBusy}
                     labelText="Proceed to Payment"
                   />
+                </>
+              ) : (
+                <></>
+              )}
             </div>
           </div>
         </div>

src/styles/signup.scss

@@ -40,6 +40,14 @@
   margin-top: 6px;
 }
 
+.signup-button-wrapper-text {
+  letter-spacing: -0.6px;
+  font-weight: 400;
+  font-size: 1.7rem;
+  margin-left: 5px;
+  margin-bottom: 0px !important;
+}
+
 .signup-form {
   width: 880px;
 }
@@ -48,8 +56,8 @@
   width: 100%;
   margin-bottom: 24px;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
-  align-items: flex-end;
+  justify-content: flex-end;
   padding-right: 14px;
 }
 
@@ -62,7 +70,6 @@
   flex-direction: row;
   margin-top: 24px;
   width: 920px;
-  height: 600px;
 }
 
 .select-plan-header {
@@ -76,6 +83,13 @@
   width: 50%;
 }
 
+.plan-header-right-low {
+  display: flex;
+  flex-direction: row;
+  padding: 12px 14px;
+  width: 100%;
+}
+
 .plan-header-left {
   display: flex;
   flex-direction: row-reverse;
@@ -191,3 +205,21 @@
   border-radius: 10px;
   margin-top: 25px;
 }
+
+.show-addaccount-container {
+  display: flex;
+  flex-direction: column;
+  width: 880px;
+  min-height: 200px;
+  padding: 12px;
+  border-radius: 10px;
+  background-color: #fff;
+  border: 1px solid #e9e9e9;
+}
+
+.signup-accounts-info {
+  font-weight: 300;
+  font-size: 0.93rem;
+  margin-top: 0px;
+  margin-left: 5px;
+}