diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index f808b42..757c2aa 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"; @@ -38,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 [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); - + console.log("activeRadioOption", activeRadioOption); const apiUrl = process.env.NODE_ENV === "development" ? process.env.REACT_APP_API_DEV @@ -141,7 +142,7 @@ const SignupPage = () => { console.log(`Error saving new user to db: ${error}`); } } - + console.log("activeRadioOption", activeRadioOption); const handleProceedToPayment = (e) => { e.preventDefault(); @@ -179,8 +180,8 @@ const SignupPage = () => { }; const handleToggle = () => { - setIsAnnualBilling(!isAnnualBilling); - console.log("isAnnualBilling", isAnnualBilling); + setIsAnnual(!isAnnual); + console.log("isAnnual", isAnnual); }; async function handleStripeAuthorization( @@ -213,6 +214,7 @@ const SignupPage = () => { }, body: JSON.stringify({ type: "monthly", + isAnnual: isAnnual, customerData: { email: customerDataValues.email, name: @@ -257,6 +259,7 @@ const SignupPage = () => { return; } + const planType = determinePlan(isAnnual, activeRadioOption); setIsBusy(true); if (paymentDataValues && dataValues) { @@ -416,7 +419,7 @@ const SignupPage = () => { details={option.details} activeRadioOption={activeRadioOption} price={option.pricing} - isAnnualBilling={isAnnualBilling} + isAnnual={isAnnual} /> ))} diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 763410e..7934e01 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,11 +18,11 @@ export const signupRadioFields = [ { name: "Partner", label: "Monthly - pro", - value: "monthlyProPlan", + value: "partner", 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: "", @@ -34,11 +34,11 @@ export const signupRadioFields = [ { name: "Senior Partner", label: "Annual - unlimited annual", - value: "annualUnlimited", + value: "seniorPartner", 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 new file mode 100644 index 0000000..46714ac --- /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: "annualPartner", + planId: "45b567bc-c1fb-47dd-bfb1-c180380141bc", + }; + } else if (isAnnual === false && activeRadioOption === "partner") { + return { + planType: "monthlyPartner", + planId: "c70bc329-9c17-4997-a7d3-fe8f62db49b0", + }; + } else if (isAnnual === true && activeRadioOption === "seniorPartner") { + return { + planType: "annualSeniorPartner", + planId: "35b3109c-5fe3-46e3-a64c-1f43fe7136c4", + }; + } else if (isAnnual === false && activeRadioOption === "seniorPartner") { + return { + planType: "monthlySeniorPartner", + planId: "a88ce618-cee2-42ae-ab4c-e404b2a5422d", + }; + } +}; diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index e1bc164..2402851 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 (
@@ -39,15 +38,22 @@ const Radio = (props) => {
{`${name}`}
- {" "} - {`${price[index]["amount"]}`}{" "} + {`$${price[index]["amount"]}`}{" "}
{description.map((item, i) => { - return

{item}

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

{item}

+
+ ) : ( +

{item}

+ ); + return el; })}
{`${details}`}
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 { 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; +}