first commit for refactored project

ax3Client/src/pageElements/Radio.js

@@ -0,0 +1,80 @@
+import { CircleFill, Circle } from "react-bootstrap-icons";
+import "../styles/radio.scss";
+
+const Radio = (props) => {
+  const {
+    name,
+    description,
+    onClick,
+    value,
+    price,
+    disabled,
+    activeRadioOption,
+    details,
+    isAnnual,
+    isUpgrade,
+    currentPlan,
+    parentIndex,
+  } = props;
+
+  const classCheckbox = "checkbox";
+  const classOption = "option";
+  const index = isAnnual === 1 ? Number("1") : Number("0");
+
+  const upgradeClass = isUpgrade ? "upgrade" : "not-upgrade";
+
+  return (
+    <div className="radio-container">
+      <div className="radio-option-container" key={name}>
+        <>
+          <div className={`radio-circle-container ${upgradeClass}`}>
+            <div
+              className="radio-circle-top"
+              onClick={() => !disabled && onClick && onClick(value)}
+            >
+              {value == activeRadioOption && !isUpgrade ? (
+                <div className="radio-circle-box">
+                  <CircleFill color="#1a76c7" size="14px" />
+                </div>
+              ) : (
+                <div className="radio-circle-box">
+                  <Circle color="#1a76c7" size="14px" />
+                </div>
+              )}
+              <div className="radio-name-box"> {`${name}`} </div>
+              <div className="radio-price-box">
+                {value === "ofCounsel" ? (
+                  <div className="radio-price">
+                    {`$${price[index]["amount"]}/doc`}
+                  </div>
+                ) : (
+                  <div className="radio-price">
+                    {`$${price[index]["amount"]}/mo`}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className="radio-circle-lower">
+              <div className="radio-description-box">
+                {description.map((item, i) => {
+                  const el =
+                    item == "First month is free!" && !isUpgrade ? (
+                      <div className="offer-div">
+                        <p className="signup-feat-item-bold">{item}</p>
+                      </div>
+                    ) : (
+                      <p className="signup-feat-item">{item}</p>
+                    );
+                  return el;
+                })}
+              </div>
+              <div className="radio-description-box">{`${details}`} </div>
+            </div>
+          </div>
+        </>
+      </div>
+    </div>
+  );
+};
+
+export default Radio;