@webitel/ui-sdk 2.0.7 → 2.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "2.0.7",
+  "version": "2.0.10",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

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-tooltip/_variables.scss

@@ -13,6 +13,8 @@
 // cause we need to set styles to element somewhere in the HTML, not inside .wt-tooltip scope
 .wt-tooltip__popper .v-popper__inner {
   @extend %typo-body-1;
+  max-width: 80vw;
+  max-height: 80vh;
   padding: var(--tooltip-padding);
   color: var(--tooltip-light-text-color);
   background: var(--tooltip-light-bg-color);

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

@@ -0,0 +1,184 @@
+import { ChatActions, CallActions } 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:
+      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__/notifications.spec.js

@@ -0,0 +1,139 @@
+import { ChatActions } from 'webitel-sdk';
+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,
+};
+
+const chat = { id: '1', messages: [{ member: { name: 'name' } }] };
+
+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 commits _SETUP_THIS_TAB_ID action', () => {
+    notificationsModule.actions.INITIALIZE(context);
+    expect(context.dispatch).toHaveBeenCalledWith('_SETUP_THIS_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('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('_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();
+  });
+});
+
+describe('features/notifications store: mutations', () => {
+  it('SET_THIS_TAB_ID sets window id to state', () => {
+    const thisTabId = 'thisTabId';
+    notificationsModule.mutations.SET_THIS_TAB_ID(state, thisTabId);
+    expect(state.thisTabId).toBe(thisTabId);
+  });
+
+  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);
+  });
+});