feat: adds kebab menu to contact center and delete contact item

apps/meteor/client/views/omnichannel/directory/contacts/ContactItemMenu.tsx

@@ -0,0 +1,61 @@
+import type { ILivechatContactChannel } from '@rocket.chat/core-typings';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useRouter, useSetModal, usePermission } from '@rocket.chat/ui-contexts';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import RemoveContactModal from './RemoveContactModal';
+
+type ContactItemMenuProps = {
+	_id: string;
+	name: string;
+	channels: ILivechatContactChannel[];
+};
+
+const ContactItemMenu = ({ _id, name, channels }: ContactItemMenuProps): ReactElement => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const router = useRouter();
+
+	const canEditContact = usePermission('update-livechat-contact');
+	const canDeleteContact = usePermission('delete-livechat-contact');
+
+	const handleContactEdit = useEffectEvent((): void =>
+		router.navigate({
+			pattern: '/omnichannel-directory/:tab?/:context?/:id?',
+			params: {
+				tab: 'contacts',
+				context: 'edit',
+				id: _id,
+			},
+		}),
+	);
+
+	const handleContactRemoval = useEffectEvent(() => {
+		setModal(<RemoveContactModal _id={_id} name={name} channelsCount={channels.length} onClose={() => setModal(null)} />);
+	});
+
+	const menuOptions: GenericMenuItemProps[] = [
+		{
+			id: 'edit',
+			icon: 'edit',
+			content: t('edit'),
+			onClick: () => handleContactEdit(),
+			disabled: !canEditContact,
+		},
+		{
+			id: 'delete',
+			icon: 'trash',
+			content: t('Delete'),
+			onClick: () => handleContactRemoval(),
+			variant: 'danger',
+			disabled: !canDeleteContact,
+		},
+	];
+
+	return <GenericMenu detached title={t('More_actions')} sections={[{ title: '', items: menuOptions }]} placement='bottom-end' />;
+};
+
+export default ContactItemMenu;

apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx

@@ -88,6 +88,7 @@ function ContactTable() {
 				{t('Last_Chat')}
 			</GenericTableHeaderCell>
 			{isCallReady && <GenericTableHeaderCell key='call' width={44} />}
+			<GenericTableHeaderCell key='spacer' w={40} />
 		</>
 	);
 

apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx

@@ -3,6 +3,7 @@ import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
 import type { ILivechatContactWithManagerData } from '@rocket.chat/rest-typings';
 import { useRoute } from '@rocket.chat/ui-contexts';
 
+import ContactItemMenu from './ContactItemMenu';
 import { GenericTableCell, GenericTableRow } from '../../../../components/GenericTable';
 import { OmnichannelRoomIcon } from '../../../../components/RoomIcon/OmnichannelRoomIcon';
 import { useIsCallReady } from '../../../../contexts/CallContext';
@@ -63,6 +64,9 @@ const ContactTableRow = ({ _id, name, phones, contactManager, lastChat, channels
 					<CallDialpadButton phoneNumber={phoneNumber} />
 				</GenericTableCell>
 			)}
+			<GenericTableCell>
+				<ContactItemMenu _id={_id} name={name} channels={channels} />
+			</GenericTableCell>
 		</GenericTableRow>
 	);
 };

apps/meteor/client/views/omnichannel/directory/contacts/RemoveContactModal.tsx

