Add form type selection and spinner for iframe

[MAILPOET-2743]

assets/css/src/components-form-editor/_preview.scss

@@ -13,6 +13,14 @@
   margin: 0;
   min-height: 100%;
   min-width: 100%;
+
+  .mailpoet_form_preview_type_select {
+    position: absolute;
+    top: 20px;
+    left: 40px;
+    z-index: 11;
+  }
+
   .mailpoet-modal-header {
     height: 26px;
     margin-bottom: 0;
@@ -33,12 +41,22 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+
+    .mailpoet_spinner_wrapper {
+      left: 0;
+      position: absolute;
+      top: 0;
+    }
   }
 
   .mailpoet_browser_preview_container {
     height: 100%;
   }
 
+  .mailpoet_browser_preview_border {
+    position: relative;
+  }
+
   .mailpoet_form_preview_iframe {
     height: 100%;
     max-height: 100%;

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

@@ -10,9 +10,13 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import Preview from '../../common/preview/preview.jsx';
 import Modal from '../../common/modal/modal.jsx';
 import { blocksToFormBodyFactory } from '../store/blocks_to_form_body.jsx';
+import { onChange } from '../../common/functions';
 
 const FormPreview = () => {
   const [form, setForm] = useState(null);
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+  const [formType, setFormType] = useState(false);
+  const [previewType, setPreviewType] = useState('desktop');
 
   const formBlocks = useSelect(
     (select) => select('mailpoet-form-editor').getFormBlocks(),
@@ -60,6 +64,7 @@ const FormPreview = () => {
     if (isPreview) {
       loadFormPreviewFromServer();
     }
+    setIframeLoaded(false);
   }, [isPreview, loadFormPreviewFromServer]);
 
 
@@ -72,11 +77,15 @@ const FormPreview = () => {
 
   const urlData = {
     id: formData.id,
+    form_type: formType,
   };
-  const iframeSrc = `${window.mailpoet_form_preview_page}&data=${btoa(JSON.stringify(urlData))}`;
+  let iframeSrc = `${window.mailpoet_form_preview_page}&data=${btoa(JSON.stringify(urlData))}`;
+  // Add anchor to scroll to certain types of form
+  if (['below_post'].includes(formType)) {
+    iframeSrc += `#mailpoet_form_preview_${formData.id}`;
+  }
   return (
     <Modal
-      title={MailPoet.I18n.t('formPreview')}
       onRequestClose={onClose}
       fullScreen
       contentClassName="mailpoet_form_preview_modal"
@@ -87,13 +96,40 @@ const FormPreview = () => {
         </div>
       )}
       {form !== null && (
-        <Preview>
+        <>
-          <iframe
+          <div className="mailpoet_form_preview_type_select">
-            className="mailpoet_form_preview_iframe"
+            <label>
-            src={iframeSrc}
+              {MailPoet.I18n.t('formPlacement')}
-            title={MailPoet.I18n.t('formPreview')}
+              {' '}
-          />
+              <select
-        </Preview>
+                onChange={onChange(setFormType)}
+                value={formType}
+              >
+                <option value="sidebar">{MailPoet.I18n.t('placeFormSidebar')}</option>
+                <option value="below_post">{MailPoet.I18n.t('placeFormBellowPages')}</option>
+                <option value="fixed_bar">{MailPoet.I18n.t('placeFixedBarFormOnPages')}</option>
+                <option value="popup">{MailPoet.I18n.t('placePopupFormOnPages')}</option>
+                <option value="slide_in">{MailPoet.I18n.t('placeSlideInFormOnPages')}</option>
+              </select>
+            </label>
+          </div>
+          <Preview
+            onChange={setPreviewType}
+            selectedType={previewType}
+          >
+            {!iframeLoaded && (
+              <div className="mailpoet_spinner_wrapper">
+                <Spinner />
+              </div>
+            )}
+            <iframe
+              className="mailpoet_form_preview_iframe"
+              src={iframeSrc}
+              title={MailPoet.I18n.t('formPreview')}
+              onLoad={() => setIframeLoaded(true)}
+            />
+          </Preview>
+        </>
       )}
     </Modal>
   );

views/form/editor.html

@@ -70,6 +70,7 @@
   'placeFormBellowPagesDescription': __('This form placement allows you to add this form at the end of all the pages or posts, below the content.'),
   'placeFormBellowAllPages': _x('Display on all pages', 'This is a text on a switch if a form should be displayed bellow all pages'),
   'placeFormBellowAllPosts': _x('Display on all posts', 'This is a text on a switch if a form should be displayed bellow all posts'),
+  'placeFormSidebar': _x('Sidebar (theme widget)', 'Placement of the form using theme widget'),
   'formPlacementDelay': _x('Display with a delay of', 'Label on a selection of different times'),
   'formPlacementPlacementPosition': _x('Position', 'Placement of a fixed bar form, on top of the page or on the bottom'),
   'formPlacementPlacementPositionTop': _x('top', 'Placement of a fixed bar form, on top of the page or on the bottom'),