Merge pull request #5291 from Countly/SER-1160-make-the-countly-guide…

…s-icons-stand-out-until-the-first-use [SER-1160] make the countly guides icons stand out until first use
Countly · Jul 5, 2024 · 1a431db · 1a431db
2 parents cda0c8a + 85b0ac6
commit 1a431db
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 14 deletions.
diff --git a/frontend/express/public/javascripts/countly/vue/components/sidebar.js b/frontend/express/public/javascripts/countly/vue/components/sidebar.js
@@ -108,6 +108,7 @@
                     this.$emit("close");
                 },
                 onChange: function(id) {
+                    this.$store.dispatch("countlySidebar/deselectGuidesButton");
                     var selectedApp = this.allApps.find(function(a) {
                         return a._id === id;
                     });
@@ -188,6 +189,9 @@
                         message: this.errorMessage,
                         type: "error"
                     });
+                },
+                unselectCountlyGuides: function() {
+                    this.$store.dispatch("countlySidebar/deselectGuidesButton");
                 }
             }
         });
@@ -637,10 +641,10 @@
                 otherMenuOptions: function() {
                     var menuOptions = [
                         {
-                            name: "help-center",
-                            icon: "cly-icon-sidebar-help-center",
+                            name: this.enableGuides ? "countly-guides" : "help-center",
+                            icon: this.enableGuides ? "cly-icon-sidebar-countly-guides" : "cly-icon-sidebar-help-center",
                             noSelect: true,
-                            tooltip: "Help Center"
+                            tooltip: this.enableGuides ? "Countly Guides" : "Help Center"
                         },
                         {
                             name: "user",
@@ -707,6 +711,18 @@
                     var selected = this.$store.getters["countlySidebar/getSelectedMenuItem"];
                     return selected && selected.menu;
                 },
+                guidesButtonDynamicClass: function() {
+                    var state = this.$store.getters["countlySidebar/getGuidesButton"];
+                    if (state === 'selected') {
+                        return 'color:#12AF51;';
+                    }
+                    else if (state === 'hover' || state === 'highlighted') {
+                        return 'color:white;';
+                    }
+                    else {
+                        return 'color:#A7AEB8;';
+                    }
+                },
                 helpCenterLink: function() {
                     return this.enableGuides ? '#/guides' : "https://support.count.ly";
                 },
@@ -715,6 +731,18 @@
                 }
             },
             methods: {
+                guidesMouseOver: function() {
+                    var state = this.$store.getters["countlySidebar/getGuidesButton"];
+                    if (state !== 'selected' && state !== 'highlighted') {
+                        this.$store.dispatch("countlySidebar/highlightGuidesButton");
+                    }
+                },
+                guidesMouseLeave: function() {
+                    var state = this.$store.getters["countlySidebar/getGuidesButton"];
+                    if (state !== 'selected' && state !== 'highlighted') {
+                        this.$store.dispatch("countlySidebar/deselectGuidesButton");
+                    }
+                },
                 onClick: function(option) {
                     if (!option.noSelect) {
                         this.selectedMenuOptionLocal = option.name;
@@ -724,6 +752,10 @@
                     if (option.name === "toggle") {
                         this.onToggleClick();
                     }
+                    else if (option.name === "countly-guides") {
+                        this.$store.dispatch("countlySidebar/selectGuidesButton");
+                        this.$store.dispatch("countlySidebar/updateSelectedMenuItem", {menu: "guides", item: {}});
+                    }
                 },
                 onToggleClick: function() {
                     this.showMainMenu = !this.showMainMenu;
@@ -910,6 +942,7 @@
                     countlyCMS.fetchEntry("server-guide-config").then(function(config) {
                         self.enableGuides = (config && config.data && config.data[0] && config.data[0].enableGuides) || false;
                     });
+                    this.$store.dispatch("countlySidebar/highlightGuidesButton", 'highlighted');
                 }
             }
         });

