feat: Outbound Message UI (RocketChat#36207)

Author: aleksandernsilva

.changeset/rich-rules-sleep.md

@@ -0,0 +1,20 @@
+---
+'@rocket.chat/web-ui-registration': patch
+'@rocket.chat/storybook-config': patch
+'@rocket.chat/fuselage-ui-kit': patch
+'@rocket.chat/ui-theming': patch
+'@rocket.chat/ui-video-conf': patch
+'@rocket.chat/uikit-playground': patch
+'@rocket.chat/ui-composer': patch
+'@rocket.chat/gazzodown': patch
+'@rocket.chat/ui-avatar': patch
+'@rocket.chat/ui-client': patch
+'@rocket.chat/ui-voip': patch
+'@rocket.chat/core-typings': minor
+'@rocket.chat/apps-engine': minor
+'@rocket.chat/license': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+Introduces the Outbound Message feature to Omnichannel, allowing organizations to initiate proactive communication with contacts through their preferred messaging channel directly from Rocket.Chat

apps/meteor/client/NavBarV2/NavBarPagesGroup/hooks/useCreateNewItems.tsx

@@ -1,8 +1,9 @@
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
-import { useTranslation, useSetting, useAtLeastOnePermission } from '@rocket.chat/ui-contexts';
+import { useTranslation, useSetting, useAtLeastOnePermission, usePermission } from '@rocket.chat/ui-contexts';
 
 import { useCreateRoomModal } from './useCreateRoomModal';
 import CreateDiscussion from '../../../components/CreateDiscussion';
+import { useOutboundMessageModal } from '../../../components/Omnichannel/OutboundMessage/modals/OutboundMessageModal';
 import CreateChannelModal from '../actions/CreateChannelModal';
 import CreateDirectMessage from '../actions/CreateDirectMessage';
 import CreateTeamModal from '../actions/CreateTeamModal';
@@ -20,11 +21,13 @@ export const useCreateNewItems = (): GenericMenuItemProps[] => {
 	const canCreateTeam = useAtLeastOnePermission(CREATE_TEAM_PERMISSIONS);
 	const canCreateDirectMessages = useAtLeastOnePermission(CREATE_DIRECT_PERMISSIONS);
 	const canCreateDiscussion = useAtLeastOnePermission(CREATE_DISCUSSION_PERMISSIONS);
+	const canSendOutboundMessage = usePermission('outbound.send-messages');
 
 	const createChannel = useCreateRoomModal(CreateChannelModal);
 	const createTeam = useCreateRoomModal(CreateTeamModal);
 	const createDiscussion = useCreateRoomModal(CreateDiscussion);
 	const createDirectMessage = useCreateRoomModal(CreateDirectMessage);
+	const outboundMessageModal = useOutboundMessageModal();
 
 	const createChannelItem: GenericMenuItemProps = {
 		id: 'channel',
@@ -58,11 +61,18 @@ export const useCreateNewItems = (): GenericMenuItemProps[] => {
 			createDiscussion();
 		},
 	};
+	const createOutboundMessageItem: GenericMenuItemProps = {
+		id: 'outbound-message',
+		content: t('Outbound_message'),
+		icon: 'send',
+		onClick: () => outboundMessageModal.open(),
+	};
 
 	return [
 		...(canCreateDirectMessages ? [createDirectMessageItem] : []),
 		...(canCreateDiscussion && discussionEnabled ? [createDiscussionItem] : []),
 		...(canCreateChannel ? [createChannelItem] : []),
 		...(canCreateTeam && canCreateChannel ? [createTeamItem] : []),
+		...(canSendOutboundMessage ? [createOutboundMessageItem] : []),
 	];
 };

apps/meteor/client/components/AutoCompleteContact/AutoCompleteContact.tsx

@@ -0,0 +1,63 @@
+import type { Serialized } from '@rocket.chat/core-typings';
+import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import type { ILivechatContactWithManagerData } from '@rocket.chat/rest-typings';
+import type { ComponentProps, ReactElement, SyntheticEvent } from 'react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useContactsList } from './useContactsList';
+
+type OptionProps = {
+	role: 'option';
+	title?: string;
+	index: number;
+	label: string;
+	value: string;
+	selected: boolean;
+	focus: boolean;
+	onMouseDown(event: SyntheticEvent): void;
+};
+
+type AutoCompleteContactProps = Omit<
+	ComponentProps<typeof PaginatedSelectFiltered>,
+	'filter' | 'setFilter' | 'options' | 'endReached' | 'renderItem' | 'value' | 'onChange'
+> & {
+	value: string;
+	onChange: (value: string) => void;
+	renderItem?: (props: OptionProps, contact: Serialized<ILivechatContactWithManagerData>) => ReactElement;
+};
+
+const AutoCompleteContact = ({ value, placeholder, disabled, renderItem, onChange, ...props }: AutoCompleteContactProps): ReactElement => {
+	const { t } = useTranslation();
+	const [contactsFilter, setContactFilter] = useState<string>('');
+	const debouncedContactFilter = useDebouncedValue(contactsFilter, 500);
+
+	const {
+		data: contactsItems = [],
+		fetchNextPage,
+		isPending,
+	} = useContactsList({
+		filter: debouncedContactFilter,
+	});
+
+	return (
+		<PaginatedSelectFiltered
+			{...props}
+			aria-busy={isPending}
+			placeholder={isPending ? t('Loading...') : placeholder}
+			aria-disabled={isPending || disabled}
+			disabled={isPending || disabled}
+			value={value}
+			flexShrink={0}
+			filter={contactsFilter}
+			setFilter={setContactFilter as (value: string | number | undefined) => void}
+			options={contactsItems}
+			onChange={onChange}
+			endReached={() => fetchNextPage()}
+			renderItem={renderItem ? (props: OptionProps) => renderItem(props, contactsItems[props.index]) : undefined}
+		/>
+	);
+};
+
+export default memo(AutoCompleteContact);

apps/meteor/client/components/AutoCompleteContact/index.ts

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

apps/meteor/client/components/AutoCompleteContact/useContactsList.tsx

@@ -0,0 +1,52 @@
+import type { Serialized } from '@rocket.chat/core-typings';
+import type { ILivechatContactWithManagerData } from '@rocket.chat/rest-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { omnichannelQueryKeys } from '../../lib/queryKeys';
+
+export type ContactOption = Serialized<ILivechatContactWithManagerData> & {
+	value: string;
+	label: string;
+};
+
+type ContactOptions = {
+	filter: string;
+	limit?: number;
+};
+
+const DEFAULT_QUERY_LIMIT = 25;
+
+const formatContactItem = (contact: Serialized<ILivechatContactWithManagerData>): ContactOption => ({
+	...contact,
+	label: contact.name || contact._id,
+	value: contact._id,
+});
+
+export const useContactsList = (options: ContactOptions) => {
+	const getContacts = useEndpoint('GET', '/v1/omnichannel/contacts.search');
+	const { filter, limit = DEFAULT_QUERY_LIMIT } = options;
+
+	return useInfiniteQuery({
+		queryKey: omnichannelQueryKeys.contacts({ filter, limit }),
+		queryFn: async ({ pageParam: offset = 0 }) => {
+			const { contacts, ...data } = await getContacts({
+				searchText: filter,
+				// sort: `{ name: -1 }`,
+				...(limit && { count: limit }),
+				...(offset && { offset }),
+			});
+
+			return {
+				...data,
+				contacts: contacts.map(formatContactItem),
+			};
+		},
+		select: (data) => data.pages.flatMap<ContactOption>((page) => page.contacts),
+		initialPageParam: 0,
+		getNextPageParam: (lastPage) => {
+			const offset = lastPage.offset + lastPage.count;
+			return offset < lastPage.total ? offset : undefined;
+		},
+	});
+};

apps/meteor/client/components/Omnichannel/OutboundMessage/components/AutoCompleteDepartmentAgent.spec.tsx

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+
+import AutoCompleteDepartmentAgent from './AutoCompleteDepartmentAgent';
+
+it('should not display the placeholder when there is a value', () => {
+	const { rerender } = render(<AutoCompleteDepartmentAgent value='' onChange={jest.fn()} placeholder='Select an agent' agents={[]} />);
+
+	expect(screen.getByPlaceholderText('Select an agent')).toBeInTheDocument();
+
+	rerender(<AutoCompleteDepartmentAgent value='agent1' onChange={jest.fn()} placeholder='Select an agent' agents={[]} />);
+
+	expect(screen.queryByPlaceholderText('Select an agent')).not.toBeInTheDocument();
+});

apps/meteor/client/components/Omnichannel/OutboundMessage/components/AutoCompleteDepartmentAgent.tsx

@@ -0,0 +1,64 @@
+import type { ILivechatDepartmentAgents, Serialized } from '@rocket.chat/core-typings';
+import { AutoComplete, Box, Chip, Option, OptionAvatar, OptionContent } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import type { AllHTMLAttributes, ReactElement } from 'react';
+import { useMemo, useState } from 'react';
+
+type AutoCompleteDepartmentAgentProps = Omit<AllHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+	error?: boolean;
+	value: string;
+	onChange(value: string): void;
+	agents?: Serialized<ILivechatDepartmentAgents>[];
+};
+
+const AutoCompleteDepartmentAgent = ({ value, onChange, agents, placeholder, ...props }: AutoCompleteDepartmentAgentProps) => {
+	const [filter, setFilter] = useState('');
+	const debouncedFilter = useDebouncedValue(filter, 1000);
+
+	const options = useMemo(() => {
+		if (!agents) {
+			return [];
+		}
+
+		return agents
+			.filter((agent) => agent.username?.includes(debouncedFilter))
+			.sort((a, b) => a.username.localeCompare(b.username))
+			.map((agent) => ({
+				value: agent.agentId,
+				label: agent.username,
+			}));
+	}, [agents, debouncedFilter]);
+
+	return (
+		<AutoComplete
+			{...props}
+			placeholder={!value ? placeholder : undefined}
+			filter={filter}
+			setFilter={setFilter}
+			value={value}
+			onChange={onChange as (value: string | string[]) => void}
+			options={options}
+			renderSelected={({ selected: { value, label }, ...props }): ReactElement => {
+				return (
+					<Chip {...props} height='x20' value={value} onClick={() => onChange('')} mie={4}>
+						<UserAvatar size='x20' username={label} />
+						<Box is='span' margin='none' mis={4}>
+							{label}
+						</Box>
+					</Chip>
+				);
+			}}
+			renderItem={({ value, label, ...props }): ReactElement => (
+				<Option key={value} {...props}>
+					<OptionAvatar>
+						<UserAvatar username={label} size='x20' />
+					</OptionAvatar>
+					<OptionContent>{label}</OptionContent>
+				</Option>
+			)}
+		/>
+	);
+};
+
+export default AutoCompleteDepartmentAgent;

