more

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>
-
+            {numberOfAccountsToAdd !== undefined &&
-            <div className="payment-modal-text-wrapper">
+            numberOfAccountsToAdd > 0 ? (
-              <div className="paymodal-summary-right">
+              <div className="payment-modal-text-wrapper">
-                {numberOfAccountsToAdd} Addiitonal{" "}
+                <div className="paymodal-summary-right">
-                {numberOfAccountsToAdd > 1 ? `accounts` : `account`}
+                  {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>

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) {