diff --git a/src/Components/Modals/PaymentModal.js b/src/Components/Modals/PaymentModal.js index 09cc641..a76bb5b 100644 --- a/src/Components/Modals/PaymentModal.js +++ b/src/Components/Modals/PaymentModal.js @@ -25,8 +25,8 @@ const PaymentModal = ({ const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount; const annualAddAccountPrice = monthlyAddAccountPrice * 12; const showAdditionaLAccountsView = - selectedPlan[0]?.value === "partner" || - selectedPlan[0]?.value === "seniorPartner"; + (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 @@ -34,6 +34,7 @@ const PaymentModal = ({ : selectedPlan[0]?.pricing[1]?.amount; console.log("annualAddAccountPrice", annualAddAccountPrice); console.log("isAnnual", isAnnual); + console.log("numberOfAccountsToAdd", numberOfAccountsToAdd); return ( @@ -65,7 +66,7 @@ const PaymentModal = ({ {isAnnual ? (

{" "} - {numberOfAccountsToAdd}/per year = $ + {numberOfAccountsToAdd}/ x 12 months = $ {annualAddAccountPrice}

) : ( diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 80d5c9b..f64a085 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -206,6 +206,12 @@ const SignupPage = () => { setShowPaymentModal(true); }; + const handleAdd = () => { + //add accounts, close section + setShowAddAccount(!showAddAccount); + setShowPaymentModal(true); + }; + const handleOpenSelectPlan = (e) => { e.preventDefault(); if (isBusy) { @@ -249,11 +255,6 @@ const SignupPage = () => { setShowAddAccount(!showAddAccount); }; - const handleAdd = () => { - //add accounts, close sectin - setShowAddAccount(!showAddAccount); - }; - // ******************** STRIPE PAY API CALL ******************** // async function handleStripeAuthorization( user, @@ -374,8 +375,8 @@ const SignupPage = () => { const showNoticeOnPage = "" !== notice && !showPaymentModal; const addAccountCopy = selectedPlan[0]?.value === "seniorPartner" - ? "Add up to eight additional accounts to your subscripton" - : "Add up to two additional accounts to your subscripton"; + ? "Add up to eight" + : "Add up to two"; const showAddAccountBtn = selectedPlan[0].value === "seniorPartner" || selectedPlan[0].value === "partner"; @@ -506,59 +507,57 @@ const SignupPage = () => { ))} {showAddAccount ? ( -
- {" "} -
-
- Add additional accounts -
-

- account username(s) and access will be setup later -

-
-
-
-
{addAccountCopy}
+
+
+
+
+ Add additional accounts +
+

+ User profiles will be setup later +

-
- + handleChangeAccountSelect(e, "addAccountsSelect") + } + > - ))} - + value="" + > + {selectAdditionalAccountValues.map((item, i) => ( + + ))} + +
-
-
-
diff --git a/src/styles/modals.scss b/src/styles/modals.scss index 0d2296b..f875a70 100644 --- a/src/styles/modals.scss +++ b/src/styles/modals.scss @@ -110,5 +110,5 @@ .payment-summary-header { border-bottom: 1px solid #cecece; - margin-bottom: 12px; + margin-bottom: 4px; } diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 800303e..f097ed2 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -84,11 +84,12 @@ width: 50%; } -.plan-header-right-low { +.plan-header-right-lower { display: flex; - flex-direction: row; - padding: 12px 14px; - width: 100%; + flex-direction: column; + justify-content: center; + margin-left: auto; + margin-right: auto; } .plan-header-left { @@ -207,11 +208,19 @@ margin-top: 25px; } +.show-addaccount-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-end; + width: 100%; +} + .show-addaccount-container { display: flex; flex-direction: column; - width: 880px; + width: 578px; min-height: 200px; + margin-right: 14px; padding: 12px; border-radius: 10px; background-color: #fff; @@ -221,8 +230,8 @@ .signup-accounts-info { font-weight: 300; font-size: 0.93rem; - margin-top: 0px; - margin-left: 5px; + margin-left: auto; + margin-right: auto; } .signup-select-wrapper { @@ -234,7 +243,7 @@ } .signup-select-box { - width: 90px; + width: 230px; margin-left: auto; margin-top: 12px; margin-bottom: 12px; @@ -247,7 +256,6 @@ .add-account-copy-wrapper { display: flex; flex-direction: row; - width: 800px; justify-content: flex-end; align-items: center; margin-right: 12px;