@buerokratt-ria/common-gui-components 0.0.1

package/services/users.ts

@@ -0,0 +1,58 @@
+import { apiDev } from './api';
+import { User, UserDTO } from 'types/user';
+
+export async function createUser(userData: UserDTO) {
+    const authorities = userData.authorities
+        .map((e) => (e as any).value)
+        .filter((item) => item);
+    const fullName = userData.fullName?.trim();
+    const { data } = await apiDev.post<User>('accounts/admin/add', {
+        firstName: fullName?.split(' ').slice(0, 1).join(' ') ?? '',
+        lastName: fullName?.split(' ').slice(1, 2).join(' ') ?? '',
+        userIdCode: userData.idCode,
+        displayName: userData.displayName,
+        csaTitle: userData.csaTitle,
+        csa_email: userData.csaEmail,
+        roles:
+            authorities.length === 0
+                ? Object.values(userData.authorities)
+                : authorities,
+        department: userData.department,
+    });
+    return data;
+}
+
+export async function checkIfUserExists(userData: UserDTO) {
+    const { data } = await apiDev.post('accounts/admin/exists', {
+        userIdCode: userData.idCode,
+    });
+    return data;
+}
+
+export async function editUser(id: string | number, userData: UserDTO) {
+    const authorities = userData.authorities
+        .map((e: any) => e.value)
+        .filter((item) => item);
+    const fullName = userData.fullName?.trim();
+    const { data } = await apiDev.post<User>('accounts/admin/edit', {
+        firstName: fullName?.split(' ').slice(0, 1).join(' ') ?? '',
+        lastName: fullName?.split(' ').slice(1, 2).join(' ') ?? '',
+        userIdCode: id,
+        displayName: userData.displayName,
+        csaTitle: userData.csaTitle,
+        csa_email: userData.csaEmail,
+        roles:
+            authorities.length === 0
+                ? Object.values(userData.authorities)
+                : authorities,
+        department: userData.department,
+    });
+    return data;
+}
+
+export async function deleteUser(id: string | number) {
+    const { data } = await apiDev.post<User>('accounts/admin/delete', {
+        userIdCode: id,
+    });
+    return data;
+}

package/store/index.ts

