feat: New contact details tab

.changeset/swift-spiders-dress.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Adds the details, channels and history tabs in contact context bar

apps/meteor/client/hooks/roomActions/useContactProfileRoomAction.ts

@@ -2,7 +2,7 @@ import { lazy, useMemo } from 'react';
 
 import type { RoomToolboxActionConfig } from '../../views/room/contexts/RoomToolboxContext';
 
-const ContactInfoRouter = lazy(() => import('../../views/omnichannel/directory/contacts/contactInfo/ContactInfoRouter'));
+const ContactInfoRouter = lazy(() => import('../../views/omnichannel/contactInfo/ContactInfoRouter'));
 
 export const useContactProfileRoomAction = () => {
 	return useMemo(

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

@@ -0,0 +1,134 @@
+import { Box, IconButton, Tabs, TabsItem } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import type { RouteName } from '@rocket.chat/ui-contexts';
+import { useTranslation, useEndpoint, usePermission, useRouter, useRouteParameter } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
+
+import { ContextualbarHeader, ContextualbarIcon, ContextualbarTitle, ContextualbarClose } from '../../../components/Contextualbar';
+import { useFormatDate } from '../../../hooks/useFormatDate';
+import { FormSkeleton } from '../directory/components/FormSkeleton';
+import { useContactRoute } from '../hooks/useContactRoute';
+import ContactInfoChannels from './tabs/ContactInfoChannels';
+import ContactInfoDetails from './tabs/ContactInfoDetails';
+import ContactInfoHistory from './tabs/ContactInfoHistory';
+
+type ContactInfoProps = {
+	id: string;
+	onClose: () => void;
+	rid?: string;
+	route?: RouteName;
+};
+
+const ContactInfo = ({ id: contactId, onClose }: ContactInfoProps) => {
+	const t = useTranslation();
+
+	const { getRouteName } = useRouter();
+	const currentRouteName = getRouteName();
+	const handleNavigate = useContactRoute();
+	const context = useRouteParameter('context');
+
+	const formatDate = useFormatDate();
+
+	const canViewCustomFields = usePermission('view-livechat-room-customfields');
+	const canEditContact = usePermission('edit-omnichannel-contact');
+
+	const getCustomFields = useEndpoint('GET', '/v1/livechat/custom-fields');
+	const { data: { customFields } = {} } = useQuery(['/v1/livechat/custom-fields'], () => getCustomFields());
+
+	const getContact = useEndpoint('GET', '/v1/omnichannel/contact');
+	const {
+		data: { contact } = {},
+		isInitialLoading,
+		isError,
+	} = useQuery(['/v1/omnichannel/contact', contactId], () => getContact({ contactId }), {
+		enabled: canViewCustomFields && !!contactId,
+	});
+
+	if (isInitialLoading) {
+		return (
+			<Box pi={24}>
+				<FormSkeleton />
+			</Box>
+		);
+	}
+
+	if (isError || !contact) {
+		return <Box mbs={16}>{t('Contact_not_found')}</Box>;
+	}
+
+	const { username, visitorEmails, phone, ts, livechatData, lastChat, contactManager } = contact;
+
+	const showContactHistory = (currentRouteName === 'live' || currentRouteName === 'omnichannel-directory') && lastChat;
+
+	const [{ phoneNumber = '' }] = phone ?? [{}];
+	const [{ address: email = '' }] = visitorEmails ?? [{}];
+
+	const checkIsVisibleAndScopeVisitor = (key: string) => {
+		const field = customFields?.find(({ _id }) => _id === key);
+		return field?.visibility === 'visible' && field?.scope === 'visitor';
+	};
+
+	// Serialized does not like unknown :(
+	const customFieldEntries = canViewCustomFields
+		? Object.entries((livechatData ?? {}) as unknown as Record<string, string>).filter(
+				([key, value]) => checkIsVisibleAndScopeVisitor(key) && value,
+		  )
+		: [];
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='info-circled' />
+				<ContextualbarTitle>{t('Contact')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
+			<Box display='flex' pi={24}>
+				{username && (
+					<Box width='100%' pb={16} display='flex' alignItems='center' justifyContent='space-between'>
+						<Box display='flex'>
+							<UserAvatar size='x40' title={username} username={username} />
+							<Box mis={16} display='flex' flexDirection='column'>
+								<Box fontScale='h4'>{username}</Box>
+								{lastChat && <Box fontScale='c1'>{`${t('Last_Chat')}: ${formatDate(lastChat.ts)}`}</Box>}
+							</Box>
+						</Box>
+						<IconButton
+							disabled={!canEditContact}
+							title={canEditContact ? t('Edit') : t('Not_authorized')}
+							small
+							icon='pencil'
+							onClick={() => handleNavigate({ context: 'edit' })}
+						/>
+					</Box>
+				)}
+			</Box>
+			<Tabs>
+				<TabsItem onClick={() => handleNavigate({ context: 'details' })} selected={context === 'details'}>
+					{t('Details')}
+				</TabsItem>
+				<TabsItem onClick={() => handleNavigate({ context: 'channels' })} selected={context === 'channels'}>
+					{t('Channels')}
+				</TabsItem>
+				{showContactHistory && (
+					<TabsItem onClick={() => handleNavigate({ context: 'history' })} selected={context === 'history'}>
+						{t('History')}
+					</TabsItem>
+				)}
+			</Tabs>
+			{context === 'details' && (
+				<ContactInfoDetails
+					ts={ts}
+					contactManager={contactManager}
+					phoneNumber={phoneNumber}
+					email={email}
+					customFieldEntries={customFieldEntries}
+				/>
+			)}
+			{context === 'channels' && <ContactInfoChannels />}
+			{context === 'history' && showContactHistory && <ContactInfoHistory />}
+		</>
+	);
+};
+
+export default ContactInfo;

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

@@ -0,0 +1,31 @@
+import { useRoute, useRouteParameter } from '@rocket.chat/ui-contexts';
+import React from 'react';
+
+import { useOmnichannelRoom } from '../../room/contexts/RoomContext';
+import { useRoomToolbox } from '../../room/contexts/RoomToolboxContext';
+import ContactInfo from './ContactInfo';
+import ContactEditWithData from './EditContactInfoWithData';
+
+const ContactInfoRouter = () => {
+	const room = useOmnichannelRoom();
+	const { closeTab } = useRoomToolbox();
+
+	const liveRoute = useRoute('live');
+	const context = useRouteParameter('context');
+
+	const handleCloseEdit = (): void => {
+		liveRoute.push({ id: room._id, tab: 'contact-profile' });
+	};
+
+	const {
+		v: { _id },
+	} = room;
+
+	if (context === 'edit') {
+		return <ContactEditWithData id={_id} onClose={closeTab} onCancel={handleCloseEdit} />;
+	}
+
+	return <ContactInfo id={_id} onClose={closeTab} />;
+};
+
+export default ContactInfoRouter;

apps/meteor/client/views/omnichannel/directory/contacts/contactInfo/EditContactInfo.tsx → apps/meteor/client/views/omnichannel/contactInfo/EditContactInfo.tsx

@@ -1,23 +1,33 @@
 import type { ILivechatVisitor, Serialized } from '@rocket.chat/core-typings';
-import { Field, FieldLabel, FieldRow, FieldError, TextInput, ButtonGroup, Button, ContextualbarContent } from '@rocket.chat/fuselage';
+import { Field, FieldLabel, FieldRow, FieldError, TextInput, ButtonGroup, Button } from '@rocket.chat/fuselage';
 import { CustomFieldsForm } from '@rocket.chat/ui-client';
 import { useToastMessageDispatch, useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQueryClient } from '@tanstack/react-query';
 import type { ReactElement } from 'react';
 import React, { useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 
-import { hasAtLeastOnePermission } from '../../../../../../app/authorization/client';
-import { validateEmail } from '../../../../../../lib/emailValidator';
-import { ContextualbarScrollableContent, ContextualbarFooter } from '../../../../../components/Contextualbar';
-import { createToken } from '../../../../../lib/utils/createToken';
-import { ContactManager as ContactManagerForm } from '../../../additionalForms';
-import { FormSkeleton } from '../../components/FormSkeleton';
-import { useCustomFieldsMetadata } from '../../hooks/useCustomFieldsMetadata';
+import { hasAtLeastOnePermission } from '../../../../app/authorization/client';
+import { validateEmail } from '../../../../lib/emailValidator';
+import {
+	ContextualbarScrollableContent,
+	ContextualbarContent,
+	ContextualbarFooter,
+	ContextualbarHeader,
+	ContextualbarIcon,
+	ContextualbarTitle,
+	ContextualbarClose,
+} from '../../../components/Contextualbar';
+import { createToken } from '../../../lib/utils/createToken';
+import { ContactManager as ContactManagerForm } from '../additionalForms';
+import { FormSkeleton } from '../directory/components/FormSkeleton';
+import { useCustomFieldsMetadata } from '../directory/hooks/useCustomFieldsMetadata';
+import { useContactRoute } from '../hooks/useContactRoute';
 
 type ContactNewEditProps = {
 	id: string;
-	data?: { contact: Serialized<ILivechatVisitor> | null };
+	contactData?: { contact: Serialized<ILivechatVisitor> | null };
+	onClose: () => void;
 	onCancel: () => void;
 };
 
@@ -39,7 +49,7 @@ const DEFAULT_VALUES = {
 	customFields: {},
 };
 
-const getInitialValues = (data: ContactNewEditProps['data']): ContactFormData => {
+const getInitialValues = (data: ContactNewEditProps['contactData']): ContactFormData => {
 	if (!data) {
 		return DEFAULT_VALUES;
 	}
@@ -56,10 +66,11 @@ const getInitialValues = (data: ContactNewEditProps['data']): ContactFormData =>
 	};
 };
 
-const EditContactInfo = ({ id, data, onCancel }: ContactNewEditProps): ReactElement => {
+const EditContactInfo = ({ id, contactData, onClose, onCancel }: ContactNewEditProps): ReactElement => {
 	const t = useTranslation();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const queryClient = useQueryClient();
+	const handleNavigate = useContactRoute();
 
 	const canViewCustomFields = (): boolean =>
 		hasAtLeastOnePermission(['view-livechat-room-customfields', 'edit-livechat-room-customfields']);
@@ -74,7 +85,7 @@ const EditContactInfo = ({ id, data, onCancel }: ContactNewEditProps): ReactElem
 		enabled: canViewCustomFields(),
 	});
 
-	const initialValue = getInitialValues(data);
+	const initialValue = getInitialValues(contactData);
 	const { username: initialUsername } = initialValue;
 
 	const {
@@ -167,7 +178,7 @@ const EditContactInfo = ({ id, data, onCancel }: ContactNewEditProps): ReactElem
 			await saveContact(payload);
 			dispatchToastMessage({ type: 'success', message: t('Saved') });
 			await queryClient.invalidateQueries({ queryKey: ['current-contacts'] });
-			onCancel();
+			contactData ? handleNavigate({ context: 'details' }) : handleNavigate({ tab: 'contacts', context: '' });
 		} catch (error) {
 			dispatchToastMessage({ type: 'error', message: error });
 		}
@@ -183,6 +194,11 @@ const EditContactInfo = ({ id, data, onCancel }: ContactNewEditProps): ReactElem
 
 	return (
 		<>
+			<ContextualbarHeader>
+				<ContextualbarIcon name={contactData ? 'pencil' : 'user'} />
+				<ContextualbarTitle>{contactData ? t('Edit_Contact_Profile') : t('New_contact')}</ContextualbarTitle>
+				<ContextualbarClose onClick={onClose} />
+			</ContextualbarHeader>
 			<ContextualbarScrollableContent is='form' onSubmit={handleSubmit(handleSave)}>
 				<Field>
 					<FieldLabel>{t('Name')}*</FieldLabel>

apps/meteor/client/views/omnichannel/directory/contacts/contactInfo/EditContactInfoWithData.tsx → apps/meteor/client/views/omnichannel/contactInfo/EditContactInfoWithData.tsx

@@ -3,10 +3,10 @@ import { useEndpoint, useTranslation } from '@rocket.chat/ui-contexts';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
-import { FormSkeleton } from '../../components/FormSkeleton';
+import { FormSkeleton } from '../directory/components/FormSkeleton';
 import EditContactInfo from './EditContactInfo';
 
-const EditContactInfoWithData = ({ id, onCancel }: { id: string; onCancel: () => void; onClose?: () => void }) => {
+const EditContactInfoWithData = ({ id, onClose, onCancel }: { id: string; onClose: () => void; onCancel: () => void }) => {
 	const t = useTranslation();
 
 	const getContactEndpoint = useEndpoint('GET', '/v1/omnichannel/contact');
@@ -24,7 +24,7 @@ const EditContactInfoWithData = ({ id, onCancel }: { id: string; onCancel: () =>
 		return <Box mbs={16}>{t('Contact_not_found')}</Box>;
 	}
 
-	return <EditContactInfo id={id} data={data} onCancel={onCancel} />;
+	return <EditContactInfo id={id} contactData={data} onClose={onClose} onCancel={onCancel} />;
 };
 
 export default EditContactInfoWithData;

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

@@ -0,0 +1,16 @@
+import { ContextualbarEmptyContent } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React from 'react';
+
+const ContactInfoChannels = () => {
+	const t = useTranslation();
+	const isEmpty = true;
+
+	if (!isEmpty) {
+		return null;
+	}
+
+	return <ContextualbarEmptyContent icon='balloon' title={t('No_channels_yet')} subtitle={t('No_channels_yet_description')} />;
+};
+
+export default ContactInfoChannels;

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

@@ -0,0 +1,24 @@
+import { IconButton } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import React from 'react';
+
+import { useVoipOutboundStates } from '../../../../../contexts/CallContext';
+import { useDialModal } from '../../../../../hooks/useDialModal';
+
+const ContactInfoCallButton = ({ phoneNumber }: { phoneNumber: string }) => {
+	const t = useTranslation();
+	const { openDialModal } = useDialModal();
+	const { outBoundCallsAllowed, outBoundCallsEnabledForUser } = useVoipOutboundStates();
+
+	return (
+		<IconButton
+			onClick={() => openDialModal({ initialValue: phoneNumber })}
+			tiny
+			disabled={!outBoundCallsEnabledForUser || !phoneNumber}
+			title={outBoundCallsAllowed ? t('Call_number') : t('Call_number_premium_only')}
+			icon='dialpad'
+		/>
+	);
+};
+
+export default ContactInfoCallButton;