From 8a764c92bffc3c5b426e4d1fa97a4131f9d64a8c Mon Sep 17 00:00:00 2001
From: Jan Jakes <jan.jakes@automattic.com>
Date: Fri, 13 May 2022 14:51:24 +0200
Subject: [PATCH] Save current step to store when selected

[MAILPOET-4287]
---
 .../js/src/automation/editor/components/workflow/step.tsx  | 6 ++++++
 mailpoet/assets/js/src/automation/editor/store/actions.ts  | 7 +++++++
 .../assets/js/src/automation/editor/store/initial_state.ts | 1 +
 mailpoet/assets/js/src/automation/editor/store/reducer.ts  | 5 +++++
 .../assets/js/src/automation/editor/store/selectors.ts     | 6 +++++-
 mailpoet/assets/js/src/automation/editor/store/types.ts    | 3 ++-
 6 files changed, 26 insertions(+), 2 deletions(-)

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