more

src/pageElements/Radio.js

@@ -12,10 +12,11 @@ const Radio = (props) => {
     disabled,
     activeRadioOption,
     details,
+    isAnnualBilling,
   } = props;
   const classCheckbox = "checkbox";
   const classOption = "option";
-  console.log("price", price);
+  const index = isAnnualBilling ? Number("1") : Number("0");
   return (
     <div className="radio-container">
       <div className="radio-option-container" key={name}>
@@ -36,7 +37,10 @@ const Radio = (props) => {
               )}
               <div className="radio-name-box"> {`${name}`} </div>
               <div className="radio-price-box">
-                <div className="radio-price"> {`${price[1]["amount"]}`} </div>
+                <div className="radio-price">
+                  {" "}
+                  {`${price[index]["amount"]}`}{" "}
+                </div>
               </div>
             </div>
             <div className="radio-circle-lower">

src/pageElements/Toggle.js

@@ -1,15 +1,24 @@
 import ToggleButton from "react-bootstrap/ToggleButton";
 import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
 
-function Toggle() {
+const Toggle = (props) => {
+  const { onClick } = props;
   return (
     <>
       <ToggleButtonGroup type="radio" name="options" defaultValue={1}>
-        <ToggleButton id="tbg-radio-1" value={1}></ToggleButton>
-        <ToggleButton id="tbg-radio-2" value={2}></ToggleButton>
+        <ToggleButton
+          onClick={onClick}
+          id="tbg-radio-1"
+          value={1}
+        ></ToggleButton>
+        <ToggleButton
+          onClick={onClick}
+          id="tbg-radio-2"
+          value={2}
+        ></ToggleButton>
       </ToggleButtonGroup>
     </>
   );
-}
+};
 
 export default Toggle;