@webitel/ui-sdk 2.0.8 → 2.0.11-1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.8",
+  "version": "2.0.11-1",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -44,7 +44,7 @@
     "vue-observe-visibility": "^1.0.0",
     "vue-router": "^3.2.0",
     "vuejs-datepicker": "^1.6.2",
-    "webitel-sdk": "^0.1.91"
+    "webitel-sdk": "^0.1.128"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.17.0",

package/src/components/atoms/wt-button/wt-button.vue

@@ -32,7 +32,7 @@ export default {
     color: {
       type: String,
       default: 'accent',
-      options: ['accent', 'secondary', 'success', 'danger', 'transfer'],
+      options: ['accent', 'secondary', 'success', 'danger', 'transfer', 'job'],
     },
     disabled: {
       type: Boolean,
@@ -71,7 +71,7 @@ export default {
       return '';
     },
     loaderColor() {
-      if (['success', 'transfer', 'danger'].includes(this.color)) return 'main';
+      if (['success', 'transfer', 'danger', 'job'].includes(this.color)) return 'main';
       return 'contrast';
     },
   },
@@ -159,6 +159,18 @@ export default {
     }
   }
 
+  &.job {
+    color: var(--btn-light-font-color);
+    background-color: var(--btn-job-color);
+    border-color: var(--btn-job-color);
+
+    &:hover,
+    &:active {
+      background-color: var(--btn-job--hover-color);
+      border-color: var(--btn-job--hover-color);
+    }
+  }
+
   &.danger {
     color: var(--btn-light-font-color);
     background-color: var(--btn-false-color);
@@ -230,6 +242,18 @@ export default {
       }
     }
 
+    &.job {
+      color: var(--btn-job-color);
+      border-color: var(--btn-job-color);
+
+      &:hover,
+      &:active {
+        color: var(--btn-job--hover-color);
+        border-color: var(--btn-job--hover-color);
+        background-color: transparent;
+      }
+    }
+
     &.danger {
       color: var(--btn-false-color);
       border-color: var(--btn-false-color);

package/src/components/atoms/wt-icon/wt-icon.vue

@@ -29,7 +29,7 @@ export default {
     color: {
       type: String,
       default: 'default',
-      options: ['default', 'contrast', 'active', 'accent', 'disabled', 'success', 'danger', 'transfer', 'hold', 'secondary-50'],
+      options: ['default', 'contrast', 'active', 'accent', 'disabled', 'success', 'danger', 'transfer', 'job', 'hold', 'secondary-50'],
     },
     iconPrefix: {
       type: String,
@@ -97,6 +97,10 @@ svg {
     fill: var(--icon-color-transfer);
   }
 
+  &-job .wt-icon__icon {
+    fill: var(--job-color);
+  }
+
   &-hold .wt-icon__icon {
     fill: var(--icon-color-hold);
   }

package/src/components/atoms/wt-tooltip/wt-tooltip.vue

@@ -7,6 +7,7 @@
     :popper-class="[
       'wt-tooltip__popper',
        { 'wt-tooltip--contrast__popper': contrast },
+       popperClass,
      ]"
     :triggers="['hover', 'focus', 'touch']"
     class="wt-tooltip"
@@ -30,6 +31,10 @@ export default {
       type: String,
       default: 'auto',
     },
+    popperClass: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>

package/src/css/components/atoms/wt-button/_variables.scss

@@ -41,4 +41,7 @@
 
   --btn-transfer-color: var(--transfer-color);
   --btn-transfer--hover-color: var(--transfer--hover-color);
-}
+
+  --btn-job-color: var(--job-color);
+  --btn-job--hover-color: var(--job--hover-color);
+}

package/src/css/styleguide/colors/_colors.scss

@@ -9,6 +9,7 @@
 
   --_hold-color-hue: 54;
   --_transfer-color-hue: 227;
+  --_job-color-hue: 209;
 
   // DEFAULT STATES OPACITY
   --_opacity--default: 0.8;
@@ -31,6 +32,7 @@
 
   --_hold-color: var(--_hold-color-hue), 80%, 50%;
   --_transfer-color: var(--_transfer-color-hue), 80%, 50%;
