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

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

@@ -0,0 +1,75 @@
+import type { ILivechatContact } from '@rocket.chat/core-typings';
+import { Divider, Margins } from '@rocket.chat/fuselage';
+import { ContextualbarScrollableContent } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import ContactInfoDetailsEntry from './ContactInfoDetailsEntry';
+import ContactInfoPhoneEntry from './ContactInfoPhoneEntry';
+import ContactManagerInfo from './ContactManagerInfo';
+import { useFormatDate } from '../../../../../hooks/useFormatDate';
+import CustomField from '../../../components/CustomField';
+import Field from '../../../components/Field';
+import Info from '../../../components/Info';
+import Label from '../../../components/Label';
+
+export type ContactInfoDetailsProps = {
+	contact: Pick<ILivechatContact, '_id' | 'unknown'>;
+	emails?: string[];
+	phones?: string[];
+	createdAt: string;
+	customFieldEntries: [string, string | unknown][];
+	contactManager?: string;
+};
+
+const ContactInfoDetails = ({ contact, emails, phones, createdAt, customFieldEntries, contactManager }: ContactInfoDetailsProps) => {
+	const { t } = useTranslation();
+	const formatDate = useFormatDate();
+
+	return (
+		<ContextualbarScrollableContent>
+			{emails?.length ? (
+				<Field>
+					<Label id={`${contact._id}-emails`}>{t('Email')}</Label>
+					<ul aria-labelledby={`${contact._id}-emails`}>
+						{emails.map((email) => (
+							<ContactInfoDetailsEntry key={email} is='li' icon='mail' value={email} />
+						))}
+					</ul>
+				</Field>
+			) : null}
+
+			{phones?.length ? (
+				<Field>
+					<Label id={`${contact._id}-phones`}>{t('Phone')}</Label>
+					<ul aria-labelledby={`${contact._id}-phones`}>
+						{phones.map((phone) => (
+							<ContactInfoPhoneEntry key={phone} is='li' contact={contact} value={phone} />
+						))}
+					</ul>
+				</Field>
+			) : null}
+
+			{contactManager ? <ContactManagerInfo userId={contactManager} /> : null}
+
+			<Margins block={4}>
+				{createdAt && (
+					<Field>
+						<Label id={`${contact._id}-created-at`}>{t('Created_at')}</Label>
+						<Info aria-labelledby={`${contact._id}-created-at`}>{formatDate(createdAt)}</Info>
+					</Field>
+				)}
+
+				{customFieldEntries.length > 0 && (
+					<>
+						<Divider marginInline={-24} />
+						{customFieldEntries?.map(([key, value]) => (
+							<CustomField key={key} id={key} value={value as string} />
+						))}
+					</>
+				)}
+			</Margins>
+		</ContextualbarScrollableContent>
+	);
+};
+
+export default ContactInfoDetails;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetailsEntry.tsx

@@ -0,0 +1,25 @@
+import type { IconProps } from '@rocket.chat/fuselage';
+import { Box, ButtonGroup, Icon } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactNode } from 'react';
+
+export type ContactInfoDetailsEntryProps = Pick<ComponentProps<typeof Box>, 'is' | 'aria-labelledby'> & {
+	icon: IconProps['name'];
+	value: string;
+	actions?: ReactNode;
+};
+
+const ContactInfoDetailsEntry = ({ icon, value, actions, ...props }: ContactInfoDetailsEntryProps) => (
+	<Box display='flex' alignItems='center' {...props}>
+		<Icon size='x18' marginInlineEnd={4} name={icon} />
+		<Box withTruncatedText display='flex' flexGrow={1} alignItems='center' justifyContent='space-between'>
+			<Box is='p' fontScale='p2' withTruncatedText marginInline={4}>
+				{value}
+			</Box>
+			<Box display='flex' alignItems='center'>
+				<ButtonGroup>{actions}</ButtonGroup>
+			</Box>
+		</Box>
+	</Box>
+);
+
+export default ContactInfoDetailsEntry;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoOutboundMessageButton.tsx

