enterprise license page update (#3443)

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

@@ -127,7 +127,7 @@ const License = () => {
   return (
     <Fragment>
       <PageHeaderWrapper
-        label="MinIO License and Support plans"
+        label="MinIO License and Support Plan"
         actions={
           <Fragment>
             {!isRegistered && (

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

@@ -32,13 +32,14 @@ interface IRegisterStatus {
 
 const LicensesInformation = styled.div(({ theme }) => ({
   display: "grid",
-  gridTemplateColumns: "repeat(4, minmax(350px, 400px));",
-  justifyContent: "flex-start",
+  gridTemplateColumns: "repeat(1, minmax(350px, 400px));",
+  alignItems: "center",
+  justifyContent: "center",
   marginTop: 30,
   marginLeft: 30,
   "& > div": {
     borderBottom: `${get(theme, "borderColor", "#EAEAEA")} 1px solid`,
-    padding: "25px 40px",
+    padding: "13px 20px",
     justifyContent: "center",
     "&.openSource": {
       borderRight: `#002562 2px solid`,
@@ -152,76 +153,94 @@ const LicensePlans = ({ licenseInfo }: IRegisterStatus) => {
   };
 
   return (
-    <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>
+    <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}
                 </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.eosLite || null)}
-              </Box>
-              <Box className={`feature-information ${lastItem}`}>
-                {renderFeatureInformation(feature.featurePlans.eosPlus || null)}
-              </Box>
-            </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"
-                    ? "Subscribe"
-                    : "Join Slack",
-                  element.planType === "commercial" ? "callAction" : "regular",
-                )}
-            </Box>
-          );
-        })}
-      </LicensesInformation>
-    </Fragment>
+            )}
+          </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(
+              `https://min.io/signup`,
+              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>
   );
 };
 

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

@@ -41,28 +41,16 @@ interface PlansFeatures {
 
 export const FEATURE_ITEMS: PlansFeatures[] = [
   {
-    featureLabel: "License",
+    featureLabel: "",
     featurePlans: {
-      openSource: {
-        content: "Requires AGPLv3 License Compliance",
-      },
-      eosLite: {
-        content: "Commercial License",
-      },
       eosPlus: {
         content: "Commercial License",
       },
     },
   },
   {
-    featureLabel: "Release",
+    featureLabel: "",
     featurePlans: {
-      openSource: {
-        content: "Upstream Community Release",
-      },
-      eosLite: {
-        content: "Enterprise Stable Release",
-      },
       eosPlus: {
         content: "Enterprise Stable Release",
       },
@@ -71,13 +59,6 @@ export const FEATURE_ITEMS: PlansFeatures[] = [
   {
     featureLabel: "Additional Features",
     featurePlans: {
-      openSource: {
-        content: "None",
-      },
-      eosLite: {
-        content:
-          "Global Console, Observability, Cache, Data Firewall, Key Management Server Catalog",
-      },
       eosPlus: {
         content:
           "Global Console, Observability, Cache, Data Firewall, Key Management Server Catalog",
@@ -87,12 +68,6 @@ export const FEATURE_ITEMS: PlansFeatures[] = [
   {
     featureLabel: "Long Term Release Support",
     featurePlans: {
-      openSource: {
-        content: "None",
-      },
-      eosLite: {
-        content: "1 year LTS",
-      },
       eosPlus: {
         content: "5 years LTS",
       },
@@ -101,26 +76,14 @@ export const FEATURE_ITEMS: PlansFeatures[] = [
   {
     featureLabel: "Support SLA",
     featurePlans: {
-      openSource: {
-        content: "No SLA",
-      },
-      eosLite: {
-        content: "Next Business Day SLA",
-      },
       eosPlus: {
-        content: "Less than 4 Hour SLA",
+        content: "Less than 4 Hours",
       },
     },
   },
   {
     featureLabel: "Panic button",
     featurePlans: {
-      openSource: {
-        content: "None",
-      },
-      eosLite: {
-        content: "1 Panic Button Per Year",
-      },
       eosPlus: {
         content: "Unlimited Panic Buttons Per Year",
       },
@@ -130,13 +93,6 @@ export const FEATURE_ITEMS: PlansFeatures[] = [
     featureLabel:
       "Call Home Diagnostics, Health Check, Performance Benchmark, Security and Critical Vulnerabilities Notifications",
     featurePlans: {
-      openSource: {
-        content: "",
-      },
-      eosLite: {
-        content: "",
-        isCheck: true,
-      },
       eosPlus: {
         content: "",
         isCheck: true,
@@ -146,12 +102,6 @@ export const FEATURE_ITEMS: PlansFeatures[] = [
   {
     featureLabel: "Indemnification",
     featurePlans: {
-      openSource: {
-        content: "",
-      },
-      eosLite: {
-        content: "",
-      },
       eosPlus: {
         content: "",
         isCheck: true,
@@ -161,12 +111,6 @@ export const FEATURE_ITEMS: PlansFeatures[] = [
   {
     featureLabel: "Annual Review of Architecture, Performance and Security",
     featurePlans: {
-      openSource: {
-        content: "",
-      },
-      eosLite: {
-        content: "",
-      },
       eosPlus: {
         content: "",
         isCheck: true,
@@ -176,40 +120,9 @@ export const FEATURE_ITEMS: PlansFeatures[] = [
 ];
 
 export const LICENSE_PLANS_INFORMATION: LicensePlanOption[] = [
-  {
-    planId: "openSource",
-    planName: "Open Source",
-    planType: "open-source",
-    planIcon: (
-      <ApplicationLogo applicationName={"console"} subVariant={"AGPL"} />
-    ),
-    planDescription: (
-      <span>
-        Designed for developers who are building open source applications in
-        compliance with the GNU AGPL v3 license which requires developers to
-        distribute their code under the same AGPL v3 license when they
-        distribute, host or modify MinIO.
-      </span>
-    ),
-  },
-  {
-    planId: "eosLite",
-    planName: "Enterprise Lite",
-    planType: "commercial",
-    planIcon: (
-      <ApplicationLogo applicationName={"minio"} subVariant={"enterpriseos"} />
-    ),
-    planDescription: (
-      <span>
-        Designed for customers who require a commercial license and can mostly
-        self-support but want the peace of mind that comes with an
-        engineer-backend SLA, additional features and operational capabilities.
-      </span>
-    ),
-  },
   {
     planId: "eosPlus",
-    planName: "Enterprise Plus",
+    planName: "Enterprise",
     planType: "commercial",
     planIcon: (
       <ApplicationLogo applicationName={"minio"} subVariant={"enterpriseos"} />
@@ -217,9 +130,9 @@ export const LICENSE_PLANS_INFORMATION: LicensePlanOption[] = [
     planDescription: (
       <span>
         Designed for customers where a commercial license and the
-        strictest,engineer-backed SLA are required. The Plus tiers offers
-        additional features and operational capabilities, more interaction
-        options and more enterprise deliverables.
+        strictest,engineer-backed SLA are required. It offers additional
+        features and operational capabilities, more interaction options and more
+        enterprise deliverables.
       </span>
     ),
   },