more

src/Components/Modals/PaymentModal.js

@@ -22,6 +22,10 @@ const PaymentModal = ({
   fieldsChunkSize,
 }) => {
   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;
   return (
     <Modal show="true" size="lg">
       <Modal.Header className="payment-modal-header" closeButton>
@@ -32,6 +36,12 @@ 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:</div>
+          <div className="paymodal-summary-left">
+            {billingPeriod} - ${amountToday}
+          </div>
+        </div>
         <Form className="payment-form">
           {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
             (names, j) => (

src/styles/modals.scss

@@ -88,3 +88,11 @@
 .payment-modal-header {
   padding-bottom: 4px !important;
 }
+
+.paymodal-summary-right {
+  font-weight: 500;
+}
+
+.paymodal-summary-left {
+  font-weight: 300;
+}