@@ -0,0 +1,76 @@
+import { Box, Input } from '@rocket.chat/fuselage';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import type { ReactElement, ChangeEvent } from 'react';
+import { useState, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type RemoveContactModalProps = {
+	_id: string;
+	name: string;
+	channelsCount: number;
+	onClose: () => void;
+};
+
+const RemoveContactModal = ({ _id, name, channelsCount, onClose }: RemoveContactModalProps): ReactElement => {
+	const { t } = useTranslation();
+	const [text, setText] = useState<string>('');
+
+	const queryClient = useQueryClient();
+	const removeContact = useEndpoint('POST', '/v1/omnichannel/contacts.delete');
+	const dispatchToast = useToastMessageDispatch();
+	const contactDeleteModalId = useId();
+
+	const handleSubmit = useEffectEvent((event: ChangeEvent<HTMLFormElement>): void => {
+		event.preventDefault();
+		removeContactMutation.mutate();
+	});
+
+	const removeContactMutation = useMutation({
+		mutationFn: () => removeContact({ contactId: _id }),
+		onSuccess: async () => {
+			dispatchToast({ type: 'success', message: t('Contact_has_been_deleted') });
+			await Promise.all([
+				queryClient.invalidateQueries({
+					queryKey: ['current-contacts'],
+				}),
+				queryClient.invalidateQueries({
+					queryKey: ['getContactsByIds', _id],
+				}),
+			]);
+			onClose();
+		},
+		onError: (error) => {
+			dispatchToast({ type: 'error', message: t(error.message, { defaultValue: t('error-contact-something-went-wrong') }) });
+		},
+	});
+
+	return (
+		<GenericModal
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit} {...props} />}
+			onCancel={onClose}
+			confirmText={t('Delete')}
+			title={t('Delete_Contact')}
+			onClose={onClose}
+			variant='danger'
+			confirmDisabled={text !== t('Delete').toLowerCase()}
+		>
+			<Box is='p' id={`${contactDeleteModalId}-description`} mbe={16}>
+				{t('Are_you_sure_delete_contact', { contactName: name, channelsCount })}
+			</Box>
+			<Box mbe={16} display='flex' justifyContent='stretch'>
+				<Input
+					value={text}
+					name='confirmContactRemoval'
+					aria-label={t('Confirm_contact_removal')}
+					aria-describedby={`${contactDeleteModalId}-description`}
+					onChange={(event: ChangeEvent<HTMLInputElement>) => setText(event.currentTarget.value)}
+				/>
+			</Box>
+		</GenericModal>
+	);
+};
+
+export default RemoveContactModal;

apps/meteor/tests/e2e/omnichannel/omnichannel-contact-center.spec.ts

@@ -25,6 +25,13 @@ const EXISTING_CONTACT = {
 	phones: [faker.phone.number('+############')],
 	token: undefined,
 };
