Merge pull request #53 from kjannette/moInt

Mo int

src/Components/Modals/PaymentModal.js

@@ -20,14 +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 closeButton>
+      <Modal.Header className="payment-modal-header" closeButton>
         <Modal.Title>Enter Payment Information</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <div className="payment-modal-text-wrapper">{orderSummary.plan}</div>
+        <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-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"
@@ -49,7 +49,6 @@ const SignupPage = () => {
       : process.env.REACT_APP_API_PROD;
   const [showAddAccount, setShowAddAccount] = useState(false);
   const [numberOfAccountsToAdd, setNumberOfAccountsToAdd] = useState();
-  const orderSummary = { plan: selectedPlan, price: 1 };
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupFields);
@@ -204,7 +203,6 @@ const SignupPage = () => {
 
   const handleProceedToPayment = (e) => {
     e.preventDefault();
-
     setShowPaymentModal(true);
   };
 
@@ -375,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">
@@ -608,7 +608,6 @@ const SignupPage = () => {
           setShowPaymentModal={setShowPaymentModal}
           handleChangePaymentInput={handleChangePaymentInput}
           handleSignup={handleSignup}
-          orderSummary={orderSummary}
           notice={notice}
           setNotice={setNotice}
           selectedPlan={selectedPlan}

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,7 +77,38 @@
   width: 740px;
 }
 
-.payment-modal-text-wrapper {
-  margin: 8px 0px 18px 0px;
-  padding-left: 4px;
+.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;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.payment-modal-header {
+  padding-bottom: 4px !important;
+}
+
+.paymodal-summary-right {
+  font-weight: 500;
+}
+
+.paymodal-summary-left {
+  font-weight: 300;
+}
+
+.payment-summary-header {
+  border-bottom: 1px solid #cecece;
+  margin-bottom: 12px;
 }