From 7cd03d6bdcf50da5db2b75aaecb560f9083d61a5 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Sat, 27 Jan 2024 13:15:09 -0600 Subject: [PATCH 1/5] more --- src/Components/SignupPage/SignupPage.js | 9 +++++---- src/pageElements/Radio.js | 7 +++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index f808b42..5d916ba 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -40,7 +40,7 @@ const SignupPage = () => { const [showSelectPlan, setShowSelectPlan] = useState(false); const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic"); const [selectedPlan, setSelectedPlan] = useState({}); - const [isAnnualBilling, setIsAnnualBilling] = useState(false); + const [isAnnual, setIsAnnual] = useState(false); // Could also go in App.js if needed in the future const stripe = new Stripe(stripeApiKey); @@ -179,8 +179,8 @@ const SignupPage = () => { }; const handleToggle = () => { - setIsAnnualBilling(!isAnnualBilling); - console.log("isAnnualBilling", isAnnualBilling); + setIsAnnual(!isAnnual); + console.log("isAnnual", isAnnual); }; async function handleStripeAuthorization( @@ -213,6 +213,7 @@ const SignupPage = () => { }, body: JSON.stringify({ type: "monthly", + isAnnual: isAnnual, customerData: { email: customerDataValues.email, name: @@ -416,7 +417,7 @@ const SignupPage = () => { details={option.details} activeRadioOption={activeRadioOption} price={option.pricing} - isAnnualBilling={isAnnualBilling} + isAnnual={isAnnual} /> ))} diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index e1bc164..0491cda 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -2,7 +2,6 @@ import { CircleFill, Circle } from "react-bootstrap-icons"; import "../styles/radio.scss"; const Radio = (props) => { - console.log("hello"); const { name, description, @@ -12,12 +11,12 @@ const Radio = (props) => { disabled, activeRadioOption, details, - isAnnualBilling, + isAnnual, } = props; const classCheckbox = "checkbox"; const classOption = "option"; - const index = isAnnualBilling ? Number("0") : Number("1"); - // + const index = isAnnual ? Number("0") : Number("1"); + return (
From 528a49410b9e16a59193415da9c90c12139127d5 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Sat, 27 Jan 2024 13:57:33 -0600 Subject: [PATCH 2/5] more --- src/pageElements/Radio.js | 10 +++++++++- src/styles/signup.scss | 19 +++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 0491cda..d5bf1cf 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -46,7 +46,15 @@ const Radio = (props) => {
{description.map((item, i) => { - return

{item}

; + const el = + item == "First month is free!" ? ( +
+

{item}

+
+ ) : ( +

{item}

+ ); + return el; })}
{`${details}`}
diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 2ef718d..d5d63c5 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -171,3 +171,22 @@ font-size: 0.9rem; margin: 8px 0px 8px 4px; } + +.signup-feat-item-bold { + font-family: Roboto; + color: #005eff; + font-size: 1.15rem; + letter-spacing: -0.008rem; + font-weight: 500; + margin: 12px 0px 8px 4px; +} + +.offer-div { + display: flex; + justify-content: center; + align-items: center; + height: 30px; + background-color: #fdbe72; + border-radius: 10px; + margin-top: 25px; +} From 06f98ec8a983cc07e2dd0462adc4a0509e01d63f Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Sat, 27 Jan 2024 14:15:28 -0600 Subject: [PATCH 3/5] more --- src/Components/SignupPage/SignupPage.js | 4 ++- src/Utils/Miscutils.js | 33 +++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 src/Utils/Miscutils.js diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 5d916ba..0c2665f 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -18,6 +18,7 @@ import { isFormDataHasErrors, } from "../../Utils/Form"; import { objectMap } from "../../Utils/Object"; +import { determinePlan } from "../../Utils/Miscutils"; import { signupFields } from "../../Constants/Fields/SignupFields"; import { paymentfields } from "../../Constants/Fields/PaymentFields"; import { signupRadioFields } from "../../Constants/Fields/RadioFields"; @@ -141,7 +142,7 @@ const SignupPage = () => { console.log(`Error saving new user to db: ${error}`); } } - + console.log("activeRadioOption", activeRadioOption); const handleProceedToPayment = (e) => { e.preventDefault(); @@ -258,6 +259,7 @@ const SignupPage = () => { return; } + const planType = determinePlan(isAnnual, activeRadioOption); setIsBusy(true); if (paymentDataValues && dataValues) { diff --git a/src/Utils/Miscutils.js b/src/Utils/Miscutils.js new file mode 100644 index 0000000..2fb0285 --- /dev/null +++ b/src/Utils/Miscutils.js @@ -0,0 +1,33 @@ +export const determinePlan = (isAnnual, activeRadioOption) => { + if (isAnnual === true && activeRadioOption === "Associate") { + return { + planType: "Annual Assoc", + planId: "8a7b889e-8626-4d3e-a37d-ef2a8b762419", + }; + } else if (isAnnual === false && activeRadioOption === "Associate") { + return { + planType: "Monthly Assoc", + planId: "4e177c87-d074-4409-9f5e-6358adff5017", + }; + } else if (isAnnual === true && activeRadioOption === "Partner") { + return { + planType: "Annual Partner", + planId: "45b567bc-c1fb-47dd-bfb1-c180380141bc", + }; + } else if (isAnnual === false && activeRadioOption === "Partner") { + return { + planType: "Monthly Partner", + planId: "c70bc329-9c17-4997-a7d3-fe8f62db49b0", + }; + } else if (isAnnual === true && activeRadioOption === "Senior Partner") { + return { + planType: "Annual Senior Partner", + planId: "35b3109c-5fe3-46e3-a64c-1f43fe7136c4", + }; + } else if (isAnnual === false && activeRadioOption === "Senior Partner") { + return { + planType: "Monthly Senior Partner", + planId: "a88ce618-cee2-42ae-ab4c-e404b2a5422d", + }; + } +}; From 9b47f485575b9fb6a83c658fc24a7f063557896b Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Sat, 27 Jan 2024 14:18:27 -0600 Subject: [PATCH 4/5] more --- src/Components/SignupPage/SignupPage.js | 4 ++-- src/Constants/Fields/RadioFields.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 0c2665f..757c2aa 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -39,12 +39,12 @@ const SignupPage = () => { ); const [showPaymentModal, setShowPaymentModal] = useState(false); const [showSelectPlan, setShowSelectPlan] = useState(false); - const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic"); + const [activeRadioOption, setActiveRadioOption] = useState("Partner"); const [selectedPlan, setSelectedPlan] = useState({}); const [isAnnual, setIsAnnual] = useState(false); // Could also go in App.js if needed in the future const stripe = new Stripe(stripeApiKey); - + console.log("activeRadioOption", activeRadioOption); const apiUrl = process.env.NODE_ENV === "development" ? process.env.REACT_APP_API_DEV diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 763410e..35164db 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -2,7 +2,7 @@ export const signupRadioFields = [ { name: "Associate", label: "Monthly - basic", - value: "monthlyBasic", + value: "associate", description: [ "1 document per month", "Carryover 1 document to next period", @@ -18,7 +18,7 @@ export const signupRadioFields = [ { name: "Partner", label: "Monthly - pro", - value: "monthlyProPlan", + value: "partner", description: [ "3 documents per month", "Carryover 2 documents to next period", @@ -34,7 +34,7 @@ export const signupRadioFields = [ { name: "Senior Partner", label: "Annual - unlimited annual", - value: "annualUnlimited", + value: "seniorPartner", description: [ "Unlimited documents.", "Triage-level support", From 602b354be8072b8a5cf2b54203ecd85c921e3e75 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Sat, 27 Jan 2024 14:25:48 -0600 Subject: [PATCH 5/5] more --- src/Constants/Fields/RadioFields.js | 4 ++-- src/Utils/Miscutils.js | 20 ++++++++++---------- src/pageElements/Radio.js | 3 +-- src/styles/radio.scss | 2 ++ 4 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 35164db..7934e01 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -22,7 +22,7 @@ export const signupRadioFields = [ description: [ "3 documents per month", "Carryover 2 documents to next period", - "Up to 2 additional accounts: 59/each", + "Up to 2 additional accounts: $49/each", "24/7 support", ], details: "", @@ -38,7 +38,7 @@ export const signupRadioFields = [ description: [ "Unlimited documents.", "Triage-level support", - "Up to 8 additional accounts at 19/each", + "Up to 10 additional accounts at $39/each", ], details: "", pricing: [ diff --git a/src/Utils/Miscutils.js b/src/Utils/Miscutils.js index 2fb0285..46714ac 100644 --- a/src/Utils/Miscutils.js +++ b/src/Utils/Miscutils.js @@ -1,32 +1,32 @@ export const determinePlan = (isAnnual, activeRadioOption) => { - if (isAnnual === true && activeRadioOption === "Associate") { + if (isAnnual === true && activeRadioOption === "associate") { return { planType: "Annual Assoc", planId: "8a7b889e-8626-4d3e-a37d-ef2a8b762419", }; - } else if (isAnnual === false && activeRadioOption === "Associate") { + } else if (isAnnual === false && activeRadioOption === "associate") { return { planType: "Monthly Assoc", planId: "4e177c87-d074-4409-9f5e-6358adff5017", }; - } else if (isAnnual === true && activeRadioOption === "Partner") { + } else if (isAnnual === true && activeRadioOption === "partner") { return { - planType: "Annual Partner", + planType: "annualPartner", planId: "45b567bc-c1fb-47dd-bfb1-c180380141bc", }; - } else if (isAnnual === false && activeRadioOption === "Partner") { + } else if (isAnnual === false && activeRadioOption === "partner") { return { - planType: "Monthly Partner", + planType: "monthlyPartner", planId: "c70bc329-9c17-4997-a7d3-fe8f62db49b0", }; - } else if (isAnnual === true && activeRadioOption === "Senior Partner") { + } else if (isAnnual === true && activeRadioOption === "seniorPartner") { return { - planType: "Annual Senior Partner", + planType: "annualSeniorPartner", planId: "35b3109c-5fe3-46e3-a64c-1f43fe7136c4", }; - } else if (isAnnual === false && activeRadioOption === "Senior Partner") { + } else if (isAnnual === false && activeRadioOption === "seniorPartner") { return { - planType: "Monthly Senior Partner", + planType: "monthlySeniorPartner", planId: "a88ce618-cee2-42ae-ab4c-e404b2a5422d", }; } diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index d5bf1cf..2402851 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -38,8 +38,7 @@ const Radio = (props) => {
{`${name}`}
- {" "} - {`${price[index]["amount"]}`}{" "} + {`$${price[index]["amount"]}`}{" "}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index b13bfc1..8cc5dcf 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -55,6 +55,8 @@ height: 25px; width: 40px; float: right; + margin-right: 8px; + padding-top: 6px; } .radio-description-box {