123 lines
3.2 KiB
JavaScript
123 lines
3.2 KiB
JavaScript
import React, {
|
|
useEffect,
|
|
useState,
|
|
useCallback,
|
|
useRef,
|
|
useLayoutEffect,
|
|
} from 'react';
|
|
import MailPoet from 'mailpoet';
|
|
import { Spinner } from '@wordpress/components';
|
|
import { useDispatch, useSelect } from '@wordpress/data';
|
|
|
|
import Preview from '../../common/preview.jsx';
|
|
import Modal from '../../common/modal/modal.jsx';
|
|
import { blocksToFormBodyFactory } from '../store/blocks_to_form_body.jsx';
|
|
|
|
const FormPreview = () => {
|
|
const formEl = useRef(null);
|
|
const [form, setForm] = useState(null);
|
|
|
|
const formBlocks = useSelect(
|
|
(select) => select('mailpoet-form-editor').getFormBlocks(),
|
|
[]
|
|
);
|
|
const customFields = useSelect(
|
|
(select) => select('mailpoet-form-editor').getAllAvailableCustomFields(),
|
|
[]
|
|
);
|
|
const settings = useSelect(
|
|
(select) => select('mailpoet-form-editor').getFormSettings(),
|
|
[]
|
|
);
|
|
|
|
const { hidePreview } = useDispatch('mailpoet-form-editor');
|
|
const isPreview = useSelect(
|
|
(select) => select('mailpoet-form-editor').getIsPreviewShown(),
|
|
[]
|
|
);
|
|
|
|
const editorSettings = useSelect(
|
|
(select) => select('core/block-editor').getSettings(),
|
|
[]
|
|
);
|
|
|
|
const loadFormPreviewFromServer = useCallback(() => {
|
|
const blocksToFormBody = blocksToFormBodyFactory(
|
|
editorSettings.colors,
|
|
editorSettings.fontSizes,
|
|
customFields
|
|
);
|
|
MailPoet.Ajax.post({
|
|
api_version: window.mailpoet_api_version,
|
|
endpoint: 'forms',
|
|
action: 'previewEditor',
|
|
data: {
|
|
body: blocksToFormBody(formBlocks),
|
|
settings,
|
|
},
|
|
}).done((response) => {
|
|
setForm(response.data);
|
|
});
|
|
}, [formBlocks, customFields, settings, editorSettings.colors, editorSettings.fontSizes]);
|
|
|
|
useEffect(() => {
|
|
if (isPreview) {
|
|
loadFormPreviewFromServer();
|
|
}
|
|
}, [isPreview, loadFormPreviewFromServer]);
|
|
|
|
useLayoutEffect(() => {
|
|
// eslint-disable-next-line camelcase
|
|
if (formEl.current && form?.form_element_styles) {
|
|
formEl.current.setAttribute('style', form.form_element_styles);
|
|
}
|
|
}, [formEl, form]);
|
|
|
|
if (!isPreview) return null;
|
|
|
|
function onClose() {
|
|
setForm(null);
|
|
hidePreview();
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
title={MailPoet.I18n.t('formPreview')}
|
|
onRequestClose={onClose}
|
|
fullScreen
|
|
>
|
|
{form === null && (
|
|
<div className="mailpoet_spinner_wrapper">
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
{form !== null && (
|
|
<Preview>
|
|
<div>
|
|
<style type="text/css">
|
|
{'.mailpoet_hp_email_label { display: none }' }
|
|
{form.css}
|
|
</style>
|
|
<form
|
|
target="_self"
|
|
method="post"
|
|
className="mailpoet_form "
|
|
noValidate
|
|
ref={formEl}
|
|
>
|
|
{/* eslint-disable-next-line react/no-danger */}
|
|
<div dangerouslySetInnerHTML={{ __html: form.html }} />
|
|
<div className="mailpoet_message">
|
|
<p className="mailpoet_validate_success">{MailPoet.I18n.t('successMessage')}</p>
|
|
<p className="mailpoet_validate_error">{MailPoet.I18n.t('errorMessage')}</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Preview>
|
|
)}
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default FormPreview;
|