feat: Update notification in account settings (#1660)

app/javascript/dashboard/i18n/locale/en/generalSettings.json

@@ -42,7 +42,8 @@
         "INBOUND_EMAIL_ENABLED": "Conversation continuity with emails is enabled for your account.",
         "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."
   },
   "FORMS": {
     "MULTISELECT": {

app/javascript/dashboard/routes/dashboard/settings/account/Index.vue

@@ -79,7 +79,14 @@
         </div>
       </div>
       <div class="current-version">
-        {{ `v${globalConfig.appVersion}` }}
+        <div>{{ `v${globalConfig.appVersion}` }}</div>
+        <div v-if="hasAnUpdateAvailable && globalConfig.displayManifest">
+          {{
+            $t('GENERAL_SETTINGS.UPDATE_CHATWOOT', {
+              latestChatwootVersion: latestChatwootVersion,
+            })
+          }}
+        </div>
       </div>
 
       <woot-submit-button
@@ -100,6 +107,7 @@ import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import configMixin from 'shared/mixins/configMixin';
 import accountMixin from '../../../../mixins/account';
+const semver = require('semver');
 
 export default {
   mixins: [accountMixin, alertMixin, configMixin],
@@ -112,6 +120,7 @@ export default {
       supportEmail: '',
       features: {},
       autoResolveDuration: null,
+      latestChatwootVersion: null,
     };
   },
   validations: {
@@ -131,6 +140,16 @@ export default {
       getAccount: 'accounts/getAccount',
       uiFlags: 'accounts/getUIFlags',
     }),
+    hasAnUpdateAvailable() {
+      if (!semver.valid(this.latestChatwootVersion)) {
+        return false;
+      }
+
+      return semver.lt(
+        this.globalConfig.appVersion,
+        this.latestChatwootVersion
+      );
+    },
     languagesSortedByCode() {
       const enabledLanguages = [...this.enabledLanguages];
       return enabledLanguages.sort((l1, l2) =>
@@ -167,6 +186,7 @@ export default {
           custom_email_domain_enabled,
           features,
           auto_resolve_duration,
+          latest_chatwoot_version: latestChatwootVersion,
         } = this.getAccount(this.accountId);
 
         this.$root.$i18n.locale = locale;
@@ -178,6 +198,7 @@ export default {
         this.customEmailDomainEnabled = custom_email_domain_enabled;
         this.features = features;
         this.autoResolveDuration = auto_resolve_duration;
+        this.latestChatwootVersion = latestChatwootVersion;
       } catch (error) {
         // Ignore error
       }

app/javascript/shared/store/globalConfig.js

@@ -1,7 +1,8 @@
 const {
   APP_VERSION: appVersion,
-  CREATE_NEW_ACCOUNT_FROM_DASHBOARD: createNewAccountFromDashboard,
   BRAND_NAME: brandName,
+  CREATE_NEW_ACCOUNT_FROM_DASHBOARD: createNewAccountFromDashboard,
+  DISPLAY_MANIFEST: displayManifest,
   INSTALLATION_NAME: installationName,
   LOGO_THUMBNAIL: logoThumbnail,
   LOGO: logo,
@@ -12,8 +13,9 @@ const {
 
 const state = {
   appVersion,
-  createNewAccountFromDashboard,
   brandName,
+  createNewAccountFromDashboard,
+  displayManifest,
   installationName,
   logo,
   logoThumbnail,