Merge branch 'jdurante-1-stripe-paywall' of github.com:kjannette/ax3Client into jdurante-1-stripe-paywall

src/pageElements/Radio.js

@@ -1,23 +1,73 @@
+import { CircleFill, Circle } from "react-bootstrap-icons";
+import "../styles/radio.scss";
 
-const Radio = ({
-  rightLabel,
-  leftLabel,
-  containerClassName,
-  labelClassName,
-  ...props
-}) => {
+const Radio = (props) => {
+  console.log("hello");
+  const {
+    name,
+    description,
+    onClick,
+    value,
+    price,
+    disabled,
+    activeRadioOption,
+    details,
+  } = props;
+  const classCheckbox = "checkbox";
+  const classOption = "option";
+  console.log("value, activeRadioOption", value, activeRadioOption);
   return (
-    <div className={containerClassName}>
-      <label className={labelClassName}>
-        <input {...props} type="radio" />
-        {leftLabel && <span>{leftLabel}</span>}
-        <div></div>
-        {rightLabel && <span>{rightLabel}</span>}
-      </label>
+    <div>
+      <div
+        className="radio-option-container"
+        key={name}
+        onClick={() => !disabled && onClick && onClick(value)}
+      >
+        {value == activeRadioOption ? (
+          <>
+            <div className="radio-circle-container">
+              <div className="radio-circle-top">
+                <div className="radio-circle-box">
+                  <CircleFill 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></div>
+              <div className="radio-circle-lower">
+                <div className="radio-description-box">
+                  {" "}
+                  {`${description}`}{" "}
+                </div>
+                <div className="radio-description-box">{`${details}`} </div>
+              </div>
+            </div>
+          </>
+        ) : (
+          <>
+            <div className="radio-circle-container">
+              <div className="radio-circle-top">
+                <div className="radio-circle-box">
+                  <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">{`${description}`} </div>
+                <div className="radio-description-box">{`${details}`} </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
     </div>
   );
 };
 
 export default Radio;
-
-//

src/pageElements/Radiogroup.js

@@ -11,7 +11,7 @@ const Radiogroup = (props) => {
     onClick,
     value,
     options,
-    disabled
+    disabled,
   } = props;
   const classCheckbox = "checkbox";
   const classOption = "option";
@@ -90,7 +90,3 @@ const Radiogroup = (props) => {
  */
 
 export default Radiogroup;
-
-/*
-
-                  */