Add type (triggers vs. other steps) to inserter popover state

[PREMIUM-194]
[MAILPOET-4585]

mailpoet/assets/js/src/automation/editor/components/inserter-popover/index.tsx

@@ -4,23 +4,23 @@ import { Inserter } from '../inserter';
 import { store } from '../../store';
 
 export function InserterPopover(): JSX.Element | null {
-  const { inserterPopoverAnchor } = useSelect(
+  const { inserterPopover } = useSelect(
     (select) => ({
-      inserterPopoverAnchor: select(store).getInserterPopoverAnchor(),
+      inserterPopover: select(store).getInserterPopover(),
     }),
     [],
   );
 
-  const { setInserterPopoverAnchor } = dispatch(store);
+  const { setInserterPopover } = dispatch(store);
 
-  if (!inserterPopoverAnchor) {
+  if (!inserterPopover) {
     return null;
   }
 
   return (
     <Popover
-      anchorRect={inserterPopoverAnchor.getBoundingClientRect()}
-      onClose={() => setInserterPopoverAnchor(undefined)}
+      anchorRect={inserterPopover.anchor.getBoundingClientRect()}
+      onClose={() => setInserterPopover(undefined)}
     >
       <Inserter />
     </Popover>

mailpoet/assets/js/src/automation/editor/components/workflow/add-trigger.tsx

@@ -8,7 +8,7 @@ import { store } from '../../store';
 
 export function AddTrigger(): JSX.Element {
   const compositeState = useContext(WorkflowCompositeContext);
-  const { setInserterPopoverAnchor } = useDispatch(store);
+  const { setInserterPopover } = useDispatch(store);
 
   return (
     <CompositeItem
@@ -18,9 +18,10 @@ export function AddTrigger(): JSX.Element {
       focusable
       onClick={(event) => {
         event.stopPropagation();
-        setInserterPopoverAnchor(
-          (event.target as HTMLElement).closest('button'),
-        );
+        setInserterPopover({
+          anchor: (event.target as HTMLElement).closest('button'),
+          type: 'triggers',
+        });
       }}
     >
       <Icon icon={plus} size={16} />

mailpoet/assets/js/src/automation/editor/components/workflow/separator.tsx

@@ -3,11 +3,15 @@ import { AddStepButton } from './add-step-button';
 import { store } from '../../store';
 
 export function Separator(): JSX.Element {
-  const { setInserterPopoverAnchor } = dispatch(store);
+  const { setInserterPopover } = dispatch(store);
 
   return (
     <div className="mailpoet-automation-editor-separator">
-      <AddStepButton onClick={(button) => setInserterPopoverAnchor(button)} />
+      <AddStepButton
+        onClick={(button) =>
+          setInserterPopover({ anchor: button, type: 'steps' })
+        }
+      />
     </div>
   );
 }

mailpoet/assets/js/src/automation/editor/store/actions.ts

@@ -3,7 +3,7 @@ import { apiFetch } from '@wordpress/data-controls';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { storeName } from './constants';
-import { Feature } from './types';
+import { Feature, State } from './types';
 
 export const openSidebar =
   (key) =>
@@ -26,10 +26,10 @@ export function toggleInserterSidebar() {
   } as const;
 }
 
-export function setInserterPopoverAnchor(anchor?: HTMLElement) {
+export function setInserterPopover(data?: State['inserterPopover']) {
   return {
-    type: 'SET_INSERTER_POPOVER_ANCHOR',
-    anchor,
+    type: 'SET_INSERTER_POPOVER',
+    data,
   } as const;
 }
 

mailpoet/assets/js/src/automation/editor/store/initial_state.ts

@@ -10,7 +10,5 @@ export const initialState: State = {
   inserterSidebar: {
     isOpened: false,
   },
-  inserterPopover: {
-    anchor: undefined,
-  },
+  inserterPopover: undefined,
 };

mailpoet/assets/js/src/automation/editor/store/reducer.ts

@@ -11,13 +11,10 @@ export function reducer(state: State, action: Action): State {
           isOpened: !state.inserterSidebar.isOpened,
         },
       };
-    case 'SET_INSERTER_POPOVER_ANCHOR':
+    case 'SET_INSERTER_POPOVER':
       return {
         ...state,
-        inserterPopover: {
-          ...state.inserterPopover,
-          anchor: action.anchor,
-        },
+        inserterPopover: action.data,
       };
     case 'SET_SELECTED_STEP':
       return {

mailpoet/assets/js/src/automation/editor/store/selectors.ts

@@ -33,10 +33,10 @@ export function getInserterLogicalSteps(state: State): Item[] {
   );
 }
 
-export function getInserterPopoverAnchor(
+export function getInserterPopover(
   state: State,
-): HTMLElement | undefined {
-  return state.inserterPopover.anchor;
+): State['inserterPopover'] | undefined {
+  return state.inserterPopover;
 }
 
 export function getWorkflowData(state: State): Workflow {

mailpoet/assets/js/src/automation/editor/store/types.ts

@@ -27,8 +27,9 @@ export type State = {
   inserterSidebar: {
     isOpened: boolean;
   };
-  inserterPopover: {
-    anchor?: HTMLElement;
+  inserterPopover?: {
+    anchor: HTMLElement;
+    type: 'steps' | 'triggers';
   };
 };