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] 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;
 }