snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/BlockChannelModal.tsx

@@ -0,0 +1,20 @@
+import { Box } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+export type BlockChannelModalProps = {
+	onCancel: () => void;
+	onConfirm: () => void;
+};
+
+const BlockChannelModal = ({ onCancel, onConfirm }: BlockChannelModalProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<GenericModal variant='danger' icon='ban' title={t('Block_channel')} confirmText={t('Block')} onConfirm={onConfirm} onCancel={onCancel}>
+			<Box>{t('Block_channel_description')}</Box>
+		</GenericModal>
+	);
+};
+
+export default BlockChannelModal;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx

@@ -0,0 +1,83 @@
+import type { ILivechatContact } from '@rocket.chat/core-typings';
+import { Box, States, StatesIcon, StatesTitle, Throbber } from '@rocket.chat/fuselage';
+import { VirtualizedScrollbars, ContextualbarContent, ContextualbarEmptyContent } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
+
+import ContactInfoChannelsItem from './ContactInfoChannelsItem';
+import useOutboundProvidersList from '../../../components/outboundMessage/hooks/useOutboundProvidersList';
+
+export type ContactInfoChannelsProps = {
+	contact: Pick<ILivechatContact, '_id' | 'unknown'>;
+};
+
+const ContactInfoChannels = ({ contact }: ContactInfoChannelsProps) => {
+	const { t } = useTranslation();
+
+	const getContactChannels = useEndpoint('GET', '/v1/omnichannel/contacts.channels');
+	const { data, isError, isPending } = useQuery({
+		queryKey: ['getContactChannels', contact._id],
+		queryFn: () => getContactChannels({ contactId: contact._id }),
+	});
+
+	const { data: providers = [] } = useOutboundProvidersList({
+		select: (data) => data.providers.map((provider) => provider.providerId),
+	});
+
+	if (isPending) {
+		return (
+			<ContextualbarContent>
+				<Box paddingBlock={12}>
+					<Throbber size='x12' />
+				</Box>
+			</ContextualbarContent>
+		);
+	}
+
+	if (isError) {
+		return (
+			<ContextualbarContent paddingInline={0}>
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+				</States>
+			</ContextualbarContent>
+		);
+	}
+
+	return (
+		<ContextualbarContent paddingInline={0}>
+			{data.channels?.length === 0 && (
+				<ContextualbarEmptyContent icon='balloon' title={t('No_channels_yet')} subtitle={t('No_channels_yet_description')} />
+			)}
+			{data.channels && data.channels.length > 0 && (
+				<>
+					<Box is='span' fontScale='p2' paddingBlockStart={24} paddingInlineStart={24} marginBlockEnd={8}>
+						{t('Last_contacts')}
+					</Box>
+					<Box role='list' flexGrow={1} flexShrink={1} overflow='hidden' display='flex'>
+						<VirtualizedScrollbars>
+							<Virtuoso
+								totalCount={data.channels.length}
+								overscan={25}
+								data={data?.channels}
+								itemContent={(index, data) => (
+									<ContactInfoChannelsItem
+										key={index}
+										{...data}
+										contact={contact}
+										canSendOutboundMessage={data.details.id ? providers.includes(data.details.id) : false}
+									/>
+								)}
+							/>
+						</VirtualizedScrollbars>
+					</Box>
+				</>
+			)}
+		</ContextualbarContent>
+	);
+};
+
+export default ContactInfoChannels;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannelsItem.tsx

