Save current step to store when selected

[MAILPOET-4287]

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);
+      }}
     >
       <div className="mailpoet-automation-editor-step-icon">
         {getIcon(step)}

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;
+}

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,

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;
   }

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;
+}

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[];