Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

Split component into two

Browse Source 
[MAILPOET-2738]
This commit is contained in:
Pavel Dohnal
2020-03-18 15:26:01 +01:00
committed by Veljko V
parent d2716736a1
commit 02fe614b27
3 changed files with 97 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx
View File

@@ -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 (
<>
<FormPlacementOption
label={MailPoet.I18n.t('placeFormBellowPages')}
icon={Icon}
active={placeFormBellowAllPages || placeFormBellowAllPosts}
onClick={() => setDisplaySettings(true)}
/>
{
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')}
</div>
<div className="mailpoet-toggle-list-toggle">
<Toggle
name="localPlaceFormBellowAllPages"
checked={localPlaceFormBellowAllPages}
onCheck={setLocalPlaceFormBellowAllPages}
/>
</div>
<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>
)
}
</>
<FormPlacementSettings
active={placeFormBellowAllPages || placeFormBellowAllPosts}
onSave={save}
description={MailPoet.I18n.t('placeFormBellowPagesDescription')}
label={MailPoet.I18n.t('placeFormBellowPages')}
>
<div className="mailpoet-toggle-list">
<div className="mailpoet-toggle-list-description">
{MailPoet.I18n.t('placeFormBellowAllPages')}
</div>
<div className="mailpoet-toggle-list-toggle">
<Toggle
name="localPlaceFormBellowAllPages"
checked={localPlaceFormBellowAllPages}
onCheck={setLocalPlaceFormBellowAllPages}
/>
</div>
<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>
</FormPlacementSettings>
);
};

66
assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_settings.tsx Normal file
View File

@@ -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;

2
tests/acceptance/DisplayFormBellowPostCest.php
View File

@@ -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');