diff --git a/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx b/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx
index 7058465492fe..a66c0cddd615 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx
@@ -118,7 +118,7 @@ const ContactInfo = ({ contact, onClose }: ContactInfoProps) => {
customFieldEntries={customFieldEntries}
/>
)}
- {context === 'channels' && }
+ {context === 'channels' && }
{context === 'history' && showContactHistory && }
>
);
diff --git a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx
index 6d2ffa311bf7..0a5e18d858e0 100644
--- a/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx
+++ b/apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx
@@ -1,35 +1,57 @@
-import type { ILivechatContactChannel, Serialized } from '@rocket.chat/core-typings';
-import { Box } from '@rocket.chat/fuselage';
-import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ILivechatContact } from '@rocket.chat/core-typings';
+import { Box, States, StatesIcon, StatesTitle, Throbber } from '@rocket.chat/fuselage';
+import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
import React from 'react';
+import { Virtuoso } from 'react-virtuoso';
-import { ContextualbarEmptyContent, ContextualbarScrollableContent } from '../../../../../components/Contextualbar';
+import { ContextualbarContent, ContextualbarEmptyContent } from '../../../../../components/Contextualbar';
+import { VirtuosoScrollbars } from '../../../../../components/CustomScrollbars';
import ContactInfoChannelsItem from './ContactInfoChannelsItem';
type ContactInfoChannelsProps = {
- channels?: Serialized[];
+ contactId: ILivechatContact['_id'];
};
-const ContactInfoChannels = ({ channels }: ContactInfoChannelsProps) => {
+const ContactInfoChannels = ({ contactId }: ContactInfoChannelsProps) => {
const t = useTranslation();
- if (!channels || channels.length === 0) {
- return ;
- }
+ const getContactChannels = useEndpoint('GET', '/v1/omnichannel/contacts.channels');
+ const { data, isError, isLoading } = useQuery(['getContactChannels', contactId], () => getContactChannels({ contactId }));
return (
- <>
-
- {t('Last_contacts')}
-
-
-
- {channels.map((channel) => (
-
- ))}
+
+ {isLoading && (
+
+
-
- >
+ )}
+ {isError && (
+
+
+ {t('Something_went_wrong')}
+
+ )}
+ {data?.channels?.length === 0 && (
+
+ )}
+ {!isError && data?.channels && data.channels.length > 0 && (
+ <>
+
+ {t('Last_contacts')}
+
+
+ }
+ />
+
+ >
+ )}
+
);
};