diff --git a/frontend/express/public/javascripts/countly/vue/core.js b/frontend/express/public/javascripts/countly/vue/core.js
@@ -540,21 +540,49 @@
             countlySidebar: {
                 namespaced: true,
                 state: {
-                    selectedMenuItem: {}
+                    selectedMenuItem: {},
+                    guidesButton: '',
                 },
                 getters: {
                     getSelectedMenuItem: function(state) {
                         return state.selectedMenuItem;
+                    },
+                    getGuidesButton: function(state) {
+                        return state.guidesButton;
                     }
                 },
                 mutations: {
                     setSelectedMenuItem: function(state, payload) {
                         state.selectedMenuItem = payload;
+                    },
+                    setGuidesButton: function(state, payload) {
+                        state.guidesButton = payload;
                     }
                 },
                 actions: {
-                    updateSelectedMenuItem: function(context, payload) {
-                        context.commit('setSelectedMenuItem', payload);
+                    updateSelectedMenuItem: function({dispatch, commit}, payload) {
+                        commit('setSelectedMenuItem', payload);
+                        if (Object.keys(payload.item).length !== 0) {
+                            dispatch('deselectGuidesButton');
+                        }
+                    },
+                    selectGuidesButton: function(context) {
+                        context.commit('setGuidesButton', 'selected');
+                    },
+                    deselectGuidesButton: ({ getters, commit }) => {
+                        const buttonState = getters.getGuidesButton;
+                        if (buttonState !== 'highlighted') {
+                            commit('setGuidesButton', '');
+                        }
+                    },
+                    highlightGuidesButton: function({getters, commit}, payload) {
+                        const buttonState = getters.getGuidesButton;
+                        if (!payload) {
+                            payload = 'hover';
+                        }
+                        if (buttonState !== 'selected') {
+                            commit('setGuidesButton', payload);
+                        }
                     }
                 }
             }

diff --git a/frontend/express/public/javascripts/countly/vue/templates/sidebar/sidebar.html b/frontend/express/public/javascripts/countly/vue/templates/sidebar/sidebar.html
@@ -31,6 +31,7 @@
                         'cly-vue-sidebar__menu-option-toggle--rotate-right': !showMainMenu
                     }]" data-test-id="sidebar-menuoptions-toogleleft"></i>
                 <a v-else-if="item.name === 'help-center'" :href="helpCenterLink" :target="helpCenterTarget"><i :class="['cly-icon-btn', item.icon]" data-test-id="sidebar-menu-helpcenter"></i></a>
+                <a v-else-if="item.name === 'countly-guides'" @click="onClick(item)" :href="helpCenterLink" :target="helpCenterTarget"><i class="cly-io-16 cly-is cly-is-book-open" :style="guidesButtonDynamicClass" @mouseover='guidesMouseOver' @mouseleave='guidesMouseLeave' data-test-id="sidebar-menu-countlyguides"></i></a>
                 <i v-else :class="['cly-icon-btn', item.icon, {'cly-vue-sidebar__menu-option--selected': item.name === pseudoSelectedMenuOption}]"></i>
             </li>
         </ul>

diff --git a/frontend/express/public/javascripts/countly/vue/templates/sidebar/users-menu.html b/frontend/express/public/javascripts/countly/vue/templates/sidebar/users-menu.html
@@ -61,7 +61,7 @@
                         <i class="ion-gear-a"></i>
                     </div>
                     <div class="bu-level-item">
-                        <a href="#/account-settings">
+                        <a href="#/account-settings" @click="unselectCountlyGuides">
                             <div>{{i18nM('plugins.user-account')}}</div>
                         </a>
                     </div>
@@ -73,7 +73,7 @@
                         <i class="ion-key"></i>
                     </div>
                     <div class="bu-level-item">
-                        <a href="#/manage/token_manager">
+                        <a href="#/manage/token_manager" @click="unselectCountlyGuides">
                             <div>{{i18nM('token_manager.page-title')}}</div>
                         </a>
                     </div>

diff --git a/plugins/guides/api/api.js b/plugins/guides/api/api.js
@@ -3,4 +3,4 @@ var plugins = require('../../pluginManager.js');
 //write api call
 plugins.register("/i", function(/*ob*/) {
     //process sdk request here
-});
+});
diff --git a/plugins/guides/frontend/app.js b/plugins/guides/frontend/app.js
@@ -1,7 +1,29 @@
 var plugin = {};
+const countlyConfig = require('../../../frontend/express/config');
+const common = require('../../../api/utils/common.js');
 
