Feature/1014 name branding (#1053)

* Updated column name and contents. * Updated search by full-name. * Added search by full name and title * Updated styling and name display
buerokratt · Dec 13, 2024 · 8e39ec4 · 8e39ec4
1 parent 2d41f07
commit 8e39ec4
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 56 deletions.
diff --git a/DSL/Resql/get-users-with-roles-by-role.sql b/DSL/Resql/get-users-with-roles-by-role.sql
@@ -35,6 +35,11 @@ WHERE u.status <> 'deleted'
       OR LOWER(u.display_name) LIKE LOWER('%' || :search_display_name_and_csa_title || '%')
       OR LOWER(u.csa_title) LIKE LOWER('%' || :search_display_name_and_csa_title || '%')
   )
+  AND (
+    :search_full_name_and_csa_title IS NULL
+        OR LOWER(u.first_name || ' ' || u.last_name) LIKE LOWER('%' || :search_full_name_and_csa_title || '%')
+        OR LOWER(u.csa_title) LIKE LOWER('%' || :search_full_name_and_csa_title || '%')
+    )
   AND (:show_active_only <> true OR csa.status <> 'offline')
   AND (:search_full_name IS NULL OR (
       (u.first_name || ' ' || u.last_name) ILIKE '%' || :search_full_name || '%'

diff --git a/DSL/Ruuter.private/DSL/POST/accounts/customer-support-agents.yml b/DSL/Ruuter.private/DSL/POST/accounts/customer-support-agents.yml
@@ -17,6 +17,9 @@ declaration:
       - field: search_display_name_and_csa_title
         type: string
         description: "Body field 'search_display_name_and_csa_title'"
+      - field: search_full_name_and_csa_title
+        type: string
+        description: "Body field 'search_full_name_and_csa_title'"
       - field: sorting
         type: string
         description: "Body field 'sorting'"
@@ -37,6 +40,7 @@ extractRequestData:
     search_csa_email: ${incoming.body.search_csa_email ?? ""}
     search_authority: ${incoming.body.search_authority ?? ""}
     search_display_name_and_csa_title: ${incoming.body.search_display_name_and_csa_title ?? ""}
+    search_full_name_and_csa_title: ${incoming.body.search_full_name_and_csa_title ?? ""}
     current_user_id: ${incoming.body.current_user_id ?? ""}
 
 getCustomerSupportAgents:
@@ -55,6 +59,7 @@ getCustomerSupportAgents:
       search_csa_email: ${search_csa_email}
       search_authority: ${search_authority}
       search_display_name_and_csa_title: ${search_display_name_and_csa_title}
+      search_full_name_and_csa_title: ${search_full_name_and_csa_title}
       excluded_users: ${current_user_id}
       roles:
         [

diff --git a/GUI/src/components/Chat/Chat.scss b/GUI/src/components/Chat/Chat.scss
@@ -157,6 +157,7 @@
           color: get-color(sapphire-blue-10);
           text-align: left;
           margin-left: 0;
+          font-size: $veera-font-size-100;
         }
 
         &__messages {
@@ -196,6 +197,7 @@
         &__group-name {
           text-align: left;
           margin-left: 0;
+          font-size: $veera-font-size-100;
         }
 
         &__messages {
@@ -247,7 +249,7 @@
   }
 
   &__group-name {
-    font-size: $veera-font-size-80;
+    font-size: $veera-font-size-100;
     line-height: $veera-line-height-500;
     font-weight: $veera-font-weight-delta;
     text-transform: capitalize;

diff --git a/GUI/src/components/Chat/index.tsx b/GUI/src/components/Chat/index.tsx
@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import { MdOutlineAttachFile, MdOutlineSend } from 'react-icons/md';
 import { Button, Icon, Label, Track } from 'components';
 import { ReactComponent as BykLogoWhite } from 'assets/logo-white.svg';
-import { Chat as ChatType, CHAT_EVENTS, CHAT_STATUS } from 'types/chat';
+import {BACKOFFICE_NAME, Chat as ChatType, CHAT_EVENTS, CHAT_STATUS} from 'types/chat';
 import { useMutation } from '@tanstack/react-query';
 import { AttachmentTypes, Message } from 'types/message';
 import ChatMessage from './ChatMessage';
@@ -402,8 +402,7 @@ const Chat: FC<ChatProps> = ({
         const backOfficeUserName =
           message.authorRole === AUTHOR_ROLES.BACKOFFICE_USER
             ? `${message.authorFirstName} ${message.authorLastName}`
-            : message.authorRole;
-
+            : BACKOFFICE_NAME.DEFAULT;
         groupedMessages.push({
           name: message.authorRole === AUTHOR_ROLES.END_USER
             ? endUserFullName

diff --git a/GUI/src/components/HistoricalChat/HistoricalChat.scss b/GUI/src/components/HistoricalChat/HistoricalChat.scss
@@ -71,6 +71,7 @@
           color: get-color(sapphire-blue-10);
           text-align: left;
           margin-left: 0;
+          font-size: $veera-font-size-100;
         }
 
         &__messages {
@@ -107,6 +108,7 @@
         &__group-name {
           text-align: left;
           margin-left: 0;
+          font-size: $veera-font-size-100;
         }
 
         &__messages {
@@ -151,7 +153,7 @@
   }
 
   &__group-name {
-    font-size: $veera-font-size-80;
+    font-size: $veera-font-size-100;
     line-height: $veera-line-height-500;
     font-weight: $veera-font-weight-delta;
     text-transform: capitalize;

diff --git a/GUI/src/components/HistoricalChat/index.tsx b/GUI/src/components/HistoricalChat/index.tsx
@@ -12,6 +12,7 @@ import './HistoricalChat.scss';
 import { apiDev } from 'services/api';
 import ChatEvent from 'components/ChatEvent';
 import { AUTHOR_ROLES } from 'utils/constants';
+import { BACKOFFICE_NAME } from "types/chat";
 
 type ChatProps = {
   chat: ChatType;
@@ -126,7 +127,7 @@ const HistoricalChat: FC<ChatProps> = ({
       } else {
         const isBackOfficeUser = message.authorRole === 'backoffice-user'
               ? `${message.authorFirstName} ${message.authorLastName}`
-              : message.authorRole;
+              : BACKOFFICE_NAME.DEFAULT;
         groupedMessages.push({
           name:
             message.authorRole === 'end-user'

diff --git a/GUI/src/pages/Chat/ForwardToColleaugeModal.tsx b/GUI/src/pages/Chat/ForwardToColleaugeModal.tsx
@@ -24,9 +24,9 @@ import { useDebouncedCallback } from 'use-debounce';
 import useStore from 'store';
 
 type ForwardToColleaugeModalProps = {
-  chat: Chat;
-  onModalClose: () => void;
-  onForward: (chat: Chat, user: User) => void;
+    chat: Chat;
+    onModalClose: () => void;
+    onForward: (chat: Chat, user: User) => void;
 };
 
 const ForwardToColleaugeModal: FC<ForwardToColleaugeModalProps> = ({
@@ -59,7 +59,7 @@ const ForwardToColleaugeModal: FC<ForwardToColleaugeModalProps> = ({
       .post(`accounts/customer-support-agents`, {
         page: pagination.pageIndex + 1,
         page_size: pagination.pageSize,
-        search_display_name_and_csa_title: filter,
+        search_full_name_and_csa_title: filter,
         sorting: sort,
         show_active_only: showActiveOnly,
         current_user_id: userInfo?.idCode ?? '',
@@ -77,55 +77,59 @@ const ForwardToColleaugeModal: FC<ForwardToColleaugeModalProps> = ({
     getUsers(pagination, filter, sorting, showActiveAgents);
   }, [showActiveAgents]);
 
-  const columnHelper = createColumnHelper<User>();
+    const columnHelper = createColumnHelper<User>();
 
-  const customerSupportStatusView = (props: any) => {
-    const isIdle = props.getValue() === 'idle' ? '#FFB511' : '#D73E3E';
-    return (
-      <span
-        style={{
-          display: 'block',
-          width: 16,
-          height: 16,
-          borderRadius: '50%',
-          backgroundColor: props.getValue() === 'online' ? '#308653' : isIdle,
-        }}
-      ></span>
-    );
-  };
+    const customerSupportStatusView = (props: any) => {
+        const isIdle = props.getValue() === 'idle' ? '#FFB511' : '#D73E3E';
+        return (
+            <span
+                style={{
+                    display: 'block',
+                    width: 16,
+                    height: 16,
+                    borderRadius: '50%',
+                    backgroundColor: props.getValue() === 'online' ? '#308653' : isIdle,
+                }}
+            ></span>
+        );
+    };
 
-  const forwardView = (props: any) => (
-    <Button
-      appearance="text"
-      onClick={() => onForward(chat, props.row.original)}
-    >
-      <Icon icon={<MdOutlineArrowForward color="rgba(0, 0, 0, 0.54)" />} />
-      {t('global.forward')}
-    </Button>
-  );
+    const forwardView = (props: any) => (
+        <Button
+            appearance="text"
+            onClick={() => onForward(chat, props.row.original)}
+        >
+            <Icon icon={<MdOutlineArrowForward color="rgba(0, 0, 0, 0.54)"/>}/>
+            {t('global.forward')}
+        </Button>
+    );
 
-  const usersColumns = useMemo(
-    () => [
-      columnHelper.accessor('displayName', {
-        header: t('settings.users.name') ?? '',
-      }),
-      columnHelper.accessor('csaTitle', {
-        header: t('settings.users.displayName') ?? '',
-      }),
-      columnHelper.accessor('customerSupportStatus', {
-        header: t('global.status') ?? '',
-        cell: customerSupportStatusView,
-      }),
-      columnHelper.display({
-        id: 'forward',
-        cell: forwardView,
-        meta: {
-          size: '1%',
-        },
-      }),
-    ],
-    []
-  );
+    const usersColumns = useMemo(
+        () => [
+            columnHelper.accessor(
+                (row) => `${row.firstName ?? ''} ${row.lastName ?? ''}`,
+                {
+                    id: `name`,
+                    header: t('settings.users.name') ?? '',
+                }
+            ),
+            columnHelper.accessor('csaTitle', {
+                header: t('settings.users.userTitle') ?? '',
+            }),
+            columnHelper.accessor('customerSupportStatus', {
+                header: t('global.status') ?? '',
+                cell: customerSupportStatusView,
+            }),
+            columnHelper.display({
+                id: 'forward',
+                cell: forwardView,
+                meta: {
+                    size: '1%',
+                },
+            }),
+        ],
+        []
+    );
 
   return (
     <Dialog

diff --git a/GUI/src/types/chat.ts b/GUI/src/types/chat.ts
@@ -6,6 +6,10 @@ export enum CHAT_STATUS {
   VALIDATING = 'VALIDATING',
 }
 
+export enum BACKOFFICE_NAME {
+  DEFAULT = 'Bürokratt'
+}
+
 export enum CHAT_EVENTS {
   ANSWERED = 'answered',
   TERMINATED = 'terminated',