84 lines
2.2 KiB
JavaScript
84 lines
2.2 KiB
JavaScript
import React, { useEffect, useState, useCallback } 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 blocksToFormBody from '../store/blocks_to_form_body.jsx';
|
|
|
|
const FormPreview = () => {
|
|
const [form, setForm] = useState(null);
|
|
|
|
const formBlocks = useSelect(
|
|
(select) => select('mailpoet-form-editor').getFormBlocks(),
|
|
[]
|
|
);
|
|
const customFields = useSelect(
|
|
(select) => select('mailpoet-form-editor').getAllAvailableCustomFields(),
|
|
[]
|
|
);
|
|
|
|
const { hidePreview } = useDispatch('mailpoet-form-editor');
|
|
const isPreview = useSelect(
|
|
(select) => select('mailpoet-form-editor').getIsPreviewShown(),
|
|
[]
|
|
);
|
|
|
|
const loadFormPreviewFromServer = useCallback(() => {
|
|
MailPoet.Ajax.post({
|
|
api_version: window.mailpoet_api_version,
|
|
endpoint: 'forms',
|
|
action: 'previewEditor',
|
|
data: {
|
|
body: blocksToFormBody(formBlocks, customFields),
|
|
},
|
|
}).done((response) => {
|
|
setForm(response.data);
|
|
});
|
|
}, [formBlocks, customFields]);
|
|
|
|
useEffect(() => {
|
|
if (isPreview) {
|
|
loadFormPreviewFromServer();
|
|
}
|
|
}, [isPreview, loadFormPreviewFromServer]);
|
|
|
|
if (!isPreview) return null;
|
|
|
|
function onClose() {
|
|
setForm(null);
|
|
hidePreview();
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
title={MailPoet.I18n.t('formPreview')}
|
|
onRequestClose={onClose}
|
|
>
|
|
<Preview>
|
|
{form === null && (
|
|
<div className="mailpoet_spinner_wrapper">
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
{form !== null && (
|
|
<div>
|
|
<style type="text/css">
|
|
{'.mailpoet_hp_email_label { display: none }' }
|
|
{form.css}
|
|
</style>
|
|
<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>
|
|
<div dangerouslySetInnerHTML={{ __html: form.html }} />
|
|
</div>
|
|
)}
|
|
</Preview>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default FormPreview;
|