more

src/Components/SignupPage/SignupPage.js

@@ -41,7 +41,7 @@ const SignupPage = () => {
   const [activeRadioOption, setActiveRadioOption] = useState("monthlyBasic");
   const modalText = "Description of monthly and annual subscriptions";
   const [selectedPlan, setSelectedPlan] = useState({});
-  const [annualizd, setAnualized] = useState(true);
+  const [isAnnualBilling, setIsAnnualBilling] = useState(false);
   // Could also go in App.js if needed in the future
   const stripe = new Stripe(stripeApiKey);
 
@@ -168,6 +168,10 @@ const SignupPage = () => {
     setShowSelectPlan(true);
   };
 
+  const handleToggle = () => {
+    setIsAnnualBilling(!isAnnualBilling);
+  };
+
   async function handleStripeAuthorization(
     user,
     paymentDataValues,
@@ -387,7 +391,7 @@ const SignupPage = () => {
               <div className="plan-header-left">
                 <div className="select-toggle-box">
                   <p className="select-billing-text">Billed annually</p>
-                  <Toggle />
+                  <Toggle onClick={handleToggle} />
                   <p className="select-billing-text">Billed montly</p>
                 </div>
               </div>
@@ -403,6 +407,7 @@ const SignupPage = () => {
                     details={option.details}
                     activeRadioOption={activeRadioOption}
                     price={option.pricing}
+                    isAnnualBilling={isAnnualBilling}
                   />
                 </div>
               ))}

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;