From 59b212d018c10185dbd314d9191d54e43a5225ad Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Tue, 23 Jan 2024 16:20:01 -0600
Subject: [PATCH 01/39] 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 (
     <div className="signup-super-container">
       <div className="signup-sub-container">
@@ -335,13 +349,15 @@ const SignupPage = () => {
           </div>
         </div>
 
-        {"" !== notice && (
+        {showNoticeOnPage ? (
           <>
             <br></br>
             <div className="alert alert-danger" role="alert">
               {notice}
             </div>
           </>
+        ) : (
+          <></>
         )}
       </div>
       {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 <sj@sjdev.co>
Date: Wed, 24 Jan 2024 23:48:10 -0600
Subject: [PATCH 02/39] 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 = () => {
             <Row key={`row${j}`}>
               {names.map((name, i) => (
                 <Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3">
-                  {console.log("data, name", data, name)}
                   <TextInput
                     name={name}
                     value={data[name].value}
@@ -296,7 +298,7 @@ const SignupPage = () => {
               ))}
             </Row>
           ))}
-          <Row>
+          <Row style={{ width: "80%" }}>
             <Col className="mb-3">
               <TextInput
                 id="signupPassword"
@@ -314,7 +316,7 @@ const SignupPage = () => {
               />
             </Col>
           </Row>
-          <Row>
+          <Row style={{ width: "80%" }}>
             <Col className="mb-3">
               <TextInput
                 id="confirmPassword"
@@ -338,15 +340,10 @@ const SignupPage = () => {
             className="primary-button signup-proceed"
             type="button"
             size="lg"
-            onClick={handleProceedToPayment}
+            onClick={handleOpenSelectPlan}
             disabled={isBusy}
-            labelText="Proceed to Payment"
+            labelText="Select A Plan"
           />
-          <div className="mt-3">
-            <span>
-              <Link to="/login">Go to login</Link>
-            </span>
-          </div>
         </div>
 
         {showNoticeOnPage ? (
@@ -360,6 +357,30 @@ const SignupPage = () => {
           <></>
         )}
       </div>
+      {showSelectPlan ? (
+        <div className="select-plan-container">
+          <div className="select-sub-left">
+            <div>
+              <h5 className="signup-subheader-text">
+                Select your subscription plan
+              </h5>
+            </div>
+            <div className="radio-group-box"></div>
+          </div>
+          <div className="select-sub-right">
+            <Button
+              className="primary-button signup-proceed"
+              type="button"
+              size="lg"
+              onClick={handleProceedToPayment}
+              disabled={isBusy}
+              labelText="Select A Plan"
+            />
+          </div>
+        </div>
+      ) : (
+        <></>
+      )}
       {showPaymentModal ? (
         <PaymentModal
           key="modal-one-xc"
diff --git a/src/Constants/Fields/SignupFields.js b/src/Constants/Fields/SignupFields.js
index 4eeb216..0c9d58d 100644
--- a/src/Constants/Fields/SignupFields.js
+++ b/src/Constants/Fields/SignupFields.js
@@ -31,7 +31,13 @@ export const signupFields = {
   },
   barNumber: { required: true, label: "Bar Number", maxLength: 45 },
   practiceArea: { required: true, label: "Practice Area", maxLength: 45 },
-  email: { required: true, label: "Email", maxLength: 45, type: "email" },
+  email: {
+    required: true,
+    label: "Email",
+    maxLength: 45,
+    type: "email",
+    inputWidth: "80%",
+  },
   password: {
     required: true,
     label: "Password",
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 5fbd148..1bdb2f4 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -32,12 +32,21 @@
   font-size: 2rem;
 }
 
+.signup-subheader-text {
+  letter-spacing: -0.6px;
+  font-weight: 400;
+  font-size: 1.7rem;
+  margin-left: 5px;
+  margin-top: 6px;
+}
+
 .signup-form {
   width: 880px;
 }
 
 .signup-button-box {
   width: 100%;
+  margin-bottom: 24px;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -46,3 +55,38 @@
 .signup-proceed {
   width: 160px;
 }
+
+.select-plan-container {
+  display: flex;
+  flex-direction: row;
+  margin-top: 24px;
+  width: 920px;
+  height: 600px;
+}
+
+.select-sub-left {
+  width: 60%;
+  border-radius: 10px;
+  background-color: rgb(240, 247, 250);
+  margin-right: 8px;
+  border: 1px solid #e9e9e9;
+  padding: 6px;
+}
+
+.select-sub-right {
+  width: 40%;
+  border-radius: 10px;
+  background-color: rgb(240, 247, 250);
+  margin-left: 8px;
+  border: 1px solid #e9e9e9;
+  padding: 6px;
+}
+
+.radio-group-box {
+  display: flex;
+  flex-direction: column;
+  padding: 6px;
+  width: 100%;
+  height: 300px;
+  background-color: green;
+}

From 9f05774df58359a9266a072fe617b3a7c49c7efa Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Wed, 24 Jan 2024 23:57:38 -0600
Subject: [PATCH 03/39] 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
               </h5>
             </div>
-            <div className="radio-group-box"></div>
+            <div className="radio-group-box">
+              <div className="radio-group-wrapper">
+                <Radiogroup
+                  title="Client position"
+                  options={radioOptions}
+                  value={"data.clientPosition.value"}
+                  disabled={isBusy}
+                  onClick={(e) => handleChangeInput(e, "clientPosition")}
+                />
+              </div>
+            </div>
           </div>
           <div className="select-sub-right">
             <Button
diff --git a/src/styles/signup.scss b/src/styles/signup.scss
index 1bdb2f4..81669c8 100644
--- a/src/styles/signup.scss
+++ b/src/styles/signup.scss
@@ -88,5 +88,5 @@
   padding: 6px;
   width: 100%;
   height: 300px;
-  background-color: green;
+  background-color: #fff;
 }

From 09fc4581c9d357943321d659ebc2b2f0cb427c57 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 00:07:13 -0600
Subject: [PATCH 04/39] more

---
 src/Components/SignupPage/SignupPage.js |  3 ++-
 src/pageElements/Radiogroup.js          |  9 +++++++--
 src/styles/signup.scss                  | 11 +++++++++++
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/Components/SignupPage/SignupPage.js b/src/Components/SignupPage/SignupPage.js
index bda940c..79a100f 100644
--- a/src/Components/SignupPage/SignupPage.js
+++ b/src/Components/SignupPage/SignupPage.js
@@ -373,12 +373,13 @@ const SignupPage = () => {
               </h5>
             </div>
             <div className="radio-group-box">
-              <div className="radio-group-wrapper">
+              <div className="signup-radio-wrapper">
                 <Radiogroup
                   title="Client position"
                   options={radioOptions}
                   value={"data.clientPosition.value"}
                   disabled={isBusy}
+                  dynamicClassName={"signup-option-div"}
                   onClick={(e) => handleChangeInput(e, "clientPosition")}
                 />
               </div>
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 (
     <div className="radio-option-container">
       {title && <div className="checkbox-title">{title}</div>}
-      <div className="checkbox-option-div">
+      <div className={`${dynamicClass}`}>
         {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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 00:18:43 -0600
Subject: [PATCH 05/39] 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 = () => {
             <div className="radio-group-box">
               <div className="signup-radio-wrapper">
                 <Radiogroup
-                  title="Client position"
                   options={radioOptions}
                   value={"data.clientPosition.value"}
                   disabled={isBusy}
                   dynamicClassName={"signup-option-div"}
-                  onClick={(e) => handleChangeInput(e, "clientPosition")}
+                  onClick={(e) => handleChangeRadioInput(e, "clientPosition")}
                 />
               </div>
             </div>

From 45f63e95bba794cc3c14b6adcc156c6bd245376e Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 11:07:43 -0600
Subject: [PATCH 06/39] 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 = () => {
             <div className="radio-group-box">
               <div className="signup-radio-wrapper">
                 <Radiogroup
-                  options={radioOptions}
+                  options={signupRadioFields}
                   value={"data.clientPosition.value"}
                   disabled={isBusy}
                   dynamicClassName={"signup-option-div"}
diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js
new file mode 100644
index 0000000..4f0dc6c
--- /dev/null
+++ b/src/Constants/Fields/RadioFields.js
@@ -0,0 +1,13 @@
+export 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",
+  },
+];
diff --git a/src/pageElements/Radiogroup.js b/src/pageElements/Radiogroup.js
index 558dc02..1892347 100644
--- a/src/pageElements/Radiogroup.js
+++ b/src/pageElements/Radiogroup.js
@@ -21,6 +21,7 @@ const Radiogroup = (props) => {
     dynamicClassName === "signup-option-div"
       ? dynamicClassName
       : "checkbox-option-div";
+
   return (
     <div className="radio-option-container">
       {title && <div className="checkbox-title">{title}</div>}
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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 11:21:22 -0600
Subject: [PATCH 07/39] 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 = () => {
             </div>
           </div>
           <div className="select-sub-right">
-            <Button
-              className="primary-button signup-proceed"
-              type="button"
-              size="lg"
-              onClick={handleProceedToPayment}
-              disabled={isBusy}
-              labelText="Select A Plan"
-            />
+            <div className="select-plan-summary-box "></div>
+            <div className="selectplan-payment-button-wrapper">
+              <Button
+                className="primary-button signup-proceed"
+                type="button"
+                size="lg"
+                onClick={handleProceedToPayment}
+                disabled={isBusy}
+                labelText="Proceed to Payment"
+              />
+            </div>
           </div>
         </div>
       ) : (
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 (
     <div className="radio-option-container">
       {title && <div className="checkbox-title">{title}</div>}
@@ -30,7 +35,7 @@ const Radiogroup = (props) => {
           options?.length &&
           options.map((option, index) => (
             <div
-              className="option-container"
+              className={`option-container ${optionContainerDynamic}`}
               key={option.name}
               onClick={() => !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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 11:42:37 -0600
Subject: [PATCH 08/39] 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")}
                 />
               </div>
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 (
     <div className="radio-option-container">
       {title && <div className="checkbox-title">{title}</div>}
@@ -35,13 +37,13 @@ const Radiogroup = (props) => {
           options?.length &&
           options.map((option, index) => (
             <div
-              className={`option-container ${optionContainerDynamic}`}
+              className={`option-container`}
               key={option.name}
               onClick={() => !disabled && onClick && onClick(option)}
             >
               <div className="checked-icon">
                 {value === option.value ? (
-                  <div className="zora">
+                  <div className={`zora ${optionContainerDynamic}`}>
                     <div className="circle-container">
                       <CircleFill
                         className={
@@ -58,14 +60,14 @@ const Radiogroup = (props) => {
                     </div>
 
                     <div
-                      className="option-label"
+                      className={`option-label ${optionContainerDynamic}`}
                       htmlFor={"helper-radio-" + index}
                     >
                       {option.name}
                     </div>
                   </div>
                 ) : (
-                  <div className="zora">
+                  <div className={`zora ${optionContainerDynamic}`}>
                     <div className="circle-container">
                       <Circle
                         className={
@@ -96,12 +98,4 @@ const Radiogroup = (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 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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 12:04:41 -0600
Subject: [PATCH 09/39] 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}
                 />
               </div>
             </div>
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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 12:20:57 -0600
Subject: [PATCH 10/39] 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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 12:28:12 -0600
Subject: [PATCH 11/39] 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 = () => {
               </h5>
             </div>
             <div className="radio-group-box">
-              <div className="signup-radio-wrapper">
-                <Radiogroup
-                  options={signupRadioFields}
-                  value={"data.clientPosition.value"}
-                  disabled={isBusy}
-                  dynamicClassName={"signup-option-div"}
-                  optionContainerDynamicClass={"signup-option"}
-                  onClick={handleChangeRadioInput}
-                />
-              </div>
+              {signupRadioFields?.map((group, i) => {
+                console.log("group, i", group, i);
+                <div className="signup-radio-wrapper">
+                  <Radiogroup
+                    options={group}
+                    value={group[i].value}
+                    disabled={isBusy}
+                    dynamicClassName={"signup-option-div"}
+                    optionContainerDynamicClass={"signup-option"}
+                    onClick={handleChangeRadioInput}
+                  />
+                </div>;
+              })}
             </div>
           </div>
           <div className="select-sub-right">
@@ -454,3 +457,16 @@ const SignupPage = () => {
 };
 
 export default SignupPage;
+
+/*
+              <div className="signup-radio-wrapper">
+                <Radiogroup
+                  options={signupRadioFields}
+                  value={"data.clientPosition.value"}
+                  disabled={isBusy}
+                  dynamicClassName={"signup-option-div"}
+                  optionContainerDynamicClass={"signup-option"}
+                  onClick={handleChangeRadioInput}
+                />
+              </div>
+            */

From 929d11daa533b39ebeb2c09af117c98e9ba1979c Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 12:31:01 -0600
Subject: [PATCH 12/39] 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 (
     <div className="radio-option-container">
       {title && <div className="checkbox-title">{title}</div>}

From 42c898b282971f8b829bc8937bb602fe3695cc57 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 12:37:41 -0600
Subject: [PATCH 13/39] 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 = () => {
               </h5>
             </div>
             <div className="radio-group-box">
-              {signupRadioFields?.map((group, i) => {
-                console.log("group, i", group, i);
+              {signupRadioFields?.map((group, i) => (
                 <div className="signup-radio-wrapper">
                   <Radiogroup
+                    title="Client position"
                     options={group}
                     value={group[i].value}
                     disabled={isBusy}
-                    dynamicClassName={"signup-option-div"}
-                    optionContainerDynamicClass={"signup-option"}
-                    onClick={handleChangeRadioInput}
+                    onClick={(e) => handleChangeRadioInput(e, group[i].name)}
                   />
-                </div>;
-              })}
+                </div>
+              ))}
             </div>
           </div>
           <div className="select-sub-right">
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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 12:40:06 -0600
Subject: [PATCH 14/39] 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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 13:01:16 -0600
Subject: [PATCH 15/39] 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) => (
                 <div className="signup-radio-wrapper">
                   <Radiogroup
-                    title="Client position"
+                    title=""
                     options={group}
                     value={group[i].value}
                     disabled={isBusy}
-                    onClick={(e) => handleChangeRadioInput(e, group[i].name)}
+                    onClick={(e) => handleChangeRadioInput(e, group[i])}
                   />
                 </div>
               ))}

From a076a3bf9fa5ff378cec3d8b80a06531f48fc7ca Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 13:18:53 -0600
Subject: [PATCH 16/39] 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 = () => {
               </h5>
             </div>
             <div className="radio-group-box">
-              {signupRadioFields?.map((group, i) => (
-                <div className="signup-radio-wrapper">
-                  <Radiogroup
-                    title=""
-                    options={group}
-                    value={group[i].value}
-                    disabled={isBusy}
-                    onClick={(e) => handleChangeRadioInput(e, group[i])}
-                  />
-                </div>
-              ))}
+              {signupRadioFields?.map((radio, i) => {
+                console.log("radio", radio);
+              })}
             </div>
           </div>
           <div className="select-sub-right">
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 (
-    <div className={containerClassName}>
-      <label className={labelClassName}>
-        <input {...props} type="radio" />
-        {leftLabel && <span>{leftLabel}</span>}
-        <div></div>
-        {rightLabel && <span>{rightLabel}</span>}
-      </label>
+    <div>
+      {options.map((option) => (
+        <>{option.name}</>
+      ))}
     </div>
   );
 };
 
+/**
+ * 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) => (
+            <div
+              className="option-container"
+              key={option.name}
+              onClick={() => !disabled && onClick && onClick(option)}
+            >
+              <div className="checked-icon">
+                {value === option.value ? (
+                  <div className="zora">
+                    <div className="circle-container">
+                      <CircleFill
+                        className={
+                          value === option.value
+                            ? "clickable-icon-active"
+                            : "clieckable-icon"
+                        }
+                        color="#1a76c7"
+                        size="20px"
+                        onClick={(e) => {
+                          !disabled && onClick(e);
+                        }}
+                      />
+                    </div>
+
+                    <div
+                      className="option-label"
+                      htmlFor={"helper-radio-" + index}
+                    >
+                      {option.name}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="zora">
+                    <div className="circle-container">
+                      <Circle
+                        className={
+                          value === option.value
+                            ? "clickable-icon-active"
+                            : "clieckable-icon"
+                        }
+                        color="#1a76c7"
+                        size="20px"
+                        onClick={(e) => {
+                          !disabled && onClick(e);
+                        }}
+                      />
+                    </div>
+                    <div
+                      className="option-label"
+                      htmlFor={"helper-radio-" + index}
+                    >
+                      {option.name}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        */
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 (
     <div className="radio-option-container">
       {title && <div className="checkbox-title">{title}</div>}
-      <div className={`${dynamicClass}`}>
+      <div className="checkbox-option-div">
         {options &&
           options?.length &&
           options.map((option, index) => (
             <div
-              className={`option-container`}
+              className="option-container"
               key={option.name}
               onClick={() => !disabled && onClick && onClick(option)}
             >
               <div className="checked-icon">
                 {value === option.value ? (
-                  <div className={`zora ${optionContainerDynamic}`}>
+                  <div className="zora">
                     <div className="circle-container">
                       <CircleFill
                         className={
@@ -60,14 +47,14 @@ const Radiogroup = (props) => {
                     </div>
 
                     <div
-                      className={`option-label ${optionContainerDynamic}`}
+                      className="option-label"
                       htmlFor={"helper-radio-" + index}
                     >
                       {option.name}
                     </div>
                   </div>
                 ) : (
-                  <div className={`zora ${optionContainerDynamic}`}>
+                  <div className="zora">
                     <div className="circle-container">
                       <Circle
                         className={
@@ -98,4 +85,8 @@ const Radiogroup = (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 Radiogroup;

From 5964317880be1ed784b1ef40ac5375103e6c2242 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 13:34:57 -0600
Subject: [PATCH 17/39] 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 (
     <div>
       {options.map((option) => (
-        <>{option.name}</>
+        <div
+          className="option-container"
+          key={option.name}
+          onClick={() => !disabled && onClick && onClick(option)}
+        >
+          {value == option?.value ? (
+            <div className="circle-container">
+              <div> {option.name}</div>
+              <CircleFill
+                className={
+                  value === option.value
+                    ? "clickable-icon-active"
+                    : "clieckable-icon"
+                }
+                color="#1a76c7"
+                size="20px"
+                onClick={(e) => {
+                  !disabled && onClick(e);
+                }}
+              />
+            </div>
+          ) : (
+            <div className="circle-container">
+              <div> {option.name}</div>
+              <Circle
+                className={
+                  value === option.value
+                    ? "clickable-icon-active"
+                    : "clieckable-icon"
+                }
+                color="#1a76c7"
+                size="20px"
+                onClick={(e) => {
+                  !disabled && onClick(e);
+                }}
+              />
+            </div>
+          )}
+        </div>
       ))}
     </div>
   );

From 48f9ea9caee16b2244794f9e23dc465f0502caef Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 13:37:51 -0600
Subject: [PATCH 18/39] 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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 14:32:01 -0600
Subject: [PATCH 19/39] 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 = () => {
               </h5>
             </div>
             <div className="radio-group-box">
-              {signupRadioFields?.map((radio, i) => {
-                console.log("radio", radio);
-              })}
+              {signupRadioFields?.map((option, i) => (
+                <Radio
+                  option={option.name}
+                  onClick={handleChangeRadioInput}
+                  value={option.value}
+                  name={option.name}
+                  activeRadioOption={activeRadioOption}
+                />
+              ))}
             </div>
           </div>
           <div className="select-sub-right">
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 (
     <div>
-      {options.map((option) => (
-        <div
-          className="option-container"
-          key={option.name}
-          onClick={() => !disabled && onClick && onClick(option)}
-        >
-          {value == option?.value ? (
+      <div
+        className="radio-option-container"
+        key={name}
+        onClick={() => !disabled && onClick && onClick(name)}
+      >
+        {value == activeRadioOption ? (
+          <div className="radio-circle-container">
+            <div> {`checked: ${name}`} </div>
+          </div>
+        ) : (
+          <div className="radio-circle-container">
+            <div> {`unchecked: ${name}`} </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * 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 ? (
             <div className="circle-container">
               <div> {option.name}</div>
               <CircleFill
@@ -59,17 +70,7 @@ const Radio = (props) => {
           )}
         </div>
       ))}
-    </div>
-  );
-};
 
-/**
- * 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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 14:35:54 -0600
Subject: [PATCH 20/39] 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 = () => {
             <div className="radio-group-box">
               {signupRadioFields?.map((option, i) => (
                 <Radio
-                  option={option.name}
                   onClick={handleChangeRadioInput}
                   value={option.value}
                   name={option.name}
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index 45abd5a..de635a1 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -11,7 +11,7 @@ const Radio = (props) => {
       <div
         className="radio-option-container"
         key={name}
-        onClick={() => !disabled && onClick && onClick(name)}
+        onClick={() => !disabled && onClick && onClick(value)}
       >
         {value == activeRadioOption ? (
           <div className="radio-circle-container">

From 64b7bbd3febac89751dc0e293e3a38586bf530b2 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 14:38:07 -0600
Subject: [PATCH 21/39] 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 ? (
           <div className="radio-circle-container">
+            <CircleFill />
             <div> {`checked: ${name}`} </div>
           </div>
         ) : (
           <div className="radio-circle-container">
+            <Circle />
             <div> {`unchecked: ${name}`} </div>
           </div>
         )}

From f857d92c0eff7d2797c7c74226b2c2e939ff55ad Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 14:41:22 -0600
Subject: [PATCH 22/39] 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 ? (
           <div className="radio-circle-container">
-            <CircleFill />
+            <div>
+              <CircleFill />
+            </div>
+
             <div> {`checked: ${name}`} </div>
           </div>
         ) : (
@@ -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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 14:42:11 -0600
Subject: [PATCH 23/39] 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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 14:48:30 -0600
Subject: [PATCH 24/39] 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 ? (
           <div className="radio-circle-container">
-            <div>
+            <div className="radio-circle-box">
               <CircleFill />
             </div>
 
-            <div> {`checked: ${name}`} </div>
+            <div className="radio-name-box"> {`${name}`} </div>
           </div>
         ) : (
           <div className="radio-circle-container">
-            <Circle />
-            <div> {`unchecked: ${name}`} </div>
+            <div className="radio-circle-box">
+              <Circle />
+            </div>
+            <div className="radio-name-box">{`${name}`} </div>
           </div>
         )}
       </div>
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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 14:56:33 -0600
Subject: [PATCH 25/39] 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) => {
             <div className="radio-circle-box">
               <CircleFill />
             </div>
-
             <div className="radio-name-box"> {`${name}`} </div>
+            <div className="radio-description-box"> {`${description}`} </div>
           </div>
         ) : (
           <div className="radio-circle-container">
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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 14:58:12 -0600
Subject: [PATCH 26/39] 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 ? (
-          <div className="radio-circle-container">
-            <div className="radio-circle-box">
-              <CircleFill />
+          <>
+            <div className="radio-circle-container">
+              <div className="radio-circle-box">
+                <CircleFill />
+              </div>
+              <div className="radio-name-box"> {`${name}`} </div>
             </div>
-            <div className="radio-name-box"> {`${name}`} </div>
             <div className="radio-description-box"> {`${description}`} </div>
-          </div>
+          </>
         ) : (
-          <div className="radio-circle-container">
-            <div className="radio-circle-box">
-              <Circle />
+          <>
+            <div className="radio-circle-container">
+              <div className="radio-circle-box">
+                <Circle />
+              </div>
+              <div className="radio-name-box">{`${name}`} </div>
             </div>
-            <div className="radio-name-box">{`${name}`} </div>
-          </div>
+            <div className="radio-description-box"> {`${description}`} </div>
+          </>
         )}
       </div>
     </div>

From e2cadc09032f5f9078d3764ca159763a22c98c5b Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 14:59:58 -0600
Subject: [PATCH 27/39] 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 ? (
-            <div className="circle-container">
-              <div> {option.name}</div>
-              <CircleFill
-                className={
-                  value === option.value
-                    ? "clickable-icon-active"
-                    : "clieckable-icon"
-                }
-                color="#1a76c7"
-                size="20px"
-                onClick={(e) => {
-                  !disabled && onClick(e);
-                }}
-              />
-            </div>
-          ) : (
-            <div className="circle-container">
-              <div> {option.name}</div>
-              <Circle
-                className={
-                  value === option.value
-                    ? "clickable-icon-active"
-                    : "clieckable-icon"
-                }
-                color="#1a76c7"
-                size="20px"
-                onClick={(e) => {
-                  !disabled && onClick(e);
-                }}
-              />
-            </div>
-          )}
-        </div>
-      ))}
-
-        {options &&
-          options?.length &&
-          options.map((option, index) => (
-            <div
-              className="option-container"
-              key={option.name}
-              onClick={() => !disabled && onClick && onClick(option)}
-            >
-              <div className="checked-icon">
-                {value === option.value ? (
-                  <div className="zora">
-                    <div className="circle-container">
-                      <CircleFill
-                        className={
-                          value === option.value
-                            ? "clickable-icon-active"
-                            : "clieckable-icon"
-                        }
-                        color="#1a76c7"
-                        size="20px"
-                        onClick={(e) => {
-                          !disabled && onClick(e);
-                        }}
-                      />
-                    </div>
-
-                    <div
-                      className="option-label"
-                      htmlFor={"helper-radio-" + index}
-                    >
-                      {option.name}
-                    </div>
-                  </div>
-                ) : (
-                  <div className="zora">
-                    <div className="circle-container">
-                      <Circle
-                        className={
-                          value === option.value
-                            ? "clickable-icon-active"
-                            : "clieckable-icon"
-                        }
-                        color="#1a76c7"
-                        size="20px"
-                        onClick={(e) => {
-                          !disabled && onClick(e);
-                        }}
-                      />
-                    </div>
-                    <div
-                      className="option-label"
-                      htmlFor={"helper-radio-" + index}
-                    >
-                      {option.name}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          ))}
-        */

From f8711abbf610b24bd94569b671c93fbb5e914ef7 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 15:10:51 -0600
Subject: [PATCH 28/39] 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 ? (
           <>
             <div className="radio-circle-container">
-              <div className="radio-circle-box">
-                <CircleFill />
+              <div className="radio-circle-top">
+                <div className="radio-circle-box">
+                  <CircleFill color="#1a76c7" size="20px" />
+                </div>
+                <div className="radio-name-box"> {`${name}`} </div>
               </div>
-              <div className="radio-name-box"> {`${name}`} </div>
             </div>
-            <div className="radio-description-box"> {`${description}`} </div>
+            <div className="radio-circle-lower">
+              <div className="radio-description-box"> {`${description}`} </div>
+            </div>
           </>
         ) : (
           <>
             <div className="radio-circle-container">
-              <div className="radio-circle-box">
-                <Circle />
+              <div className="radio-circle-top">
+                <div className="radio-circle-box">
+                  <Circle color="#1a76c7" size="20px" />
+                </div>
+                <div className="radio-name-box">{`${name}`} </div>
               </div>
-              <div className="radio-name-box">{`${name}`} </div>
             </div>
-            <div className="radio-description-box"> {`${description}`} </div>
+            <div className="radio-circle-lower">
+              <div className="radio-description-box"> {`${description}`} </div>
+            </div>
           </>
         )}
       </div>
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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 15:18:15 -0600
Subject: [PATCH 29/39] 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) => {
                 </div>
                 <div className="radio-name-box"> {`${name}`} </div>
               </div>
-            </div>
-            <div className="radio-circle-lower">
-              <div className="radio-description-box"> {`${description}`} </div>
+              <div className="radio-circle-lower">
+                <div className="radio-description-box">
+                  {" "}
+                  {`${description}`}{" "}
+                </div>
+              </div>
             </div>
           </>
         ) : (
@@ -38,9 +41,12 @@ const Radio = (props) => {
                 </div>
                 <div className="radio-name-box">{`${name}`} </div>
               </div>
-            </div>
-            <div className="radio-circle-lower">
-              <div className="radio-description-box"> {`${description}`} </div>
+              <div className="radio-circle-lower">
+                <div className="radio-description-box">
+                  {" "}
+                  {`${description}`}{" "}
+                </div>
+              </div>
             </div>
           </>
         )}
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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 15:57:02 -0600
Subject: [PATCH 30/39] 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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 16:03:36 -0600
Subject: [PATCH 31/39] 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}
                 />
               ))}
             </div>
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) => {
                   <CircleFill color="#1a76c7" size="20px" />
                 </div>
                 <div className="radio-name-box"> {`${name}`} </div>
+                <div className="radio-price-box"> {`${price}`} </div>
               </div>
               <div className="radio-circle-lower">
                 <div className="radio-description-box">
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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 16:04:33 -0600
Subject: [PATCH 32/39] 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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 16:13:45 -0600
Subject: [PATCH 33/39] 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) => {
                   <CircleFill color="#1a76c7" size="20px" />
                 </div>
                 <div className="radio-name-box"> {`${name}`} </div>
-                <div className="radio-price-box"> {`${price}`} </div>
+                <div className="radio-price-box">
+                  <div className="radio-price"> {`${price}`} </div>
+                </div>
               </div>
+
+              <div></div>
               <div className="radio-circle-lower">
                 <div className="radio-description-box">
                   {" "}
@@ -48,6 +52,9 @@ const Radio = (props) => {
                   <Circle color="#1a76c7" size="20px" />
                 </div>
                 <div className="radio-name-box">{`${name}`} </div>
+                <div className="radio-price-box">
+                  <div className="radio-price"> {`${price}`} </div>
+                </div>
               </div>
               <div className="radio-circle-lower">
                 <div className="radio-description-box">
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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 16:15:42 -0600
Subject: [PATCH 34/39] 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 <sj@sjdev.co>
Date: Thu, 25 Jan 2024 16:20:12 -0600
Subject: [PATCH 35/39] 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) => {
                 </div>
               </div>
               <div className="radio-circle-lower">
-                <div className="radio-description-box">
-                  {" "}
-                  {`${description}`}{" "}
-                </div>
+                <div className="radio-description-box">{`${description}`} </div>
               </div>
             </div>
           </>

From 04f1271a03adb7cda0403bb11a6cc5a7f0277423 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 16:50:26 -0600
Subject: [PATCH 36/39] 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 = () => {
             </div>
           </div>
           <div className="select-sub-right">
-            <div className="select-plan-summary-box "></div>
+            <div className="select-plan-summary-box ">
+              <div>Order summary</div>
+              <div>{`{subVar} subscription type`}</div>
+              <div>{`{subVar} subscription mini description`}</div>
+              <div>{`{subVar} Total billed today: `}</div>
+              <div>Plus aplicable sales tax -toooltip</div>
+            </div>
             <div className="selectplan-payment-button-wrapper">
               <Button
                 className="primary-button signup-proceed"
diff --git a/src/Constants/Fields/RadioFields.js b/src/Constants/Fields/RadioFields.js
index b103a9d..6866b88 100644
--- a/src/Constants/Fields/RadioFields.js
+++ b/src/Constants/Fields/RadioFields.js
@@ -4,6 +4,7 @@ export const signupRadioFields = [
     label: "Monthly - basic",
     value: "monthlyBasic",
     description: "Generate 1 document per month",
+    details: "Billed every month",
     price: 89,
   },
   {
@@ -11,6 +12,7 @@ export const signupRadioFields = [
     label: "Monthly - pro",
     value: "monthlyProPlan",
     description: "Generate up to 3 documents per month",
+    details: "Billed every three months. A xxx percent savings",
     price: 159,
   },
   {
@@ -18,6 +20,7 @@ export const signupRadioFields = [
     label: "Annual - unlimited annual",
     value: "annualUnlimited",
     description: "Generate unlimited documents.  Billed annualy",
+    details: "Billed annualy. A xxx percent savings",
     price: 1489,
   },
 ];
diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index 4cb9d52..20b3e5e 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -11,6 +11,7 @@ const Radio = (props) => {
     price,
     disabled,
     activeRadioOption,
+    details,
   } = props;
   const classCheckbox = "checkbox";
   const classOption = "option";
@@ -41,6 +42,7 @@ const Radio = (props) => {
                   {" "}
                   {`${description}`}{" "}
                 </div>
+                <div className="radio-description-box">{`${details}`} </div>
               </div>
             </div>
           </>
@@ -58,6 +60,7 @@ const Radio = (props) => {
               </div>
               <div className="radio-circle-lower">
                 <div className="radio-description-box">{`${description}`} </div>
+                <div className="radio-description-box">{`${details}`} </div>
               </div>
             </div>
           </>

From b474ef34df637f84b3f2c01d1fd46d2561865f9e Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 16:53:23 -0600
Subject: [PATCH 37/39] 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 = () => {
               <div>Order summary</div>
               <div>{`{subVar} subscription type`}</div>
               <div>{`{subVar} subscription mini description`}</div>
-              <div>{`{subVar} Total billed today: `}</div>
+              <div>{`Total billed today: {subVar} `}</div>
               <div>Plus aplicable sales tax -toooltip</div>
             </div>
             <div className="selectplan-payment-button-wrapper">

From 71b73a52d875556beed866885ac66b5e03883f33 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 20:28:51 -0600
Subject: [PATCH 38/39] 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;
-
-/*
-              <div className="signup-radio-wrapper">
-                <Radiogroup
-                  options={signupRadioFields}
-                  value={"data.clientPosition.value"}
-                  disabled={isBusy}
-                  dynamicClassName={"signup-option-div"}
-                  optionContainerDynamicClass={"signup-option"}
-                  onClick={handleChangeRadioInput}
-                />
-              </div>
-            */

From 05961b7c59ec79bb6ea105022ba59df4836e15d7 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 20:29:37 -0600
Subject: [PATCH 39/39] 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;