@webitel/ui-sdk 26.8.44 → 26.8.46

package/dist/{wt-chat-emoji-DxGSTYd8.js → wt-chat-emoji-PSwoA5FA.js}

@@ -1,4 +1,4 @@
-import "./components-DZ-mqx3y.js";
+import "./components-CfX8XNuf.js";
 import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as t } from "./enums-De8CDKZ1.js";
 import { t as n } from "./wt-button-B7B7qITq.js";

package/dist/{wt-datepicker-C5LuZK-R.js → wt-datepicker-D5Af57PB.js}

@@ -208,6 +208,7 @@ var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" },
 			Boolean
 		] },
 		customValidators: { default: () => [] },
+		regleValidation: {},
 		modelValue: {},
 		defaultValue: {},
 		name: {},
@@ -320,9 +321,10 @@ var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" },
 			}, 0);
 		}, X = () => {
 			B();
-		}, Z = f(() => o.required ? `${o.label}*` : o.label), { v: ne, customValidators: re } = j(o), { isValidation: ie, invalid: Q, validationText: $, validationTextColor: ae } = d({
+		}, Z = f(() => o.required ? `${o.label}*` : o.label), { v: ne, customValidators: re, regleValidation: ie } = j(o), { isValidation: ae, invalid: Q, validationText: $, validationTextColor: oe } = d({
 			v: ne,
-			customValidators: re
+			customValidators: re,
+			regleValidation: ie
 		});
 		return (a, o) => {
 			let s = k("wt-label"), l = k("wt-button"), u = k("wt-icon-btn"), d = k("wt-message");
@@ -438,9 +440,9 @@ var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" },
 					"show-clear",
 					"onBlur"
 				]),
-				M(ie) && M($) ? (D(), p(d, {
+				M(ae) && M($) ? (D(), p(d, {
 					key: 0,
-					color: M(ae),
+					color: M(oe),
 					variant: M(i).SIMPLE,
 					size: M(r).SM
 				}, {
@@ -454,6 +456,6 @@ var W = { class: "wt-datepicker" }, G = { class: "wt-datepicker__button-bar" },
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-e763bd8a"]]);
+}), [["__scopeId", "data-v-4c2f4f33"]]);
 //#endregion
 export { X as default };

package/dist/{wt-display-chip-items-DicXPtf3.js → wt-display-chip-items-CIXM-Ohl.js}

@@ -1,4 +1,4 @@
-import { C as e, i as t } from "./components-DZ-mqx3y.js";
+import { C as e, i as t } from "./components-CfX8XNuf.js";
 import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./displayText-CtaxzaBz.js";
 import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m, unref as h, withCtx as g } from "vue";

package/dist/{wt-send-message-popup-qzdEoZPK.js → wt-send-message-popup-3yRiBsoN.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./rolldown-runtime-BEcgMyyN.js";
-import { n as t, r as n } from "./clients-EyPsBurj.js";
-import { T as r, n as i, w as a } from "./components-DZ-mqx3y.js";
+import { n as t, r as n } from "./clients-DBqdsc05.js";
+import { T as r, n as i, w as a } from "./components-CfX8XNuf.js";
 import { t as o } from "./vue-i18n-Db_oYfO8.js";
 import { n as s } from "./useEventBus-B-ZeklLu.js";
 import { createBlock as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeProps as f, onMounted as p, openBlock as m, ref as h, resolveComponent as g, toDisplayString as _, unref as v, withCtx as y } from "vue";

package/dist/{wt-status-select-B-N9Fvz4.js → wt-status-select-DL1bOn9G.js}

@@ -31,18 +31,15 @@ var f = [
 		statusDuration: { default: 0 },
 		options: {}
 	},
-	emits: ["change", "closed"],
+	emits: ["change"],
 	setup(s, { emit: p }) {
 		let m = s, h = p, { t: g } = n(), _ = i(() => m.options ? m.options : f.map((e) => ({
 			...e,
 			text: g(e.locale)
-		}))), v = i(() => _.value.find((e) => e.value === m.status)), y = i(() => _.value.reduce((e, n) => (m.status === n.value && n.value !== t.PAUSE || n.value === t.BREAK_OUT || e.push(n), e), [])), b = i(() => typeof m.statusDuration == "string" ? m.statusDuration : m.statusDuration === void 0 ? v.value?.text ?? "" : r(m.statusDuration));
+		}))), v = i(() => _.value.find((e) => e.value === m.status)), y = i(() => _.value.filter((e) => e.value !== t.BREAK_OUT && (e.value !== t.OFFLINE || m.status !== t.OFFLINE))), b = i(() => typeof m.statusDuration == "string" ? m.statusDuration : m.statusDuration === void 0 ? v.value?.text ?? "" : r(m.statusDuration));
 		function x(e) {
 			h("change", e.value);
 		}
