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>
               ))}