@webitel/ui-sdk 23.12.3 → 23.12.5-1

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

@@ -1,8 +1,11 @@
 <template>
-  <div class="wt-timepicker" :class="{'wt-timepicker--invalid': invalid}">
+  <div
+    class="wt-timepicker"
+    :class="{'wt-timepicker--invalid': invalid}"
+  >
     <wt-label
-      v-bind="labelProps"
       v-if="label"
+      v-bind="labelProps"
       :invalid="invalid"
     >
       {{ `${label} (${format})` }}
@@ -13,36 +16,37 @@
         :value="hour"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.hour') "
-        :maxValue="dateMode ? null : 23"
+        :max-value="dateMode ? null : 23"
         :disabled="disabled"
         hide-input-info
         @input="hour = $event"
-      ></wt-time-input>
+      />
       <wt-time-input
         v-if="isMin"
         :value="min"
         :v="v"
         :label="label ? null : $t('webitelUI.timepicker.min')"
-        :maxValue="59"
+        :max-value="59"
         :disabled="disabled"
         hide-input-info
         @input="min = $event"
-      ></wt-time-input>
+      />
       <wt-time-input
         v-if="isSec"
         :value="sec"
         :v="v"
-        :label="label ? null :  $t('webitelUI.timepicker.sec')"
-        :maxValue="59"
+        :label="label ? null : $t('webitelUI.timepicker.sec')"
+        :max-value="59"
         :disabled="disabled"
         hide-input-info
         @input="sec = $event"
-      ></wt-time-input>
+      />
     </div>
     <wt-input-info
       v-if="isValidation"
       :invalid="invalid"
-    >{{ validationText }}
+    >
+      {{ validationText }}
     </wt-input-info>
   </div>
 </template>
@@ -54,8 +58,12 @@ const SEC_IN_HOUR = 60 * 60;
 const SEC_IN_MIN = 60;
 
 export default {
-  name: 'wt-timepicker',
+  name: 'WtTimepicker',
   mixins: [validationMixin],
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
   props: {
     value: {
       type: [String, Number],
@@ -82,10 +90,6 @@ export default {
       description: 'Object with props, passed down to wt-label as props',
     },
   },
-  model: {
-    prop: 'value',
-    event: 'input',
-  },
 
   computed: {
     isHour() {
@@ -153,18 +157,6 @@ export default {
   flex-direction: column;
 }
 
-.wt-label {
-  .wt-timepicker:hover &,
-  .wt-timepicker:focus-within & {
-    color: var(--form-label--hover-color);
-  }
-
-  .wt-timepicker--invalid:hover &,
-  .wt-timepicker--invalid:focus-within & {
-    color: var(--label--invalid-color);
-  }
-}
-
 .wt-timepicker__wrapper {
   display: flex;
 }

package/src/components/wt-tooltip/__tests__/WtTooltip.spec.js

@@ -17,14 +17,4 @@ describe('WtTooltip', () => {
     });
     expect(wrapper.find('.wt-tooltip').text()).toEqual(content);
   });
-
-  it('changed tooltip color, if prop is passed', () => {
-    const wrapper = shallowMount(WtTooltip, {
-      props: {
-        contrast: true,
-      },
-    });
-    expect(wrapper.find('.wt-tooltip').classes())
-      .toContain('wt-tooltip--contrast');
-  });
 });

package/src/components/wt-tooltip/_internals/wt-tooltip-floating.vue

@@ -1,9 +1,9 @@
 <template>
   <aside
-    class="wt-tooltip-floating"
     ref="floating"
+    class="wt-tooltip-floating"
   >
-    <slot></slot>
+    <slot />
   </aside>
 </template>
 

package/src/components/wt-tooltip/_variables.scss

@@ -2,10 +2,8 @@
 :root {
   --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
 
-  --tooltip-light-text-color: var(--text-primary-color);
-  --tooltip-light-bg-color: var(--main-color);
-  --tooltip-dark-text-color: var(--text-contrast-color);
-  --tooltip-dark-bg-color: var(--contrast-color);
+  --wt-tooltip-text-color: var(--text-main-color);
+  --wt-tooltip-background-color: var(--dp-24-surface-color);
 
   --tooltip-elevation: var(--elevation-10);
 }

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

@@ -1,29 +1,28 @@
 <template>
   <div
     :class="{
