feat: Add audio alert for incoming messages on dashboard (#1738)

Fixes: #1345

app/javascript/dashboard/helper/actionCable.js

@@ -1,5 +1,6 @@
 import AuthAPI from '../api/auth';
 import BaseActionCableConnector from '../../shared/helpers/BaseActionCableConnector';
+import { newMessageNotification } from 'shared/helpers/AudioNotificationHelper';
 
 class ActionCableConnector extends BaseActionCableConnector {
   constructor(app, pubsubToken) {
@@ -63,6 +64,7 @@ class ActionCableConnector extends BaseActionCableConnector {
   onLogout = () => AuthAPI.logout();
 
   onMessageCreated = data => {
+    newMessageNotification(data);
     this.app.$store.dispatch('addMessage', data);
   };
 

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

@@ -22,6 +22,11 @@
         "TITLE": "Access Token",
         "NOTE": "This token can be used if you are building an API based integration"
       },
+      "AUDIO_NOTIFICATIONS_SECTION": {
+        "TITLE": "Audio Notifications",
+        "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
+        "ENABLE_AUDIO": "Play audio notification when a new conversation is created or new messages arrives"
+      },
       "EMAIL_NOTIFICATIONS_SECTION": {
         "TITLE": "Email Notifications",
         "NOTE": "Update your email notification preferences here",

app/javascript/dashboard/routes/dashboard/settings/profile/NotificationSettings.vue

@@ -1,5 +1,33 @@
 <template>
   <div>
+    <div class="profile--settings--row row">
+      <div class="columns small-3 ">
+        <h4 class="block-title">
+          {{ $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.TITLE') }}
+        </h4>
+        <p>
+          {{ $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NOTE') }}
+        </p>
+      </div>
+      <div class="columns small-9">
+        <div>
+          <input
+            id="audio_enable_alert"
+            v-model="enableAudioAlerts"
+            class="notification--checkbox"
+            type="checkbox"
+            @input="handleAudioInput"
+          />
+          <label for="audio_enable_alert">
+            {{
+              $t(
+                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ENABLE_AUDIO'
+              )
+            }}
+          </label>
+        </div>
+      </div>
+    </div>
     <div class="profile--settings--row row">
       <div class="columns small-3 ">
         <h4 class="block-title">
@@ -185,6 +213,7 @@
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
 import configMixin from 'shared/mixins/configMixin';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import {
   hasPushPermissions,
   requestPushPermissions,
@@ -192,11 +221,12 @@ import {
 } from '../../../../helper/pushHelper';
 
 export default {
-  mixins: [alertMixin, configMixin],
+  mixins: [alertMixin, configMixin, uiSettingsMixin],
   data() {
     return {
       selectedEmailFlags: [],
       selectedPushFlags: [],
+      enableAudioAlerts: false,
       hasEnabledPushPermissions: false,
     };
   },
@@ -204,6 +234,7 @@ export default {
     ...mapGetters({
       emailFlags: 'userNotificationSettings/getSelectedEmailFlags',
       pushFlags: 'userNotificationSettings/getSelectedPushFlags',
+      uiSettings: 'getUISettings',
     }),
     isBrowserSafari() {
       if (window.browserConfig) {
@@ -219,6 +250,10 @@ export default {
     pushFlags(value) {
       this.selectedPushFlags = value;
     },
+    uiSettings(value) {
+      const { enable_audio_alerts: enableAudio = false } = value;
+      this.enableAudioAlerts = enableAudio;
+    },
   },
   mounted() {
     if (hasPushPermissions()) {
@@ -226,6 +261,8 @@ export default {
     }
 
     this.$store.dispatch('userNotificationSettings/get');
+    const { enable_audio_alerts: enableAudio = false } = this.uiSettings;
+    this.enableAudioAlerts = enableAudio;
   },
   methods: {
     onRegistrationSuccess() {
@@ -277,6 +314,13 @@ export default {
 
       this.updateNotificationSettings();
     },
+    handleAudioInput(e) {
+      this.enableAudioAlerts = e.target.checked;
+      this.updateUISettings({
+        enable_audio_alerts: this.enableAudioAlerts,
+      });
+      this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
+    },
     toggleInput(selected, current) {
       if (selected.includes(current)) {
         const newSelectedFlags = selected.filter(flag => flag !== current);