diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index bdcf3ab..cc80e1a 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -13,6 +13,7 @@ import { v4 as uuidv4 } from "uuid"; import { collection, setDoc, doc } from "firebase/firestore"; import LoadingSpinner from "../../pageElements/LoadingSpinner"; import { splitEvery } from "../../Utils/Array"; +import { ArrowLeftSquare, ArrowRightSquare } from "react-bootstrap-icons"; import { getFormDataDefaults, getValidatedFormData, @@ -62,6 +63,8 @@ const SignupPage = () => { const [showPromoModal, setShowPromoModal] = useState(false); const [issueText, setIssueText] = useState(""); const [isAnnual, setIsAnnual] = useState(1); + const [valX, setValX] = useState(1); + const [valY, setValY] = useState(4); const handleChangeInput = (e, name) => { const newData = handleFormDataChange(e, name, data, signupFields); @@ -105,6 +108,28 @@ const SignupPage = () => { setActiveRadioOption(tempPlan[0].value); }; + const handleLeftArrowClick = () => { + if (valX == 0) { + return; + } else { + const tempx = valX - 1; + const tempy = valY - 1; + setValX(tempx); + setValY(tempy); + } + }; + + const handleRightArrowClick = () => { + if (valX == 1) { + return; + } else { + const tempx = valX + 1; + const tempy = valY + 1; + setValX(tempx); + setValY(tempy); + } + }; + const vals = [ [1, 2, 3, 4, 5, 6, 7, 8], [1, 2], @@ -287,7 +312,7 @@ const SignupPage = () => { }; const handleToggle = (val) => setIsAnnual(val); - console.log("isAnnual", isAnnual); + const handleAddAccounts = () => { setShowAddAccount(!showAddAccount); }; @@ -439,7 +464,7 @@ const SignupPage = () => { const today = new Date(); const subscriptionCreated = today; const subscriptionPeriodStart = today; - const subscriptionPeriodEnd = "it edns whatever"; //today.setDate(today.getDate() + 30); + const subscriptionPeriodEnd = "it ends whatever"; //today.setDate(today.getDate() + 30); const subscriptionId = uuidv4(); const userCredential = await createUserWithEmailAndPassword( @@ -609,25 +634,46 @@ const SignupPage = () => { -
- {signupRadioFields?.map((option, index) => ( -
- -
- ))} + +
+
+ +
+
+ {signupRadioFields?.slice(valX, valY).map((option, index) => ( +
+ +
+ ))} +
+
+ +
{showAddAccount && !isBusy ? (
@@ -758,24 +804,3 @@ const SignupPage = () => { }; export default SignupPage; - -/* - - - const userDataValues = { - barNumber: "232323", - city: "broolyn", - email: "j@s.com", - firm: "asdf", - firstName: "ghghg", - lastName: "hhhhh", - password: "123344556", - practiceArea: "dfdfdf", - state: "New York", - streetAddress: "123 Main", - telephone: "(313) 555-5555", - zipCode: "12345", - }; - - -*/ diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 860bd30..409a34a 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -1,4 +1,21 @@ export const signupRadioFields = [ + { + name: "Of Counsel", + label: "Of Counsel", + value: "ofCounsel", + description: [ + "One document/one-time fee", + "Documents conform with state rules", + "Intellidraft AI - downloadable document in minutes", + "24/7 support", + ], + details: "", + docsAllowedPerMonth: 1, + pricing: [ + { type: "monthly", amount: 59 }, + { type: "annDiscount", amount: 59 }, + ], + }, { name: "Associate", label: "Associate", @@ -6,9 +23,10 @@ export const signupRadioFields = [ description: [ "1 document per month", "Carryover 1 unused document each subscription period", - "Documents conforming with state rules", + "Documents conform with state rules", + "Intellidraft AI - downloadable document in minutes", "24/7 support", - "First month free!", + "First month is free!", ], details: "", docsAllowedPerMonth: 1, @@ -25,7 +43,8 @@ export const signupRadioFields = [ description: [ "3 documents per month", "Carryover 1 unused document per month", - "Documents conforming with state rules", + "Documents conform with state rules", + "Intellidraft AI - downloadable document in minutes", "Up to 2 additional accounts: $49/each", "24/7 support", ], @@ -43,7 +62,8 @@ export const signupRadioFields = [ value: "seniorPartner", description: [ "Unlimited documents.", - "Documents conforming with state rules", + "Documents conform with state rules", + "Intellidraft AI - downloadable document in minutes", "24/7 Triage-level support response", "Up to 8 additional accounts at $39/each", ], diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index efe6a63..59d6b71 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -34,16 +34,16 @@ const Radio = (props) => { > {value == activeRadioOption && !isUpgrade ? (
- +
) : (
- +
)}
{`${name}`}
- {parentIndex > 2 ? ( + {value === "ofCounsel" ? (
{`$${price[index]["amount"]}/doc`}
@@ -58,7 +58,7 @@ const Radio = (props) => {
{description.map((item, i) => { const el = - item == "First month free!" && !isUpgrade ? ( + item == "First month is free!" && !isUpgrade ? (

{item}

diff --git a/src/styles/radio.scss b/src/styles/radio.scss index ae5039b..c150f0c 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -1,31 +1,37 @@ .radio-circle-container { display: flex; flex-direction: column; + align-items: center; + margin-right: auto; + margin-left: auto; &.upgrade { background-color: rgb(149, 149, 149); } &.not-upgrade { background-color: #fff; } - height: 290px; - margin: 10px 8px 0px 8px; + height: 345px; border-radius: 5px; border: 1px solid #d4d4d4; } .radio-circle-top { + width: 248px; height: 40px; display: flex; flex-direction: row; - margin-top: 12px; + margin-top: 18px; margin-left: 2px; + border: 1px solid var(--accent-orange-light); + border-radius: 10px; } .radio-circle-lower { display: flex; flex-direction: column; - margin-left: 12px; - padding-left: 12px; + justify-content: center; + margin-left: auto; + margin-right: auto; } .radio-circle-box { diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 2482d66..3ea08a6 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -58,22 +58,23 @@ } .signup-button-box { - width: 100%; + width: 830px; display: flex; flex-direction: row; justify-content: flex-end; - padding-right: 14px; - margin-top: 28px; + padding-right: 24px; + margin-top: 16px; } .signup-freebie-box { - width: 100%; + width: 830px; display: flex; flex-direction: row; justify-content: flex-end; - padding-right: 22px; + padding-right: 20px; margin-top: 12px; margin-bottom: 24px; + margin-right: 16px; font-size: 1.15rem; color: #2759ff; } @@ -86,7 +87,8 @@ display: flex; flex-direction: row; height: 55px; - width: 900px; + width: 830px; + margin-bottom: 10px; } .plan-header-right { @@ -115,9 +117,13 @@ .select-plan-container { display: flex; flex-direction: column; + justify-content: center; + align-items: center; + margin-right: auto; + margin-left: auto; margin-top: 24px; width: 920px; - min-height: 510px; + min-height: 540px; border-radius: 10px; background-color: rgb(240, 247, 250); border: 1px solid #e9e9e9; @@ -164,13 +170,28 @@ flex-direction: column; } +.radio-group-super { + width: 912px; + display: flex; + flex-direction: row; + justify-content: center; +} + .radio-group-box { display: flex; flex-direction: row; - flex-wrap: wrap; - justify-content: flex-end; - padding: 6px; - width: 100%; + justify-content: center; + padding: 2px; + width: 815px; +} + +.toggle-arrow-box { + width: 30px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: auto; } .select-plan-summary-box { @@ -197,8 +218,8 @@ } .signup-radio-container { - width: 300px; - height: 100%; + width: 270px; + margin: 0px 3px; } .signup-feat-item { @@ -217,11 +238,13 @@ .offer-div { display: flex; justify-content: center; - align-items: center; height: 30px; border: 1px solid #fdbe72; border-radius: 10px; margin-top: 25px; + margin-left: auto; + margin-right: auto; + width: 220px; } .show-addaccount-wrapper {