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')} + + + } + /> + + + )} + ); };