+const DELETE_CONTACT = {
+	id: undefined,
+	name: `${faker.person.firstName()} ${faker.person.lastName()}`,
+	emails: [faker.internet.email().toLowerCase()],
+	phones: [faker.phone.number('+############')],
+};
+
 const NEW_CUSTOM_FIELD = {
 	searchable: true,
 	field: 'hiddenCustomField',
@@ -65,6 +72,7 @@ test.describe('Omnichannel Contact Center', () => {
 	test.beforeAll(async ({ api }) => {
 		// Add a contact
 		await api.post('/omnichannel/contacts', EXISTING_CONTACT);
+		await api.post('/omnichannel/contacts', DELETE_CONTACT);
 
 		if (IS_EE) {
 			await api.post('/livechat/custom.field', NEW_CUSTOM_FIELD);
@@ -262,4 +270,33 @@ test.describe('Omnichannel Contact Center', () => {
 			await expect(poContacts.findRowByName(EDIT_CONTACT.name)).toBeVisible();
 		});
 	});
+
+	test('Delete a contact', async () => {
+		await test.step('Find contact and open modal', async () => {
+			await poContacts.inputSearch.fill(DELETE_CONTACT.name);
+			await poContacts.findRowMenu(DELETE_CONTACT.name).click();
+			await poContacts.findMenuItem('Delete').click();
+		});
+
+		await test.step('Fill confirmation and delete contact', async () => {
+			await expect(poContacts.deleteContactModal).toBeVisible();
+			await expect(poContacts.btnDeleteContact).toBeDisabled();
+
+			// Fills the input with the wrong confirmation
+			await poContacts.inputDeleteContactConfirmation.fill('wrong');
+			await expect(poContacts.btnDeleteContact).toBeDisabled();
+
+			// Fills the input correctly
+			await poContacts.inputDeleteContactConfirmation.fill('delete');
+			await expect(poContacts.btnDeleteContact).toBeEnabled();
+			await poContacts.btnDeleteContact.click();
+
+			await expect(poContacts.deleteContactModal).not.toBeVisible();
+		});
+
+		await test.step('Confirm contact removal', async () => {
+			await poContacts.inputSearch.fill(DELETE_CONTACT.name);
+			await expect(poContacts.findRowByName(DELETE_CONTACT.name)).not.toBeVisible();
+		});
+	});
 });

apps/meteor/tests/e2e/page-objects/omnichannel-contacts-list.ts

@@ -25,7 +25,27 @@ export class OmnichannelContacts {
 	}
 
 	findRowByName(contactName: string) {
-		return this.page.locator(`td >> text="${contactName}"`);
+		return this.page.locator('tr', { has: this.page.locator(`td >> text="${contactName}"`) });
+	}
+
+	findRowMenu(contactName: string): Locator {
+		return this.findRowByName(contactName).getByRole('button', { name: 'More Actions' });
+	}
+
+	findMenuItem(name: string): Locator {
+		return this.page.getByRole('menuitem', { name });
+	}
+
+	get deleteContactModal(): Locator {
+		return this.page.getByRole('dialog', { name: 'Delete Contact' });
+	}
+
+	get inputDeleteContactConfirmation(): Locator {
+		return this.deleteContactModal.getByRole('textbox', { name: 'Confirm contact removal' });
+	}
+
+	get btnDeleteContact(): Locator {
+		return this.deleteContactModal.getByRole('button', { name: 'Delete' });
 	}
 
 	get btnFilters(): Locator {

packages/i18n/src/locales/en.i18n.json

@@ -667,6 +667,7 @@
   "Are_you_sure_you_want_to_disable_Facebook_integration": "Are you sure you want to disable Facebook integration?",
   "Are_you_sure_you_want_to_pin_this_message": "Are you sure you want to pin this message?",
   "Are_you_sure_you_want_to_reset_the_name_of_all_priorities": "Are you sure you want to reset the name of all priorities?",
+  "Are_you_sure_delete_contact": "Are you sure you want to delete {{contactName}} and all {{channelsCount}} of their conversation history? To confirm, type 'delete' in the field below.",
   "Ask_enable_advanced_contact_profile": "Ask your workspace admin to enable advanced contact profile",
   "Asset_preview": "Asset preview",
   "Assets": "Assets",
@@ -1134,6 +1135,7 @@
   "Confirm_new_workspace_description": "Identification data and cloud connection data will be reset.<br/><br/><strong>Warning</strong>: License can be affected if changing workspace URL.",
   "Confirm_password": "Confirm password",
   "Confirm_your_password": "Confirm your password",
+  "Confirm_contact_removal": "Confirm Contact Removal",
   "Confirmation": "Confirmation",
   "Conflicts_found": "Conflicts found",
   "Connect": "Connect",
@@ -1158,6 +1160,7 @@
   "Contact_email": "Contact email",
   "Contact_has_been_created": "Contact has been created",
   "Contact_has_been_updated": "Contact has been updated",
+  "Contact_has_been_deleted": "Contact has been deleted",
   "Contact_history_is_preserved": "Contact history is preserved",
   "Contact_identification": "Contact identification",
   "Contact_not_found": "Contact not found",
@@ -1593,6 +1596,7 @@
   "Default_value": "Default value",
   "Delete": "Delete",
   "Delete_Department?": "Delete Department?",
+  "Delete_Contact": "Delete Contact",
   "Delete_File_Warning": "Deleting a file will delete it forever. This cannot be undone.",
   "Delete_Role_Warning": "This cannot be undone",
   "Delete_Role_Warning_Not_Enterprise": "This cannot be undone. You won't be able to create a new custom role, since that feature is no longer available for your current plan.",
@@ -6043,6 +6047,9 @@
   "error-channels-setdefault-missing-default-param": "The bodyParam 'default' is required",
   "error-comment-is-required": "Comment is required",
   "error-contact-sent-last-message-so-cannot-place-on-hold": "You cannot place chat on-hold, when the Contact has sent the last message",
+  "error-contact-not-found": "Contact not found.",
+  "error-contact-has-open-rooms": "Cannot delete contact with open rooms.",
+  "error-contact-something-went-wrong": "Something went wrong while deleting the contact.",
   "error-could-not-change-email": "Could not change email",
   "error-could-not-change-name": "Could not change name",
   "error-could-not-change-username": "Could not change username",