[FIX] Comunity users accessing exclusive ee endpoints in omnichannel section

apps/meteor/client/components/Omnichannel/Tags.tsx

@@ -1,11 +1,10 @@
 import { Field, TextInput, Chip, Button } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useToastMessageDispatch, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import type { ChangeEvent, ReactElement } from 'react';
 import React, { useState } from 'react';
 
-import { AsyncStatePhase } from '../../hooks/useAsyncState';
-import { useEndpointData } from '../../hooks/useEndpointData';
 import { useFormsSubscription } from '../../views/omnichannel/additionalForms';
 import { FormSkeleton } from './Skeleton';
 
@@ -23,13 +22,16 @@ const Tags = ({
 	const t = useTranslation();
 	const forms = useFormsSubscription() as any;
 
-	const { value: tagsResult, phase: stateTags } = useEndpointData('/v1/livechat/tags');
-
 	// TODO: Refactor the formsSubscription to use components instead of hooks (since the only thing the hook does is return a component)
 	const { useCurrentChatTags } = forms;
 	// Conditional hook was required since the whole formSubscription uses hooks in an incorrect manner
 	const EETagsComponent = useCurrentChatTags?.();
 
+	const getTags = useEndpoint('GET', '/v1/livechat/tags');
+	const { data: tagsResult, isInitialLoading } = useQuery(['/v1/livechat/tags'], () => getTags({ text: '' }), {
+		enabled: Boolean(EETagsComponent),
+	});
+
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const [tagValue, handleTagValue] = useState('');
@@ -61,7 +63,7 @@ const Tags = ({
 		handleTagValue('');
 	});
 
-	if ([stateTags].includes(AsyncStatePhase.LOADING)) {
+	if (isInitialLoading) {
 		return <FormSkeleton />;
 	}
 

apps/meteor/ee/client/omnichannel/tags/TagEditWithData.js

@@ -1,23 +1,22 @@
 import { Callout } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 import { FormSkeleton } from '../../../../client/components/Skeleton';
-import { AsyncStatePhase } from '../../../../client/hooks/useAsyncState';
-import { useEndpointData } from '../../../../client/hooks/useEndpointData';
 import TagEdit from './TagEdit';
 import TagEditWithDepartmentData from './TagEditWithDepartmentData';
 
 function TagEditWithData({ tagId, reload, title }) {
-	const { value: data, phase: state, error } = useEndpointData('/v1/livechat/tags/:tagId', { keys: { tagId } });
-
+	const getTag = useEndpoint('GET', '/v1/livechat/tags/:tagId', { tagId });
+	const { data, isLoading, isError } = useQuery(['/v1/livechat/tags/:tagId', tagId], () => getTag(), { enabled: Boolean(tagId) });
 	const t = useTranslation();
 
-	if ([state].includes(AsyncStatePhase.LOADING)) {
+	if (isLoading && tagId) {
 		return <FormSkeleton />;
 	}
 
-	if (error) {
+	if (isError) {
 		return (
 			<Callout m='x16' type='danger'>
 				{t('Not_Available')}

apps/meteor/ee/client/omnichannel/units/UnitsRoute.js

@@ -1,19 +1,20 @@
 import { Table } from '@rocket.chat/fuselage';
 import { useDebouncedValue, useMutableCallback } from '@rocket.chat/fuselage-hooks';
-import { useRouteParameter, useRoute, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
+import { useEndpoint, useRouteParameter, useRoute, usePermission, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
 import React, { useMemo, useCallback, useState } from 'react';
 
 import GenericTable from '../../../../client/components/GenericTable';
-import { useEndpointData } from '../../../../client/hooks/useEndpointData';
 import NotAuthorizedPage from '../../../../client/views/notAuthorized/NotAuthorizedPage';
+import { useHasLicenseModule } from '../../hooks/useHasLicenseModule';
 import RemoveUnitButton from './RemoveUnitButton';
 import UnitEdit from './UnitEdit';
 import UnitEditWithData from './UnitEditWithData';
 import UnitsPage from './UnitsPage';
 
 const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);
 
-const useQuery = ({ text, itemsPerPage, current }, [column, direction]) =>
+const useQueryFilter = ({ text, itemsPerPage, current }, [column, direction]) =>
 	useMemo(
 		() => ({
 			fields: JSON.stringify({ name: 1 }),
@@ -31,13 +32,14 @@ const useQuery = ({ text, itemsPerPage, current }, [column, direction]) =>
 function UnitsRoute() {
 	const t = useTranslation();
 	const canViewUnits = usePermission('manage-livechat-units');
+	const isEnterprise = useHasLicenseModule('livechat-enterprise');
 
 	const [params, setParams] = useState({ text: '', current: 0, itemsPerPage: 25 });
 	const [sort, setSort] = useState(['name', 'asc']);
 
 	const debouncedParams = useDebouncedValue(params, 500);
 	const debouncedSort = useDebouncedValue(sort, 500);
-	const query = useQuery(debouncedParams, debouncedSort);
+	const query = useQueryFilter(debouncedParams, debouncedSort);
 	const unitsRoute = useRoute('omnichannel-units');
 	const context = useRouteParameter('context');
 	const id = useRouteParameter('id');
@@ -60,7 +62,8 @@ function UnitsRoute() {
 			}),
 	);
 
-	const { value: data = {}, reload } = useEndpointData('/v1/livechat/units', { params: query });
+	const getUnits = useEndpoint('GET', '/v1/livechat/units', { params: query });
+	const { data, refetch: reload } = useQuery(['/v1/livechat/units'], () => getUnits());
 
 	const header = useMemo(
 		() =>
@@ -103,7 +106,7 @@ function UnitsRoute() {
 		return <UnitEdit title={t('New_Unit')} reload={reload} isNew={true} />;
 	}
 
-	if (!canViewUnits) {
+	if (!(isEnterprise && canViewUnits)) {
 		return <NotAuthorizedPage />;
 	}
 
@@ -113,7 +116,6 @@ function UnitsRoute() {
 			params={params}
 			onHeaderClick={onHeaderClick}
 			data={data}
-			useQuery={useQuery}
 			reload={reload}
 			header={header}
 			renderRow={renderRow}