From d9e49487a3dba7d93d515ea5760ded5d9bd3a20f Mon Sep 17 00:00:00 2001 From: Jacob Date: Mon, 22 Jan 2024 17:25:09 -0500 Subject: [PATCH 01/43] initial setup for stripe --- .gitignore | 2 +- .idea/.gitignore | 5 + .idea/ax3Client.iml | 12 +++ .idea/inspectionProfiles/Project_Default.xml | 6 ++ .idea/modules.xml | 8 ++ .idea/vcs.xml | 6 ++ package-lock.json | 29 ++++- package.json | 2 + src/Components/SignupPage/SignupPage.js | 102 +++++++++++++----- src/Constants/Fields/PaymentFields.js | 12 +++ .../{Signupfields.js => SignupFields.js} | 2 +- 11 files changed, 155 insertions(+), 31 deletions(-) create mode 100644 .idea/.gitignore create mode 100644 .idea/ax3Client.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml rename src/Constants/Fields/{Signupfields.js => SignupFields.js} (97%) diff --git a/.gitignore b/.gitignore index 99048f8..ec8dc6f 100644 --- a/.gitignore +++ b/.gitignore @@ -4,7 +4,7 @@ build/ dist/ *.pyc *.pyo -**/env/ +.env/ env/ .env mCovo.py diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/ax3Client.iml b/.idea/ax3Client.iml new file mode 100644 index 0000000..24643cc --- /dev/null +++ b/.idea/ax3Client.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..be27107 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..35eb1dd --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c8c7cbc..2ff90c1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "client", + "name": "novodraft-client", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "client", + "name": "novodraft-client", "version": "0.1.0", "dependencies": { "@testing-library/jest-dom": "^5.17.0", @@ -14,6 +14,7 @@ "bootstrap": "^5.3.2", "classnames": "^2.3.2", "docx": "^8.2.4", + "dotenv": "^16.3.2", "firebase": "^10.3.1", "react": "^18.2.0", "react-bootstrap": "^2.8.0", @@ -24,6 +25,7 @@ "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", "react-spinners": "^0.13.8", + "stripe": "^14.13.0", "uuid": "^9.0.1", "web-vitals": "^2.1.4" }, @@ -7849,6 +7851,17 @@ "tslib": "^2.0.3" } }, + "node_modules/dotenv": { + "version": "16.3.2", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.2.tgz", + "integrity": "sha512-HTlk5nmhkm8F6JcdXvHIzaorzCoziNQT9mGxLPVXW8wJF1TiGSL60ZGB4gHWabHOaMmWmhvk2/lPHfnBiT78AQ==", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/motdotla/dotenv?sponsor=1" + } + }, "node_modules/dotenv-expand": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-5.1.0.tgz", @@ -17275,6 +17288,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/stripe": { + "version": "14.13.0", + "resolved": "https://registry.npmjs.org/stripe/-/stripe-14.13.0.tgz", + "integrity": "sha512-uLOfWtBUL1amJCTpKCXWrHntFOSaO2PWb/2hsxV/OlXLr0bz5MyU8IW1pFlmZqpw6hBqAW5Fad7Ty7xRxDYrzA==", + "dependencies": { + "@types/node": ">=8.1.0", + "qs": "^6.11.0" + }, + "engines": { + "node": ">=12.*" + } + }, "node_modules/style-loader": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz", diff --git a/package.json b/package.json index 55f1a87..fcc1946 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "bootstrap": "^5.3.2", "classnames": "^2.3.2", "docx": "^8.2.4", + "dotenv": "^16.3.2", "firebase": "^10.3.1", "react": "^18.2.0", "react-bootstrap": "^2.8.0", @@ -20,6 +21,7 @@ "react-router-dom": "^6.16.0", "react-scripts": "5.0.1", "react-spinners": "^0.13.8", + "stripe": "^14.13.0", "uuid": "^9.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 900991c..7834952 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -17,25 +17,34 @@ import { isFormDataHasErrors, } from "../../Utils/Form"; import { objectMap } from "../../Utils/Object"; -import { signupfields } from "../../Constants/Fields/SignupFields"; +import { signupFields } from "../../Constants/Fields/SignupFields"; import { paymentfields } from "../../Constants/Fields/PaymentFields"; import PaymentModal from "../Modals/PaymentModal"; import "../../styles/signup.scss"; +import Stripe from 'stripe'; const SignupPage = () => { const navigate = useNavigate(); const [notice, setNotice] = useState(""); const fieldsChunkSize = 2; const [isBusy, setIsBusy] = useState(false); - const [data, setData] = useState(getFormDataDefaults(signupfields)); + const [data, setData] = useState(getFormDataDefaults(signupFields)); const [paymentData, setPaymentData] = useState( getFormDataDefaults(paymentfields) ); const [showPaymentModal, setShowPaymentModal] = useState(false); const modalText = "Description of monthly and annual subscriptions"; + // this could also go in App.js if needed in the future + const stripe = new Stripe('pk_test_51NNoasBi8p7FeGFrI5SfpM6HuNMoxwImx6NRKyKbgbt6OPxMxQDiZ9I1GqvDa9qUwB3D3jlJOng6MyjPppWofxzP00Exvr8dBy') + + const apiUrl = + process.env.NODE_ENV === "development" + ? process.env.REACT_APP_API_DEV + : process.env.REACT_APP_API_PROD; + const handleChangeInput = (e, name) => { - const newData = handleFormDataChange(e, name, data, signupfields); + const newData = handleFormDataChange(e, name, data, signupFields); if (newData !== null) { setData(newData); } @@ -54,7 +63,7 @@ const SignupPage = () => { }; const validateData = () => { - const newData = getValidatedFormData(data, signupfields); + const newData = getValidatedFormData(data, signupFields); const hasErrors = isFormDataHasErrors(newData); setData(newData); return hasErrors ? null : objectMap(({ value }) => value, newData); @@ -125,10 +134,45 @@ const SignupPage = () => { setShowPaymentModal(true); }; - async function handleStripeAuthorization(paymentDataValues) { + async function handleStripeAuthorization(paymentDataValues, customerDataValues) { // Do: calls to Stripe API // if success, return some truthy value or // handle failure in handleSignup + + let error = false; + + const token = await stripe.tokens.create({ + card: { + number: paymentDataValues.cardNumber, + exp_month: paymentDataValues.cardExpirationMonth, + exp_year: paymentDataValues.cardExpirationYear, + cvc: paymentDataValues.cardCvvCode, + name: paymentDataValues.cardFirstName + ' ' + paymentDataValues.cardLastName, + } + }) + + try { + let response = await fetch(`${apiUrl}/create-subscription`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + type: 'monthly', // TODO: replace this with the user-chosen value later when we have the UI for it + customerData: { + email: customerDataValues.email, + name: customerDataValues.firstName + ' ' + customerDataValues.lastName, + }, + token, + }), + }) + } + catch (error) { + console.log(error) + error = true; + } + + return !error; } const handleSignup = async (e) => { @@ -144,25 +188,29 @@ const SignupPage = () => { } setIsBusy(true); - const paymentSuccess = handleStripeAuthorization(paymentDataValues); - if (paymentSuccess) { - try { - const userCredential = await createUserWithEmailAndPassword( - auth, - dataValues.email, - dataValues.password - ); - const user = userCredential.user; + + try { + const userCredential = await createUserWithEmailAndPassword( + auth, + dataValues.email, + dataValues.password + ); + const user = userCredential.user; + + const paymentSuccess = await handleStripeAuthorization(paymentDataValues, dataValues); + + if(paymentSuccess) { await saveUserData(user.uid, dataValues); navigate("/"); - } catch (error) { - setIsBusy(false); - setNotice( - error.message || "Sorry, something went wrong. Please try again." - ); } - } else { - //handle payment failure + else { + // handle payment failure + } + } catch (error) { + setIsBusy(false); + setNotice( + error.message || "Sorry, something went wrong. Please try again." + ); } }; @@ -174,7 +222,7 @@ const SignupPage = () => {
{splitEvery( - Object.keys(signupfields).slice(0, -2), + Object.keys(signupFields).slice(0, -2), fieldsChunkSize ).map((names, j) => ( @@ -189,11 +237,11 @@ const SignupPage = () => { message={data[name].message} label={ data[name].value.length === 0 - ? signupfields[name].label + ? signupFields[name].label : "" } - type={signupfields[name].type} - values={signupfields[name].values} + type={signupFields[name].type} + values={signupFields[name].values} disabled={isBusy} /> @@ -207,7 +255,7 @@ const SignupPage = () => { type="password" label={ data.password.value.length === 0 - ? signupfields.password.label + ? signupFields.password.label : "" } value={data.password.value} @@ -225,7 +273,7 @@ const SignupPage = () => { type="password" label={ data.confirmPassword.value.length === 0 - ? signupfields.confirmPassword.label + ? signupFields.confirmPassword.label : "" } value={data.confirmPassword.value} diff --git a/src/Constants/Fields/PaymentFields.js b/src/Constants/Fields/PaymentFields.js index d59546c..0066084 100644 --- a/src/Constants/Fields/PaymentFields.js +++ b/src/Constants/Fields/PaymentFields.js @@ -23,4 +23,16 @@ export const paymentfields = { maxLength: 5, type: "cardCvvCode", }, + cardExpirationMonth: { + required: true, + label: "Card Expiration Month", + maxLength: 2, + type: "cardExpirationMonth", + }, + cardExpirationYear: { + required: true, + label: "Card Expiration Year", + maxLength: 4, + type: "cardExpirationYear", + }, }; diff --git a/src/Constants/Fields/Signupfields.js b/src/Constants/Fields/SignupFields.js similarity index 97% rename from src/Constants/Fields/Signupfields.js rename to src/Constants/Fields/SignupFields.js index 69a4faf..4eeb216 100644 --- a/src/Constants/Fields/Signupfields.js +++ b/src/Constants/Fields/SignupFields.js @@ -1,4 +1,4 @@ -export const signupfields = { +export const signupFields = { firstName: { required: true, label: "First Name", maxLength: 45 }, lastName: { required: true, label: "Last Name", maxLength: 45 }, firm: { required: true, label: "Firm", minLength: 2, maxLength: 45 }, From b48c8212d30cf490c2e53d5c907929e857054f50 Mon Sep 17 00:00:00 2001 From: Jacob Date: Tue, 23 Jan 2024 14:42:57 -0500 Subject: [PATCH 02/43] added subscription id and customer id to the user data --- src/Components/SignupPage/SignupPage.js | 48 +++++++++++++++++++++---- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 7834952..f72e03a 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -94,6 +94,9 @@ const SignupPage = () => { email, } = dataValues; + const subscriptionId = dataValues?.subscriptionId; + const customerId = dataValues?.customerId; + const userData = { appUserId, fbAuthUid, @@ -109,6 +112,8 @@ const SignupPage = () => { barNumber, practiceArea, email, + subscriptionId, + customerId, }; try { @@ -134,12 +139,14 @@ const SignupPage = () => { setShowPaymentModal(true); }; - async function handleStripeAuthorization(paymentDataValues, customerDataValues) { + async function handleStripeAuthorization(user, paymentDataValues, customerDataValues) { // Do: calls to Stripe API // if success, return some truthy value or // handle failure in handleSignup let error = false; + let subscriptionId = null; + let customerId = null; const token = await stripe.tokens.create({ card: { @@ -166,12 +173,32 @@ const SignupPage = () => { token, }), }) + + response = await response.json() + + subscriptionId = response.subscriptionId; + customerId = response.customerId; + + console.log('response', response); + + return { + subscriptionId, + customerId, + } } catch (error) { console.log(error) error = true; } + if(error) { + return false + } + return { + subscriptionId, + customerId, + } + return !error; } @@ -182,7 +209,7 @@ const SignupPage = () => { return; } - const dataValues = validateData(); + let dataValues = validateData(); if (dataValues === null) { return; } @@ -197,14 +224,21 @@ const SignupPage = () => { ); const user = userCredential.user; - const paymentSuccess = await handleStripeAuthorization(paymentDataValues, dataValues); + const paymentResponse = await handleStripeAuthorization(user, paymentDataValues, dataValues); - if(paymentSuccess) { - await saveUserData(user.uid, dataValues); - navigate("/"); + if(paymentResponse === false) { + // handle payment failure + setIsBusy(false); + setNotice( + "Sorry, something went wrong. Please try again." + ); + return; } else { - // handle payment failure + dataValues = {...dataValues, ...paymentResponse}; + + await saveUserData(user.uid, dataValues); + navigate("/"); } } catch (error) { setIsBusy(false); From 59b212d018c10185dbd314d9191d54e43a5225ad Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Tue, 23 Jan 2024 16:20:01 -0600 Subject: [PATCH 03/43] small refactor --- src/Components/SignupPage/SignupPage.js | 106 ++++++++++++++---------- 1 file changed, 62 insertions(+), 44 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index f72e03a..eb6705b 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -21,7 +21,7 @@ import { signupFields } from "../../Constants/Fields/SignupFields"; import { paymentfields } from "../../Constants/Fields/PaymentFields"; import PaymentModal from "../Modals/PaymentModal"; import "../../styles/signup.scss"; -import Stripe from 'stripe'; +import Stripe from "stripe"; const SignupPage = () => { const navigate = useNavigate(); @@ -36,7 +36,9 @@ const SignupPage = () => { const modalText = "Description of monthly and annual subscriptions"; // this could also go in App.js if needed in the future - const stripe = new Stripe('pk_test_51NNoasBi8p7FeGFrI5SfpM6HuNMoxwImx6NRKyKbgbt6OPxMxQDiZ9I1GqvDa9qUwB3D3jlJOng6MyjPppWofxzP00Exvr8dBy') + const stripe = new Stripe( + "pk_test_51NNoasBi8p7FeGFrI5SfpM6HuNMoxwImx6NRKyKbgbt6OPxMxQDiZ9I1GqvDa9qUwB3D3jlJOng6MyjPppWofxzP00Exvr8dBy" + ); const apiUrl = process.env.NODE_ENV === "development" @@ -139,7 +141,11 @@ const SignupPage = () => { setShowPaymentModal(true); }; - async function handleStripeAuthorization(user, paymentDataValues, customerDataValues) { + async function handleStripeAuthorization( + user, + paymentDataValues, + customerDataValues + ) { // Do: calls to Stripe API // if success, return some truthy value or // handle failure in handleSignup @@ -154,50 +160,53 @@ const SignupPage = () => { exp_month: paymentDataValues.cardExpirationMonth, exp_year: paymentDataValues.cardExpirationYear, cvc: paymentDataValues.cardCvvCode, - name: paymentDataValues.cardFirstName + ' ' + paymentDataValues.cardLastName, - } - }) + name: + paymentDataValues.cardFirstName + + " " + + paymentDataValues.cardLastName, + }, + }); try { let response = await fetch(`${apiUrl}/create-subscription`, { - method: 'POST', + method: "POST", headers: { - 'Content-Type': 'application/json', + "Content-Type": "application/json", }, body: JSON.stringify({ - type: 'monthly', // TODO: replace this with the user-chosen value later when we have the UI for it + type: "monthly", // TODO: replace this with the user-chosen value later when we have the UI for it customerData: { email: customerDataValues.email, - name: customerDataValues.firstName + ' ' + customerDataValues.lastName, + name: + customerDataValues.firstName + " " + customerDataValues.lastName, }, token, }), - }) + }); - response = await response.json() + response = await response.json(); subscriptionId = response.subscriptionId; customerId = response.customerId; - console.log('response', response); + console.log("response", response); return { subscriptionId, customerId, - } - } - catch (error) { - console.log(error) + }; + } catch (error) { + console.log(error); error = true; } - if(error) { - return false + if (error) { + return false; } return { subscriptionId, customerId, - } + }; return !error; } @@ -215,39 +224,44 @@ const SignupPage = () => { } setIsBusy(true); + console.log("paymentDataValues, dataValues", paymentDataValues, dataValues); + if (paymentDataValues && dataValues) { + try { + const userCredential = await createUserWithEmailAndPassword( + auth, + dataValues.email, + dataValues.password + ); + const user = userCredential.user; - try { - const userCredential = await createUserWithEmailAndPassword( - auth, - dataValues.email, - dataValues.password - ); - const user = userCredential.user; + const paymentResponse = await handleStripeAuthorization( + user, + paymentDataValues, + dataValues + ); - const paymentResponse = await handleStripeAuthorization(user, paymentDataValues, dataValues); + if (paymentResponse === false) { + // handle payment failure + setIsBusy(false); + setNotice("Sorry, something went wrong. Please try again."); + return; + } else { + dataValues = { ...dataValues, ...paymentResponse }; - if(paymentResponse === false) { - // handle payment failure + await saveUserData(user.uid, dataValues); + navigate("/"); + } + } catch (error) { setIsBusy(false); setNotice( - "Sorry, something went wrong. Please try again." + error.message || "Sorry, something went wrong. Please try again." ); - return; } - else { - dataValues = {...dataValues, ...paymentResponse}; - - await saveUserData(user.uid, dataValues); - navigate("/"); - } - } catch (error) { - setIsBusy(false); - setNotice( - error.message || "Sorry, something went wrong. Please try again." - ); } }; + const showNoticeOnPage = "" !== notice && !showPaymentModal; + return (
@@ -335,13 +349,15 @@ const SignupPage = () => {
- {"" !== notice && ( + {showNoticeOnPage ? ( <>

{notice}
+ ) : ( + <> )} {showPaymentModal ? ( @@ -353,6 +369,8 @@ const SignupPage = () => { handleChangePaymentInput={handleChangePaymentInput} handleSignup={handleSignup} modalText={modalText} + notice={notice} + setNotice={setNotice} /> ) : ( <> From 9f31878c1eee0cd9bda11f1aa2421dbc1f51f689 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Wed, 24 Jan 2024 23:48:10 -0600 Subject: [PATCH 04/43] more --- src/Components/SignupPage/SignupPage.js | 47 ++++++++++++++++++------- src/Constants/Fields/SignupFields.js | 8 ++++- src/styles/signup.scss | 44 +++++++++++++++++++++++ 3 files changed, 85 insertions(+), 14 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index eb6705b..d29cc59 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -33,6 +33,7 @@ const SignupPage = () => { getFormDataDefaults(paymentfields) ); const [showPaymentModal, setShowPaymentModal] = useState(false); + const [showSelectPlan, setShowSelectPlan] = useState(true); const modalText = "Description of monthly and annual subscriptions"; // this could also go in App.js if needed in the future @@ -129,6 +130,11 @@ const SignupPage = () => { const handleProceedToPayment = (e) => { e.preventDefault(); + setShowPaymentModal(true); + }; + + const handleOpenSelectPlan = (e) => { + e.preventDefault(); if (isBusy) { return; } @@ -137,10 +143,7 @@ const SignupPage = () => { if (dataValues === null) { return; } - - setShowPaymentModal(true); }; - async function handleStripeAuthorization( user, paymentDataValues, @@ -276,7 +279,6 @@ const SignupPage = () => { {names.map((name, i) => ( - {console.log("data, name", data, name)} { ))} ))} - + { /> - + { className="primary-button signup-proceed" type="button" size="lg" - onClick={handleProceedToPayment} + onClick={handleOpenSelectPlan} disabled={isBusy} - labelText="Proceed to Payment" + labelText="Select A Plan" /> -
- - Go to login - -
{showNoticeOnPage ? ( @@ -360,6 +357,30 @@ const SignupPage = () => { <> )} + {showSelectPlan ? ( +
+
+
+
+ Select your subscription plan +
+
+
+
+
+
+
+ ) : ( + <> + )} {showPaymentModal ? ( Date: Wed, 24 Jan 2024 23:57:38 -0600 Subject: [PATCH 05/43] more --- src/Components/SignupPage/SignupPage.js | 19 ++++++++++++++++++- src/styles/signup.scss | 2 +- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index d29cc59..bda940c 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -7,6 +7,7 @@ import { db, auth } from "../../firebase"; import { createUserWithEmailAndPassword } from "firebase/auth"; import { Link, useNavigate } from "react-router-dom"; import TextInput from "../../pageElements/TextInput"; +import Radiogroup from "../../pageElements/Radiogroup"; import { v4 as uuidv4 } from "uuid"; import { collection, setDoc, doc } from "firebase/firestore"; import { splitEvery } from "../../Utils/Array"; @@ -34,6 +35,12 @@ const SignupPage = () => { ); const [showPaymentModal, setShowPaymentModal] = useState(false); const [showSelectPlan, setShowSelectPlan] = useState(true); + + const radioOptions = [ + { name: "Plaintiff", label: "Plaintiff", value: "Plaintiff" }, + { name: "Defendant", label: "Defendant", value: "Defendant" }, + ]; + const modalText = "Description of monthly and annual subscriptions"; // this could also go in App.js if needed in the future @@ -365,7 +372,17 @@ const SignupPage = () => { Select your subscription plan -
+
+
+ handleChangeInput(e, "clientPosition")} + /> +
+
-
+
handleChangeInput(e, "clientPosition")} />
diff --git a/src/pageElements/Radiogroup.js b/src/pageElements/Radiogroup.js index a05a790..558dc02 100644 --- a/src/pageElements/Radiogroup.js +++ b/src/pageElements/Radiogroup.js @@ -11,15 +11,20 @@ const Radiogroup = (props) => { onClick, value, options, - disabled + disabled, + dynamicClassName, } = props; const classCheckbox = "checkbox"; const classOption = "option"; + const dynamicClass = + dynamicClassName === "signup-option-div" + ? dynamicClassName + : "checkbox-option-div"; return (
{title &&
{title}
} -
+
{options && options?.length && options.map((option, index) => ( diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 81669c8..766ef0b 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -82,6 +82,17 @@ padding: 6px; } +.signup-radio-wrapper { + background-color: red; + display: flex; + flex-direction: column; +} + +.signup-option-div { + display: flex; + flex-direction: column; +} + .radio-group-box { display: flex; flex-direction: column; From ef15a7ee02114f36e1c0e46dd6e6a2fc2e7a56ea Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 00:18:43 -0600 Subject: [PATCH 07/43] more --- src/Components/SignupPage/SignupPage.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 79a100f..d410b01 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -36,7 +36,7 @@ const SignupPage = () => { const [showPaymentModal, setShowPaymentModal] = useState(false); const [showSelectPlan, setShowSelectPlan] = useState(true); - const radioOptions = [ + const radioOptionFields = [ { name: "Plaintiff", label: "Plaintiff", value: "Plaintiff" }, { name: "Defendant", label: "Defendant", value: "Defendant" }, ]; @@ -134,6 +134,13 @@ const SignupPage = () => { } } + const handleChangeRadioInput = (e, name) => { + const newData = handleFormDataChange(e, name, data, fields); + if (newData !== null) { + setData(newData); + } + }; + const handleProceedToPayment = (e) => { e.preventDefault(); @@ -375,12 +382,11 @@ const SignupPage = () => {
handleChangeInput(e, "clientPosition")} + onClick={(e) => handleChangeRadioInput(e, "clientPosition")} />
From 45f63e95bba794cc3c14b6adcc156c6bd245376e Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 11:07:43 -0600 Subject: [PATCH 08/43] more --- src/Components/SignupPage/SignupPage.js | 20 +++++++++++++++----- src/Constants/Fields/RadioFields.js | 13 +++++++++++++ src/pageElements/Radiogroup.js | 1 + src/styles/signup.scss | 2 +- 4 files changed, 30 insertions(+), 6 deletions(-) create mode 100644 src/Constants/Fields/RadioFields.js diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index d410b01..56b1d53 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -20,6 +20,7 @@ import { import { objectMap } from "../../Utils/Object"; import { signupFields } from "../../Constants/Fields/SignupFields"; import { paymentfields } from "../../Constants/Fields/PaymentFields"; +import { signupRadioFields } from "../../Constants/Fields/RadioFields"; import PaymentModal from "../Modals/PaymentModal"; import "../../styles/signup.scss"; import Stripe from "stripe"; @@ -36,9 +37,18 @@ const SignupPage = () => { const [showPaymentModal, setShowPaymentModal] = useState(false); const [showSelectPlan, setShowSelectPlan] = useState(true); - const radioOptionFields = [ - { name: "Plaintiff", label: "Plaintiff", value: "Plaintiff" }, - { name: "Defendant", label: "Defendant", value: "Defendant" }, + const signupRadioFields = [ + { + name: "Monthly - basic", + label: "Monthly - basic", + value: "monthlyBasic", + }, + { name: "Monthly - pro", label: "Monthly - pro", value: "monthlyPro" }, + { + name: "Annual - unlimted", + label: "Annual - unlimte", + value: "annualUnlimited", + }, ]; const modalText = "Description of monthly and annual subscriptions"; @@ -135,7 +145,7 @@ const SignupPage = () => { } const handleChangeRadioInput = (e, name) => { - const newData = handleFormDataChange(e, name, data, fields); + const newData = handleFormDataChange(e, name, data, signupRadioFields); if (newData !== null) { setData(newData); } @@ -382,7 +392,7 @@ const SignupPage = () => {
{ dynamicClassName === "signup-option-div" ? dynamicClassName : "checkbox-option-div"; + return (
{title &&
{title}
} diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 766ef0b..74436a8 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -83,7 +83,7 @@ } .signup-radio-wrapper { - background-color: red; + background-color: #fff; display: flex; flex-direction: column; } From a6c6b3c6c6609b589d8b4489920315c139ff7da0 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 11:21:22 -0600 Subject: [PATCH 09/43] more --- src/Components/SignupPage/SignupPage.js | 19 +++++++++++-------- src/pageElements/Radiogroup.js | 7 ++++++- src/styles/signup.scss | 16 ++++++++++++++++ 3 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 56b1d53..e6e7c6a 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -402,14 +402,17 @@ const SignupPage = () => {
-
) : ( diff --git a/src/pageElements/Radiogroup.js b/src/pageElements/Radiogroup.js index 1892347..047a194 100644 --- a/src/pageElements/Radiogroup.js +++ b/src/pageElements/Radiogroup.js @@ -13,6 +13,7 @@ const Radiogroup = (props) => { options, disabled, dynamicClassName, + optionContainerDynamicClass, } = props; const classCheckbox = "checkbox"; const classOption = "option"; @@ -22,6 +23,10 @@ const Radiogroup = (props) => { ? dynamicClassName : "checkbox-option-div"; + const optionContainerDynamic = optionContainerDynamicClass + ? optionContainerDynamicClass + : ""; + return (
{title &&
{title}
} @@ -30,7 +35,7 @@ const Radiogroup = (props) => { options?.length && options.map((option, index) => (
!disabled && onClick && onClick(option)} > diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 74436a8..315ec9c 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -101,3 +101,19 @@ height: 300px; background-color: #fff; } + +.select-plan-summary-box { + display: flex; + flex-direction: column; + height: 200px; + width: 100%; + background-color: red; + padding: 6px; +} + +.selectplan-payment-button-wrapper { + display: flex; + flex-direction: row-reverse; + margin: 6px; + padding: 6px; +} From 6bc357257c99c2a72018e635f8550a918d93d2ed Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 11:42:37 -0600 Subject: [PATCH 10/43] more --- src/Components/SignupPage/SignupPage.js | 1 + src/pageElements/Radiogroup.js | 18 ++++++------------ src/styles/signup.scss | 10 ++++++++-- 3 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index e6e7c6a..c3a5a98 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -396,6 +396,7 @@ const SignupPage = () => { value={"data.clientPosition.value"} disabled={isBusy} dynamicClassName={"signup-option-div"} + optionContainerDynamicClass={"signup-option"} onClick={(e) => handleChangeRadioInput(e, "clientPosition")} />
diff --git a/src/pageElements/Radiogroup.js b/src/pageElements/Radiogroup.js index 047a194..d14d5c7 100644 --- a/src/pageElements/Radiogroup.js +++ b/src/pageElements/Radiogroup.js @@ -27,6 +27,8 @@ const Radiogroup = (props) => { ? optionContainerDynamicClass : ""; + console.log("optionContainerDynamic", optionContainerDynamic); + return (
{title &&
{title}
} @@ -35,13 +37,13 @@ const Radiogroup = (props) => { options?.length && options.map((option, index) => (
!disabled && onClick && onClick(option)} >
{value === option.value ? ( -
+
{
{option.name}
) : ( -
+
{ ); }; -/** - * A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen. - */ - export default Radiogroup; - -/* - - */ diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 315ec9c..0085e41 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -105,9 +105,11 @@ .select-plan-summary-box { display: flex; flex-direction: column; - height: 200px; + height: 250px; width: 100%; - background-color: red; + border-radius: 10px; + background-color: #fff; + border: 1px solid #e9e9e9; padding: 6px; } @@ -117,3 +119,7 @@ margin: 6px; padding: 6px; } + +.signup-option { + width: 200px !important; +} From 136c1e9af2f8c5c1b4c9bb9e786a7b99db492fd4 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 12:04:41 -0600 Subject: [PATCH 11/43] more --- src/Components/SignupPage/SignupPage.js | 2 +- src/Utils/Form.js | 5 +++++ src/styles/signup.scss | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index c3a5a98..f0cf2d1 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -397,7 +397,7 @@ const SignupPage = () => { disabled={isBusy} dynamicClassName={"signup-option-div"} optionContainerDynamicClass={"signup-option"} - onClick={(e) => handleChangeRadioInput(e, "clientPosition")} + onClick={handleChangeRadioInput} />
diff --git a/src/Utils/Form.js b/src/Utils/Form.js index 3e44f77..8570c49 100644 --- a/src/Utils/Form.js +++ b/src/Utils/Form.js @@ -84,6 +84,11 @@ export const getValidatedFormData = (data, fields) => }, data); export const handleFormDataChange = (e, name, data, fields) => { + console.log("fields", fields); + if (!fields) { + return; + } + const value = (typeof e?.target?.value === "undefined" ? e.value : e.target.value) || ""; const field = fields[name]; diff --git a/src/styles/signup.scss b/src/styles/signup.scss index 0085e41..ecb257a 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -121,5 +121,5 @@ } .signup-option { - width: 200px !important; + width: 100% !important; } From 4fd3855a1d273758048926658a9ded51f0005809 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 12:20:57 -0600 Subject: [PATCH 12/43] more --- src/Components/SignupPage/SignupPage.js | 37 +++++++++++++++++-------- 1 file changed, 26 insertions(+), 11 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index f0cf2d1..79bdce5 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -38,17 +38,32 @@ const SignupPage = () => { const [showSelectPlan, setShowSelectPlan] = useState(true); const signupRadioFields = [ - { - name: "Monthly - basic", - label: "Monthly - basic", - value: "monthlyBasic", - }, - { name: "Monthly - pro", label: "Monthly - pro", value: "monthlyPro" }, - { - name: "Annual - unlimted", - label: "Annual - unlimte", - value: "annualUnlimited", - }, + [ + { + name: "Monthly - basic", + label: "Monthly - basic", + value: "monthlyBasic", + }, + { name: "Monthly - pro", label: "Monthly - pro", value: "monthlyPro" }, + { + name: "Annual - unlimted", + label: "Annual - unlimte", + value: "annualUnlimited", + }, + ], + [ + { + name: "Monthly - basic", + label: "Monthly - basic", + value: "monthlyBasic", + }, + { name: "Monthly - pro", label: "Monthly - pro", value: "monthlyPro" }, + { + name: "Annual - unlimted", + label: "Annual - unlimte", + value: "annualUnlimited", + }, + ], ]; const modalText = "Description of monthly and annual subscriptions"; From d67a7f59ed9d0d243c319e7f807d25173c5cf559 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 12:28:12 -0600 Subject: [PATCH 13/43] more --- src/Components/SignupPage/SignupPage.js | 36 ++++++++++++++++++------- 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 79bdce5..426be5c 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -405,16 +405,19 @@ const SignupPage = () => {
-
- -
+ {signupRadioFields?.map((group, i) => { + console.log("group, i", group, i); +
+ +
; + })}
@@ -454,3 +457,16 @@ const SignupPage = () => { }; export default SignupPage; + +/* +
+ +
+ */ From 929d11daa533b39ebeb2c09af117c98e9ba1979c Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 12:31:01 -0600 Subject: [PATCH 14/43] more --- src/Components/SignupPage/SignupPage.js | 10 ++-------- src/pageElements/Radiogroup.js | 3 +-- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 426be5c..568793f 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -45,19 +45,13 @@ const SignupPage = () => { value: "monthlyBasic", }, { name: "Monthly - pro", label: "Monthly - pro", value: "monthlyPro" }, + ], + [ { name: "Annual - unlimted", label: "Annual - unlimte", value: "annualUnlimited", }, - ], - [ - { - name: "Monthly - basic", - label: "Monthly - basic", - value: "monthlyBasic", - }, - { name: "Monthly - pro", label: "Monthly - pro", value: "monthlyPro" }, { name: "Annual - unlimted", label: "Annual - unlimte", diff --git a/src/pageElements/Radiogroup.js b/src/pageElements/Radiogroup.js index d14d5c7..e25f566 100644 --- a/src/pageElements/Radiogroup.js +++ b/src/pageElements/Radiogroup.js @@ -15,6 +15,7 @@ const Radiogroup = (props) => { dynamicClassName, optionContainerDynamicClass, } = props; + console.log("props", props); const classCheckbox = "checkbox"; const classOption = "option"; @@ -27,8 +28,6 @@ const Radiogroup = (props) => { ? optionContainerDynamicClass : ""; - console.log("optionContainerDynamic", optionContainerDynamic); - return (
{title &&
{title}
} From 42c898b282971f8b829bc8937bb602fe3695cc57 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 12:37:41 -0600 Subject: [PATCH 15/43] more --- src/Components/SignupPage/SignupPage.js | 16 +++++++--------- src/pageElements/Radiogroup.js | 3 ++- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 568793f..ed4c7be 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -49,12 +49,12 @@ const SignupPage = () => { [ { name: "Annual - unlimted", - label: "Annual - unlimte", + label: "Annual - unlimted", value: "annualUnlimited", }, { name: "Annual - unlimted", - label: "Annual - unlimte", + label: "Annual - unlimted", value: "annualUnlimited", }, ], @@ -399,19 +399,17 @@ const SignupPage = () => {
- {signupRadioFields?.map((group, i) => { - console.log("group, i", group, i); + {signupRadioFields?.map((group, i) => (
handleChangeRadioInput(e, group[i].name)} /> -
; - })} +
+ ))}
diff --git a/src/pageElements/Radiogroup.js b/src/pageElements/Radiogroup.js index e25f566..3057a76 100644 --- a/src/pageElements/Radiogroup.js +++ b/src/pageElements/Radiogroup.js @@ -1,6 +1,7 @@ import { CircleFill, Circle } from "react-bootstrap-icons"; const Radiogroup = (props) => { + console.log("hello"); const { className, classNames, @@ -15,7 +16,7 @@ const Radiogroup = (props) => { dynamicClassName, optionContainerDynamicClass, } = props; - console.log("props", props); + const classCheckbox = "checkbox"; const classOption = "option"; From 6339962779da7e1c338e70470f7c42123c50a546 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 12:40:06 -0600 Subject: [PATCH 16/43] more --- src/Components/SignupPage/SignupPage.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index ed4c7be..7be02fb 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -53,9 +53,9 @@ const SignupPage = () => { value: "annualUnlimited", }, { - name: "Annual - unlimted", - label: "Annual - unlimted", - value: "annualUnlimited", + name: "", + label: "", + value: "", }, ], ]; @@ -154,6 +154,7 @@ const SignupPage = () => { } const handleChangeRadioInput = (e, name) => { + console.log("e, name", e, name); const newData = handleFormDataChange(e, name, data, signupRadioFields); if (newData !== null) { setData(newData); From 9dff4abd047a074dc90aef3b4d82b6dedc62aaa3 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 13:01:16 -0600 Subject: [PATCH 17/43] more --- src/Components/SignupPage/SignupPage.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 7be02fb..0aeeba9 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -154,7 +154,11 @@ const SignupPage = () => { } const handleChangeRadioInput = (e, name) => { - console.log("e, name", e, name); + console.log("name", name.label); + return; + if (!name) { + return; + } const newData = handleFormDataChange(e, name, data, signupRadioFields); if (newData !== null) { setData(newData); @@ -261,7 +265,7 @@ const SignupPage = () => { } setIsBusy(true); - console.log("paymentDataValues, dataValues", paymentDataValues, dataValues); + if (paymentDataValues && dataValues) { try { const userCredential = await createUserWithEmailAndPassword( @@ -403,11 +407,11 @@ const SignupPage = () => { {signupRadioFields?.map((group, i) => (
handleChangeRadioInput(e, group[i].name)} + onClick={(e) => handleChangeRadioInput(e, group[i])} />
))} From a076a3bf9fa5ff378cec3d8b80a06531f48fc7ca Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 13:18:53 -0600 Subject: [PATCH 18/43] more --- src/Components/SignupPage/SignupPage.js | 16 +--- src/pageElements/Radio.js | 102 ++++++++++++++++++++---- src/pageElements/Radiogroup.js | 27 +++---- 3 files changed, 100 insertions(+), 45 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 0aeeba9..0fecd88 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -7,7 +7,6 @@ import { db, auth } from "../../firebase"; import { createUserWithEmailAndPassword } from "firebase/auth"; import { Link, useNavigate } from "react-router-dom"; import TextInput from "../../pageElements/TextInput"; -import Radiogroup from "../../pageElements/Radiogroup"; import { v4 as uuidv4 } from "uuid"; import { collection, setDoc, doc } from "firebase/firestore"; import { splitEvery } from "../../Utils/Array"; @@ -22,6 +21,7 @@ import { signupFields } from "../../Constants/Fields/SignupFields"; import { paymentfields } from "../../Constants/Fields/PaymentFields"; import { signupRadioFields } from "../../Constants/Fields/RadioFields"; import PaymentModal from "../Modals/PaymentModal"; +import Radio from "../../pageElements/Radio"; import "../../styles/signup.scss"; import Stripe from "stripe"; @@ -404,17 +404,9 @@ const SignupPage = () => {
- {signupRadioFields?.map((group, i) => ( -
- handleChangeRadioInput(e, group[i])} - /> -
- ))} + {signupRadioFields?.map((radio, i) => { + console.log("radio", radio); + })}
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index e4313cb..d677504 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -1,23 +1,95 @@ +import { CircleFill, Circle } from "react-bootstrap-icons"; -const Radio = ({ - rightLabel, - leftLabel, - containerClassName, - labelClassName, - ...props -}) => { +const Radio = (props) => { + const { + className, + classNames, + labelText, + title, + price, + ref, + onClick, + value, + options, + disabled, + } = props; + const classCheckbox = "checkbox"; + const classOption = "option"; + const foo = []; return ( -
- +
+ {options.map((option) => ( + <>{option.name} + ))}
); }; +/** + * A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen. + */ + export default Radio; -// +/* + {options && + options?.length && + options.map((option, index) => ( +
!disabled && onClick && onClick(option)} + > +
+ {value === option.value ? ( +
+
+ { + !disabled && onClick(e); + }} + /> +
+ +
+ {option.name} +
+
+ ) : ( +
+
+ { + !disabled && onClick(e); + }} + /> +
+
+ {option.name} +
+
+ )} +
+
+ ))} + */ diff --git a/src/pageElements/Radiogroup.js b/src/pageElements/Radiogroup.js index 3057a76..1ecd057 100644 --- a/src/pageElements/Radiogroup.js +++ b/src/pageElements/Radiogroup.js @@ -1,7 +1,6 @@ import { CircleFill, Circle } from "react-bootstrap-icons"; const Radiogroup = (props) => { - console.log("hello"); const { className, classNames, @@ -13,37 +12,25 @@ const Radiogroup = (props) => { value, options, disabled, - dynamicClassName, - optionContainerDynamicClass, } = props; - const classCheckbox = "checkbox"; const classOption = "option"; - const dynamicClass = - dynamicClassName === "signup-option-div" - ? dynamicClassName - : "checkbox-option-div"; - - const optionContainerDynamic = optionContainerDynamicClass - ? optionContainerDynamicClass - : ""; - return (
{title &&
{title}
} -
+
{options && options?.length && options.map((option, index) => (
!disabled && onClick && onClick(option)} >
{value === option.value ? ( -
+
{
{option.name}
) : ( -
+
{ ); }; +/** + * A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen. + */ + export default Radiogroup; From 5964317880be1ed784b1ef40ac5375103e6c2242 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 13:34:57 -0600 Subject: [PATCH 19/43] more --- src/Constants/Fields/RadioFields.js | 6 ++++- src/pageElements/Radio.js | 40 ++++++++++++++++++++++++++++- 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 4f0dc6c..914cdde 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -4,7 +4,11 @@ export const signupRadioFields = [ label: "Monthly - basic", value: "monthlyBasic", }, - { name: "Monthly - pro", label: "Monthly - pro", value: "monthlyPro" }, + { + name: "Monthly - pro plan", + label: "Monthly - pro plan", + value: "monthlyProPlan", + }, { name: "Annual - unlimted", label: "Annual - unlimte", diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index d677504..9551c69 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -19,7 +19,45 @@ const Radio = (props) => { return (
{options.map((option) => ( - <>{option.name} +
!disabled && onClick && onClick(option)} + > + {value == option?.value ? ( +
+
{option.name}
+ { + !disabled && onClick(e); + }} + /> +
+ ) : ( +
+
{option.name}
+ { + !disabled && onClick(e); + }} + /> +
+ )} +
))}
); From 48f9ea9caee16b2244794f9e23dc465f0502caef Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 13:37:51 -0600 Subject: [PATCH 20/43] more --- src/Components/SignupPage/SignupPage.js | 41 +++---------------------- 1 file changed, 5 insertions(+), 36 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 0fecd88..ba6e2f9 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -36,30 +36,7 @@ const SignupPage = () => { ); const [showPaymentModal, setShowPaymentModal] = useState(false); const [showSelectPlan, setShowSelectPlan] = useState(true); - - const signupRadioFields = [ - [ - { - name: "Monthly - basic", - label: "Monthly - basic", - value: "monthlyBasic", - }, - { name: "Monthly - pro", label: "Monthly - pro", value: "monthlyPro" }, - ], - [ - { - name: "Annual - unlimted", - label: "Annual - unlimted", - value: "annualUnlimited", - }, - { - name: "", - label: "", - value: "", - }, - ], - ]; - + const [radioOption, setRadioOption] = useState(); const modalText = "Description of monthly and annual subscriptions"; // this could also go in App.js if needed in the future @@ -91,6 +68,10 @@ const SignupPage = () => { } }; + const handleChangeRadioInput = (e, name) => { + console.log("name", name.label); + }; + const validateData = () => { const newData = getValidatedFormData(data, signupFields); const hasErrors = isFormDataHasErrors(newData); @@ -153,18 +134,6 @@ const SignupPage = () => { } } - const handleChangeRadioInput = (e, name) => { - console.log("name", name.label); - return; - if (!name) { - return; - } - const newData = handleFormDataChange(e, name, data, signupRadioFields); - if (newData !== null) { - setData(newData); - } - }; - const handleProceedToPayment = (e) => { e.preventDefault(); From 275538583fd1e4d4b8319e2a5ccadd964c8b7990 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 14:32:01 -0600 Subject: [PATCH 21/43] more --- src/Components/SignupPage/SignupPage.js | 24 ++++++---- src/pageElements/Radio.js | 61 +++++++++++++------------ 2 files changed, 46 insertions(+), 39 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index ba6e2f9..db107f2 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -36,7 +36,7 @@ const SignupPage = () => { ); const [showPaymentModal, setShowPaymentModal] = useState(false); const [showSelectPlan, setShowSelectPlan] = useState(true); - const [radioOption, setRadioOption] = useState(); + const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic"); const modalText = "Description of monthly and annual subscriptions"; // this could also go in App.js if needed in the future @@ -68,10 +68,12 @@ const SignupPage = () => { } }; - const handleChangeRadioInput = (e, name) => { - console.log("name", name.label); + const handleChangeRadioInput = (name) => { + //console.log("name", name.label); }; - + signupRadioFields.map((option) => { + console.log(option.value); + }); const validateData = () => { const newData = getValidatedFormData(data, signupFields); const hasErrors = isFormDataHasErrors(newData); @@ -217,8 +219,6 @@ const SignupPage = () => { subscriptionId, customerId, }; - - return !error; } const handleSignup = async (e) => { @@ -373,9 +373,15 @@ const SignupPage = () => {
- {signupRadioFields?.map((radio, i) => { - console.log("radio", radio); - })} + {signupRadioFields?.map((option, i) => ( + + ))}
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 9551c69..45abd5a 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -1,30 +1,41 @@ import { CircleFill, Circle } from "react-bootstrap-icons"; const Radio = (props) => { - const { - className, - classNames, - labelText, - title, - price, - ref, - onClick, - value, - options, - disabled, - } = props; + console.log("hello"); + const { name, onClick, value, disabled, activeRadioOption } = props; const classCheckbox = "checkbox"; const classOption = "option"; - const foo = []; + console.log("value, activeRadioOption", value, activeRadioOption); return (
- {options.map((option) => ( -
!disabled && onClick && onClick(option)} - > - {value == option?.value ? ( +
!disabled && onClick && onClick(name)} + > + {value == activeRadioOption ? ( +
+
{`checked: ${name}`}
+
+ ) : ( +
+
{`unchecked: ${name}`}
+
+ )} +
+
+ ); +}; + +/** + * A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen. + */ + +export default Radio; + +/* + +{value == option?.value ? (
{option.name}
{ )}
))} -
- ); -}; -/** - * A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen. - */ - -export default Radio; - -/* {options && options?.length && options.map((option, index) => ( From 036a41b73b2bdd30080fc743c5a1003a6f0ae632 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 14:35:54 -0600 Subject: [PATCH 22/43] more --- src/Components/SignupPage/SignupPage.js | 6 +++--- src/pageElements/Radio.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index db107f2..b2dd566 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -68,8 +68,9 @@ const SignupPage = () => { } }; - const handleChangeRadioInput = (name) => { - //console.log("name", name.label); + const handleChangeRadioInput = (value) => { + const temp = value; + setActiveRadioOption(temp); }; signupRadioFields.map((option) => { console.log(option.value); @@ -375,7 +376,6 @@ const SignupPage = () => {
{signupRadioFields?.map((option, i) => ( {
!disabled && onClick && onClick(name)} + onClick={() => !disabled && onClick && onClick(value)} > {value == activeRadioOption ? (
From 64b7bbd3febac89751dc0e293e3a38586bf530b2 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 14:38:07 -0600 Subject: [PATCH 23/43] more --- src/pageElements/Radio.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index de635a1..6fdc9ac 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -15,10 +15,12 @@ const Radio = (props) => { > {value == activeRadioOption ? (
+
{`checked: ${name}`}
) : (
+
{`unchecked: ${name}`}
)} From f857d92c0eff7d2797c7c74226b2c2e939ff55ad Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 14:41:22 -0600 Subject: [PATCH 24/43] more --- src/pageElements/Radio.js | 10 +++++----- src/styles/radio.scss | 4 ++++ 2 files changed, 9 insertions(+), 5 deletions(-) create mode 100644 src/styles/radio.scss diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 6fdc9ac..aab2258 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -1,4 +1,5 @@ import { CircleFill, Circle } from "react-bootstrap-icons"; +import "../styles/radio.scss"; const Radio = (props) => { console.log("hello"); @@ -15,7 +16,10 @@ const Radio = (props) => { > {value == activeRadioOption ? (
- +
+ +
+
{`checked: ${name}`}
) : ( @@ -29,10 +33,6 @@ const Radio = (props) => { ); }; -/** - * A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen. - */ - export default Radio; /* diff --git a/src/styles/radio.scss b/src/styles/radio.scss new file mode 100644 index 0000000..3e93146 --- /dev/null +++ b/src/styles/radio.scss @@ -0,0 +1,4 @@ +.radio-circle-container { + display: flex; + flex-direction: row; +} From d802ad2507897462bb227d796ce2e4e253224729 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 14:42:11 -0600 Subject: [PATCH 25/43] more --- src/styles/radio.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 3e93146..1abbbf8 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -1,4 +1,5 @@ .radio-circle-container { display: flex; flex-direction: row; + margin: 8px; } From ad255e01bb46a54eee2bcce0ccc8a99c0e27b30a Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 14:48:30 -0600 Subject: [PATCH 26/43] more --- src/Components/SignupPage/SignupPage.js | 2 ++ src/pageElements/Radio.js | 10 ++++++---- src/styles/radio.scss | 14 +++++++++++++- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index b2dd566..e271cc6 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -72,9 +72,11 @@ const SignupPage = () => { const temp = value; setActiveRadioOption(temp); }; + signupRadioFields.map((option) => { console.log(option.value); }); + const validateData = () => { const newData = getValidatedFormData(data, signupFields); const hasErrors = isFormDataHasErrors(newData); diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index aab2258..5135cd6 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -16,16 +16,18 @@ const Radio = (props) => { > {value == activeRadioOption ? (
-
+
-
{`checked: ${name}`}
+
{`${name}`}
) : (
- -
{`unchecked: ${name}`}
+
+ +
+
{`${name}`}
)}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 1abbbf8..5413454 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -1,5 +1,17 @@ .radio-circle-container { display: flex; flex-direction: row; - margin: 8px; + background-color: #fff; + height: 160px; + margin: 10px 8px 0px 8px; + border-radius: 5px; + border: 1px solid #d4d4d4; +} + +.radio-circle-box { + margin: 12px 8px; +} + +.radio-name-box { + margin: 12px 8px; } From 72b593c1095117385a0187c9280e446eddea4d65 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 14:56:33 -0600 Subject: [PATCH 27/43] more --- src/Components/SignupPage/SignupPage.js | 1 + src/Constants/Fields/RadioFields.js | 7 +++++-- src/pageElements/Radio.js | 5 +++-- src/styles/radio.scss | 6 +++++- src/styles/signup.scss | 1 - 5 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index e271cc6..11853b5 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -381,6 +381,7 @@ const SignupPage = () => { onClick={handleChangeRadioInput} value={option.value} name={option.name} + description={option.description} activeRadioOption={activeRadioOption} /> ))} diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 914cdde..187f4d5 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -3,15 +3,18 @@ export const signupRadioFields = [ name: "Monthly - basic", label: "Monthly - basic", value: "monthlyBasic", + description: "Generate 1 document per month", }, { name: "Monthly - pro plan", label: "Monthly - pro plan", value: "monthlyProPlan", + description: "Generate up to 3 documents per month", }, { - name: "Annual - unlimted", - label: "Annual - unlimte", + name: "Annual - unlimted annual", + label: "Annual - unlimited annual", value: "annualUnlimited", + description: "Generate unlimited documents. Billed annualy", }, ]; diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 5135cd6..5c64e29 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -3,7 +3,8 @@ import "../styles/radio.scss"; const Radio = (props) => { console.log("hello"); - const { name, onClick, value, disabled, activeRadioOption } = props; + const { name, description, onClick, value, disabled, activeRadioOption } = + props; const classCheckbox = "checkbox"; const classOption = "option"; console.log("value, activeRadioOption", value, activeRadioOption); @@ -19,8 +20,8 @@ const Radio = (props) => {
-
{`${name}`}
+
{`${description}`}
) : (
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 5413454..1a00fab 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -13,5 +13,9 @@ } .radio-name-box { - margin: 12px 8px; + font-family: var(--main-font); + font-family: Roboto; + font-weight: 500; + letter-spacing: 0.05rem; + margin: 13px 8px; } diff --git a/src/styles/signup.scss b/src/styles/signup.scss index ecb257a..941400a 100644 --- a/src/styles/signup.scss +++ b/src/styles/signup.scss @@ -99,7 +99,6 @@ padding: 6px; width: 100%; height: 300px; - background-color: #fff; } .select-plan-summary-box { From b27f2aa1323bee55ebadeaf389f37a2aa7124cc3 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 14:58:12 -0600 Subject: [PATCH 28/43] more --- src/pageElements/Radio.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 5c64e29..012fe6a 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -16,20 +16,25 @@ const Radio = (props) => { onClick={() => !disabled && onClick && onClick(value)} > {value == activeRadioOption ? ( -
-
- + <> +
+
+ +
+
{`${name}`}
-
{`${name}`}
{`${description}`}
-
+ ) : ( -
-
- + <> +
+
+ +
+
{`${name}`}
-
{`${name}`}
-
+
{`${description}`}
+ )}
From e2cadc09032f5f9078d3764ca159763a22c98c5b Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 14:59:58 -0600 Subject: [PATCH 29/43] more --- src/pageElements/Radio.js | 100 -------------------------------------- 1 file changed, 100 deletions(-) diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 012fe6a..45a4310 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -42,103 +42,3 @@ const Radio = (props) => { }; export default Radio; - -/* - -{value == option?.value ? ( -
-
{option.name}
- { - !disabled && onClick(e); - }} - /> -
- ) : ( -
-
{option.name}
- { - !disabled && onClick(e); - }} - /> -
- )} -
- ))} - - {options && - options?.length && - options.map((option, index) => ( -
!disabled && onClick && onClick(option)} - > -
- {value === option.value ? ( -
-
- { - !disabled && onClick(e); - }} - /> -
- -
- {option.name} -
-
- ) : ( -
-
- { - !disabled && onClick(e); - }} - /> -
-
- {option.name} -
-
- )} -
-
- ))} - */ From f8711abbf610b24bd94569b671c93fbb5e914ef7 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 15:10:51 -0600 Subject: [PATCH 30/43] more --- src/pageElements/Radio.js | 24 ++++++++++++++++-------- src/styles/radio.scss | 10 ++++++++++ 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 45a4310..955c236 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -18,22 +18,30 @@ const Radio = (props) => { {value == activeRadioOption ? ( <>
-
- +
+
+ +
+
{`${name}`}
-
{`${name}`}
-
{`${description}`}
+
+
{`${description}`}
+
) : ( <>
-
- +
+
+ +
+
{`${name}`}
-
{`${name}`}
-
{`${description}`}
+
+
{`${description}`}
+
)}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 1a00fab..ba7cce6 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -8,11 +8,21 @@ border: 1px solid #d4d4d4; } +.radio-circle-top { + display: flex; + flex-direction: row; +} +.radio-circle-bottom { + display: flex; + flex-direction: column; +} .radio-circle-box { + height: 40px; margin: 12px 8px; } .radio-name-box { + height: 40px; font-family: var(--main-font); font-family: Roboto; font-weight: 500; From 061357a746fb6e563b9b9cf89464cc0171e01d1f Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 15:18:15 -0600 Subject: [PATCH 31/43] more --- src/pageElements/Radio.js | 18 ++++++++++++------ src/styles/radio.scss | 1 + 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 955c236..887774c 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -24,9 +24,12 @@ const Radio = (props) => {
{`${name}`}
-
-
-
{`${description}`}
+
+
+ {" "} + {`${description}`}{" "} +
+
) : ( @@ -38,9 +41,12 @@ const Radio = (props) => {
{`${name}`}
-
-
-
{`${description}`}
+
+
+ {" "} + {`${description}`}{" "} +
+
)} diff --git a/src/styles/radio.scss b/src/styles/radio.scss index ba7cce6..09db442 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -9,6 +9,7 @@ } .radio-circle-top { + height: 50px; display: flex; flex-direction: row; } From f9e907f54ec755d727eea0437366c4e4f28eccae Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 15:57:02 -0600 Subject: [PATCH 32/43] more --- 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 09db442..64e20b8 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -1,6 +1,6 @@ .radio-circle-container { display: flex; - flex-direction: row; + flex-direction: column; background-color: #fff; height: 160px; margin: 10px 8px 0px 8px; From 471ec8eb8c8b92ca4799ea201a21bb208aee9fbe Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 16:03:36 -0600 Subject: [PATCH 33/43] more --- src/Components/SignupPage/SignupPage.js | 1 + src/Constants/Fields/RadioFields.js | 3 +++ src/pageElements/Radio.js | 12 ++++++++++-- src/styles/radio.scss | 8 ++++++-- 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 11853b5..45e5938 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -383,6 +383,7 @@ const SignupPage = () => { name={option.name} description={option.description} activeRadioOption={activeRadioOption} + price={option.price} /> ))}
diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 187f4d5..568917e 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -4,17 +4,20 @@ export const signupRadioFields = [ label: "Monthly - basic", value: "monthlyBasic", description: "Generate 1 document per month", + price: 89, }, { name: "Monthly - pro plan", label: "Monthly - pro plan", value: "monthlyProPlan", description: "Generate up to 3 documents per month", + price: 159, }, { name: "Annual - unlimted annual", label: "Annual - unlimited annual", value: "annualUnlimited", description: "Generate unlimited documents. Billed annualy", + price: 1489, }, ]; diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 887774c..1174494 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -3,8 +3,15 @@ import "../styles/radio.scss"; const Radio = (props) => { console.log("hello"); - const { name, description, onClick, value, disabled, activeRadioOption } = - props; + const { + name, + description, + onClick, + value, + price, + disabled, + activeRadioOption, + } = props; const classCheckbox = "checkbox"; const classOption = "option"; console.log("value, activeRadioOption", value, activeRadioOption); @@ -23,6 +30,7 @@ const Radio = (props) => {
{`${name}`}
+
{`${price}`}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 64e20b8..71f7127 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -9,14 +9,18 @@ } .radio-circle-top { - height: 50px; + height: 40px; display: flex; flex-direction: row; } -.radio-circle-bottom { + +.radio-circle-lower { display: flex; flex-direction: column; + margin-left: 18px; + padding-left: 26px; } + .radio-circle-box { height: 40px; margin: 12px 8px; From 670aa1f9975fa6eb76bcbcc1f7298379b6866750 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 16:04:33 -0600 Subject: [PATCH 34/43] more --- src/Constants/Fields/RadioFields.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js index 568917e..b103a9d 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -7,8 +7,8 @@ export const signupRadioFields = [ price: 89, }, { - name: "Monthly - pro plan", - label: "Monthly - pro plan", + name: "Monthly - pro", + label: "Monthly - pro", value: "monthlyProPlan", description: "Generate up to 3 documents per month", price: 159, From 388ff72d10346ef43af7997af85070dc7c0b0e2c Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 16:13:45 -0600 Subject: [PATCH 35/43] more --- src/pageElements/Radio.js | 9 ++++++++- src/styles/radio.scss | 13 +++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 1174494..6dd7118 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -30,8 +30,12 @@ const Radio = (props) => {
{`${name}`}
-
{`${price}`}
+
+
{`${price}`}
+
+ +
{" "} @@ -48,6 +52,9 @@ const Radio = (props) => {
{`${name}`}
+
+
{`${price}`}
+
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 71f7127..db1c18e 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -28,9 +28,22 @@ .radio-name-box { height: 40px; + width: 70%; 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; + width: 30%; +} + +.radio-price { + width: 20px; + float: right; +} From 229ea9452b045a47933e5bdb9b1a39750d28ba0a Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 16:15:42 -0600 Subject: [PATCH 36/43] more --- 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 db1c18e..a99f924 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss @@ -28,7 +28,7 @@ .radio-name-box { height: 40px; - width: 70%; + width: 50%; font-family: var(--main-font); font-family: Roboto; font-weight: 500; From 8914a115e8819b190eed1ce47d4632743f249513 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 16:20:12 -0600 Subject: [PATCH 37/43] more --- src/Components/SignupPage/SignupPage.js | 7 ++++++- src/pageElements/Radio.js | 5 +---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 45e5938..18509c2 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -38,7 +38,7 @@ const SignupPage = () => { const [showSelectPlan, setShowSelectPlan] = useState(true); 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" @@ -69,6 +69,11 @@ const SignupPage = () => { }; const handleChangeRadioInput = (value) => { + const tempPlan = signupRadioFields.filter((field) => { + return field.value === value; + }); + console.log("tempPlan", tempPlan); + setSelectedPlan(tempPlan); const temp = value; setActiveRadioOption(temp); }; diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js index 6dd7118..4cb9d52 100644 --- a/src/pageElements/Radio.js +++ b/src/pageElements/Radio.js @@ -57,10 +57,7 @@ const Radio = (props) => {
-
- {" "} - {`${description}`}{" "} -
+
{`${description}`}
From 04f1271a03adb7cda0403bb11a6cc5a7f0277423 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 16:50:26 -0600 Subject: [PATCH 38/43] more --- src/Components/SignupPage/SignupPage.js | 9 ++++++++- src/Constants/Fields/RadioFields.js | 3 +++ src/pageElements/Radio.js | 3 +++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 18509c2..f4531d5 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -387,6 +387,7 @@ const SignupPage = () => { value={option.value} name={option.name} description={option.description} + details={option.details} activeRadioOption={activeRadioOption} price={option.price} /> @@ -394,7 +395,13 @@ const SignupPage = () => {
-
+
+
Order summary
+
{`{subVar} subscription type`}
+
{`{subVar} subscription mini description`}
+
{`{subVar} Total billed today: `}
+
Plus aplicable sales tax -toooltip
+
+
{`${details}`}
@@ -58,6 +60,7 @@ const Radio = (props) => {
{`${description}`}
+
{`${details}`}
From b474ef34df637f84b3f2c01d1fd46d2561865f9e Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 16:53:23 -0600 Subject: [PATCH 39/43] more --- src/Components/SignupPage/SignupPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index f4531d5..e2f8d7b 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -399,7 +399,7 @@ const SignupPage = () => {
Order summary
{`{subVar} subscription type`}
{`{subVar} subscription mini description`}
-
{`{subVar} Total billed today: `}
+
{`Total billed today: {subVar} `}
Plus aplicable sales tax -toooltip
From 71b73a52d875556beed866885ac66b5e03883f33 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 20:28:51 -0600 Subject: [PATCH 40/43] more --- src/Components/SignupPage/SignupPage.js | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index e2f8d7b..7bbabd6 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -437,16 +437,3 @@ const SignupPage = () => { }; export default SignupPage; - -/* -
- -
- */ From 05961b7c59ec79bb6ea105022ba59df4836e15d7 Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Thu, 25 Jan 2024 20:29:37 -0600 Subject: [PATCH 41/43] more --- src/Components/SignupPage/SignupPage.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js index 7bbabd6..52100b0 100644 --- a/src/Components/SignupPage/SignupPage.js +++ b/src/Components/SignupPage/SignupPage.js @@ -166,10 +166,6 @@ const SignupPage = () => { paymentDataValues, customerDataValues ) { - // Do: calls to Stripe API - // if success, return some truthy value or - // handle failure in handleSignup - let error = false; let subscriptionId = null; let customerId = null; From 07ecd98be7c9e6c67873373d70e338a17f9cc791 Mon Sep 17 00:00:00 2001 From: Jacob Date: Fri, 26 Jan 2024 09:37:25 -0500 Subject: [PATCH 42/43] some small changes --- src/Components/Account/AccountPage.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/Components/Account/AccountPage.js b/src/Components/Account/AccountPage.js index 49613f5..d88f85e 100644 --- a/src/Components/Account/AccountPage.js +++ b/src/Components/Account/AccountPage.js @@ -17,6 +17,12 @@ const AccountPage = () => { const [docsAllowed, setDocsAllowed] = useState(10); const appUserId = group ? group.appUserId : null; const [showModal, setShowModal] = useState(false); + + const apiUrl = + process.env.NODE_ENV === "development" + ? process.env.REACT_APP_API_DEV + : process.env.REACT_APP_API_PROD; + function getDocumentsCount() { if (!appUserId) { return; @@ -37,10 +43,18 @@ const AccountPage = () => { return null; } - const handleCancelSub = () => { + const handleCancelSub = async () => { setShowModal(true); try { - //API call(s) + let response = await fetch(`${apiUrl}/cancel-subscription`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + appUserId: appUserId, + }), + }) } catch (err) { console.log(err); } From be447dc669572f0f508f724f4a6d2020a273fedc Mon Sep 17 00:00:00 2001 From: Kenneth Jannette Date: Fri, 26 Jan 2024 11:48:41 -0600 Subject: [PATCH 43/43] 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 6866b88..ea9ffcb 100644 --- a/src/Constants/Fields/RadioFields.js +++ b/src/Constants/Fields/RadioFields.js @@ -19,7 +19,7 @@ export const signupRadioFields = [ name: "Annual - unlimted annual", label: "Annual - unlimited annual", value: "annualUnlimited", - description: "Generate unlimited documents. Billed annualy", + description: "Generate unlimited documents.", details: "Billed annualy. A xxx percent savings", price: 1489, },