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,64 +27,40 @@ const BelowPages = () => {
   ] = useState(placeFormBellowAllPosts);
 
   const save = () => {
-    setDisplaySettings(false);
     setPlaceFormBellowAllPages(localPlaceFormBellowAllPages);
     setPlaceFormBellowAllPosts(localPlaceFormBellowAllPosts);
   };
 
   return (
-    <>
+    <FormPlacementSettings
-      <FormPlacementOption
+      active={placeFormBellowAllPages || placeFormBellowAllPosts}
-        label={MailPoet.I18n.t('placeFormBellowPages')}
+      onSave={save}
-        icon={Icon}
+      description={MailPoet.I18n.t('placeFormBellowPagesDescription')}
-        active={placeFormBellowAllPages || placeFormBellowAllPosts}
+      label={MailPoet.I18n.t('placeFormBellowPages')}
-        onClick={() => setDisplaySettings(true)}
+    >
-      />
+      <div className="mailpoet-toggle-list">
-      {
+        <div className="mailpoet-toggle-list-description">
-        displaySettings
+          {MailPoet.I18n.t('placeFormBellowAllPages')}
-        && (
+        </div>
-          <Modal
+        <div className="mailpoet-toggle-list-toggle">
-            title={MailPoet.I18n.t('placeFormBellowPages')}
+          <Toggle
-            onRequestClose={() => setDisplaySettings(false)}
+            name="localPlaceFormBellowAllPages"
-            contentClassName="form-placement-settings"
+            checked={localPlaceFormBellowAllPages}
-          >
+            onCheck={setLocalPlaceFormBellowAllPages}
-            <p>
+          />
-              {MailPoet.I18n.t('placeFormBellowPagesDescription')}
+        </div>
-            </p>
+        <div className="mailpoet-toggle-list-description">
-            <div className="mailpoet-toggle-list">
+          {MailPoet.I18n.t('placeFormBellowAllPosts')}
-              <div className="mailpoet-toggle-list-description">
+        </div>
-                {MailPoet.I18n.t('placeFormBellowAllPages')}
+        <div className="mailpoet-toggle-list-toggle" data-automation-id="place-form-bellow-all-posts-toggle">
-              </div>
+          <Toggle
-              <div className="mailpoet-toggle-list-toggle">
+            name="localPlaceFormBellowAllPosts"
-                <Toggle
+            checked={localPlaceFormBellowAllPosts}
-                  name="localPlaceFormBellowAllPages"
+            onCheck={setLocalPlaceFormBellowAllPosts}
-                  checked={localPlaceFormBellowAllPages}
+          />
-                  onCheck={setLocalPlaceFormBellowAllPages}
+        </div>
-                />
+      </div>
-              </div>
+    </FormPlacementSettings>
-              <div className="mailpoet-toggle-list-description">
-                {MailPoet.I18n.t('placeFormBellowAllPosts')}
-              </div>
-              <div className="mailpoet-toggle-list-toggle" data-automation-id="place-form-bellow-all-posts-toggle">
-                <Toggle
-                  name="localPlaceFormBellowAllPosts"
-                  checked={localPlaceFormBellowAllPosts}
-                  onCheck={setLocalPlaceFormBellowAllPosts}
-                />
-              </div>
-            </div>
-            <div className="mailpoet-form-placement-save">
-              <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');