-      'wt-tooltip--contrast': contrast,
       'wt-tooltip--visible': isVisible,
-     }"
+    }"
     class="wt-tooltip"
   >
     <div
       ref="activator"
       class="wt-tooltip__activator"
     >
-      <slot name="activator"></slot>
+      <slot name="activator" />
     </div>
     <wt-tooltip-floating
       v-if="isVisible"
       ref="floating"
-      class="wt-tooltip__floating"
       v-clickaway="hideTooltip"
+      class="wt-tooltip__floating"
       :class="[popperClass]"
       :style="floatingStyles"
       :triggers="popperTriggers"
       @show="showTooltip"
       @hide="hideTooltip"
     >
-      <slot v-bind="{ hide: hideTooltip }"></slot>
+      <slot v-bind="{ hide: hideTooltip }" />
     </wt-tooltip-floating>
   </div>
 </template>
@@ -43,10 +42,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  contrast: {
-    type: Boolean,
-    default: false,
-  },
   placement: {
     type: String,
     default: 'auto',
@@ -133,18 +128,11 @@ onMounted(() => {
   .wt-tooltip-floating {
     @extend %typo-body-2;
     padding: var(--spacing-2xs) var(--spacing-xs);
-    color: var(--contrast-color);
-    background: var(--main-color);
+    color: var(--wt-tooltip-text-color);
+    background: var(--wt-tooltip-background-color);
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-10);
     z-index: 1000;
   }
-
-  &--contrast {
-    .wt-tooltip-floating {
-      color: var(--main-color);
-      background: var(--contrast-color);
-    }
-  }
 }
 </style>

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

@@ -1,14 +1,14 @@
 import { useCachedInterval } from '../useCachedInterval';
 
 describe('useCachedInterval', () => {
-  it('subscribe', (done) => {
-    const callback = jest.fn();
+  it('subscribe', async () => {
+    const callback = vi.fn();
     const { subscribe } = useCachedInterval({ timeout: 10 });
     subscribe(callback);
     expect(callback).toHaveBeenCalledTimes(1);
-    setTimeout(() => {
+    return await new Promise((resolve, reject) => setTimeout(() => {
       expect(callback).toHaveBeenCalledTimes(2);
-      done();
-    }, 10);
+      resolve();
+    }, 10));
   });
 });

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

@@ -54,7 +54,7 @@ describe('useRepresentableAgentPauseCause', () => {
     const {
       representablePauseCause,
     } = useRepresentableAgentPauseCause(pauseCauses);
-    expect(representablePauseCause.value[0].progressColor).toBe('danger');
+    expect(representablePauseCause.value[0].progressColor).toBe('error');
   });
 
   it('correctly computes progressColor with duration < limit', () => {

package/src/composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause.js

@@ -18,7 +18,7 @@ const duration = ({ durationMin, limitMin }) => {
 };
 
 const pauseCauseProgressColor = ({ durationMin, limitMin }) => {
-  if (isDurationOverflow({ durationMin, limitMin })) return 'danger';
+  if (isDurationOverflow({ durationMin, limitMin })) return 'error';
   if (durationMin <= (limitMin * 0.75)) return 'success';
   return 'primary';
 };

package/src/css/styleguide/colors/_colors.scss

@@ -1,5 +1,6 @@
 @import './deprecated';
 @import './palette';
+@import './reusable/text-field';
 
 :root {
   // dp colors
@@ -28,68 +29,77 @@
   --dp-2-surface-color: hsl(225, 20%, 78%);
   --dp-1-surface-color: hsl(225, 20%, 77%);
 
+  // content wrapper
+  --content-wrapper-color: var(--dp-24-surface-color);
+
   // success colors
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
   --success-light-color: var(--green-lighten-4);
-  --on-success-color: var(--black);
+  --success-on-color: var(--white);
 
   // warning colors
   --warning-color: var(--orange-accent-2);
   --warning-hover-color: var(--orange-accent-1);
   --warning-light-color: var(--orange-lighten-4);
-  --on-warning-color: var(--black);
+  --warning-on-color: var(--black);
 
   // error colors
   --error-color: var(--red-accent-2);
   --error-hover-color: var(--red-lighten-2);
   --error-light-color: var(--red-lighten-4);
-  --on-error-color: var(--black);
+  --error-on-color: var(--white);
 
   // info colors
   --info-color: var(--blue-darken-1);
   --info-hover-color: var(--blue-lighten-1);
   --info-light-color: var(--blue-lighten-4);
-  --on-info-color: var(--black);
+  --info-on-color: var(--black);
 
   // job colors
   --job-color: var(--blue-darken-1);
   --job-hover-color: var(--blue-lighten-1);
   --job-light-color: var(--blue-lighten-4);
-  --on-job-color: var(--black);
+  --job-on-color: var(--black);
 
   // chat colors
   --chat-color: var(--indigo-accent-2);
   --chat-hover-color: var(--indigo-accent-2);
   --chat-light-color: var(--indigo-lighten-4);
-  --on-chat-color: var(--black);
+  --chat-on-color: var(--black);
 
   // transfer colors
-  --transfer-color: var(--indigo-darken-1);
-  --transfer-hover-color: var(--indigo-lighten-1);
+  --transfer-color: var(--indigo-lighten-1);
+  --transfer-hover-color: var(--indigo-lighten-2);
   --transfer-light-color: var(--indigo-lighten-4);
-  --on-transfer-color: var(--white);
+  --transfer-on-color: var(--white);
 
   // primary colors
-  --primary-color: var(--amber-accent-2);
-  --primary-hover-color: var(--amber-accent-3);
+  --primary-color: var(--amber-accent-3);
+  --primary-hover-color: var(--amber-accent-2);
   --primary-light-color: var(--amber-lighten-4);
-  --on-primary-color: var(--black);
+  --primary-on-color: var(--black);
+
+  // secondary colors
+  --secondary-color: var(--dp-10-surface-color);
+  --secondary-hover-color: var(--dp-14-surface-color);
+  --secondary-light-color: var(--dp-16-surface-color);
+  --secondary-on-color: var(--grey-darken-4);
 
   // accent colors
   --accent-color: var(--purple-lighten-1);
   --sub-accent-color: var(--indigo-darken-3);
 
   // typography colors
-  --main-text-color: var(--grey-darken-3);
-  --main-text-disabled-color: var(--grey-lighten-1);
-  --negative-text-color: var(--error-color);
-  --link-color: var(--info-color);
+  --text-main-color: var(--grey-darken-3);
+  --text-disabled-color: var(--grey-lighten-1);
+  --text-error-color: var(--error-color);
+  --text-link-color: var(--info-color);
 }
 
 :root.theme--dark {
   // dp colors
-  --dp-24-surface-color: hsl(0, 0%, 25%);
+  --dp-24-surface-color: hsl(225, 20%, 25%);
   --dp-23-surface-color: hsl(225, 20%, 24%);
   --dp-22-surface-color: hsl(225, 20%, 23%);
   --dp-21-surface-color: hsl(225, 20%, 22%);
@@ -114,61 +124,67 @@
   --dp-2-surface-color: hsl(225, 20%, 3%);
   --dp-1-surface-color: hsl(225, 20%, 2%);
 
+  // content wrapper
+  --content-wrapper-color: var(--dp-24-surface-color);
+
   // success colors
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
   --success-light-color: var(--green-lighten-3);
-  --on-success-color: var(--white);
+  --success-on-color: var(--black);
 
   // warning colors
   --warning-color: var(--orange-accent-2);
   --warning-hover-color: var(--orange-accent-1);
   --warning-light-color: var(--orange-lighten-3);
-  --on-warning-color: var(--white);
+  --warning-on-color: var(--black);
 
   // error colors
   --error-color: var(--red-accent-2);
   --error-hover-color: var(--red-lighten-2);
   --error-light-color: var(--red-lighten-3);
-  --on-error-color: var(--white);
+  --error-on-color: var(--black);
 
   // info colors
   --info-color: var(--blue-darken-1);
   --info-hover-color: var(--blue-lighten-1);
   --info-light-color: var(--blue-lighten-3);
-  --on-info-color: var(--white);
+  --info-on-color: var(--white);
 
   // job colors
   --job-color: var(--blue-darken-1);
   --job-hover-color: var(--blue-lighten-1);
   --job-light-color: var(--blue-lighten-3);
-  --on-job-color: var(--white);
+  --job-on-color: var(--white);
 
   // chat colors
   --chat-color: var(--indigo-accent-2);
   --chat-hover-color: var(--indigo-accent-2);
   --chat-light-color: var(--indigo-lighten-3);
-  --on-chat-color: var(--white);
+  --chat-on-color: var(--white);
 
   // transfer colors
   --transfer-color: var(--indigo-darken-1);
   --transfer-hover-color: var(--indigo-lighten-1);
   --transfer-light-color: var(--indigo-lighten-4);
-  --on-transfer-color: var(--white);
+  --transfer-on-color: var(--white);
 
   // primary colors
   --primary-color: var(--amber-accent-2);
   --primary-hover-color: var(--amber-accent-3);
   --primary-light-color: var(--amber-lighten-4);
-  --on-primary-color: var(--black);
+  --primary-on-color: var(--black);
+
+  // secondary colors
+  --secondary-on-color: var(--grey-lighten-4);
 
   // accent colors
   --accent-color: var(--purple-lighten-1);
   --sub-accent-color: var(--indigo-darken-3);
 
   // typography colors
-  --main-text-color: var(--grey-lighten-3);
-  --main-text-disabled-color: var(--grey-darken-1);
-  --negative-text-color: var(--error-color);
-  --link-color: var(--info-color);
+  --text-main-color: var(--grey-lighten-3);
+  --text-disabled-color: var(--grey-darken-1);
+  --text-error-color: var(--error-color);
+  --text-link-color: var(--info-color);
 }

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

@@ -0,0 +1,36 @@
+// shared text field colors
+
+:root {
+  // TODO: move to separate helper-text component
+  // helper
+  --wt-helper-text-color: var(--text-main-color);
+  --wt-helper-text-disabled-color: var(--text-disabled-color);
+
+  // placeholder
+  --wt-text-field-error-text-color: var(--error-color);
+  --wt-text-field-placeholder-color: var(--text-main-color);
+  --wt-text-field-placeholder-error-color: var(--error-color);
+  --wt-text-field-placeholder-disabled-color: var(--text-disabled-color);
+
+  // border
+  --wt-text-field-input-border-color: var(--grey-darken-1);
+  --wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
+  --wt-text-field-input-border-error-color: var(--error-color);
+
+  // input bg
+  --wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);
+
+  // select
+  --wt-text-field-select-option-text-color: var(--text-main-color);
+  --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-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-selected-color: var(--primary-color);
+}
+
+:root.theme--dark {
+  --wt-text-field-input-border-color: var(--grey-lighten-1);
+}

package/src/css/styleguide/placeholder/_placeholder.scss

@@ -15,12 +15,12 @@ $vendors: (':-webkit', '-moz', ':-moz', '-ms');
       font: inherit;
       transition: var(--transition);
 
-      @if ($style == 'focus') {
-        color: var(--form-placeholder-color--focus);
+      @if ($style == 'error') {
+        color: var(--wt-text-field-placeholder-error-color);
       } @else if ($style == 'disabled') {
-        color: var(--form-placeholder-color--disabled);
+        color: var(--wt-text-field-placeholder-disabled-color);
       } @else {
-        color: var(--form-placeholder-color);
+        color: var(--wt-text-field-placeholder-color);
       }
 
       @content;
@@ -35,15 +35,15 @@ $vendors: (':-webkit', '-moz', ':-moz', '-ms');
 %wt-placeholder {
   font: inherit;
   transition: var(--transition);
-  color: var(--form-placeholder-color);
+  color: var(--wt-text-field-placeholder-color);
 }
 
-%wt-placeholder--focus {
+%wt-placeholder--disabled {
   @extend %wt-placeholder;
-  color: var(--form-placeholder-color--focus);
+  color: var(--wt-text-field-placeholder-disabled-color);
 }
 
-%wt-placeholder--disabled {
+%wt-placeholder--error {
   @extend %wt-placeholder;
-  color: var(--form-placeholder-color--disabled);
+  color: var(--wt-text-field-placeholder-error-color);
 }

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

@@ -35,6 +35,7 @@ const AdminSections = Object.freeze({
   STORAGE: 'storage',                   // scope: storage_profile
   COGNITIVE_PROFILES: 'cognitive-profiles',  // scope: cognitive_profile
   EMAIL_PROFILES: 'email-profiles',  // scope: email_profile
+  SINGLE_SIGN_ON: 'single-sign-on',  // scope: single-sign-on
   IMPORT_CSV: 'import-csv',
   TRIGGERS: 'triggers',
 
@@ -44,7 +45,7 @@ const AdminSections = Object.freeze({
 
   // SYSTEM
   CHANGELOGS: 'changelogs',
-  SETTINGS: 'settings',
+  CONFIGURATION: 'configuration',
 });
 
 export default AdminSections;

package/src/locale/en/en.js

@@ -44,6 +44,7 @@ export default {
       es: 'Español',
       ru: 'Русский',
       ua: 'Українська',
+      kz: 'Қазақ',
     },
     from: 'From',
     to: 'To',
@@ -223,13 +224,14 @@ export default {
         [AdminSections.STORAGE]: 'Storage',
         [AdminSections.COGNITIVE_PROFILES]: 'Cognitive profiles',
         [AdminSections.EMAIL_PROFILES]: 'Email profiles',
+        [AdminSections.SINGLE_SIGN_ON]: 'Single Sign-on',
         [AdminSections.IMPORT_CSV]: 'Imports of CSV from file',
         [AdminSections.TRIGGERS]: 'Triggers',
         [AdminSections.MEDIA]: 'Media files',
         [AdminSections.ROLES]: 'Roles',
         [AdminSections.OBJECTS]: 'Objects',
         [AdminSections.CHANGELOGS]: 'Change log',
-        [AdminSections.SETTINGS]: 'Settings',
+        [AdminSections.CONFIGURATION]: 'Configuration',
       },
     },
   },
@@ -247,6 +249,7 @@ export default {
     requiredArrayValue: 'Array should not be empty',
     minLength: 'Quantity of characters should not be less than',
     url: 'Should look like url',
+    websocketValidator: 'Should look like WebSocket url',
     regExpValidator: 'This regular expression is not valid',
     domainValidator: 'Incorrect domain',
     decimalValidator: 'Decimal precision should be no more than { count } places',
@@ -256,6 +259,7 @@ export default {
     searchBar: {
       placeholder: 'Search',
       settingsHint: 'Search mode',
+      variableSearchHint: 'Query format: "key=value"',
     },
     timepicker: {
       hour: 'Hour:',
@@ -338,8 +342,7 @@ export default {
     },
     deleteConfirmationPopup: {
       title: 'Confirm deletion',
-      askingAlert: 'Are you sure you want to delete {count} item? | Are you sure you want to delete {count} items?',
-      undoneActionAlert: 'This action cannot be undone.',
+      askingAlert: 'Are you sure you want\n to delete {count} record? | Are you sure you want\n to delete {count} records?',
       deleteAll: 'ALL',
     },
     dummy: {
@@ -356,5 +359,10 @@ export default {
         message: 'The limit for agents to take a pause has been exceeded. The pause is unavailable right now.',
       },
     },
+    saveFailedPopup: {
+      title: 'Save failed',
+      label: 'Something went wrong, please try again',
+      exportToJson: 'Export to JSON',
+    },
   },
 };

package/src/locale/es/es.js

@@ -39,6 +39,7 @@ export default {
       es: 'Español',
       ru: 'Русский',
       ua: 'Українська',
+      kz: 'Қазақ',
     },
     from: 'De',
     to: 'Hasta',
@@ -188,6 +189,7 @@ export default {
         [AdminSections.STORAGE]: 'Almacenamiento',
         [AdminSections.COGNITIVE_PROFILES]: 'Perfiles de voz',
         [AdminSections.EMAIL_PROFILES]: 'Perfiles de correo electrónico',
+        [AdminSections.SINGLE_SIGN_ON]: 'Single Sign-on',
         [AdminSections.IMPORT_CSV]: 'Importación de datos de archivos CSV',
         [AdminSections.TRIGGERS]: 'Activadores',
         [AdminSections.ROLES]: 'Funciones',

package/src/locale/i18n.js

@@ -1,6 +1,7 @@
 import { createI18n } from 'vue-i18n';
 import en from './en/en';
 import es from './es/es';
+import kz from './kz/kz';
 import ru from './ru/ru';
 import ua from './ua/ua';
 
@@ -9,10 +10,11 @@ const messages = {
   es,
   ru,
   ua,
+  kz,
 };
 
 // eslint-disable-next-line new-cap
-export default new createI18n({
+export default createI18n({
   // legacy: false,
   locale: 'en',
   allowComposition: true,