refactor: Get custom fields from useCustomFieldsQuery

apps/meteor/client/lib/queryKeys.ts

@@ -50,6 +50,7 @@ export const omnichannelQueryKeys = {
 	livechat: {
 		appearance: () => [...omnichannelQueryKeys.all, 'livechat', 'appearance'] as const,
 		customFields: () => [...omnichannelQueryKeys.all, 'livechat', 'custom-fields'] as const,
+		customFieldsMetadata: (scope: 'visitor' | 'room') => [...omnichannelQueryKeys.all, 'livechat', 'custom-fields', scope] as const,
 	},
 	visitorInfo: (uid: string) => [...omnichannelQueryKeys.all, 'visitor-info', uid] as const,
 	analytics: {

apps/meteor/client/views/omnichannel/contactInfo/hooks/useValidCustomFields.ts

@@ -1,9 +1,10 @@
+import type { ILivechatCustomField } from '@rocket.chat/core-typings';
 import { usePermission } from '@rocket.chat/ui-contexts';
 import { useMemo } from 'react';
 
-import { useCustomFieldsQuery } from './useCustomFieldsQuery';
+import { useCustomFieldsQuery } from '../../hooks/useCustomFieldsQuery';
 
-const checkIsVisibleAndScopeVisitor = (key: string, customFields: Record<string, string | unknown>[]) => {
+const checkIsVisibleAndScopeVisitor = (key: string, customFields: ILivechatCustomField[]) => {
 	const field = customFields?.find(({ _id }) => _id === key);
 	return field?.visibility === 'visible' && field?.scope === 'visitor';
 };

apps/meteor/client/views/omnichannel/currentChats/CurrentChatsPage.tsx

@@ -12,7 +12,6 @@ import { Trans, useTranslation } from 'react-i18next';
 import CustomFieldsList from './CustomFieldsList';
 import FilterByText from './FilterByText';
 import RemoveChatButton from './RemoveChatButton';
-import { useAllCustomFields } from './hooks/useAllCustomFields';
 import { useCurrentChats } from './hooks/useCurrentChats';
 import GenericNoResults from '../../../components/GenericNoResults';
 import {
@@ -29,6 +28,7 @@ import { useSort } from '../../../components/GenericTable/hooks/useSort';
 import { Page, PageHeader, PageContent } from '../../../components/Page';
 import { links } from '../../../lib/links';
 import RoomActivityIcon from '../components/RoomActivityIcon';
+import { useCustomFieldsQuery } from '../hooks/useCustomFieldsQuery';
 import { useIsOverMacLimit } from '../hooks/useIsOverMacLimit';
 import { useOmnichannelPriorities } from '../hooks/useOmnichannelPriorities';
 import { PriorityIcon } from '../priorities/PriorityIcon';
@@ -138,7 +138,7 @@ const CurrentChatsPage = ({ id, onRowClick }: { id?: string; onRowClick: (_id: s
 	const canRemoveClosedChats = usePermission('remove-closed-livechat-room');
 	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
 
-	const { data: allCustomFields } = useAllCustomFields();
+	const { data: allCustomFields } = useCustomFieldsQuery();
 
 	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
 

apps/meteor/client/views/omnichannel/customFields/CustomFieldsTable.tsx

@@ -1,7 +1,7 @@
 import { IconButton, Pagination } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
-import { useQuery, hashKey } from '@tanstack/react-query';
+import { useTranslation, useRouter } from '@rocket.chat/ui-contexts';
+import { hashKey } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
 
 import { useRemoveCustomField } from './useRemoveCustomField';
@@ -19,6 +19,7 @@ import {
 import { usePagination } from '../../../components/GenericTable/hooks/usePagination';
 import { useSort } from '../../../components/GenericTable/hooks/useSort';
 import { links } from '../../../lib/links';
+import { useCustomFieldsQuery } from '../hooks/useCustomFieldsQuery';
 
 const CustomFieldsTable = () => {
 	const t = useTranslation();
@@ -46,11 +47,7 @@ const CustomFieldsTable = () => {
 		500,
 	);
 
-	const getCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');
-	const { data, isSuccess, isLoading } = useQuery({
-		queryKey: ['livechat-customFields', query],
-		queryFn: async () => getCustomFields(query),
-	});
+	const { data, isSuccess, isLoading } = useCustomFieldsQuery();
 
 	const [defaultQuery] = useState(hashKey([query]));
 	const queryHasChanged = defaultQuery !== hashKey([query]);

apps/meteor/client/views/omnichannel/customFields/EditCustomFields.tsx

@@ -28,6 +28,7 @@ import { FormProvider, useForm, Controller } from 'react-hook-form';
 
 import { CustomFieldsAdditionalForm } from '../additionalForms';
 import { useRemoveCustomField } from './useRemoveCustomField';
+import { omnichannelQueryKeys } from '../../../lib/queryKeys';
 
 export type EditCustomFieldsFormData = {
 	field: string;
@@ -86,7 +87,7 @@ const EditCustomFields = ({ customFieldData, onClose }: { customFieldData?: Seri
 
 			dispatchToastMessage({ type: 'success', message: t('Saved') });
 			queryClient.invalidateQueries({
-				queryKey: ['livechat-customFields'],
+				queryKey: omnichannelQueryKeys.livechat.customFields(),
 			});
 			onClose();
 		} catch (error) {

apps/meteor/client/views/omnichannel/customFields/useRemoveCustomField.tsx

@@ -4,6 +4,8 @@ import { useSetModal, useToastMessageDispatch, useEndpoint } from '@rocket.chat/
 import { useQueryClient } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 
+import { omnichannelQueryKeys } from '../../../lib/queryKeys';
+
 export const useRemoveCustomField = () => {
 	const { t } = useTranslation();
 	const setModal = useSetModal();
@@ -17,7 +19,7 @@ export const useRemoveCustomField = () => {
 				await removeCustomField({ customFieldId: id });
 				dispatchToastMessage({ type: 'success', message: t('Custom_Field_Removed') });
 				queryClient.invalidateQueries({
-					queryKey: ['livechat-customFields'],
+					queryKey: omnichannelQueryKeys.livechat.customFields(),
 				});
 			} catch (error) {
 				dispatchToastMessage({ type: 'error', message: error });

apps/meteor/client/views/omnichannel/directory/chats/ChatInfo/ChatInfo.tsx

@@ -3,16 +3,7 @@ import { Box, Margins, Tag, Button, ButtonGroup } from '@rocket.chat/fuselage';
 import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import { ContextualbarScrollableContent, ContextualbarFooter } from '@rocket.chat/ui-client';
 import type { IRouterPaths } from '@rocket.chat/ui-contexts';
-import {
-	useToastMessageDispatch,
-	useRoute,
-	useUserSubscription,
-	useTranslation,
-	usePermission,
-	useEndpoint,
-	useUserId,
-} from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
+import { useToastMessageDispatch, useRoute, useUserSubscription, useTranslation, usePermission, useUserId } from '@rocket.chat/ui-contexts';
 import moment from 'moment';
 import { useMemo } from 'react';
 
@@ -22,8 +13,8 @@ import { InfoPanelField, InfoPanelLabel, InfoPanelText } from '../../../../../co
 import MarkdownText from '../../../../../components/MarkdownText';
 import { useFormatDateAndTime } from '../../../../../hooks/useFormatDateAndTime';
 import { useFormatDuration } from '../../../../../hooks/useFormatDuration';
-import { omnichannelQueryKeys } from '../../../../../lib/queryKeys';
 import CustomField from '../../../components/CustomField';
+import { useValidCustomFields } from '../../../contactInfo/hooks/useValidCustomFields';
 import { AgentField, SlaField, ContactField, SourceField } from '../../components';
 import PriorityField from '../../components/PriorityField';
 import { useOmnichannelRoomInfo } from '../../hooks/useOmnichannelRoomInfo';
@@ -40,14 +31,6 @@ function ChatInfo({ id, route }: ChatInfoProps) {
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const formatDateAndTime = useFormatDateAndTime();
-	const getLivechatCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');
-	const { data: customFields = [] } = useQuery({
-		queryKey: omnichannelQueryKeys.livechat.customFields(),
-		queryFn: async () => {
-			const { customFields } = await getLivechatCustomFields();
-			return customFields;
-		},
-	});
 	const formatDuration = useFormatDuration();
 
 	const { data: room } = useOmnichannelRoomInfo(id); // FIXME: `room` is serialized, but we need to deserialize it
@@ -72,7 +55,6 @@ function ChatInfo({ id, route }: ChatInfoProps) {
 	} = room ?? {};
 
 	const routePath = useRoute(route || 'omnichannel-directory');
-	const canViewCustomFields = usePermission('view-livechat-room-customfields');
 	const subscription = useUserSubscription(id);
 	const hasGlobalEditRoomPermission = usePermission('save-others-livechat-room-info');
 	const hasLocalEditRoomPermission = servedBy?._id === useUserId();
@@ -81,10 +63,7 @@ function ChatInfo({ id, route }: ChatInfoProps) {
 
 	const queueTime = useMemo(() => formatQueuedAt(room), [room]);
 
-	const checkIsVisibleAndScopeRoom = (key: string) => {
-		const field = customFields.find(({ _id }) => _id === key);
-		return field?.visibility === 'visible' && field?.scope === 'room';
-	};
+	const customFieldEntries = useValidCustomFields(livechatData);
 
 	const onEditClick = useEffectEvent(() => {
 		const hasEditAccess = !!subscription || hasLocalEditRoomPermission || hasGlobalEditRoomPermission;
@@ -107,10 +86,6 @@ function ChatInfo({ id, route }: ChatInfoProps) {
 		);
 	});
 
-	const customFieldEntries: [string, any][] = Object.entries(livechatData || {}).filter(
-		([key]) => checkIsVisibleAndScopeRoom(key) && livechatData[key],
-	);
-
 	return (
 		<>
 			<ContextualbarScrollableContent p={24}>
@@ -186,7 +161,8 @@ function ChatInfo({ id, route }: ChatInfoProps) {
 							<InfoPanelText>{moment(responseBy.lastMessageTs).fromNow(true)}</InfoPanelText>
 						</InfoPanelField>
 					)}
-					{canViewCustomFields && customFieldEntries.map(([key, value]) => <CustomField key={key} id={key} value={value} />)}
+					{customFieldEntries?.length > 0 &&
+						customFieldEntries.map(([key, value]) => <CustomField key={key} id={key} value={value as string} />)}
 					{slaId && <SlaField id={slaId} />}
 					{priorityId && <PriorityField id={priorityId} />}
 				</Margins>

apps/meteor/client/views/omnichannel/directory/chats/ChatsFiltersContextualBar.tsx

@@ -8,8 +8,7 @@ import {
 	ContextualbarFooter,
 	ContextualbarDialog,
 } from '@rocket.chat/ui-client';
-import { useEndpoint, usePermission } from '@rocket.chat/ui-contexts';
-import { useQuery } from '@tanstack/react-query';
+import { usePermission } from '@rocket.chat/ui-contexts';
 import { format } from 'date-fns';
 import { useId } from 'react';
 import { Controller, useForm } from 'react-hook-form';
@@ -20,6 +19,7 @@ import { CurrentChatTags } from '../../additionalForms';
 import AutoCompleteUnits from '../../additionalForms/AutoCompleteUnits';
 import AutoCompleteDepartmentMultiple from '../../components/AutoCompleteDepartmentMultiple';
 import AutoCompleteMultipleAgent from '../../components/AutoCompleteMultipleAgent';
+import { useCustomFieldsQuery } from '../../hooks/useCustomFieldsQuery';
 import type { ChatsFiltersQuery } from '../contexts/ChatsContext';
 import { useChatsContext } from '../contexts/ChatsContext';
 
@@ -33,8 +33,7 @@ const ChatsFiltersContextualBar = ({ onClose }: ChatsFiltersContextualBarProps)
 	const canViewCustomFields = usePermission('view-livechat-room-customfields');
 	const { data: isEnterprise = false } = useHasLicenseModule('livechat-enterprise');
 
-	const allCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');
-	const { data } = useQuery({ queryKey: ['livechat/custom-fields'], queryFn: async () => allCustomFields() });
+	const { data } = useCustomFieldsQuery();
 	const contactCustomFields = data?.customFields.filter((customField) => customField.scope !== 'visitor');
 
 	const { filtersQuery, setFiltersQuery, resetFiltersQuery, hasAppliedFilters } = useChatsContext();

apps/meteor/client/views/omnichannel/directory/hooks/useCustomFieldsMetadata.tsx

@@ -1,6 +1,7 @@
-import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 
+import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
+import { useCustomFieldsQuery } from '../../hooks/useCustomFieldsQuery';
 import { formatCustomFieldsMetadata } from '../utils/formatCustomFieldsMetadata';
 
 type UseCustomFieldsMetadataOptions = {
@@ -9,15 +10,10 @@ type UseCustomFieldsMetadataOptions = {
 };
 
 export const useCustomFieldsMetadata = ({ enabled = true, scope }: UseCustomFieldsMetadataOptions) => {
-	const getCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');
+	const { data, isSuccess } = useCustomFieldsQuery();
 	return useQuery({
-		queryKey: ['/v1/livechat/custom-fields', scope],
-
-		queryFn: async () => {
-			const { customFields } = (await getCustomFields()) ?? {};
-			return formatCustomFieldsMetadata(customFields, scope);
-		},
-
-		enabled,
+		queryKey: omnichannelQueryKeys.livechat.customFieldsMetadata(scope),
+		queryFn: async () => formatCustomFieldsMetadata(data?.customFields, scope),
+		enabled: enabled && isSuccess,
 	});
 };

apps/meteor/client/views/omnichannel/directory/utils/formatCustomFieldsMetadata.tsx

@@ -1,7 +1,7 @@
-import type { ILivechatCustomField, Serialized, CustomFieldMetadata } from '@rocket.chat/core-typings';
+import type { ILivechatCustomField, CustomFieldMetadata } from '@rocket.chat/core-typings';
 
 export const formatCustomFieldsMetadata = (
-	customFields: Serialized<ILivechatCustomField>[],
+	customFields: ILivechatCustomField[] | undefined,
 	scope: 'visitor' | 'room',
 ): CustomFieldMetadata[] => {
 	if (!customFields) {

apps/meteor/client/views/omnichannel/hooks/useCustomFieldsQuery.ts

@@ -0,0 +1,11 @@
+import type { OperationResult } from '@rocket.chat/rest-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+import { omnichannelQueryKeys } from '../../../lib/queryKeys';
+
+export const useCustomFieldsQuery = (): UseQueryResult<OperationResult<'GET', '/v1/livechat/custom-fields'>> => {
+	const getCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');
+	return useQuery({ queryKey: omnichannelQueryKeys.livechat.customFields(), queryFn: async () => getCustomFields() });
+};