@webitel/ui-sdk 24.12.29 → 24.12.34

package/src/css/styleguide/colors/reusable/_text-field.scss

@@ -29,9 +29,13 @@
   --wt-text-field-select-option-text-hover-color: var(--primary-on-color);
   --wt-text-field-select-option-text-selected-color: var(--primary-on-color);
 
-  --wt-text-field-select-option-wrapper-border-color: var(--dp-22-surface-color);
+  --wt-text-field-select-option-wrapper-border-color: var(
+    --dp-22-surface-color
+  );
   --wt-text-field-select-option-background-color: var(--dp-22-surface-color);
-  --wt-text-field-select-option-background-hover-color: var(--primary-light-color);
+  --wt-text-field-select-option-background-hover-color: var(
+    --primary-light-color
+  );
   --wt-text-field-select-option-background-selected-color: var(--primary-color);
 }
 

package/src/css/styleguide/fonts/_fonts.scss

@@ -1,125 +1,143 @@
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Thin.ttf')
+    format('truetype');
   font-weight: 100;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ThinItalic.ttf')
+    format('truetype');
   font-weight: 100;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLight.ttf')
+    format('truetype');
   font-weight: 200;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf')
+    format('truetype');
   font-weight: 200;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Light.ttf')
+    format('truetype');
   font-weight: 300;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-LightItalic.ttf')
+    format('truetype');
   font-weight: 300;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Regular.ttf')
+    format('truetype');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Italic.ttf')
+    format('truetype');
   font-weight: 400;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Medium.ttf')
+    format('truetype');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-MediumItalic.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-MediumItalic.ttf')
+    format('truetype');
   font-weight: 500;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf')
+    format('truetype');
   font-weight: 600;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf')
+    format('truetype');
   font-weight: 600;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Bold.ttf')
+    format('truetype');
   font-weight: 700;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-BoldItalic.ttf')
+    format('truetype');
   font-weight: 700;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBold.ttf')
+    format('truetype');
   font-weight: 800;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf')
+    format('truetype');
   font-weight: 800;
   font-style: italic;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-Black.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Black.ttf')
+    format('truetype');
   font-weight: 900;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Montserrat';
-  src: url('../../../assets/fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype');
+  src: url('../../../assets/fonts/Montserrat/Montserrat-BlackItalic.ttf')
+    format('truetype');
   font-weight: 900;
   font-style: italic;
 }

package/src/css/styleguide/spacings/_spacings.scss

@@ -12,4 +12,4 @@
   --spacing-xl: calc(var(--_spacing-multiplicator) * 5);
   --spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
   --spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
-}
+}

package/src/css/styleguide/transitions/_transitions.scss

@@ -1 +1 @@
-@import 'fade/fade';
+@import 'fade/fade';

package/src/css/styleguide/transitions/fade/_fade.scss

@@ -1,8 +1,9 @@
-
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity var(--transition);
 }
 
-.fade-enter, .fade-leave-to {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
-}
+}

package/src/css/styleguide/viewport-breakpoints/_viewport-breakpoints.scss

@@ -22,4 +22,3 @@ $media-width-lg: #{'min-width: '} $viewport-lg;
 $media-width-md: #{'max-width: '} $viewport-md;
 $media-width-sm: #{'max-width: '} $viewport-sm;
 $media-width-xs: #{'max-width: '} $viewport-xs;
-

package/src/enums/WebitelApplications/WebitelApplications.enum.js

@@ -1,11 +1,11 @@
 const WebitelApplications = Object.freeze({
-	ADMIN: 'admin',
-	AGENT: 'agent',
-	SUPERVISOR: 'supervisor',
-	HISTORY: 'history',
-	AUDIT: 'audit',
-	ANALYTICS: 'grafana',
-	CRM: 'crm',
+  ADMIN: 'admin',
+  AGENT: 'agent',
+  SUPERVISOR: 'supervisor',
+  HISTORY: 'history',
+  AUDIT: 'audit',
+  ANALYTICS: 'grafana',
+  CRM: 'crm',
 });
 
 export default WebitelApplications;

