diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx index a16c505cfd..fc025df703 100644 --- a/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx +++ b/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 Icon from './below_pages_icon'; -import Modal from '../../../../common/modal/modal.jsx'; +import FormPlacementSettings from './form_placement_settings'; 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 ( - <> - setDisplaySettings(true)} - /> - { - displaySettings - && ( - setDisplaySettings(false)} - contentClassName="form-placement-settings" - > -

- {MailPoet.I18n.t('placeFormBellowPagesDescription')} -

-
-
- {MailPoet.I18n.t('placeFormBellowAllPages')} -
-
- -
-
- {MailPoet.I18n.t('placeFormBellowAllPosts')} -
-
- -
-
-
- -
-
- ) - } - + +
+
+ {MailPoet.I18n.t('placeFormBellowAllPages')} +
+
+ +
+
+ {MailPoet.I18n.t('placeFormBellowAllPosts')} +
+
+ +
+
+
); }; diff --git a/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_settings.tsx b/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_settings.tsx new file mode 100644 index 0000000000..cc832d27c8 --- /dev/null +++ b/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 ( + <> + setDisplaySettings(true)} + /> + { + displaySettings + && ( + setDisplaySettings(false)} + contentClassName="form-placement-settings" + > +

+ {description} +

+ {children} +
+ +
+
+ ) + } + + ); +}; + +export default BelowPages; diff --git a/tests/acceptance/DisplayFormBellowPostCest.php b/tests/acceptance/DisplayFormBellowPostCest.php index 54e0109875..6a74e15bf5 100644 --- a/tests/acceptance/DisplayFormBellowPostCest.php +++ b/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');