chore: Refactor audio notification helper (#6148)

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

@@ -0,0 +1,100 @@
+import { MESSAGE_TYPE } from 'shared/constants/messages';
+import { showBadgeOnFavicon } from './faviconHelper';
+import { initFaviconSwitcher } from './faviconHelper';
+import {
+  getAlertAudio,
+  initOnEvents,
+} from 'shared/helpers/AudioNotificationHelper';
+
+class DashboardAudioNotificationHelper {
+  constructor() {
+    this.recurringNotificationTimer = null;
+    this.audioAlertType = 'none';
+    this.playAlertOnlyWhenHidden = true;
+    this.currentUserId = null;
+    this.audioAlertTone = 'ding';
+  }
+
+  setInstanceValues = ({
+    currentUserId,
+    alwaysPlayAudioAlert,
+    audioAlertType,
+    audioAlertTone,
+  }) => {
+    this.audioAlertType = audioAlertType;
+    this.playAlertOnlyWhenHidden = !alwaysPlayAudioAlert;
+    this.currentUserId = currentUserId;
+    this.audioAlertTone = audioAlertTone;
+    initOnEvents.forEach(e => {
+      document.addEventListener(e, this.onAudioListenEvent, false);
+    });
+    initFaviconSwitcher();
+  };
+
+  onAudioListenEvent = async () => {
+    try {
+      await getAlertAudio('', {
+        type: 'dashboard',
+        alertTone: this.audioAlertTone,
+      });
+      initOnEvents.forEach(event => {
+        document.removeEventListener(event, this.onAudioListenEvent, false);
+      });
+    } catch (error) {
+      // Ignore audio fetch errors
+    }
+  };
+
+  isConversationAssignedToCurrentUser = message => {
+    const conversationAssigneeId = message?.conversation?.assignee_id;
+    return conversationAssigneeId === this.currentUserId;
+  };
+
+  isMessageFromCurrentConversation = message => {
+    return (
+      window.WOOT.$store.getters.getSelectedChat?.id === message.conversation_id
+    );
+  };
+
+  isMessageFromCurrentUser = message => {
+    return message?.sender_id === this.currentUserId;
+  };
+
+  shouldNotifyOnMessage = message => {
+    if (this.audioAlertType === 'mine') {
+      return this.isConversationAssignedToCurrentUser(message);
+    }
+    return this.audioAlertType === 'all';
+  };
+
+  onNewMessage = message => {
+    // If the message is sent by the current user or the
+    // correct notification is not enabled, then dismiss the alert
+    if (
+      this.isMessageFromCurrentUser(message) ||
+      !this.shouldNotifyOnMessage(message)
+    ) {
+      return;
+    }
+
+    // If the message type is not incoming or private, then dismiss the alert
+    const { message_type: messageType, private: isPrivate } = message;
+    if (messageType !== MESSAGE_TYPE.INCOMING && !isPrivate) {
+      return;
+    }
+
+    // If the user looking at the conversation, then dismiss the alert
+    if (this.isMessageFromCurrentConversation(message) && !document.hidden) {
+      return;
+    }
+    // If the user has disabled alerts when active on the dashboard, the dismiss the alert
+    if (this.playAlertOnlyWhenHidden && !document.hidden) {
+      return;
+    }
+
+    window.playAudioAlert();
+    showBadgeOnFavicon();
+  };
+}
+
+export default new DashboardAudioNotificationHelper();

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

@@ -0,0 +1,21 @@
+export const showBadgeOnFavicon = () => {
+  const favicons = document.querySelectorAll('.favicon');
+
+  favicons.forEach(favicon => {
+    const newFileName = `/favicon-badge-${favicon.sizes[[0]]}.png`;
+    favicon.href = newFileName;
+  });
+};
+
+export const initFaviconSwitcher = () => {
+  const favicons = document.querySelectorAll('.favicon');
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      favicons.forEach(favicon => {
+        const oldFileName = `/favicon-${favicon.sizes[[0]]}.png`;
+        favicon.href = oldFileName;
+      });
+    }
+  });
+};

app/javascript/dashboard/helper/actionCable.js

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

app/javascript/dashboard/helper/scriptHelpers.js

@@ -1,4 +1,5 @@
 import AnalyticsHelper from './AnalyticsHelper';
+import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';
 
 export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
 export const CHATWOOT_RESET = 'CHATWOOT_RESET';
@@ -13,6 +14,23 @@ export const initializeAnalyticsEvents = () => {
   window.bus.$on(ANALYTICS_RESET, () => {});
 };
 
+const initializeAudioAlerts = user => {
+  // InitializeAudioNotifications
+  const { ui_settings: uiSettings } = user || {};
+  const {
+    always_play_audio_alert: alwaysPlayAudioAlert,
+    enable_audio_alerts: audioAlertType,
+    notification_tone: audioAlertTone,
+  } = uiSettings;
+
+  DashboardAudioNotificationHelper.setInstanceValues({
+    currentUserId: user.id,
+    audioAlertType: audioAlertType || 'none',
+    audioAlertTone: audioAlertTone || 'ding',
+    alwaysPlayAudioAlert: alwaysPlayAudioAlert || false,
+  });
+};
+
 export const initializeChatwootEvents = () => {
   window.bus.$on(CHATWOOT_RESET, () => {
     if (window.$chatwoot) {
@@ -32,5 +50,7 @@ export const initializeChatwootEvents = () => {
         cloudCustomer: 'true',
       });
     }
+
+    initializeAudioAlerts(user);
   });
 };