package/src/enums/index.js

@@ -1,22 +1,17 @@
-import AbstractUserStatus
-  from './AbstractUserStatus/AbstractUserStatus.enum.js';
+import AbstractUserStatus from './AbstractUserStatus/AbstractUserStatus.enum.js';
 import AgentStatus from './AgentStatus/AgentStatus.enum.js';
-import ChatGatewayProvider
-  from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
 import ComponentSize from './ComponentSize/ComponentSize.enum.js';
 import IconAction from './IconAction/IconAction.enum.js';
 import QueueType from './QueueType/QueueType.enum.js';
-import TypesExportedSettings
-  from './TypesExportedSettings/TypesExportedSettings.enum.js';
+import TypesExportedSettings from './TypesExportedSettings/TypesExportedSettings.enum.js';
 
 // Webitel Applications group
 import AdminSections from './WebitelApplications/AdminSections.enum.js';
 import AuditorSections from './WebitelApplications/AuditorSections.enum.js';
 import CrmSections from './WebitelApplications/CrmSections.enum.js';
-import SupervisorSections
-  from './WebitelApplications/SupervisorSections.enum.js';
-import WebitelApplications
-  from './WebitelApplications/WebitelApplications.enum.js';
+import SupervisorSections from './WebitelApplications/SupervisorSections.enum.js';
+import WebitelApplications from './WebitelApplications/WebitelApplications.enum.js';
 
 export {
   AbstractUserStatus,

package/src/locale/en/en.js

@@ -71,6 +71,7 @@ export default {
     more: 'More',
     read: 'Read',
     create: 'Create',
+    draggable: 'Draggable',
   },
   // yak zhe ya zaebalsya povtoriaty odni i ti sami slova!!!!
   vocabulary: {
@@ -291,7 +292,8 @@ export default {
     isRegExpMatched: 'Password must match the regular expression:',
     regExpValidator: 'This regular expression is not valid',
     domainValidator: 'Incorrect domain',
-    decimalValidator: 'Decimal precision should be no more than { count } places',
+    decimalValidator:
+      'Decimal precision should be no more than { count } places',
     integer: 'The field should contain only whole numbers',
   },
   webitelUI: {
@@ -382,7 +384,8 @@ export default {
     },
     deleteConfirmationPopup: {
       title: 'Confirm deletion',
-      askingAlert: 'Are you sure you want to delete {subject}? This action cannot be undone.',
+      askingAlert:
+        'Are you sure you want to delete {subject}? This action cannot be undone.',
       tableAskingAlert:
         'Are you sure you want\n to delete {count} record? | Are you sure you want\n to delete {count} records?',
       deleteAll: 'ALL',

package/src/locale/ru/ru.js

@@ -71,6 +71,7 @@ export default {
     more: 'Больше',
     read: 'Читать',
     create: 'Создать',
+    draggable: 'Перетащить',
   },
   vocabulary: {
     language: 'Язык',
@@ -289,7 +290,8 @@ export default {
     isRegExpMatched: 'Пароль должен соответствовать регулярному выражению:',
     regExpValidator: 'Не правильное регулярное выражение',
     domainValidator: 'Неправильный домен',
-    decimalValidator: 'Количество десятичных знаков не должно быть больше { count }',
+    decimalValidator:
+      'Количество десятичных знаков не должно быть больше { count }',
     integer: 'Поле должно содержать только целые числа',
   },
   webitelUI: {
@@ -380,7 +382,8 @@ export default {
     },
     deleteConfirmationPopup: {
       title: 'Подтвердите удаление',
-      askingAlert: 'Вы уверены, что хотите удалить {subject}? Это действие не может быть отменено.',
+      askingAlert:
+        'Вы уверены, что хотите удалить {subject}? Это действие не может быть отменено.',
       tableAskingAlert:
         'Вы уверенны, что хотите\n удалить {count} запись? | Вы уверенны, что хотите\n удалить {count} записей?',
       deleteAll: 'ВСЕ',
@@ -402,7 +405,8 @@ export default {
       },
       statusSelectErrorPopup: {
         title: 'Внимание',
-        message: 'Лимит операторов в паузе превышен. Перерыв сейчас недоступен.',
+        message:
+          'Лимит операторов в паузе превышен. Перерыв сейчас недоступен.',
       },
     },
     saveFailedPopup: {

package/src/locale/ua/ua.js

@@ -72,6 +72,7 @@ export default {
     more: 'Більше',
     read: 'Читати',
     create: 'Створити',
+    draggable: 'Перетягнути',
   },
   vocabulary: {
     language: 'Мова',
@@ -289,7 +290,8 @@ export default {
     isRegExpMatched: 'Пароль має відповідати регулярному виразу:',
     regExpValidator: 'Не правильний регулярний вираз',
     domainValidator: 'Невірний домен',
-    decimalValidator: 'Кількість десяткових знаків не повинна бути більше { count }',
+    decimalValidator:
+      'Кількість десяткових знаків не повинна бути більше { count }',
     integer: 'Поле повинно містити лише цілі числа',
   },
   webitelUI: {
@@ -380,7 +382,8 @@ export default {
     },
     deleteConfirmationPopup: {
       title: 'Підтвердіть видалення',
-      askingAlert: 'Ви впевнені, що хочете видалити {subject}? Ця дія не може бути скасована.',
+      askingAlert:
+        'Ви впевнені, що хочете видалити {subject}? Ця дія не може бути скасована.',
       tableAskingAlert:
         'Ви впевнені, що хочете\n видалити {count} запис? | Ви впевнені, що хочете\n видалити {count} записів?',
       deleteAll: 'ВСІ',
@@ -402,7 +405,8 @@ export default {
       },
       statusSelectErrorPopup: {
         title: 'Увага',
-        message: 'Ліміт операторів в паузі перевищено. Перерва наразі недоступна.',
+        message:
+          'Ліміт операторів в паузі перевищено. Перерва наразі недоступна.',
       },
     },
     saveFailedPopup: {

package/src/mixins/dataFilterMixins/__tests__/apiFilterMixin.spec.js

@@ -19,7 +19,8 @@ describe('API filter mixin', () => {
   };
 
   beforeEach(() => {
-    if (Object.keys(router.currentRoute.value.query).length) router.replace({ query: null });
+    if (Object.keys(router.currentRoute.value.query).length)
+      router.replace({ query: null });
   });
 
   it('Correctly sets value from $route query', async () => {

package/src/mixins/dataFilterMixins/apiFilterMixin.js

@@ -12,7 +12,9 @@ export default {
 
   methods: {
     async restoreValue(idList) {
-      this.value = idList?.length ? await this.fetchSelected(idList) : this.defaultValue;
+      this.value = idList?.length
+        ? await this.fetchSelected(idList)
+        : this.defaultValue;
     },
 
     async fetchSelected(idList) {

package/src/mixins/dataFilterMixins/baseFilterMixin/baseFilterMixin.js

@@ -22,7 +22,8 @@ export default {
 
   methods: {
     restore({ filterQuery }) {
-      const value = this.getValueFromQuery({ filterQuery }) || this.defaultValue;
+      const value =
+        this.getValueFromQuery({ filterQuery }) || this.defaultValue;
       this.restoreValue(value);
     },
   },

package/src/mixins/dataFilterMixins/enumFilterMixin.js

@@ -24,7 +24,8 @@ export default {
         );
       } else {
         this.value =
-          this.options.find((option) => option[this.storedProp] === value) || this.defaultValue;
+          this.options.find((option) => option[this.storedProp] === value) ||
+          this.defaultValue;
       }
     },
   },

package/src/mixins/dataFilterMixins/paginationFilterMixin.js

@@ -18,7 +18,10 @@ export default {
   watch: {
     '$route.query': {
       handler(newValue, oldValue) {
-        if (newValue.page !== oldValue.page || newValue.size !== oldValue.size) {
+        if (
+          newValue.page !== oldValue.page ||
+          newValue.size !== oldValue.size
+        ) {
           this.restore();
         }
       },

package/src/mixins/dataFilterMixins/sortFilterMixin.js

@@ -41,7 +41,8 @@ const queryToSortAdapter = (order) => {
   }
 };
 
-const encodeSortQuery = ({ column, order }) => `${sortToQueryAdapter(order)}${column.field}`;
+const encodeSortQuery = ({ column, order }) =>
+  `${sortToQueryAdapter(order)}${column.field}`;
 
 const decodeSortQuery = ({ value }) => {
   const sort = queryToSortAdapter(value.slice(0, 1));

package/src/mixins/validationMixin/useValidation.js

@@ -1,7 +1,10 @@
 import { computed, isReactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-export function useValidation({ v: inputV, customValidators: inputCustomValidators }) {
+export function useValidation({
+  v: inputV,
+  customValidators: inputCustomValidators,
+}) {
   const { t } = useI18n();
 
   // support vue options api, where v is a reactive, not ref
@@ -14,19 +17,24 @@ export function useValidation({ v: inputV, customValidators: inputCustomValidato
   }
   // end
 
-  const isValidation = computed(() => !!v && !!v.value && !!Object.keys(v.value).length);
+  const isValidation = computed(
+    () => !!v && !!v.value && !!Object.keys(v.value).length,
+  );
   const invalid = computed(() => isValidation.value && v.value.$error);
 
   const validationText = computed(() => {
     let validationText = '';
     if (isValidation.value && invalid.value) {
       if (v.value.required?.$invalid) validationText = t('validation.required');
-      else if (v.value.numeric?.$invalid) validationText = t('validation.numeric');
+      else if (v.value.numeric?.$invalid)
+        validationText = t('validation.numeric');
       else if (v.value.email?.$invalid) validationText = t('validation.email');
       else if (v.value.gatewayHostValidator?.$invalid)
         validationText = t('validation.gatewayHostValidator');
-      else if (v.value.ipValidator?.$invalid) validationText = t('validation.ipValidator');
-      else if (v.value.macValidator?.$invalid) validationText = t('validation.macValidator');
+      else if (v.value.ipValidator?.$invalid)
+        validationText = t('validation.ipValidator');
+      else if (v.value.macValidator?.$invalid)
+        validationText = t('validation.macValidator');
       else if (v.value.minValue?.$invalid)
         validationText = `${t('validation.minValue')} ${v.value.minValue.$params.min}`;
       else if (v.value.maxValue?.$invalid)
@@ -38,14 +46,16 @@ export function useValidation({ v: inputV, customValidators: inputCustomValidato
       else if (v.value.url?.$invalid) validationText = `${t('validation.url')}`;
       else if (v.value.regExpValidator?.$invalid)
         validationText = `${t('validation.regExpValidator')}`;
-      else if (v.value.sameAs?.$invalid) validationText = `${t('validation.sameAs')}`;
+      else if (v.value.sameAs?.$invalid)
+        validationText = `${t('validation.sameAs')}`;
       else if (v.value.domainValidator?.$invalid)
         validationText = `${t('validation.domainValidator')}`;
       else if (v.value.decimalValidator?.$invalid)
         validationText = `${t('validation.decimalValidator')} ${v.value.decimalValidator.$params.count}`;
       else if (v.value.websocketValidator?.$invalid)
         validationText = `${t('validation.websocketValidator')}`;
-      else if (v.value.integer?.$invalid) validationText = `${t('validation.integer')}`;
+      else if (v.value.integer?.$invalid)
+        validationText = `${t('validation.integer')}`;
       else if (v.value.regex?.$invalid)
         validationText =
           v.value.regex?.$message ||

package/src/mixins/validationMixin/validationMixin.js

@@ -19,13 +19,18 @@ export default {
     validationText() {
       let validationText = '';
       if (this.isValidation && this.invalid) {
-        if (this.v.required?.$invalid) validationText = this.$t('validation.required');
-        else if (this.v.numeric?.$invalid) validationText = this.$t('validation.numeric');
-        else if (this.v.email?.$invalid) validationText = this.$t('validation.email');
+        if (this.v.required?.$invalid)
+          validationText = this.$t('validation.required');
+        else if (this.v.numeric?.$invalid)
+          validationText = this.$t('validation.numeric');
+        else if (this.v.email?.$invalid)
+          validationText = this.$t('validation.email');
         else if (this.v.gatewayHostValidator?.$invalid)
           validationText = this.$t('validation.gatewayHostValidator');
-        else if (this.v.ipValidator?.$invalid) validationText = this.$t('validation.ipValidator');
-        else if (this.v.macValidator?.$invalid) validationText = this.$t('validation.macValidator');
+        else if (this.v.ipValidator?.$invalid)
+          validationText = this.$t('validation.ipValidator');
+        else if (this.v.macValidator?.$invalid)
+          validationText = this.$t('validation.macValidator');
         else if (this.v.minValue?.$invalid)
           validationText = `${this.$t('validation.minValue')} ${this.v.minValue.$params.min}`;
         else if (this.v.maxValue?.$invalid)
@@ -34,17 +39,20 @@ export default {
           validationText = this.$t('validation.sipAccountValidator');
         else if (this.v.minLength?.$invalid)
           validationText = `${this.$t('validation.minLength')} ${this.v.minLength.$params.min}`;
-        else if (this.v.url?.$invalid) validationText = `${this.$t('validation.url')}`;
+        else if (this.v.url?.$invalid)
+          validationText = `${this.$t('validation.url')}`;
         else if (this.v.regExpValidator?.$invalid)
           validationText = `${this.$t('validation.regExpValidator')}`;
-        else if (this.v.sameAs?.$invalid) validationText = `${this.$t('validation.sameAs')}`;
+        else if (this.v.sameAs?.$invalid)
+          validationText = `${this.$t('validation.sameAs')}`;
         else if (this.v.domainValidator?.$invalid)
           validationText = `${this.$t('validation.domainValidator')}`;
         else if (this.v.decimalValidator?.$invalid)
           validationText = `${this.$t('validation.decimalValidator')} ${this.v.decimalValidator.$params.count}`;
         else if (this.v.websocketValidator?.$invalid)
           validationText = `${this.$t('validation.websocketValidator')}`;
-        else if (this.v.integer?.$invalid) validationText = `${this.$t('validation.integer')}`;
+        else if (this.v.integer?.$invalid)
+          validationText = `${this.$t('validation.integer')}`;
         else if (this.v.isRegExpMatched?.$invalid)
           validationText =
             this.v.isRegExpMatched?.$params?.errorMessage ||

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

@@ -19,7 +19,10 @@ const PauseCauseAPIFactory = ({ instance, OpenAPIConfig }) => {
 
     const allowChange = true;
     try {
-      const response = await service.searchPauseCauseForAgent(agentId, allowChange);
+      const response = await service.searchPauseCauseForAgent(
+        agentId,
+        allowChange,
+      );
       const { items, next } = applyTransform(response.data, [
         snakeToCamel(),
         merge(getDefaultGetListResponse()),

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

@@ -14,7 +14,9 @@ vi.spyOn(PauseCauseAPIFactory, 'default').mockImplementation(() => ({
 
 const agentStatusMock = vi.fn(() => {});
 // https://stackoverflow.com/a/63727813
-vi.spyOn(AgentStatusAPIFactory, 'default').mockImplementation(() => ({ patch: agentStatusMock }));
+vi.spyOn(AgentStatusAPIFactory, 'default').mockImplementation(() => ({
+  patch: agentStatusMock,
+}));
 
 const agent = {
   status: '',
@@ -43,7 +45,9 @@ describe('Wt Cc Agent Status Select', () => {
   it(`at wt-status-select "change" to "online" event, triggers agent status patch
    with "online" status`, () => {
     const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
-    wrapper.findComponent({ name: 'wt-status-select' }).vm.$emit('change', AgentStatus.ONLINE);
+    wrapper
+      .findComponent({ name: 'wt-status-select' })
+      .vm.$emit('change', AgentStatus.ONLINE);
     const reqPayload = {
       status: AgentStatus.ONLINE,
       agentId: agent.agentId,
@@ -53,18 +57,24 @@ describe('Wt Cc Agent Status Select', () => {
   });
   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);
+    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 = mount(WtCcAgentStatusSelect, mountOptions);
-    wrapper.findComponent({ name: 'wt-status-select' }).vm.$emit('change', AgentStatus.PAUSE);
+    wrapper
+      .findComponent({ name: 'wt-status-select' })
+      .vm.$emit('change', AgentStatus.PAUSE);
     await wrapper.vm.$nextTick(); // load pause causes
     await wrapper.vm.$nextTick();
     await wrapper.vm.$nextTick(); // render popup
-    expect(wrapper.findComponent({ name: 'pause-cause-popup' }).isVisible()).toBe(true);
+    expect(
+      wrapper.findComponent({ name: 'pause-cause-popup' }).isVisible(),
+    ).toBe(true);
   });
   it(`at pause-cause-popup "change" event, triggers patch agent status
    with "pause" status and passed pauseCause`, async () => {
@@ -73,7 +83,9 @@ describe('Wt Cc Agent Status Select', () => {
     wrapper.vm.openPauseCausePopup();
     await wrapper.vm.$nextTick();
     await wrapper.vm.$nextTick();
-    wrapper.findComponent({ name: 'pause-cause-popup' }).vm.$emit('change', pauseCause);
+    wrapper
+      .findComponent({ name: 'pause-cause-popup' })
+      .vm.$emit('change', pauseCause);
     const reqPayload = {
       status: AgentStatus.PAUSE,
       agentId: agent.agentId,

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

@@ -11,7 +11,7 @@
       <form @submit.prevent="setPause">
         <ul>
           <li
-            v-for="(option) of pauseCause"
+            v-for="option of pauseCause"
             :key="option.id"
             class="wt-cc-pause-cause-popup-option"
           >
@@ -25,7 +25,8 @@
             <div class="wt-cc-pause-cause-popup-option__limits-wrapper">
               <span
                 :class="{
-                  'wt-cc-pause-cause-popup-option__duration--overflow': option.isOverflow,
+                  'wt-cc-pause-cause-popup-option__duration--overflow':
+                    option.isOverflow,
                 }"
               >
                 {{ option.duration }}

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

@@ -107,8 +107,11 @@ function handleClosed(event) {
   // sometimes we want to choose 'pause' repeatedly
   // but 'change' event from wt-status-select can't give us the same value,
   // in this case we have to use value from 'closed' event to choose 'pause' status
-  if ((event.value === chosenStatus.value || !chosenStatus.value) // if closed status the same as chosen, or chosen status is empty
-    && event.value === AgentStatus.PAUSE) { // and only for 'pause' status
+  if (
+    (event.value === chosenStatus.value || !chosenStatus.value) && // if closed status the same as chosen, or chosen status is empty
+    event.value === AgentStatus.PAUSE
+  ) {
+    // and only for 'pause' status
     handleStatus(event.value);
   }
 }