@@ -0,0 +1,253 @@
+import { create } from 'zustand';
+import { UserInfo } from '../types/userInfo';
+import {
+    CHAT_STATUS,
+    Chat as ChatType,
+    GroupedChat,
+    GroupedPendingChat,
+} from '../types/chat';
+import { apiDev } from '../services/api';
+
+interface StoreState {
+    userInfo: UserInfo | null;
+    userId: string;
+    activeChats: ChatType[];
+    pendingChats: ChatType[];
+    selectedChatId: string | null;
+    chatCsaActive: boolean;
+    setActiveChats: (chats: ChatType[]) => void;
+    setPendingChats: (chats: ChatType[]) => void;
+    setUserInfo: (info: UserInfo) => void;
+    setSelectedChatId: (id: string | null) => void;
+    setChatCsaActive: (active: boolean) => void;
+    selectedChat: () => ChatType | null | undefined;
+    selectedPendingChat: () => ChatType | null | undefined;
+    unansweredChats: () => ChatType[];
+    forwordedChats: () => ChatType[];
+    unansweredChatsLength: () => number;
+    forwordedChatsLength: () => number;
+    loadActiveChats: () => Promise<void>;
+    getGroupedActiveChats: () => GroupedChat;
+    getGroupedUnansweredChats: () => GroupedChat;
+    loadPendingChats: () => Promise<void>;
+    getGroupedPendingChats: () => GroupedPendingChat;
+}
+
+const useStore = create<StoreState>((set, get, store) => ({
+    userInfo: null,
+    userId: '',
+    activeChats: [],
+    pendingChats: [],
+    selectedChatId: null,
+    chatCsaActive: false,
+    setActiveChats: (chats) => set({ activeChats: chats }),
+    setPendingChats: (chats) => set({ pendingChats: chats }),
+    setUserInfo: (data) => set({ userInfo: data, userId: data?.idCode || '' }),
+    setSelectedChatId: (id) => set({ selectedChatId: id }),
+    setChatCsaActive: (active) => {
+        set({
+            chatCsaActive: active,
+        });
+        get().loadActiveChats();
+        get().loadPendingChats();
+    },
+    selectedChat: () => {
+        const selectedChatId = get().selectedChatId;
+        return get().activeChats.find((c) => c.id === selectedChatId);
+    },
+    selectedPendingChat: () => {
+        const selectedChatId = get().selectedChatId;
+        return get().pendingChats.find((c) => c.id === selectedChatId);
+    },
+    unansweredChats: () => {
+        return get().activeChats?.filter?.((c) => c.customerSupportId === '') ?? [];
+    },
+    forwordedChats: () => {
+        const userId = get().userId;
+        return (
+            get().activeChats?.filter(
+                (c) =>
+                    c.status === CHAT_STATUS.REDIRECTED && c.customerSupportId === userId
+            ) || []
+        );
+    },
+    unansweredChatsLength: () => get().unansweredChats().length,
+    forwordedChatsLength: () => get().forwordedChats().length,
+
+    loadActiveChats: async () => {
+        const res = await apiDev.get('agents/chats/active');
+        const chats: ChatType[] = res.data.response ?? [];
+        const selectedChatId = get().selectedChatId;
+        const isChatStillExists = chats?.filter(
+            (e: any) => e.id === selectedChatId
+        );
+        if (isChatStillExists.length === 0 && get().activeChats.length > 0) {
+            setTimeout(() => get().setActiveChats(chats), 3000);
+        } else {
+            get().setActiveChats(chats);
+        }
+    },
+    loadPendingChats: async () => {
+        const res = await apiDev.get('agents/chats/pending');
+        const chats: ChatType[] = res.data.response ?? [];
+        const selectedChatId = get().selectedChatId;
+        const isChatStillExists = chats?.filter(
+            (e: any) => e.id === selectedChatId
+        );
+        if (isChatStillExists.length === 0 && get().pendingChats.length > 0) {
+            setTimeout(() => get().setPendingChats(chats), 3000);
+        } else {
+            get().setPendingChats(chats);
+        }
+    },
+    getGroupedActiveChats: () => {
+        const activeChats = get().activeChats;
+        const userInfo = get().userInfo;
+        const chatCsaActive = get().chatCsaActive;
+
+        const grouped: GroupedChat = {
+            myChats: [],
+            otherChats: [],
+        };
+
+        if (!activeChats) return grouped;
+
+        if (
+            chatCsaActive === false &&
+            !userInfo?.authorities.includes('ROLE_ADMINISTRATOR')
+        ) {
+            if (get().selectedChatId !== null) {
+                get().setSelectedChatId(null);
+            }
+            return grouped;
+        }
+
+        activeChats.forEach((c) => {
+            if (c.customerSupportId === userInfo?.idCode) {
+                grouped.myChats.push(c);
+                return;
+            }
+
+            const groupIndex = grouped.otherChats.findIndex(
+                (x) => x.groupId === c.customerSupportId
+            );
+
+            if (c.customerSupportId !== '') {
+                if (groupIndex === -1) {
+                    grouped.otherChats.push({
+                        groupId: c.customerSupportId ?? '',
+                        name: c.customerSupportDisplayName ?? '',
+                        chats: [c],
+                    });
+                } else {
+                    grouped.otherChats[groupIndex].chats.push(c);
+                }
+            }
+        });
+
+        grouped.otherChats.sort((a, b) => a.name.localeCompare(b.name));
+        return grouped;
+    },
+
+    getGroupedUnansweredChats: () => {
+        const activeChats = get().activeChats;
+        const userInfo = get().userInfo;
+        const chatCsaActive = get().chatCsaActive;
+
+        const grouped: GroupedChat = {
+            myChats: [],
+            otherChats: [],
+        };
+
+        if (!activeChats) return grouped;
+
+        if (chatCsaActive === true) {
+            activeChats.forEach((c) => {
+                if (c.customerSupportId === '') {
+                    grouped.myChats.push(c);
+                }
+            });
+        } else {
+            activeChats.forEach((c) => {
+                if (
+                    c.customerSupportId === userInfo?.idCode ||
+                    c.customerSupportId === ''
+                ) {
+                    grouped.myChats.push(c);
+                    return;
+                }
+
+                grouped.myChats.sort((a, b) => a.created.localeCompare(b.created));
+                const groupIndex = grouped.otherChats.findIndex(
+                    (x) => x.groupId === c.customerSupportId
+                );
+                if (c.customerSupportId !== '') {
+                    if (groupIndex === -1) {
+                        grouped.otherChats.push({
+                            groupId: c.customerSupportId ?? '',
+                            name: c.customerSupportDisplayName ?? '',
+                            chats: [c],
+                        });
+                    } else {
+                        grouped.otherChats[groupIndex].chats.push(c);
+                    }
+                }
+            });
+
+            grouped.otherChats.sort((a, b) => a.name.localeCompare(b.name));
+        }
+
+        return grouped;
+    },
+    getGroupedPendingChats: () => {
+        const pendingChats = get().pendingChats;
+        const userInfo = get().userInfo;
+        const chatCsaActive = get().chatCsaActive;
+
+        const grouped: GroupedPendingChat = {
+            newChats: [],
+            inProcessChats: [],
+            myChats: [],
+            otherChats: [],
+        };
+
+        if (!pendingChats) return grouped;
+
+        if (chatCsaActive) {
+            pendingChats.forEach((c) => {
+                if (c.customerSupportId === 'chatbot') {
+                    grouped.newChats.push(c);
+                } else {
+                    grouped.inProcessChats.push(c);
+                }
+            });
+
+            grouped.inProcessChats.forEach((c) => {
+                if (c.customerSupportId === userInfo?.idCode) {
+                    grouped.myChats.push(c);
+                    return;
+                }
+
+                grouped.myChats.sort((a, b) => a.created.localeCompare(b.created));
+                const groupIndex = grouped.otherChats.findIndex(
+                    (x) => x.groupId === c.customerSupportId
+                );
+                if (c.customerSupportId !== '') {
+                    if (groupIndex === -1) {
+                        grouped.otherChats.push({
+                            groupId: c.customerSupportId ?? '',
+                            name: c.customerSupportDisplayName ?? '',
+                            chats: [c],
+                        });
+                    } else {
+                        grouped.otherChats[groupIndex].chats.push(c);
+                    }
+                }
+                grouped.otherChats.sort((a, b) => a.name.localeCompare(b.name));
+            });
+        }
+        return grouped;
+    },
+}));
+
+export default useStore;

package/templates/history-page/index.ts

@@ -0,0 +1 @@
+export { default as ChatHistory } from './src';

package/templates/history-page/src/History.scss

@@ -0,0 +1,47 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/typography';
+
+.input-wrapper {
+  width: 40%;
+}
+
+.card-drawer-container {
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  box-sizing: border-box;
+}
+
+.card-wrapper {
+  flex: 1;
+  overflow: auto;
+  transition: flex 0.3s ease;
+}
+
+.drawer-container {
+  flex: 1;
+  height: 100%;
+  overflow-y: auto;
+  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+  border: 1px solid get-color(black-coral-2);
+}
+
+.drawer-container > * {
+  position: static !important;
+  width: 100%;
+  height: 100%;
+}
+
+.side-meta {
+  background-color: get-color(white);
+  border: 1px solid get-color(black-coral-2);
+  color: get-color(black-coral-12);
+  display: flex;
+  flex: 0 0 288px;
+  flex-direction: column;
+  font-size: $veera-font-size-80;
+  gap: 4px;
+  overflow-y: auto;
+  padding: get-spacing(haapsalu);
+}