Merge pull request #5740 from Countly/SER-2116

[SER-2116] Show a flex banner on sidebar for CE

Author: Cookiezaurs

frontend/express/app.js

@@ -974,6 +974,7 @@ Promise.all([plugins.dbConnection(countlyConfig), plugins.dbConnection("countly_
                     timezones: timezones,
                     countlyTypeName: COUNTLY_NAMED_TYPE,
                     countlyTypeTrack: COUNTLY_TRACK_TYPE,
+                    countlyTypeCE: COUNTLY_TYPE_CE,
                     countly_tracking,
                     countly_domain,
                     frontend_app: versionInfo.frontend_app || 'e70ec21cbe19e799472dfaee0adb9223516d238f',

frontend/express/public/javascripts/countly/vue/components/sidebar.js

@@ -742,6 +742,9 @@
                 },
                 helpCenterTarget: function() {
                     return this.enableGuides ? '_self' : "_blank";
+                },
+                isCommunityEdition: function() {
+                    return countlyGlobal.countlyTypeCE;
                 }
             },
             methods: {
@@ -894,6 +897,12 @@
 
                         return menu;
                     });
+                },
+                handleButtonClick: function() {
+                    CountlyHelpers.goTo({
+                        url: "https://flex.countly.com",
+                        isExternalLink: true
+                    });
                 }
             },
             mounted: function() {

frontend/express/public/javascripts/countly/vue/templates/sidebar/sidebar.html

@@ -42,7 +42,18 @@
             <analytics-menu ref="analytics" v-show="visibleSidebarMenu === 'analytics'"></analytics-menu>
             <management-menu ref="management" v-show="visibleSidebarMenu === 'management'" @management-menu-ready="onManagementMenuReady"></management-menu>
             <component :ref="item.name" v-for="item in components" :is="item.component" v-show="visibleSidebarMenu === item.name" :key="item.name"></component>
-            <a :href="countlySidebarVersionPath"><div class="cly-vue-sidebar__version" data-test-id="sidebar-menu-version"> {{versionInfo}} </div></a>
+            <div v-if="isCommunityEdition" class="cly-vue-sidebar__version" data-test-id="sidebar-menu-version">
+                <div class="cly-vue-sidebar__version__banner">
+                    <div class="text">{{i18n('sidebar.banner.text')}}</div>
+                    <div class="text bu-has-text-weight-medium">{{i18n('sidebar.banner.upgrade')}}</div>
+                    <el-button class="button" type="success" @click="handleButtonClick">{{i18n('sidebar.banner.upgrade-button')}}</el-button>
+                </div>
+            </div>
+            <a v-else :href="countlySidebarVersionPath">
+                <div class="cly-vue-sidebar__version" data-test-id="sidebar-menu-version">
+                    {{versionInfo}}
+                </div>
+            </a>
         </div>
     </transition>
 </div>

frontend/express/public/localization/dashboard/dashboard.properties

@@ -440,6 +440,9 @@ sidebar.dashboard-tooltip = Dashboards
 sidebar.main-menu = Main Menu
 sidebar.my-profile = My Profile
 sidebar.copy-api-key-success-message = Api Key has been copied to clipboard!
+sidebar.banner.text = You are using a free plan.
+sidebar.banner.upgrade = Upgrade and get more.
+sidebar.banner.upgrade-button = Manage your plan
 
 #dashboard
 dashboard.apply = Apply

frontend/express/public/stylesheets/styles/blocks/_sidebar.scss

@@ -378,6 +378,26 @@ $bg-color: #24292e;
         width: 224px;
         font-size: 10px;
         background-color: #24292e;
+
+        &__banner {
+            background-color: #191C20;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            padding: 16px;
+            margin-bottom: 30%;
+            cursor: default;
+            .text {
+                font-size: 14px;
+                color: #fff;
+            }
+            .button {
+                width: 100%;
+                margin-top: 12px;
+            }
+        }
     }
 
     .cly-icon {