Merge branch 'develop' into fix/CW-3385

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

@@ -36,6 +36,22 @@ class DashboardAudioNotificationHelper {
     initFaviconSwitcher();
   };
 
+  updateInstanceValues = ({
+    alwaysPlayAudioAlert,
+    alertIfUnreadConversationExist,
+    audioAlertType,
+    audioAlertTone,
+  }) => {
+    this.audioAlertType = audioAlertType;
+    this.playAlertOnlyWhenHidden = !alwaysPlayAudioAlert;
+    this.alertIfUnreadConversationExist = alertIfUnreadConversationExist;
+    this.audioAlertTone = audioAlertTone;
+    getAlertAudio('', {
+      type: 'dashboard',
+      alertTone: this.audioAlertTone,
+    });
+  };
+
   onAudioListenEvent = async () => {
     try {
       await getAlertAudio('', {

app/javascript/dashboard/helper/scriptHelpers.js

@@ -21,7 +21,7 @@ const initializeAudioAlerts = user => {
     enable_audio_alerts: audioAlertType,
     alert_if_unread_assigned_conversation_exist: alertIfUnreadConversationExist,
     notification_tone: audioAlertTone,
-    // UI Settings can be undefined initally as we don't send the
+    // UI Settings can be undefined initially as we don't send the
     // entire payload for the user during the signup process.
   } = uiSettings || {};
 

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

@@ -4,6 +4,7 @@ import { useUISettings } from 'dashboard/composables/useUISettings';
 import AudioAlertTone from './AudioAlertTone.vue';
 import AudioAlertEvent from './AudioAlertEvent.vue';
 import AudioAlertCondition from './AudioAlertCondition.vue';
+import DashboardAudioNotificationHelper from 'dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper';
 
 export default {
   components: {
@@ -38,6 +39,21 @@ export default {
     this.$store.dispatch('userNotificationSettings/get');
   },
   methods: {
+    updateAudioAlertInstanceValues() {
+      const {
+        enable_audio_alerts: audioAlert = '',
+        always_play_audio_alert: alwaysPlayAudioAlert,
+        alert_if_unread_assigned_conversation_exist:
+          alertIfUnreadConversationExist,
+        notification_tone: alertTone,
+      } = this.uiSettings;
+      DashboardAudioNotificationHelper.updateInstanceValues({
+        audioAlertType: audioAlert,
+        alwaysPlayAudioAlert: alwaysPlayAudioAlert,
+        alertIfUnreadConversationExist: alertIfUnreadConversationExist,
+        audioAlertTone: alertTone,
+      });
+    },
     notificationUISettings(uiSettings) {
       const {
         enable_audio_alerts: audioAlert = '',
@@ -69,27 +85,31 @@ export default {
       ];
       this.alertTone = alertTone || 'ding';
     },
-    handAudioAlertChange(value) {
+    async handAudioAlertChange(value) {
       this.audioAlert = value;
-      this.updateUISettings({
+      await this.updateUISettings({
         enable_audio_alerts: this.audioAlert,
       });
+      this.updateAudioAlertInstanceValues();
       useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
     },
-    handleAudioAlertConditions(id, value) {
+    async handleAudioAlertConditions(id, value) {
       if (id === 'tab_is_inactive') {
-        this.updateUISettings({
+        await this.updateUISettings({
           always_play_audio_alert: !value,
         });
+        this.updateAudioAlertInstanceValues();
       } else if (id === 'conversations_are_read') {
-        this.updateUISettings({
+        await this.updateUISettings({
           alert_if_unread_assigned_conversation_exist: value,
         });
+        this.updateAudioAlertInstanceValues();
       }
       useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
     },
-    handleAudioToneChange(value) {
+    async handleAudioToneChange(value) {
-      this.updateUISettings({ notification_tone: value });
+      await this.updateUISettings({ notification_tone: value });
+      this.updateAudioAlertInstanceValues();
       useAlert(this.$t('PROFILE_SETTINGS.FORM.API.UPDATE_SUCCESS'));
     },
   },