Display preview

[MAILPOET-2602]

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

@@ -1,42 +1,77 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
+import MailPoet from 'mailpoet';
 import { Spinner } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 
 import Preview from '../../common/preview.jsx';
 import Modal from '../../common/modal/modal.jsx';
+import blocksToFormBody from '../store/blocks_to_form_body.jsx';
 
 const FormPreview = () => {
   const [form, setForm] = useState(null);
 
+  const formBlocks = useSelect(
+    (select) => select('mailpoet-form-editor').getFormBlocks(),
+    []
+  );
+  const customFields = useSelect(
+    (select) => select('mailpoet-form-editor').getAllAvailableCustomFields(),
+    []
+  );
+
   const { hidePreview } = useDispatch('mailpoet-form-editor');
   const isPreview = useSelect(
     (select) => select('mailpoet-form-editor').getIsPreviewShown(),
     []
   );
 
-  function loadFormPreviewFromServer() {
+  const loadFormPreviewFromServer = useCallback(() => {
-
+    MailPoet.Ajax.post({
-  }
+      api_version: window.mailpoet_api_version,
+      endpoint: 'forms',
+      action: 'previewEditor',
+      data: {
+        body: blocksToFormBody(formBlocks, customFields),
+      },
+    }).done((response) => {
+      setForm(response.data);
+    });
+  }, [formBlocks, customFields]);
 
   useEffect(() => {
     if (isPreview) {
       loadFormPreviewFromServer();
     }
-  }, [isPreview]);
+  }, [isPreview, loadFormPreviewFromServer]);
 
   if (!isPreview) return null;
 
+  function onClose() {
+    setForm(null);
+    hidePreview();
+  }
+
   return (
     <Modal
-      title="Form Preview"
+      title={MailPoet.I18n.t('formPreview')}
-      onRequestClose={hidePreview}
+      onRequestClose={onClose}
     >
       <Preview>
         {form === null && (
           <Spinner />
         )}
         {form !== null && (
-          <div dangerouslySetInnerHTML={form} />
+          <div>
+            <style type="text/css" id="mailpoet_form_preview_styles">
+              {'.mailpoet_hp_email_label { display: none }' }
+              {form.css}
+            </style>
+            <div className="mailpoet_message">
+              <p className="mailpoet_validate_success">{MailPoet.I18n.t('successMessage')}</p>
+              <p className="mailpoet_validate_error">{MailPoet.I18n.t('errorMessage')}</p>
+            </div>
+            <div dangerouslySetInnerHTML={{ __html: form.html }} />
+          </div>
         )}
       </Preview>
     </Modal>

views/form/editor.html

@@ -112,6 +112,9 @@
   'selectCustomFieldType': _x('Select a field type', 'Label for form field for custom input type'),
   'customFieldWithNameExists': __('The custom field [name] already exists. Please choose another name.'),
   'editorIsUsingGutenberg': __('This form editor uses the WordPress Block Editor (Gutenberg)'),
+  'successMessage': __('This is what the success message looks like.'),
+  'errorMessage': __('This is what the error message looks like.'),
+  'formPreview': __('Form Preview'),
   'giveFeedback': __('Give feedback.'),
 }) %>
 <% endblock %>