From 57de767624df6cfc266a1df244f1978adb7d7df0 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Sun, 28 Jan 2024 15:27:04 -0600 Subject: [PATCH 1/4] more --- src/Components/Modals/PaymentModal.js | 12 +++++++++++- src/Components/SignupPage/SignupPage.js | 1 - 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js index 9807c85..dd0ca73 100644 --- a/src/Components/Modals/PaymentModal.js +++ b/src/Components/Modals/PaymentModal.js @@ -21,13 +21,23 @@ const PaymentModal = ({ isAnnual, fieldsChunkSize, }) => { + console.log("orderSummary", orderSummary); + let price; + if (orderSummary?.plan?.pricing[0].amount) { + console.log(orderSummary?.plan?.pricing[0]); + } + //? orderSummary?.plan?.pricing[1].amount + //: orderSummary?.plan?.pricing[0].amount; + const planName = "orderSummary.plan.name;"; return ( Enter Payment Information -
{orderSummary.plan}
+
+ Subrscription Type:{planName} +
{splitEvery(Object.keys(paymentfields), fieldsChunkSize).map( (names, j) => ( diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 2d0ad04..5bf4ed8 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -204,7 +204,6 @@ const SignupPage = () => { const handleProceedToPayment = (e) => { e.preventDefault(); - setShowPaymentModal(true); }; From 6f060639a1849e0bbf17cbbe36f64cc84156f6ab Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Sun, 28 Jan 2024 15:42:29 -0600 Subject: [PATCH 2/4] more --- src/Components/Modals/PaymentModal.js | 14 ++++---------- src/Components/SignupPage/SignupPage.js | 2 -- src/styles/modals.scss | 9 ++++++++- 3 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js index dd0ca73..577aadd 100644 --- a/src/Components/Modals/PaymentModal.js +++ b/src/Components/Modals/PaymentModal.js @@ -21,22 +21,16 @@ const PaymentModal = ({ isAnnual, fieldsChunkSize, }) => { - console.log("orderSummary", orderSummary); - let price; - if (orderSummary?.plan?.pricing[0].amount) { - console.log(orderSummary?.plan?.pricing[0]); - } - //? orderSummary?.plan?.pricing[1].amount - //: orderSummary?.plan?.pricing[0].amount; - const planName = "orderSummary.plan.name;"; + const planName = selectedPlan[0].name ? selectedPlan[0].name : null; return ( - + Enter Payment Information
- Subrscription Type:{planName} +
Subscription Type:
+
{planName}
{splitEvery(Object.keys(paymentfields), fieldsChunkSize).map( diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 5bf4ed8..d00985c 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -49,7 +49,6 @@ const SignupPage = () => { : process.env.REACT_APP_API_PROD; const [showAddAccount, setShowAddAccount] = useState(false); const [numberOfAccountsToAdd, setNumberOfAccountsToAdd] = useState(); - const orderSummary = { plan: selectedPlan, price: 1 }; const handleChangeInput = (e, name) => { const newData = handleFormDataChange(e, name, data, signupFields); @@ -607,7 +606,6 @@ const SignupPage = () => { setShowPaymentModal={setShowPaymentModal} handleChangePaymentInput={handleChangePaymentInput} handleSignup={handleSignup} - orderSummary={orderSummary} notice={notice} setNotice={setNotice} selectedPlan={selectedPlan} diff --git a/src/styles/modals.scss b/src/styles/modals.scss index fcdcad9..8b4cd48 100644 --- a/src/styles/modals.scss +++ b/src/styles/modals.scss @@ -78,6 +78,13 @@ } .payment-modal-text-wrapper { - margin: 8px 0px 18px 0px; + margin: 6px 0px 6px 0px; padding-left: 4px; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.payment-modal-header { + padding-bottom: 4px !important; } From 3eb159eae3b16d4cc86aca32ab7974ae1d715ace Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Sun, 28 Jan 2024 15:50:43 -0600 Subject: [PATCH 3/4] more --- src/Components/Modals/PaymentModal.js | 10 ++++++++++ src/styles/modals.scss | 8 ++++++++ 2 files changed, 18 insertions(+) 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; +} From 77bca61babbe6759ddcb0c7c88b36e25632cdf01 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Sun, 28 Jan 2024 16:46:39 -0600 Subject: [PATCH 4/4] more --- src/Components/Modals/PaymentModal.js | 57 +++++++++++++++++++++---- src/Components/SignupPage/SignupPage.js | 6 ++- src/Constants/Fields/RadioFields.js | 2 + src/pageElements/Radio.js | 2 +- src/styles/modals.scss | 16 +++++++ 5 files changed, 72 insertions(+), 11 deletions(-) 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; +}