diff --git a/mailpoet/assets/js/src/automation/editor/components/workflow/step.tsx b/mailpoet/assets/js/src/automation/editor/components/workflow/step.tsx
index ea601a69a3..3d1e3b6340 100644
--- a/mailpoet/assets/js/src/automation/editor/components/workflow/step.tsx
+++ b/mailpoet/assets/js/src/automation/editor/components/workflow/step.tsx
@@ -1,8 +1,10 @@
import { useContext } from 'react';
import { __unstableCompositeItem as CompositeItem } from '@wordpress/components';
+import { useDispatch } from '@wordpress/data';
import { WorkflowCompositeContext } from './context';
import { Step as StepType } from './types';
import { DelayIcon, EmailIcon, TriggerIcon } from '../icons';
+import { store } from '../../store';
// mocked data
function getIcon(step: StepType): JSX.Element | null {
@@ -57,6 +59,7 @@ type Props = {
};
export function Step({ step }: Props): JSX.Element {
+ const { selectStep } = useDispatch(store);
const compositeState = useContext(WorkflowCompositeContext);
return (
@@ -66,6 +69,9 @@ export function Step({ step }: Props): JSX.Element {
className="mailpoet-automation-editor-step"
key={step.id}
focusable
+ onClick={() => {
+ selectStep(step);
+ }}
>
{getIcon(step)}
diff --git a/mailpoet/assets/js/src/automation/editor/store/actions.ts b/mailpoet/assets/js/src/automation/editor/store/actions.ts
index c1aa63cc76..acc061a71e 100644
--- a/mailpoet/assets/js/src/automation/editor/store/actions.ts
+++ b/mailpoet/assets/js/src/automation/editor/store/actions.ts
@@ -23,3 +23,10 @@ export function toggleInserterSidebar() {
type: 'TOGGLE_INSERTER_SIDEBAR',
} as const;
}
+
+export function selectStep(value) {
+ return {
+ type: 'SET_SELECTED_STEP',
+ value,
+ } as const;
+}
diff --git a/mailpoet/assets/js/src/automation/editor/store/initial_state.ts b/mailpoet/assets/js/src/automation/editor/store/initial_state.ts
index 877cfe5c25..3415d4dd94 100644
--- a/mailpoet/assets/js/src/automation/editor/store/initial_state.ts
+++ b/mailpoet/assets/js/src/automation/editor/store/initial_state.ts
@@ -79,6 +79,7 @@ const logicalSteps: Item[] = [
export const initialState: State = {
workflowData: { ...window.mailpoet_automation_workflow },
+ selectedStep: undefined,
inserter: {
actionSteps,
logicalSteps,
diff --git a/mailpoet/assets/js/src/automation/editor/store/reducer.ts b/mailpoet/assets/js/src/automation/editor/store/reducer.ts
index 0a1e0ac890..e238bff392 100644
--- a/mailpoet/assets/js/src/automation/editor/store/reducer.ts
+++ b/mailpoet/assets/js/src/automation/editor/store/reducer.ts
@@ -11,6 +11,11 @@ export function reducer(state: State, action: Action): State {
isOpened: !state.inserterSidebar.isOpened,
},
};
+ case 'SET_SELECTED_STEP':
+ return {
+ ...state,
+ selectedStep: action.value,
+ };
default:
return state;
}
diff --git a/mailpoet/assets/js/src/automation/editor/store/selectors.ts b/mailpoet/assets/js/src/automation/editor/store/selectors.ts
index 47f5385a46..cb6141de4e 100644
--- a/mailpoet/assets/js/src/automation/editor/store/selectors.ts
+++ b/mailpoet/assets/js/src/automation/editor/store/selectors.ts
@@ -4,7 +4,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
import { storeName } from './constants';
import { Feature, State } from './types';
import { Item } from '../components/inserter/item';
-import { Workflow } from '../components/workflow/types';
+import { Step, Workflow } from '../components/workflow/types';
export const isFeatureActive = createRegistrySelector(
(select) =>
@@ -32,3 +32,7 @@ export function getInserterLogicalSteps(state: State): Item[] {
export function getWorkflowData(state: State): Workflow {
return state.workflowData;
}
+
+export function getSelectedStep(state: State): Step | undefined {
+ return state.selectedStep;
+}
diff --git a/mailpoet/assets/js/src/automation/editor/store/types.ts b/mailpoet/assets/js/src/automation/editor/store/types.ts
index 9a9c6c7c3d..d8766ddb51 100644
--- a/mailpoet/assets/js/src/automation/editor/store/types.ts
+++ b/mailpoet/assets/js/src/automation/editor/store/types.ts
@@ -1,5 +1,5 @@
import { Item } from '../components/inserter/item';
-import { Workflow } from '../components/workflow/types';
+import { Step, Workflow } from '../components/workflow/types';
export interface AutomationEditorWindow extends Window {
mailpoet_automation_workflow: Workflow;
@@ -7,6 +7,7 @@ export interface AutomationEditorWindow extends Window {
export type State = {
workflowData: Workflow;
+ selectedStep: Step | undefined;
inserter: {
actionSteps: Item[];
logicalSteps: Item[];