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 1/5] 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;
+}

From ae3e8ef7900d73f409de3a7cc7d12859bb4e9913 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 28 Jan 2024 18:36:55 -0600
Subject: [PATCH 2/5] more

---
 src/Components/Modals/PaymentModal.js   | 27 +++++++++++++++++++------
 src/Components/SignupPage/SignupPage.js |  7 ++++---
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index d756aa5..73626f2 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -8,12 +8,10 @@ import Row from "react-bootstrap/Row";
 import "../../styles/modals.scss";
 
 const PaymentModal = ({
-  buttonLabelText,
   isBusy,
   paymentData,
   paymentfields,
   handleChangePaymentInput,
-  orderSummary,
   handleSignUp,
   setShowPaymentModal,
   handleSignup,
@@ -22,14 +20,16 @@ const PaymentModal = ({
   fieldsChunkSize,
   numberOfAccountsToAdd,
 }) => {
-  console.timeLog();
+  const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount;
 
   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 additionalAccountsMonthlyPriceToday =
+    selectedPlan[0].pricing[2].amount * numberOfAccountsToAdd;
+
+  const additionalAccountsAnnualPriceToday =
+    additionalAccountsMonthlyPriceToday * 12;
 
   const showAdditionaLAccountsView =
     (selectedPlan[0]?.value === "partner" && numberOfAccountsToAdd > 0) ||
@@ -62,8 +62,18 @@ 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">
+                {isAnnual
+                  ? additionalAccountsAnnualPriceToday
+                  : additionalAccountsMonthlyPriceToday}
+              </div>
+            </div>
+
+            <div className="payment-modal-text-wrapper">
+              <div className="paymodal-summary-right">Total today:</div>
               <div className="paymodal-summary-left"></div>
             </div>
             {isAnnual ? (
@@ -82,6 +92,11 @@ const PaymentModal = ({
                 <div className="paymodal-summary-right">
                   Additional Accounts:
                 </div>
+                <div className="paymodal-summary-left">
+                  {isAnnual
+                    ? additionalAccountsAnnualPriceToday
+                    : additionalAccountsMonthlyPriceToday}
+                </div>
               </div>
             ) : (
               <></>
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index f64a085..27d557a 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -58,11 +58,12 @@ const SignupPage = () => {
   };
 
   const handleChangeAccountSelect = (e, name) => {
-    console.log("e, name", e, name);
+    console.log("~~~~~~~~~~~~~~e.target.value, name", e.target.value, name);
     const num = e.target.value;
-    setNumberOfAccountsToAdd(num);
+    const temp = Number(num);
+    setNumberOfAccountsToAdd(temp);
   };
-
+  console.log("numberOfAccountsToAdd", numberOfAccountsToAdd);
   const handleChangePaymentInput = (e, name) => {
     const newPaymentData = handleFormDataChange(
       e,

From 550706b18e5d01f4da948c787f2941732c2bceee Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 28 Jan 2024 18:44:06 -0600
Subject: [PATCH 3/5] more

---
 src/Components/Modals/PaymentModal.js | 51 ++++++++++++++++-----------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index 73626f2..2083758 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -31,6 +31,9 @@ const PaymentModal = ({
   const additionalAccountsAnnualPriceToday =
     additionalAccountsMonthlyPriceToday * 12;
 
+  const extraAccountsPrice = isAnnual
+    ? additionalAccountsAnnualPriceToday
+    : additionalAccountsMonthlyPriceToday;
   const showAdditionaLAccountsView =
     (selectedPlan[0]?.value === "partner" && numberOfAccountsToAdd > 0) ||
     (selectedPlan[0]?.value === "seniorPartner" && numberOfAccountsToAdd > 0);
@@ -64,17 +67,20 @@ const PaymentModal = ({
             </div>
 
             <div className="payment-modal-text-wrapper">
-              <div className="paymodal-summary-right">Addiitonal accounts:</div>
+              <div className="paymodal-summary-right">
+                {numberOfAccountsToAdd} Addiitonal{" "}
+                {numberOfAccountsToAdd > 1 ? `accounts` : `account`}
+              </div>
               <div className="paymodal-summary-left">
-                {isAnnual
-                  ? additionalAccountsAnnualPriceToday
-                  : additionalAccountsMonthlyPriceToday}
+                {billingPeriod} - ${extraAccountsPrice}
               </div>
             </div>
 
             <div className="payment-modal-text-wrapper">
               <div className="paymodal-summary-right">Total today:</div>
-              <div className="paymodal-summary-left"></div>
+              <div className="paymodal-summary-left">
+                ${amountToday + extraAccountsPrice}
+              </div>
             </div>
             {isAnnual ? (
               <div className="payment-modal-text-wrapper">
@@ -86,21 +92,6 @@ const PaymentModal = ({
             ) : (
               <></>
             )}
-
-            {showAdditionaLAccountsView ? (
-              <div className="payment-modal-text-wrapper">
-                <div className="paymodal-summary-right">
-                  Additional Accounts:
-                </div>
-                <div className="paymodal-summary-left">
-                  {isAnnual
-                    ? additionalAccountsAnnualPriceToday
-                    : additionalAccountsMonthlyPriceToday}
-                </div>
-              </div>
-            ) : (
-              <></>
-            )}
           </div>
         </div>
 
@@ -155,3 +146,23 @@ const PaymentModal = ({
 };
 
 export default PaymentModal;
+
+/*
+
+            {showAdditionaLAccountsView ? (
+              <div className="payment-modal-text-wrapper">
+                <div className="paymodal-summary-right">
+                  Additional Accounts:
+                </div>
+                <div className="paymodal-summary-left">
+                  {isAnnual
+                    ? additionalAccountsAnnualPriceToday
+                    : additionalAccountsMonthlyPriceToday}
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
+
+
+        */

From 9234545b5c36028a9afb59f0789c3f147aa6ecfd Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 28 Jan 2024 18:51:55 -0600
Subject: [PATCH 4/5] more

---
 src/Components/Modals/PaymentModal.js   | 8 +++-----
 src/Components/SignupPage/SignupPage.js | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index 2083758..e4b236f 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -43,7 +43,7 @@ const PaymentModal = ({
   const amountToday = isAnnual
     ? annualSubscriptionPriceToday
     : monthlySubscriptionPriceToday;
-
+  const totalToday = amountToday + extraAccountsPrice;
   return (
     <Modal show="true" size="lg">
       <Modal.Header className="payment-modal-header" closeButton>
@@ -78,9 +78,7 @@ const PaymentModal = ({
 
             <div className="payment-modal-text-wrapper">
               <div className="paymodal-summary-right">Total today:</div>
-              <div className="paymodal-summary-left">
-                ${amountToday + extraAccountsPrice}
-              </div>
+              <div className="paymodal-summary-left">${totalToday}</div>
             </div>
             {isAnnual ? (
               <div className="payment-modal-text-wrapper">
@@ -137,7 +135,7 @@ const PaymentModal = ({
         <Button
           disabled={isBusy}
           className="primary-button"
-          onClick={handleSignup}
+          onClick={() => handleSignup(totalToday)}
           labelText="Signup"
         />
       </Modal.Footer>
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 27d557a..640ff05 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -324,8 +324,8 @@ const SignupPage = () => {
   }
   // ******************** END STRIPE PAY API CALL ******************** //
 
-  const handleSignup = async (e) => {
-    e.preventDefault();
+  const handleSignup = async (totalDue) => {
+    console.log("totalDue", totalDue);
     const paymentDataValues = validatePaymentData();
     if (paymentDataValues === null) {
       return;

From 091238887f17e639c9ce27141a1c5465d2dece77 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Sun, 28 Jan 2024 20:04:09 -0600
Subject: [PATCH 5/5] more

---
 src/Components/Modals/PaymentModal.js   | 38 +++++++++++++++++--------
 src/Components/SignupPage/SignupPage.js |  1 +
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js
index e4b236f..8c494b0 100644
--- a/src/Components/Modals/PaymentModal.js
+++ b/src/Components/Modals/PaymentModal.js
@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import Button from "../../pageElements/Button";
 import Modal from "react-bootstrap/Modal";
 import TextInput from "../../pageElements/TextInput";
@@ -31,9 +32,13 @@ const PaymentModal = ({
   const additionalAccountsAnnualPriceToday =
     additionalAccountsMonthlyPriceToday * 12;
 
-  const extraAccountsPrice = isAnnual
+  const tempExtraAccountsPrice = isAnnual
     ? additionalAccountsAnnualPriceToday
     : additionalAccountsMonthlyPriceToday;
+  const extraAccountsPrice =
+    tempExtraAccountsPrice === NaN || tempExtraAccountsPrice === undefined
+      ? 0
+      : 0;
   const showAdditionaLAccountsView =
     (selectedPlan[0]?.value === "partner" && numberOfAccountsToAdd > 0) ||
     (selectedPlan[0]?.value === "seniorPartner" && numberOfAccountsToAdd > 0);
@@ -44,6 +49,12 @@ const PaymentModal = ({
     ? annualSubscriptionPriceToday
     : monthlySubscriptionPriceToday;
   const totalToday = amountToday + extraAccountsPrice;
+  console.log("amoutnToday", amountToday);
+  console.log("extraAccountsPrice", extraAccountsPrice);
+
+  function handleValidateAndPay() {
+    handleSignup(totalToday);
+  }
   return (
     <Modal show="true" size="lg">
       <Modal.Header className="payment-modal-header" closeButton>
@@ -65,17 +76,20 @@ const PaymentModal = ({
                 {billingPeriod} - ${amountToday}
               </div>
             </div>
-
-            <div className="payment-modal-text-wrapper">
-              <div className="paymodal-summary-right">
-                {numberOfAccountsToAdd} Addiitonal{" "}
-                {numberOfAccountsToAdd > 1 ? `accounts` : `account`}
+            {numberOfAccountsToAdd !== undefined &&
+            numberOfAccountsToAdd > 0 ? (
+              <div className="payment-modal-text-wrapper">
+                <div className="paymodal-summary-right">
+                  {numberOfAccountsToAdd} Addiitonal{" "}
+                  {numberOfAccountsToAdd > 1 ? `accounts` : `account`}
+                </div>
+                <div className="paymodal-summary-left">
+                  {billingPeriod} - ${extraAccountsPrice}
+                </div>
               </div>
-              <div className="paymodal-summary-left">
-                {billingPeriod} - ${extraAccountsPrice}
-              </div>
-            </div>
-
+            ) : (
+              <></>
+            )}
             <div className="payment-modal-text-wrapper">
               <div className="paymodal-summary-right">Total today:</div>
               <div className="paymodal-summary-left">${totalToday}</div>
@@ -135,7 +149,7 @@ const PaymentModal = ({
         <Button
           disabled={isBusy}
           className="primary-button"
-          onClick={() => handleSignup(totalToday)}
+          onClick={handleValidateAndPay}
           labelText="Signup"
         />
       </Modal.Footer>
diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index 640ff05..274d5e6 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -325,6 +325,7 @@ const SignupPage = () => {
   // ******************** END STRIPE PAY API CALL ******************** //
 
   const handleSignup = async (totalDue) => {
+    console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>handleSignup fired");
     console.log("totalDue", totalDue);
     const paymentDataValues = validatePaymentData();
     if (paymentDataValues === null) {