@webitel/ui-sdk 3.2.133 → 3.2.134

package/package.json

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

package/src/components/wt-select/wt-select.vue

@@ -142,10 +142,10 @@ export default {
 
 <style lang="scss">
 @import './variables.scss';
-@import './multiselect.scss';
 </style>
 
 <style lang="scss" scoped>
+@import './multiselect.scss';
 
 .wt-select {
   width: 100%;

package/src/components/wt-status-select/wt-status-select.vue

@@ -99,36 +99,35 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-
-.wt-status-select.wt-select ::v-deep {
+.wt-status-select.wt-select {
   box-shadow: var(--elevation-5);
 
-  .multiselect {
+  :deep(.multiselect) {
     min-height: 0;
-  }
 
-  .multiselect__tags {
-    min-height: 0;
-    padding: var(--status-select-padding);
-    border: none;
-  }
+    .multiselect__tags {
+      min-height: 0;
+      padding: var(--status-select-padding);
+      border: none;
+    }
 
-  .multiselect__select {
-    top: 0;
-    right: 0;
-  }
+    .multiselect__select {
+      top: 0;
+      right: 0;
+    }
 
-  .multiselect__content-wrapper {
-    border: none;
+    .multiselect__content-wrapper {
+      border: none;
 
-    .multiselect__option {
-      min-height: 0;
-      padding: 0;
-      color: var(--status-select-option-color);
-    }
+      .multiselect__option {
+        min-height: 0;
+        padding: 0;
+        color: var(--status-select-option-color);
+      }
 
-    .multiselect__option--highlight {
-      background: var(--status-select-bg--hover-color);
+      .multiselect__option--highlight {
+        background: var(--status-select-bg--hover-color);
+      }
     }
   }
 }

package/src/components/wt-tags-input/wt-tags-input.vue

@@ -157,10 +157,11 @@ export default {
 
 <style lang="scss">
 @import './variables.scss';
-@import '../wt-select/multiselect.scss';
 </style>
 
 <style lang="scss" scoped>
+@import '../wt-select/multiselect.scss';
+
 .wt-tags-input {
   width: 100%;
 }

package/src/css/main.scss

@@ -1,7 +1,6 @@
 @import 'styleguide/styleguide';
 @import 'styleguide/display-helpers/display-helpers';
 
-
 @include wt-placeholder;
 
 :root {

package/src/modules/AgentStatusSelect/api/__tests__/agent-status.spec.js

@@ -0,0 +1,21 @@
+import installOptionsRepository from '../../../../_install/InstallOptionsRepository';
+import AgentStatusAPI from '../agent-status';
+
+/* mock SDK method api response with instance mock
+ jest.spyOn(instance) used instead of jest.mock('@/app/api/instance) because WebStorm
+  doesn't watch path changes in jest.mock()
+ */
+const patchMock = jest.fn();
+jest.spyOn(installOptionsRepository.get('instance'), 'request')
+.mockImplementation(patchMock);
+
+describe('Agent Status API', () => {
+  it('patch: correctly processes response', async () => {
+    const payload = { agentId: 1, status: 'jest', pauseCause: 'jest' };
+    const expectedData = { id: 1, status: 'jest', payload: 'jest' };
+    await AgentStatusAPI.patch(payload);
+    expect(patchMock).toHaveBeenCalled();
+    const reqData = JSON.parse(patchMock.mock.calls[0][0].data);
+    expect(reqData).toEqual(expectedData);
+  });
+});

package/src/modules/AgentStatusSelect/api/__tests__/pause-cause.spec.js

@@ -0,0 +1,29 @@
+import installOptionsRepository from '../../../../_install/InstallOptionsRepository';
+import PauseCauseAPI from '../pause-cause';
+
+const items = [{ id: 1, name: 'jest' }];
+const expectedResponse = {
+  next: false,
+  items: [{
+    id: 1,
+    name: 'jest',
+    durationMin: 0,
+    limitMin: 0,
+  }],
+};
+
+/* mock SDK method api response with instance mock
+ jest.spyOn(instance) used instead of jest.mock('@/app/api/instance) because WebStorm
+  doesn't watch path changes in jest.mock()
+ */
+const getMock = jest.fn(() => ({ items }));
+jest.spyOn(installOptionsRepository.get('instance'), 'request')
+.mockImplementation(getMock);
+
+describe('Agent Pause Cause API', () => {
+  it('getList: correctly processes response', async () => {
+    const response = await PauseCauseAPI.getList({ agentId: 0 });
+    expect(getMock).toHaveBeenCalled();
+    expect(response).toEqual(expectedResponse);
+  });
+});

package/src/modules/AgentStatusSelect/api/agent-status.js

@@ -0,0 +1,28 @@
+import { AgentServiceApiFactory } from 'webitel-sdk';
+import installOptionsRepository from '../../../_install/InstallOptionsRepository';
+
+let apiService;
+
+const createApiService = () => apiService = new AgentServiceApiFactory(
+  installOptionsRepository.get('openAPIConfig'),
+  '',
+  installOptionsRepository.get('instance'),
+);
+
+export const patchAgentStatus = async ({ agentId, status, pauseCause }) => {
+  if (!apiService) createApiService();
+  try {
+    const res = await apiService.updateAgentStatus(agentId, {
+      status,
+      id: agentId,
+      payload: pauseCause,
+    }, undefined);
+    return { success: !!res };
+  } catch (err) {
+    throw err;
+  }
+};
+
+export default {
+  patch: patchAgentStatus,
+};

package/src/modules/AgentStatusSelect/api/pause-cause.js

@@ -0,0 +1,40 @@
+import { AgentServiceApiFactory } from 'webitel-sdk';
+import { SdkListGetterApiConsumer } from 'webitel-sdk/esm2015/api-consumers';
+import installOptionsRepository from '../../../_install/InstallOptionsRepository';
+
+const _getAgentPauseCauses = (getList) => function ({
+                                                      agentId,
+                                                    } = {}) {
+  const allowChange = true;
+  const params = [agentId, allowChange];
+  return getList(params);
+};
+
+const defaultListObject = {
+  name: '',
+  durationMin: 0,
+  limitMin: 0,
+};
+
+let apiService;
+let listGetter;
+
+const createApiService = () => {
+  apiService = new AgentServiceApiFactory(
+    installOptionsRepository.get('openAPIConfig'),
+    '',
+    installOptionsRepository.get('instance'),
+  );
+  listGetter = new SdkListGetterApiConsumer(apiService.searchPauseCauseForAgent,
+    { defaultListObject })
+    .setGetListMethod(_getAgentPauseCauses);
+}
+
+export const getAgentPauseCauses = (params) => {
+  if (!apiService) createApiService();
+  return listGetter.getList(params);
+}
+
+export default {
+  getList: getAgentPauseCauses,
+};

package/src/modules/AgentStatusSelect/components/__tests__/wt-cc-agent-status-select.spec.js

@@ -0,0 +1,93 @@
+import { shallowMount } from '@vue/test-utils';
+import AgentStatus from '@webitel/ui-sdk/src/enums/AgentStatus/AgentStatus.enum';
+import { createStore } from 'vuex';
+import AgentStatusAPI from '../../api/agent-status';
+import PauseCauseAPI from '../../api/pause-cause';
+import statusSelect from '../../store/agent-status-select';
+import WtCcAgentStatusSelect from '../wt-cc-agent-status-select.vue';
+
+const pauseCauses = [{ name: 'jest1' }, { name: 'jest2' }];
+const getAgentPauseCausesMock = jest.fn(() => ({ items: pauseCauses }));
+jest.spyOn(PauseCauseAPI, 'getList').mockImplementation(getAgentPauseCausesMock);
+
+const agentStatusMock = jest.fn(() => {
+});
+jest.spyOn(AgentStatusAPI, 'patch').mockImplementation(agentStatusMock);
+
+const namespace = 'agents';
+const agent = {
+  status: '',
+  agentId: 1,
+};
+const updateAgentStatusMock = jest.fn();
+jest.spyOn(statusSelect.actions, 'UPDATE_AGENT_STATUS')
+  .mockImplementation(updateAgentStatusMock);
+
+const store = createStore({
+  modules: {
+    [namespace]: {
+      state: { agent },
+      modules: { statusSelect },
+      namespaced: true,
+    },
+  },
+});
+
+const mountOptions = {
+  global: { plugins: [store] },
+  props: {
+    agentId: agent.agentId,
+    status: agent.status,
+  },
+};
+
+describe('Wt Cc Agent Status Select', () => {
+  beforeEach(() => {
+    updateAgentStatusMock.mockClear();
+    getAgentPauseCausesMock.mockClear();
+  });
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
+    expect(wrapper.exists())
+      .toBe(true);
+  });
+  it(`at wt-status-select "change" to "online" event, triggers UPDATE_AGENT_STATUS
+   with "online" status`, () => {
+    const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
+    wrapper.findComponent({ name: 'wt-status-select' })
+      .vm.$emit('change', AgentStatus.ONLINE);
+    const reqPayload = {
+      status: AgentStatus.ONLINE, agentId: agent.agentId, payload: undefined,
+    };
+    expect(agentStatusMock).toHaveBeenCalledWith(reqPayload);
+  });
+  it('at wt-status-select "change" to "pause" event, pause causes are loaded', async () => {
+    const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
+    wrapper.findComponent({ name: 'wt-status-select' })
+      .vm.$emit('change', AgentStatus.PAUSE);
+    await wrapper.vm.$nextTick();
+    expect(getAgentPauseCausesMock).toHaveBeenCalled();
+  });
+  it(`at wt-status-select "change" to "pause" event and pause causes truthy response,
+   pause-cause-popup appears`, async () => {
+    const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
+    wrapper.findComponent({ name: 'wt-status-select' })
+      .vm.$emit('change', AgentStatus.PAUSE);
+    await wrapper.vm.$nextTick(); // load pause causes
+    await wrapper.vm.$nextTick(); // render popup
+    expect(wrapper.findComponent({ name: 'wt-cc-pause-cause-popup' }).isVisible()).toBe(true);
+  });
+  it(`at pause-cause-popup "change" event, triggers UPDATE_AGENT_STATUS
+   with "pause" status and passed pauseCause`, async () => {
+    const pauseCause = 'jest';
+    const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
+    wrapper.vm.openPauseCausePopup();
+    await wrapper.vm.$nextTick();
+    wrapper.findComponent({ name: 'wt-cc-pause-cause-popup' })
+      .vm.$emit('change', pauseCause);
+    const reqPayload = {
+      status: AgentStatus.PAUSE, agentId: agent.agentId, pauseCause,
+    };
+    expect(agentStatusMock).toHaveBeenCalledWith(reqPayload);
+  });
+});

package/src/modules/AgentStatusSelect/components/__tests__/wt-cc-pause-cause-popup.spec.js

@@ -0,0 +1,32 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import WtCcPauseCausePopup from '../_internals/wt-cc-pause-cause-popup.vue';
+
+describe('Pause cause popup', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCcPauseCausePopup);
+    expect(wrapper.exists())
+      .toBe(true);
+  });
+  it('at option input event, sets "selected" its value', () => {
+    const radioValue = 'jest';
+    const wrapper = mount(WtCcPauseCausePopup, {
+      props: { options: [radioValue] },
+    });
+    wrapper.findComponent({ name: 'wt-radio' }).vm.$emit('input');
+    expect(wrapper.vm.selected).toEqual(radioValue);
+  });
+  it('isDurationOverflow with limit = 0 returns false', () => {
+    const wrapper = shallowMount(WtCcPauseCausePopup);
+    const option = { durationMin: 10, limitMin: 0 };
+    expect(wrapper.vm.isDurationOverflow(option)).toBe(false);
+  });
+  it('at "ok" btn click, emits "change" with "selected" value', () => {
+    const selected = { name: 'jest' };
+    const expectedValue = selected.name;
+    const wrapper = shallowMount(WtCcPauseCausePopup, {
+      data: () => ({ selected }),
+    });
+    wrapper.findComponent({ name: 'wt-button' }).vm.$emit('click');
+    expect(wrapper.emitted().change[0]).toEqual([expectedValue]);
+  });
+});

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-pause-cause-popup.vue

@@ -0,0 +1,124 @@
+<template>
+  <wt-popup
+    class="wt-cc-pause-cause-popup"
+    min-width="480"
+    @close="close"
+  >
+    <template v-slot:title>
+      {{ $t('webitelUI.agentStatusSelect.pauseCausePopup.title') }}
+    </template>
+    <template v-slot:main>
+      <form @submit.prevent="setPause">
+        <ul>
+          <li
+            class="wt-cc-pause-cause-popup__option"
+            v-for="(option) of pauseCause"
+            :key="option.id"
+          >
+            <wt-radio
+              class="wt-cc-pause-cause-popup__option__radio"
+              :selected="selected.id"
+              :value="option.id"
+              :label="option.name"
+              @input="select(option)"
+            ></wt-radio>
+            <div class="wt-cc-pause-cause-popup__option__limits-wrapper">
+              <span
+                :class="{
+                    'wt-cc-pause-cause-popup__option__duration--overflow': option.isOverflow,
+                 }"
+              >
+                {{ option.duration }}
+              </span>
+              /
+              <span>{{ option.limit }}</span>
+            </div>
+          </li>
+        </ul>
+      </form>
+    </template>
+    <template v-slot:actions>
+      <wt-button
+        :disabled="!selected"
+        @click="setPause"
+      >{{ $t('reusable.ok') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="close"
+      >{{ $t('reusable.cancel') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+import { computed, ref, toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import {
+  useRepresentableAgentPauseCause,
+} from '../../../../composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause';
+
+const props = defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['change', 'close']);
+
+const options = toRef(props, 'options');
+
+const selected = ref('');
+
+const { t } = useI18n();
+
+const { representablePauseCause } = useRepresentableAgentPauseCause(options);
+
+const pauseCause = computed(() => representablePauseCause.value.map((cause) => ({
+  ...cause,
+  duration: cause.isOverflow
+    ? `-${cause.durationMin - cause.limitMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`
+    : `${cause.durationMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`,
+  limit: cause.limitMin
+    ? `${cause.limitMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`
+    : t('webitelUI.agentStatusSelect.pauseCausePopup.unlimited'),
+})));
+
+function select(option) {
+  selected.value = option;
+}
+
+function close() {
+  emit('close');
+}
+
+function setPause() {
+  emit('change', selected.value.name);
+  close();
+}
+</script>
+
+<style lang="scss" scoped>
+.wt-cc-pause-cause-popup__option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  &:not(:last-child) {
+    margin-bottom: var(--spacing-sm);
+  }
+}
+
+.wt-cc-pause-cause-popup__option__limits-wrapper {
+  & > span {
+    @extend %typo-caption;
+    padding: 6px 10px;
+  }
+
+  .wt-cc-pause-cause-popup__option__duration--overflow {
+    color: var(--false-color);
+  }
+}
+</style>

package/src/modules/AgentStatusSelect/components/wt-cc-agent-status-select.vue

@@ -0,0 +1,99 @@
+<template>
+  <article class="wt-cc-agent-status-select">
+    <wt-status-select
+      class="wt-cc-agent-status-select__status-select"
+      :status="status"
+      :status-duration="statusDuration"
+      @change="handleStatusSelectInput"
+    ></wt-status-select>
+    <pause-cause-popup
+      v-if="isPauseCausePopup"
+      :options="pauseCauses"
+      @change="handlePauseCauseInput"
+      @close="closePauseCausePopup"
+    ></pause-cause-popup>
+  </article>
+</template>
+
+<script>
+import AgentStatus from '@webitel/ui-sdk/src/enums/AgentStatus/AgentStatus.enum';
+import AgentStatusAPI from '../api/agent-status';
+import PauseCauseAPI from '../api/pause-cause';
+import PauseCausePopup from './_internals/wt-cc-pause-cause-popup.vue';
+
+export default {
+  name: 'wt-cc-agent-status-select',
+  components: { PauseCausePopup },
+  props: {
+    agentId: {
+      type: [String, Number],
+    },
+    status: {
+      // can be undefined, is agent wasn't loaded yet
+      default: AgentStatus.OFFLINE,
+    },
+    statusDuration: {
+      type: [Number, String],
+      default: 0,
+    },
+  },
+  data: () => ({
+    isPauseCausePopup: false,
+    pauseCauses: [],
+  }),
+  methods: {
+    async updateStatus({ agentId, status, pauseCause }) {
+      try {
+        await AgentStatusAPI.patch({ agentId, status, pauseCause });
+      } catch (err) {
+        throw err;
+      }
+    },
+    async handleStatusSelectInput(status) {
+      if (status === AgentStatus.PAUSE) {
+        await this.loadPauseCauses();
+        if (this.pauseCauses.length) {
+          this.openPauseCausePopup();
+          return;
+        }
+      }
+      if (status === this.status) return;
+      await this.changeStatus({ status });
+    },
+    handlePauseCauseInput(pauseCause) {
+      const status = AgentStatus.PAUSE;
+      this.changeStatus({ status, pauseCause });
+    },
+    async changeStatus({ status, pauseCause }) {
+      const statusPayload = { agentId: this.agentId, status, pauseCause };
+      try {
+        await this.updateStatus(statusPayload);
+        this.$emit('changed', statusPayload);
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    async loadPauseCauses() {
+      this.isLoaded = false;
+      try {
+        const response = await PauseCauseAPI.getList({ agentId: this.agentId });
+        this.pauseCauses = response.items;
+      } catch {
+      }
+      this.isLoaded = true;
+    },
+    openPauseCausePopup() {
+      this.isPauseCausePopup = true;
+    },
+    closePauseCausePopup() {
+      this.isPauseCausePopup = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-cc-agent-status-select__status-select {
+  max-width: 200px;
+}
+</style>