feat: Adds the ability to play audio alert every 30 sec (#6150)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js

@@ -6,11 +6,14 @@ import {
   initOnEvents,
 } from 'shared/helpers/AudioNotificationHelper';
 
+const NOTIFICATION_TIME = 30000;
+
 class DashboardAudioNotificationHelper {
   constructor() {
     this.recurringNotificationTimer = null;
     this.audioAlertType = 'none';
     this.playAlertOnlyWhenHidden = true;
+    this.alertIfUnreadConversationExist = false;
     this.currentUserId = null;
     this.audioAlertTone = 'ding';
   }
@@ -18,11 +21,13 @@ class DashboardAudioNotificationHelper {
   setInstanceValues = ({
     currentUserId,
     alwaysPlayAudioAlert,
+    alertIfUnreadConversationExist,
     audioAlertType,
     audioAlertTone,
   }) => {
     this.audioAlertType = audioAlertType;
     this.playAlertOnlyWhenHidden = !alwaysPlayAudioAlert;
+    this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
     this.currentUserId = currentUserId;
     this.audioAlertTone = audioAlertTone;
     initOnEvents.forEach(e => {
@@ -40,11 +45,53 @@ class DashboardAudioNotificationHelper {
       initOnEvents.forEach(event => {
         document.removeEventListener(event, this.onAudioListenEvent, false);
       });
+      this.playAudioEvery30Seconds();
     } catch (error) {
       // Ignore audio fetch errors
     }
   };
 
+  executeRecurringNotification = () => {
+    const mineConversation = window.WOOT.$store.getters.getMineChats({
+      assigneeType: 'me',
+      status: 'open',
+    });
+    const hasUnreadConversation = mineConversation.some(conv => {
+      return conv.unread_count > 0;
+    });
+
+    const shouldPlayAlert = !this.playAlertOnlyWhenHidden || document.hidden;
+
+    if (hasUnreadConversation && shouldPlayAlert) {
+      window.playAudioAlert();
+      showBadgeOnFavicon();
+    }
+    this.clearSetTimeout();
+  };
+
+  clearSetTimeout = () => {
+    if (this.recurringNotificationTimer) {
+      clearTimeout(this.recurringNotificationTimer);
+    }
+    this.recurringNotificationTimer = setTimeout(
+      this.executeRecurringNotification,
+      NOTIFICATION_TIME
+    );
+  };
+
+  playAudioEvery30Seconds = () => {
+    //  Audio alert is disabled dismiss the timer
+    if (this.audioAlertType === 'none') {
+      return;
+    }
+    // If assigned conversation flag is disabled dismiss the timer
+    if (!this.alertIfUnreadConversationExist) {
+      return;
+    }
+
+    this.clearSetTimeout();
+  };
+
   isConversationAssignedToCurrentUser = message => {
     const conversationAssigneeId = message?.conversation?.assignee_id;
     return conversationAssigneeId === this.currentUserId;
@@ -94,6 +141,7 @@ class DashboardAudioNotificationHelper {
 
     window.playAudioAlert();
     showBadgeOnFavicon();
+    this.playAudioEvery30Seconds();
   };
 }
 

app/javascript/dashboard/helper/scriptHelpers.js

@@ -20,6 +20,7 @@ const initializeAudioAlerts = user => {
   const {
     always_play_audio_alert: alwaysPlayAudioAlert,
     enable_audio_alerts: audioAlertType,
+    alert_if_unread_assigned_conversation_exist: alertIfUnreadConversationExist,
     notification_tone: audioAlertTone,
   } = uiSettings;
 
@@ -28,6 +29,7 @@ const initializeAudioAlerts = user => {
     audioAlertType: audioAlertType || 'none',
     audioAlertTone: audioAlertTone || 'ding',
     alwaysPlayAudioAlert: alwaysPlayAudioAlert || false,
+    alertIfUnreadConversationExist: alertIfUnreadConversationExist || false,
   });
 };
 

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

@@ -59,17 +59,18 @@
         "TITLE": "Audio Notifications",
         "NOTE": "Enable audio notifications in dashboard for new messages and conversations.",
         "ALERT_TYPE": {
-          "TITLE": "Alert types:",
+          "TITLE": "Alert events:",
           "NONE": "None",
           "ASSIGNED": "Assigned Conversations",
           "ALL_CONVERSATIONS": "All Conversations"
         },
         "DEFAULT_TONE": {
-          "TITLE": "Default tone:"
+          "TITLE": "Alert tone:"
         },
         "CONDITIONS": {
-          "TITLE": "Conditions:",
-          "CONDITION_ONE": "Send audio alerts only if the browser window is not active"
+          "TITLE": "Alert conditions:",
+          "CONDITION_ONE": "Send audio alerts only if the browser window is not active",
+          "CONDITION_TWO": "Send alerts every 30s until all the assigned conversations are read"
         }
       },
       "EMAIL_NOTIFICATIONS_SECTION": {

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

@@ -119,6 +119,23 @@
               }}
             </label>
           </div>
+          <div>
+            <input
+              id="audio_alert_until_all_conversations_are_read"
+              v-model="alertIfUnreadConversationExist"
+              class="notification--checkbox"
+              type="checkbox"
+              value="conversations_are_read"
+              @input="handleAudioAlertConditions"
+            />
+            <label for="audio_alert_until_all_conversations_are_read">
+              {{
+                $t(
+                  'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.CONDITIONS.CONDITION_TWO'
+                )
+              }}
+            </label>
+          </div>
         </div>
       </div>
     </div>
@@ -323,6 +340,7 @@ export default {
       enableAudioAlerts: false,
       hasEnabledPushPermissions: false,
       playAudioWhenTabIsInactive: false,
+      alertIfUnreadConversationExist: false,
       notificationTone: 'ding',
       notificationAlertTones: [
         {
@@ -372,10 +390,12 @@ export default {
       const {
         enable_audio_alerts: enableAudio = false,
         always_play_audio_alert: alwaysPlayAudioAlert,
+        alert_if_unread_assigned_conversation_exist: alertIfUnreadConversationExist,
         notification_tone: notificationTone,
       } = uiSettings;
       this.enableAudioAlerts = enableAudio;
       this.playAudioWhenTabIsInactive = !alwaysPlayAudioAlert;
+      this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
       this.notificationTone = notificationTone || 'ding';
     },
     onRegistrationSuccess() {
@@ -441,6 +461,10 @@ export default {
         this.updateUISettings({
           always_play_audio_alert: !e.target.checked,
         });
+      } else if (condition === 'conversations_are_read') {
+        this.updateUISettings({
+          alert_if_unread_assigned_conversation_exist: e.target.checked,
+        });
       }
       this.showAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
     },