more

src/Components/Modals/PaymentModal.js

@@ -20,28 +20,69 @@ const PaymentModal = ({
   selectedPlan,
   isAnnual,
   fieldsChunkSize,
+  numberOfAccountsToAdd,
 }) => {
+  const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount;
+  const annualAddAccountPrice = monthlyAddAccountPrice * 12;
+  const showAdditionaLAccountsView =
+    selectedPlan[0]?.value === "partner" ||
+    selectedPlan[0]?.value === "seniorPartner";
   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);
   return (
     <Modal show="true" size="lg">
       <Modal.Header className="payment-modal-header" closeButton>
         <Modal.Title>Enter Payment Information</Modal.Title>
       </Modal.Header>
       <Modal.Body>
+        <div className="payment-summary-header">Order Summary</div>
+        <div className="order-summary-container">
+          <div className="paymentmodal-order-summarybox">
             <div className="payment-modal-text-wrapper">
               <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:</div>
+              <div className="paymodal-summary-right">
+                Billing Period/Amount:
+              </div>
               <div className="paymodal-summary-left">
                 {billingPeriod} - ${amountToday}
               </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}/per year = $
+                      {annualAddAccountPrice}
+                    </p>
+                  ) : (
+                    <p>
+                      {" "}
+                      {numberOfAccountsToAdd}/per month = $
+                      {monthlyAddAccountPrice}
+                    </p>
+                  )}
+                </div>
+              </div>
+            ) : (
+              <></>
+            )}
+          </div>
+        </div>
+
         <Form className="payment-form">
           {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
             (names, j) => (

src/Components/SignupPage/SignupPage.js

@@ -41,7 +41,7 @@ const SignupPage = () => {
   const [showSelectPlan, setShowSelectPlan] = useState(false);
   const [activeRadioOption, setActiveRadioOption] = useState("partner");
   const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
-  const [isAnnual, setIsAnnual] = useState(false);
+  const [isAnnual, setIsAnnual] = useState(true);
   const stripe = new Stripe(stripeApiKey);
   const apiUrl =
     process.env.NODE_ENV === "development"
@@ -373,12 +373,14 @@ const SignupPage = () => {
 
   const showNoticeOnPage = "" !== notice && !showPaymentModal;
   const addAccountCopy =
-    selectedPlan[0].value === "seniorPartner"
+    selectedPlan[0]?.value === "seniorPartner"
       ? "Add up to eight additional accounts to your subscripton"
       : "Add up to two additional accounts to your subscripton";
   const showAddAccountBtn =
     selectedPlan[0].value === "seniorPartner" ||
     selectedPlan[0].value === "partner";
+
+  console.log("isAnnial on signup page", isAnnual);
   return (
     <div className="signup-super-container">
       <div className="signup-sub-container">

src/Constants/Fields/RadioFields.js

@@ -29,6 +29,7 @@ export const signupRadioFields = [
     pricing: [
       { type: "monthly", amount: 99 },
       { type: "annDiscount", amount: 89 },
+      { type: "additionalAccount", amount: 49 },
     ],
   },
   {
@@ -44,6 +45,7 @@ export const signupRadioFields = [
     pricing: [
       { type: "monthly", amount: 149 },
       { type: "annDiscount", amount: 129 },
+      { type: "additionalAccount", amount: 39 },
     ],
   },
 ];

src/pageElements/Radio.js

@@ -15,7 +15,7 @@ const Radio = (props) => {
   } = props;
   const classCheckbox = "checkbox";
   const classOption = "option";
-  const index = isAnnual ? Number("0") : Number("1");
+  const index = isAnnual ? Number("1") : Number("0");
 
   return (
     <div className="radio-container">

src/styles/modals.scss

@@ -77,6 +77,17 @@
   width: 740px;
 }
 
+.order-summary-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin-right: 20px;
+  padding-right: 20px;
+}
+
+.paymentmodal-order-summarybox {
+  width: 90%;
+}
 .payment-modal-text-wrapper {
   margin: 6px 0px 6px 0px;
   padding-left: 4px;
@@ -96,3 +107,8 @@
 .paymodal-summary-left {
   font-weight: 300;
 }
+
+.payment-summary-header {
+  border-bottom: 1px solid #cecece;
+  margin-bottom: 12px;
+}