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

package/CHANGELOG.md

@@ -4,6 +4,15 @@ 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
+
 ## [0.0.23] - 21-07-2025
 
 - Initial support of multidomains

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.23",
+  "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,8 +1,8 @@
-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';
-import {format} from 'date-fns';
+import { format, startOfDay, endOfDay, formatISO } from "date-fns";
 import {AxiosError} from 'axios';
 import './History.scss';
 import {MdOutlineRemoveRedEye} from 'react-icons/md';
@@ -13,6 +13,7 @@ import {
     DataTable,
     Dialog,
     Drawer,
+    FormCheckbox,
     FormDatepicker,
     FormInput,
     FormMultiselect,
@@ -72,8 +73,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     const routerLocation = useLocation();
     const params = new URLSearchParams(routerLocation.search);
     let passedChatId = new URLSearchParams(routerLocation.search).get('chat');
-    const passedStartDate = delegatedStartDate ?? params.get('start');
-    const passedEndDate = delegatedStartDate ?? params.get('end');
+    const passedStartDate = delegatedStartDate ?? params.get("start");
+    const passedEndDate = delegatedEndDate ?? params.get("end");
     const skipNextSelectedColumnsEffect = useRef(false);
     const passedCustomerSupportIds = params.getAll('customerSupportIds');
     const [search, setSearch] = useState('');
@@ -108,7 +109,13 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     const useStore = userDomains;
     const [updateKey, setUpdateKey] = useState<number>(0)
     const currentDomains = useStore.getState().userDomains;
-    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 testMessageEnabled = import.meta.env.REACT_APP_SHOW_TEST_MESSAGE?.toLowerCase() === 'true';
+
+    const parseDateParam = (dateString: string | null) => {
+      if (!dateString) return new Date();
+      return new Date(dateString.split("+")[0]);
+    };
 
     const {control, setValue, watch} = useForm<{
         startDate: Date | string;
@@ -116,19 +123,11 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     }>({
         defaultValues: {
             startDate: passedStartDate
-                ? unifyDateFromat(passedStartDate)
-                : new Date(
-                    new Date().getUTCFullYear(),
-                    new Date().getUTCMonth(),
-                    new Date().getUTCDate()
-                ),
-            endDate: passedEndDate
-                ? unifyDateFromat(passedEndDate)
-                : new Date(
-                    new Date().getUTCFullYear(),
-                    new Date().getUTCMonth(),
-                    new Date().getUTCDate()
-                ),
+            ? parseDateParam(passedStartDate)
+            : new Date(new Date().setUTCHours(0, 0, 0, 0)),
+             endDate: passedEndDate
+            ? parseDateParam(passedEndDate)
+            : new Date(new Date().setUTCHours(23, 59, 59, 999)),
         },
     });
 
@@ -137,8 +136,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
 
     const debouncedGetAllEnded = useDebouncedCallback((search) => {
         getAllEndedChats.mutate({
-            startDate: format(new Date(startDate), 'yyyy-MM-dd'),
-            endDate: format(new Date(endDate), 'yyyy-MM-dd'),
+            startDate: formatISO(startOfDay(new Date(startDate))),
+            endDate: formatISO(endOfDay(new Date(endDate))),
             customerSupportIds: passedCustomerSupportIds,
             pagination,
             sorting,
@@ -146,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);
             }
         });
@@ -173,12 +172,12 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 setValue('endDate', unifyDateFromat(delegatedEndDate));
             }
 
