Feature: Alert widget user when message is received from agent (#571)

app/javascript/shared/helpers/AudioNotificationHelper.js

@@ -0,0 +1,9 @@
+const notificationAudio = require('shared/assets/audio/ding.mp3');
+
+export const playNotificationAudio = () => {
+  try {
+    new Audio(notificationAudio).play();
+  } catch (error) {
+    console.log(error);
+  }
+};

app/javascript/widget/store/modules/conversation.js

@@ -2,6 +2,7 @@
 import Vue from 'vue';
 import { sendMessageAPI, getConversationAPI } from 'widget/api/conversation';
 import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { playNotificationAudio } from 'shared/helpers/AudioNotificationHelper';
 import getUuid from '../../helpers/uuid';
 import DateHelper from '../../../shared/helpers/DateHelper';
 
@@ -93,6 +94,10 @@ export const actions = {
   },
 
   addMessage({ commit }, data) {
+    if (data.message_type === MESSAGE_TYPE.OUTGOING) {
+      playNotificationAudio();
+    }
+
     commit('pushMessageToConversation', data);
   },
 };

app/javascript/widget/store/modules/specs/conversation/actions.spec.js

@@ -1,7 +1,11 @@
+import { playNotificationAudio } from 'shared/helpers/AudioNotificationHelper';
 import { actions } from '../../conversation';
 import getUuid from '../../../../helpers/uuid';
 
 jest.mock('../../../../helpers/uuid');
+jest.mock('shared/helpers/AudioNotificationHelper', () => ({
+  playNotificationAudio: jest.fn(),
+}));
 
 const commit = jest.fn();
 
@@ -11,6 +15,15 @@ describe('#actions', () => {
       actions.addMessage({ commit }, { id: 1 });
       expect(commit).toBeCalledWith('pushMessageToConversation', { id: 1 });
     });
+
+    it('plays audio when agent sends a message', () => {
+      actions.addMessage({ commit }, { id: 1, message_type: 1 });
+      expect(playNotificationAudio).toBeCalled();
+      expect(commit).toBeCalledWith('pushMessageToConversation', {
+        id: 1,
+        message_type: 1,
+      });
+    });
   });
 
   describe('#sendMessage', () => {