License Comparisson updates (minio#3532)

* License Comparisson updates

Signed-off-by: Daniel Valdivia <hola@danielvaldivia.com>

* Prettier

---------

Signed-off-by: Daniel Valdivia <hola@danielvaldivia.com>

Author: dvaldivia

web-app/src/screens/Console/License/LicensePlans.tsx

@@ -88,10 +88,10 @@ const LicensesInformation = styled.div(({ theme }) => ({
   },
   "& .planName": {
     fontWeight: 600,
-    fontSize: 35,
-    marginBottom: 20,
+    fontSize: 32,
+    marginBottom: 24,
     textAlign: "center",
-    marginTop: 10,
+    marginTop: 8,
   },
   "& .planIcon": {
     height: 45,
@@ -153,96 +153,71 @@ const LicensePlans = ({ licenseInfo }: IRegisterStatus) => {
   };
 
   return (
-    <LicensesInformation>
-      {[null, ...LICENSE_PLANS_INFORMATION].map((element, index) => {
-        return (
-          <Box
-            key={`${element?.planType}-${index}`}
-            className={`${index === 1 ? "openSource first" : ""}`}
-          >
-            {element !== null && (
-              <Box>
-                <Box className={"planName"}>{element.planName}</Box>
-                <Box
-                  className={`planIcon ${
-                    element.planType === "commercial" ? "commercial" : ""
-                  }`}
-                >
-                  {element?.planIcon}
-                </Box>
-                <Box className={"planDescription"}>
-                  {element?.planDescription}
+    <Fragment>
+      <LicensesInformation>
+        {[null, ...LICENSE_PLANS_INFORMATION].map((element, index) => {
+          return (
+            <Box className={`${index === 1 ? "openSource first" : ""}`}>
+              {element !== null && (
+                <Box>
+                  <Box className={"planName"}>{element.planName}</Box>
+                  <Box
+                    className={`planIcon ${
+                      element.planType === "commercial" ? "commercial" : ""
+                    }`}
+                  >
+                    {element?.planIcon}
+                  </Box>
+                  <Box className={"planDescription"}>
+                    {element?.planDescription}
+                  </Box>
                 </Box>
+              )}
+            </Box>
+          );
+        })}
+        {FEATURE_ITEMS.map((feature, index) => {
+          const lastItem =
+            index === FEATURE_ITEMS.length - 1 ? "noBorderBottom" : "";
+
+          return (
+            <Fragment>
+              <Box className={`feature-label ${lastItem}`}>
+                {feature.featureLabel}
+              </Box>
+              <Box className={`feature-information  openSource ${lastItem}`}>
+                {renderFeatureInformation(
+                  feature.featurePlans.openSource || null,
+                )}
+              </Box>
+              <Box className={`feature-information ${lastItem}`}>
+                {renderFeatureInformation(feature.featurePlans.eosPlus || null)}
               </Box>
-            )}
-          </Box>
-        );
-      })}
-      {FEATURE_ITEMS.map((feature, index) => {
-        return (
-          <Box
-            key={`${feature.featureLabel}-${index}`}
-            className={`feature-information`}
-            sx={{
-              display: "flex",
-              borderLeft: `#002562 2px solid`,
-              borderRight: `#002562 2px solid`,
-              flexDirection: "column",
-              gap: "10px",
-              alignItems: "center",
-            }}
-          >
-            <Box className={`feature-label `}>{feature.featureLabel}</Box>
-            {renderFeatureInformation(feature.featurePlans.eosPlus || null)}
-          </Box>
-        );
-      })}
-      {[...LICENSE_PLANS_INFORMATION].map((element) => {
-        return element && currentPlan === "community" ? (
-          <div
-            key="plan-subscribe-btn"
-            style={{
-              borderLeft: `#002562 2px solid`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              borderRight: `#002562 2px solid`,
-              borderBottom: `#002562 2px solid`,
-              borderBottomLeftRadius: "10px",
-              borderBottomRightRadius: "10px",
-            }}
-          >
-            {getButton(
-              element.planType === "commercial"
-                ? `https://min.io/signup`
-                : `https://slack.min.io`,
-              element.planType === "commercial" ? "Subscribe" : "Join Slack",
-              element.planType === "commercial" ? "callAction" : "regular",
-            )}
-          </div>
-        ) : (
-          <div
-            key="plan-subscribe-btn-1"
-            style={{
-              borderLeft: `#002562 2px solid`,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              borderRight: `#002562 2px solid`,
-              borderBottom: `#002562 2px solid`,
-              borderBottomLeftRadius: "10px",
-              borderBottomRightRadius: "10px",
-            }}
-          >
-            {getButton(
-              `https://subnet.min.io/`,
-              "Log in to SUBNET",
-              "callAction",
-            )}
-          </div>
-        );
-      })}
-    </LicensesInformation>
+            </Fragment>
+          );
+        })}
+        {[null, ...LICENSE_PLANS_INFORMATION].map((element, index) => {
+          return (
+            <Box
+              className={`${
+                index === 1 ? "openSource last" : ""
+              } noBorderBottom`}
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+              }}
+            >
+              {element &&
+                getButton(
+                  `https://min.io/signup`,
+                  element.planType === "commercial" ? "Upgrade" : "Join Slack",
+                  element.planType === "commercial" ? "callAction" : "regular",
+                )}
+            </Box>
+          );
+        })}
+      </LicensesInformation>
+    </Fragment>
   );
 };
 

web-app/src/screens/Console/License/utils.tsx

@@ -41,100 +41,95 @@ interface PlansFeatures {
 
 export const FEATURE_ITEMS: PlansFeatures[] = [
   {
-    featureLabel: "",
+    featureLabel: "License",
     featurePlans: {
       eosPlus: {
         content: "Commercial License",
       },
     },
   },
   {
-    featureLabel: "",
+    featureLabel: "Intended Use",
     featurePlans: {
-      eosPlus: {
-        content: "Enterprise Stable Release",
+      openSource: {
+        content: <div>Test and Dev Use</div>,
       },
-    },
-  },
-  {
-    featureLabel: "Additional Features",
-    featurePlans: {
       eosPlus: {
-        content:
-          "Global Console, Observability, Cache, Data Firewall, Key Management Server Catalog",
+        content: (
+          <div>
+            Production Use <br /> (Site-Replication, Enterprise Grade Security,
+            Encryption and Key Management)
+          </div>
+        ),
       },
     },
   },
   {
-    featureLabel: "Long Term Release Support",
+    featureLabel: "Features",
     featurePlans: {
-      eosPlus: {
-        content: "5 years LTS",
+      openSource: {
+        content: "Community Support",
       },
-    },
-  },
-  {
-    featureLabel: "Support SLA",
-    featurePlans: {
       eosPlus: {
-        content: "Less than 4 Hours",
+        content:
+          "SLA backed - 24/7/365, <4 hr response time, Instant SLA for P0 issues ",
       },
     },
   },
   {
-    featureLabel: "Panic button",
+    featureLabel: "Support",
     featurePlans: {
-      eosPlus: {
-        content: "Unlimited Panic Buttons Per Year",
+      openSource: {
+        content: "Basic Features",
       },
-    },
-  },
-  {
-    featureLabel:
-      "Call Home Diagnostics, Health Check, Performance Benchmark, Security and Critical Vulnerabilities Notifications",
-    featurePlans: {
       eosPlus: {
-        content: "",
-        isCheck: true,
+        content:
+          "FIPS 140-a Compliant, Pentest\n" +
+          "SOC2, ISO 27001, \n" +
+          "SEC 17a-4(f), FINRA 4511(c) and CFTC 1.31(c)-(d)\n" +
+          "\n",
       },
     },
   },
   {
-    featureLabel: "Indemnification",
+    featureLabel: "System Management",
     featurePlans: {
+      openSource: {
+        content: "CLI and API",
+      },
       eosPlus: {
-        content: "",
-        isCheck: true,
+        content: "CLI, API and Graphical User Interface (GUI)",
       },
     },
   },
   {
-    featureLabel: "Annual Review of Architecture, Performance and Security",
+    featureLabel: "Panic button",
     featurePlans: {
       eosPlus: {
-        content: "",
-        isCheck: true,
+        content: "Unlimited Panic Buttons Per Year",
       },
     },
   },
 ];
 
 export const LICENSE_PLANS_INFORMATION: LicensePlanOption[] = [
+  {
+    planId: "openSource",
+    planName: "Community Edition",
+    planType: "open-source",
+    planIcon: (
+      <ApplicationLogo applicationName={"console"} subVariant={"AGPL"} />
+    ),
+    planDescription: "",
+  },
   {
     planId: "eosPlus",
-    planName: "Enterprise",
+    planName: "Enterprise Edition",
     planType: "commercial",
     planIcon: (
       <ApplicationLogo applicationName={"minio"} subVariant={"enterpriseos"} />
     ),
-    planDescription: (
-      <span>
-        Designed for customers where a commercial license and the
-        strictest,engineer-backed SLA are required. It offers additional
-        features and operational capabilities, more interaction options and more
-        enterprise deliverables.
-      </span>
-    ),
+    planDescription: "",
   },
 ];