kjannette/ax3Client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more

Browse Source
This commit is contained in:
Kenneth Jannette
2024-01-28 16:46:39 -06:00
parent 3eb159eae3
commit 77bca61bab
5 changed files with 72 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/Components/Modals/PaymentModal.js
View File

@@ -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-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 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) => (