@webitel/ui-sdk 26.8.35 → 26.8.36

package/package.json

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

package/src/locale/en/en.js

@@ -654,6 +654,10 @@ export default deepmerge(
 					message:
 						'The limit for agents to take a pause has been exceeded. The pause is unavailable right now.',
 				},
+				activityTypePopup: {
+					title: 'Please select activity type',
+					defaultOption: 'Standard Online',
+				},
 			},
 			pdfGeneration: {
 				generationStarted: 'Your PDF file is being created…',

package/src/locale/es/es.js

@@ -644,6 +644,10 @@ export default {
 				message:
 					'Se ha excedido el límite de agentes para tomar una pausa. La pausa no está disponible en este momento.',
 			},
+			activityTypePopup: {
+				title: 'Selecciona el tipo de actividad',
+				defaultOption: 'Estándar en línea',
+			},
 		},
 		pdfGeneration: {
 			generationStarted: 'Su archivo PDF se está creando…',

package/src/locale/kz/kz.js

@@ -645,6 +645,10 @@ export default {
 				message:
 					'Операторлардың паузаға шығу шегі асып кетті. Қазір пауза мүмкін емес.',
 			},
+			activityTypePopup: {
+				title: 'Әрекет түрін таңдаңыз',
+				defaultOption: 'Стандартты онлайн',
+			},
 		},
 		pdfGeneration: {
 			generationStarted: 'Сіздің PDF файлыңыз жасалуда…',

package/src/locale/pl/pl.js

@@ -644,6 +644,10 @@ export default {
 				message:
 					'Przekroczono limit agentów mogących wziąć pauzę. Pauza jest w tej chwili niedostępna.',
 			},
+			activityTypePopup: {
+				title: 'Wybierz typ aktywności',
+				defaultOption: 'Standardowy online',
+			},
 		},
 		pdfGeneration: {
 			generationStarted: 'Twój plik PDF jest tworzony…',

package/src/locale/ro/ro.js

@@ -650,6 +650,10 @@ export default {
 				message:
 					'Limita pentru agenții care pot lua pauză a fost depășită. Pauza nu este disponibilă momentan.',
 			},
+			activityTypePopup: {
+				title: 'Selectați tipul de activitate',
+				defaultOption: 'Standard Online',
+			},
 		},
 		pdfGeneration: {
 			generationStarted: 'Fișierul dvs. PDF este în curs de creare…',

package/src/locale/ru/ru.js

@@ -639,6 +639,10 @@ export default {
 				message:
 					'Лимит операторов в паузе превышен. Перерыв сейчас недоступен.',
 			},
+			activityTypePopup: {
+				title: 'Пожалуйста, выберите тип статуса',
+				defaultOption: 'Обычный онлайн',
+			},
 		},
 		pdfGeneration: {
 			generationStarted: 'Ваш PDF-файл генерируется…',

package/src/locale/uk/uk.js

@@ -637,6 +637,10 @@ export default {
 				message:
 					'Ліміт операторів в паузі перевищено. Перерва наразі недоступна.',
 			},
+			activityTypePopup: {
+				title: 'Будь ласка, виберіть тип статусу',
+				defaultOption: 'Звичайний онлайн',
+			},
 		},
 		pdfGeneration: {
 			generationStarted: 'Ваш PDF-файл генерується…',

package/src/locale/uz/uz.js

@@ -649,6 +649,10 @@ export default {
 				message:
 					'Agentlarning tanaffusga chiqish limiti oshib ketdi. Hozir tanaffus imkonsiz.',
 			},
+			activityTypePopup: {
+				title: 'Faoliyat turini tanlang',
+				defaultOption: 'Standart onlayn',
+			},
 		},
 		pdfGeneration: {
 			generationStarted: 'Sizning PDF faylingiz yaratilmoqda…',

package/src/locale/vi/vi.js

@@ -647,6 +647,10 @@ export default {
 				message:
 					'Đã vượt quá giới hạn số lượng tổng đài viên tạm dừng. Không thể tạm dừng ngay bây giờ.',
 			},
+			activityTypePopup: {
+				title: 'Vui lòng chọn loại hoạt động',
+				defaultOption: 'Trực tuyến tiêu chuẩn',
+			},
 		},
 		pdfGeneration: {
 			generationStarted: 'Tệp PDF của bạn đang được tạo…',

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

@@ -8,12 +8,14 @@ const AgentStatusAPIFactory = ({ instance, OpenAPIConfig }) => {
 		status,
 		pauseCause,
 		statusComment,
+		onlineSkill,
 	}) => {
 		const res = await service.updateAgentStatus(agentId, {
 			status,
 			id: agentId,
 			payload: pauseCause,
 			status_comment: statusComment,
+			online_skill: onlineSkill,
 		});
 		return {
 			success: !!res,

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-activity-type-popup.vue

@@ -0,0 +1,104 @@
+<template>
+  <wt-popup
+    class="wt-cc-activity-type-popup"
+    size="md"
+    @close="close"
+  >
+    <template #title>
+      {{ t('webitelUI.agentStatusSelect.activityTypePopup.title') }}
+    </template>
+    <template #main>
+      <form @submit.prevent="setActivityType">
+        <ul class="wt-cc-activity-type-popup-option__wrapper">
+          <li
+            v-for="option of options"
+            :key="option.id"
+            class="wt-cc-activity-type-popup-option"
+          >
+            <wt-radio
+              :label="option.name"
+              :selected="selected?.id"
+              :value="option.id"
+              class="wt-cc-activity-type-popup-option__radio"
+              @update:selected="select(option)"
+            />
+          </li>
+        </ul>
+      </form>
+    </template>
+    <template #actions>
+      <wt-button
+        :disabled="!selected"
+        @click="setActivityType"
+      >
+        {{ t('reusable.ok') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="close"
+      >
+        {{ t('reusable.cancel') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { LookupOption } from '../../../../types';
+
+const props = withDefaults(
+	defineProps<{
+		options?: LookupOption[];
+	}>(),
+	{
+		options: () => [],
+	},
+);
+
+const emit = defineEmits<{
+	change: [
+		option: LookupOption,
+	];
+	close: [];
+}>();
+
+const { t } = useI18n();
+
+const selected = ref<LookupOption | undefined>(props.options[0]);
+
+function select(option: LookupOption) {
+	selected.value = option;
+}
+
+function close() {
+	emit('close');
+}
+
+function setActivityType() {
+	emit('change', selected.value);
+	close();
+}
+</script>
+
+<style lang="scss" scoped>
+.wt-cc-activity-type-popup {
+  :deep(.wt-popup__popup) {
+    max-height: 500px;
+  }
+}
+
+.wt-cc-activity-type-popup-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.wt-cc-activity-type-popup-option__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+}
+</style>

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

@@ -1,11 +1,26 @@
 <template>
   <article class="wt-cc-agent-status-select">
+    <wt-switcher
+      v-if="showCallCenterSwitcher"
+      controlled
+      :label="t('agentStatus.callCenter')"
+      :model-value="isCallCenterOn"
+      class="wt-cc-agent-status-select__call-center-switcher"
+      @update:model-value="toggleCallCenterMode"
+    />
     <wt-status-select
 			:key="status"
       :status="status"
       :status-duration="statusDuration"
       @closed="handleClosed"
       @change="handleSelectInput"
+      class="wt-cc-agent-status-select__status-select"
+    />
+    <activity-type-popup
+      v-if="isActivityTypePopup"
+      :options="activityTypes"
+      @change="handleActivityTypeInput"
+      @close="closeActivityTypePopup"
     />
     <pause-cause-popup
       v-if="isPauseCausePopup"
@@ -21,51 +36,75 @@
   </article>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import type { EngineForAgentPauseCauseList } from '@webitel/api-services/gen';
 import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
 import { PauseNotAllowedError } from 'webitel-sdk';
-
-import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum.js';
+import { OnlineSkillsAPI } from '../../../../packages/api-services/src/api/clients/onlineSkills/onlineSkills';
+import WtSwitcher from '../../../components/wt-switcher/wt-switcher.vue';
+import { AgentStatus } from '../../../enums';
+import type { LookupOption } from '../../../types';
 import AgentStatusAPIFactory from '../api/agent-status.js';
 import PauseCauseAPIFactory from '../api/pause-cause.js';
+import { useCCenterModeSwitcher } from '../composables/useCCenterModeSwitcher';
+import type { StatusChangePayload } from '../types/StatusChangePayload.types';
+import ActivityTypePopup from './_internals/wt-cc-activity-type-popup.vue';
 import PauseCausePopup from './_internals/wt-cc-pause-cause-popup.vue';
 import StatusSelectErrorPopup from './_internals/wt-cc-status-select-error-popup.vue';
 
-const props = defineProps({
-	agentId: {
-		type: [
-			String,
-			Number,
-		],
-		required: true,
-	},
-	status: {
-		// can be undefined, is agent wasn't loaded yet
-		default: AgentStatus.OFFLINE,
-	},
-	statusDuration: {
-		type: [
-			Number,
-			String,
-		],
-		default: 0,
+type ActivityType = LookupOption;
+
+const props = withDefaults(
+	defineProps<{
+		agentId: string | number;
+		status?: string;
+		statusDuration?: string | number;
+		showCallCenterSwitcher?: boolean;
+		isCallCenterOn?: boolean;
+	}>(),
+	{
+		status: AgentStatus.OFFLINE,
+		statusDuration: 0,
+		showCallCenterSwitcher: false,
+		isCallCenterOn: false,
 	},
-});
+);
 
-const emit = defineEmits([
-	'changed',
-]);
+const emit = defineEmits<{
+	changed: [
+		payload: StatusChangePayload,
+	];
+	'changed-call-center-mode': [
+		payload?: ActivityType,
+	];
+}>();
 
 const { api } = useStore().state;
 const AgentStatusAPI = AgentStatusAPIFactory(api);
 const PauseCauseAPI = PauseCauseAPIFactory(api);
+const { t } = useI18n();
 
 const isPauseCausePopup = ref(false);
-const pauseCauses = ref([]);
+const pauseCauses = ref<EngineForAgentPauseCauseList>([]);
 const error = ref(null);
 const chosenStatus = ref('');
 
+const isActivityTypePopup = ref(false);
+const activityTypes = ref<ActivityType[]>([]);
+
+const defaultActivityTypeOption = ref<ActivityType | null>(null);
+
+const { callCenterModeChanging, toggleCallCenterMode } = useCCenterModeSwitcher(
+	{
+		activityTypes,
+		loadActivityTypes,
+		openActivityTypePopup,
+		emit,
+	},
+);
+
 function openPauseCausePopup() {
 	isPauseCausePopup.value = true;
 }
@@ -74,29 +113,67 @@ function closePauseCausePopup() {
 	isPauseCausePopup.value = false;
 }
 
-async function loadPauseCauses() {
+async function loadPauseCauses(): Promise<void> {
 	const response = await PauseCauseAPI.getList({
 		agentId: props.agentId,
 	});
 	pauseCauses.value = response.items;
 }
 
-async function updateStatus({ agentId, status, pauseCause, statusComment }) {
+function openActivityTypePopup() {
+	isActivityTypePopup.value = true;
+}
+
+function closeActivityTypePopup() {
+	isActivityTypePopup.value = false;
+	callCenterModeChanging.value = false;
+}
+
+async function loadActivityTypes(): Promise<void> {
+	const response = await OnlineSkillsAPI.getList({
+		skipDefault: false,
+	});
+	defaultActivityTypeOption.value = response.items[0];
+	activityTypes.value = [
+		{
+			id: defaultActivityTypeOption.value?.id,
+			name: t('webitelUI.agentStatusSelect.activityTypePopup.defaultOption'),
+		},
+		...response.items.slice(1),
+	];
+}
+
+async function updateStatus({
+	agentId,
+	status,
+	pauseCause,
+	statusComment,
+	onlineSkill,
+}: StatusChangePayload) {
 	return AgentStatusAPI.patch({
 		agentId,
 		status,
 		pauseCause,
 		statusComment,
+		onlineSkill,
 	});
 }
 
-async function changeStatus({ status, pauseCause, statusComment }) {
+async function changeStatus({
+	status,
+	pauseCause,
+	statusComment,
+	onlineSkill,
+}: Omit<StatusChangePayload, 'agentId'>) {
 	try {
-		const statusPayload = {
+		const statusPayload: StatusChangePayload = {
 			agentId: props.agentId,
 			status,
 			pauseCause,
 			statusComment,
+			...(status === AgentStatus.ONLINE && {
+				onlineSkill,
+			}),
 		};
 		await updateStatus(statusPayload);
 		emit('changed', statusPayload);
@@ -106,8 +183,14 @@ async function changeStatus({ status, pauseCause, statusComment }) {
 	}
 }
 
-async function handleStatus(status) {
-	if (status === AgentStatus.PAUSE) {
+async function handleStatus(status: string) {
+	if (status === AgentStatus.ONLINE) {
+		await loadActivityTypes();
+		if (activityTypes.value.length > 1) {
+			openActivityTypePopup();
+			return;
+		}
+	} else if (status === AgentStatus.PAUSE) {
 		await loadPauseCauses();
 		if (pauseCauses.value.length) {
 			openPauseCausePopup();
@@ -120,14 +203,14 @@ async function handleStatus(status) {
 	});
 }
 
-function handleSelectInput(newStatus) {
+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) {
+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
@@ -140,7 +223,29 @@ function handleClosed(event) {
 	}
 }
 
-function handlePauseCauseInput({ pauseCause, statusComment }) {
+function handleActivityTypeInput(activityType: ActivityType) {
+	const payload =
+		activityType.id === defaultActivityTypeOption.value?.id
+			? defaultActivityTypeOption.value
+			: activityType;
+	if (callCenterModeChanging.value) {
+		emit('changed-call-center-mode', payload);
+		callCenterModeChanging.value = false;
+	} else {
+		return changeStatus({
+			status: AgentStatus.ONLINE,
+			onlineSkill: payload,
+		});
+	}
+}
+
+function handlePauseCauseInput({
+	pauseCause,
+	statusComment,
+}: {
+	pauseCause: string;
+	statusComment: string;
+}) {
 	const status = AgentStatus.PAUSE;
 	return changeStatus({
 		status,
@@ -151,7 +256,13 @@ function handlePauseCauseInput({ pauseCause, statusComment }) {
 </script>
 
 <style lang="scss" scoped>
-.wt-cc-agent-status-select .wt-status-select {
-  width: 150px;
+.wt-cc-agent-status-select {
+  display: flex;
+  &__call-center-switcher{
+    margin-right: var(--wt-app-header-content-gap);
+  }
+  &__status-select {
+    width: 150px;
+  }
 }
 </style>

package/src/modules/AgentStatusSelect/composables/useCCenterModeSwitcher.ts

@@ -0,0 +1,43 @@
+import { ref } from 'vue';
+
+import type { UseCCenterModeSwitcherParams } from '../types/UseCCenterModeSwitcherParams.types';
+
+export const useCCenterModeSwitcher = ({
+	activityTypes,
+	loadActivityTypes,
+	openActivityTypePopup,
+	emit,
+}: UseCCenterModeSwitcherParams) => {
+	const callCenterModeChanging = ref(false);
+
+	function changedCallCenterModeHandler() {
+		emit('changed-call-center-mode');
+		callCenterModeChanging.value = false;
+	}
+
+	async function toggleCallCenterMode(value: boolean) {
+		callCenterModeChanging.value = true;
+		if (value) {
+			if (activityTypes.value.length <= 1) {
+				try {
+					await loadActivityTypes();
+				} catch (err) {
+					callCenterModeChanging.value = false;
+					throw err;
+				}
+			}
+			if (activityTypes.value.length > 1) {
+				openActivityTypePopup();
+			} else {
+				changedCallCenterModeHandler();
+			}
+		} else {
+			changedCallCenterModeHandler();
+		}
+	}
+
+	return {
+		callCenterModeChanging,
+		toggleCallCenterMode,
+	};
+};

package/src/modules/AgentStatusSelect/types/StatusChangePayload.types.ts

@@ -0,0 +1,9 @@
+import type { LookupOption } from '../../../types';
+
+export interface StatusChangePayload {
+	agentId: string | number;
+	status: string;
+	pauseCause?: string;
+	statusComment?: string;
+	onlineSkill?: LookupOption;
+}

package/src/modules/AgentStatusSelect/types/UseCCenterModeSwitcherParams.types.ts

@@ -0,0 +1,9 @@
+import type { Ref } from 'vue';
+import type { LookupOption } from '../../../types';
+
+export interface UseCCenterModeSwitcherParams {
+	activityTypes: Ref<LookupOption[]>;
+	loadActivityTypes: () => Promise<void>;
+	openActivityTypePopup: () => void;
+	emit: (event: 'changed-call-center-mode', payload?: LookupOption) => void;
+}

package/src/types/LookupOption.types.ts

@@ -0,0 +1,4 @@
+export type LookupOption = {
+	id: string | number;
+	name: string;
+};

package/src/types/index.ts

@@ -1 +1,2 @@
+export type { LookupOption } from './LookupOption.types';
 export type { ResultCallbacks } from './ResultCallbacks.types';