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

6
src/Components/SignupPage/SignupPage.js
View File

@@ -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">