Merge pull request #55 from kjannette/moInt3

Mo int3

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";
@@ -8,12 +9,10 @@ import Row from "react-bootstrap/Row";
 import "../../styles/modals.scss";
 
 const PaymentModal = ({
-  buttonLabelText,
   isBusy,
   paymentData,
   paymentfields,
   handleChangePaymentInput,
-  orderSummary,
   handleSignUp,
   setShowPaymentModal,
   handleSignup,
@@ -23,18 +22,39 @@ const PaymentModal = ({
   numberOfAccountsToAdd,
 }) => {
   const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount;
-  const annualAddAccountPrice = monthlyAddAccountPrice * 12;
+
+  const monthlySubscriptionPriceToday = selectedPlan[0].pricing[0].amount;
+  const annualSubscriptionPriceToday = selectedPlan[0].pricing[1].amount * 12;
+
+  const additionalAccountsMonthlyPriceToday =
+    selectedPlan[0].pricing[2].amount * numberOfAccountsToAdd;
+
+  const additionalAccountsAnnualPriceToday =
+    additionalAccountsMonthlyPriceToday * 12;
+
+  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);
+
   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;
+  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>
@@ -48,7 +68,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,25 +76,29 @@ const PaymentModal = ({
                 {billingPeriod} - ${amountToday}
               </div>
             </div>
-            {showAdditionaLAccountsView ? (
+            {numberOfAccountsToAdd !== undefined &&
+            numberOfAccountsToAdd > 0 ? (
               <div className="payment-modal-text-wrapper">
                 <div className="paymodal-summary-right">
-                  Additional Accounts:
+                  {numberOfAccountsToAdd} Addiitonal{" "}
+                  {numberOfAccountsToAdd > 1 ? `accounts` : `account`}
                 </div>
                 <div className="paymodal-summary-left">
-                  {isAnnual ? (
-                    <p>
-                      {" "}
-                      {numberOfAccountsToAdd}/ x 12 months = $
-                      {annualAddAccountPrice}
-                    </p>
-                  ) : (
-                    <p>
-                      {" "}
-                      {numberOfAccountsToAdd}/per month = $
-                      {monthlyAddAccountPrice}
-                    </p>
-                  )}
+                  {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>
+            </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>
             ) : (
@@ -126,7 +149,7 @@ const PaymentModal = ({
         <Button
           disabled={isBusy}
           className="primary-button"
-          onClick={handleSignup}
+          onClick={handleValidateAndPay}
           labelText="Signup"
         />
       </Modal.Footer>
@@ -135,3 +158,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>
+            ) : (
+              <></>
+            )}
+
+
+        */

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,
@@ -323,8 +324,9 @@ const SignupPage = () => {
   }
   // ******************** END STRIPE PAY API CALL ******************** //
 
-  const handleSignup = async (e) => {
-    e.preventDefault();
+  const handleSignup = async (totalDue) => {
+    console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>handleSignup fired");
+    console.log("totalDue", totalDue);
     const paymentDataValues = validatePaymentData();
     if (paymentDataValues === null) {
       return;

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;
+}