diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js index 577aadd..cb7160e 100644 --- a/src/Components/Modals/PaymentModal.js +++ b/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 ( @@ -32,6 +36,12 @@ const PaymentModal = ({
Subscription Type:
{planName}
+
+
Billing Period/Amount:
+
+ {billingPeriod} - ${amountToday} +
+
{splitEvery(Object.keys(paymentfields), fieldsChunkSize).map( (names, j) => ( diff --git a/src/styles/modals.scss b/src/styles/modals.scss index 8b4cd48..d1dfa23 100644 --- a/src/styles/modals.scss +++ b/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; +}