From abfe0b75f9b23f109ae7961f2995bcfeb8488497 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Mon, 7 Sep 2020 12:28:57 +0200
Subject: [PATCH] Move form placement settings into a single file

[MAILPOET-3120]
---
 .../settings_panels/below_posts_settings.tsx  | 12 ++-----
 .../settings_panels/fixed_bar_settings.tsx    | 12 ++-----
 .../settings_panels/placement_settings.tsx    | 34 +++++++++++++++++++
 .../settings_panels/popup_settings.tsx        | 12 ++-----
 .../settings_panels/slide_in_settings.tsx     | 12 ++-----
 5 files changed, 42 insertions(+), 40 deletions(-)
 create mode 100644 assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx

diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx
index a3240bacd2..21abf80f78 100644
--- a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx
+++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx
@@ -4,6 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { ToggleControl } from '@wordpress/components';
 import { assocPath, compose, __ } from 'lodash/fp';
 import { SizeSettings } from 'form_editor/components/size_settings';
+import PlacementSettings from './placement_settings';
 
 const BelowPostsSettings = () => {
   const formSettings = useSelect(
@@ -23,16 +24,7 @@ const BelowPostsSettings = () => {
       />
       {isActive && (
         <>
-          <ToggleControl
-            label={MailPoet.I18n.t('placeFormOnAllPages')}
-            checked={formSettings.formPlacement.belowPosts.pages.all}
-            onChange={compose([changeFormSettings, assocPath('formPlacement.belowPosts.pages.all', __, formSettings)])}
-          />
-          <ToggleControl
-            label={MailPoet.I18n.t('placeFormOnAllPosts')}
-            checked={formSettings.formPlacement.belowPosts.posts.all}
-            onChange={compose([changeFormSettings, assocPath('formPlacement.belowPosts.posts.all', __, formSettings)])}
-          />
+          <PlacementSettings settingsPlacementKey="belowPosts" />
           <SizeSettings
             label={MailPoet.I18n.t('formSettingsWidth')}
             value={formSettings.formPlacement.belowPosts.styles.width}
diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx
index 9aa5f517ce..79cc5b351a 100644
--- a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx
+++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx
@@ -5,6 +5,7 @@ import { SelectControl, RadioControl, ToggleControl } from '@wordpress/component
 import { assocPath, compose, __ } from 'lodash/fp';
 import { SizeSettings } from 'form_editor/components/size_settings';
 import AnimationSettings from './animation_settings';
+import PlacementSettings from './placement_settings';
 
 const delayValues = [0, 15, 30, 60, 120, 180, 240];
 
@@ -28,16 +29,7 @@ const FixedBarSettings = () => {
       {isActive && (
         <>
           <hr />
-          <ToggleControl
-            label={MailPoet.I18n.t('placeFormOnAllPages')}
-            checked={formSettings.formPlacement.fixedBar.pages.all}
-            onChange={compose([changeFormSettings, assocPath('formPlacement.fixedBar.pages.all', __, formSettings)])}
-          />
-          <ToggleControl
-            label={MailPoet.I18n.t('placeFormOnAllPosts')}
-            checked={formSettings.formPlacement.fixedBar.posts.all}
-            onChange={compose([changeFormSettings, assocPath('formPlacement.fixedBar.posts.all', __, formSettings)])}
-          />
+          <PlacementSettings settingsPlacementKey="fixedBar" />
           <SelectControl
             label={MailPoet.I18n.t('formPlacementDelay')}
             value={formSettings.formPlacement.fixedBar.delay}
diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx
new file mode 100644
index 0000000000..5ce11c148c
--- /dev/null
+++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import MailPoet from 'mailpoet';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { ToggleControl } from '@wordpress/components';
+import { assocPath, compose, __ } from 'lodash/fp';
+
+type Props = {
+  settingsPlacementKey: string
+}
+
+const PlacementSettings = ({ settingsPlacementKey }: Props) => {
+  const formSettings = useSelect(
+    (select) => select('mailpoet-form-editor').getFormSettings(),
+    []
+  );
+  const { changeFormSettings } = useDispatch('mailpoet-form-editor');
+
+  return (
+    <>
+      <ToggleControl
+        label={MailPoet.I18n.t('placeFormOnAllPages')}
+        checked={formSettings.formPlacement[settingsPlacementKey].pages.all}
+        onChange={compose([changeFormSettings, assocPath(`formPlacement.${settingsPlacementKey}.pages.all`, __, formSettings)])}
+      />
+      <ToggleControl
+        label={MailPoet.I18n.t('placeFormOnAllPosts')}
+        checked={formSettings.formPlacement[settingsPlacementKey].posts.all}
+        onChange={compose([changeFormSettings, assocPath(`formPlacement.${settingsPlacementKey}.posts.all`, __, formSettings)])}
+      />
+    </>
+  );
+};
+
+export default PlacementSettings;
diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx
index 592f0bd840..af8879fd11 100644
--- a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx
+++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx
@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { assocPath, compose, __ } from 'lodash/fp';
 import { SizeSettings } from 'form_editor/components/size_settings';
 import AnimationSettings from './animation_settings';
+import PlacementSettings from './placement_settings';
 
 const delayValues = [0, 15, 30, 60, 120, 180, 240];
 
@@ -29,16 +30,7 @@ const PopUpSettings = () => {
       {isActive && (
         <>
           <hr />
-          <ToggleControl
-            label={MailPoet.I18n.t('placeFormOnAllPages')}
-            checked={formSettings.formPlacement.popup.pages.all}
-            onChange={compose([changeFormSettings, assocPath('formPlacement.popup.pages.all', __, formSettings)])}
-          />
-          <ToggleControl
-            label={MailPoet.I18n.t('placeFormOnAllPosts')}
-            checked={formSettings.formPlacement.popup.posts.all}
-            onChange={compose([changeFormSettings, assocPath('formPlacement.popup.posts.all', __, formSettings)])}
-          />
+          <PlacementSettings settingsPlacementKey="popup" />
           <SelectControl
             label={MailPoet.I18n.t('formPlacementDelay')}
             value={formSettings.formPlacement.popup.delay}
diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx
index 9bf0bc8eb1..b592a0da2a 100644
--- a/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx
+++ b/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx
@@ -5,6 +5,7 @@ import { SelectControl, RadioControl, ToggleControl } from '@wordpress/component
 import { assocPath, compose, __ } from 'lodash/fp';
 import { SizeSettings } from 'form_editor/components/size_settings';
 import AnimationSettings from './animation_settings';
+import PlacementSettings from './placement_settings';
 
 const delayValues = [0, 15, 30, 60, 120, 180, 240];
 
@@ -28,16 +29,7 @@ const SlideInSettings = () => {
       {isActive && (
         <>
           <hr />
-          <ToggleControl
-            label={MailPoet.I18n.t('placeFormOnAllPages')}
-            checked={formSettings.formPlacement.slideIn.pages.all}
-            onChange={compose([changeFormSettings, assocPath('formPlacement.slideIn.pages.all', __, formSettings)])}
-          />
-          <ToggleControl
-            label={MailPoet.I18n.t('placeFormOnAllPosts')}
-            checked={formSettings.formPlacement.slideIn.posts.all}
-            onChange={compose([changeFormSettings, assocPath('formPlacement.slideIn.posts.all', __, formSettings)])}
-          />
+          <PlacementSettings settingsPlacementKey="slideIn" />
           <SelectControl
             label={MailPoet.I18n.t('formPlacementDelay')}
             value={formSettings.formPlacement.slideIn.delay}