more

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

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) => (