Add preview button

[MAILPOET-2602]

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

@@ -13,11 +13,23 @@ export default () => {
     (select) => select('mailpoet-form-editor').getIsFormSaving(),
     []
   );
-  const { toggleSidebar, saveForm } = useDispatch('mailpoet-form-editor');
+  const isPreview = useSelect(
+    (select) => select('mailpoet-form-editor').getIsPreviewShown(),
+    []
+  );
+  const { toggleSidebar, saveForm, showPreview } = useDispatch('mailpoet-form-editor');
 
   return (
     <div className="edit-post-header">
       <div className="edit-post-header__settings">
+        <Button
+          isSecondary
+          isLarge
+          onClick={showPreview}
+          isPressed={isPreview}
+        >
+          {__('Preview')}
+        </Button>
         <Button
           isPrimary
           isLarge

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

@@ -136,6 +136,12 @@ export function saveFormFailed(message = undefined) {
   };
 }
 
+export function showPreview() {
+  return {
+    type: 'SHOW_PREVIEW',
+  };
+}
+
 export function removeNotice(id) {
   return {
     type: 'REMOVE_NOTICE',

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

@@ -35,6 +35,9 @@ export default {
   getIsFormSaving(state) {
     return state.isFormSaving;
   },
+  getIsPreviewShown(state) {
+    return false;
+  },
   getIsCustomFieldSaving(state) {
     return state.isCustomFieldSaving;
   },