-		function S(e) {
-			h("closed", e);
-		}
 		return (t, n) => {
 			let r = l("wt-indicator"), i = l("wt-single-select");
 			return c(), a(i, {
@@ -53,7 +50,6 @@ var f = [
 				class: "wt-status-select",
 				"data-key": "value",
 				size: u(e).SM,
-				onClosed: S,
 				"onUpdate:modelValue": x
 			}, {
 				value: d(() => [o(r, {

package/dist/{wt-type-extension-value-input-BUf4t1jl.js → wt-type-extension-value-input-DArCroNk.js}

@@ -1,5 +1,5 @@
-import { t as e } from "./clients-EyPsBurj.js";
-import { a as t, o as n, r, s as i } from "./components-DZ-mqx3y.js";
+import { t as e } from "./clients-DBqdsc05.js";
+import { a as t, o as n, r, s as i } from "./components-CfX8XNuf.js";
 import { t as a } from "./enums-De8CDKZ1.js";
 import { t as o } from "./vue-i18n-Db_oYfO8.js";
 import { computed as s, createBlock as c, createCommentVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, openBlock as m, renderSlot as h, resolveComponent as g, unref as _, useModel as v } from "vue";

package/dist/{wt-vidstack-player-Bv_bhxih.js → wt-vidstack-player-BGnQxLI3.js}

@@ -1,4 +1,4 @@
-import { E as e } from "./components-DZ-mqx3y.js";
+import { E as e } from "./components-CfX8XNuf.js";
 import { t } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { l as n } from "./enums-De8CDKZ1.js";
 import "./wt-button-B7B7qITq.js";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.8.44",
+	"version": "26.8.46",
 	"private": false,
 	"scripts": {
 		"dev": "npm run docs:dev",

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

@@ -55,7 +55,7 @@
     >
 			<template #buttonbar="{ todayCallback, clearCallback }">
 				<div class="wt-datepicker__button-bar">
-					<wt-button 
+					<wt-button
 						:color="ButtonColor.SECONDARY"
 						:variant="ButtonVariant.OUTLINED"
 						:size="ComponentSize.SM"
@@ -63,7 +63,7 @@
 					>
 						{{ t('reusable.today') }}
 					</wt-button>
-					<wt-button 
+					<wt-button
 						v-show="clearable && modelValue"
 						:color="ButtonColor.SECONDARY"
 						:variant="ButtonVariant.OUTLINED"
@@ -76,14 +76,14 @@
 			</template>
 
 			<template #prevbutton="{ actionCallback }">
-				<wt-icon-btn 
+				<wt-icon-btn
 					icon="arrow-left"
 					@click="actionCallback"
 				/>
 			</template>
 
 			<template #nextbutton="{ actionCallback }">
-				<wt-icon-btn 
+				<wt-icon-btn
 					icon="arrow-right"
 					@click="actionCallback"
 				/>
@@ -133,6 +133,7 @@
 </template>
 
 <script setup lang="ts">
+import type { SuperCompatibleRegleFieldStatus } from '@regle/core';
 import { fromZonedTime, toZonedTime } from 'date-fns-tz';
 import PDatepicker, {
 	DatePickerEmitsOptions,
@@ -167,6 +168,7 @@ interface Props extends DatePickerProps {
 	timezone?: string;
 	v?: VuelidateFieldLike;
 	customValidators?: CompatCustomValidator[];
+	regleValidation?: SuperCompatibleRegleFieldStatus;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -257,12 +259,13 @@ const requiredLabel = computed(() => {
 });
 
 // https://stackoverflow.com/questions/72408463/use-props-in-composables-vue3
-const { v, customValidators } = toRefs(props);
+const { v, customValidators, regleValidation } = toRefs(props);
 
 const { isValidation, invalid, validationText, validationTextColor } =
 	useValidation({
 		v,
 		customValidators,
+		regleValidation,
 	});
 </script>
 

package/src/components/wt-status-select/__tests__/WtStatusSelect.spec.js

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 
+import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum';
 import WtSingleSelect from '../../wt-single-select/wt-single-select.vue';
 import WtStatusSelect from '../wt-status-select.vue';
 
@@ -13,6 +14,70 @@ describe('WtStatusSelect', () => {
 		expect(wrapper.classes('wt-status-select')).toBe(true);
 	});
 
+	it('keeps "online" option in the list when it is the current status', () => {
+		const wrapper = shallowMount(WtStatusSelect, {
+			props: {
+				status: AgentStatus.ONLINE,
+			},
+			stubs: {
+				WtSingleSelect,
+			},
+		});
+		expect(
+			wrapper.vm.availableOptions.some(
+				(opt) => opt.value === AgentStatus.ONLINE,
+			),
+		).toBe(true);
+	});
+
+	it('keeps "pause" option in the list when it is the current status', () => {
+		const wrapper = shallowMount(WtStatusSelect, {
+			props: {
+				status: AgentStatus.PAUSE,
+			},
+			stubs: {
+				WtSingleSelect,
+			},
+		});
+		expect(
+			wrapper.vm.availableOptions.some(
+				(opt) => opt.value === AgentStatus.PAUSE,
+			),
+		).toBe(true);
+	});
+
+	it('removes "offline" option from the list when it is the current status', () => {
+		const wrapper = shallowMount(WtStatusSelect, {
+			props: {
+				status: AgentStatus.OFFLINE,
+			},
+			stubs: {
+				WtSingleSelect,
+			},
+		});
+		expect(
+			wrapper.vm.availableOptions.some(
+				(opt) => opt.value === AgentStatus.OFFLINE,
+			),
+		).toBe(false);
+	});
+
+	it('always removes "break_out" option from the list', () => {
+		const wrapper = shallowMount(WtStatusSelect, {
+			props: {
+				status: AgentStatus.BREAK_OUT,
+			},
+			stubs: {
+				WtSingleSelect,
+			},
+		});
+		expect(
+			wrapper.vm.availableOptions.some(
+				(opt) => opt.value === AgentStatus.BREAK_OUT,
+			),
+		).toBe(false);
+	});
+
 	it('correctly represents duration', () => {
 		const wrapper = shallowMount(WtStatusSelect, {
 			stubs: {

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

@@ -7,7 +7,6 @@
     class="wt-status-select"
     data-key="value"
 		:size="ComponentSize.SM"
-    @closed="closedHandler"
     @update:model-value="inputHandler"
   >
     <template #value>
@@ -55,9 +54,6 @@ const emit = defineEmits<{
 	change: [
 		value: string,
 	];
-	closed: [
-		event: Event,
-	];
 }>();
 
 const { t } = useI18n();
@@ -76,18 +72,12 @@ const selectedOption = computed<StatusOption | undefined>(() =>
 );
 
 const availableOptions = computed<StatusOption[]>(() =>
-	statusOptions.value.reduce<StatusOption[]>((options, opt) => {
-		// PAUSE option is always passed
-		if (
-			(props.status === opt.value && opt.value !== AgentStatus.PAUSE) ||
-			opt.value === AgentStatus.BREAK_OUT
-		) {
-			// skip breakout option
-			return options;
-		}
-		options.push(opt);
-		return options;
-	}, []),
+	statusOptions.value.filter(
+		(opt) =>
+			opt.value !== AgentStatus.BREAK_OUT &&
+			(opt.value !== AgentStatus.OFFLINE ||
+				props.status !== AgentStatus.OFFLINE),
+	),
 );
 
 const duration = computed<string>(() => {
@@ -105,8 +95,4 @@ const duration = computed<string>(() => {
 function inputHandler(value: StatusOption) {
 	emit('change', value.value);
 }
-
-function closedHandler(event: Event) {
-	emit('closed', event);
-}
 </script>

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

@@ -1,4 +1,4 @@
-import { mount, shallowMount } from '@vue/test-utils';
+import { flushPromises, mount, shallowMount } from '@vue/test-utils';
 import { createStore } from 'vuex';
 
 import AgentStatus from '../../../../enums/AgentStatus/AgentStatus.enum.js';
@@ -28,6 +28,19 @@ vi.spyOn(AgentStatusAPIFactory, 'default').mockImplementation(() => ({
 	patch: agentStatusMock,
 }));
 
+const onlineSkillsGetListMock = vi.fn(() => ({
+	items: [
+		{
+			id: 'default',
+		},
+	],
+}));
+vi.mock('@webitel/api-services/api', () => ({
+	OnlineSkillsAPI: {
+		getList: (...args) => onlineSkillsGetListMock(...args),
+	},
+}));
+
 const agent = {
 	status: '',
 	agentId: 1,
@@ -46,9 +59,17 @@ const mountOptions = {
 	shallow: true,
 };
 
+function emitStatusChange(wrapper, value) {
+	wrapper
+		.findComponent('.wt-cc-agent-status-select__status-select')
+		.vm.$emit('change', value);
+}
+
 describe('Wt Cc Agent Status Select', () => {
 	beforeEach(() => {
 		getAgentPauseCausesMock.mockClear();
+		agentStatusMock.mockClear();
+		onlineSkillsGetListMock.mockClear();
 	});
 	it('renders a component', () => {
 		const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
@@ -76,4 +97,79 @@ describe('Wt Cc Agent Status Select', () => {
 		};
 		expect(agentStatusMock).toHaveBeenCalledWith(reqPayload);
 	});
+
+	it(`at repeated "online" selection (already active status), if online skills
+   exist, opens the activity-type popup instead of updating status`, async () => {
+		onlineSkillsGetListMock.mockReturnValueOnce({
+			items: [
+				{
+					id: 'default',
+				},
+				{
+					id: 'skill1',
+					name: 'Skill 1',
+				},
+			],
+		});
+		const wrapper = mount(WtCcAgentStatusSelect, {
+			...mountOptions,
+			props: {
+				...mountOptions.props,
+				status: AgentStatus.ONLINE,
+			},
+		});
+		emitStatusChange(wrapper, AgentStatus.ONLINE);
+		await flushPromises();
+		expect(
+			wrapper
+				.findComponent({
+					name: 'activity-type-popup',
+				})
+				.exists(),
+		).toBe(true);
+		expect(agentStatusMock).not.toHaveBeenCalled();
+	});
+
+	it(`at repeated "online" selection (already active status), if no online
+   skills exist, does not open a popup and does not update status`, async () => {
+		const wrapper = mount(WtCcAgentStatusSelect, {
+			...mountOptions,
+			props: {
+				...mountOptions.props,
+				status: AgentStatus.ONLINE,
+			},
+		});
+		emitStatusChange(wrapper, AgentStatus.ONLINE);
+		await flushPromises();
+		expect(onlineSkillsGetListMock).toHaveBeenCalled();
+		expect(
+			wrapper
+				.findComponent({
+					name: 'activity-type-popup',
+				})
+				.exists(),
+		).toBe(false);
+		expect(agentStatusMock).not.toHaveBeenCalled();
+	});
+
+	it(`at repeated "pause" selection (already active status), if pause causes
+   exist, opens the pause-cause popup instead of updating status`, async () => {
+		const wrapper = mount(WtCcAgentStatusSelect, {
+			...mountOptions,
+			props: {
+				...mountOptions.props,
+				status: AgentStatus.PAUSE,
+			},
+		});
+		emitStatusChange(wrapper, AgentStatus.PAUSE);
+		await flushPromises();
+		expect(
+			wrapper
+				.findComponent({
+					name: 'pause-cause-popup',
+				})
+				.exists(),
+		).toBe(true);
+		expect(agentStatusMock).not.toHaveBeenCalled();
+	});
 });

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

@@ -12,8 +12,7 @@
 			:key="status"
       :status="status"
       :status-duration="statusDuration"
-      @closed="handleClosed"
-      @change="handleSelectInput"
+      @change="handleStatus"
       class="wt-cc-agent-status-select__status-select"
     />
     <activity-type-popup
@@ -89,7 +88,6 @@ const { t } = useI18n();
 const isPauseCausePopup = ref(false);
 const pauseCauses = ref<EngineForAgentPauseCause[]>([]);
 const error = ref(null);
-const chosenStatus = ref('');
 
 const isActivityTypePopup = ref(false);
 const activityTypes = ref<ActivityType[]>([]);
@@ -203,26 +201,6 @@ async function handleStatus(status: string) {
 	});
 }
 
-function handleSelectInput(newStatus: string) {
-	handleStatus(newStatus);
-	chosenStatus.value = newStatus;
-	// we need to save changes which come from input, because sometimes we want
-	// to choose 'pause' repeatedly and have to check the previous status
-}
-
-function handleClosed(event: { value: string }) {
-	// 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
-		handleStatus(event.value);
-	}
-}
-
 function handleActivityTypeInput(activityType: ActivityType) {
 	const payload =
 		activityType.id === defaultActivityTypeOption.value?.id

package/src/validations/config/errors/customZodErrorsHandler.ts

@@ -3,6 +3,11 @@ import type { z } from 'zod/v4';
 
 import { isEmpty } from '../../../scripts';
 
+const isMissingValue = (value: unknown) => {
+	if (typeof value === 'number') return false;
+	return isEmpty(value) as boolean;
+};
+
 export const customZodErrorsHandler =
 	(t: I18nComposerTranslation) => (issue: z.core.$ZodRawIssue) => {
 		switch (issue.code) {
@@ -14,7 +19,7 @@ export const customZodErrorsHandler =
 			case 'invalid_type':
 				return handleInvalid(issue);
 			case 'invalid_union':
-				return t('validation.invalid');
+				return handleInvalidUnion(issue);
 			case 'custom':
 				return handleCustom(issue);
 			default:
@@ -40,8 +45,7 @@ export const customZodErrorsHandler =
 				return t('validation.required');
 			};
 
-			// if empty, show "required" error
-			if (isEmpty(issue.input) as boolean) {
+			if (isMissingValue(issue.input)) {
 				return showRequiredMsg();
 			}
 
@@ -52,6 +56,13 @@ export const customZodErrorsHandler =
 				});
 			}
 
+			// if date, show formatted date in the "value" error
+			if (issue.origin === 'date') {
+				return t('validation.minValue', {
+					min: new Date(issue.minimum as number).toLocaleString(),
+				});
+			}
+
 			// else, show "value" error
 			return t('validation.minValue', {
 				min: issue.minimum,
@@ -66,6 +77,13 @@ export const customZodErrorsHandler =
 				});
 			}
 
+			// if date, show formatted date in the "value" error
+			if (issue.origin === 'date') {
+				return t('validation.maxValue', {
+					max: new Date(issue.maximum as number).toLocaleString(),
+				});
+			}
+
 			// else, show "value" error
 			return t('validation.maxValue', {
 				max: issue.maximum,
@@ -77,10 +95,20 @@ export const customZodErrorsHandler =
 				| z.core.$ZodRawIssue<z.core.$ZodIssueInvalidType>
 				| z.core.$ZodRawIssue<z.core.$ZodIssueInvalidValue>,
 		) {
-			if (isEmpty(issue.input)) {
+			if (isMissingValue(issue.input)) {
 				return t('validation.required');
 			}
 
 			console.error('Unknown Invalid Zod issue:', issue);
 		}
+
+		function handleInvalidUnion(
+			issue: z.core.$ZodRawIssue<z.core.$ZodIssueInvalidUnion>,
+		) {
+			if (isMissingValue(issue.input)) {
+				return t('validation.required');
+			}
+
+			return t('validation.invalid');
+		}
 	};