@@ -0,0 +1,118 @@
+import type { ILivechatContact, ILivechatContactChannel, Serialized } from '@rocket.chat/core-typings';
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Palette } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useBlockChannel } from './useBlockChannel';
+import { OmnichannelRoomIcon } from '../../../../../components/RoomIcon/OmnichannelRoomIcon';
+import { useTimeFromNow } from '../../../../../hooks/useTimeFromNow';
+import { useOutboundMessageModal } from '../../../components/outboundMessage/modals/OutboundMessageModal';
+import { useVisitorInfo } from '../../../directory/hooks/useVisitorInfo';
+import { useOmnichannelSource } from '../../../hooks/useOmnichannelSource';
+
+export type ContactInfoChannelsItemProps = Serialized<ILivechatContactChannel> & {
+	contact?: Pick<ILivechatContact, '_id' | 'unknown'>;
+	canSendOutboundMessage?: boolean;
+};
+
+const ContactInfoChannelsItem = ({
+	contact,
+	visitor,
+	details,
+	blocked,
+	lastChat,
+	canSendOutboundMessage,
+}: ContactInfoChannelsItemProps) => {
+	const { t } = useTranslation();
+	const { getSourceLabel, getSourceName } = useOmnichannelSource();
+	const getTimeFromNow = useTimeFromNow(true);
+
+	const { data: visitorData } = useVisitorInfo(visitor.visitorId);
+
+	const channelLabel = useMemo(() => {
+		const phone = getSourceLabel(details);
+		const externalId = details?.id ? visitorData?.externalIds?.find((e) => e.appId === details.id) : undefined;
+		const username = externalId?.metadata?.username;
+
+		if (typeof username === 'string' && phone) {
+			return `${username} - ${phone}`;
+		}
+		return typeof username === 'string' ? username : phone;
+	}, [visitorData?.externalIds, details, getSourceLabel]);
+
+	const [showButton, setShowButton] = useState(false);
+	const handleBlockContact = useBlockChannel({ association: visitor, blocked });
+	const outboundMessageModal = useOutboundMessageModal();
+
+	const customClass = css`
+		&:hover,
+		&:focus {
+			background: ${Palette.surface['surface-hover']};
+		}
+	`;
+
+	const menuItems = useMemo(() => {
+		const items: GenericMenuItemProps[] = [
+			{
+				id: 'block',
+				icon: 'ban',
+				content: blocked ? t('Unblock') : t('Block'),
+				variant: 'danger',
+				onClick: handleBlockContact,
+			},
+		];
+
+		if (canSendOutboundMessage) {
+			items.unshift({
+				id: 'outbound-message',
+				icon: 'send',
+				disabled: contact?.unknown,
+				tooltip: contact?.unknown ? t('error-unknown-contact') : undefined,
+				content: t('Outbound_message'),
+				onClick: () => outboundMessageModal.open({ contactId: contact?._id, providerId: details.id }),
+			});
+		}
+
+		return items;
+	}, [blocked, canSendOutboundMessage, contact?._id, contact?.unknown, details.id, handleBlockContact, outboundMessageModal, t]);
+
+	return (
+		<Box
+			tabIndex={0}
+			borderBlockEndWidth={1}
+			borderBlockEndColor='stroke-extra-light'
+			borderBlockEndStyle='solid'
+			className={['rcx-box--animated', customClass]}
+			paddingInline={24}
+			paddingBlock={12}
+			display='flex'
+			flexDirection='column'
+			onFocus={() => setShowButton(true)}
+			onPointerEnter={() => setShowButton(true)}
+			onPointerLeave={() => setShowButton(false)}
+		>
+			<Box display='flex' alignItems='center'>
+				{details && <OmnichannelRoomIcon source={details} size='x18' placement='default' />}
+				{details && (
+					<Box marginInline={4} fontScale='p2b'>
+						{getSourceName(details)} {blocked && `(${t('Blocked')})`}
+					</Box>
+				)}
+				{lastChat && (
+					<Box marginInlineStart={4} fontScale='c1'>
+						{getTimeFromNow(lastChat.ts)}
+					</Box>
+				)}
+			</Box>
+			<Box minHeight='x24' alignItems='center' marginBlockStart={4} display='flex' justifyContent='space-between'>
+				<Box>{channelLabel}</Box>
+				{showButton && <GenericMenu detached title={t('Options')} sections={[{ items: menuItems }]} tiny />}
+			</Box>
+		</Box>
+	);
+};
+
+export default ContactInfoChannelsItem;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/index.ts

@@ -0,0 +1 @@
+export { default } from './ContactInfoChannels';

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/useBlockChannel.tsx

@@ -0,0 +1,52 @@
+import type { ILivechatContactVisitorAssociation } from '@rocket.chat/core-typings';
+import { useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import BlockChannelModal from './BlockChannelModal';
+import { useHasLicenseModule } from '../../../../../hooks/useHasLicenseModule';
+import AdvancedContactModal from '../../AdvancedContactModal';
+
+export const useBlockChannel = ({ blocked, association }: { blocked: boolean; association: ILivechatContactVisitorAssociation }) => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const { data: hasLicense = false } = useHasLicenseModule('contact-id-verification');
+	const queryClient = useQueryClient();
+
+	const blockContact = useEndpoint('POST', '/v1/omnichannel/contacts.block');
+	const unblockContact = useEndpoint('POST', '/v1/omnichannel/contacts.unblock');
+
+	const handleUnblock = useCallback(async () => {
+		try {
+			await unblockContact({ visitor: association });
+			dispatchToastMessage({ type: 'success', message: t('Contact_unblocked') });
+			queryClient.invalidateQueries({ queryKey: ['getContactById'] });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	}, [association, dispatchToastMessage, queryClient, t, unblockContact]);
+
+	const handleBlock = useCallback(() => {
+		if (!hasLicense) {
+			return setModal(<AdvancedContactModal onCancel={() => setModal(null)} />);
+		}
+
+		const blockAction = async () => {
+			try {
+				await blockContact({ visitor: association });
+				dispatchToastMessage({ type: 'success', message: t('Contact_blocked') });
+				queryClient.invalidateQueries({ queryKey: ['getContactById'] });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal(null);
+			}
+		};
+
+		setModal(<BlockChannelModal onCancel={() => setModal(null)} onConfirm={blockAction} />);
+	}, [association, blockContact, dispatchToastMessage, hasLicense, queryClient, setModal, t]);
+
+	return blocked ? handleUnblock : handleBlock;
+};