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

apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfo.tsx

@@ -0,0 +1,113 @@
+import type { ILivechatContact, Serialized } from '@rocket.chat/core-typings';
+import { Box, Button, ButtonGroup, Callout, IconButton, Tabs, TabsItem } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import {
+	ContextualbarHeader,
+	ContextualbarIcon,
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarDialog,
+} from '@rocket.chat/ui-client';
+import { usePermission, useRouteParameter, useSetModal } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import ReviewContactModal from './ReviewContactModal';
+import { useFormatDate } from '../../../../hooks/useFormatDate';
+import { useContactRoute } from '../../hooks/useContactRoute';
+import { useValidCustomFields } from '../hooks/useValidCustomFields';
+import ContactInfoChannels from '../tabs/ContactInfoChannels';
+import ContactInfoDetails from '../tabs/ContactInfoDetails';
+import ContactInfoHistory from '../tabs/ContactInfoHistory';
+
+export type ContactInfoProps = {
+	contact: Serialized<ILivechatContact>;
+	onClose: () => void;
+};
+
+const ContactInfo = ({ contact, onClose }: ContactInfoProps) => {
+	const { t } = useTranslation();
+
+	const setModal = useSetModal();
+	const handleNavigate = useContactRoute();
+	const context = useRouteParameter('context');
+
+	const formatDate = useFormatDate();
+	const canEditContact = usePermission('edit-omnichannel-contact');
+
+	const { name, emails, phones, conflictingFields, createdAt, lastChat, contactManager, customFields: userCustomFields } = contact;
+
+	const hasConflicts = conflictingFields && conflictingFields?.length > 0;
+	const customFieldEntries = useValidCustomFields(userCustomFields, 'visitor');
+
+	return (
+		<ContextualbarDialog onClose={onClose}>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='user' />
+				<ContextualbarTitle>{t('Contact')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<Box display='flex' flexDirection='column' paddingInline={24}>
+				{name && (
+					<Box width='100%' paddingBlock={16} display='flex' alignItems='center' justifyContent='space-between'>
+						<Box withTruncatedText display='flex'>
+							<UserAvatar size='x40' title={name} username={name} />
+							<Box withTruncatedText marginInlineStart={16} display='flex' flexDirection='column'>
+								<Box withTruncatedText fontScale='h4'>
+									{name}
+								</Box>
+								{lastChat && <Box fontScale='c1'>{`${t('Last_Chat')}: ${formatDate(lastChat.ts)}`}</Box>}
+							</Box>
+						</Box>
+						<IconButton
+							disabled={!canEditContact || hasConflicts}
+							title={canEditContact ? t('Edit') : t('Not_authorized')}
+							small
+							icon='pencil'
+							onClick={() => handleNavigate({ context: 'edit' })}
+						/>
+					</Box>
+				)}
+				{hasConflicts && (
+					<Callout
+						marginBlockEnd={8}
+						alignItems='center'
+						icon='members'
+						actions={
+							<ButtonGroup>
+								<Button onClick={() => setModal(<ReviewContactModal onCancel={() => setModal(null)} contact={contact} />)} small>
+									{t('See_conflicts')}
+								</Button>
+							</ButtonGroup>
+						}
+						title={t('Conflicts_found', { conflicts: conflictingFields?.length })}
+					/>
+				)}
+			</Box>
+			<Tabs>
+				<TabsItem onClick={() => handleNavigate({ context: 'details' })} selected={context === 'details'}>
+					{t('Details')}
+				</TabsItem>
+				<TabsItem onClick={() => handleNavigate({ context: 'channels' })} selected={context === 'channels'}>
+					{t('Channels')}
+				</TabsItem>
+				<TabsItem onClick={() => handleNavigate({ context: 'history' })} selected={context === 'history'}>
+					{t('History')}
+				</TabsItem>
+			</Tabs>
+			{context === 'details' && (
+				<ContactInfoDetails
+					contact={contact}
+					createdAt={createdAt}
+					contactManager={contactManager}
+					phones={phones?.map(({ phoneNumber }) => phoneNumber)}
+					emails={emails?.map(({ address }) => address)}
+					customFieldEntries={customFieldEntries}
+				/>
+			)}
+			{context === 'channels' && <ContactInfoChannels contact={contact} />}
+			{context === 'history' && <ContactInfoHistory contact={contact} />}
+		</ContextualbarDialog>
+	);
+};
+
+export default ContactInfo;

apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ContactInfoWithData.tsx

@@ -0,0 +1,34 @@
+import { ContextualbarSkeleton } from '@rocket.chat/ui-client';
+import { useEndpoint, usePermission } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import ContactInfoError from '../ContactInfoError';
+import ContactInfo from './ContactInfo';
+
+export type ContactInfoWithDataProps = {
+	id: string;
+	onClose: () => void;
+};
+
+const ContactInfoWithData = ({ id: contactId, onClose }: ContactInfoWithDataProps) => {
+	const canViewCustomFields = usePermission('view-livechat-room-customfields');
+
+	const getContact = useEndpoint('GET', '/v1/omnichannel/contacts.get');
+	const { data, isPending, isError } = useQuery({
+		queryKey: ['getContactById', contactId],
+		queryFn: () => getContact({ contactId }),
+		enabled: canViewCustomFields && !!contactId,
+	});
+
+	if (isPending) {
+		return <ContextualbarSkeleton onClose={onClose} />;
+	}
+
+	if (isError || !data?.contact) {
+		return <ContactInfoError onClose={onClose} />;
+	}
+
+	return <ContactInfo contact={data?.contact} onClose={onClose} />;
+};
+
+export default ContactInfoWithData;

apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/ReviewContactModal.tsx

@@ -0,0 +1,123 @@
+import type { ILivechatContact, Serialized } from '@rocket.chat/core-typings';
+import { Badge, Box, Field, FieldError, FieldGroup, FieldHint, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useAtLeastOnePermission } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { mapLivechatContactConflicts } from '../../../../../lib/mapLivechatContactConflicts';
+import { useHasLicenseModule } from '../../../../hooks/useHasLicenseModule';
+import { ContactManagerInput } from '../../additionalForms';
+import { useCustomFieldsMetadata } from '../../directory/hooks/useCustomFieldsMetadata';
+import { useReviewContact } from '../hooks/useReviewContact';
+
+export type ReviewContactModalProps = {
+	contact: Serialized<ILivechatContact>;
+	onCancel: () => void;
+};
+
+type HandleConflictsPayload = {
+	name: string;
+	contactManager: string;
+	[key: string]: string;
+};
+
+const ReviewContactModal = ({ contact, onCancel }: ReviewContactModalProps) => {
+	const { t } = useTranslation();
+	const { data: hasLicense = false } = useHasLicenseModule('livechat-enterprise');
+
+	const {
+		control,
+		handleSubmit,
+		formState: { errors },
+	} = useForm<HandleConflictsPayload>();
+
+	const canViewCustomFields = useAtLeastOnePermission(['view-livechat-room-customfields', 'edit-livechat-room-customfields']);
+
+	const { data: customFieldsMetadata = [] } = useCustomFieldsMetadata({
+		scope: 'visitor',
+		enabled: canViewCustomFields,
+	});
+
+	const editContact = useReviewContact(['getContactById']);
+
+	const handleConflicts = async ({ name, contactManager, ...customFields }: HandleConflictsPayload) => {
+		const payload = {
+			name,
+			contactManager,
+			...(customFields && { customFields }),
+			wipeConflicts: true,
+		};
+
+		editContact.mutate(
+			{ contactId: contact?._id, ...payload },
+			{
+				onSettled: () => onCancel(),
+			},
+		);
+	};
+
+	const conflictingFields = useMemo(() => {
+		const mappedConflicts = mapLivechatContactConflicts(contact, customFieldsMetadata);
+		return Object.values(mappedConflicts);
+	}, [contact, customFieldsMetadata]);
+
+	return (
+		<GenericModal
+			icon={null}
+			variant='warning'
+			onCancel={onCancel}
+			confirmText={t('Save')}
+			onConfirm={handleSubmit(handleConflicts)}
+			annotation={t('Contact_history_is_preserved')}
+			title={t('Review_contact')}
+		>
+			<FieldGroup>
+				{conflictingFields.map(({ name, label, values }, index) => {
+					const isContactManagerField = name === 'contactManager';
+					const mappedOptions = values.map((option) => [option, option] as const);
+					const Component = isContactManagerField ? ContactManagerInput : Select;
+
+					if (isContactManagerField && !hasLicense) {
+						return null;
+					}
+
+					return (
+						<Field key={index}>
+							<FieldLabel id={name}>{t(label as TranslationKey)}</FieldLabel>
+							<FieldRow>
+								<Controller
+									name={name}
+									control={control}
+									rules={{
+										required: isContactManagerField ? undefined : t('Required_field', { field: t(label as TranslationKey) }),
+									}}
+									render={({ field: { value, onChange } }) => (
+										<Component
+											aria-labelledby={name}
+											aria-describedby={`${name}-hint ${name}-error`}
+											options={mappedOptions}
+											value={value}
+											onChange={onChange}
+										/>
+									)}
+								/>
+							</FieldRow>
+							<FieldHint id={`${name}-hint`}>
+								<Box display='flex' alignItems='center'>
+									<Box marginInlineEnd={4}>{t('different_values_found', { number: values.length })}</Box>
+									<Badge variant='primary' small />
+								</Box>
+							</FieldHint>
+							{errors?.[name] && <FieldError id={`${name}-error`}>{errors?.[name]?.message}</FieldError>}
+						</Field>
+					);
+				})}
+			</FieldGroup>
+		</GenericModal>
+	);
+};
+
+export default ReviewContactModal;

apps/meteor/client/views/omnichannel/contactInfo/ContactInfo/index.ts

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