-plugin.init = function(/*app, countlyDb*/) {
-    //add middleware here
+plugin.init = function(app) {
+    app.post(countlyConfig.path + '/guides/viewed', function(req, res) {
+        if (!req.session || !req.session.uid) {
+            res.send(false);
+            res.end();
+            return false;
+        }
+        else {
+            var db = common.db,
+                user_id = req.body.user_id,
+                update = {"viewedGuides": true};
+
+            db.collection("members").update({ _id: db.ObjectID(user_id) }, { $set: update }, { upsert: true }, function(err, res2) {
+                if (err) {
+                    common.returnMessage(err, 503, 'Failed to update member');
+                }
+                else {
+                    common.returnMessage(res2, 200, 'Succesfuly updated member');
+                }
+            });
+        }
+    });
 };
 
 module.exports = plugin;
diff --git a/plugins/guides/frontend/public/javascripts/countly.models.js b/plugins/guides/frontend/public/javascripts/countly.models.js
@@ -1,4 +1,4 @@
-/*global countlyCMS */
+/* global countlyCMS CV countlyGlobal */
 
 (function(countlyGuides) {
 
@@ -13,6 +13,18 @@
 
     var _entries = [];
 
+    countlyGuides.memberViewedGuides = function(user_id) {
+        CV.$.ajax({
+            type: "POST",
+            url: "/guides/viewed",
+            dataType: "json",
+            data: {
+                "user_id": user_id,
+                _csrf: countlyGlobal.csrf_token,
+            }
+        });
+    };
+
     countlyGuides.fetchEntries = function(query, refresh) {
         return new Promise(function(resolve, reject) {
             countlyCMS.fetchEntry(API_key, {populate: true, query, refresh})

diff --git a/plugins/guides/frontend/public/javascripts/countly.views.js b/plugins/guides/frontend/public/javascripts/countly.views.js
@@ -176,6 +176,7 @@
                         keepShow: false,
                     }
                 },
+                viewedGuides: countlyGlobal.member.viewedGuides,
             };
         },
         created: function() {
@@ -204,11 +205,25 @@
         beforeDestroy: function() {
             document.removeEventListener('keydown', this.handleEscapeKey);
         },
+        computed: {
+            dynamicClassGuideButton: function() {
+                var highlightGuidesButton = true;
+                if (this.viewedGuides === true) {
+                    highlightGuidesButton = false;
+                }
+                return highlightGuidesButton ? 'view-button-initial' : 'view-button';
+            }
+        },
         methods: {
             onClick: function() {
                 this.isDialogVisible = true;
                 let mainViewContainer = document.getElementById('main-views-container');
                 mainViewContainer.getElementsByClassName('main-view')[0].style.setProperty('overflow', 'hidden', 'important');
+
+                if (this.viewedGuides !== true) {
+                    countlyGuides.memberViewedGuides(countlyGlobal.member._id);
+                    this.viewedGuides = countlyGlobal.member.viewedGuides = true;
+                }
             },
             onClose: function() {
                 this.isDialogVisible = false;

diff --git a/plugins/guides/frontend/public/stylesheets/main.scss b/plugins/guides/frontend/public/stylesheets/main.scss
@@ -259,7 +259,30 @@
                 width: auto;
                 padding-left: 5px;
             }
-
+        }
+    }
+
+    .view-button-initial {
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+        background-color: #FFFFFF;
+        border-radius: 23px;
+        padding: 7px;
+        border: 1px solid #E2E4E8;
+        box-shadow: 0px 2px 4px 0px #0000000C;
+        width: auto;
+        cursor: pointer;
+        .text {
+            font-size: 13px;
+            font-weight: 400;
+            line-height: 16px;
+            color: #0166D6;
+            white-space: nowrap;
+            opacity: 1;
+            width: auto;
+            padding-left: 5px;
+            transition: width 1s ease-in;
         }
     }
 

diff --git a/plugins/guides/frontend/public/templates/dialog.html b/plugins/guides/frontend/public/templates/dialog.html
@@ -1,5 +1,5 @@
 <div class="guide-dialog-wrapper">
-    <div v-if="isButtonVisible" data-test-id="view-guide-button" class="view-button" @click="onClick">
+    <div v-if="isButtonVisible" data-test-id="view-guide-button" :class="dynamicClassGuideButton" @click="onClick">
         <span class="icon">
             <img src="images/icons/book-open.svg" alt="Icon"/>
         </span>