Warn a user when leaving the page without saving

[MAILPOET-2549]

assets/js/src/form_editor/components/editor.jsx

@@ -14,6 +14,7 @@ import Header from './header.jsx';
 import Sidebar from './sidebar.jsx';
 import FormTitle from './form_title.jsx';
 import Notices from './notices.jsx';
+import UnsavedChangesNotice from './unsaved_changes_notice.jsx';
 import FormStyles from './form_styles.jsx';
 
 // Editor settings - see @wordpress/block-editor/src/store/defaults.js
@@ -56,6 +57,7 @@ export default () => {
           >
             <div className="edit-post-layout__content">
               <Notices />
+              <UnsavedChangesNotice />
               <BlockSelectionClearer className="edit-post-visual-editor editor-styles-wrapper">
                 <BlockEditorKeyboardShortcuts />
                 <WritingFlow>

assets/js/src/form_editor/components/unsaved_changes_notice.jsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import MailPoet from 'mailpoet';
+import { useSelect } from '@wordpress/data';
+
+function UnsavedChangesNotice() {
+  const hasUnsavedChanges = useSelect(
+    (sel) => sel('mailpoet-form-editor').hasUnsavedChanges(),
+    []
+  );
+
+  function onUnload(event) {
+    if (hasUnsavedChanges) {
+      event.returnValue = MailPoet.I18n.t('changesNotSaved'); // eslint-disable-line no-param-reassign
+      return event.returnValue;
+    }
+    return '';
+  }
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', onUnload);
+
+    return () => window.removeEventListener('beforeunload', onUnload);
+  });
+
+  return (<></>);
+}
+
+export default UnsavedChangesNotice;

assets/js/src/form_editor/store/reducers/change_form_blocks.jsx

@@ -7,6 +7,7 @@ export default (state, action) => {
   };
   return {
     ...newState,
+    hasUnsavedChanges: true,
     formErrors: validateForm(newState.formData, newState.formBlocks),
   };
 };

assets/js/src/form_editor/store/reducers/change_form_name.jsx

@@ -2,6 +2,7 @@ export default (state, action) => ({
   ...state,
   formData: {
     ...state.formData,
+    hasUnsavedChanges: true,
     name: action.name,
   },
 });

assets/js/src/form_editor/store/reducers/change_form_settings.jsx

@@ -10,6 +10,7 @@ export default (state, action) => {
   };
   return {
     ...newState,
+    hasUnsavedChanges: true,
     formErrors: validateForm(newState.formData, newState.formBlocks),
   };
 };

assets/js/src/form_editor/store/reducers/change_form_styles.jsx

@@ -3,5 +3,6 @@ export default (state, action) => ({
   formData: {
     ...state.formData,
     styles: action.styles,
+    hasUnsavedChanges: true,
   },
 });

assets/js/src/form_editor/store/reducers/save_form_done.jsx

@@ -11,6 +11,7 @@ export default (state) => {
   return {
     ...state,
     isFormSaving: false,
+    hasUnsavedChanges: false,
     notices,
   };
 };

assets/js/src/form_editor/store/selectors.jsx

@@ -62,4 +62,7 @@ export default {
   getIsCustomFieldCreating(state) {
     return state.isCustomFieldCreating;
   },
+  hasUnsavedChanges(state) {
+    return state.hasUnsavedChanges;
+  },
 };

assets/js/src/form_editor/store/store.jsx

@@ -34,6 +34,7 @@ export default () => {
     isCustomFieldSaving: false,
     isCustomFieldCreating: false,
     notices: [],
+    hasUnsavedChanges: false,
     sidebar: {
       activeTab: 'form',
       openedPanels: ['basic-settings'],

views/form/editor.html

@@ -31,6 +31,7 @@
 <% block translations %>
 <%= localize({
   'addFormName': _x('Add form name', 'A placeholder for form name input'),
+  'changesNotSaved': __('Your changes you made may not be saved'),
   'form': __('Form'),
   'formSettings': _x('Settings', 'A settings section heading'),
   'customFieldSettings': _x('Custom field settings', 'A settings section heading'),