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 === "partner" && numberOfAccountsToAdd > 0) ||
-    selectedPlan[0]?.value === "seniorPartner";
+    (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 eight"
-      : "Add up to two additional accounts to your subscripton";
+      : "Add up to two";
   const showAddAccountBtn =
     selectedPlan[0].value === "seniorPartner" ||
     selectedPlan[0].value === "partner";
@@ -506,59 +507,57 @@ const SignupPage = () => {
               ))}
             </div>
             {showAddAccount ? (
-              <div className="show-addaccount-container">
+              <div className="show-addaccount-wrapper">
-                {" "}
+                <div className="show-addaccount-container">
-                <div className="plan-header-right-lower">
+                  <div className="plan-header-right-lower">
-                  <h5 className="signup-button-wrapper-text">
+                    <h5 className="signup-button-wrapper-text">
-                    Add additional accounts
+                      Add additional accounts
-                  </h5>
+                    </h5>
-                  <p className="signup-accounts-info">
+                    <p className="signup-accounts-info">
-                    account username(s) and access will be setup later
+                      User profiles will be setup later
-                  </p>
+                    </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">
+                  <div className="signup-select-wrapper">
-                    <select
+                    <div className="signup-select-box">
-                      id="accountNo"
+                      <select
-                      className={`form-select`}
+                        id="accountNo"
-                      value={numberOfAccountsToAdd}
+                        className={`form-select`}
-                      name={"addAccountsSelect"}
+                        value={numberOfAccountsToAdd}
-                      onChange={(e) =>
+                        name={"addAccountsSelect"}
-                        handleChangeAccountSelect(e, "addAccountsSelect")
+                        onChange={(e) =>
-                      }
+                          handleChangeAccountSelect(e, "addAccountsSelect")
-                    >
+                        }
-                      <option
+                      >
-                        id="ddlProducts"
-                        className={`select-option`}
-                        value=""
-                      ></option>
-                      {selectAdditionalAccountValues.map((item, i) => (
                         <option
                           id="ddlProducts"
                           className={`select-option`}
-                          key={`item${i}`}
+                          value=""
-                        >
+                        ></option>
-                          {item}
+                        {selectAdditionalAccountValues.map((item, i) => (
-                        </option>
+                          <option
-                      ))}
+                            id="ddlProducts"
-                    </select>
+                            className={`select-option`}
+                            key={`item${i}`}
+                          >
+                            {item}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
                   </div>
-                </div>
+                  <div className="details-button-box">
-                <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"
+                      className="secondary-button back-button"
-                      onClick={handleAdd}
+                      onClick={handleCancelAdd}
-                      labelText="Add And Proceed To Payment"
+                      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>

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;
+  flex-direction: column;
-  padding: 12px 14px;
+  justify-content: center;
-  width: 100%;
+  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: auto;
-  margin-left: 5px;
+  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;