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

Merge pull request #87 from kjannette/preprod

Browse Source 
Preprod
This commit is contained in:
S Jannette
2024-02-05 16:41:06 -06:00
committed by GitHub
parent 9fecaca15b 60f2a30fa5
commit eb7789f31b
4 changed files with 152 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,9 +43,12 @@ const SignupPage = () => {
getFormDataDefaults(paymentfields) getFormDataDefaults(paymentfields)
); );
const [showPaymentModal, setShowPaymentModal] = useState(false); const [showPaymentModal, setShowPaymentModal] = useState(false);
/*
const [showSelectPlan, setShowSelectPlan] = useState( const [showSelectPlan, setShowSelectPlan] = useState(
isUpgrade ? true : false isUpgrade ? true : false
); );
*/
const [showSelectPlan, setShowSelectPlan] = useState(true);
const [activeRadioOption, setActiveRadioOption] = useState("partner"); const [activeRadioOption, setActiveRadioOption] = useState("partner");
const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]); const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
const [isAnnual, setIsAnnual] = useState(1); const [isAnnual, setIsAnnual] = useState(1);
@@ -508,128 +511,127 @@ const SignupPage = () => {
{!isUpgrade && !isBusy ? signupForm : <></>} {!isUpgrade && !isBusy ? signupForm : <></>}
{showSelectPlan && !isBusy ? ( {showSelectPlan && !isBusy ? (
<div className="select-plan-container"> <div className="select-plan-container">
<div className="select-sub-left"> <div className="select-plan-header">
<div className="select-plan-header"> <div className="plan-header-right">
<div className="plan-header-right"> <h5 className="signup-subheader-text">
<h5 className="signup-subheader-text"> Select a subscription plan
Select a subscription plan </h5>
</h5> </div>
</div> <div className="plan-header-left">
<div className="plan-header-left"> <div className="select-toggle-box">
<div className="select-toggle-box"> <p className="select-billing-text">Billed annually</p>
<p className="select-billing-text">Billed annually</p> <Toggle onClick={handleToggle} />
<Toggle onClick={handleToggle} /> <p className="select-billing-text">Billed montly</p>
<p className="select-billing-text">Billed montly</p>
</div>
</div> </div>
</div> </div>
<div className="radio-group-box"> </div>
{signupRadioFields?.map((option, index) => ( <div className="radio-group-box">
<div className="signup-radio-container"> {signupRadioFields?.map((option, index) => (
<Radio <div className="signup-radio-container">
onClick={handleChangeRadioInput} <Radio
value={option.value} onClick={handleChangeRadioInput}
name={option.name} value={option.value}
description={option.description} name={option.name}
details={option.details} description={option.description}
activeRadioOption={activeRadioOption} details={option.details}
price={option.pricing} activeRadioOption={activeRadioOption}
isAnnual={isAnnual} price={option.pricing}
isUpgrade={index < disableIndex ? true : false} isAnnual={isAnnual}
disabled={index < disableIndex ? true : false} isUpgrade={index < disableIndex ? true : false}
currentPlan={currentPlan} disabled={index < disableIndex ? true : false}
/> currentPlan={currentPlan}
parentIndex={index}
/>
</div>
))}
</div>
{showAddAccount && !isBusy ? (
<div className="show-addaccount-wrapper">
<div className="show-addaccount-container">
<div className="plan-header-right-lower">
<h5 className="signup-button-wrapper-text">
Add additional accounts
</h5>
<p className="signup-accounts-info">
User profiles will be setup later
</p>
</div> </div>
))} <div className="signup-select-wrapper">
</div> <div className="signup-select-box">
{showAddAccount && !isBusy ? ( <select
<div className="show-addaccount-wrapper"> id="accountNo"
<div className="show-addaccount-container"> className={`form-select`}
<div className="plan-header-right-lower"> value={numberOfAccountsToAdd}
<h5 className="signup-button-wrapper-text"> name={"addAccountsSelect"}
Add additional accounts onChange={(e) =>
</h5> handleChangeAccountSelect(e, "addAccountsSelect")
<p className="signup-accounts-info"> }
User profiles will be setup later >
</p> <option
</div> id="ddlProducts"
<div className="signup-select-wrapper"> className={`select-option`}
<div className="signup-select-box"> value=""
<select ></option>
id="accountNo" {selectAdditionalAccountValues.map((item, i) => (
className={`form-select`}
value={numberOfAccountsToAdd}
name={"addAccountsSelect"}
onChange={(e) =>
handleChangeAccountSelect(e, "addAccountsSelect")
}
>
<option <option
id="ddlProducts" id="ddlProducts"
className={`select-option`} className={`select-option`}
value="" key={`item${i}`}
></option> >
{selectAdditionalAccountValues.map((item, i) => ( {item}
<option </option>
id="ddlProducts" ))}
className={`select-option`} </select>
key={`item${i}`}
>
{item}
</option>
))}
</select>
</div>
</div> </div>
<div className="details-button-box"> </div>
<div className="details-button-box">
<Button
className="secondary-button back-button"
onClick={handleCancelAdd}
labelText="Cancel"
/>
<div className="upload-button-box">
<Button <Button
className="secondary-button back-button" className="p-2 mr-2 primary-button signup-proceed-btn"
onClick={handleCancelAdd} onClick={handleAdd}
labelText="Cancel" labelText="Add And Proceed To Payment"
/> />
<div className="upload-button-box">
<Button
className="p-2 mr-2 primary-button signup-proceed-btn"
onClick={handleAdd}
labelText="Add And Proceed To Payment"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
) : (
<></>
)}
<div className="signup-button-box">
{!showAddAccount && !isBusy ? (
<>
{showAddAccountBtn ? (
<Button
className="secondary-button cancel-add-account-btn"
type="button"
size="lg"
onClick={handleAddAccounts}
disabled={isBusy}
labelText="Add Account(s)"
style={{ marginTight: "12px;" }}
/>
) : (
<></>
)}
<Button
className="primary-button signup-proceed"
type="button"
size="lg"
onClick={handleProceedToPayment}
disabled={isBusy}
labelText="Proceed to Payment"
/>
</>
) : ( ) : (
<></> <></>
)} )}
<div className="signup-button-box">
{!showAddAccount && !isBusy ? (
<>
{showAddAccountBtn ? (
<Button
className="secondary-button cancel-add-account-btn"
type="button"
size="lg"
onClick={handleAddAccounts}
disabled={isBusy}
labelText="Add Account(s)"
style={{ marginTight: "12px;" }}
/>
) : (
<></>
)}
<Button
className="primary-button signup-proceed"
type="button"
size="lg"
onClick={handleProceedToPayment}
disabled={isBusy}
labelText="Proceed to Payment"
/>
</>
) : (
<></>
)}
</div>
</div> </div>
</div> </div>
) : ( ) : (

21
src/Constants/Fields/RadioFields.js
View File

@@ -5,7 +5,7 @@ export const signupRadioFields = [
value: "associate", value: "associate",
description: [ description: [
"1 document per month", "1 document per month",
"Carryover 1 document to next period", "Carryover 1 unused document each subscription period",
"Documents conforming with state rules", "Documents conforming with state rules",
"24/7 support", "24/7 support",
"First month free!", "First month free!",
@@ -24,7 +24,7 @@ export const signupRadioFields = [
value: "partner", value: "partner",
description: [ description: [
"3 documents per month", "3 documents per month",
"Carryover 2 documents to next period", "Carryover 1 unused document per month",
"Documents conforming with state rules", "Documents conforming with state rules",
"Up to 2 additional accounts: $49/each", "Up to 2 additional accounts: $49/each",
"24/7 support", "24/7 support",
@@ -55,5 +55,22 @@ export const signupRadioFields = [
{ type: "additionalAccount", amount: 39 }, { type: "additionalAccount", amount: 39 },
], ],
}, },
{
name: "Of Counsel",
label: "Of Counsel",
value: "ofCounsel",
description: [
"One document - pay as you go",
"24/7 support",
"Document conforming with state rules",
],
details: "",
docsAllowedPerMonth: 1,
pricing: [
{ type: "oneTime", amount: 59 },
{ type: "oneTime", amount: 59 },
{ type: "oneTime", amount: 59 },
],
},
]; ];
// //

13
src/pageElements/Radio.js
View File

@@ -15,6 +15,7 @@ const Radio = (props) => {
isAnnual, isAnnual,
isUpgrade, isUpgrade,
currentPlan, currentPlan,
parentIndex,
} = props; } = props;
const classCheckbox = "checkbox"; const classCheckbox = "checkbox";
@@ -43,9 +44,15 @@ const Radio = (props) => {
)} )}
<div className="radio-name-box"> {`${name}`} </div> <div className="radio-name-box"> {`${name}`} </div>
<div className="radio-price-box"> <div className="radio-price-box">
<div className="radio-price"> {parentIndex > 2 ? (
{`$${price[index]["amount"]}/mo`} <div className="radio-price">
</div> {`$${price[index]["amount"]}/doc`}
</div>
) : (
<div className="radio-price">
{`$${price[index]["amount"]}/mo`}
</div>
)}
</div> </div>
</div> </div>
<div className="radio-circle-lower"> <div className="radio-circle-lower">

30
src/styles/signup.scss
View File

@@ -11,7 +11,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 45px; margin-top: 45px;
width: 960px; width: 920px;
padding: 12px; padding: 12px;
border-radius: 10px; border-radius: 10px;
background-color: rgb(240, 247, 250); background-color: rgb(240, 247, 250);
@@ -81,13 +81,6 @@
width: 160px; width: 160px;
} }
.select-plan-container {
display: flex;
flex-direction: row;
margin-top: 24px;
width: 920px;
}
.select-plan-header { .select-plan-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -118,17 +111,22 @@
width: 50%; width: 50%;
} }
.select-plan-container {
display: flex;
flex-direction: column;
margin-top: 24px;
width: 920px;
min-height: 810px;
border-radius: 10px;
background-color: rgb(240, 247, 250);
border: 1px solid #e9e9e9;
}
.select-sub-left { .select-sub-left {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 45px;
width: 100%; width: 100%;
padding: 12px;
border-radius: 10px;
background-color: rgb(240, 247, 250);
border: 1px solid #e9e9e9;
padding: 6px;
} }
.select-sub-right { .select-sub-right {
@@ -168,9 +166,9 @@
.radio-group-box { .radio-group-box {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap;
padding: 6px; padding: 6px;
width: 100%; width: 100%;
height: 340px;
} }
.select-plan-summary-box { .select-plan-summary-box {
@@ -197,7 +195,7 @@
} }
.signup-radio-container { .signup-radio-container {
width: 350px; width: 300px;
height: 100%; height: 100%;
} }