Convert form editor store to TypeScript

[MAILPOET-4323]

mailpoet/assets/js/src/form_editor/form_editor.jsx

@@ -4,7 +4,7 @@ import apiFetch from '@wordpress/api-fetch';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
 import { Notices } from 'notices/notices.jsx';
 import { Editor } from './components/editor.jsx';
-import { initStore } from './store/store.jsx';
+import { initStore } from './store/store';
 import { initBlocks } from './blocks/blocks.jsx';
 import { initHooks } from './hooks';
 import { initTranslations } from './translations';

mailpoet/assets/js/src/form_editor/store/state_types.ts

@@ -1,4 +1,128 @@
+import { FormSettingsType } from './form_data_types';
+
 export type BlockInsertionPoint = {
   rootClientId: string | undefined;
   insertionIndex: number | undefined;
 };
+
+export interface FormEditorWindow extends Window {
+  mailpoet_custom_fields: {
+    id: number;
+    name: string;
+    type: string;
+    params: unknown;
+    created_at: string;
+    updated_at: string;
+  }[];
+  mailpoet_form_data: {
+    id: number | null;
+    name: string;
+    body: unknown[] | null;
+    settings: FormSettingsType | null;
+    styles: string | null;
+    status: 'enabled' | 'disabled';
+    created_at: { date: string; timezone_type: number; timezone: string };
+    updated_at: { date: string; timezone_type: number; timezone: string };
+    deleted_at: {
+      date: string;
+      timezone_type: number;
+      timezone: string;
+    } | null;
+  };
+  mailpoet_date_types: {
+    label: string;
+    value: string;
+  }[];
+  mailpoet_date_formats: {
+    year_month_day: string[];
+    year_month: string[];
+    year: string[];
+    month: string[];
+  };
+  mailpoet_month_names: string[];
+  mailpoet_form_edit_url: string;
+  mailpoet_form_exports: {
+    php: string;
+    iframe: string;
+    shortcode: string;
+  };
+  mailpoet_form_preview_page: string;
+  mailpoet_form_segments: {
+    id: string;
+    name: string;
+    type: string;
+    subscribers: number;
+  }[];
+  mailpoet_close_icons_url: string;
+  mailpoet_custom_fonts: string[];
+  mailpoet_all_wp_posts: { id: string; name: string }[];
+  mailpoet_all_wp_pages: { id: string; name: string }[];
+  mailpoet_all_wp_categories: { id: string; name: string }[];
+  mailpoet_all_wp_tags: { id: string; name: string }[];
+  mailpoet_woocommerce_products: { id: string; name: string }[];
+  mailpoet_woocommerce_categories: { id: string; name: string }[];
+  mailpoet_woocommerce_tags: { id: string; name: string }[];
+  mailpoet_tutorial_seen: '0' | '1';
+  mailpoet_tutorial_url: string;
+  mailpoet_is_administrator: boolean;
+}
+
+declare let window: FormEditorWindow;
+
+export type State = {
+  editorHistory: unknown[];
+  editorHistoryOffset: number;
+  formBlocks: unknown[];
+  formData: typeof window.mailpoet_form_data;
+  dateSettingData: {
+    dateTypes: typeof window.mailpoet_date_types;
+    dateFormats: typeof window.mailpoet_date_formats;
+    months: typeof window.mailpoet_month_names;
+  };
+  sidebarOpened: boolean;
+  formExports: typeof window.mailpoet_form_exports;
+  formErrors: string[];
+  segments: typeof window.mailpoet_form_segments;
+  customFields: typeof window.mailpoet_custom_fields;
+  isFormSaving: boolean;
+  isCustomFieldSaving: boolean;
+  isCustomFieldCreating: boolean;
+  isPreviewShown: boolean;
+  isPreviewReady: boolean;
+  isCustomFieldDeleting: boolean;
+  inserterPanel: BlockInsertionPoint;
+  notices: {
+    id: string;
+    content: string;
+    isDismissible: boolean;
+    status: string;
+  }[];
+  hasUnsavedChanges: boolean;
+  sidebar: {
+    activeSidebar: string;
+    activeTab: string;
+    openedPanels: string[];
+  };
+  previewSettings: {
+    displayType: 'desktop' | 'mobile';
+    formType: 'below_post' | 'fixed_bar' | 'popup' | 'slide_in' | 'others';
+  };
+  fullscreenStatus: boolean;
+  editorUrl: string;
+  formEditorUrl: string;
+  previewPageUrl: string;
+  closeIconsUrl: string;
+  customFonts: string[];
+  allWpPosts: typeof window.mailpoet_all_wp_posts;
+  allWpPages: typeof window.mailpoet_all_wp_pages;
+  allWpCategories: typeof window.mailpoet_all_wp_categories;
+  allWpTags: typeof window.mailpoet_all_wp_tags;
+  allWooCommerceProducts: typeof window.mailpoet_woocommerce_products;
+  allWooCommerceCategories: typeof window.mailpoet_woocommerce_categories;
+  allWooCommerceTags: typeof window.mailpoet_woocommerce_tags;
+  tutorialSeen: boolean;
+  tutorialUrl: string;
+  user: {
+    isAdministrator: boolean;
+  };
+};

mailpoet/assets/js/src/form_editor/store/store.ts

@@ -12,6 +12,16 @@ import { controls } from './controls.jsx';
 import { validateForm } from './form_validator.jsx';
 import { formBodyToBlocksFactory } from './form_body_to_blocks.jsx';
 import { mapFormDataAfterLoading } from './map_form_data_after_loading.jsx';
+import { FormEditorWindow, State } from './state_types';
+import { OmitFirstArgs } from '../../types';
+
+const storeName = 'mailpoet-form-editor';
+
+declare let window: FormEditorWindow;
+
+declare module '@wordpress/data' {
+  function select(key: typeof storeName): OmitFirstArgs<typeof selectors>;
+}
 
 export const initStore = () => {
   const customFields = window.mailpoet_custom_fields.map((field) => ({
@@ -75,6 +85,9 @@ export const initStore = () => {
     isFormSaving: false,
     isCustomFieldSaving: false,
     isCustomFieldCreating: false,
+    isPreviewShown: false,
+    isPreviewReady: false,
+    isCustomFieldDeleting: false,
     inserterPanel: null,
     notices: [],
     hasUnsavedChanges: false,
@@ -112,5 +125,5 @@ export const initStore = () => {
     resolvers: {},
   };
 
-  registerStore('mailpoet-form-editor', config);
+  registerStore<State>('mailpoet-form-editor', config);
 };