Add a switch for enabling the placement

[MAILPOET-3075]

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

@@ -10,14 +10,12 @@ const BelowPages = () => {
     (select) => select('mailpoet-form-editor').getFormSettings(),
     []
   );
-  const placeFormBellowAllPages = formSettings.placeFormBellowAllPages || false;
-  const placeFormBellowAllPosts = formSettings.placeFormBellowAllPosts || false;
 
   const { showPlacementSettings } = useDispatch('mailpoet-form-editor');
 
   return (
     <FormPlacementOption
-      active={placeFormBellowAllPages || placeFormBellowAllPosts}
+      active={formSettings.placementBellowAllPostsEnabled}
       label={MailPoet.I18n.t('placeFormBellowPages')}
       icon={Icon}
       onClick={() => (showPlacementSettings('below_post'))}

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

@@ -10,13 +10,11 @@ const FixedBar = () => {
     (select) => select('mailpoet-form-editor').getFormSettings(),
     []
   );
-  const placeFixedBarFormOnAllPages = formSettings.placeFixedBarFormOnAllPages || false;
-  const placeFixedBarFormOnAllPosts = formSettings.placeFixedBarFormOnAllPosts || false;
   const { showPlacementSettings } = useDispatch('mailpoet-form-editor');
 
   return (
     <FormPlacementOption
-      active={placeFixedBarFormOnAllPages || placeFixedBarFormOnAllPosts}
+      active={formSettings.placementFixedBarEnabled}
       label={MailPoet.I18n.t('placeFixedBarFormOnPages')}
       icon={Icon}
       onClick={() => (showPlacementSettings('fixed_bar'))}

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

@@ -10,13 +10,11 @@ const Popup = () => {
     (select) => select('mailpoet-form-editor').getFormSettings(),
     []
   );
-  const placePopupFormOnAllPages = formSettings.placePopupFormOnAllPages || false;
-  const placePopupFormOnAllPosts = formSettings.placePopupFormOnAllPosts || false;
   const { showPlacementSettings } = useDispatch('mailpoet-form-editor');
 
   return (
     <FormPlacementOption
-      active={placePopupFormOnAllPages || placePopupFormOnAllPosts}
+      active={formSettings.placementPopupEnabled}
       label={MailPoet.I18n.t('placePopupFormOnPages')}
       icon={Icon}
       onClick={() => (showPlacementSettings('popup'))}

assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx

@@ -18,9 +18,16 @@ const BelowPostsSettings = () => {
     changeFormSettings(settings);
   };
 
-  const isActive = formSettings.placeFormBellowAllPages || formSettings.placeFormBellowAllPosts;
+  const isActive = formSettings.placementBellowAllPostsEnabled;
 
   return (
+    <>
+      <ToggleControl
+        label={MailPoet.I18n.t('enable')}
+        checked={isActive}
+        onChange={partial(updateSettings, 'placementBellowAllPostsEnabled')}
+      />
+      {isActive && (
         <>
           <ToggleControl
             label={MailPoet.I18n.t('placeFormOnAllPages')}
@@ -32,7 +39,6 @@ const BelowPostsSettings = () => {
             checked={formSettings.placeFormBellowAllPosts || false}
             onChange={partial(updateSettings, 'placeFormBellowAllPosts')}
           />
-      {isActive && (
           <SizeSettings
             label={MailPoet.I18n.t('formSettingsWidth')}
             value={formSettings.belowPostStyles.width}
@@ -46,6 +52,7 @@ const BelowPostsSettings = () => {
               updateSettings('belowPostStyles', { ...formSettings.belowPostStyles, width })
             )}
           />
+        </>
       )}
     </>
   );

assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx

@@ -20,12 +20,18 @@ const FixedBarSettings = () => {
     changeFormSettings(settings);
   };
 
-  const isActive = formSettings.placeFixedBarFormOnAllPages
-    || formSettings.placeFixedBarFormOnAllPosts;
+  const isActive = formSettings.placementFixedBarEnabled;
 
   return (
     <>
       <p>{MailPoet.I18n.t('placeFixedBarFormOnPagesDescription')}</p>
+      <ToggleControl
+        label={MailPoet.I18n.t('enable')}
+        checked={isActive}
+        onChange={partial(updateSettings, 'placementFixedBarEnabled')}
+      />
+      {isActive && (
+        <>
           <hr />
           <ToggleControl
             label={MailPoet.I18n.t('placeFormOnAllPages')}
@@ -37,8 +43,6 @@ const FixedBarSettings = () => {
             checked={formSettings.placeFixedBarFormOnAllPosts || false}
             onChange={partial(updateSettings, 'placeFixedBarFormOnAllPosts')}
           />
-      {isActive && (
-        <>
           <SelectControl
             label={MailPoet.I18n.t('formPlacementDelay')}
             value={formSettings.fixedBarFormDelay}

assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx

@@ -21,11 +21,18 @@ const PopUpSettings = () => {
     changeFormSettings(settings);
   };
 
-  const isActive = formSettings.placePopupFormOnAllPages || formSettings.placePopupFormOnAllPosts;
+  const isActive = formSettings.placementPopupEnabled;
 
   return (
     <>
       <p>{MailPoet.I18n.t('placePopupFormOnPagesDescription')}</p>
+      <ToggleControl
+        label={MailPoet.I18n.t('enable')}
+        checked={isActive}
+        onChange={partial(updateSettings, 'placementPopupEnabled')}
+      />
+      {isActive && (
+        <>
           <hr />
           <ToggleControl
             label={MailPoet.I18n.t('placeFormOnAllPages')}
@@ -37,8 +44,6 @@ const PopUpSettings = () => {
             checked={formSettings.placePopupFormOnAllPosts || false}
             onChange={partial(updateSettings, 'placePopupFormOnAllPosts')}
           />
-      {isActive && (
-        <>
           <SelectControl
             label={MailPoet.I18n.t('formPlacementDelay')}
             value={formSettings.popupFormDelay}

assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx

@@ -20,12 +20,18 @@ const SlideInSettings = () => {
     changeFormSettings(settings);
   };
 
-  const isActive = formSettings.placeSlideInFormOnAllPages
-    || formSettings.placeSlideInFormOnAllPosts;
+  const isActive = formSettings.placementSlideInEnabled;
 
   return (
     <>
       <p>{MailPoet.I18n.t('placeSlideInFormOnPagesDescription')}</p>
+      <ToggleControl
+        label={MailPoet.I18n.t('enable')}
+        checked={isActive}
+        onChange={partial(updateSettings, 'placementSlideInEnabled')}
+      />
+      {isActive && (
+        <>
           <hr />
           <ToggleControl
             label={MailPoet.I18n.t('placeFormOnAllPages')}
@@ -37,8 +43,6 @@ const SlideInSettings = () => {
             checked={formSettings.placeSlideInFormOnAllPosts || false}
             onChange={partial(updateSettings, 'placeSlideInFormOnAllPosts')}
           />
-      {isActive && (
-        <>
           <SelectControl
             label={MailPoet.I18n.t('formPlacementDelay')}
             value={formSettings.slideInFormDelay}

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

@@ -10,13 +10,11 @@ const SlideIn = () => {
     (select) => select('mailpoet-form-editor').getFormSettings(),
     []
   );
-  const placeSlideInFormOnAllPages = formSettings.placeSlideInFormOnAllPages || false;
-  const placeSlideInFormOnAllPosts = formSettings.placeSlideInFormOnAllPosts || false;
   const { showPlacementSettings } = useDispatch('mailpoet-form-editor');
 
   return (
     <FormPlacementOption
-      active={placeSlideInFormOnAllPages || placeSlideInFormOnAllPosts}
+      active={formSettings.placementSlideInEnabled}
       label={MailPoet.I18n.t('placeSlideInFormOnPages')}
       icon={Icon}
       onClick={() => (showPlacementSettings('slide_in'))}

views/form/editor.html

@@ -41,6 +41,7 @@
 <% block translations %>
 <%= localize({
   'displayForm': __('Display the form'),
+  'enable': __('Enable'),
   'addFormName': _x('Add form name', 'A placeholder for form name input'),
   'changesNotSaved': __('Your changes you made may not be saved'),
   'back': __('Back'),