@buerokratt-ria/common-gui-components 0.0.24 → 0.0.25

package/CHANGELOG.md

@@ -4,6 +4,11 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.25] - 01-09-2025
+
+- Added test column to display chats mark for test
+- FIX: refetch based on updated domains
+
 ## [0.0.24] - 14-08-2025
 
 - Modified Start and End dates to send them in payload in iso format

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "Common GUI components and pre defined templates.",
   "main": "index.ts",
   "author": "ExiRai",

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

@@ -1,5 +1,6 @@
 @import 'src/styles/tools/spacing';
 @import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
 @import 'src/styles/settings/variables/typography';
 
 .input-wrapper {
@@ -13,6 +14,39 @@
   box-sizing: border-box;
 }
 
+.checkbox-test {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &__item {
+    input[type=checkbox] {
+      &::before {
+        content: '';
+        display: block;
+        width: 16px;
+        height: 16px;
+        box-shadow: inset 0 0 0 1px get-color(black-coral-2);
+        border-radius: 2px;
+        position: absolute;
+        left: 4px;
+        top: 4px;
+      }
+    }
+
+    &:checked {
+      &::before {
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuNzQ5NzkgOC4xMjkwNkwxLjYyMjI5IDUuMDAxNTZMMC41NjEwMzUgNi4wNjI4MUw0Ljc0OTc5IDEwLjI1MTZMMTMuNzQ5OCAxLjI1MTU2TDEyLjY4ODUgMC4xOTAzMDhMNC43NDk3OSA4LjEyOTA2WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==');
+        background-color: get-color(sapphire-blue-10);
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: 13px 10px;
+        box-shadow: inset 0 0 0 1px get-color(sapphire-blue-10);
+      }
+    }
+  }
+}
+
 .card-wrapper {
   flex: 1;
   overflow: auto;

package/templates/history-page/src/index.tsx

@@ -1,4 +1,4 @@
-import React, {FC, PropsWithChildren, useEffect, useRef, useMemo, useState} from 'react';
+import React, {FC, PropsWithChildren, useEffect, useMemo, useRef, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useMutation} from '@tanstack/react-query';
 import {ColumnPinningState, createColumnHelper, PaginationState, SortingState,} from '@tanstack/react-table';
@@ -13,6 +13,7 @@ import {
     DataTable,
     Dialog,
     Drawer,
+    FormCheckbox,
     FormDatepicker,
     FormInput,
     FormMultiselect,
@@ -109,6 +110,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     const [updateKey, setUpdateKey] = useState<number>(0)
     const currentDomains = useStore.getState().userDomains;
     const multiDomainEnabled = import.meta.env.REACT_APP_ENABLE_MULTI_DOMAIN?.toLowerCase() === 'true';
+    const testMessageEnabled = import.meta.env.REACT_APP_SHOW_TEST_MESSAGE?.toLowerCase() === 'true';
 
     const parseDateParam = (dateString: string | null) => {
       if (!dateString) return new Date();
@@ -143,9 +145,9 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         });
     }, 500);
 
-    if(multiDomainEnabled) {
+    if (multiDomainEnabled) {
         useStore.subscribe((state, prevState) => {
-            if(JSON.stringify(state.userDomains) !== JSON.stringify(prevState.userDomains)) {
+            if (JSON.stringify(state.userDomains) !== JSON.stringify(prevState.userDomains)) {
                 setUpdateKey(prevState => prevState + 1);
             }
         });
@@ -170,7 +172,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 setValue('endDate', unifyDateFromat(delegatedEndDate));
             }
 
-            if(initialLoad) {
+            if (initialLoad) {
                 fetchData()
             } else {
                 getAllEndedChats.mutate({
@@ -248,7 +250,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 search,
             });
         }
-    }, [selectedColumns]);
+    }, [selectedColumns, currentDomains]);
 
     useEffect(() => {
         listCustomerSupportAgents.mutate();
@@ -356,11 +358,15 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         ];
 
         if (showEmail) {
-            columns.splice(4, 0, {label: t('global.email'), value: 'endUserEmail'}); // insert after name
+            columns.splice(4, 0, {label: t('global.email'), value: 'endUserEmail'});
+        }
+
+        if (testMessageEnabled) {
+            columns.splice(5, 0, {label: t('global.test'), value: 'istest'});
         }
 
         return columns;
-    }, [t, showEmail])
+    }, [t, showEmail, testMessageEnabled])
 
     const chatStatusChangeMutation = useMutation({
         mutationFn: async (data: { chatId: string | number; event: string }) => {
@@ -451,6 +457,31 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         },
     });
 
+    const chatTestChangeMutation = useMutation({
+        mutationFn: (data: {
+            chatId: string | number;
+            isTest: boolean;
+        }) => apiDev.post('chats/mark-test', data),
+        onSuccess: (res, {chatId, isTest}) => {
+            const updatedChatList = filteredEndedChatsList.map((chat) =>
+                chat.id === chatId ? {...chat, isTest} : chat
+            );
+            filterChatsList(updatedChatList);
+            toast?.open({
+                type: 'success',
+                title: t('global.notification'),
+                message: t('toast.success.updateSuccess'),
+            });
+        },
+        onError: (error: AxiosError) => {
+            toast?.open({
+                type: 'error',
+                title: t('global.notificationError'),
+                message: error.message,
+            });
+        },
+    });
+
     const columnHelper = createColumnHelper<ChatType>();
 
     const copyValueToClipboard = async (value: string) => {
@@ -520,6 +551,26 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         </Tooltip>
     );
 
