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

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [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
+- Added updated key to force fetching on domain change
+- Updated store params
+- Made store export state for reusability
+
 ## [0.0.22] - 01-07-2025
 
 - Handled Previous Messages Edge Case in Buttons

package/package.json

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

package/store/index.ts

@@ -8,7 +8,7 @@ import {
 } from '../types/chat';
 import { apiDev } from '../services/api';
 
-interface StoreState {
+export interface StoreState {
     userInfo: UserInfo | null;
     userId: string;
     activeChats: ChatType[];
@@ -31,6 +31,8 @@ interface StoreState {
     getGroupedUnansweredChats: () => GroupedChat;
     loadPendingChats: () => Promise<void>;
     getGroupedPendingChats: () => GroupedPendingChat;
+    userDomains: string[];
+    setUserDomains: (domains: string[]) => void;
 }
 
 const useStore = create<StoreState>((set, get, store) => ({
@@ -38,12 +40,14 @@ const useStore = create<StoreState>((set, get, store) => ({
     userId: '',
     activeChats: [],
     pendingChats: [],
+    userDomains: [],
     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 }),
+    setUserDomains: (data: string[]) => set({ userDomains: data}),
     setChatCsaActive: (active) => {
         set({
             chatCsaActive: active,

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

@@ -2,7 +2,7 @@ import React, {FC, PropsWithChildren, useEffect, useRef, useMemo, useState} from
 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';
@@ -32,8 +32,12 @@ import {useDebouncedCallback} from 'use-debounce';
 import {UserInfo} from "../../../types/userInfo";
 import {ToastContextType} from "../../../context";
 
+import {getDomainsArray} from "../../../utils/multiDomain-utils";
+import {StoreState} from "../../../store";
+
 type HistoryProps = {
     user: UserInfo | null;
+    userDomains: StoreState;
     toastContext: ToastContextType | null;
     onMessageClick?: (message: any) => void;
     showComment?: boolean;
@@ -49,6 +53,7 @@ type HistoryProps = {
 
 const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                               user,
+                                                              userDomains,
                                                               toastContext,
                                                               onMessageClick,
                                                               showComment = true,
@@ -67,8 +72,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('');
@@ -100,25 +105,27 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     const [customerSupportAgents, setCustomerSupportAgents] = useState<any[]>([]);
     const [counterKey, setCounterKey] = useState<number>(0)
 
+    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 parseDateParam = (dateString: string | null) => {
+      if (!dateString) return new Date();
+      return new Date(dateString.split("+")[0]);
+    };
+
     const {control, setValue, watch} = useForm<{
         startDate: Date | string;
         endDate: Date | string;
     }>({
         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)),
         },
     });
 
@@ -127,8 +134,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,
@@ -136,6 +143,14 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         });
     }, 500);
 
+    if(multiDomainEnabled) {
+        useStore.subscribe((state, prevState) => {
+            if(JSON.stringify(state.userDomains) !== JSON.stringify(prevState.userDomains)) {
+                setUpdateKey(prevState => prevState + 1);
+            }
+        });
+    }
+
     useEffect(() => {
         if (passedChatId != null) {
             getChatById.mutate();
@@ -159,8 +174,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 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,
@@ -168,7 +183,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 });
             }
         }
-    }, [delegatedStartDate, delegatedEndDate]);
+    }, [delegatedStartDate, delegatedEndDate, updateKey]);
 
 
     const fetchData = async () => {
@@ -196,8 +211,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,
@@ -225,8 +240,8 @@ 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,
@@ -270,8 +285,9 @@ 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,
                 sorting: sortBy,
@@ -378,8 +394,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,
@@ -774,14 +790,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,
@@ -806,13 +822,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,
@@ -909,8 +925,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,
@@ -920,8 +936,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/utils/multiDomain-utils.ts

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