Move form placement settings into a single file

[MAILPOET-3120]

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
+          <PlacementSettings settingsPlacementKey="belowPosts" />
-            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)])}
-          />
           <SizeSettings
             label={MailPoet.I18n.t('formSettingsWidth')}
             value={formSettings.formPlacement.belowPosts.styles.width}

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
+          <PlacementSettings settingsPlacementKey="fixedBar" />
-            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)])}
-          />
           <SelectControl
             label={MailPoet.I18n.t('formPlacementDelay')}
             value={formSettings.formPlacement.fixedBar.delay}

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;

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
+          <PlacementSettings settingsPlacementKey="popup" />
-            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)])}
-          />
           <SelectControl
             label={MailPoet.I18n.t('formPlacementDelay')}
             value={formSettings.formPlacement.popup.delay}

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
+          <PlacementSettings settingsPlacementKey="slideIn" />
-            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)])}
-          />
           <SelectControl
             label={MailPoet.I18n.t('formPlacementDelay')}
             value={formSettings.formPlacement.slideIn.delay}