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