+  --_job-color: var(--_job-color-hue), 96%, 57%;
 
   // MAIN COLORS
   --accent-color: hsla(var(--_accent-color), 1);
@@ -78,6 +80,9 @@
   --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
   --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
 
+  --job-color: hsla(var(--_job-color), var(--_opacity--default));
+  --job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));
+
   // SUBORDINATE COLORS
   --tag-bg-color: var(--accent-secondary-color);
 

package/src/modules/Notifications/store/NotificationsStoreModule.js

@@ -0,0 +1,185 @@
+import { ChatActions, CallActions, JobState } from 'webitel-sdk';
+import i18n from '../../../locale/i18n';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+import endChatSound from '../assets/audio/end-chat.wav';
+import newChatSound from '../assets/audio/new-chat.wav';
+import newMessageSound from '../assets/audio/new-message.wav';
+import ringingSound from '../assets/audio/ringing.mp3';
+import notificationIcon from '../assets/img/notification-icon.png';
+
+const NOTIFICATION_VISIBLE_INTERVAL = 2000;
+
+const getNotificationSound = (action) => {
+  switch (action) {
+    case ChatActions.UserInvite:
+    case JobState.Distribute:
+      return new Audio(newChatSound);
+    case ChatActions.Message:
+      return new Audio(newMessageSound);
+    case ChatActions.Close:
+      return new Audio(endChatSound);
+    case CallActions.Ringing:
+      // eslint-disable-next-line no-case-declarations
+      const audio = new Audio(ringingSound);
+      audio.loop = true;
+      return audio;
+    default:
+      return false;
+  }
+};
+
+const getCurrentTabId = () => localStorage.getItem('currentTabId');
+
+const setCurrentTabId = (value) => localStorage.setItem('currentTabId', value);
+
+export default class NotificationsStoreModule extends BaseStoreModule {
+  state = {
+    thisTabId: null, // this tab
+    currentTabId: null, // current tab is localStorage
+    broadcastChannel: null, // in order to reset the tab title with unread number
+    unreadCount: 0,
+    currentlyPlaying: false,
+  };
+
+  getters = {
+    IS_MAIN_TAB: (state) => state.thisTabId === state.currentTabId,
+    IS_SOUND_ALLOWED: (state, getters) => getters.IS_MAIN_TAB && !state.currentlyPlaying,
+  };
+
+  actions = {
+    // private
+    _SUBSCRIBE_TAB_CLOSING: (context) => {
+      window.addEventListener('storage', () => {
+        if (!getCurrentTabId()) {
+          setCurrentTabId(context.state.thisTabId);
+        }
+        context.commit('SET_CURRENT_TAB_ID', getCurrentTabId());
+      });
+    },
+
+    _SETUP_THIS_TAB_ID: (context) => {
+      const thisTabId = Math.random().toString();
+      context.commit('SET_THIS_TAB_ID', thisTabId);
+      setCurrentTabId(thisTabId);
+      context.commit('SET_CURRENT_TAB_ID', thisTabId);
+    },
+
+    _SETUP_UNREAD_COUND_BROADCAST_LISTENING: (context) => {
+      const broadcastChannel = new BroadcastChannel('WtAppNotifications');
+      broadcastChannel.addEventListener('message', ({ data }) => {
+        context.dispatch('_SET_UNREAD_COUNT', data.count);
+      });
+
+      document.documentElement.addEventListener('click', () => {
+        context.dispatch('_RESET_UNREAD_COUNT');
+      });
+      context.commit('SET_BROADCAST_CHANNEL', broadcastChannel);
+    },
+
+    _SET_UNREAD_COUNT: (context, count) => {
+      context.commit('SET_UNREAD_COUNT', count);
+      context.dispatch('_SET_TAB_TITLE');
+    },
+
+    _RESET_UNREAD_COUNT: (context) => {
+      if (context.state.unreadCount === 0) return;
+      const count = 0;
+      context.dispatch('_SET_UNREAD_COUNT', count);
+      context.state.broadcastChannel.postMessage({ count });
+    },
+
+    _SET_TAB_TITLE: (context) => {
+      const count = context.state.unreadCount;
+      const titleText = document.title.replace(/\s*\(.*?\)\s*/g, '');
+      document.title = count ? `(${count}) ${titleText}` : titleText;
+    },
+
+    _REMOVE_CURRENT_TAB_ID: () => {
+      localStorage.removeItem('currentTabId');
+    },
+
+    // public
+    INITIALIZE: (context) => Promise
+      .allSettled([
+                    context.dispatch('_SETUP_THIS_TAB_ID'),
+                    context.dispatch('_SETUP_UNREAD_COUND_BROADCAST_LISTENING'),
+                    context.dispatch('_SUBSCRIBE_TAB_CLOSING'),
+                  ]),
+
+    DESTROY: (context) => Promise
+      .allSettled([
+                    context.dispatch('STOP_SOUND'),
+                    context.dispatch('_REMOVE_CURRENT_TAB_ID'),
+                  ]),
+
+    PLAY_SOUND: (context, {
+      action,
+      sound = getNotificationSound(action),
+    }) => {
+      if (context.getters.IS_SOUND_ALLOWED
+        && !localStorage.getItem('wtIsPlaying')
+      ) {
+        const audio = sound instanceof Audio ? sound : new Audio(sound);
+        audio.addEventListener('ended', () => {
+          context.dispatch('STOP_SOUND');
+        }, { once: true });
+        audio.play();
+        localStorage.setItem('wtIsPlaying', 'true');
+        context.commit('SET_CURRENTLY_PLAYING', audio);
+      }
+    },
+
+    STOP_SOUND: (context) => {
+      const { currentlyPlaying } = context.state;
+      if (currentlyPlaying) currentlyPlaying.pause();
+      localStorage.removeItem('wtIsPlaying');
+      context.commit('RESET_CURRENTLY_PLAYING');
+    },
+
+    SEND_NOTIFICATION: (context, {
+      locale,
+      text = i18n.t(locale),
+      icon = notificationIcon,
+      interval = NOTIFICATION_VISIBLE_INTERVAL,
+    }) => {
+      const notification = new Notification(text, { icon });
+
+      notification.addEventListener('click', () => {
+        window.focus();
+      }, { once: true });
+
+      setTimeout(() => {
+        notification.close();
+      }, interval);
+    },
+
+    INCREMENT_UNREAD_COUNT: (context) => {
+      const count = context.state.unreadCount + 1;
+      context.dispatch('_SET_UNREAD_COUNT', count);
+      context.state.broadcastChannel.postMessage({ count });
+    },
+  };
+
+  mutations = {
+    SET_THIS_TAB_ID: (state, thisTabId) => {
+      state.thisTabId = thisTabId;
+    },
+
+    SET_CURRENT_TAB_ID: (state, currentTabId) => {
+      state.currentTabId = currentTabId;
+    },
+
+    SET_BROADCAST_CHANNEL: (state, channel) => {
+      state.broadcastChannel = channel;
+    },
+    SET_CURRENTLY_PLAYING: (state, sound) => {
+      state.currentlyPlaying = sound;
+    },
+    RESET_CURRENTLY_PLAYING: (state) => {
+      state.currentlyPlaying = false;
+    },
+    SET_UNREAD_COUNT: (state, count) => {
+      state.unreadCount = count;
+    },
+  };
+}