apps/meteor/client/components/Omnichannel/OutboundMessage/components/AutoCompleteOutboundProvider.tsx

@@ -0,0 +1,69 @@
+import type { ILivechatContact, Serialized } from '@rocket.chat/core-typings';
+import { Option, OptionDescription, PaginatedSelectFiltered } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactElement } from 'react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useTimeFromNow } from '../../../../hooks/useTimeFromNow';
+import useOutboundProvidersList from '../hooks/useOutboundProvidersList';
+import { findLastChatFromChannel } from '../utils/findLastChatFromChannel';
+
+type AutoCompleteOutboundProviderProps = Omit<
+	ComponentProps<typeof PaginatedSelectFiltered>,
+	'filter' | 'setFilter' | 'options' | 'endReached' | 'renderItem'
+> & {
+	contact?: Serialized<Omit<ILivechatContact, 'contactManager'>> | null;
+	value: string;
+	onChange: (value: string) => void;
+};
+
+const AutoCompleteOutboundProvider = ({
+	contact,
+	disabled,
+	value,
+	placeholder,
+	onChange,
+	...props
+}: AutoCompleteOutboundProviderProps): ReactElement => {
+	const [channelsFilter, setChannelsFilter] = useState<string>('');
+	const { t } = useTranslation();
+	const getTimeFromNow = useTimeFromNow(true);
+
+	const { data: options = [], isPending } = useOutboundProvidersList({
+		select: ({ providers = [] }) => {
+			return providers.map((prov) => ({
+				label: prov.providerName,
+				value: prov.providerId,
+			}));
+		},
+	});
+
+	return (
+		<PaginatedSelectFiltered
+			{...props}
+			aria-busy={isPending}
+			placeholder={isPending ? t('Loading...') : placeholder}
+			aria-disabled={isPending || disabled}
+			disabled={isPending || disabled}
+			value={value}
+			flexShrink={0}
+			filter={channelsFilter}
+			setFilter={setChannelsFilter as (value: string | number | undefined) => void}
+			options={options}
+			onChange={onChange}
+			renderItem={({ label, value, ...props }) => {
+				const lastChat = findLastChatFromChannel(contact?.channels, value);
+
+				return (
+					<Option {...props} label={label} value={value}>
+						{lastChat ? (
+							<OptionDescription>{t('Last_message_received__time__', { time: getTimeFromNow(lastChat) })}</OptionDescription>
+						) : null}
+					</Option>
+				);
+			}}
+		/>
+	);
+};
+
+export default AutoCompleteOutboundProvider;