feat: Add settings for audio alert notifications (#2415)

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

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

@@ -28,7 +28,9 @@
       "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"
+        "NONE": "None",
+        "ASSIGNED": "Assigned Conversations",
+        "ALL_CONVERSATIONS": "All Conversations"
       },
       "EMAIL_NOTIFICATIONS_SECTION": {
         "TITLE": "Email Notifications",

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

@@ -12,16 +12,45 @@
       <div class="columns small-9">
         <div>
           <input
-            id="audio_enable_alert"
+            id="audio_enable_alert_none"
             v-model="enableAudioAlerts"
             class="notification--checkbox"
-            type="checkbox"
+            type="radio"
+            value="none"
             @input="handleAudioInput"
           />
-          <label for="audio_enable_alert">
+          <label for="audio_enable_alert_none">
+            {{ $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.NONE') }}
+          </label>
+        </div>
+        <div>
+          <input
+            id="audio_enable_alert_mine"
+            v-model="enableAudioAlerts"
+            class="notification--checkbox"
+            type="radio"
+            value="mine"
+            @input="handleAudioInput"
+          />
+          <label for="audio_enable_alert_mine">
+            {{
+              $t('PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ASSIGNED')
+            }}
+          </label>
+        </div>
+        <div>
+          <input
+            id="audio_enable_alert_all"
+            v-model="enableAudioAlerts"
+            class="notification--checkbox"
+            type="radio"
+            value="all"
+            @input="handleAudioInput"
+          />
+          <label for="audio_enable_alert_all">
             {{
               $t(
-                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ENABLE_AUDIO'
+                'PROFILE_SETTINGS.FORM.AUDIO_NOTIFICATIONS_SECTION.ALL_CONVERSATIONS'
               )
             }}
           </label>
@@ -315,7 +344,7 @@ export default {
       this.updateNotificationSettings();
     },
     handleAudioInput(e) {
-      this.enableAudioAlerts = e.target.checked;
+      this.enableAudioAlerts = e.target.value;
       this.updateUISettings({
         enable_audio_alerts: this.enableAudioAlerts,
       });

app/javascript/dashboard/store/modules/conversations/getters.js

@@ -63,6 +63,9 @@ const getters = {
   },
   getChatStatusFilter: ({ chatStatusFilter }) => chatStatusFilter,
   getSelectedInbox: ({ currentInbox }) => currentInbox,
+  getConversationById: _state => conversationId => {
+    return _state.allConversations.find(value => value.id === conversationId);
+  },
 };
 
 export default getters;

app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js

@@ -102,4 +102,16 @@ describe('#getters', () => {
       ]);
     });
   });
+  describe('#getConversationById', () => {
+    it('get conversations based on id', () => {
+      const state = {
+        allConversations: [
+          {
+            id: 1,
+          },
+        ],
+      };
+      expect(getters.getConversationById(state)(1)).toEqual({ id: 1 });
+    });
+  });
 });