more

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"}

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",
+  },
+];

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

src/styles/signup.scss

@@ -83,7 +83,7 @@
 }
 
 .signup-radio-wrapper {
-  background-color: red;
+  background-color: #fff;
   display: flex;
   flex-direction: column;
 }