From 86c8e1a3f136404c0715edbcfb02c1fff790d9e9 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 17:02:58 -0600 Subject: [PATCH 01/28] more --- src/Components/SignupPage/SignupPage.js | 11 +++++------ src/pageElements/Toggle.js | 19 +++++++++++++++++++ src/styles/signup.scss | 1 + 3 files changed, 25 insertions(+), 6 deletions(-) create mode 100644 src/pageElements/Toggle.js diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 52100b0..30d0b7f 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -24,6 +24,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(); @@ -39,10 +40,8 @@ const SignupPage = () => { 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" - ); + // Could also go in App.js if needed in the future + const stripe = new Stripe(stripeApiKey); const apiUrl = process.env.NODE_ENV === "development" @@ -371,9 +370,9 @@ const SignupPage = () => { {showSelectPlan ? (
-
+
- Select your subscription plan + Select a subscription plan
diff --git a/src/pageElements/Toggle.js b/src/pageElements/Toggle.js new file mode 100644 index 0000000..68799eb --- /dev/null +++ b/src/pageElements/Toggle.js @@ -0,0 +1,19 @@ +import ToggleButton from "react-bootstrap/ToggleButton"; +import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup"; + +function ToggleButtonGroupUncontrolled() { + return ( + <> + + + '' + + + '' + + + + ); +} + +export default ToggleButtonGroupUncontrolled; diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 941400a..179a5ac 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -109,6 +109,7 @@ border-radius: 10px; background-color: #fff; border: 1px solid #e9e9e9; + margin-top: 5px; padding: 6px; } From c89ced573dbe54ddbed37c8cc5e8773af97fa81a Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 17:07:39 -0600 Subject: [PATCH 02/28] more --- src/Components/SignupPage/SignupPage.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 30d0b7f..55ab8c0 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -40,6 +40,7 @@ const SignupPage = () => { const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic"); const modalText = "Description of monthly and annual subscriptions"; const [selectedPlan, setSelectedPlan] = useState({}); + const [annualizd, setAnualized] = useState(true); // Could also go in App.js if needed in the future const stripe = new Stripe(stripeApiKey); @@ -48,6 +49,10 @@ const SignupPage = () => { ? process.env.REACT_APP_API_DEV : process.env.REACT_APP_API_PROD; + const basicPrice = 59; + const proPrice = 139; + const unlimtedAnnualPrice = 169; + const handleChangeInput = (e, name) => { const newData = handleFormDataChange(e, name, data, signupFields); if (newData !== null) { From f7a1b332deb5b18ea4019a6d66c5865838343e49 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 17:09:30 -0600 Subject: [PATCH 03/28] more --- src/Components/SignupPage/SignupPage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 55ab8c0..d153b64 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -50,7 +50,9 @@ const SignupPage = () => { : process.env.REACT_APP_API_PROD; const basicPrice = 59; + const proPrice = 139; + const unlimtedAnnualPrice = 169; const handleChangeInput = (e, name) => { From 94e78280809fb1ad7242872e2c82b45d9bd39713 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 17:14:36 -0600 Subject: [PATCH 04/28] more --- src/Components/SignupPage/SignupPage.js | 13 ++++++++----- src/pageElements/Toggle.js | 4 ++-- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index d153b64..8aeff95 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -6,6 +6,7 @@ import Button from "../../pageElements/Button"; import { db, auth } from "../../firebase"; import { createUserWithEmailAndPassword } from "firebase/auth"; import { Link, 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"; @@ -50,9 +51,7 @@ const SignupPage = () => { : process.env.REACT_APP_API_PROD; const basicPrice = 59; - const proPrice = 139; - const unlimtedAnnualPrice = 169; const handleChangeInput = (e, name) => { @@ -167,6 +166,7 @@ const SignupPage = () => { return; } }; + async function handleStripeAuthorization( user, paymentDataValues, @@ -378,9 +378,12 @@ const SignupPage = () => {
-
- Select a subscription plan -
+
+
Select a subscription
+
+
+ +
{signupRadioFields?.map((option, i) => ( diff --git a/src/pageElements/Toggle.js b/src/pageElements/Toggle.js index 68799eb..8916aad 100644 --- a/src/pageElements/Toggle.js +++ b/src/pageElements/Toggle.js @@ -1,7 +1,7 @@ import ToggleButton from "react-bootstrap/ToggleButton"; import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup"; -function ToggleButtonGroupUncontrolled() { +function Toggle() { return ( <> @@ -16,4 +16,4 @@ function ToggleButtonGroupUncontrolled() { ); } -export default ToggleButtonGroupUncontrolled; +export default Toggle; From 731fb70fc347c45c4005484cc72905f006af4e37 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 17:22:54 -0600 Subject: [PATCH 05/28] more --- src/Components/SignupPage/SignupPage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 8aeff95..2bb0da5 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -382,7 +382,9 @@ const SignupPage = () => {
Select a subscription
+

Billed annually

+

Billed montly

From 102eb11013af5f7f9838a4a22dc7d8246affabcb Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 17:30:17 -0600 Subject: [PATCH 06/28] more --- src/Constants/Fields/RadioFields.js | 19 ++++++++++++++----- src/pageElements/Toggle.js | 8 ++------ 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index ea9ffcb..050e0ce 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -3,23 +3,32 @@ export const signupRadioFields = [ name: "Monthly - basic", label: "Monthly - basic", value: "monthlyBasic", - description: "Generate 1 document per month", - details: "Billed every month", + description: [ + "1 document per month", + "Carryover one unused doc to next period", + "24/7 support", + ], + details: "", price: 89, }, { name: "Monthly - pro", label: "Monthly - pro", value: "monthlyProPlan", - description: "Generate up to 3 documents per month", - details: "Billed every three months. A xxx percent savings", + description: [ + "3 documents per month", + "Carryover two unused docs to next period", + "Additional accounts: first: 39, after: 59/each", + "24/7 support", + ], + details: "", price: 159, }, { name: "Annual - unlimted annual", label: "Annual - unlimited annual", value: "annualUnlimited", - description: "Generate unlimited documents.", + description: ["Generate unlimited documents.", "24/7 support"], details: "Billed annualy. A xxx percent savings", price: 1489, }, diff --git a/src/pageElements/Toggle.js b/src/pageElements/Toggle.js index 8916aad..dda550b 100644 --- a/src/pageElements/Toggle.js +++ b/src/pageElements/Toggle.js @@ -5,12 +5,8 @@ function Toggle() { return ( <> - - '' - - - '' - + + ); From 416a7f7a934c196387675d8481c3220088e395b6 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 17:39:23 -0600 Subject: [PATCH 07/28] more --- src/Constants/Fields/RadioFields.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 050e0ce..6be1552 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -18,18 +18,18 @@ export const signupRadioFields = [ description: [ "3 documents per month", "Carryover two unused docs to next period", - "Additional accounts: first: 39, after: 59/each", + "Additional accounts: first: 39, additional 59/each", "24/7 support", ], details: "", price: 159, }, { - name: "Annual - unlimted annual", + name: "Unlimited", label: "Annual - unlimited annual", value: "annualUnlimited", description: ["Generate unlimited documents.", "24/7 support"], - details: "Billed annualy. A xxx percent savings", + details: "", price: 1489, }, ]; From 384310e400106927c6c4c9ca5fdeee4a5c9f0547 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 17:40:10 -0600 Subject: [PATCH 08/28] more --- src/Constants/Fields/RadioFields.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 6be1552..48610aa 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -28,7 +28,7 @@ export const signupRadioFields = [ name: "Unlimited", label: "Annual - unlimited annual", value: "annualUnlimited", - description: ["Generate unlimited documents.", "24/7 support"], + description: ["Generate unlimited documents.", "Stat support"], details: "", price: 1489, }, From c93e23ac2087193faf537aa0ee0dc8f76e651061 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 17:59:49 -0600 Subject: [PATCH 09/28] more --- src/Components/SignupPage/SignupPage.js | 54 ++++++++++++++----------- src/styles/signup.scss | 26 +++++++++++- 2 files changed, 55 insertions(+), 25 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 2bb0da5..0d7d8cd 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -165,6 +165,7 @@ const SignupPage = () => { if (dataValues === null) { return; } + setShowSelectPlan(true); }; async function handleStripeAuthorization( @@ -377,11 +378,14 @@ const SignupPage = () => { {showSelectPlan ? (
-
-
-
Select a subscription
+
+
+
+ Select a subscription plan +
-
+
+

Billed annually

Billed montly

@@ -401,25 +405,6 @@ const SignupPage = () => { ))}
-
-
-
Order summary
-
{`{subVar} subscription type`}
-
{`{subVar} subscription mini description`}
-
{`Total billed today: {subVar} `}
-
Plus aplicable sales tax -toooltip
-
-
-
-
) : ( <> @@ -444,3 +429,26 @@ const SignupPage = () => { }; export default SignupPage; + +/* + +
+
+
Order summary
+
{`{subVar} subscription type`}
+
{`{subVar} subscription mini description`}
+
{`Total billed today: {subVar} `}
+
Plus aplicable sales tax -toooltip
+
+
+
+
+ */ diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 179a5ac..5f1a0c7 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -64,11 +64,33 @@ height: 600px; } +.select-plan-header { + display: flex; + flex-direction: row; + width: 900px; +} + +.plan-header-right { + background-color: red; + padding: 12px 0px; + width: 50%; +} + +.plan-header-left { + background-color: red; + padding: 12px 0px; + 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; } From 85f9e59179e5a617ba388f9551e58f519b18460c Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 18:01:27 -0600 Subject: [PATCH 10/28] more --- src/styles/signup.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 5f1a0c7..4d82f3e 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -72,13 +72,15 @@ .plan-header-right { background-color: red; - padding: 12px 0px; + padding: 12px 14px; width: 50%; } .plan-header-left { + display: flex; + flex-direction: row-reverse; background-color: red; - padding: 12px 0px; + padding: 12px 14px; width: 50%; } From a3f8d239045ddb8beaeba8d2e1646afe0834a3b2 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 18:03:41 -0600 Subject: [PATCH 11/28] more --- src/styles/signup.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 4d82f3e..e8a3548 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -71,7 +71,6 @@ } .plan-header-right { - background-color: red; padding: 12px 14px; width: 50%; } @@ -79,7 +78,8 @@ .plan-header-left { display: flex; flex-direction: row-reverse; - background-color: red; + align-items: center; + padding: 12px 14px; width: 50%; } From 4ab641150d8195864550de07351ff524ef685dfa Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 18:14:24 -0600 Subject: [PATCH 12/28] more --- src/Components/SignupPage/SignupPage.js | 2 +- src/Constants/Fields/RadioFields.js | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 0d7d8cd..7635cd0 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -52,7 +52,7 @@ const SignupPage = () => { const basicPrice = 59; const proPrice = 139; - const unlimtedAnnualPrice = 169; + const unlimtedPrice = 169; const handleChangeInput = (e, name) => { const newData = handleFormDataChange(e, name, data, signupFields); diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 48610aa..7511099 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -1,6 +1,6 @@ export const signupRadioFields = [ { - name: "Monthly - basic", + name: "Associate", label: "Monthly - basic", value: "monthlyBasic", description: [ @@ -9,10 +9,10 @@ export const signupRadioFields = [ "24/7 support", ], details: "", - price: 89, + price: 59, }, { - name: "Monthly - pro", + name: "Partner", label: "Monthly - pro", value: "monthlyProPlan", description: [ @@ -22,14 +22,14 @@ export const signupRadioFields = [ "24/7 support", ], details: "", - price: 159, + price: 169, }, { - name: "Unlimited", + name: "Of Counsel", label: "Annual - unlimited annual", value: "annualUnlimited", - description: ["Generate unlimited documents.", "Stat support"], + description: ["Unlimited documents.", "Triage-level support"], details: "", - price: 1489, + price: 199, }, ]; From 2653f5036b58679033617d0e16f6d602a34d0e62 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 18:15:56 -0600 Subject: [PATCH 13/28] more --- src/Constants/Fields/RadioFields.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 7511099..647c0ac 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -12,7 +12,7 @@ export const signupRadioFields = [ price: 59, }, { - name: "Partner", + name: "Junior Partner", label: "Monthly - pro", value: "monthlyProPlan", description: [ @@ -25,11 +25,23 @@ export const signupRadioFields = [ price: 169, }, { - name: "Of Counsel", + name: "Senior Partner", label: "Annual - unlimited annual", value: "annualUnlimited", description: ["Unlimited documents.", "Triage-level support"], details: "", price: 199, }, + { + name: "Of Counsel", + label: "Monthly - basic", + value: "monthlyBasic", + description: [ + "1 document per month", + "Carryover one unused doc to next period", + "24/7 support", + ], + details: "", + price: 59, + }, ]; From 3185d296f35c1f6eba412a15e155fe0d1957503b Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 18:30:56 -0600 Subject: [PATCH 14/28] more --- src/Constants/Fields/RadioFields.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 647c0ac..3e7a85e 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -32,16 +32,4 @@ export const signupRadioFields = [ details: "", price: 199, }, - { - name: "Of Counsel", - label: "Monthly - basic", - value: "monthlyBasic", - description: [ - "1 document per month", - "Carryover one unused doc to next period", - "24/7 support", - ], - details: "", - price: 59, - }, ]; From 07cfaa81f2c12b19d61f8bc304bc025d4575a726 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 18:56:55 -0600 Subject: [PATCH 15/28] more --- src/Components/SignupPage/SignupPage.js | 20 +++++++++++--------- src/pageElements/Radio.js | 15 +++++++++------ src/styles/signup.scss | 9 +++++++-- 3 files changed, 27 insertions(+), 17 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 7635cd0..2c22c7c 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -393,15 +393,17 @@ const SignupPage = () => {
{signupRadioFields?.map((option, i) => ( - +
+ +
))}
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 20b3e5e..bfa37eb 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -17,7 +17,7 @@ const Radio = (props) => { const classOption = "option"; console.log("value, activeRadioOption", value, activeRadioOption); return ( -
+
{
{`${price}`}
- -
- {" "} - {`${description}`}{" "} + {description.map((item) => { + return
  • {item}
    • ; + })}
    {`${details}`}
    @@ -59,7 +58,11 @@ const Radio = (props) => {
    -
    {`${description}`}
    +
    + {description.map((item) => { + return
  • {item}
    • ; + })} +
    {`${details}`}
    diff --git a/src/styles/signup.scss b/src/styles/signup.scss index e8a3548..975ab46 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -119,10 +119,10 @@ .radio-group-box { display: flex; - flex-direction: column; + flex-direction: row; padding: 6px; width: 100%; - height: 300px; + height: 420px; } .select-plan-summary-box { @@ -147,3 +147,8 @@ .signup-option { width: 100% !important; } + +.signup-radio-container { + width: 350px; + height: 100%; +} From ad84d3e56d2126fd82feb0c4c448be564bf58d6a Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 19:08:04 -0600 Subject: [PATCH 16/28] m,ore --- src/Components/SignupPage/SignupPage.js | 9 +++++---- src/pageElements/Radio.js | 4 ++-- src/styles/signup.scss | 14 ++++++++++++++ 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 2c22c7c..9f2d71f 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -385,10 +385,11 @@ const SignupPage = () => {
    -
    -

    Billed annually

    - -

    Billed montly

    +
    +

    Billed annually

    + +

    Billed montly

    +
    diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index bfa37eb..8495cea 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -38,7 +38,7 @@ const Radio = (props) => {
    {description.map((item) => { - return
  • {item}
    • ; + return

    {item}

    ; })}
    {`${details}`}
    @@ -60,7 +60,7 @@ const Radio = (props) => {
    {description.map((item) => { - return
  • {item}
    • ; + return

    {item}

    ; })}
    {`${details}`}
    diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 975ab46..52887af 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -106,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; From 4396275d8e2323a0de3e763fa08db8d120d7b8e3 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 19:16:30 -0600 Subject: [PATCH 17/28] d --- src/styles/radio.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/radio.scss b/src/styles/radio.scss index a99f924..d7702d6 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; From d6b8e97fc22fd38f536cedc4eb4ca5ff0da553b8 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 19:23:58 -0600 Subject: [PATCH 18/28] more --- src/pageElements/Radio.js | 65 ++++++++++++++------------------------- 1 file changed, 23 insertions(+), 42 deletions(-) diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 8495cea..f22af54 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -18,56 +18,37 @@ const Radio = (props) => { console.log("value, activeRadioOption", value, activeRadioOption); return (
    -
    !disabled && onClick && onClick(value)} - > - {value == activeRadioOption ? ( - <> -
    -
    +
    + <> +
    +
    !disabled && onClick && onClick(value)} + > + {value == activeRadioOption ? (
    -
    {`${name}`}
    -
    -
    {`${price}`}
    -
    -
    -
    -
    - {description.map((item) => { - return

    {item}

    ; - })} -
    -
    {`${details}`}
    -
    -
    - - ) : ( - <> -
    -
    + ) : (
    -
    {`${name}`}
    -
    -
    {`${price}`}
    -
    -
    -
    -
    - {description.map((item) => { - return

    {item}

    ; - })} -
    -
    {`${details}`}
    + )} +
    {`${name}`}
    +
    +
    {`${price}`}
    - - )} +
    +
    + {description.map((item) => { + return

    {item}

    ; + })} +
    +
    {`${details}`}
    +
    +
    +
    ); From 995fa1882d999f914d7f51a66bab0bd1c56fd126 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 19:41:00 -0600 Subject: [PATCH 19/28] more --- src/Constants/Fields/RadioFields.js | 8 ++++---- src/styles/radio.scss | 19 +++++++++++++------ 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 3e7a85e..6af0d9c 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -9,10 +9,10 @@ export const signupRadioFields = [ "24/7 support", ], details: "", - price: 59, + price: 49, }, { - name: "Junior Partner", + name: "Partner", label: "Monthly - pro", value: "monthlyProPlan", description: [ @@ -22,7 +22,7 @@ export const signupRadioFields = [ "24/7 support", ], details: "", - price: 169, + price: 79, }, { name: "Senior Partner", @@ -30,6 +30,6 @@ export const signupRadioFields = [ value: "annualUnlimited", description: ["Unlimited documents.", "Triage-level support"], details: "", - price: 199, + price: 119, }, ]; diff --git a/src/styles/radio.scss b/src/styles/radio.scss index d7702d6..26f3d11 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -12,6 +12,8 @@ height: 40px; display: flex; flex-direction: row; + margin-top: 12px; + margin-left: 2px; } .radio-circle-lower { @@ -22,28 +24,33 @@ } .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; + 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; } From a7197b2e8b4ac0a6aee6765fd03023618c511b74 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 19:56:16 -0600 Subject: [PATCH 20/28] more --- src/Constants/Fields/RadioFields.js | 6 +++--- src/pageElements/Radio.js | 2 +- src/styles/radio.scss | 5 ++--- src/styles/signup.scss | 5 +++++ 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 6af0d9c..2f8fe04 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -5,7 +5,7 @@ export const signupRadioFields = [ value: "monthlyBasic", description: [ "1 document per month", - "Carryover one unused doc to next period", + "Carryover 1 document to next period", "24/7 support", ], details: "", @@ -17,8 +17,8 @@ export const signupRadioFields = [ value: "monthlyProPlan", description: [ "3 documents per month", - "Carryover two unused docs to next period", - "Additional accounts: first: 39, additional 59/each", + "Carryover 2 documents to next period", + "Up to 2 additional accounts: 59/each", "24/7 support", ], details: "", diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index f22af54..55af65d 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -42,7 +42,7 @@ const Radio = (props) => {
    {description.map((item) => { - return

    {item}

    ; + return

    {item}

    ; })}
    {`${details}`}
    diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 26f3d11..7294bbf 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -19,8 +19,8 @@ .radio-circle-lower { display: flex; flex-direction: column; - margin-left: 18px; - padding-left: 26px; + margin-left: 12px; + padding-left: 10px; } .radio-circle-box { @@ -44,7 +44,6 @@ .radio-price-box { display: flex; flex-direction: row-reverse; - height: 30px; width: 30%; } diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 52887af..2688757 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -166,3 +166,8 @@ width: 350px; height: 100%; } + +.signup-feat-item { + font-size: 0.9rem; + margin: 4px 0px; +} From 34350314e611e73f4b2bafed18a4fe6a82703783 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 19:59:18 -0600 Subject: [PATCH 21/28] more --- src/styles/radio.scss | 5 ++++- src/styles/signup.scss | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 7294bbf..b244037 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -20,7 +20,7 @@ display: flex; flex-direction: column; margin-left: 12px; - padding-left: 10px; + padding-left: 12px; } .radio-circle-box { @@ -33,6 +33,9 @@ } .radio-name-box { + display: flex; + align-items: center; + padding-top: 10px; height: 30px; width: 50%; font-family: var(--main-font); diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 2688757..d0b4b01 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -169,5 +169,5 @@ .signup-feat-item { font-size: 0.9rem; - margin: 4px 0px; + margin: 8px 0px 8px 4px; } From c1c484dbdaea79fb3fc04dcac80bc820e131f173 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 20:03:33 -0600 Subject: [PATCH 22/28] more --- src/Constants/Fields/RadioFields.js | 6 +++++- src/styles/radio.scss | 4 ++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 2f8fe04..68e5390 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -28,7 +28,11 @@ export const signupRadioFields = [ name: "Senior Partner", label: "Annual - unlimited annual", value: "annualUnlimited", - description: ["Unlimited documents.", "Triage-level support"], + description: [ + "Unlimited documents.", + "Triage-level support", + "Up to 8 additional accounts: 19/each", + ], details: "", price: 119, }, diff --git a/src/styles/radio.scss b/src/styles/radio.scss index b244037..b13bfc1 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -56,3 +56,7 @@ width: 40px; float: right; } + +.radio-description-box { + width: 240px; +} From 00f6febdaeae049166193f4c4dc06194f9e40040 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 21:08:58 -0600 Subject: [PATCH 23/28] more --- src/Components/SignupPage/SignupPage.js | 2 +- src/Constants/Fields/RadioFields.js | 17 +++++++++++++---- src/pageElements/Radio.js | 4 ++-- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 9f2d71f..2ee767f 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -402,7 +402,7 @@ const SignupPage = () => { description={option.description} details={option.details} activeRadioOption={activeRadioOption} - price={option.price} + price={option.pricing} />
    ))} diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 68e5390..b876521 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -9,7 +9,10 @@ export const signupRadioFields = [ "24/7 support", ], details: "", - price: 49, + pricing: [ + { type: "standard", amount: 69 }, + { type: "annDiscount", amount: 49 }, + ], }, { name: "Partner", @@ -22,7 +25,10 @@ export const signupRadioFields = [ "24/7 support", ], details: "", - price: 79, + pricing: [ + { type: "standard", amount: 97 }, + { type: "annDiscount", amount: 79 }, + ], }, { name: "Senior Partner", @@ -31,9 +37,12 @@ export const signupRadioFields = [ description: [ "Unlimited documents.", "Triage-level support", - "Up to 8 additional accounts: 19/each", + "Up to 8 additional accounts at 19/each", ], details: "", - price: 119, + pricing: [ + { type: "standard", amount: 149 }, + { type: "annDiscount", amount: 119 }, + ], }, ]; diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 55af65d..fe724b7 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -15,7 +15,7 @@ const Radio = (props) => { } = props; const classCheckbox = "checkbox"; const classOption = "option"; - console.log("value, activeRadioOption", value, activeRadioOption); + console.log("price", price); return (
    @@ -36,7 +36,7 @@ const Radio = (props) => { )}
    {`${name}`}
    -
    {`${price}`}
    +
    {`${price[1]["amount"]}`}
    From 055d80f927f89bd1238af7a9328412b3958d2e7b Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 21:14:07 -0600 Subject: [PATCH 24/28] mroe --- src/Components/SignupPage/SignupPage.js | 2 +- src/Constants/Fields/RadioFields.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 2ee767f..c171931 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -238,7 +238,7 @@ const SignupPage = () => { if (paymentDataValues === null) { return; } - + // let dataValues = validateData(); if (dataValues === null) { return; diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index b876521..485f69b 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -46,3 +46,4 @@ export const signupRadioFields = [ ], }, ]; +// From 23aeb877249109155407735bb1ca85f219137f3c Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 22:47:01 -0600 Subject: [PATCH 25/28] more --- src/Components/SignupPage/SignupPage.js | 9 +++++++-- src/pageElements/Radio.js | 8 ++++++-- src/pageElements/Toggle.js | 17 +++++++++++++---- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index c171931..baef690 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -41,7 +41,7 @@ const SignupPage = () => { const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic"); const modalText = "Description of monthly and annual subscriptions"; const [selectedPlan, setSelectedPlan] = useState({}); - const [annualizd, setAnualized] = useState(true); + const [isAnnualBilling, setIsAnnualBilling] = useState(false); // Could also go in App.js if needed in the future const stripe = new Stripe(stripeApiKey); @@ -168,6 +168,10 @@ const SignupPage = () => { setShowSelectPlan(true); }; + const handleToggle = () => { + setIsAnnualBilling(!isAnnualBilling); + }; + async function handleStripeAuthorization( user, paymentDataValues, @@ -387,7 +391,7 @@ const SignupPage = () => {

    Billed annually

    - +

    Billed montly

    @@ -403,6 +407,7 @@ const SignupPage = () => { details={option.details} activeRadioOption={activeRadioOption} price={option.pricing} + isAnnualBilling={isAnnualBilling} />
    ))} diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index fe724b7..1cb2ba9 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -12,10 +12,11 @@ const Radio = (props) => { disabled, activeRadioOption, details, + isAnnualBilling, } = props; const classCheckbox = "checkbox"; const classOption = "option"; - console.log("price", price); + const index = isAnnualBilling ? Number("1") : Number("0"); return (
    @@ -36,7 +37,10 @@ const Radio = (props) => { )}
    {`${name}`}
    -
    {`${price[1]["amount"]}`}
    +
    + {" "} + {`${price[index]["amount"]}`}{" "} +
    diff --git a/src/pageElements/Toggle.js b/src/pageElements/Toggle.js index dda550b..a3d3ddc 100644 --- a/src/pageElements/Toggle.js +++ b/src/pageElements/Toggle.js @@ -1,15 +1,24 @@ import ToggleButton from "react-bootstrap/ToggleButton"; import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup"; -function Toggle() { +const Toggle = (props) => { + const { onClick } = props; return ( <> - - + + ); -} +}; export default Toggle; From d0d81eb0e4e5072a61204d5191955900fd929a6a Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 22:49:15 -0600 Subject: [PATCH 26/28] more --- src/Components/SignupPage/SignupPage.js | 25 +------------------------ 1 file changed, 1 insertion(+), 24 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index baef690..8887430 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -5,7 +5,7 @@ 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"; @@ -437,26 +437,3 @@ const SignupPage = () => { }; export default SignupPage; - -/* - -
    -
    -
    Order summary
    -
    {`{subVar} subscription type`}
    -
    {`{subVar} subscription mini description`}
    -
    {`Total billed today: {subVar} `}
    -
    Plus aplicable sales tax -toooltip
    -
    -
    -
    -
    - */ From 4ea38e7b400b17f0a9f719bdb6f9e88eb0bb5314 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 22:56:57 -0600 Subject: [PATCH 27/28] more --- src/Components/SignupPage/SignupPage.js | 5 +---- src/Constants/Fields/RadioFields.js | 1 + src/pageElements/Radio.js | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 8887430..6aaee18 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -39,7 +39,6 @@ const SignupPage = () => { const [showPaymentModal, setShowPaymentModal] = useState(false); const [showSelectPlan, setShowSelectPlan] = useState(true); const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic"); - const modalText = "Description of monthly and annual subscriptions"; const [selectedPlan, setSelectedPlan] = useState({}); const [isAnnualBilling, setIsAnnualBilling] = useState(false); // Could also go in App.js if needed in the future @@ -50,9 +49,7 @@ const SignupPage = () => { ? process.env.REACT_APP_API_DEV : process.env.REACT_APP_API_PROD; - const basicPrice = 59; - const proPrice = 139; - const unlimtedPrice = 169; + const modalText = "Description of monthly and annual subscriptions"; const handleChangeInput = (e, name) => { const newData = handleFormDataChange(e, name, data, signupFields); diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 485f69b..2fcdf09 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -7,6 +7,7 @@ export const signupRadioFields = [ "1 document per month", "Carryover 1 document to next period", "24/7 support", + "First month is free!", ], details: "", pricing: [ diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 1cb2ba9..0294e75 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -45,7 +45,7 @@ const Radio = (props) => {
    - {description.map((item) => { + {description.map((item, i) => { return

    {item}

    ; })}
    From a9376cd2f236a2473fa4d330fd85f0f595bff7ed Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 23:43:22 -0600 Subject: [PATCH 28/28] d --- src/Components/SignupPage/SignupPage.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 6aaee18..82018d4 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -37,7 +37,7 @@ 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 [selectedPlan, setSelectedPlan] = useState({}); const [isAnnualBilling, setIsAnnualBilling] = useState(false); @@ -74,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); @@ -157,16 +153,18 @@ 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(