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 17:30:38 -06:00
parent 66851fbfd3
commit 5b9a9d5d8b
4 changed files with 65 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -25,8 +25,8 @@ const PaymentModal = ({
const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount; const monthlyAddAccountPrice = selectedPlan[0].pricing[2].amount;
const annualAddAccountPrice = monthlyAddAccountPrice * 12; const annualAddAccountPrice = monthlyAddAccountPrice * 12;
const showAdditionaLAccountsView = const showAdditionaLAccountsView =
selectedPlan[0]?.value === "partner" || (selectedPlan[0]?.value === "partner" && numberOfAccountsToAdd > 0) ||
selectedPlan[0]?.value === "seniorPartner"; (selectedPlan[0]?.value === "seniorPartner" && numberOfAccountsToAdd > 0);
const planName = selectedPlan[0].name ? selectedPlan[0].name : null; const planName = selectedPlan[0].name ? selectedPlan[0].name : null;
const billingPeriod = isAnnual ? "Annually" : "Monthly"; const billingPeriod = isAnnual ? "Annually" : "Monthly";
const amountToday = isAnnual const amountToday = isAnnual
@@ -34,6 +34,7 @@ const PaymentModal = ({
: selectedPlan[0]?.pricing[1]?.amount; : selectedPlan[0]?.pricing[1]?.amount;
console.log("annualAddAccountPrice", annualAddAccountPrice); console.log("annualAddAccountPrice", annualAddAccountPrice);
console.log("isAnnual", isAnnual); console.log("isAnnual", isAnnual);
console.log("numberOfAccountsToAdd", numberOfAccountsToAdd);
return ( return (
<Modal show="true" size="lg"> <Modal show="true" size="lg">
<Modal.Header className="payment-modal-header" closeButton> <Modal.Header className="payment-modal-header" closeButton>
@@ -65,7 +66,7 @@ const PaymentModal = ({
{isAnnual ? ( {isAnnual ? (
<p> <p>
{" "} {" "}
{numberOfAccountsToAdd}/per year = $ {numberOfAccountsToAdd}/ x 12 months = $
{annualAddAccountPrice} {annualAddAccountPrice}
</p> </p>
) : ( ) : (

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

@@ -374,8 +374,8 @@ const SignupPage = () => {
const showNoticeOnPage = "" !== notice && !showPaymentModal; const showNoticeOnPage = "" !== notice && !showPaymentModal;
const addAccountCopy = const addAccountCopy =
selectedPlan[0]?.value === "seniorPartner" selectedPlan[0]?.value === "seniorPartner"
? "Add up to eight additional accounts to your subscripton" ? "Add up to eight"
: "Add up to two additional accounts to your subscripton"; : "Add up to two";
const showAddAccountBtn = const showAddAccountBtn =
selectedPlan[0].value === "seniorPartner" || selectedPlan[0].value === "seniorPartner" ||
selectedPlan[0].value === "partner"; selectedPlan[0].value === "partner";
@@ -506,59 +506,60 @@ const SignupPage = () => {
))} ))}
</div> </div>
{showAddAccount ? ( {showAddAccount ? (
<div className="show-addaccount-container"> <div className="show-addaccount-wrapper">
{" "} <div className="show-addaccount-container">
<div className="plan-header-right-lower"> <div className="plan-header-right-lower">
<h5 className="signup-button-wrapper-text"> <h5 className="signup-button-wrapper-text">
Add additional accounts Add additional accounts
</h5> </h5>
<p className="signup-accounts-info"> <p className="signup-accounts-info">
account username(s) and access will be setup later Username(s) and access will be setup later
</p> </p>
</div>
<div className="signup-select-wrapper">
<div className="add-account-copy-wrapper">
<div className="add-acctwrapz">{addAccountCopy}</div>
</div> </div>
<div className="signup-select-box"> <div className="signup-select-wrapper">
<select <div className="add-account-copy-wrapper">
id="accountNo" <div className="add-acctwrapz">{addAccountCopy}</div>
className={`form-select`} </div>
value={numberOfAccountsToAdd} <div className="signup-select-box">
name={"addAccountsSelect"} <select
onChange={(e) => id="accountNo"
handleChangeAccountSelect(e, "addAccountsSelect") className={`form-select`}
} value={numberOfAccountsToAdd}
> name={"addAccountsSelect"}
<option onChange={(e) =>
id="ddlProducts" handleChangeAccountSelect(e, "addAccountsSelect")
className={`select-option`} }
value="" >
></option>
{selectAdditionalAccountValues.map((item, i) => (
<option <option
id="ddlProducts" id="ddlProducts"
className={`select-option`} className={`select-option`}
key={`item${i}`} value=""
> ></option>
{item} {selectAdditionalAccountValues.map((item, i) => (
</option> <option
))} id="ddlProducts"
</select> className={`select-option`}
key={`item${i}`}
>
{item}
</option>
))}
</select>
</div>
</div> </div>
</div> <div className="details-button-box">
<div className="details-button-box">
<Button
className="secondary-button back-button"
onClick={handleCancelAdd}
labelText="Cancel"
/>
<div className="upload-button-box">
<Button <Button
className="p-2 mr-2 primary-button" className="secondary-button back-button"
onClick={handleAdd} onClick={handleCancelAdd}
labelText="Add And Proceed To Payment" labelText="Cancel"
/> />
<div className="upload-button-box">
<Button
className="p-2 mr-2 primary-button"
onClick={handleAdd}
labelText="Add And Proceed To Payment"
/>
</div>
</div> </div>
</div> </div>
</div> </div>

2
src/styles/modals.scss
View File

@@ -110,5 +110,5 @@
.payment-summary-header { .payment-summary-header {
border-bottom: 1px solid #cecece; border-bottom: 1px solid #cecece;
margin-bottom: 12px; margin-bottom: 4px;
} }

12
src/styles/signup.scss
View File

@@ -87,6 +87,8 @@
.plan-header-right-low { .plan-header-right-low {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center;
margin: auto;
padding: 12px 14px; padding: 12px 14px;
width: 100%; width: 100%;
} }
@@ -207,11 +209,19 @@
margin-top: 25px; margin-top: 25px;
} }
.show-addaccount-wrapper {
display: flex;
flex-direction: row;
justify-content: flex-end;
width: 100%;
}
.show-addaccount-container { .show-addaccount-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 880px; width: 578px;
min-height: 200px; min-height: 200px;
margin-right: 14px;
padding: 12px; padding: 12px;
border-radius: 10px; border-radius: 10px;
background-color: #fff; background-color: #fff;