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,34 +18,41 @@ const BelowPostsSettings = () => {
     changeFormSettings(settings);
   };
 
-  const isActive = formSettings.placeFormBellowAllPages || formSettings.placeFormBellowAllPosts;
+  const isActive = formSettings.placementBellowAllPostsEnabled;
 
   return (
     <>
       <ToggleControl
-        label={MailPoet.I18n.t('placeFormOnAllPages')}
+        label={MailPoet.I18n.t('enable')}
-        checked={formSettings.placeFormBellowAllPages || false}
+        checked={isActive}
-        onChange={partial(updateSettings, 'placeFormBellowAllPages')}
+        onChange={partial(updateSettings, 'placementBellowAllPostsEnabled')}
-      />
-      <ToggleControl
-        label={MailPoet.I18n.t('placeFormOnAllPosts')}
-        checked={formSettings.placeFormBellowAllPosts || false}
-        onChange={partial(updateSettings, 'placeFormBellowAllPosts')}
       />
       {isActive && (
-        <SizeSettings
+        <>
-          label={MailPoet.I18n.t('formSettingsWidth')}
+          <ToggleControl
-          value={formSettings.belowPostStyles.width}
+            label={MailPoet.I18n.t('placeFormOnAllPages')}
-          minPixels={200}
+            checked={formSettings.placeFormBellowAllPages || false}
-          maxPixels={1200}
+            onChange={partial(updateSettings, 'placeFormBellowAllPages')}
-          minPercents={10}
+          />
-          maxPercents={100}
+          <ToggleControl
-          defaultPixelValue={560}
+            label={MailPoet.I18n.t('placeFormOnAllPosts')}
-          defaultPercentValue={100}
+            checked={formSettings.placeFormBellowAllPosts || false}
-          onChange={(width) => (
+            onChange={partial(updateSettings, 'placeFormBellowAllPosts')}
-            updateSettings('belowPostStyles', { ...formSettings.belowPostStyles, width })
+          />
-          )}
+          <SizeSettings
-        />
+            label={MailPoet.I18n.t('formSettingsWidth')}
+            value={formSettings.belowPostStyles.width}
+            minPixels={200}
+            maxPixels={1200}
+            minPercents={10}
+            maxPercents={100}
+            defaultPixelValue={560}
+            defaultPercentValue={100}
+            onChange={(width) => (
+              updateSettings('belowPostStyles', { ...formSettings.belowPostStyles, width })
+            )}
+          />
+        </>
       )}
     </>
   );

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

@@ -20,25 +20,29 @@ const FixedBarSettings = () => {
     changeFormSettings(settings);
   };
 
-  const isActive = formSettings.placeFixedBarFormOnAllPages
+  const isActive = formSettings.placementFixedBarEnabled;
-    || formSettings.placeFixedBarFormOnAllPosts;
 
   return (
     <>
       <p>{MailPoet.I18n.t('placeFixedBarFormOnPagesDescription')}</p>
-      <hr />
       <ToggleControl
-        label={MailPoet.I18n.t('placeFormOnAllPages')}
+        label={MailPoet.I18n.t('enable')}
-        checked={formSettings.placeFixedBarFormOnAllPages || false}
+        checked={isActive}
-        onChange={partial(updateSettings, 'placeFixedBarFormOnAllPages')}
+        onChange={partial(updateSettings, 'placementFixedBarEnabled')}
-      />
-      <ToggleControl
-        label={MailPoet.I18n.t('placeFormOnAllPosts')}
-        checked={formSettings.placeFixedBarFormOnAllPosts || false}
-        onChange={partial(updateSettings, 'placeFixedBarFormOnAllPosts')}
       />
       {isActive && (
         <>
+          <hr />
+          <ToggleControl
+            label={MailPoet.I18n.t('placeFormOnAllPages')}
+            checked={formSettings.placeFixedBarFormOnAllPages || false}
+            onChange={partial(updateSettings, 'placeFixedBarFormOnAllPages')}
+          />
+          <ToggleControl
+            label={MailPoet.I18n.t('placeFormOnAllPosts')}
+            checked={formSettings.placeFixedBarFormOnAllPosts || false}
+            onChange={partial(updateSettings, 'placeFixedBarFormOnAllPosts')}
+          />
           <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,24 +21,29 @@ const PopUpSettings = () => {
     changeFormSettings(settings);
   };
 
-  const isActive = formSettings.placePopupFormOnAllPages || formSettings.placePopupFormOnAllPosts;
+  const isActive = formSettings.placementPopupEnabled;
 
   return (
     <>
       <p>{MailPoet.I18n.t('placePopupFormOnPagesDescription')}</p>
-      <hr />
       <ToggleControl
-        label={MailPoet.I18n.t('placeFormOnAllPages')}
+        label={MailPoet.I18n.t('enable')}
-        checked={formSettings.placePopupFormOnAllPages || false}
+        checked={isActive}
-        onChange={partial(updateSettings, 'placePopupFormOnAllPages')}
+        onChange={partial(updateSettings, 'placementPopupEnabled')}
-      />
-      <ToggleControl
-        label={MailPoet.I18n.t('placeFormOnAllPosts')}
-        checked={formSettings.placePopupFormOnAllPosts || false}
-        onChange={partial(updateSettings, 'placePopupFormOnAllPosts')}
       />
       {isActive && (
         <>
+          <hr />
+          <ToggleControl
+            label={MailPoet.I18n.t('placeFormOnAllPages')}
+            checked={formSettings.placePopupFormOnAllPages || false}
+            onChange={partial(updateSettings, 'placePopupFormOnAllPages')}
+          />
+          <ToggleControl
+            label={MailPoet.I18n.t('placeFormOnAllPosts')}
+            checked={formSettings.placePopupFormOnAllPosts || false}
+            onChange={partial(updateSettings, 'placePopupFormOnAllPosts')}
+          />
           <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,25 +20,29 @@ const SlideInSettings = () => {
     changeFormSettings(settings);
   };
 
-  const isActive = formSettings.placeSlideInFormOnAllPages
+  const isActive = formSettings.placementSlideInEnabled;
-    || formSettings.placeSlideInFormOnAllPosts;
 
   return (
     <>
       <p>{MailPoet.I18n.t('placeSlideInFormOnPagesDescription')}</p>
-      <hr />
       <ToggleControl
-        label={MailPoet.I18n.t('placeFormOnAllPages')}
+        label={MailPoet.I18n.t('enable')}
-        checked={formSettings.placeSlideInFormOnAllPages || false}
+        checked={isActive}
-        onChange={partial(updateSettings, 'placeSlideInFormOnAllPages')}
+        onChange={partial(updateSettings, 'placementSlideInEnabled')}
-      />
-      <ToggleControl
-        label={MailPoet.I18n.t('placeFormOnAllPosts')}
-        checked={formSettings.placeSlideInFormOnAllPosts || false}
-        onChange={partial(updateSettings, 'placeSlideInFormOnAllPosts')}
       />
       {isActive && (
         <>
+          <hr />
+          <ToggleControl
+            label={MailPoet.I18n.t('placeFormOnAllPages')}
+            checked={formSettings.placeSlideInFormOnAllPages || false}
+            onChange={partial(updateSettings, 'placeSlideInFormOnAllPages')}
+          />
+          <ToggleControl
+            label={MailPoet.I18n.t('placeFormOnAllPosts')}
+            checked={formSettings.placeSlideInFormOnAllPosts || false}
+            onChange={partial(updateSettings, 'placeSlideInFormOnAllPosts')}
+          />
           <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'),