Merge pull request #6559 from layer5io/fix-pricing-plan

fix: pricing buttons

Author: Vivek Vishal

src/components/PlanCard/index.js

@@ -3,19 +3,20 @@ import Button from "../../reusecore/Button";
 import { Col, Row, Container } from "../../reusecore/Layout";
 import PlanCardWrapper from "./planCard.style";
 import FeatureDetails from "./collapsible-details";
-import Modal from "react-modal";
-import CommonForm from "../CommonForm";
 
-const PlanCard = ({ planData , isYearly }) => {
 
-  const [modalIsOpen, setModalIsOpen] = useState(false);
+const PlanCard = ({ planData , isYearly }) => {
 
-  const openModal = () => setModalIsOpen(true);
-  const closeModal = () => setModalIsOpen(false);
 
   if (!planData || !Array.isArray(planData) || planData.length === 0) {
     return <div>No plan data available</div>;
   }
+  const planLink = {
+    "Personal": "https://cloud.layer5.io/account/plans",
+    "Team Designer": "https://cloud.layer5.io/account/plans/upgrade?plan=49b77ce8-eeea-4ec4-adf3-48979a14b140",
+    "Team Operator": "https://cloud.layer5.io/account/plans/upgrade?plan=f7a5b2b5-b36b-421e-9211-f4dfb204e5b3",
+    "Enterprise": "https://cloud.layer5.io/account/plans/upgrade?plan=ad68ce59-8c5a-42b0-955c-9b2b2f7c98e3"
+  };
 
   return (
     <PlanCardWrapper>
@@ -30,11 +31,11 @@ const PlanCard = ({ planData , isYearly }) => {
 
                 {x.tier === "Team Designer" ? <div className="featured-label">Most Popular</div> : null}
 
-                {x.pricing_coming_soon && (
+                {/* {x.pricing_coming_soon && (
                   <div className="pricing_coming_soon">
                     {x.pricing_coming_soon}
                   </div>
-                )}
+                )} */}
 
                 <h2>{x.tier}</h2>
                 <h5 className="byline">{x.byline}</h5>
@@ -84,9 +85,9 @@ const PlanCard = ({ planData , isYearly }) => {
                       ? "price-button-disabled"
                       : "price-button-link"
                   }
-                  onClick={x.tier === "Enterprise" ? openModal : undefined}
+                  $url={planLink[x.tier] ?? "https://cloud.layer5.io/account/plans"}
                 >
-                  {x.tier === "Enterprise" ? "Contact Sales" : x.button[0]}
+                  {x.tier === "Personal" ? "Join for Free" : "Subscribe"}
                 </Button>
 
                 <h6>{x.byline2}</h6>
@@ -109,58 +110,6 @@ const PlanCard = ({ planData , isYearly }) => {
           ))}
         </Row>
       </Container>
-      <Modal
-        isOpen={modalIsOpen}
-        onRequestClose={closeModal}
-        className="Modal"
-        overlayClassName="Overlay"
-        ariaHideApp={false}
-        contentLabel="Enterprise Inquiry Form"
-        style={{
-          content: {
-            maxHeight: "90vh",
-            overflow: "hidden",
-            display: "flex",
-            flexDirection: "column",
-            "&::-webkit-scrollbar": {
-              display: "none"
-            },
-            scrollbarWidth: "none",
-            msOverflowStyle: "none"
-          },
-          overlay: {
-            overflow: "auto",
-            "&::-webkit-scrollbar": {
-              display: "none"
-            },
-            scrollbarWidth: "none",
-            msOverflowStyle: "none"
-          }
-        }}
-      >
-        <Button $secondary className="close-modal-btn" onClick={closeModal}>
-    X
-        </Button>
-        <h2 className="modal-heading">Contact sales</h2>
-        <div style={{
-          flex: 1,
-          overflow: "auto",
-          scrollbarWidth: "none",
-          msOverflowStyle: "none",
-          "&::-webkit-scrollbar": {
-            display: "none"
-          }
-        }}>
-          <CommonForm
-            title="Contact sales"
-            form="contact"
-            account_desc=""
-            submit_title="Thanks for contacting us!"
-            submit_body="We'll get back to you as soon as we can."
-            submit_button_title="Contact sales"
-          />
-        </div>
-      </Modal>
     </PlanCardWrapper>
   );
 };

src/sections/Products/index.js

@@ -11,152 +11,13 @@ import mesheryLogo from "../../assets/images/meshery/icon-only/meshery-logo-ligh
 import cloudicon from "./images/cloud.svg";
 import layer5 from "../../assets/images/layer5/5 icon/svg/light/5-light-no-trim.svg";
 import kanvas from "../../assets/images/kanvas/icon-only/kanvas-icon-color.svg";
-import comingSoon from "./icons/coming-soon.webp";
 import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
 import PlanCard from "../../components/PlanCard";
 import { Row } from "../../reusecore/Layout";
 import Reviews from "../Pricing/review-slider";
+import options from "../Pricing/generatePlans";
+
 
-const options = [
-  {
-    tier: "Personal",
-    featured: true,
-    monthlyprice: 0,
-    yearlyprice: 0,
-    byline: "Open Source features, plus:",
-    button: ["Join for Free", "https://cloud.layer5.io"],
-    summary: [
-      {
-        id: 0,
-        category: "Cloud Native Design Patterns",
-        description:
-          "Import and export your designs using your local filesystem or remote URL.",
-      },
-      {
-        id: 1,
-        category: "Multiple Kubernetes Clusters",
-        description:
-          "Ongoing synchronization of Kubernetes configuration, workloads and cloud native infrastructure changes across any number of Kubernetes clusters.",
-      },
-      {
-        id: 2,
-        category: "Cluster Discovery",
-        description:
-          "Day 2 support for ongoing synchronization of Kubernetes configuration, workloads and cloud native infrastructure changes.",
-      },
-      {
-        id: 3,
-        category: "Microservices Performance",
-        description:
-          "Continuous visibility across all of your clusters and workloads.",
-      },
-      {
-        id: 4,
-        category: "Load Generation",
-        description:
-          "Single Load Generator: Support testing multiple endpoints simultaneously.",
-      },
-      {
-        id: 5,
-        category: "MeshMark",
-        description: "Identify the cost of a specific network function.",
-      },
-    ],
-  },
-  {
-    tier: "Team",
-    featured: false,
-    monthlyprice: 9.99,
-    yearlyprice: 100,
-    byline: "Everything in Free, plus:",
-    button: [
-      "Contact Sales",
-      "https://us15.list-manage.com/contact-form?u=6b50be5aea3dfe1fd4c041d80&form_id=d0ffe17c92d8014ede6b721aa16096e8",
-    ],
-    summary: [
-      {
-        id: 0,
-        category: "Dry-run",
-        description:
-          "Test and verify configuration changes in a separate environment.",
-      },
-      {
-        id: 1,
-        category: "Design Reviews",
-        description:
-          "Discuss any design by leaving review comments or notes on a specific design. Control who has access, notify discussion participants with updates, and link from anywhere.",
-      },
-      {
-        id: 2,
-        category: "Visual Design",
-        description:
-          "Drag-n-drop cloud native infrastructure designer to configure, model, and deploy your workloads",
-      },
-      {
-        id: 3,
-        category: "Performance Profiles",
-        description:
-          "Share performance profiles and test results with individual users or teams.",
-      },
-      {
-        id: 4,
-        category: "Built-in Roles",
-        description: "Static - out of the box",
-      },
-      {
-        id: 5,
-        category: "Standard Support",
-        description:
-          "Layer5 Support can help you troubleshoot issues you run into while using Meshery. Get support via the web.",
-      },
-    ],
-  },
-  {
-    tier: "Enterprise",
-    featured: false,
-    monthlyprice: 15.99,
-    yearlyprice: 180,
-    pricing_coming_soon: <img src={comingSoon}></img>,
-    byline: "Everything in Team, plus:",
-    button: ["Coming Soon", ""],
-    summary: [
-      {
-        id: 0,
-        category: "User-defined Roles",
-        description: "Customizable roles for specific permission assignments",
-      },
-      {
-        id: 1,
-        category: "Authentication: LDAP",
-        description:
-          "Access Meshery  using your existing accounts and centrally manage repository access.",
-      },
-      {
-        id: 2,
-        category: "Authentication: SAML",
-        description:
-          "Use an identity provider to manage the identities of Meshery users and applications.",
-      },
-      {
-        id: 3,
-        category: "Self-hosted Deployment",
-        description:
-          "Self-hosted Meshery Cloud for on-prem appliances or self-managed cloud tenants.",
-      },
-      {
-        id: 4,
-        category: "Traffic Replay",
-        description: "Visual event replay in Kanvas",
-      },
-      {
-        id: 5,
-        category: "Phone Support",
-        description:
-          "Layer5 Support can help you troubleshoot issues you run into while using Meshery. Get support via phone.",
-      },
-    ],
-  },
-];
 const CardsData = [
   {
     id: 1,
@@ -305,4 +166,4 @@ const index = () => {
   );
 };
 
-export default index;
+export default index;