package/src/modules/Notifications/store/__tests__/NotificationsStoreModule.actions.spec.js

@@ -0,0 +1,130 @@
+import audio from '../../assets/audio/new-message.wav';
+import NotificationsStoreModule from '../NotificationsStoreModule';
+import '../../../../../tests/mocks/broadcastChannelMock';
+
+const notificationsModule = new NotificationsStoreModule().getModule();
+
+const state = {
+  thisTabId: null,
+  broadcastChannel: new BroadcastChannel('WtAppNotifications'),
+  unreadCount: 0,
+  currentlyPlaying: false,
+  wtIsPlaying: false,
+};
+
+describe('features/notifications store: actions', () => {
+  const context = {
+    dispatch: jest.fn(),
+    commit: jest.fn(),
+    getters: {
+      IS_MAIN_TAB: () => true,
+      IS_SOUND_ALLOWED: () => true,
+    },
+    rootGetters: {
+      'workspace/TASK_ON_WORKSPACE': { channelId: 'id' },
+    },
+  };
+
+  beforeEach(() => {
+    context.state = { ...state };
+    context.dispatch.mockClear();
+    context.commit.mockClear();
+  });
+
+  it('INITIALIZE action dispatches _SETUP_THIS_TAB_ID action', () => {
+    notificationsModule.actions.INITIALIZE(context);
+    expect(context.dispatch.mock.calls[0][0]).toContain('_SETUP_THIS_TAB_ID');
+  });
+
+  it('INITIALIZE action dispatches _SETUP_UNREAD_COUND_BROADCAST_LISTENING action', () => {
+    notificationsModule.actions.INITIALIZE(context);
+    expect(context.dispatch.mock.calls[1][0]).toContain('_SETUP_UNREAD_COUND_BROADCAST_LISTENING');
+  });
+
+  it('INITIALIZE action dispatches _SETUP_THIS_TAB_ID action', () => {
+    notificationsModule.actions.INITIALIZE(context);
+    expect(context.dispatch).toHaveBeenCalledWith('_SETUP_THIS_TAB_ID');
+  });
+
+  it('DESTROY action dispatches STOP_SOUND action', () => {
+    notificationsModule.actions.DESTROY(context);
+    expect(context.dispatch).toHaveBeenCalledWith('STOP_SOUND');
+  });
+
+  it('DESTROY action dispatches _REMOVE_CURRENT_TAB_ID action', () => {
+    notificationsModule.actions.DESTROY(context);
+    expect(context.dispatch).toHaveBeenCalledWith('_REMOVE_CURRENT_TAB_ID');
+  });
+
+  it('INCREMENT_UNREAD_COUNT action dispatches _SET_UNREAD_COUNT and increases unreadCount', () => {
+    notificationsModule.actions.INCREMENT_UNREAD_COUNT(context);
+    expect(context.dispatch).toHaveBeenCalledWith('_SET_UNREAD_COUNT', context.state.unreadCount + 1);
+  });
+
+  it('_SETUP_UNREAD_COUND_BROADCAST_LISTENING action commits SET_BROADCAST_CHANNEL mutation', () => {
+    notificationsModule.actions._SETUP_UNREAD_COUND_BROADCAST_LISTENING(context);
+    expect(context.commit.mock.calls[0][0]).toContain('SET_BROADCAST_CHANNEL');
+  });
+
+  it('_SUBSCRIBE_TAB_CLOSING action commits SET_CURRENT_TAB_ID mutation', async () => {
+    await notificationsModule.actions._SUBSCRIBE_TAB_CLOSING(context);
+    window.dispatchEvent(new Event('storage'));
+    expect(context.commit).toHaveBeenCalledWith('SET_CURRENT_TAB_ID', 'null');
+  });
+
+  it('PLAY_SOUND action commits SET_CURRENTLY_PLAIYNG mutation with sound', async () => {
+    const sound = new Audio(audio);
+    await notificationsModule.actions.PLAY_SOUND(context, { sound });
+    expect(context.commit).toHaveBeenCalledWith('SET_CURRENTLY_PLAYING', sound);
+  });
+
+  it('_SET_UNREAD_COUNT dispatches _SET_TAB_TITLE action', () => {
+    const unreadCount = 5;
+    notificationsModule.actions._SET_UNREAD_COUNT(context, unreadCount);
+    expect(context.dispatch).toHaveBeenCalledWith('_SET_TAB_TITLE');
+  });
+
+  it('_SETUP_THIS_TAB_ID commits SET_THIS_TAB_ID mutation', () => {
+    notificationsModule.actions._SETUP_THIS_TAB_ID(context);
+    expect(context.commit.mock.calls[0][0]).toBe('SET_THIS_TAB_ID');
+  });
+
+  it('_SETUP_THIS_TAB_ID commits SET_CURRENT_TAB_ID mutation', () => {
+    notificationsModule.actions._SETUP_THIS_TAB_ID(context);
+    expect(context.commit.mock.calls[1][0]).toBe('SET_CURRENT_TAB_ID');
+  });
+
+  it('_SET_UNREAD_COUNT action commits _SET_UNREAD_COUNT mutation with count', () => {
+    const unreadCount = 5;
+    notificationsModule.actions._SET_UNREAD_COUNT(context, unreadCount);
+    expect(context.commit).toHaveBeenCalledWith('SET_UNREAD_COUNT', unreadCount);
+  });
+
+  it('_RESET_UNREAD_COUNT action does not dispatch if unread count is 0', () => {
+    notificationsModule.actions._RESET_UNREAD_COUNT(context);
+    expect(context.dispatch).not.toHaveBeenCalledWith('_SET_UNREAD_COUNT');
+  });
+
+  it('_RESET_UNREAD_COUNT action dispatches _SET_UNREAD_COUNT passing unread count equal to 0', () => {
+    context.state.unreadCount = 1;
+    notificationsModule.actions._RESET_UNREAD_COUNT(context);
+    expect(context.dispatch).toHaveBeenCalledWith('_SET_UNREAD_COUNT', 0);
+  });
+
+  it('PLAY_SOUND action sets localStorage wtIsPlaying to true', () => {
+    const sound = new Audio(audio);
+    notificationsModule.actions.PLAY_SOUND(context, { sound });
+    expect(localStorage.getItem('wtIsPlaying')).toBeTruthy();
+  });
+
+  it('STOP_SOUND action commits RESET_CURRENTLY_PLAYING mutation', () => {
+    notificationsModule.actions.STOP_SOUND(context);
+    expect(context.commit).toHaveBeenCalledWith('RESET_CURRENTLY_PLAYING');
+  });
+
+  it('STOP_SOUND action removes localStorage wtIsPlaying', () => {
+    localStorage.setItem('wtIsPlaying', 'true');
+    notificationsModule.actions.STOP_SOUND(context);
+    expect(localStorage.getItem('wtIsPlaying')).toBeFalsy();
+  });
+});

