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/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>

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>
 

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;
 }
 

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;

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>

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 {