Split component into two

[MAILPOET-2738]

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

@@ -1,16 +1,11 @@
 import React, { useState } from 'react';
 import MailPoet from 'mailpoet';
-import { Button } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-import FormPlacementOption from './form_placement_option';
+import FormPlacementSettings from './form_placement_settings';
-import Icon from './below_pages_icon';
-import Modal from '../../../../common/modal/modal.jsx';
 import Toggle from '../../../../common/toggle';
 
 const BelowPages = () => {
-  const [displaySettings, setDisplaySettings] = useState(false);
-
   const placeFormBellowAllPages = useSelect(
     (select) => select('mailpoet-form-editor').placeFormBellowAllPages(),
     []
@@ -32,30 +27,17 @@ const BelowPages = () => {
   ] = useState(placeFormBellowAllPosts);
 
   const save = () => {
-    setDisplaySettings(false);
     setPlaceFormBellowAllPages(localPlaceFormBellowAllPages);
     setPlaceFormBellowAllPosts(localPlaceFormBellowAllPosts);
   };
 
   return (
-    <>
+    <FormPlacementSettings
-      <FormPlacementOption
-        label={MailPoet.I18n.t('placeFormBellowPages')}
-        icon={Icon}
       active={placeFormBellowAllPages || placeFormBellowAllPosts}
-        onClick={() => setDisplaySettings(true)}
+      onSave={save}
-      />
+      description={MailPoet.I18n.t('placeFormBellowPagesDescription')}
-      {
+      label={MailPoet.I18n.t('placeFormBellowPages')}
-        displaySettings
-        && (
-          <Modal
-            title={MailPoet.I18n.t('placeFormBellowPages')}
-            onRequestClose={() => setDisplaySettings(false)}
-            contentClassName="form-placement-settings"
     >
-            <p>
-              {MailPoet.I18n.t('placeFormBellowPagesDescription')}
-            </p>
       <div className="mailpoet-toggle-list">
         <div className="mailpoet-toggle-list-description">
           {MailPoet.I18n.t('placeFormBellowAllPages')}
@@ -78,18 +60,7 @@ const BelowPages = () => {
           />
         </div>
       </div>
-            <div className="mailpoet-form-placement-save">
+    </FormPlacementSettings>
-              <Button
-                onClick={save}
-                className="mailpoet-save-button automation-id-save-form-below-pages"
-              >
-                {MailPoet.I18n.t('formPlacementSave')}
-              </Button>
-            </div>
-          </Modal>
-        )
-      }
-    </>
   );
 };
 

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

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import MailPoet from 'mailpoet';
+import { Button } from '@wordpress/components';
+
+import FormPlacementOption from './form_placement_option';
+import Icon from './below_pages_icon';
+import Modal from '../../../../common/modal/modal.jsx';
+
+type Props = {
+  children: React.ReactNode,
+  onSave: () => void,
+  active: boolean,
+  label: string,
+  description: string,
+}
+
+const BelowPages = ({
+  description,
+  label,
+  active,
+  onSave,
+  children,
+}: Props) => {
+  const [displaySettings, setDisplaySettings] = useState(false);
+
+  const save = () => {
+    setDisplaySettings(false);
+    onSave();
+  };
+
+  return (
+    <>
+      <FormPlacementOption
+        label={label}
+        icon={Icon}
+        active={active}
+        onClick={() => setDisplaySettings(true)}
+      />
+      {
+        displaySettings
+        && (
+          <Modal
+            title={label}
+            onRequestClose={() => setDisplaySettings(false)}
+            contentClassName="form-placement-settings"
+          >
+            <p>
+              {description}
+            </p>
+            {children}
+            <div className="mailpoet-form-placement-save">
+              <Button
+                onClick={save}
+                className="mailpoet-save-button automation-id-save-form-placement"
+              >
+                {MailPoet.I18n.t('formPlacementSave')}
+              </Button>
+            </div>
+          </Modal>
+        )
+      }
+    </>
+  );
+};
+
+export default BelowPages;

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-below-pages');
+    $i->click('.automation-id-save-form-placement');
     $i->click('[data-automation-id="form_save_button"]');
     $i->waitForText('Form saved', 10, '.automation-dismissible-notices');