Merge pull request #54 from kjannette/moInt2

Mo int2

src/Components/Modals/PaymentModal.js

@@ -25,8 +25,8 @@ const PaymentModal = ({
   const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount;
   const annualAddAccountPrice = monthlyAddAccountPrice * 12;
   const showAdditionaLAccountsView =
-    selectedPlan[0]?.value === "partner" ||
-    selectedPlan[0]?.value === "seniorPartner";
+    (selectedPlan[0]?.value === "partner" && numberOfAccountsToAdd > 0) ||
+    (selectedPlan[0]?.value === "seniorPartner" && numberOfAccountsToAdd > 0);
   const planName = selectedPlan[0].name ? selectedPlan[0].name : null;
   const billingPeriod = isAnnual ? "Annually" : "Monthly";
   const amountToday = isAnnual
@@ -34,6 +34,7 @@ const PaymentModal = ({
     : selectedPlan[0]?.pricing[1]?.amount;
   console.log("annualAddAccountPrice", annualAddAccountPrice);
   console.log("isAnnual", isAnnual);
+  console.log("numberOfAccountsToAdd", numberOfAccountsToAdd);
   return (
     <Modal show="true" size="lg">
       <Modal.Header className="payment-modal-header" closeButton>
@@ -65,7 +66,7 @@ const PaymentModal = ({
                   {isAnnual ? (
                     <p>
                       {" "}
-                      {numberOfAccountsToAdd}/per year = $
+                      {numberOfAccountsToAdd}/ x 12 months = $
                       {annualAddAccountPrice}
                     </p>
                   ) : (

src/Components/SignupPage/SignupPage.js

@@ -206,6 +206,12 @@ const SignupPage = () => {
     setShowPaymentModal(true);
   };
 
+  const handleAdd = () => {
+    //add accounts, close section
+    setShowAddAccount(!showAddAccount);
+    setShowPaymentModal(true);
+  };
+
   const handleOpenSelectPlan = (e) => {
     e.preventDefault();
     if (isBusy) {
@@ -249,11 +255,6 @@ const SignupPage = () => {
     setShowAddAccount(!showAddAccount);
   };
 
-  const handleAdd = () => {
-    //add accounts, close sectin
-    setShowAddAccount(!showAddAccount);
-  };
-
   // ******************** STRIPE PAY API CALL ******************** //
   async function handleStripeAuthorization(
     user,
@@ -374,8 +375,8 @@ const SignupPage = () => {
   const showNoticeOnPage = "" !== notice && !showPaymentModal;
   const addAccountCopy =
     selectedPlan[0]?.value === "seniorPartner"
-      ? "Add up to eight additional accounts to your subscripton"
-      : "Add up to two additional accounts to your subscripton";
+      ? "Add up to eight"
+      : "Add up to two";
   const showAddAccountBtn =
     selectedPlan[0].value === "seniorPartner" ||
     selectedPlan[0].value === "partner";
@@ -506,20 +507,17 @@ const SignupPage = () => {
               ))}
             </div>
             {showAddAccount ? (
+              <div className="show-addaccount-wrapper">
                 <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
+                      User profiles will be setup later
                     </p>
                   </div>
                   <div className="signup-select-wrapper">
-                  <div className="add-account-copy-wrapper">
-                    <div className="add-acctwrapz">{addAccountCopy}</div>
-                  </div>
                     <div className="signup-select-box">
                       <select
                         id="accountNo"
@@ -562,6 +560,7 @@ const SignupPage = () => {
                     </div>
                   </div>
                 </div>
+              </div>
             ) : (
               <></>
             )}

src/styles/modals.scss

@@ -110,5 +110,5 @@
 
 .payment-summary-header {
   border-bottom: 1px solid #cecece;
-  margin-bottom: 12px;
+  margin-bottom: 4px;
 }

src/styles/signup.scss

@@ -84,11 +84,12 @@
   width: 50%;
 }
 
-.plan-header-right-low {
+.plan-header-right-lower {
   display: flex;
-  flex-direction: row;
-  padding: 12px 14px;
-  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .plan-header-left {
@@ -207,11 +208,19 @@
   margin-top: 25px;
 }
 
+.show-addaccount-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  width: 100%;
+}
+
 .show-addaccount-container {
   display: flex;
   flex-direction: column;
-  width: 880px;
+  width: 578px;
   min-height: 200px;
+  margin-right: 14px;
   padding: 12px;
   border-radius: 10px;
   background-color: #fff;
@@ -221,8 +230,8 @@
 .signup-accounts-info {
   font-weight: 300;
   font-size: 0.93rem;
-  margin-top: 0px;
-  margin-left: 5px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .signup-select-wrapper {
@@ -234,7 +243,7 @@
 }
 
 .signup-select-box {
-  width: 90px;
+  width: 230px;
   margin-left: auto;
   margin-top: 12px;
   margin-bottom: 12px;
@@ -247,7 +256,6 @@
 .add-account-copy-wrapper {
   display: flex;
   flex-direction: row;
-  width: 800px;
   justify-content: flex-end;
   align-items: center;
   margin-right: 12px;