more

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

@@ -374,8 +374,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,59 +506,60 @@ const SignupPage = () => {
               ))}
             </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="signup-select-wrapper">
-                  <div className="add-account-copy-wrapper">
-                    <div className="add-acctwrapz">{addAccountCopy}</div>
+              <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">
+                      Username(s) and access will be setup later
+                    </p>
                   </div>
-                  <div className="signup-select-box">
-                    <select
-                      id="accountNo"
-                      className={`form-select`}
-                      value={numberOfAccountsToAdd}
-                      name={"addAccountsSelect"}
-                      onChange={(e) =>
-                        handleChangeAccountSelect(e, "addAccountsSelect")
-                      }
-                    >
-                      <option
-                        id="ddlProducts"
-                        className={`select-option`}
-                        value=""
-                      ></option>
-                      {selectAdditionalAccountValues.map((item, i) => (
+                  <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"
+                        className={`form-select`}
+                        value={numberOfAccountsToAdd}
+                        name={"addAccountsSelect"}
+                        onChange={(e) =>
+                          handleChangeAccountSelect(e, "addAccountsSelect")
+                        }
+                      >
                         <option
                           id="ddlProducts"
                           className={`select-option`}
-                          key={`item${i}`}
-                        >
-                          {item}
-                        </option>
-                      ))}
-                    </select>
+                          value=""
+                        ></option>
+                        {selectAdditionalAccountValues.map((item, i) => (
+                          <option
+                            id="ddlProducts"
+                            className={`select-option`}
+                            key={`item${i}`}
+                          >
+                            {item}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
                   </div>
-                </div>
-                <div className="details-button-box">
-                  <Button
-                    className="secondary-button back-button"
-                    onClick={handleCancelAdd}
-                    labelText="Cancel"
-                  />
-                  <div className="upload-button-box">
+                  <div className="details-button-box">
                     <Button
-                      className="p-2 mr-2 primary-button"
-                      onClick={handleAdd}
-                      labelText="Add And Proceed To Payment"
+                      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>

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

@@ -87,6 +87,8 @@
 .plan-header-right-low {
   display: flex;
   flex-direction: row;
+  justify-content: center;
+  margin: auto;
   padding: 12px 14px;
   width: 100%;
 }
@@ -207,11 +209,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;