diff --git a/mailpoet/assets/js/src/automation/editor/components/actions/trash-button.tsx b/mailpoet/assets/js/src/automation/editor/components/actions/trash-button.tsx
new file mode 100644
index 0000000000..d069bb84b4
--- /dev/null
+++ b/mailpoet/assets/js/src/automation/editor/components/actions/trash-button.tsx
@@ -0,0 +1,66 @@
+import apiFetch from '@wordpress/api-fetch';
+import { Button } from '@wordpress/components';
+import { StoreDescriptor, useDispatch, useSelect } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+import { confirmAlert } from '../../../../common/confirm_alert';
+import { store } from '../../store';
+import { Workflow } from '../workflow/types';
+import { MailPoet } from '../../../../mailpoet';
+
+export function TrashButton(): JSX.Element {
+ const { createErrorNotice } = useDispatch(noticesStore as StoreDescriptor);
+ const { workflow } = useSelect(
+ (select) => ({
+ workflow: select(store).getWorkflowData(),
+ }),
+ [],
+ );
+
+ const trash = () => {
+ apiFetch({
+ path: `/workflows/${workflow.id}`,
+ method: 'PUT',
+ data: {
+ ...workflow,
+ status: 'trash',
+ },
+ })
+ .then(({ data }: { data: Workflow }) => {
+ if (data.status !== 'trash') {
+ void createErrorNotice('An error occurred!', {
+ explicitDismiss: true,
+ });
+ return;
+ }
+
+ window.location.href = MailPoet.urls.automationListing;
+ })
+ .catch((): void => {
+ void createErrorNotice('An error occurred!', {
+ explicitDismiss: true,
+ });
+ });
+
+ return true;
+ };
+
+ return (
+
+ );
+}
diff --git a/mailpoet/assets/js/src/automation/editor/components/sidebar/workflow/index.tsx b/mailpoet/assets/js/src/automation/editor/components/sidebar/workflow/index.tsx
index 93ad76ebb0..81ede0c625 100644
--- a/mailpoet/assets/js/src/automation/editor/components/sidebar/workflow/index.tsx
+++ b/mailpoet/assets/js/src/automation/editor/components/sidebar/workflow/index.tsx
@@ -2,6 +2,7 @@ import { PanelBody, PanelRow } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { store } from '../../../store';
import { PlainBodyTitle } from '../../panel';
+import { TrashButton } from '../../actions/trash-button';
export function WorkflowSidebar(): JSX.Element {
const { workflowData } = useSelect(
@@ -47,6 +48,9 @@ export function WorkflowSidebar(): JSX.Element {
Author {workflowData.author.name}
+
+
+
);
}