Add a way to manage filter types in automation editor store

[PREMIUM-253]

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

@@ -241,6 +241,13 @@ export function registerStepType(stepType) {
   };
 }
 
+export function registerFilterType(filterType) {
+  return {
+    type: 'REGISTER_FILTER_TYPE',
+    filterType,
+  };
+}
+
 export function updateStepArgs(stepId, name, value) {
   return {
     type: 'UPDATE_STEP_ARGS',

mailpoet/assets/js/src/automation/editor/store/initial-state.ts

@@ -7,6 +7,7 @@ export const getInitialState = (): State => ({
   registry: { ...window.mailpoet_automation_registry },
   context: { ...window.mailpoet_automation_context },
   stepTypes: {},
+  filterTypes: {},
   automationData: { ...window.mailpoet_automation },
   selectedStep: undefined,
   inserterSidebar: {

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

@@ -71,6 +71,14 @@ export function reducer(state: State, action): State {
           [action.stepType.key]: action.stepType,
         },
       };
+    case 'REGISTER_FILTER_TYPE':
+      return {
+        ...state,
+        filterTypes: {
+          ...state.filterTypes,
+          [action.filterType.key]: action.filterType,
+        },
+      };
     case 'UPDATE_STEP_ARGS': {
       const prevArgs = state.automationData.steps[action.stepId].args ?? {};
 

mailpoet/assets/js/src/automation/editor/store/register-filter-type.ts

@@ -0,0 +1,10 @@
+import { dispatch } from '@wordpress/data';
+import { Hooks } from 'wp-js-hooks';
+import { storeName } from './constants';
+import { FilterType } from './types';
+
+export const registerFilterType = (filterType: FilterType): void => {
+  void dispatch(storeName).registerFilterType(
+    Hooks.applyFilters('mailpoet.automation.register_filter_type', filterType),
+  );
+};

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

@@ -10,6 +10,7 @@ import {
   StepErrors,
   StepType,
   State as EditorState,
+  FilterType,
 } from './types';
 import { Item } from '../components/inserter/item';
 import { Step, Automation } from '../components/automation/types';
@@ -93,6 +94,13 @@ export function getStepType(state: State, key: string): StepType | undefined {
   return state.stepTypes[key] ?? undefined;
 }
 
+export function getFilterType(
+  state: State,
+  key: string,
+): FilterType | undefined {
+  return state.filterTypes[key] ?? undefined;
+}
+
 export function getSelectedStepType(state: State): StepType | undefined {
   return getStepType(state, state.selectedStep?.key);
 }

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

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { Step, Automation } from '../components/automation/types';
+import { Step, Automation, Filter } from '../components/automation/types';
 
 export interface AutomationEditorWindow extends Window {
   mailpoet_automation_registry: Registry;
@@ -82,6 +82,13 @@ export type StepType = {
   createStep?: (step: Step, state: State) => Step;
 };
 
+export type FilterType = {
+  key: string;
+  fieldType: Registry['fields'][string]['type'];
+  formatValue: (filter: Filter, field: Registry['fields'][string]) => string;
+  edit: ComponentType;
+};
+
 export type StepErrors = {
   step_id: string;
   message: string;
@@ -98,6 +105,7 @@ export type State = {
   registry: Registry;
   context: Context;
   stepTypes: Record<string, StepType>;
+  filterTypes: Record<string, FilterType>;
   automationData: Automation;
   selectedStep: Step | undefined;
   inserterSidebar: {