From b41248e5e11c44ad5fd1dc5ebde20024ad45f513 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Thu, 14 May 2020 14:10:49 +0200
Subject: [PATCH] Move below post form settings to preview

[MAILPOET-2811]
---
 .../form_placement_options/below_pages.tsx    | 55 +++----------------
 .../preview/below_posts_settings.tsx          | 46 ++++++++++++++++
 .../components/preview/preview.tsx            |  3 +-
 assets/js/src/form_editor/store/actions.jsx   | 34 +++++++-----
 .../acceptance/DisplayFormBellowPostCest.php  |  2 +-
 5 files changed, 77 insertions(+), 63 deletions(-)
 create mode 100644 assets/js/src/form_editor/components/preview/below_posts_settings.tsx

diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx
index 367abc2f9f..f09ea9db89 100644
--- a/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx
+++ b/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 [
-    localPlaceFormBellowAllPages,
-    setLocalPlaceFormBellowAllPages,
-  ] = useState(placeFormBellowAllPages);
-  const [
-    localPlaceFormBellowAllPosts,
-    setLocalPlaceFormBellowAllPosts,
-  ] = useState(placeFormBellowAllPosts);
-
-  const save = () => {
-    changeFormSettings({
-      ...formSettings,
-      placeFormBellowAllPages: localPlaceFormBellowAllPages,
-      placeFormBellowAllPosts: localPlaceFormBellowAllPosts,
-    });
-  };
+  const { showPreview } = useDispatch('mailpoet-form-editor');
 
   return (
-    <FormPlacementSettings
+    <FormPlacementOption
       active={placeFormBellowAllPages || placeFormBellowAllPosts}
-      onSave={save}
-      description={MailPoet.I18n.t('placeFormBellowPagesDescription')}
       label={MailPoet.I18n.t('placeFormBellowPages')}
       icon={Icon}
-    >
-      <div className="mailpoet-toggle-list">
-        <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>
+      onClick={() => (showPreview('below_post'))}
+      canBeActive
+    />
   );
 };
 
diff --git a/assets/js/src/form_editor/components/preview/below_posts_settings.tsx b/assets/js/src/form_editor/components/preview/below_posts_settings.tsx
new file mode 100644
index 0000000000..081f49b1c1
--- /dev/null
+++ b/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;
diff --git a/assets/js/src/form_editor/components/preview/preview.tsx b/assets/js/src/form_editor/components/preview/preview.tsx
index ff40baf954..17c95deeb6 100644
--- a/assets/js/src/form_editor/components/preview/preview.tsx
+++ b/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}
diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx
index b5aa0e4934..f9b5a51826 100644
--- a/assets/js/src/form_editor/store/actions.jsx
+++ b/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',
diff --git a/tests/acceptance/DisplayFormBellowPostCest.php b/tests/acceptance/DisplayFormBellowPostCest.php
index 6a74e15bf5..65a429abcf 100644
--- a/tests/acceptance/DisplayFormBellowPostCest.php
+++ b/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');