Tags for pricing page

Signed-off-by: Ankita Sahu <[email protected]>
layer5io · Nov 15, 2024 · 06bf498 · 06bf498
1 parent 468751f
commit 06bf498
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 51 deletions.
diff --git a/src/components/PlanCard/collapsible-details.js b/src/components/PlanCard/collapsible-details.js
@@ -4,77 +4,96 @@ import { MdExpandMore } from "@react-icons/all-files/md/MdExpandMore";
 import { RiArrowRightSLine } from "@react-icons/all-files/ri/RiArrowRightSLine";
 
 const FeatureDetailsWrapper = styled.div`
-display: inline;
-cursor: pointer;
-.open{
+  display: inline;
+  cursor: pointer;
+
+  .open {
     margin: 0rem;
     list-style: none;
-    height:auto !important;
-    opacity:1 !important;
+    height: auto !important;
+    opacity: 1 !important;
     margin-bottom: 2rem;
-    transition:all .4s !important;
-   }
-   .toggle-icon{
-    width: 1.2rem; 
-    height: 1.2rem; 
-    fill: ${props => props.theme.primaryColor};
+    transition: all 0.4s !important;
+  }
+
+  .toggle-icon {
+    width: 1.2rem;
+    height: 1.2rem;
+    fill: ${(props) => props.theme.primaryColor};
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
-p{
+
+  p {
     font-size: 0.9rem;
-    color: ${props => props.theme.greyC1C1C1ToGreyB3B3B3}; 
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); 
-}
-.toggle-btn{
-    display:inline-block;
+    color: ${(props) => props.theme.greyC1C1C1ToGreyB3B3B3};
+    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .toggle-btn {
+    display: inline-block;
     float: left;
-    vertical-align: middle;;
-   }
-   .closed{
-    opacity:1;
-    height:0;
-    transition:none;
-    visibility:hidden;
-   }
-   .open{
-    visibility:visible;
-   }
- h5{
-   display: inline-block;
-   vertical-align: middle;
- }
+    vertical-align: middle;
+  }
+
+  .closed {
+    opacity: 1;
+    height: 0;
+    transition: none;
+    visibility: hidden;
+  }
+
+  .open {
+    visibility: visible;
+  }
+
+  h5 {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .beta-tag {
+    display: inline-block;
+    background-color: #ffd700;
+    color: #000000;
+    font-size: 0.7rem;
+    padding: 2px 6px;
+    border-radius: 4px;
+    margin-left: 8px;
+    font-weight: bold;
+    vertical-align: middle;
+  }
 `;
 
-const FeatureDetails = (props) => {
+const FeatureDetails = ({ category, description, tier }) => {
   const [expand, setExpand] = React.useState(false);
 
+  const BetaTag = () => <span className="beta-tag">Coming Soon</span>;
+
   return (
     <FeatureDetailsWrapper>
-      <div onClick={function () {
-        setExpand(!expand);
-      }}>
-        {props.description ?
+      <div onClick={() => setExpand(!expand)}>
+        {description && (
           <div className="toggle-btn">
             {expand ? (
               <MdExpandMore
                 className="toggle-icon"
-                onClick={function () {
-                  setExpand(!expand);
-                }}
+                onClick={() => setExpand(!expand)}
               />
             ) : (
               <RiArrowRightSLine
                 className="toggle-icon"
-                onClick={function () {
-                  setExpand(!expand);
-                }}
+                onClick={() => setExpand(!expand)}
               />
             )}
-          </div> : ""}
-        <h5>{props.category}</h5>
+          </div>
+        )}
+        <h5>
+          {category}
+          {tier === "Team-Beta" && <BetaTag />}
+        </h5>
         <div className="details">
           <p className={`closed ${expand ? "open" : ""}`}>
-            {props.description}
+            {description}
           </p>
         </div>
       </div>

diff --git a/src/components/PlanCard/index.js b/src/components/PlanCard/index.js
@@ -28,6 +28,7 @@ const PlanCard = ({ planData }) => {
                       <FeatureDetails
                         category={t.category}
                         description={t.description}
+                        tier={t.tier}
                       />
                     </div>
                   ))}

diff --git a/src/sections/Pricing/generateOptions.js b/src/sections/Pricing/generateOptions.js
@@ -36,15 +36,16 @@ function generateOptions(data) {
 
   const options = Object.entries(tiers).map(([tierName, tierInfo]) => {
     const summary = data
-      .filter(
-        (item) =>
-          item.entire_row["Subscription Tier"] === tierName &&
-          item.pricing_page === "true"
+      .filter((item) =>
+        (tierName === "Team" &&
+          (item.entire_row["Subscription Tier"] === "Team" || item.entire_row["Subscription Tier"] === "Team-Beta")) ||
+        (item.entire_row["Subscription Tier"] === tierName && item.pricing_page === "true")
       )
       .map((item, index) => ({
         id: index,
         category: item.entire_row.Function,
-        description: item.entire_row.Feature
+        description: item.entire_row.Feature,
+        tier: item.entire_row["Subscription Tier"]
       }));
 
     return {