more

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

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>
+          ))}
+        */

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;