diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js index cb7160e..09cc641 100644 --- a/src/Components/Modals/PaymentModal.js +++ b/src/Components/Modals/PaymentModal.js @@ -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 ( Enter Payment Information -
-
Subscription Type:
-
{planName}
-
-
-
Billing Period/Amount:
-
- {billingPeriod} - ${amountToday} +
Order Summary
+
+
+
+
Subscription Type:
+
{planName}
+
+ +
+
+ Billing Period/Amount: +
+
+ {billingPeriod} - ${amountToday} +
+
+ {showAdditionaLAccountsView ? ( +
+
+ Additional Accounts: +
+
+ {isAnnual ? ( +

+ {" "} + {numberOfAccountsToAdd}/per year = $ + {annualAddAccountPrice} +

+ ) : ( +

+ {" "} + {numberOfAccountsToAdd}/per month = $ + {monthlyAddAccountPrice} +

+ )} +
+
+ ) : ( + <> + )}
+
{splitEvery(Object.keys(paymentfields), fieldsChunkSize).map( (names, j) => ( diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index d00985c..80d5c9b 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -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 (
diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index af4feb7..83d2106 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -29,6 +29,7 @@ export const signupRadioFields = [ pricing: [ { type: "monthly", amount: 99 }, { type: "annDiscount", amount: 89 }, + { type: "additionalAccount", amount: 49 }, ], }, { @@ -44,6 +45,7 @@ export const signupRadioFields = [ pricing: [ { type: "monthly", amount: 149 }, { type: "annDiscount", amount: 129 }, + { type: "additionalAccount", amount: 39 }, ], }, ]; diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 6f3cbfb..82da4c7 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -15,7 +15,7 @@ const Radio = (props) => { } = props; const classCheckbox = "checkbox"; const classOption = "option"; - const index = isAnnual ? Number("0") : Number("1"); + const index = isAnnual ? Number("1") : Number("0"); return (
diff --git a/src/styles/modals.scss b/src/styles/modals.scss index d1dfa23..0d2296b 100644 --- a/src/styles/modals.scss +++ b/src/styles/modals.scss @@ -77,6 +77,17 @@ width: 740px; } +.order-summary-container { + display: flex; + flex-direction: row; + justify-content: flex-end; + margin-right: 20px; + padding-right: 20px; +} + +.paymentmodal-order-summarybox { + width: 90%; +} .payment-modal-text-wrapper { margin: 6px 0px 6px 0px; padding-left: 4px; @@ -96,3 +107,8 @@ .paymodal-summary-left { font-weight: 300; } + +.payment-summary-header { + border-bottom: 1px solid #cecece; + margin-bottom: 12px; +}