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

Merge pull request #55 from kjannette/moInt3

Browse Source 
Mo int3
This commit is contained in:
S Jannette
2024-01-28 20:04:51 -06:00
committed by GitHub
parent 79942dd420 091238887f
commit 62f11093eb
3 changed files with 82 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,4 @@
import { useMemo } from "react";
import Button from "../../pageElements/Button";
import Modal from "react-bootstrap/Modal";
import TextInput from "../../pageElements/TextInput";
@@ -8,12 +9,10 @@ import Row from "react-bootstrap/Row";
import "../../styles/modals.scss";
const PaymentModal = ({
buttonLabelText,
isBusy,
paymentData,
paymentfields,
handleChangePaymentInput,
orderSummary,
handleSignUp,
setShowPaymentModal,
handleSignup,
@@ -23,18 +22,39 @@ const PaymentModal = ({
numberOfAccountsToAdd,
}) => {
const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount;
const annualAddAccountPrice = monthlyAddAccountPrice * 12;
const monthlySubscriptionPriceToday = selectedPlan[0].pricing[0].amount;
const annualSubscriptionPriceToday = selectedPlan[0].pricing[1].amount * 12;
const additionalAccountsMonthlyPriceToday =
selectedPlan[0].pricing[2].amount * numberOfAccountsToAdd;
const additionalAccountsAnnualPriceToday =
additionalAccountsMonthlyPriceToday * 12;
const tempExtraAccountsPrice = isAnnual
? additionalAccountsAnnualPriceToday
: additionalAccountsMonthlyPriceToday;
const extraAccountsPrice =
tempExtraAccountsPrice === NaN || tempExtraAccountsPrice === undefined
? 0
: 0;
const showAdditionaLAccountsView =
(selectedPlan[0]?.value === "partner" && numberOfAccountsToAdd > 0) ||
(selectedPlan[0]?.value === "seniorPartner" && numberOfAccountsToAdd > 0);
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);
console.log("numberOfAccountsToAdd", numberOfAccountsToAdd);
? annualSubscriptionPriceToday
: monthlySubscriptionPriceToday;
const totalToday = amountToday + extraAccountsPrice;
console.log("amoutnToday", amountToday);
console.log("extraAccountsPrice", extraAccountsPrice);
function handleValidateAndPay() {
handleSignup(totalToday);
}
return (
<Modal show="true" size="lg">
<Modal.Header className="payment-modal-header" closeButton>
@@ -48,7 +68,6 @@ 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:
@@ -57,25 +76,29 @@ const PaymentModal = ({
{billingPeriod} - ${amountToday}
</div>
</div>
{showAdditionaLAccountsView ? (
{numberOfAccountsToAdd !== undefined &&
numberOfAccountsToAdd > 0 ? (
<div className="payment-modal-text-wrapper">
<div className="paymodal-summary-right">
Additional Accounts:
{numberOfAccountsToAdd} Addiitonal{" "}
{numberOfAccountsToAdd > 1 ? `accounts` : `account`}
</div>
<div className="paymodal-summary-left">
{isAnnual ? (
<p>
{" "}
{numberOfAccountsToAdd}/ x 12 months = $
{annualAddAccountPrice}
</p>
) : (
<p>
{" "}
{numberOfAccountsToAdd}/per month = $
{monthlyAddAccountPrice}
</p>
)}
{billingPeriod} - ${extraAccountsPrice}
</div>
</div>
) : (
<></>
)}
<div className="payment-modal-text-wrapper">
<div className="paymodal-summary-right">Total today:</div>
<div className="paymodal-summary-left">${totalToday}</div>
</div>
{isAnnual ? (
<div className="payment-modal-text-wrapper">
<div className="paymodal-summary-right"></div>
<div className="paymodal-summary-left-bonus">
Includes 10% discount for convenient annual billing
</div>
</div>
) : (
@@ -126,7 +149,7 @@ const PaymentModal = ({
<Button
disabled={isBusy}
className="primary-button"
onClick={handleSignup}
onClick={handleValidateAndPay}
labelText="Signup"
/>
</Modal.Footer>
@@ -135,3 +158,23 @@ const PaymentModal = ({
};
export default PaymentModal;
/*
{showAdditionaLAccountsView ? (
<div className="payment-modal-text-wrapper">
<div className="paymodal-summary-right">
Additional Accounts:
</div>
<div className="paymodal-summary-left">
{isAnnual
? additionalAccountsAnnualPriceToday
: additionalAccountsMonthlyPriceToday}
</div>
</div>
) : (
<></>
)}
*/

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

@@ -58,11 +58,12 @@ const SignupPage = () => {
};
const handleChangeAccountSelect = (e, name) => {
console.log("e, name", e, name);
console.log("~~~~~~~~~~~~~~e.target.value, name", e.target.value, name);
const num = e.target.value;
setNumberOfAccountsToAdd(num);
const temp = Number(num);
setNumberOfAccountsToAdd(temp);
};
console.log("numberOfAccountsToAdd", numberOfAccountsToAdd);
const handleChangePaymentInput = (e, name) => {
const newPaymentData = handleFormDataChange(
e,
@@ -323,8 +324,9 @@ const SignupPage = () => {
}
// ******************** END STRIPE PAY API CALL ******************** //
const handleSignup = async (e) => {
e.preventDefault();
const handleSignup = async (totalDue) => {
console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>handleSignup fired");
console.log("totalDue", totalDue);
const paymentDataValues = validatePaymentData();
if (paymentDataValues === null) {
return;

7
src/styles/signup.scss
View File

@@ -261,3 +261,10 @@
margin-right: 12px;
padding-right: 12px;
}
.paymodal-summary-left-bonus {
color: #0008ea;
margin-top: -8px;
font-size: 0.82rem;
font-weight: 300;
}