pricing

Signed-off-by: Lee Calcote <[email protected]>
Signed-off-by: Souvik Kar Mahapatra <[email protected]>

Author: leecalcote

.github/build/features-to-json.js

@@ -17,7 +17,7 @@ const headers = [
   "Team Designer",
   "Team Operator",
   "Enterprise",
-  "Pricing Page",
+  "Exclude",
   "Docs",
 ];
 
@@ -36,34 +36,34 @@ async function processCSV() {
 
     const filteredData = rows.map(row => {
       try {
-        const pricingPage = row["Pricing Page"]?.toLowerCase() || "";
+        const exclude = row["Exclude"]?.toLowerCase();
         const hasXTier = [
           "Free",
           "Team Designer",
           "Team Operator",
           "Enterprise"]
           .some(tier => row[tier]?.trim().toLowerCase() === "x");
-        const includeRow = hasXTier || (pricingPage && ["x", "X"].includes(pricingPage.toLowerCase()));
+        // const includeRow = hasXTier && !(exclude && ["x", "X"].includes(exclude.toLowerCase()));
 
-        if (!includeRow) return null;
-
-        return {
-          theme: row["Theme"],
-          categoryOrder: row["Category Order"],
-          category: row["Category"],
-          functionOrder: row["Function Order"],
-          function: row["Function"],
-          feature: row["Feature"],
-          subscription_tier: row["Subscription Tier"],
-          comparison_tiers: {
-            free: row["Free"],
-            teamDesigner: row["Team Designer"],
-            teamOperator: row["Team Operator"],
-            enterprise: row["Enterprise"],
-          },
-          pricing_page: row["Pricing Page"],
-          docs: row["Docs"]
-        };
+        // if (!includeRow) return null;
+        if (!exclude) {
+          return {
+            theme: row["Theme"],
+            categoryOrder: row["Category Order"],
+            category: row["Category"],
+            functionOrder: row["Function Order"],
+            function: row["Function"],
+            feature: row["Feature"],
+            subscription_tier: row["Subscription Tier"],
+            comparison_tiers: {
+              free: row["Free"],
+              teamDesigner: row["Team Designer"],
+              teamOperator: row["Team Operator"],
+              enterprise: row["Enterprise"],
+            },
+            docs: row["Docs"]
+          };
+        }
       } catch (error) {
         console.error("Error processing row:", row, error);
         return null;

src/assets/images/pricing/docs.svg

@@ -40,7 +40,7 @@ h2, h5{
     vertical-align: middle;
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 
-    h5{
+    h5 {
       display: flex;
       text-align: left;
       padding-top: 1rem;
@@ -49,7 +49,9 @@ h2, h5{
 }
 .price-table tr td:first-child {
     border-left: 0 none;
-    width: 45%;
+    width: 100%;
+    justify-content: flex-start;
+    text-align: left;
 }
 .price-table tr td:not(:first-child) {
     text-align: center;
@@ -101,7 +103,7 @@ h2, h5{
     display: inline-block;
     border-radius: 64px;
 }
-.price-table td.price-table-popular {
+.price-table th.price-table-popular {
     border-top: 3px solid #00b39f;
     color: #00b39f;
     text-transform: uppercase;
@@ -115,54 +117,59 @@ h2, h5{
     transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.category{
+.category {
   display: inline-block;
   margin: 0 1rem;
 }
 
-.icon{
+.icon {
     height: 4rem;
     width: auto;
     fill: #00b39f;
     display: inline-block;
 }
-.no-icon{
+.no-icon {
   height: 1.5rem;
   width: auto;
   fill: red;
 }
-.yes-icon{
+.yes-icon {
   height: 1.5rem;
   width: auto;
   fill: #00b39f;
 }
-.toggle-btn{
+.toggle-btn {
   margin-top: 1rem;
 }
-.details{
+.details {
   p {
     color: #7A848E;
     margin-left: 1.1rem;
   }
 }
-.category-icon{
-  margin: 0rem auto;
+.category-icon {
+  
 }
 .categories {
   display: flex;
+  width: 100%;
+  text-align: left;
   align-items: center;
-  margin: 1rem 0;
-  width: 100%
+  margin: 1rem auto;
 }
-  .docs {
+.docs {
   width:1rem;
   height:1rem;
-    & > svg {
-      background-color:{props => props.theme.whiteZeroFiveToBlackZeroFive};
+  /* > svg { */
+    fill: "red";
+    /* fill:${props => props.theme.whiteZeroFiveToBlackZeroFive};*/
+    &:hover { 
+      opacity:.5;
     }
-  }
+  
+}
 
-  .feature-link-container {
+.feature-link-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -177,7 +184,13 @@ h2, h5{
   text-decoration: none;
   font-size: 0.9rem;
 }
-
+.feature-link > svg {
+    fill: "red";
+    /* fill:${props => props.theme.whiteZeroFiveToBlackZeroFive};*/
+    &:hover { 
+      opacity:.5;
+    }
+  }
 .feature-link:hover {
   text-decoration: underline;
 }
@@ -193,10 +206,11 @@ const Comparison = () => {
           <table className="price-table">
             <tbody>
               <tr>
-                <td className="price-blank"></td>
-                <td className="price-table-popular">Most popular</td>
-                <td className="price-blank"></td>
-                <td className="price-blank"></td>
+                <th className="price-blank"></th>
+                <th className="price-blank"></th>
+                <th className="price-table-popular">Most popular</th>
+                <th className="price-blank"></th>
+                <th className="price-blank"></th>
               </tr>
               <tr className="price-table-head">
                 <td></td>
@@ -209,7 +223,7 @@ const Comparison = () => {
               {details.map((x) => (
                 <>
                   <tr key={x.id} >
-                    <td className="categories" >
+                    <td className="categories">
                       <img src={x.icon} height={45} className="category-icon" alt={x.category} />
                       <h3 className="category">{x.category}</h3></td>
                     <td></td>

src/sections/Pricing/comparison.js

@@ -1151,6 +1151,22 @@
     },
     "docs": ""
   },
+  {
+    "theme": "",
+    "categoryOrder": "10",
+    "category": "Support and Deployment",
+    "functionOrder": "1003",
+    "function": "Managed Service Provider",
+    "feature": "White Label: Customize the appearance and branding of your engineering platform powered by Layer5 Cloud. \n\nHierarchical user organizations and permissioning. Enforcement of tenancy.",
+    "subscription_tier": "Enterprise",
+    "comparison_tiers": {
+      "free": "",
+      "teamDesigner": "",
+      "teamOperator": "",
+      "enterprise": "x"
+    },
+    "docs": ""
+  },
   {
     "theme": "",
     "categoryOrder": "10",

src/sections/Pricing/feature_data.json

@@ -13,7 +13,7 @@ import Identity from "./icons/identity.svg";
 import Support from "./icons/support.svg";
 import Catalog from "./icons/catalog.svg";
 import Security from "./icons/security.svg";
-import { ReactComponent as Docs } from "../../assets/images/pricing/docs.svg";
+import Docs from "./icons/docs.js";
 
 function generateDetails(data) {
   const categories = [

src/sections/Pricing/generateDetails.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+const docsIcon = ({
+  width = "20px",
+  height = "20px",
+  fill = "currentColor",
+  style = {}
+}) => (
+  <svg
+    width={width}
+    height={height}
+    fill={fill}
+    viewBox="0 0 256 256"
+    style={style}
+    strokeWidth="0"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M44,120H212.07a4,4,0,0,0,4-4V88a8,8,0,0,0-2.34-5.66l-56-56A8,8,0,0,0,152.05,24H56A16,16,0,0,0,40,40v76A4,4,0,0,0,44,120Zm108-76,44,44h-44ZM52,144H36a8,8,0,0,0-8,8v56a8,8,0,0,0,8,8H51.33C71,216,87.55,200.52,88,180.87A36,36,0,0,0,52,144Zm-.49,56H44V160h8a20,20,0,0,1,20,20.77C71.59,191.59,62.35,200,51.52,200Zm170.67-4.28a8.26,8.26,0,0,1-.73,11.09,30,30,0,0,1-21.4,9.19c-17.65,0-32-16.15-32-36s14.36-36,32-36a30,30,0,0,1,21.4,9.19,8.26,8.26,0,0,1,.73,11.09,8,8,0,0,1-11.9.38A14.21,14.21,0,0,0,200.06,160c-8.82,0-16,9-16,20s7.18,20,16,20a14.25,14.25,0,0,0,10.23-4.66A8,8,0,0,1,222.19,195.72ZM128,144c-17.65,0-32,16.15-32,36s14.37,36,32,36,32-16.15,32-36S145.69,144,128,144Zm0,56c-8.83,0-16-9-16-20s7.18-20,16-20,16,9,16,20S136.86,200,128,200Z"></path>
+  </svg>
+);
+
+export default docsIcon;