Merge pull request #69 from webitel/feature/call

feat: testing jssip [WTEL-3997]

package.json

@@ -13,13 +13,14 @@
   "dependencies": {
     "@egjs/flicking-plugins": "^4.5.0",
     "@egjs/vue-flicking": "^4.10.4",
-    "@webitel/ui-sdk": "^2.0.10",
+    "@webitel/ui-sdk": "^2.0.32",
     "autosize": "^5.0.0",
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "deepmerge": "^4.2.2",
     "emoji-picker-element": "^1.11.3",
     "insert-text-at-cursor": "^0.3.0",
+    "jssip": "^3.10.0",
     "linkifyjs": "^3.0.0-beta.3",
     "portal-vue": "^1.5.1",
     "uuid": "^8.3.2",

src/app/assets/icons/sprite/index.js

@@ -16,3 +16,8 @@ import './wt-omni-widget-time-zone.svg';
 import './wt-omni-widget-arrow-left.svg';
 import './wt-omni-widget-arrow-right.svg';
 import './wt-omni-widget-open.svg';
+import './wt-omni-widget-call.svg';
+import './wt-omni-widget-call--filled.svg';
+import './wt-omni-widget-call-decline.svg';
+import './wt-omni-widget-mic.svg';
+import './wt-omni-widget-mic-off.svg';

src/app/components/wt-omni-widget-button/wt-omni-widget-button.vue

@@ -19,7 +19,7 @@
     @click.prevent="$emit('click', type)"
   >
     <wt-icon
-      :icon="type"
+      :icon="icon"
       color="contrast"
       icon-prefix="wt-omni-widget"
     ></wt-icon>
@@ -33,12 +33,20 @@ export default {
     type: {
       type: String,
       required: true,
-      options: ['chat', 'appointment', 'email', 'whatsapp', 'messenger', 'viber', 'telegram', 'open'],
+      options: ['chat', 'call', 'appointment', 'email', 'whatsapp', 'messenger', 'viber', 'telegram', 'open'],
     },
     url: {
       type: String,
     },
   },
+  computed: {
+    icon() {
+      switch (this.type) {
+        case 'call': return 'call--filled';
+        default: return this.type;
+      }
+    },
+  },
 };
 </script>
 

src/app/components/wt-omni-widget-button/wt-omni-widget-buttons-menu.vue

@@ -95,9 +95,16 @@ export default {
         },
       ] : [];
 
+      const callBtn = this.config.call ? [
+        {
+          type: ButtonMenuType.CALL,
+        },
+      ] : [];
+
       const buttons = [
         ...chatBtn,
         ...appointmentBtn,
+        ...callBtn,
         ...alternativeChannelButtons,
       ];
 

src/app/components/wt-omni-widget-window/wt-omni-widget-window-header/wt-omni-widget-window-header.vue

@@ -13,6 +13,7 @@
     >v{{ buildInfo.release }}--{{ buildInfo.build }}
     </div>
     <wt-icon-btn
+      v-show="showCloseBtn"
       icon="close"
       size="sm"
       @click="$emit('close')"