@@ -0,0 +1,34 @@
+import { IconButton } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import { useOutboundMessageAccess } from '../../../components/outboundMessage/hooks';
+import type { OutboundMessageModalProps } from '../../../components/outboundMessage/modals/OutboundMessageModal';
+import { useOutboundMessageModal } from '../../../components/outboundMessage/modals/OutboundMessageModal';
+
+export type ContactInfoOutboundMessageButtonProps = {
+	title?: string;
+	disabled?: boolean;
+	defaultValues?: OutboundMessageModalProps['defaultValues'];
+};
+
+const ContactInfoOutboundMessageButton = ({ defaultValues, disabled, title }: ContactInfoOutboundMessageButtonProps) => {
+	const { t } = useTranslation();
+	const outboundMessageModal = useOutboundMessageModal();
+	const canSendOutboundMessage = useOutboundMessageAccess();
+
+	if (!canSendOutboundMessage) {
+		return null;
+	}
+
+	return (
+		<IconButton
+			disabled={disabled}
+			onClick={() => outboundMessageModal.open(defaultValues)}
+			tiny
+			icon='send'
+			title={`${t('Outbound_message')} ${title ? `(${title})` : ''}`}
+		/>
+	);
+};
+
+export default ContactInfoOutboundMessageButton;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoPhoneEntry.tsx

@@ -0,0 +1,38 @@
+import type { ILivechatContact } from '@rocket.chat/core-typings';
+import { IconButton } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ContactInfoDetailsEntry from './ContactInfoDetailsEntry';
+import ContactInfoOutboundMessageButton from './ContactInfoOutboundMessageButton';
+import useClipboardWithToast from '../../../../../hooks/useClipboardWithToast';
+import { parseOutboundPhoneNumber } from '../../../../../lib/voip/parseOutboundPhoneNumber';
+
+export type ContactInfoPhoneEntryProps = Omit<ComponentProps<typeof ContactInfoDetailsEntry>, 'icon' | 'actions'> & {
+	contact?: Pick<ILivechatContact, '_id' | 'unknown'>;
+};
+
+const ContactInfoPhoneEntry = ({ contact, value, ...props }: ContactInfoPhoneEntryProps) => {
+	const { t } = useTranslation();
+	const { copy } = useClipboardWithToast(value);
+
+	return (
+		<ContactInfoDetailsEntry
+			{...props}
+			icon='phone'
+			value={parseOutboundPhoneNumber(value)}
+			actions={[
+				<IconButton key={`${value}-copy`} onClick={() => copy()} tiny icon='copy' title={t('Copy')} />,
+				null,
+				<ContactInfoOutboundMessageButton
+					key={`${value}-outbound-message`}
+					title={contact?.unknown ? t('error-unknown-contact') : undefined}
+					disabled={contact?.unknown}
+					defaultValues={{ contactId: contact?._id, recipient: value }}
+				/>,
+			]}
+		/>
+	);
+};
+
+export default ContactInfoPhoneEntry;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactManagerInfo.tsx

@@ -0,0 +1,41 @@
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { UserStatus } from '../../../../../components/UserStatus';
+
+export type ContactManagerInfoProps = { userId: string };
+
+const ContactManagerInfo = ({ userId }: ContactManagerInfoProps) => {
+	const { t } = useTranslation();
+
+	const getContactManagerByUsername = useEndpoint('GET', '/v1/users.info');
+	const { data, isLoading, isSuccess, isError } = useQuery({
+		queryKey: ['getContactManagerByUserId', userId],
+		queryFn: async () => getContactManagerByUsername({ userId }),
+	});
+
+	if (isError) {
+		return null;
+	}
+
+	return (
+		<Box>
+			<Box marginBlockEnd={4}>{t('Contact_Manager')}</Box>
+			{isLoading && <Skeleton />}
+			{isSuccess && (
+				<Box display='flex' alignItems='center'>
+					{data.user.username && <UserAvatar size='x18' username={data.user.username} />}
+					<Box marginInline={8}>
+						<UserStatus status={data.user.status} />
+					</Box>
+					<Box fontScale='p2'>{data.user.name}</Box>
+				</Box>
+			)}
+		</Box>
+	);
+};
+
+export default ContactManagerInfo;

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

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