@webitel/ui-sdk 26.4.69 → 26.4.71

package/src/modules/UserNotifications/stores/__tests__/userNotificationsStore.spec.ts

@@ -1,118 +1,185 @@
 import { ApiUserWarningId } from '@webitel/api-services/gen/models';
 import { createPinia, setActivePinia } from 'pinia';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { createApp } from 'vue';
-
-type ViMock = ReturnType<typeof vi.fn>;
+import eventBus from '../../../../scripts/eventBus';
+import { getUserWarnings } from '../../api/UserNotifications';
+import { createUserNotificationsStore } from '../userNotificationsStore';
 
-// Mocks for modules used by the store
 vi.mock('../../api/UserNotifications', () => {
 	return {
 		getUserWarnings: vi.fn(),
 	};
 });
-
-vi.mock('../../../../locale/i18n', () => {
-	return {
-		default: {
-			global: {
-				t: (key: string, payload?: number) =>
-					`${key}:${JSON.stringify(payload)}`,
-			},
+vi.mock('../../../../scripts/eventBus', () => ({
+	default: {
+		$emit: vi.fn(),
+	},
+}));
+
+const mockedGetUserWarnings = vi.mocked(getUserWarnings);
+const STORAGE_KEY = 'usersWithShownNotifications';
+const TEST_USER_ID = 'user-123';
+
+const mockPasswordWarning = {
+	id: ApiUserWarningId.PasswordExpiresSoon,
+	warningData: {
+		passwordExpiry: {
+			daysRemaining: 3,
 		},
-	};
-});
-
-vi.mock('../../../../scripts/eventBus', () => {
-	const emitMock = vi.fn();
-	return {
-		default: {
-			$on: vi.fn(),
-			$off: vi.fn(),
-			$emit: emitMock,
+	},
+};
+
+const mockLicenseWarning = {
+	id: ApiUserWarningId.LicenseExpiresSoon,
+	warningData: {
+		licenseExpiry: {
+			daysRemaining: 5,
+			licenseName: 'Enterprise',
 		},
-	};
-});
-
-import eventBus from '../../../../scripts/eventBus';
-import { getUserWarnings } from '../../api/UserNotifications';
-import { USER_NOTIFICATION_CONFIGS_MAP } from '../../maps/userNotificationConfigsMap';
-import { createUserNotificationsStore } from '../userNotificationsStore';
-
-describe('createUserNotificationsStore', () => {
-	let useStore: ReturnType<typeof createUserNotificationsStore>;
-	let pinia: ReturnType<typeof createPinia>;
+	},
+};
 
+describe('userNotificationsStore', () => {
 	beforeEach(() => {
+		setActivePinia(createPinia());
+		localStorage.clear();
 		vi.clearAllMocks();
-
-		pinia = createPinia();
-		const app = createApp({});
-		app.use(pinia);
-		setActivePinia(pinia);
-
-		useStore = createUserNotificationsStore();
+		vi.useFakeTimers();
 	});
 
-	it('fetch should call API and populate notifications', async () => {
-		// Arrange: mock API to return warnings
-		const notificationsResponse = {
-			warnings: [
-				{
-					id: ApiUserWarningId.PasswordExpiresSoon,
-					warningData: {
-						passwordExpiry: {
-							daysRemaining: 5,
-						},
+	describe('showNotifications', () => {
+		it('does not show notifications that the user is already in storage', async () => {
+			localStorage.setItem(
+				STORAGE_KEY,
+				JSON.stringify([
+					TEST_USER_ID,
+				]),
+			);
+
+			const useStore = createUserNotificationsStore();
+			const store = useStore();
+
+			await store.showNotifications(TEST_USER_ID);
+
+			expect(getUserWarnings).not.toHaveBeenCalled();
+		});
+
+		it('shows notifications and saves the user in storage', async () => {
+			mockedGetUserWarnings.mockResolvedValue({
+				warnings: [
+					mockPasswordWarning,
+				],
+			});
+
+			const useStore = createUserNotificationsStore();
+			const store = useStore();
+
+			await store.showNotifications(TEST_USER_ID);
+			vi.runAllTimers();
+
+			expect(eventBus.$emit).toHaveBeenCalledWith(
+				'notification',
+				expect.objectContaining({
+					type: 'info',
+				}),
+			);
+
+			const stored = JSON.parse(localStorage.getItem(STORAGE_KEY));
+			expect(stored).toContain(TEST_USER_ID);
+		});
+
+		it('Do not ignore API notifications by turning an empty array', async () => {
+			mockedGetUserWarnings.mockResolvedValue({
+				warnings: [],
+			});
+
+			const useStore = createUserNotificationsStore();
+			const store = useStore();
+
+			await store.showNotifications(TEST_USER_ID);
+			vi.runAllTimers();
+
+			expect(eventBus.$emit).not.toHaveBeenCalled();
+		});
+
+		it('Do not save if the id is not found in the map config', async () => {
+			mockedGetUserWarnings.mockResolvedValue({
+				warnings: [
+					{
+						id: 'unknown_warning',
+						warningData: {},
 					},
-				},
-			],
-		};
+				],
+			});
+
+			const useStore = createUserNotificationsStore();
+			const store = useStore();
+
+			await store.showNotifications(TEST_USER_ID);
+			vi.runAllTimers();
 
-		(getUserWarnings as ViMock).mockResolvedValue(notificationsResponse);
+			expect(eventBus.$emit).not.toHaveBeenCalled();
+		});
 
-		const store = useStore();
+		it('shows some notifications', async () => {
+			mockedGetUserWarnings.mockResolvedValue({
+				warnings: [
+					mockPasswordWarning,
+					mockLicenseWarning,
+				],
+			});
 
-		// Act
-		await store.initialize();
+			const useStore = createUserNotificationsStore();
+			const store = useStore();
 
-		// Assert
-		expect(store.notifications.length).toBe(1);
-		expect(store.notifications[0].days).toBe(5);
-		expect(store.notifications[0].localeKey).toBe(
-			USER_NOTIFICATION_CONFIGS_MAP.get(ApiUserWarningId.PasswordExpiresSoon)
-				?.localeKey,
-		);
-		expect(getUserWarnings).toHaveBeenCalledOnce();
+			await store.showNotifications(TEST_USER_ID);
+			vi.runAllTimers();
+
+			expect(eventBus.$emit).toHaveBeenCalledTimes(2);
+		});
 	});
 
-	it('show should emit notification for mapped warnings', async () => {
-		const notificationsResponse = {
-			warnings: [
-				{
-					id: ApiUserWarningId.PasswordExpiresSoon,
-					warningData: {
-						passwordExpiry: {
-							daysRemaining: 3,
-						},
-					},
-				},
-			],
-		};
-
-		(getUserWarnings as ViMock).mockResolvedValue(notificationsResponse);
-
-		const store = useStore();
-		await store.initialize();
-
-		// Act: show should emit once
-		store.show();
-		expect(eventBus.$emit).toHaveBeenCalledOnce();
-		const [[eventName, payload]] = (eventBus.$emit as ViMock).mock.calls;
-		expect(eventName).toBe('notification');
-		expect(payload.type).toBe('info');
-		expect(payload.text).toContain(
-			'systemNotifications.warnings.passwordExpirationMessage',
-		);
+	describe('clearShownUserNotifications', () => {
+		it('clear localStorage', async () => {
+			localStorage.setItem(
+				STORAGE_KEY,
+				JSON.stringify([
+					TEST_USER_ID,
+					'user-456',
+				]),
+			);
+
+			const useStore = createUserNotificationsStore();
+			const store = useStore();
+
+			store.clearShownUserNotifications(TEST_USER_ID);
+
+			const stored = JSON.parse(localStorage.getItem(STORAGE_KEY));
+			expect(stored).not.toContain(TEST_USER_ID);
+			expect(stored).toContain('user-456');
+		});
+
+		it('after clearShownUserNotifications notifications display again', async () => {
+			localStorage.setItem(
+				STORAGE_KEY,
+				JSON.stringify([
+					TEST_USER_ID,
+				]),
+			);
+			mockedGetUserWarnings.mockResolvedValue({
+				warnings: [
+					mockPasswordWarning,
+				],
+			});
+
+			const useStore = createUserNotificationsStore();
+			const store = useStore();
+
+			store.clearShownUserNotifications(TEST_USER_ID);
+			await store.showNotifications(TEST_USER_ID);
+			vi.runAllTimers();
+
+			expect(eventBus.$emit).toHaveBeenCalled();
+		});
 	});
 });

package/src/modules/UserNotifications/stores/userNotificationsStore.ts

@@ -1,74 +1,107 @@
 import type { ApiUserWarning } from '@webitel/api-services/gen/models';
 import { defineStore } from 'pinia';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import i18n from '../../../locale/i18n';
 import eventBus from '../../../scripts/eventBus';
 import { getUserWarnings } from '../api/UserNotifications';
 import { USER_NOTIFICATION_CONFIGS_MAP } from '../maps/userNotificationConfigsMap';
-import type {
-	NotificationsType,
-	UserNotificationsConfigsMap,
-} from '../types/UserNotifications';
+import type { NotificationsType } from '../types/UserNotifications';
+
+const STORAGE_KEY = 'usersWithShownNotifications';
 
 export const createUserNotificationsStore = () => {
 	const namespace = 'userNotifications';
 
 	const store = defineStore(namespace, () => {
-		const rawNotifications = ref<ApiUserWarning[]>([]);
+		const notifications = ref<NotificationsType[]>([]);
+
+		const getStoredUsers = (): string[] => {
+			const stored = localStorage.getItem(STORAGE_KEY);
+			return stored ? JSON.parse(stored) : [];
+		};
+
+		const isShownUserNotifications = (userId: string): boolean =>
+			getStoredUsers().includes(userId);
 
-		const initialize = async () => {
-			await fetch();
+		const setShownUserNotifications = (userId: string) => {
+			const shown = getStoredUsers();
+			localStorage.setItem(
+				STORAGE_KEY,
+				JSON.stringify([
+					...new Set([
+						...shown,
+						userId,
+					]),
+				]),
+			);
 		};
 
-		const fetch = async () => {
+		const clearShownUserNotifications = (userId: string) => {
+			const shown = getStoredUsers().filter((id: string) => id !== userId);
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(shown));
+		};
+
+		const fetchNotifications = async (): Promise<ApiUserWarning[]> => {
 			const response = await getUserWarnings();
-			rawNotifications.value =
-				(response && (response.warnings as ApiUserWarning[])) ?? [];
+			return (response?.warnings as ApiUserWarning[]) ?? [];
 		};
 
-		const notifications = computed<NotificationsType[]>(() => {
-			return rawNotifications.value
-				.map((notification) => {
-					const config: UserNotificationsConfigsMap =
-						USER_NOTIFICATION_CONFIGS_MAP.get(notification.id);
-					if (!config) return null;
-
-					return {
-						type: config.type,
-						localeKey: config.localeKey,
-						days: config.getDays(notification.warningData),
-						shown: false,
-					};
+		const mapNotifications = (array: ApiUserWarning[]) => {
+			return array
+				.map((warning) => {
+					const map = USER_NOTIFICATION_CONFIGS_MAP.get(warning.id);
+					if (!map) return null;
+					return map(warning);
 				})
 				.filter(Boolean) as NotificationsType[];
-		});
-
-		const show = () => {
-			notifications.value.forEach((notification) => {
-				// @author @Lera24
-				//notification should only be displayed the first time you visit the page
-				if (notification.shown) return;
-
-				eventBus.$emit('notification', {
-					type: notification.type,
-					text: i18n.global.t(
-						`systemNotifications.warnings.${notification.localeKey}`,
-						{
-							days: notification.days,
-						},
-					),
+		};
+
+		const emitNotification = ({
+			type,
+			localeKey,
+			params,
+		}: NotificationsType) => {
+			const locale = localStorage.getItem('lang') || i18n.global.locale.value;
+			setTimeout(
+				() =>
+					eventBus.$emit('notification', {
+						type,
+						text: i18n.global.t(
+							`systemNotifications.warnings.${localeKey}`,
+							{
+								...params,
+							},
+							{
+								locale,
+							},
+						),
+					}),
+				100,
+			);
+		};
+
+		const showNotifications = async (userId: string) => {
+			try {
+				if (isShownUserNotifications(userId)) return;
+
+				const apiNotifications = await fetchNotifications();
+				notifications.value = mapNotifications(apiNotifications);
+
+				if (!notifications.value?.length) return;
+
+				notifications.value.forEach((notification) => {
+					emitNotification(notification);
 				});
-				notification.shown = true;
-			});
+
+				setShownUserNotifications(userId);
+			} catch (err) {
+				throw err;
+			}
 		};
 
 		return {
-			initialize,
-			show,
-
-			/** internal for devtools/debug */
-			rawNotifications,
-			notifications,
+			showNotifications,
+			clearShownUserNotifications,
 		};
 	});
 

package/src/modules/UserNotifications/types/UserNotifications.ts

@@ -1,15 +1,12 @@
-interface UserNotificationsConfigsMap {
-	id: string;
-	type: 'info' | 'warning' | 'error';
-	localeKey: string;
-	getDays: (warningData: number) => number;
+interface UserNotificationsConfigsParams {
+	amount?: number;
+	name?: string;
 }
 
 interface NotificationsType {
 	type: 'info' | 'warning' | 'error';
 	localeKey: string;
-	days: number;
-	shown?: boolean;
+	params?: UserNotificationsConfigsParams;
 }
 
-export type { NotificationsType, UserNotificationsConfigsMap };
+export type { NotificationsType, UserNotificationsConfigsParams };

package/src/modules/Userinfo/api/UserinfoAPI.ts

@@ -24,6 +24,7 @@ const getSession = async (): Promise<{
 	scope: ScopeAccessApiResponseItem[];
 	permissions: GlobalAccessApiResponseItem[];
 	userId: string;
+	domain: string;
 	license: WebitelLicenseInfo[];
 }> => {
 	const url = '/userinfo';

package/src/modules/Userinfo/stores/userinfoStore.ts

@@ -37,10 +37,8 @@ export const createUserinfoStore = () => {
 		const { initialize: initializeSettingsStore } = settingsStore;
 		const { timezone } = storeToRefs(settingsStore);
 		const userNotificationsStore = useUserNotificationsStore();
-		const {
-			initialize: initializeUserNotificationsStore,
-			show: showUserNotifications,
-		} = userNotificationsStore;
+		const { showNotifications, clearShownUserNotifications } =
+			userNotificationsStore;
 
 		const userId = ref();
 		const userInfo = ref();
@@ -48,11 +46,10 @@ export const createUserinfoStore = () => {
 		const initialize = async () => {
 			const session = await getSession();
 			const access = await getUiVisibilityAccess();
-			await initializeUserNotificationsStore();
 
 			userId.value = session.userId;
 			userInfo.value = pick(session, [
-				'domainId',
+				'domain',
 				'username',
 				'permissions',
 				'userId',
@@ -72,10 +69,15 @@ export const createUserinfoStore = () => {
 			await initializeSettingsStore();
 		};
 
+		const showUserNotifications = () => showNotifications(userId.value);
+		const clearStorageNotifications = (id?: string) =>
+			clearShownUserNotifications(id ?? userId.value);
+
 		const logoutUser = async () => {
 			const authUrl = import.meta.env.VITE_AUTH_URL;
 			if (!authUrl) throw new Error('No authUrl for LOGOUT provided');
 			await logout();
+			clearStorageNotifications();
 			window.location.href = authUrl;
 		};
 
@@ -98,6 +100,7 @@ export const createUserinfoStore = () => {
 			hasApplicationVisibility,
 			logoutUser,
 			showUserNotifications,
+			clearStorageNotifications,
 		};
 	});
 

package/src/plugins/primevue/theme/components/textarea/textarea.js

@@ -8,6 +8,10 @@ const textarea = {
 	colorScheme: TextareaScheme.colorScheme,
 
 	css: ({ dt }) => `
+      .p-textarea.p-invalid:enabled:hover {
+        border-color: ${dt('textarea.invalidHoverBorderColor')};
+      }
+
       .wt-textarea__textarea {
         ${generateWtTypographyCustomCss({
 					dt,

package/types/modules/UserNotifications/maps/userNotificationConfigsMap.d.ts

@@ -1 +1,3 @@
-export declare const USER_NOTIFICATION_CONFIGS_MAP: Map<string, UserNotificationsConfigsMap>;
+import { ApiUserWarningId } from '@webitel/api-services/gen/models';
+import type { NotificationsType } from '../types/UserNotifications';
+export declare const USER_NOTIFICATION_CONFIGS_MAP: Map<ApiUserWarningId, (warningId: ApiUserWarningId) => NotificationsType>;

package/types/modules/UserNotifications/stores/userNotificationsStore.d.ts

@@ -1,105 +1,10 @@
-import type { ApiUserWarning } from '@webitel/api-services/gen/models';
-import type { NotificationsType } from '../types/UserNotifications';
 export declare const createUserNotificationsStore: () => import("pinia").StoreDefinition<"userNotifications", Pick<{
-    initialize: () => Promise<void>;
-    show: () => void;
-    /** internal for devtools/debug */
-    rawNotifications: import("vue").Ref<{
-        detail?: string;
-        id?: import("@webitel/api-services/gen/models").ApiUserWarningId;
-        warningData?: {
-            licenseExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-                licenseName?: string;
-            };
-            passwordExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-            };
-        };
-    }[], ApiUserWarning[] | {
-        detail?: string;
-        id?: import("@webitel/api-services/gen/models").ApiUserWarningId;
-        warningData?: {
-            licenseExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-                licenseName?: string;
-            };
-            passwordExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-            };
-        };
-    }[]>;
-    notifications: import("vue").ComputedRef<NotificationsType[]>;
-}, "rawNotifications">, Pick<{
-    initialize: () => Promise<void>;
-    show: () => void;
-    /** internal for devtools/debug */
-    rawNotifications: import("vue").Ref<{
-        detail?: string;
-        id?: import("@webitel/api-services/gen/models").ApiUserWarningId;
-        warningData?: {
-            licenseExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-                licenseName?: string;
-            };
-            passwordExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-            };
-        };
-    }[], ApiUserWarning[] | {
-        detail?: string;
-        id?: import("@webitel/api-services/gen/models").ApiUserWarningId;
-        warningData?: {
-            licenseExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-                licenseName?: string;
-            };
-            passwordExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-            };
-        };
-    }[]>;
-    notifications: import("vue").ComputedRef<NotificationsType[]>;
-}, "notifications">, Pick<{
-    initialize: () => Promise<void>;
-    show: () => void;
-    /** internal for devtools/debug */
-    rawNotifications: import("vue").Ref<{
-        detail?: string;
-        id?: import("@webitel/api-services/gen/models").ApiUserWarningId;
-        warningData?: {
-            licenseExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-                licenseName?: string;
-            };
-            passwordExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-            };
-        };
-    }[], ApiUserWarning[] | {
-        detail?: string;
-        id?: import("@webitel/api-services/gen/models").ApiUserWarningId;
-        warningData?: {
-            licenseExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-                licenseName?: string;
-            };
-            passwordExpiry?: {
-                daysRemaining?: string;
-                expiresAt?: string;
-            };
-        };
-    }[]>;
-    notifications: import("vue").ComputedRef<NotificationsType[]>;
-}, "show" | "initialize">>;
+    showNotifications: (userId: string) => Promise<void>;
+    clearShownUserNotifications: (userId: string) => void;
+}, never>, Pick<{
+    showNotifications: (userId: string) => Promise<void>;
+    clearShownUserNotifications: (userId: string) => void;
+}, never>, Pick<{
+    showNotifications: (userId: string) => Promise<void>;
+    clearShownUserNotifications: (userId: string) => void;
+}, "showNotifications" | "clearShownUserNotifications">>;

package/types/modules/UserNotifications/types/UserNotifications.d.ts

@@ -1,13 +1,10 @@
-interface UserNotificationsConfigsMap {
-    id: string;
-    type: 'info' | 'warning' | 'error';
-    localeKey: string;
-    getDays: (warningData: number) => number;
+interface UserNotificationsConfigsParams {
+    amount?: number;
+    name?: string;
 }
 interface NotificationsType {
     type: 'info' | 'warning' | 'error';
     localeKey: string;
-    days: number;
-    shown?: boolean;
+    params?: UserNotificationsConfigsParams;
 }
-export type { NotificationsType, UserNotificationsConfigsMap };
+export type { NotificationsType, UserNotificationsConfigsParams };

package/types/modules/Userinfo/api/UserinfoAPI.d.ts

@@ -5,6 +5,7 @@ declare const getSession: () => Promise<{
     scope: ScopeAccessApiResponseItem[];
     permissions: GlobalAccessApiResponseItem[];
     userId: string;
+    domain: string;
     license: WebitelLicenseInfo[];
 }>;
 declare const getUiVisibilityAccess: () => Promise<VisibilityAccess>;