@@ -21,6 +22,8 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+import SessionState from '../../../../modules/call/enums/SessionState.enum';
 import WebitelLogo from '../../../assets/img/logo.svg';
 
 export default {
@@ -33,10 +36,16 @@ export default {
     },
   }),
   computed: {
+    ...mapState('call', {
+      callSessionState: (state) => state.sessionState,
+    }),
     logoUrl() {
       const { logoUrl } = this.config.view;
       return logoUrl || WebitelLogo;
     },
+    showCloseBtn() {
+      return this.callSessionState === SessionState.IDLE;
+    },
   },
   methods: {
     showVersionInfo() {

src/app/components/wt-omni-widget-window/wt-omni-widget-window.vue

@@ -4,12 +4,16 @@
     <wt-omni-widget-header
       @close="$emit('close')"
     ></wt-omni-widget-header>
-    <chat-wrapper :namespace="namespace"></chat-wrapper>
+    <component
+      :is="`${channel}-wrapper`"
+      :namespace="namespace"
+    ></component>
   </section>
 </template>
 
 <script>
 import ChatWrapper from '../../../modules/chat/components/wt-omni-widget-chat-wrapper.vue';
+import CallWrapper from '../../../modules/call/components/wt-omni-widget-call-wrapper.vue';
 import WidgetChannel from '../../enums/WidgetChannel.enum';
 import WtOmniWidgetHeader from './wt-omni-widget-window-header/wt-omni-widget-window-header.vue';
 
@@ -18,14 +22,14 @@ export default {
   components: {
     WtOmniWidgetHeader,
     ChatWrapper,
+    CallWrapper,
   },
   props: {
     channel: {
       type: String, // WidgetChannel.enum
       required: true,
     },
   },
-  data: () => ({}),
   computed: {
     namespace() {
       switch (this.channel) {

src/app/locale/en/en.js

@@ -53,6 +53,17 @@ export default {
       store_sql_member_appointment_cancel_app_error: 'Cancelation error',
     },
   },
+  call: {
+    startView: {
+      title: 'Online Call',
+      description: 'You can call us right from here!',
+    },
+    ringingView: {
+      title: 'Ringing',
+      description: 'We are looking for an agent. Please wait.',
+
+    },
+  },
   errors: {
     fileTooLarge: 'File "{file}" is too large! Maximum size is {maxSize} Mb',
   },

src/app/locale/ru/ru.js

@@ -53,6 +53,17 @@ export default {
       store_sql_member_appointment_cancel_app_error: 'Ошибка отмены',
     },
   },
+  call: {
+    startView: {
+      title: 'Онлайн-звонок',
+      description: 'Вы можете позвонить нам прямо отсюда!',
+    },
+    ringingView: {
+      title: 'Звоним',
+      description: 'Ищем оператора. Пожалуйста, подождите.',
+
+    },
+  },
   errors: {
     fileTooLarge: 'Файл "{file}" слишком большой! Максимальный размер файла: {maxSize} Мб',
   },

src/app/locale/ua/ua.js

@@ -53,6 +53,17 @@ export default {
       store_sql_member_appointment_cancel_app_error: 'Помилка скасування',
     },
   },
+  call: {
+    startView: {
+      title: 'Онлайн-дзвінок',
+      description: 'Ви можете подзвонити нам прямо звідси! ',
+    },
+    ringingView: {
+      title: 'Телефоную',
+      description: 'Шукаємо оператора. Будь ласка, зачекайте.',
+
+    },
+  },
   errors: {
     fileTooLarge: 'Файл "{file}" завеликий! Максимальний розмір файлу: {maxSize} Мб',
   },

src/app/store/index.js

@@ -4,6 +4,7 @@ import Vuex from 'vuex';
 // modules
 import appointment from '../../modules/appointment/store/appointment';
 import chat from '../../modules/chat/store/chat';
+import call from '../../modules/call/store/call';
 import notifications from '../../modules/notifications/notifications';
 
 Vue.use(Vuex);
@@ -41,6 +42,7 @@ export default new Vuex.Store({
   modules: {
     appointment,
     chat,
+    call,
     notifications,
   },
 });

src/app/webitel-ui/store/ReactiveNowStoreModule/ReactiveNowStoreModule.js

@@ -0,0 +1,27 @@
+import BaseStoreModule from '@webitel/ui-sdk/src/store/BaseStoreModules/BaseStoreModule';
+
+let interval = null;
+
+export default class ReactiveNowStoreModule extends BaseStoreModule {
+  state = {
+    now: Date.now(),
+  };
+
+  actions = {
+    SET_NOW_WATCHER: (context) => {
+      interval = setInterval(() => {
+        context.commit('UPDATE_NOW');
+      }, 1000);
+    },
+
+    CLEAR_NOW_WATCHER: () => {
+      clearInterval(interval);
+    },
+  };
+
+  mutations = {
+    UPDATE_NOW: (state) => {
+      state.now = Date.now();
+    },
+  };
+}