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,14 +506,14 @@ 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
+                      Username(s) and access will be setup later
                     </p>
                   </div>
                   <div className="signup-select-wrapper">
@@ -562,6 +562,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

@@ -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;