diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 52100b0..82018d4 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -5,7 +5,8 @@ import Row from "react-bootstrap/Row"; import Button from "../../pageElements/Button"; import { db, auth } from "../../firebase"; import { createUserWithEmailAndPassword } from "firebase/auth"; -import { Link, useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; +import Toggle from "../../pageElements/Toggle"; import TextInput from "../../pageElements/TextInput"; import { v4 as uuidv4 } from "uuid"; import { collection, setDoc, doc } from "firebase/firestore"; @@ -24,6 +25,7 @@ import PaymentModal from "../Modals/PaymentModal"; import Radio from "../../pageElements/Radio"; import "../../styles/signup.scss"; import Stripe from "stripe"; +import { stripeApiKey } from "../../secrets"; const SignupPage = () => { const navigate = useNavigate(); @@ -35,20 +37,20 @@ const SignupPage = () => { getFormDataDefaults(paymentfields) ); const [showPaymentModal, setShowPaymentModal] = useState(false); - const [showSelectPlan, setShowSelectPlan] = useState(true); + const [showSelectPlan, setShowSelectPlan] = useState(false); const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic"); - const modalText = "Description of monthly and annual subscriptions"; const [selectedPlan, setSelectedPlan] = useState({}); - // this could also go in App.js if needed in the future - const stripe = new Stripe( - "pk_test_51NNoasBi8p7FeGFrI5SfpM6HuNMoxwImx6NRKyKbgbt6OPxMxQDiZ9I1GqvDa9qUwB3D3jlJOng6MyjPppWofxzP00Exvr8dBy" - ); + const [isAnnualBilling, setIsAnnualBilling] = useState(false); + // Could also go in App.js if needed in the future + const stripe = new Stripe(stripeApiKey); const apiUrl = process.env.NODE_ENV === "development" ? process.env.REACT_APP_API_DEV : process.env.REACT_APP_API_PROD; + const modalText = "Description of monthly and annual subscriptions"; + const handleChangeInput = (e, name) => { const newData = handleFormDataChange(e, name, data, signupFields); if (newData !== null) { @@ -72,16 +74,12 @@ const SignupPage = () => { const tempPlan = signupRadioFields.filter((field) => { return field.value === value; }); - console.log("tempPlan", tempPlan); + setSelectedPlan(tempPlan); const temp = value; setActiveRadioOption(temp); }; - signupRadioFields.map((option) => { - console.log(option.value); - }); - const validateData = () => { const newData = getValidatedFormData(data, signupFields); const hasErrors = isFormDataHasErrors(newData); @@ -155,12 +153,20 @@ const SignupPage = () => { if (isBusy) { return; } - + /* const dataValues = validateData(); if (dataValues === null) { return; } + */ + setShowSelectPlan(true); }; + + const handleToggle = () => { + setIsAnnualBilling(!isAnnualBilling); + console.log("isAnnualBilling", isAnnualBilling); + }; + async function handleStripeAuthorization( user, paymentDataValues, @@ -231,7 +237,7 @@ const SignupPage = () => { if (paymentDataValues === null) { return; } - + // let dataValues = validateData(); if (dataValues === null) { return; @@ -371,44 +377,37 @@ const SignupPage = () => { {showSelectPlan ? (
-
-
- Select your subscription plan -
+
+
+
+ Select a subscription plan +
+
+
+
+

Billed annually

+ +

Billed montly

+
+
{signupRadioFields?.map((option, i) => ( - +
+ +
))}
-
-
-
Order summary
-
{`{subVar} subscription type`}
-
{`{subVar} subscription mini description`}
-
{`Total billed today: {subVar} `}
-
Plus aplicable sales tax -toooltip
-
-
-
-
) : ( <> diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index ea9ffcb..2fcdf09 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -1,26 +1,50 @@ export const signupRadioFields = [ { - name: "Monthly - basic", + name: "Associate", label: "Monthly - basic", value: "monthlyBasic", - description: "Generate 1 document per month", - details: "Billed every month", - price: 89, + description: [ + "1 document per month", + "Carryover 1 document to next period", + "24/7 support", + "First month is free!", + ], + details: "", + pricing: [ + { type: "standard", amount: 69 }, + { type: "annDiscount", amount: 49 }, + ], }, { - name: "Monthly - pro", + name: "Partner", label: "Monthly - pro", value: "monthlyProPlan", - description: "Generate up to 3 documents per month", - details: "Billed every three months. A xxx percent savings", - price: 159, + description: [ + "3 documents per month", + "Carryover 2 documents to next period", + "Up to 2 additional accounts: 59/each", + "24/7 support", + ], + details: "", + pricing: [ + { type: "standard", amount: 97 }, + { type: "annDiscount", amount: 79 }, + ], }, { - name: "Annual - unlimted annual", + name: "Senior Partner", label: "Annual - unlimited annual", value: "annualUnlimited", - description: "Generate unlimited documents.", - details: "Billed annualy. A xxx percent savings", - price: 1489, + description: [ + "Unlimited documents.", + "Triage-level support", + "Up to 8 additional accounts at 19/each", + ], + details: "", + pricing: [ + { type: "standard", amount: 149 }, + { type: "annDiscount", amount: 119 }, + ], }, ]; +// diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 20b3e5e..0294e75 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -12,59 +12,47 @@ const Radio = (props) => { disabled, activeRadioOption, details, + isAnnualBilling, } = props; const classCheckbox = "checkbox"; const classOption = "option"; - console.log("value, activeRadioOption", value, activeRadioOption); + const index = isAnnualBilling ? Number("1") : Number("0"); return ( -
-
!disabled && onClick && onClick(value)} - > - {value == activeRadioOption ? ( - <> -
-
+
+
+ <> +
+
!disabled && onClick && onClick(value)} + > + {value == activeRadioOption ? (
-
{`${name}`}
-
-
{`${price}`}
-
-
- -
-
-
- {" "} - {`${description}`}{" "} -
-
{`${details}`}
-
-
- - ) : ( - <> -
-
+ ) : (
-
{`${name}`}
-
-
{`${price}`}
+ )} +
{`${name}`}
+
+
+ {" "} + {`${price[index]["amount"]}`}{" "}
-
-
{`${description}`}
-
{`${details}`}
-
- - )} +
+
+ {description.map((item, i) => { + return

{item}

; + })} +
+
{`${details}`}
+
+
+
); diff --git a/src/pageElements/Toggle.js b/src/pageElements/Toggle.js new file mode 100644 index 0000000..a3d3ddc --- /dev/null +++ b/src/pageElements/Toggle.js @@ -0,0 +1,24 @@ +import ToggleButton from "react-bootstrap/ToggleButton"; +import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup"; + +const Toggle = (props) => { + const { onClick } = props; + return ( + <> + + + + + + ); +}; + +export default Toggle; diff --git a/src/styles/radio.scss b/src/styles/radio.scss index a99f924..b13bfc1 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -2,7 +2,7 @@ display: flex; flex-direction: column; background-color: #fff; - height: 160px; + height: 290px; margin: 10px 8px 0px 8px; border-radius: 5px; border: 1px solid #d4d4d4; @@ -12,38 +12,51 @@ height: 40px; display: flex; flex-direction: row; + margin-top: 12px; + margin-left: 2px; } .radio-circle-lower { display: flex; flex-direction: column; - margin-left: 18px; - padding-left: 26px; + margin-left: 12px; + padding-left: 12px; } .radio-circle-box { - height: 40px; - margin: 12px 8px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: auto; + height: 30px; } .radio-name-box { - height: 40px; + display: flex; + align-items: center; + padding-top: 10px; + height: 30px; width: 50%; font-family: var(--main-font); font-family: Roboto; font-weight: 500; letter-spacing: 0.05rem; - margin: 13px 8px; } .radio-price-box { display: flex; flex-direction: row-reverse; - margin: 16px 8px; + height: 30px; width: 30%; } .radio-price { - width: 20px; + height: 25px; + width: 40px; float: right; } + +.radio-description-box { + width: 240px; +} diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 941400a..d0b4b01 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -64,11 +64,35 @@ height: 600px; } +.select-plan-header { + display: flex; + flex-direction: row; + width: 900px; +} + +.plan-header-right { + padding: 12px 14px; + width: 50%; +} + +.plan-header-left { + display: flex; + flex-direction: row-reverse; + align-items: center; + + padding: 12px 14px; + width: 50%; +} + .select-sub-left { - width: 60%; + display: flex; + flex-direction: column; + align-items: center; + margin-top: 45px; + width: 100%; + padding: 12px; border-radius: 10px; background-color: rgb(240, 247, 250); - margin-right: 8px; border: 1px solid #e9e9e9; padding: 6px; } @@ -82,6 +106,20 @@ padding: 6px; } +.select-toggle-box { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-top: 2px; + width: 240px; + height: 20px; +} + +.select-billing-text { + font-size: 0.85rem; +} + .signup-radio-wrapper { background-color: #fff; display: flex; @@ -95,10 +133,10 @@ .radio-group-box { display: flex; - flex-direction: column; + flex-direction: row; padding: 6px; width: 100%; - height: 300px; + height: 420px; } .select-plan-summary-box { @@ -109,6 +147,7 @@ border-radius: 10px; background-color: #fff; border: 1px solid #e9e9e9; + margin-top: 5px; padding: 6px; } @@ -122,3 +161,13 @@ .signup-option { width: 100% !important; } + +.signup-radio-container { + width: 350px; + height: 100%; +} + +.signup-feat-item { + font-size: 0.9rem; + margin: 8px 0px 8px 4px; +}