From 8c8c5a77c803ccb17c155bedaf7de5e70ca0f75f Mon Sep 17 00:00:00 2001
From: Muhsin Keloth <muhsinkeramam@gmail.com>
Date: Tue, 15 Mar 2022 21:09:14 +0530
Subject: [PATCH] feat: Show banner message if Chatwoot update available
 (#3999)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>
Co-authored-by: Pranav <pranav@chatwoot.com>
---
 app/javascript/dashboard/App.vue              | 22 +++++-
 .../dashboard/assets/scss/_layout.scss        | 17 ++++-
 .../dashboard/components/app/UpdateBanner.vue | 74 +++++++++++++++++++
 .../dashboard/components/layout/Sidebar.vue   |  2 +
 .../layout/sidebarComponents/Primary.vue      |  2 +-
 .../layout/sidebarComponents/Secondary.vue    |  2 +-
 .../dashboard/components/ui/Banner.vue        | 26 ++++++-
 .../widgets/conversation/ConversationBox.vue  |  3 +-
 .../dashboard/helper/localStorage.js          | 17 +++++
 .../i18n/locale/en/generalSettings.json       |  3 +-
 10 files changed, 156 insertions(+), 12 deletions(-)
 create mode 100644 app/javascript/dashboard/components/app/UpdateBanner.vue
 create mode 100644 app/javascript/dashboard/helper/localStorage.js

diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 502d8bda1..2c91de16f 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div id="app" class="app-wrapper app-root">
+    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
     <transition name="fade" mode="out-in">
       <router-view></router-view>
     </transition>
@@ -13,24 +14,27 @@
 </template>
 
 <script>
+import { accountIdFromPathname } from './helper/URLHelper';
 import { mapGetters } from 'vuex';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal';
-import WootSnackbarBox from './components/SnackbarContainer';
 import NetworkNotification from './components/NetworkNotification';
-import { accountIdFromPathname } from './helper/URLHelper';
+import UpdateBanner from './components/app/UpdateBanner.vue';
+import WootSnackbarBox from './components/SnackbarContainer';
 
 export default {
   name: 'App',
 
   components: {
-    WootSnackbarBox,
     AddAccountModal,
     NetworkNotification,
+    UpdateBanner,
+    WootSnackbarBox,
   },
 
   data() {
     return {
       showAddAccountModal: false,
+      latestChatwootVersion: null,
     };
   },
 
@@ -38,6 +42,7 @@ export default {
     ...mapGetters({
       getAccount: 'accounts/getAccount',
       currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
     }),
     hasAccounts() {
       return (
@@ -72,8 +77,12 @@ export default {
 
       if (accountId) {
         await this.$store.dispatch('accounts/get');
-        const { locale } = this.getAccount(accountId);
+        const {
+          locale,
+          latest_chatwoot_version: latestChatwootVersion,
+        } = this.getAccount(accountId);
         this.setLocale(locale);
+        this.latestChatwootVersion = latestChatwootVersion;
       }
     },
   },
@@ -82,6 +91,11 @@ export default {
 
 <style lang="scss">
 @import './assets/scss/app';
+.update-banner {
+  height: var(--space-larger);
+  align-items: center;
+  font-size: var(--font-size-small) !important;
+}
 </style>
 
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
diff --git a/app/javascript/dashboard/assets/scss/_layout.scss b/app/javascript/dashboard/assets/scss/_layout.scss
index 7be546b01..198bb75e5 100644
--- a/app/javascript/dashboard/assets/scss/_layout.scss
+++ b/app/javascript/dashboard/assets/scss/_layout.scss
@@ -10,10 +10,24 @@ body {
 
 .app-wrapper {
   @include full-height;
+  flex-grow: 0;
+  min-height: 0;
   width: 100%;
 }
 
-.app-root {
+.banner + .app-wrapper {
+  .button--fixed-right-top {
+    top: 5.6 * $space-one;
+  }
+
+  .off-canvas-content {
+    .button--fixed-right-top {
+      top: $space-small;
+    }
+  }
+}
+
+is-closed .app-root {
   @include flex;
   flex-direction: column;
 }
@@ -21,6 +35,7 @@ body {
 .app-content {
   @include flex;
   @include full-height;
+  min-height: 0;
   overflow: hidden;
 }
 
diff --git a/app/javascript/dashboard/components/app/UpdateBanner.vue b/app/javascript/dashboard/components/app/UpdateBanner.vue
new file mode 100644
index 000000000..2e4b00031
--- /dev/null
+++ b/app/javascript/dashboard/components/app/UpdateBanner.vue
@@ -0,0 +1,74 @@
+<template>
+  <banner
+    v-if="shouldShowBanner"
+    class="update-banner"
+    color-scheme="primary"
+    :banner-message="bannerMessage"
+    href-link="https://github.com/chatwoot/chatwoot/releases"
+    :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
+    has-close-button
+    @close="dismissUpdateBanner"
+  />
+</template>
+<script>
+import Banner from 'dashboard/components/ui/Banner.vue';
+import LocalStorage from '../../helper/localStorage';
+import { mapGetters } from 'vuex';
+import adminMixin from 'dashboard/mixins/isAdmin';
+
+const semver = require('semver');
+const dismissedUpdates = new LocalStorage('dismissedUpdates');
+
+export default {
+  components: {
+    Banner,
+  },
+  mixins: [adminMixin],
+  props: {
+    latestChatwootVersion: {
+      type: String,
+      default: '',
+    },
+  },
+  computed: {
+    ...mapGetters({ globalConfig: 'globalConfig/get' }),
+    hasAnUpdateAvailable() {
+      if (!semver.valid(this.latestChatwootVersion)) {
+        return false;
+      }
+      return semver.lt(
+        this.globalConfig.appVersion,
+        this.latestChatwootVersion
+      );
+    },
+    bannerMessage() {
+      return this.$t('GENERAL_SETTINGS.UPDATE_CHATWOOT', {
+        latestChatwootVersion: this.latestChatwootVersion,
+      });
+    },
+    shouldShowBanner() {
+      return (
+        this.globalConfig.displayManifest &&
+        this.hasAnUpdateAvailable &&
+        !this.isVersionNotificationDismissed(this.latestChatwootVersion) &&
+        this.isAdmin
+      );
+    },
+  },
+  methods: {
+    isVersionNotificationDismissed(version) {
+      return dismissedUpdates.get().includes(version);
+    },
+    dismissUpdateBanner() {
+      let updatedDismissedItems = dismissedUpdates.get();
+      if (updatedDismissedItems instanceof Array) {
+        updatedDismissedItems.push(this.latestChatwootVersion);
+      } else {
+        updatedDismissedItems = [this.latestChatwootVersion];
+      }
+      dismissedUpdates.store(updatedDismissedItems);
+      this.latestChatwootVersion = this.globalConfig.appVersion;
+    },
+  },
+};
+</script>
diff --git a/app/javascript/dashboard/components/layout/Sidebar.vue b/app/javascript/dashboard/components/layout/Sidebar.vue
index cdd338710..826d766df 100644
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -184,6 +184,8 @@ export default {
 .woot-sidebar {
   background: var(--white);
   display: flex;
+  min-height: 0;
+  height: 100%;
 }
 </style>
 
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
index 0f568ab75..002f371bf 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -93,7 +93,7 @@ export default {
   width: var(--space-jumbo);
   border-right: 1px solid var(--s-50);
   box-sizing: content-box;
-  height: 100vh;
+  height: 100%;
   flex-shrink: 0;
 }
 
diff --git a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
index 6222490e4..1f98305a1 100644
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -225,7 +225,7 @@ export default {
 .secondary-menu {
   background: var(--white);
   border-right: 1px solid var(--s-50);
-  height: 100vh;
+  height: 100%;
   width: 19rem;
   flex-shrink: 0;
   overflow: hidden;
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index 52d7c5740..c9d71bfaf 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="banner" :class="bannerClasses">
-    <span>
+    <span class="banner-message">
       {{ bannerMessage }}
       <a
         v-if="hrefLink"
@@ -26,7 +26,7 @@
       v-if="hasCloseButton"
       size="small"
       variant="link"
-      color-scheme="warning"
+      color-scheme="secondary"
       icon="dismiss-circle"
       class-names="banner-action__button"
       @click="onClickClose"
@@ -92,8 +92,19 @@ export default {
   justify-content: center;
   position: sticky;
 
+  &.primary {
+    background: var(--w-500);
+    .banner-action__button {
+      color: var(--white);
+    }
+  }
+
   &.secondary {
-    background: var(--s-300);
+    background: var(--s-200);
+    color: var(--s-800);
+    a {
+      color: var(--s-800);
+    }
   }
 
   &.alert {
@@ -110,9 +121,13 @@ export default {
 
   &.gray {
     background: var(--b-500);
+    .banner-action__button {
+      color: var(--white);
+    }
   }
 
   a {
+    margin-left: var(--space-smaller);
     text-decoration: underline;
     color: var(--white);
     font-size: var(--font-size-mini);
@@ -125,5 +140,10 @@ export default {
       white-space: nowrap;
     }
   }
+
+  .banner-message {
+    display: flex;
+    align-items: center;
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index ea4055d08..4849c2e97 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -100,7 +100,8 @@ export default {
   display: flex;
   background: var(--color-background-light);
   margin: 0;
-  height: calc(100vh - var(--space-jumbo));
+  height: 100%;
+  min-height: 0;
 }
 
 .conversation-sidebar-wrap {
diff --git a/app/javascript/dashboard/helper/localStorage.js b/app/javascript/dashboard/helper/localStorage.js
new file mode 100644
index 000000000..cc963aa48
--- /dev/null
+++ b/app/javascript/dashboard/helper/localStorage.js
@@ -0,0 +1,17 @@
+class LocalStorage {
+  constructor(key) {
+    this.key = key;
+  }
+
+  store(allItems) {
+    localStorage.setItem(this.key, JSON.stringify(allItems));
+    localStorage.setItem(this.key + ':ts', Date.now());
+  }
+
+  get() {
+    let stored = localStorage.getItem(this.key);
+    return JSON.parse(stored) || [];
+  }
+}
+
+export default LocalStorage;
diff --git a/app/javascript/dashboard/i18n/locale/en/generalSettings.json b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
index f365a3248..c22d9ee3f 100644
--- a/app/javascript/dashboard/i18n/locale/en/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
@@ -47,7 +47,8 @@
         "CUSTOM_EMAIL_DOMAIN_ENABLED": "You can receive emails in your custom domain now."
       }
     },
-    "UPDATE_CHATWOOT": "An update %{latestChatwootVersion} for Chatwoot is available. Please update your instance."
+    "UPDATE_CHATWOOT": "An update %{latestChatwootVersion} for Chatwoot is available. Please update your instance.",
+    "LEARN_MORE":"Learn more"
   },
   "FORMS": {
     "MULTISELECT": {