package/src/modules/Notifications/store/__tests__/NotificationsStoreModule.mutations.spec.js

@@ -0,0 +1,49 @@
+import NotificationsStoreModule from '../NotificationsStoreModule';
+import '../../../../../tests/mocks/broadcastChannelMock';
+
+const notificationsModule = new NotificationsStoreModule().getModule();
+
+const state = {
+  thisTabId: null,
+  broadcastChannel: new BroadcastChannel('WtAppNotifications'),
+  unreadCount: 0,
+  currentlyPlaying: false,
+  wtIsPlaying: false,
+};
+
+describe('features/notifications store: mutations', () => {
+  it('SET_THIS_TAB_ID sets thisTabId to state', () => {
+    const thisTabId = 'thisTabId';
+    notificationsModule.mutations.SET_THIS_TAB_ID(state, thisTabId);
+    expect(state.thisTabId).toBe(thisTabId);
+  });
+  it('SET_CURRENT_TAB_ID sets currentTabId to state', () => {
+    const currentTabId = 'currentTabId';
+    notificationsModule.mutations.SET_CURRENT_TAB_ID(state, currentTabId);
+    expect(state.currentTabId).toBe(currentTabId);
+  });
+
+  it('SET_BROADCAST_CHANNEL sets broadcastChannel to state', () => {
+    const state = { broadcastChannel: null };
+    const channel = new BroadcastChannel('test channel');
+    notificationsModule.mutations.SET_BROADCAST_CHANNEL(state, channel);
+    expect(state.broadcastChannel).toEqual(channel);
+  });
+
+  it('SET_CURRENTLY_PLAIYNG mutation sets currentlyPlaying to state', () => {
+    const wtIsPlaying = true;
+    notificationsModule.mutations.SET_CURRENTLY_PLAYING(state, wtIsPlaying);
+    expect(state.currentlyPlaying).toBe(true);
+  });
+
+  it('RESET_CURRENTLY_PLAYING mutation sets currentlyPlaying to false in state', () => {
+    notificationsModule.mutations.RESET_CURRENTLY_PLAYING(state);
+    expect(state.currentlyPlaying).toBe(false);
+  });
+
+  it('_SET_UNREAD_COUNT mutation sets unreadCount to state', () => {
+    const unreadCount = 15;
+    notificationsModule.mutations.SET_UNREAD_COUNT(state, unreadCount);
+    expect(state.unreadCount).toEqual(unreadCount);
+  });
+});