more

src/Components/Modals/PaymentModal.js

@@ -22,19 +22,25 @@ const PaymentModal = ({
   fieldsChunkSize,
   numberOfAccountsToAdd,
 }) => {
+  console.timeLog();
+
+  const monthlySubscriptionPriceToday = selectedPlan[0].pricing[0].amount;
+  const annualSubscriptionPriceToday = selectedPlan[0].pricing[1].amount * 12;
+  console.log("monthlySubscriptionPriceToday", monthlySubscriptionPriceToday);
+
   const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount;
   const annualAddAccountPrice = monthlyAddAccountPrice * 12;
+
   const showAdditionaLAccountsView =
     (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
-    ? selectedPlan[0]?.pricing[0]?.amount
+    ? annualSubscriptionPriceToday
-    : selectedPlan[0]?.pricing[1]?.amount;
+    : monthlySubscriptionPriceToday;
-  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>
@@ -48,7 +54,6 @@ const PaymentModal = ({
               <div className="paymodal-summary-right">Subscription Type:</div>
               <div className="paymodal-summary-left">{planName}</div>
             </div>
-
             <div className="payment-modal-text-wrapper">
               <div className="paymodal-summary-right">
                 Billing Period/Amount:
@@ -57,26 +62,26 @@ const PaymentModal = ({
                 {billingPeriod} - ${amountToday}
               </div>
             </div>
+            <div className="payment-modal-text-wrapper">
+              <div className="paymodal-summary-right">Addiitonal accounts:</div>
+              <div className="paymodal-summary-left"></div>
+            </div>
+            {isAnnual ? (
+              <div className="payment-modal-text-wrapper">
+                <div className="paymodal-summary-right"></div>
+                <div className="paymodal-summary-left-bonus">
+                  Includes 10% discount for convenient annual billing
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
+
             {showAdditionaLAccountsView ? (
               <div className="payment-modal-text-wrapper">
                 <div className="paymodal-summary-right">
                   Additional Accounts:
                 </div>
-                <div className="paymodal-summary-left">
-                  {isAnnual ? (
-                    <p>
-                      {" "}
-                      {numberOfAccountsToAdd}/ x 12 months = $
-                      {annualAddAccountPrice}
-                    </p>
-                  ) : (
-                    <p>
-                      {" "}
-                      {numberOfAccountsToAdd}/per month = $
-                      {monthlyAddAccountPrice}
-                    </p>
-                  )}
-                </div>
               </div>
             ) : (
               <></>

src/styles/signup.scss

@@ -261,3 +261,10 @@
   margin-right: 12px;
   padding-right: 12px;
 }
+
+.paymodal-summary-left-bonus {
+  color: #0008ea;
+  margin-top: -8px;
+  font-size: 0.82rem;
+  font-weight: 300;
+}