@webitel/ui-sdk 3.2.125 → 3.2.126

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.2.125",
+  "version": "3.2.126",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",
@@ -24,6 +24,7 @@
     "src/enums/*",
     "src/mixins/*",
     "src/scripts/*",
+    "src/validators/*",
     "src/modules/*",
     "src/plugins/*",
     "src/store/*",

package/src/components/on-demand/wt-cc-agent-status-timers/__tests__/wt-cc-agent-status-timers.spec.js

@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import WtCcAgentStatusTimers from '../wt-cc-agent-status-timers.vue';
+
+describe('Wt Cc Agent Status Timers', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCcAgentStatusTimers, {
+      props: {
+        status: {
+          online: 123,
+          pause: 123,
+          offline: 123,
+        },
+      },
+    });
+    expect(wrapper.exists())
+      .toBe(true);
+  });
+  it('renders component with empty status prop', () => {
+    const wrapper = shallowMount(WtCcAgentStatusTimers, {
+      props: { status: {} },
+    });
+    expect(wrapper.exists())
+      .toBe(true);
+  });
+});

package/src/components/on-demand/wt-cc-agent-status-timers/wt-cc-agent-status-timers.vue

@@ -0,0 +1,56 @@
+<template>
+  <article class="wt-cc-agent-status-timers">
+    <wt-indicator
+      color="disabled"
+      :text="status.offline"
+      :size="size"
+    ></wt-indicator>
+    <wt-indicator
+      color="success"
+      :text="status.online"
+      :size="size"
+    ></wt-indicator>
+    <wt-indicator
+      color="primary"
+      :text="pause"
+      :size="size"
+    ></wt-indicator>
+  </article>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  /**
+   * @description Status object
+   * @type {Object}
+   * @property {Number} offline
+   * @property {Number} online
+   * @property {Number} pause
+   * @property {Number} allowPause
+   */
+  status: {
+    type: Object,
+    required: true,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    options: ['sm', 'md'],
+  },
+});
+
+const pause = computed(() => {
+  if (!props.status.allowPause) return props.status.pause;
+  return `${props.status.pause} / ${props.status.allowPause}`;
+});
+</script>
+
+<style lang="scss" scoped>
+.wt-cc-agent-status-timers {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+</style>

package/src/composables/useRepresentableAgentPauseCause/__tests__/useRepresentableAgentPauseCause.spec.js

@@ -0,0 +1,78 @@
+import {
+  useRepresentableAgentPauseCause,
+} from '../useRepresentableAgentPauseCause';
+
+let pauseCauses = [];
+
+describe('useRepresentableAgentPauseCause', () => {
+  beforeEach(() => {
+    pauseCauses = [{ durationMin: 10, limitMin: 12 }];
+  });
+
+  it('correctly computes duration', () => {
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].duration).toBe('00:10');
+  });
+  it('isOverflow with limit = 0 returns false', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 0 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+  it('isOverflow with duration < limit returns false', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 15 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+  it('isOverflow with duration > limit returns true', () => {
+    const pauseCauses = [{ durationMin: 15, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(true);
+  });
+
+  it('isOverflow with duration = limit returns false', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].isOverflow).toBe(false);
+  });
+
+  it('correctly computes progressColor', () => {
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('primary');
+  });
+
+  it('correctly computes progressColor with duration > limit', () => {
+    const pauseCauses = [{ durationMin: 15, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('danger');
+  });
+
+  it('correctly computes progressColor with duration < limit', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 15 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('success');
+  });
+
+it('correctly computes progressColor with duration = limit', () => {
+    const pauseCauses = [{ durationMin: 10, limitMin: 10 }];
+    const {
+      representablePauseCause,
+    } = useRepresentableAgentPauseCause(pauseCauses);
+    expect(representablePauseCause.value[0].progressColor).toBe('primary');
+  });
+});

package/src/composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause.js

@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+import convertDuration from '../../scripts/convertDuration';
+
+const prettifyPauseCauseDuration = (min) => {
+  const SEC_IN_MIN = 60;
+  const secDuration = convertDuration(min * SEC_IN_MIN);
+  return secDuration.slice(0, -3);
+};
+
+const isDurationOverflow = ({ durationMin, limitMin }) => {
+  return (durationMin > limitMin) && limitMin !== 0;
+};
+
+const duration = ({ durationMin, limitMin }) => {
+  return isDurationOverflow({ durationMin, limitMin })
+    ? `-${prettifyPauseCauseDuration(durationMin - limitMin)}`
+    : prettifyPauseCauseDuration(durationMin);
+};
+
+const pauseCauseProgressColor = ({ durationMin, limitMin }) => {
+  if (isDurationOverflow({ durationMin, limitMin })) return 'danger';
+  if (durationMin <= (limitMin * 0.75)) return 'success';
+  return 'primary';
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export const useRepresentableAgentPauseCause = (pauseCauses) => {
+  const representablePauseCause = computed(() => pauseCauses.map((pauseCause) => ({
+    ...pauseCause,
+    duration: duration(pauseCause),
+    progressColor: pauseCauseProgressColor(pauseCause),
+    isOverflow: isDurationOverflow(pauseCause),
+  })));
+
+  return { representablePauseCause };
+};

package/src/locale/en/en.js

@@ -340,5 +340,12 @@ export default {
     dummy: {
       text: 'There are no records yet',
     },
+    agentStatusSelect: {
+      pauseCausePopup: {
+        title: 'Select a pause cause',
+        min: 'Min',
+        unlimited: 'Unlimited',
+      },
+    },
   },
 };

package/src/locale/ru/ru.js

@@ -338,5 +338,12 @@ export default {
     dummy: {
       text: 'Записи в разделе еще не созданы',
     },
+    agentStatusSelect: {
+      pauseCausePopup: {
+        title: 'Выберите причину паузы',
+        min: 'Мин',
+        unlimited: 'Безлимит',
+      },
+    },
   },
 };

package/src/locale/ua/ua.js

@@ -338,5 +338,12 @@ export default {
     dummy: {
       text: 'Записи у розділі ще не створені',
     },
+    agentStatusSelect: {
+      pauseCausePopup: {
+        title: 'Виберіть причину паузи',
+        min: 'Хв',
+        unlimited: 'Безліміт',
+      },
+    },
   },
 };