Move below post form settings to preview

[MAILPOET-2811]

assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx

@@ -1,10 +1,9 @@
-import React, { useState } from 'react';
+import React from 'react';
 import MailPoet from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import FormPlacementSettings from './form_placement_settings';
-import Toggle from '../../../../common/toggle';
 import Icon from './icons/below_pages_icon';
+import FormPlacementOption from './form_placement_option';
 
 const BelowPages = () => {
   const formSettings = useSelect(
@@ -14,56 +13,16 @@ const BelowPages = () => {
   const placeFormBellowAllPages = formSettings.placeFormBellowAllPages || false;
   const placeFormBellowAllPosts = formSettings.placeFormBellowAllPosts || false;
 
-  const { changeFormSettings } = useDispatch('mailpoet-form-editor');
+  const { showPreview } = useDispatch('mailpoet-form-editor');
-
-  const [
-    localPlaceFormBellowAllPages,
-    setLocalPlaceFormBellowAllPages,
-  ] = useState(placeFormBellowAllPages);
-  const [
-    localPlaceFormBellowAllPosts,
-    setLocalPlaceFormBellowAllPosts,
-  ] = useState(placeFormBellowAllPosts);
-
-  const save = () => {
-    changeFormSettings({
-      ...formSettings,
-      placeFormBellowAllPages: localPlaceFormBellowAllPages,
-      placeFormBellowAllPosts: localPlaceFormBellowAllPosts,
-    });
-  };
 
   return (
-    <FormPlacementSettings
+    <FormPlacementOption
       active={placeFormBellowAllPages || placeFormBellowAllPosts}
-      onSave={save}
-      description={MailPoet.I18n.t('placeFormBellowPagesDescription')}
       label={MailPoet.I18n.t('placeFormBellowPages')}
       icon={Icon}
-    >
+      onClick={() => (showPreview('below_post'))}
-      <div className="mailpoet-toggle-list">
+      canBeActive
-        <div className="mailpoet-toggle-list-description">
+    />
-          {MailPoet.I18n.t('placeFormBellowAllPages')}
-        </div>
-        <div className="mailpoet-toggle-list-toggle">
-          <Toggle
-            name="localPlaceFormBellowAllPages"
-            checked={localPlaceFormBellowAllPages}
-            onCheck={setLocalPlaceFormBellowAllPages}
-          />
-        </div>
-        <div className="mailpoet-toggle-list-description">
-          {MailPoet.I18n.t('placeFormBellowAllPosts')}
-        </div>
-        <div className="mailpoet-toggle-list-toggle" data-automation-id="place-form-bellow-all-posts-toggle">
-          <Toggle
-            name="localPlaceFormBellowAllPosts"
-            checked={localPlaceFormBellowAllPosts}
-            onCheck={setLocalPlaceFormBellowAllPosts}
-          />
-        </div>
-      </div>
-    </FormPlacementSettings>
   );
 };
 

assets/js/src/form_editor/components/preview/below_posts_settings.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import Toggle from 'common/toggle';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { partial } from 'lodash';
+
+const BelowPostsSettings = () => {
+  const formSettings = useSelect(
+    (select) => select('mailpoet-form-editor').getFormSettings(),
+    []
+  );
+  const { changeFormSettings } = useDispatch('mailpoet-form-editor');
+
+  const updateSettings = (key, value) => {
+    const settings = { ...formSettings };
+    settings[key] = value;
+    changeFormSettings(settings);
+  };
+
+  return (
+    <div className="mailpoet-toggle-list">
+      <div className="mailpoet-toggle-list-description">
+        {MailPoet.I18n.t('placeFormBellowAllPages')}
+      </div>
+      <div className="mailpoet-toggle-list-toggle">
+        <Toggle
+          name="placeFormBellowAllPages"
+          checked={formSettings.placeFormBellowAllPages || false}
+          onCheck={partial(updateSettings, 'placeFormBellowAllPages')}
+        />
+      </div>
+      <div className="mailpoet-toggle-list-description">
+        {MailPoet.I18n.t('placeFormBellowAllPosts')}
+      </div>
+      <div className="mailpoet-toggle-list-toggle" data-automation-id="place-form-bellow-all-posts-toggle">
+        <Toggle
+          name="placeFormBellowAllPosts"
+          checked={formSettings.placeFormBellowAllPosts || false}
+          onCheck={partial(updateSettings, 'placeFormBellowAllPosts')}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BelowPostsSettings;

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

@@ -9,6 +9,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import Preview from 'common/preview/preview.jsx';
 import Modal from 'common/modal/modal.jsx';
 import { onChange } from 'common/functions';
+import BelowPostsSettings from './below_posts_settings';
 
 const FormPreview = () => {
   const [iframeLoaded, setIframeLoaded] = useState(false);
@@ -86,7 +87,7 @@ const FormPreview = () => {
                 <option value="slide_in">{MailPoet.I18n.t('placeSlideInFormOnPages')}</option>
               </select>
             </label>
-            <p>Todo width and placement settings.</p>
+            {previewSettings.formType === 'below_post' && <BelowPostsSettings />}
           </div>
           <Preview
             onDisplayTypeChange={onPreviewTypeChange}

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

@@ -125,7 +125,27 @@ export function saveFormFailed(message = undefined) {
   };
 }
 
-export function* showPreview() {
+export function* changePreviewSettings(settings) {
+  yield {
+    type: 'STORE_LOCALLY',
+    key: 'mailpoet_form_preview_settings',
+    value: settings,
+  };
+  yield {
+    type: 'CHANGE_PREVIEW_SETTINGS',
+    settings,
+  };
+}
+
+export function* showPreview(formType = null) {
+  if (formType !== null && typeof formType === 'string') {
+    const previewSettings = select('mailpoet-form-editor').getPreviewSettings();
+    const updatedPreviewSettings = {
+      ...previewSettings,
+      formType,
+    };
+    yield* changePreviewSettings(updatedPreviewSettings);
+  }
   yield {
     type: 'SHOW_PREVIEW',
   };
@@ -153,18 +173,6 @@ export function* showPreview() {
   return { type: 'PREVIEW_DATA_SAVED' };
 }
 
-export function* changePreviewSettings(settings) {
-  yield {
-    type: 'STORE_LOCALLY',
-    key: 'mailpoet_form_preview_settings',
-    value: settings,
-  };
-  return {
-    type: 'CHANGE_PREVIEW_SETTINGS',
-    settings,
-  };
-}
-
 export function hidePreview() {
   return {
     type: 'HIDE_PREVIEW',

tests/acceptance/DisplayFormBellowPostCest.php

@@ -37,7 +37,7 @@ class DisplayFormBellowPostCest {
     $i->click('[data-automation-id="form-placement-option-Below pages"]');
     $i->waitForElement('[data-automation-id="place-form-bellow-all-posts-toggle"]');
     $i->checkOption('[data-automation-id="place-form-bellow-all-posts-toggle"]');
-    $i->click('.automation-id-save-form-placement');
+    $i->click('.mailpoet-modal-close');
     $i->click('[data-automation-id="form_save_button"]');
     $i->waitForText('Form saved', 10, '.automation-dismissible-notices');