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

apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEdit.tsx

@@ -0,0 +1,108 @@
+import type { ILivechatDepartment, IOmnichannelCannedResponse, Serialized } from '@rocket.chat/core-typings';
+import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageScrollableContentWithShadow, PageFooter } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useEndpoint, useTranslation, useRouter } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useId, memo, useCallback } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+
+import CannedResponseForm from '../components/CannedResponseForm';
+
+export type CannedResponseEditFormData = {
+	_id: string;
+	shortcut: string;
+	text: string;
+	tags: string[];
+	scope: string;
+	departmentId: string;
+};
+
+export type CannedResponseEditProps = {
+	cannedResponseData?: Serialized<IOmnichannelCannedResponse>;
+	departmentData?: Serialized<ILivechatDepartment>;
+	onDelete?: () => void;
+};
+
+const getInitialData = (cannedResponseData: Serialized<IOmnichannelCannedResponse> | undefined) => ({
+	_id: cannedResponseData?._id || '',
+	shortcut: cannedResponseData?.shortcut || '',
+	text: cannedResponseData?.text || '',
+	tags: cannedResponseData?.tags || [],
+	scope: cannedResponseData?.scope || 'user',
+	departmentId: cannedResponseData?.departmentId || '',
+});
+
+const CannedResponseEdit = ({ cannedResponseData, onDelete }: CannedResponseEditProps) => {
+	const t = useTranslation();
+	const router = useRouter();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+
+	const saveCannedResponse = useEndpoint('POST', '/v1/canned-responses');
+
+	const methods = useForm<CannedResponseEditFormData>({ defaultValues: getInitialData(cannedResponseData) });
+
+	const {
+		handleSubmit,
+		reset,
+		formState: { isDirty },
+	} = methods;
+
+	const handleSave = useCallback(
+		async ({ departmentId, ...data }: CannedResponseEditFormData) => {
+			try {
+				await saveCannedResponse({
+					...data,
+					_id: cannedResponseData?._id ?? data._id,
+					...(departmentId && { departmentId }),
+				});
+				dispatchToastMessage({
+					type: 'success',
+					message: t(cannedResponseData?._id ? 'Canned_Response_Updated' : 'Canned_Response_Created'),
+				});
+				router.navigate('/omnichannel/canned-responses');
+				queryClient.invalidateQueries({
+					queryKey: ['getCannedResponses'],
+				});
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		[cannedResponseData?._id, queryClient, saveCannedResponse, dispatchToastMessage, t, router],
+	);
+	const formId = useId();
+
+	return (
+		<Page>
+			<PageHeader
+				title={cannedResponseData?._id ? t('Edit_Canned_Response') : t('New_CannedResponse')}
+				onClickBack={() => router.navigate('/omnichannel/canned-responses')}
+			>
+				{cannedResponseData?._id && (
+					<ButtonGroup>
+						<Button danger onClick={onDelete}>
+							{t('Delete')}
+						</Button>
+					</ButtonGroup>
+				)}
+			</PageHeader>
+			<PageScrollableContentWithShadow>
+				<FormProvider {...methods}>
+					<Box id={formId} onSubmit={handleSubmit(handleSave)} width='full' alignSelf='center' maxWidth='x600' is='form' autoComplete='off'>
+						<CannedResponseForm />
+					</Box>
+				</FormProvider>
+			</PageScrollableContentWithShadow>
+			<PageFooter isDirty={isDirty}>
+				<ButtonGroup>
+					<Button onClick={() => reset()}>{t('Cancel')}</Button>
+					<Button form={formId} primary type='submit'>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+			</PageFooter>
+		</Page>
+	);
+};
+
+export default memo(CannedResponseEdit);

apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEditWithData.tsx

@@ -0,0 +1,44 @@
+import type { IOmnichannelCannedResponse } from '@rocket.chat/core-typings';
+import { Callout } from '@rocket.chat/fuselage';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import CannedResponseEdit from './CannedResponseEdit';
+import CannedResponseEditWithDepartmentData from './CannedResponseEditWithDepartmentData';
+import { useRemoveCannedResponse } from './useRemoveCannedResponse';
+import { FormSkeleton } from '../../../../components/Skeleton';
+
+export type CannedResponseEditWithDataProps = { cannedResponseId: IOmnichannelCannedResponse['_id'] };
+
+const CannedResponseEditWithData = ({ cannedResponseId }: CannedResponseEditWithDataProps) => {
+	const { t } = useTranslation();
+
+	const getCannedResponseById = useEndpoint('GET', '/v1/canned-responses/:_id', { _id: cannedResponseId });
+	const handleDelete = useRemoveCannedResponse(cannedResponseId);
+
+	const { data, isPending, isError } = useQuery({
+		queryKey: ['getCannedResponseById', cannedResponseId],
+		queryFn: async () => getCannedResponseById(),
+	});
+
+	if (isPending) {
+		return <FormSkeleton />;
+	}
+
+	if (isError) {
+		return (
+			<Callout margin={16} type='danger'>
+				{t('Not_Available')}
+			</Callout>
+		);
+	}
+
+	if (data?.cannedResponse?.scope === 'department') {
+		return <CannedResponseEditWithDepartmentData cannedResponseData={data.cannedResponse} onDelete={handleDelete} />;
+	}
+
+	return <CannedResponseEdit cannedResponseData={data?.cannedResponse} onDelete={handleDelete} />;
+};
+
+export default CannedResponseEditWithData;

apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseEditWithDepartmentData.tsx

@@ -0,0 +1,51 @@
+import type { IOmnichannelCannedResponse, Serialized } from '@rocket.chat/core-typings';
+import { Callout } from '@rocket.chat/fuselage';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import CannedResponseEdit from './CannedResponseEdit';
+import { FormSkeleton } from '../../../../components/Skeleton';
+import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
+
+const CannedResponseEditWithDepartmentData = ({
+	cannedResponseData,
+	onDelete,
+}: {
+	cannedResponseData: Serialized<IOmnichannelCannedResponse>;
+	onDelete: () => void;
+}) => {
+	const departmentId = useMemo(() => cannedResponseData?.departmentId, [cannedResponseData]) as string;
+
+	const getDepartment = useEndpoint('GET', '/v1/livechat/department/:_id', { _id: departmentId });
+	const {
+		data: departmentData,
+		isPending,
+		isError,
+	} = useQuery({
+		queryKey: omnichannelQueryKeys.department(departmentId),
+		queryFn: async () => {
+			const { department } = await getDepartment({});
+			return department;
+		},
+	});
+
+	const { t } = useTranslation();
+
+	if (isPending) {
+		return <FormSkeleton />;
+	}
+
+	if (isError) {
+		return (
+			<Callout margin={16} type='danger'>
+				{t('Not_Available')}
+			</Callout>
+		);
+	}
+
+	return <CannedResponseEdit cannedResponseData={cannedResponseData} departmentData={departmentData.department} onDelete={onDelete} />;
+};
+
+export default CannedResponseEditWithDepartmentData;

apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponseFilter.tsx

@@ -0,0 +1,52 @@
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { Box, Icon, TextInput, Select } from '@rocket.chat/fuselage';
+import type { ChangeEvent } from 'react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AutoCompleteAgent from '../../components/AutoCompleteAgent';
+
+type SharingValues = '' | 'user' | 'global' | 'department';
+
+export type CannedResponsesFilterProps = {
+	createdBy: string;
+	setCreatedBy: (value: string) => void;
+	sharing: SharingValues;
+	setSharing: (value: SharingValues) => void;
+	text: string;
+	setText: (text: string) => void;
+};
+
+const CannedResponsesFilter = ({ createdBy, setCreatedBy, sharing, setSharing, text, setText }: CannedResponsesFilterProps) => {
+	const { t } = useTranslation();
+
+	const sharingList: SelectOption[] = [
+		['', t('All')],
+		['user', t('Private')],
+		['global', t('Public')],
+		['department', t('Department')],
+	];
+
+	return (
+		<Box marginBlock={16} display='flex' flexDirection='row'>
+			<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+				<Box marginBlock={4}>{t('Search')}</Box>
+				<TextInput
+					value={text}
+					onChange={(e: ChangeEvent<HTMLInputElement>) => setText(e.target.value)}
+					endAddon={<Icon name='magnifier' size='x20' />}
+				/>
+			</Box>
+			<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+				<Box marginBlock={4}>{t('Sharing')}</Box>
+				<Select value={sharing} onChange={(value) => setSharing(value as SharingValues)} options={sharingList} />
+			</Box>
+			<Box display='flex' marginInlineEnd={8} flexGrow={1} flexDirection='column'>
+				<Box marginBlock={4}>{t('Created_by')}</Box>
+				<AutoCompleteAgent value={createdBy} onChange={setCreatedBy} haveAll />
+			</Box>
+		</Box>
+	);
+};
+
+export default memo(CannedResponsesFilter);

apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponsesPage.tsx

@@ -0,0 +1,39 @@
+import { Button, ButtonGroup } from '@rocket.chat/fuselage';
+import { Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import CannedResponseEdit from './CannedResponseEdit';
+import CannedResponseEditWithData from './CannedResponseEditWithData';
+import CannedResponsesTable from './CannedResponsesTable';
+
+const CannedResponsesPage = () => {
+	const { t } = useTranslation();
+	const router = useRouter();
+
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+
+	if (context === 'edit' && id) {
+		return <CannedResponseEditWithData cannedResponseId={id} />;
+	}
+
+	if (context === 'new') {
+		return <CannedResponseEdit />;
+	}
+
+	return (
+		<Page>
+			<PageHeader title={t('Canned_Responses')}>
+				<ButtonGroup>
+					<Button onClick={() => router.navigate('/omnichannel/canned-responses/new')}>{t('Create_canned_response')}</Button>
+				</ButtonGroup>
+			</PageHeader>
+			<PageContent>
+				<CannedResponsesTable />
+			</PageContent>
+		</Page>
+	);
+};
+
+export default CannedResponsesPage;

apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponsesRoute.tsx

@@ -0,0 +1,16 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import CannedResponsesPage from './CannedResponsesPage';
+import NotAuthorizedPage from '../../../notAuthorized/NotAuthorizedPage';
+
+const CannedResponsesRoute = () => {
+	const canViewCannedResponses = usePermission('manage-livechat-canned-responses');
+
+	if (!canViewCannedResponses) {
+		return <NotAuthorizedPage />;
+	}
+
+	return <CannedResponsesPage />;
+};
+
+export default CannedResponsesRoute;

apps/meteor/client/views/omnichannel/cannedResponses/modals/CannedResponsesTable.tsx

@@ -0,0 +1,192 @@
+import { Box, Pagination } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableHeader,
+	GenericTableHeaderCell,
+	GenericTableLoadingRow,
+	GenericTableRow,
+	GenericTableCell,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { useTranslation, usePermission, useToastMessageDispatch, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { hashKey, useQuery } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+
+import CannedResponseFilter from './CannedResponseFilter';
+import GenericNoResults from '../../../../components/GenericNoResults';
+import { useFormatDateAndTime } from '../../../../hooks/useFormatDateAndTime';
+import { links } from '../../../../lib/links';
+import RemoveCannedResponseButton from '../RemoveCannedResponseButton';
+
+type Scope = 'global' | 'department' | 'user';
+
+const CannedResponsesTable = () => {
+	const t = useTranslation();
+	const router = useRouter();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const getTime = useFormatDateAndTime();
+
+	const isMonitor = usePermission('save-department-canned-responses');
+	const isManager = usePermission('save-all-canned-responses');
+
+	const [createdBy, setCreatedBy] = useState('all');
+	const [sharing, setSharing] = useState<'' | 'user' | 'global' | 'department'>('');
+	const [text, setText] = useState('');
+	const debouncedText = useDebouncedValue(text, 500);
+
+	const { current, itemsPerPage, setItemsPerPage: onSetItemsPerPage, setCurrent: onSetCurrent, ...paginationProps } = usePagination();
+	const { sortBy, setSort, sortDirection } = useSort<'shortcut' | 'scope' | 'tags' | '_createdAt' | 'createdBy'>('shortcut');
+
+	const query = useMemo(
+		() => ({
+			text: debouncedText,
+			sort: JSON.stringify({ [sortBy]: sortDirection === 'asc' ? 1 : -1 }),
+			...(sharing && { scope: sharing }),
+			...(createdBy && createdBy !== 'all' && { createdBy }),
+			...(itemsPerPage && { count: itemsPerPage }),
+			...(current && { offset: current }),
+		}),
+		[createdBy, current, debouncedText, itemsPerPage, sharing, sortBy, sortDirection],
+	);
+
+	const [defaultQuery] = useState(hashKey([query]));
+	const queryHasChanged = defaultQuery !== hashKey([query]);
+
+	const getCannedResponses = useEndpoint('GET', '/v1/canned-responses');
+	const { data, isLoading, isSuccess } = useQuery({
+		queryKey: ['getCannedResponses', query],
+		queryFn: () => getCannedResponses(query),
+		refetchOnWindowFocus: false,
+	});
+
+	const handleAddNew = useStableCallback(() => router.navigate('/omnichannel/canned-responses/new'));
+
+	const onRowClick = useStableCallback((id: string, scope: string) => (): void => {
+		if (scope === 'global' && isMonitor && !isManager) {
+			return dispatchToastMessage({
+				type: 'error',
+				message: t('Not_authorized'),
+			});
+		}
+
+		router.navigate(`/omnichannel/canned-responses/edit/${id}`);
+	});
+
+	const defaultOptions = useMemo(
+		() => ({
+			global: t('Public'),
+			department: t('Department'),
+			user: t('Private'),
+		}),
+		[t],
+	);
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='shortcut' direction={sortDirection} active={sortBy === 'shortcut'} onClick={setSort} sort='shortcut'>
+				{t('Shortcut')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='sharing' direction={sortDirection} active={sortBy === 'scope'} onClick={setSort} sort='scope'>
+				{t('Sharing')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='createdBy' direction={sortDirection} active={sortBy === 'createdBy'} onClick={setSort} sort='createdBy'>
+				{t('Created_by')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='createdAt'
+				direction={sortDirection}
+				active={sortBy === '_createdAt'}
+				onClick={setSort}
+				sort='_createdAt'
+			>
+				{t('Created_at')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='tags' direction={sortDirection} active={sortBy === 'tags'} onClick={setSort} sort='tags'>
+				{t('Tags')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='remove' width='x60'>
+				{t('Remove')}
+			</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<>
+			{((isSuccess && data?.cannedResponses.length > 0) || queryHasChanged) && (
+				<CannedResponseFilter
+					createdBy={createdBy}
+					setCreatedBy={setCreatedBy}
+					sharing={sharing}
+					setSharing={setSharing}
+					text={text}
+					setText={setText}
+				/>
+			)}
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingRow cols={6} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data?.cannedResponses.length === 0 && queryHasChanged && <GenericNoResults />}
+			{isSuccess && data?.cannedResponses.length === 0 && !queryHasChanged && (
+				<GenericNoResults
+					icon='baloon-exclamation'
+					title={t('No_Canned_Responses_Yet')}
+					description={t('No_Canned_Responses_Yet-description')}
+					buttonTitle={t('Create_canned_response')}
+					buttonAction={handleAddNew}
+					linkHref={links.go.omnichannelDocs}
+					linkText={t('Learn_more_about_canned_responses')}
+				/>
+			)}
+			{isSuccess && data?.cannedResponses.length > 0 && (
+				<>
+					<GenericTable aria-label={t('Canned_Responses')} aria-busy={text !== debouncedText}>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data?.cannedResponses.map(({ _id, shortcut, scope, createdBy, _createdAt, tags = [] }) => (
+								<GenericTableRow key={_id} tabIndex={0} role='link' onClick={onRowClick(_id, scope)} action>
+									<GenericTableCell withTruncatedText>{shortcut}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{defaultOptions[scope as Scope]}</GenericTableCell>
+									<GenericTableCell withTruncatedText>
+										<Box display='flex' alignItems='center'>
+											<UserAvatar size='x24' username={createdBy.username} />
+											<Box display='flex' withTruncatedText marginInline={8}>
+												<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
+													<Box fontScale='p2m' withTruncatedText color='default'>
+														{createdBy.username}
+													</Box>
+												</Box>
+											</Box>
+										</Box>
+									</GenericTableCell>
+									<GenericTableCell withTruncatedText>{getTime(_createdAt)}</GenericTableCell>
+									<GenericTableCell withTruncatedText>{tags.join(', ')}</GenericTableCell>
+									{!(scope === 'global' && isMonitor && !isManager) && <RemoveCannedResponseButton id={_id} />}
+								</GenericTableRow>
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={onSetItemsPerPage}
+						onSetCurrent={onSetCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+		</>
+	);
+};
+
+export default CannedResponsesTable;

apps/meteor/client/views/omnichannel/cannedResponses/modals/CreateCannedResponse/CreateCannedResponseModal.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta } from '@storybook/react';
+
+import CreateCannedResponseModal from './CreateCannedResponseModal';
+
+export default {
+	component: CreateCannedResponseModal,
+	parameters: {
+		actions: {
+			argTypesRegex: '^on.*',
+		},
+	},
+} satisfies Meta<typeof CreateCannedResponseModal>;
+
+export const Default = {};

apps/meteor/client/views/omnichannel/cannedResponses/modals/CreateCannedResponse/CreateCannedResponseModal.tsx

@@ -0,0 +1,81 @@
+import type { IOmnichannelCannedResponse } from '@rocket.chat/core-typings';
+import { Box } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { memo, useCallback } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { FormProvider, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import GenericError from '../../../../../components/GenericError';
+import CannedResponseForm from '../../components/CannedResponseForm';
+import type { CannedResponseEditFormData } from '../CannedResponseEdit';
+
+const getInitialData = (cannedResponseData: IOmnichannelCannedResponse | undefined) => ({
+	_id: cannedResponseData?._id || '',
+	shortcut: cannedResponseData?.shortcut || '',
+	text: cannedResponseData?.text || '',
+	tags: cannedResponseData?.tags || [],
+	scope: cannedResponseData?.scope || 'user',
+	departmentId: cannedResponseData?.departmentId || '',
+});
+
+export type CreateCannedResponseModalProps = {
+	cannedResponseData?: IOmnichannelCannedResponse;
+	onClose: () => void;
+	reloadCannedList: () => void;
+};
+
+const CreateCannedResponseModal = ({ cannedResponseData, onClose, reloadCannedList }: CreateCannedResponseModalProps) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const methods = useForm<CannedResponseEditFormData>({ defaultValues: getInitialData(cannedResponseData) });
+	const {
+		handleSubmit,
+		formState: { isDirty },
+	} = methods;
+
+	const saveCannedResponse = useEndpoint('POST', '/v1/canned-responses');
+
+	const handleCreate = useCallback(
+		async ({ departmentId, ...data }: CannedResponseEditFormData) => {
+			try {
+				await saveCannedResponse({
+					...data,
+					_id: cannedResponseData?._id ?? data._id,
+					...(departmentId && { departmentId }),
+				});
+				dispatchToastMessage({
+					type: 'success',
+					message: t(cannedResponseData?._id ? 'Canned_Response_Updated' : 'Canned_Response_Created'),
+				});
+				onClose();
+				reloadCannedList?.();
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			}
+		},
+		[cannedResponseData?._id, saveCannedResponse, onClose, dispatchToastMessage, t, reloadCannedList],
+	);
+
+	return (
+		<GenericModal
+			icon={null}
+			variant='warning'
+			onCancel={onClose}
+			confirmText={t('Save')}
+			confirmDisabled={!isDirty}
+			title={cannedResponseData?._id ? t('Edit_Canned_Response') : t('Create_canned_response')}
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit(handleCreate)} {...props} />}
+		>
+			<ErrorBoundary fallbackRender={() => <GenericError icon='circle-exclamation' />}>
+				<FormProvider {...methods}>
+					<CannedResponseForm />
+				</FormProvider>
+			</ErrorBoundary>
+		</GenericModal>
+	);
+};
+
+export default memo(CreateCannedResponseModal);

apps/meteor/client/views/omnichannel/cannedResponses/modals/CreateCannedResponse/index.tsx

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

apps/meteor/client/views/omnichannel/cannedResponses/modals/useRemoveCannedResponse.tsx

@@ -0,0 +1,45 @@
+import type { IOmnichannelCannedResponse } from '@rocket.chat/core-typings';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch, useRouter, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+export const useRemoveCannedResponse = (id: IOmnichannelCannedResponse['_id']) => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const router = useRouter();
+	const queryClient = useQueryClient();
+
+	const dispatchToastMessage = useToastMessageDispatch();
+	const removeCannedResponse = useEndpoint('DELETE', '/v1/canned-responses/:_id', { _id: id });
+
+	const handleDelete = useStableCallback(() => {
+		const onDeleteCannedResponse: () => Promise<void> = async () => {
+			try {
+				await removeCannedResponse();
+				queryClient.invalidateQueries({
+					queryKey: ['getCannedResponses'],
+				});
+				router.navigate('/omnichannel/canned-responses');
+				dispatchToastMessage({ type: 'success', message: t('Canned_Response_Removed') });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal(null);
+			}
+		};
+
+		setModal(
+			<GenericModal
+				variant='danger'
+				onConfirm={onDeleteCannedResponse}
+				onCancel={() => setModal(null)}
+				onClose={() => setModal(null)}
+				confirmText={t('Delete')}
+			/>,
+		);
+	});
+
+	return handleDelete;
+};