-            if(initialLoad) {
+            if (initialLoad) {
                 fetchData()
             } else {
                 getAllEndedChats.mutate({
-                    startDate: hasStart ? unifyDateFromat(delegatedStartDate) : format(new Date(startDate), 'yyyy-MM-dd'),
-                    endDate: hasEnd ? unifyDateFromat(delegatedEndDate) : format(new Date(endDate), 'yyyy-MM-dd'),
+                    startDate: hasStart ? unifyDateFromat(delegatedStartDate) : formatISO(startOfDay(new Date(startDate))),
+                    endDate: hasEnd ? unifyDateFromat(delegatedEndDate) : formatISO(endOfDay(new Date(endDate))),
                     customerSupportIds: passedCustomerSupportIds,
                     pagination,
                     sorting,
@@ -214,8 +213,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 setCounterKey(prev => prev + 1);
 
                 getAllEndedChats.mutate({
-                    startDate: format(new Date(startDate), 'yyyy-MM-dd'),
-                    endDate: format(new Date(endDate), 'yyyy-MM-dd'),
+                    startDate: formatISO(startOfDay(new Date(startDate))),
+                    endDate: formatISO(endOfDay(new Date(endDate))),
                     customerSupportIds: passedCustomerSupportIds,
                     pagination: updatedPagination,
                     sorting,
@@ -243,15 +242,15 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             skipNextSelectedColumnsEffect.current = false;
         } else {
             getAllEndedChats.mutate({
-                startDate: format(new Date(startDate), 'yyyy-MM-dd'),
-                endDate: format(new Date(endDate), 'yyyy-MM-dd'),
+                startDate: formatISO(startOfDay(new Date(startDate))),
+                endDate: formatISO(endOfDay(new Date(endDate))),
                 customerSupportIds: passedCustomerSupportIds,
                 pagination,
                 sorting,
                 search,
             });
         }
-    }, [selectedColumns]);
+    }, [selectedColumns, currentDomains]);
 
     useEffect(() => {
         listCustomerSupportAgents.mutate();
@@ -288,8 +287,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
 
             return apiDev.post('agents/chats/ended', {
                 customerSupportIds: data.customerSupportIds,
-                startDate: format(new Date(data.startDate), 'yyyy-MM-dd'),
-                endDate: format(new Date(data.endDate), 'yyyy-MM-dd'),
+                startDate: formatISO(startOfDay(new Date(data.startDate))),
+                endDate: formatISO(endOfDay(new Date(data.endDate))),
                 urls: getDomainsArray(currentDomains),
                 page: data.pagination.pageIndex + 1,
                 page_size: data.pagination.pageSize,
@@ -359,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 }) => {
@@ -397,8 +400,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         onSuccess: () => {
             setMessagesTrigger(!messagesTrigger);
             getAllEndedChats.mutate({
-                startDate: format(new Date(startDate), 'yyyy-MM-dd'),
-                endDate: format(new Date(endDate), 'yyyy-MM-dd'),
+                startDate: formatISO(startOfDay(new Date(startDate))),
+                endDate: formatISO(endOfDay(new Date(endDate))),
                 customerSupportIds: passedCustomerSupportIds,
                 pagination,
                 sorting,
@@ -454,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) => {
@@ -523,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"
@@ -577,8 +625,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     }
                 },
                 {
-                  id: `customerSupportFullName`,
-                  header: t('chat.history.csaName') ?? '',
+                    id: `customerSupportFullName`,
+                    header: t('chat.history.csaName') ?? '',
                 }
             ),
             columnHelper.accessor(
@@ -663,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'}`);
@@ -678,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') ?? ''
@@ -706,6 +762,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 return 'www'
             case 'id':
                 return 'id';
+            case 'istest':
+                return t('global.test') ?? ''
             default:
                 return '';
         }
@@ -793,14 +851,14 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                     value={field.value ?? new Date()}
                                                     onChange={(v) => {
                                                         field.onChange(v);
-                                                        const start = format(new Date(v), 'yyyy-MM-dd');
+                                                        const start = formatISO(startOfDay(new Date(v)));
                                                         setSearchParams((params) => {
                                                             params.set('start', start);
                                                             return params;
                                                         });
                                                         getAllEndedChats.mutate({
                                                             startDate: start,
-                                                            endDate: format(new Date(endDate), 'yyyy-MM-dd'),
+                                                            endDate: formatISO(endOfDay(new Date(endDate))),
                                                             customerSupportIds: passedCustomerSupportIds,
                                                             pagination,
                                                             sorting,
@@ -825,13 +883,13 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                     value={field.value ?? new Date()}
                                                     onChange={(v) => {
                                                         field.onChange(v);
-                                                        const end = format(new Date(v), 'yyyy-MM-dd');
+                                                        const end = formatISO(endOfDay(new Date(v)));
                                                         setSearchParams((params) => {
                                                             params.set('end', end);
                                                             return params;
                                                         });
                                                         getAllEndedChats.mutate({
-                                                            startDate: format(new Date(startDate), 'yyyy-MM-dd'),
+                                                            startDate: formatISO(startOfDay(new Date(startDate))),
                                                             endDate: end,
                                                             customerSupportIds: passedCustomerSupportIds,
                                                             pagination,
@@ -905,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
@@ -928,8 +986,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                     selected_columns: selectedColumns
                                 });
                                 getAllEndedChats.mutate({
-                                    startDate: format(new Date(startDate), 'yyyy-MM-dd'),
-                                    endDate: format(new Date(endDate), 'yyyy-MM-dd'),
+                                    startDate: formatISO(startOfDay(new Date(startDate))),
+                                    endDate: formatISO(endOfDay(new Date(endDate))),
                                     customerSupportIds: passedCustomerSupportIds,
                                     pagination: state,
                                     sorting,
@@ -939,8 +997,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                             setSorting={(state: SortingState) => {
                                 setSorting(state);
                                 getAllEndedChats.mutate({
-                                    startDate: format(new Date(startDate), 'yyyy-MM-dd'),
-                                    endDate: format(new Date(endDate), 'yyyy-MM-dd'),
+                                    startDate: formatISO(startOfDay(new Date(startDate))),
+                                    endDate: formatISO(endOfDay(new Date(endDate))),
                                     customerSupportIds: passedCustomerSupportIds,
                                     pagination,
                                     sorting: state,

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]) : [];