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

Move below post form settings to preview

Browse Source 
[MAILPOET-2811]
This commit is contained in:
Rostislav Wolny
2020-05-14 14:10:49 +02:00
committed by Veljko V
parent 188c00d792
commit b41248e5e1
5 changed files with 77 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,9 @@
import React, { useState } from 'react';
import React from 'react';
import MailPoet from 'mailpoet';
import { useSelect, useDispatch } from '@wordpress/data';
import FormPlacementSettings from './form_placement_settings';
import Toggle from '../../../../common/toggle';
import Icon from './icons/below_pages_icon';
import FormPlacementOption from './form_placement_option';
const BelowPages = () => {
const formSettings = useSelect(
@@ -14,56 +13,16 @@ const BelowPages = () => {
const placeFormBellowAllPages = formSettings.placeFormBellowAllPages || false;
const placeFormBellowAllPosts = formSettings.placeFormBellowAllPosts || false;
const { changeFormSettings } = useDispatch('mailpoet-form-editor');
const [
localPlaceFormBellowAllPages,
setLocalPlaceFormBellowAllPages,
] = useState(placeFormBellowAllPages);
const [
localPlaceFormBellowAllPosts,
setLocalPlaceFormBellowAllPosts,
] = useState(placeFormBellowAllPosts);
const save = () => {
changeFormSettings({
...formSettings,
placeFormBellowAllPages: localPlaceFormBellowAllPages,
placeFormBellowAllPosts: localPlaceFormBellowAllPosts,
});
};
const { showPreview } = useDispatch('mailpoet-form-editor');
return (
<FormPlacementSettings
<FormPlacementOption
active={placeFormBellowAllPages || placeFormBellowAllPosts}
onSave={save}
description={MailPoet.I18n.t('placeFormBellowPagesDescription')}
label={MailPoet.I18n.t('placeFormBellowPages')}
icon={Icon}
>
<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}
onClick={() => (showPreview('below_post'))}
canBeActive
/>
</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>
);
};

46
assets/js/src/form_editor/components/preview/below_posts_settings.tsx Normal file
View File

@@ -0,0 +1,46 @@
import React from 'react';
import MailPoet from 'mailpoet';
import Toggle from 'common/toggle';
import { useSelect, useDispatch } from '@wordpress/data';
import { partial } from 'lodash';
const BelowPostsSettings = () => {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[]
);
const { changeFormSettings } = useDispatch('mailpoet-form-editor');
const updateSettings = (key, value) => {
const settings = { ...formSettings };
settings[key] = value;
changeFormSettings(settings);
};
return (
<div className="mailpoet-toggle-list">
<div className="mailpoet-toggle-list-description">
{MailPoet.I18n.t('placeFormBellowAllPages')}
</div>
<div className="mailpoet-toggle-list-toggle">
<Toggle
name="placeFormBellowAllPages"
checked={formSettings.placeFormBellowAllPages || false}
onCheck={partial(updateSettings, 'placeFormBellowAllPages')}
/>
</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="placeFormBellowAllPosts"
checked={formSettings.placeFormBellowAllPosts || false}
onCheck={partial(updateSettings, 'placeFormBellowAllPosts')}
/>
</div>
</div>
);
};
export default BelowPostsSettings;

3
assets/js/src/form_editor/components/preview/preview.tsx
View File

@@ -9,6 +9,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
import Preview from 'common/preview/preview.jsx';
import Modal from 'common/modal/modal.jsx';
import { onChange } from 'common/functions';
import BelowPostsSettings from './below_posts_settings';
const FormPreview = () => {
const [iframeLoaded, setIframeLoaded] = useState(false);
@@ -86,7 +87,7 @@ const FormPreview = () => {
<option value="slide_in">{MailPoet.I18n.t('placeSlideInFormOnPages')}</option>
</select>
</label>
<p>Todo width and placement settings.</p>
{previewSettings.formType === 'below_post' && <BelowPostsSettings />}
</div>
<Preview
onDisplayTypeChange={onPreviewTypeChange}

34
assets/js/src/form_editor/store/actions.jsx
View File

@@ -125,7 +125,27 @@ export function saveFormFailed(message = undefined) {
};
}
export function* showPreview() {
export function* changePreviewSettings(settings) {
yield {
type: 'STORE_LOCALLY',
key: 'mailpoet_form_preview_settings',
value: settings,
};
yield {
type: 'CHANGE_PREVIEW_SETTINGS',
settings,
};
}
export function* showPreview(formType = null) {
if (formType !== null && typeof formType === 'string') {
const previewSettings = select('mailpoet-form-editor').getPreviewSettings();
const updatedPreviewSettings = {
...previewSettings,
formType,
};
yield* changePreviewSettings(updatedPreviewSettings);
}
yield {
type: 'SHOW_PREVIEW',
};
@@ -153,18 +173,6 @@ export function* showPreview() {
return { type: 'PREVIEW_DATA_SAVED' };
}
export function* changePreviewSettings(settings) {
yield {
type: 'STORE_LOCALLY',
key: 'mailpoet_form_preview_settings',
value: settings,
};
return {
type: 'CHANGE_PREVIEW_SETTINGS',
settings,
};
}
export function hidePreview() {
return {
type: 'HIDE_PREVIEW',

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