From 21121ec911051d2233c4690626e10b1285210f24 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 28 Jan 2024 18:16:03 -0600
Subject: [PATCH] more

---
 src/Components/Modals/PaymentModal.js | 47 +++++++++++++++------------
 src/styles/signup.scss                |  7 ++++
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index a76bb5b..d756aa5 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/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
-    : selectedPlan[0]?.pricing[1]?.amount;
-  console.log("annualAddAccountPrice", annualAddAccountPrice);
-  console.log("isAnnual", isAnnual);
-  console.log("numberOfAccountsToAdd", numberOfAccountsToAdd);
+    ? annualSubscriptionPriceToday
+    : monthlySubscriptionPriceToday;
+
   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>
             ) : (
               <></>
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index f097ed2..6dd3bfe 100644
--- a/src/styles/signup.scss
+++ b/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;
+}