Merge pull request #6111 from SAHU-01/master

[UI]: Adding a yearly or monthly toggle

Author: leecalcote

src/components/PlanCard/index.js

@@ -4,7 +4,7 @@ import { Col, Row, Container } from "../../reusecore/Layout";
 import PlanCardWrapper from "./planCard.style";
 import FeatureDetails from "./collapsible-details";
 
-const PlanCard = ({ planData }) => {
+const PlanCard = ({ planData , isYearly }) => {
   if (!planData || !Array.isArray(planData) || planData.length === 0) {
     return <div>No plan data available</div>;
   }
@@ -29,23 +29,42 @@ const PlanCard = ({ planData }) => {
                 <h5 className="byline">{x.byline}</h5>
 
                 <div className="price-container">
-                  {x.monthlyprice !== undefined ? (
-                    <div className="price">
-                      <span className="price-amount"><sup>$</sup>
-                        {x.monthlyprice === 0
-                          ? "0"
-                          : x.monthlyprice.toFixed(0)}
-                      </span>
-                      <span className="currency">USD</span>
-                      <span className="price-per">per user/month</span>
-                    </div>
+                  {isYearly ? (
+                    x.yearlyprice !== undefined ? (
+                      <div className="price">
+                        <span className="price-amount"><sup>$</sup>
+                          {x.yearlyprice === 0
+                            ? "0"
+                            : x.yearlyprice.toFixed(0)}
+                        </span>
+                        <span className="currency">USD</span>
+                        <span className="price-per">per user/year</span>
+                      </div>
+                    ) : (
+                      <div className="pricing_coming_soon">
+                        {x.pricing_coming_soon}
+                      </div>
+                    )
                   ) : (
-                    <div className="pricing_coming_soon">
-                      {x.pricing_coming_soon}
-                    </div>
+                    x.monthlyprice !== undefined ? (
+                      <div className="price">
+                        <span className="price-amount"><sup>$</sup>
+                          {x.monthlyprice === 0
+                            ? "0"
+                            : x.monthlyprice.toFixed(0)}
+                        </span>
+                        <span className="currency">USD</span>
+                        <span className="price-per">per user/month</span>
+                      </div>
+                    ) : (
+                      <div className="pricing_coming_soon">
+                        {x.pricing_coming_soon}
+                      </div>
+                    )
                   )}
                 </div>
 
+
                 <Button
                   disabled={x.tier === "Team Operator"}
                   $primary

src/sections/Pricing/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import PricingWrapper from "./pricing.style";
 import Comparison from "./comparison";
 import FAQ from "../General/Faq";
@@ -8,21 +8,43 @@ import PlanCard from "../../components/PlanCard";
 
 const Pricing = () => {
   // const [monthly, setMonthly] = useState(false);
+  const [isYearly, setIsYearly] = useState(false);
+
+  const handleToggle = () => {
+    setIsYearly((prev) => !prev);
+  };
 
   return (
     <PricingWrapper>
 
       <div className="headers">
         <h1 className="header-heading">Plans For Every Team Size</h1>
 
+        <div className="toggle-container">
+          <div className="toggle">
+            <span
+              className={!isYearly ? "active" : ""}
+              onClick={() => handleToggle(false)} // Call handleToggle
+            >
+              Monthly
+            </span>
+            <span
+              className={isYearly ? "active" : ""}
+              onClick={() => handleToggle(true)} // Call handleToggle
+            >
+              Yearly
+            </span>
+          </div>
+        </div>
+
         {/* <svg className="header-svg" aria-hidden="true" role="presentation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
           <polygon fill="white" points="0,100 100,0 100,100"/>
       <polygon fill="rgba(0,179,159,0.2)" points="50,50 100,0 100,100"/>
         </svg> */}
       </div>
 
       <div className="wrapper">
-        <PlanCard planData={options}/>
+        <PlanCard planData={options} isYearly={isYearly}/>
       </div>
       <Comparison />
       <Reviews />

src/sections/Pricing/pricing.style.js

@@ -36,6 +36,37 @@ const PricingWrapper = styled.section`
   }
 }
 
+.toggle-container {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin: 20px 0;
+  font-size: 16px;
+  gap: 10px;
+  width: 85%;
+}
+
+.toggle{
+border: 2px solid white;
+padding:10px;
+ border-radius: 15px;
+}
+
+.toggle-container span {
+  cursor: pointer;
+  padding: 8px 16px;
+  color:white;
+  border-radius: 12px;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.toggle-container .active {
+  background-color: #00d3a9;
+  color: white;
+  border-color: #007bff;
+}
+
+
 .subscription-duration {
     margin-top: 2rem;
     margin-bottom: 4rem;