+    const markConversationAsTest = (props: any) => {
+        return <>
+            <FormCheckbox
+                label={''}
+                hideLabel
+                emptyItem={true}
+                name="active"
+
+                item={{
+                    label: '',
+                    value: 'active',
+                    checked: props.getValue()
+                }}
+                onChange={(e) => {
+                    return chatTestChangeMutation.mutate({chatId: props.row.original.id, isTest: e.target.checked})
+                }}
+            />
+        </>
+    }
+
     const detailsView = (props: any) => (
         <Button
             appearance="text"
@@ -574,8 +625,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     }
                 },
                 {
-                  id: `customerSupportFullName`,
-                  header: t('chat.history.csaName') ?? '',
+                    id: `customerSupportFullName`,
+                    header: t('chat.history.csaName') ?? '',
                 }
             ),
             columnHelper.accessor(
@@ -660,11 +711,19 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             }));
         }
 
+        if (testMessageEnabled) {
+            columns.splice(4, 0, columnHelper.accessor('istest', {
+                id: 'istest',
+                header: t('global.test') ?? '',
+                cell: markConversationAsTest
+            }));
+        }
+
         return columns;
-    }, [t, showEmail])
+    }, [t, showEmail, testMessageEnabled])
 
     const getSortingString = () => {
-        if(sorting && sorting.length > 0) {
+        if (sorting && sorting.length > 0) {
             const sortingObject = sorting[0];
             const sortingString = t('sorting.sorting');
             const orderingString = t(`sorting.${sortingObject.desc ? 'desc' : 'asc'}`);
@@ -675,7 +734,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         }
     }
 
-    const getColumnTranslation = (column: string) : string => {
+    const getColumnTranslation = (column: string): string => {
         switch (column) {
             case 'endUserId':
                 return t('global.idCode') ?? ''
@@ -703,6 +762,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 return 'www'
             case 'id':
                 return 'id';
+            case 'istest':
+                return t('global.test') ?? ''
             default:
                 return '';
         }
@@ -902,7 +963,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     </Button>
                 </div>)
             }
-            <div className="card-drawer-container" style={{ height: '100%', overflow: 'auto' }}>
+            <div className="card-drawer-container" style={{height: '100%', overflow: 'auto'}}>
                 <div className="card-wrapper">
                     <Card>
                         <DataTable

package/ui-components/FormElements/FormCheckbox/FormCheckbox.scss

@@ -17,6 +17,8 @@
   }
 
   &__item {
+    position: relative;
+
     input[type=checkbox] {
       display: none;
 
@@ -53,5 +55,18 @@
         }
       }
     }
+
+    &--nolabel {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+
+      &::before {
+        position: static !important;
+        transform: none !important;
+        margin: 0;
+      }
+    }
   }
-}
+}

package/ui-components/FormElements/FormCheckbox/index.tsx

@@ -6,6 +6,7 @@ type FormCheckboxType = InputHTMLAttributes<HTMLInputElement> & {
     label: string;
     name: string;
     hideLabel?: boolean;
+    emptyItem?: boolean;
     item: {
         label: string;
         value: string;
@@ -18,6 +19,7 @@ const FormCheckbox = forwardRef<HTMLInputElement, FormCheckboxType>((
         label,
         name,
         hideLabel,
+        emptyItem,
         item,
         ...rest
     },
@@ -28,9 +30,13 @@ const FormCheckbox = forwardRef<HTMLInputElement, FormCheckboxType>((
     return (
         <div className='checkbox'>
             {label && !hideLabel && <label className='checkbox__label'>{label}</label>}
-            <div className='checkbox__item'>
+            <div className={`checkbox__item ${!emptyItem ? "checkbox__item--nolabel" : ""}`}>
                 <input ref={ref} type='checkbox' name={name} id={uid} value={item.value} defaultChecked={item.checked} {...rest} />
-                <label htmlFor={uid}>{item.label}</label>
+                {emptyItem ? (
+                    <label htmlFor={uid} className="checkbox__item--nolabel" />
+                ) : (
+                    <label htmlFor={uid}>{item.label}</label>
+                )}
             </div>
         </div>
     );

package/utils/multiDomain-utils.ts

@@ -1,7 +1,5 @@
-import useStore from "../store";
-
 export const getDomainsArray = (currentDomains) => {
-    const multiDomainEnabled = import.meta.env.REACT_APP_ENABLE_MULTI_DOMAIN.toLowerCase() === 'true';
+    const multiDomainEnabled = import.meta.env.REACT_APP_ENABLE_MULTI_DOMAIN?.toLowerCase() === 'true';
     const userDomains = currentDomains || [];
 
     return multiDomainEnabled ? (userDomains?.length > 0 ? userDomains : [null]) : [];