7914077acb
Campaigns list is now by default ordered by 'Created' in descending order. Fixed display bug - two clicks on main menu item made it disappear Campaign Status is now protected by 'view' permission. (Up till now it was 'viewStats' permission.) Fixes in campaign status to hide send buttons and test send button if a user does not have necessary permissions. Templates, Mosaico templates and Campaigns (edit and content) are now displayed to user even if the user does have only 'view' permission (not 'edit'). A banner is displayed that the user cannot save any changes and buttons are removed from the edit pages. This is to allow users to copy settings and content from existing campaigns which they are not supposed to edit. A better solution would be to display the edit and content form in read-only mode, but this seems to be a bit complicated.
350 lines
14 KiB
JavaScript
350 lines
14 KiB
JavaScript
'use strict';
|
|
|
|
import React, {Component} from 'react';
|
|
import {withTranslation} from '../lib/i18n';
|
|
import PropTypes from 'prop-types';
|
|
import {ModalDialog} from "../lib/bootstrap-components";
|
|
import {requiresAuthenticatedUser, withPageHelpers} from "../lib/page";
|
|
import {CheckBox, Dropdown, Form, InputField, TableSelect, withForm} from "../lib/form";
|
|
import {withErrorHandling} from "../lib/error-handling";
|
|
import {getMailerTypes} from "../send-configurations/helpers";
|
|
import axios from '../lib/axios';
|
|
import {getUrl} from '../lib/urls';
|
|
import {withComponentMixins} from "../lib/decorator-helpers";
|
|
import {CampaignType} from "../../../shared/campaigns";
|
|
|
|
const Target = {
|
|
CAMPAIGN_ONE: 'campaign_one',
|
|
CAMPAIGN_ALL: 'campaign_all',
|
|
LIST_ONE: 'list_one',
|
|
LIST_ALL: 'list_all'
|
|
};
|
|
|
|
export const TestSendModalDialogMode = {
|
|
TEMPLATE: 0,
|
|
CAMPAIGN_CONTENT: 1,
|
|
CAMPAIGN_STATUS: 2
|
|
}
|
|
|
|
@withComponentMixins([
|
|
withTranslation,
|
|
withForm,
|
|
withErrorHandling,
|
|
withPageHelpers,
|
|
requiresAuthenticatedUser
|
|
])
|
|
export class TestSendModalDialog extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.mailerTypes = getMailerTypes(props.t);
|
|
|
|
this.initForm({
|
|
leaveConfirmation: false,
|
|
onChangeBeforeValidation: {
|
|
list: this.onListChanged
|
|
}
|
|
});
|
|
}
|
|
|
|
static propTypes = {
|
|
visible: PropTypes.bool.isRequired,
|
|
mode: PropTypes.number.isRequired,
|
|
onHide: PropTypes.func.isRequired,
|
|
getDataAsync: PropTypes.func,
|
|
campaign: PropTypes.object,
|
|
template: PropTypes.object
|
|
}
|
|
|
|
onListChanged(mutStateData, key, oldValue, newValue) {
|
|
mutStateData.setIn(['segment', 'value'], null);
|
|
}
|
|
|
|
componentDidMount() {
|
|
const t = this.props.t;
|
|
|
|
this.populateFormValues({
|
|
target: Target.CAMPAIGN_ONE,
|
|
testUserSubscriptionCid: null,
|
|
testUserListAndSubscriptionCid: null,
|
|
subjectPrepend: '',
|
|
subjectAppend: t(' [Test]'),
|
|
sendConfiguration: null,
|
|
listCid: null,
|
|
list: null,
|
|
segment: null,
|
|
useSegmentation: false
|
|
});
|
|
}
|
|
|
|
async hideModal() {
|
|
this.props.onHide();
|
|
}
|
|
|
|
async performAction() {
|
|
const props = this.props;
|
|
const t = props.t;
|
|
const mode = this.props.mode;
|
|
|
|
if (this.isFormWithoutErrors()) {
|
|
try {
|
|
this.hideFormValidation();
|
|
this.disableForm();
|
|
this.setFormStatusMessage('info', t('sendingTestEmail'));
|
|
|
|
const data = {};
|
|
|
|
if (mode === TestSendModalDialogMode.CAMPAIGN_CONTENT || mode === TestSendModalDialogMode.TEMPLATE) {
|
|
const contentData = await this.props.getDataAsync();
|
|
data.html = contentData.html;
|
|
data.text = contentData.text;
|
|
data.tagLanguage = contentData.tagLanguage;
|
|
}
|
|
|
|
if (mode === TestSendModalDialogMode.TEMPLATE) {
|
|
data.templateId = props.template.id;
|
|
data.listCid = this.getFormValue('listCid');
|
|
data.subscriptionCid = this.getFormValue('testUserSubscriptionCid');
|
|
data.sendConfigurationId = this.getFormValue('sendConfiguration');
|
|
|
|
} else if (mode === TestSendModalDialogMode.CAMPAIGN_STATUS || mode === TestSendModalDialogMode.CAMPAIGN_CONTENT) {
|
|
data.campaignId = props.campaign.id;
|
|
data.subjectPrepend = this.getFormValue('subjectPrepend');
|
|
data.subjectAppend = this.getFormValue('subjectAppend');
|
|
|
|
const target = this.getFormValue('target');
|
|
if (target === Target.CAMPAIGN_ONE) {
|
|
const [listCid, subscriptionCid] = this.getFormValue('testUserListAndSubscriptionCid').split(':');
|
|
data.listCid = listCid;
|
|
data.subscriptionCid = subscriptionCid;
|
|
|
|
} else if (target === Target.LIST_ALL) {
|
|
data.listId = this.getFormValue('list');
|
|
data.segmentId = this.getFormValue('useSegmentation') ? this.getFormValue('segment') : null;
|
|
|
|
} else if (target === Target.LIST_ONE) {
|
|
data.listCid = this.getFormValue('listCid');
|
|
data.subscriptionCid = this.getFormValue('testUserSubscriptionCid');
|
|
}
|
|
}
|
|
|
|
await axios.post(getUrl('rest/campaign-test-send'), data);
|
|
|
|
this.clearFormStatusMessage();
|
|
|
|
this.enableForm();
|
|
await this.hideModal();
|
|
|
|
} catch (err) {
|
|
throw err;
|
|
}
|
|
} else {
|
|
this.showFormValidation();
|
|
}
|
|
}
|
|
|
|
localValidateFormValues(state) {
|
|
const t = this.props.t;
|
|
const props = this.props;
|
|
const target = this.getFormValue('target');
|
|
const mode = this.props.mode;
|
|
|
|
state.setIn(['listCid', 'error'], null);
|
|
state.setIn(['sendConfiguration', 'error'], null);
|
|
state.setIn(['testUserSubscriptionCid', 'error'], null);
|
|
state.setIn(['testUserListAndSubscriptionCid', 'error'], null);
|
|
state.setIn(['list', 'error'], null);
|
|
state.setIn(['segment', 'error'], null);
|
|
|
|
if (mode === TestSendModalDialogMode.TEMPLATE) {
|
|
if (!state.getIn(['listCid', 'value'])) {
|
|
state.setIn(['listCid', 'error'], t('listHasToBeSelected'))
|
|
}
|
|
|
|
if (!state.getIn(['sendConfiguration', 'value'])) {
|
|
state.setIn(['sendConfiguration', 'error'], t('sendConfigurationHasToBeSelected'))
|
|
}
|
|
|
|
if (!state.getIn(['testUserSubscriptionCid', 'value'])) {
|
|
state.setIn(['testUserSubscriptionCid', 'error'], t('subscriptionHasToBeSelected'))
|
|
}
|
|
}
|
|
|
|
if ((mode === TestSendModalDialogMode.CAMPAIGN_CONTENT || mode === TestSendModalDialogMode.CAMPAIGN_STATUS) && target === Target.CAMPAIGN_ONE) {
|
|
if (!state.getIn(['testUserListAndSubscriptionCid', 'value'])) {
|
|
state.setIn(['testUserListAndSubscriptionCid', 'error'], t('subscriptionHasToBeSelected'))
|
|
}
|
|
}
|
|
|
|
if ((mode === TestSendModalDialogMode.CAMPAIGN_CONTENT || mode === TestSendModalDialogMode.CAMPAIGN_STATUS) && target === Target.LIST_ONE) {
|
|
if (!state.getIn(['listCid', 'value'])) {
|
|
state.setIn(['listCid', 'error'], t('listHasToBeSelected'))
|
|
}
|
|
|
|
if (!state.getIn(['testUserSubscriptionCid', 'value'])) {
|
|
state.setIn(['testUserSubscriptionCid', 'error'], t('subscriptionHasToBeSelected'))
|
|
}
|
|
}
|
|
|
|
if ((mode === TestSendModalDialogMode.CAMPAIGN_CONTENT || mode === TestSendModalDialogMode.CAMPAIGN_STATUS) && target === Target.LIST_ALL) {
|
|
if (!state.getIn(['list', 'value'])) {
|
|
state.setIn(['list', 'error'], t('listMustBeSelected'));
|
|
}
|
|
|
|
if (state.getIn(['useSegmentation', 'value']) && !state.getIn(['segment', 'value'])) {
|
|
state.setIn(['segment', 'error'], t('segmentMustBeSelected'));
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const t = this.props.t;
|
|
const props = this.props;
|
|
|
|
const content = [];
|
|
const target = this.getFormValue('target');
|
|
const mode = this.props.mode;
|
|
|
|
if (mode === TestSendModalDialogMode.CAMPAIGN_CONTENT || mode === TestSendModalDialogMode.CAMPAIGN_STATUS) {
|
|
const targetOpts = [
|
|
{key: Target.CAMPAIGN_ONE, label: t('Single test user of the campaign')},
|
|
{key: Target.CAMPAIGN_ALL, label: t('All test users of the campaign')},
|
|
{key: Target.LIST_ONE, label: t('Single test user from a list')},
|
|
{key: Target.LIST_ALL, label: t('All test users from a list/segment')}
|
|
];
|
|
|
|
content.push(
|
|
<Dropdown key="target" id="target" format="wide" label={t('Select to where you want to send the test')} options={targetOpts}/>
|
|
);
|
|
}
|
|
|
|
if (mode === TestSendModalDialogMode.TEMPLATE) {
|
|
const listCid = this.getFormValue('listCid');
|
|
|
|
const testUsersColumns = [
|
|
{ data: 1, title: t('subscriptionId'), render: data => <code>{data}</code> },
|
|
{ data: 2, title: t('email') }
|
|
];
|
|
|
|
const listsColumns = [
|
|
{ data: 1, title: t('name') },
|
|
{ data: 2, title: t('id'), render: data => <code>{data}</code> },
|
|
{ data: 3, title: t('subscribers') },
|
|
{ data: 4, title: t('description') },
|
|
{ data: 5, title: t('namespace') }
|
|
];
|
|
|
|
const sendConfigurationsColumns = [
|
|
{ data: 1, title: t('name') },
|
|
{ data: 2, title: t('id'), render: data => <code>{data}</code> },
|
|
{ data: 3, title: t('description') },
|
|
{ data: 4, title: t('type'), render: data => this.mailerTypes[data].typeName },
|
|
{ data: 6, title: t('namespace') }
|
|
];
|
|
|
|
content.push(
|
|
<TableSelect key="sendConfiguration" id="sendConfiguration" format="wide" label={t('sendConfiguration')} withHeader dropdown dataUrl='rest/send-configurations-with-send-permission-table' columns={sendConfigurationsColumns} selectionLabelIndex={1} />
|
|
);
|
|
|
|
content.push(
|
|
<TableSelect key="listCid" id="listCid" format="wide" label={t('list')} withHeader dropdown dataUrl={`rest/lists-table`} columns={listsColumns} selectionKeyIndex={2} selectionLabelIndex={1} />
|
|
);
|
|
|
|
if (listCid) {
|
|
content.push(
|
|
<TableSelect key="testUserSubscriptionCid" id="testUserSubscriptionCid" format="wide" label={t('subscription')} withHeader dropdown dataUrl={`rest/subscriptions-test-user-table/${listCid}`} columns={testUsersColumns} selectionKeyIndex={1} selectionLabelIndex={2} />
|
|
);
|
|
}
|
|
}
|
|
|
|
if ((mode === TestSendModalDialogMode.CAMPAIGN_CONTENT || mode === TestSendModalDialogMode.CAMPAIGN_STATUS) && target === Target.CAMPAIGN_ONE) {
|
|
const testUsersColumns = [
|
|
{data: 1, title: t('email')},
|
|
{data: 2, title: t('subscriptionId'), render: data => <code>{data}</code>},
|
|
{data: 3, title: t('listId'), render: data => <code>{data}</code>},
|
|
{data: 4, title: t('list')},
|
|
{data: 5, title: t('listNamespace')}
|
|
];
|
|
|
|
content.push(
|
|
<TableSelect key="testUserListAndSubscriptionCid" id="testUserListAndSubscriptionCid" format="wide" label={t('subscription')} withHeader dropdown dataUrl={`rest/campaigns-test-users-table/${this.props.campaign.id}`} columns={testUsersColumns} selectionLabelIndex={1} />
|
|
);
|
|
}
|
|
|
|
if ((mode === TestSendModalDialogMode.CAMPAIGN_CONTENT || mode === TestSendModalDialogMode.CAMPAIGN_STATUS) && target === Target.LIST_ONE) {
|
|
const listCid = this.getFormValue('listCid');
|
|
|
|
const listsColumns = [
|
|
{ data: 1, title: t('name') },
|
|
{ data: 2, title: t('id'), render: data => <code>{data}</code> },
|
|
{ data: 3, title: t('subscribers') },
|
|
{ data: 4, title: t('description') },
|
|
{ data: 5, title: t('namespace') }
|
|
];
|
|
|
|
const testUsersColumns = [
|
|
{ data: 1, title: t('subscriptionId'), render: data => <code>{data}</code> },
|
|
{ data: 2, title: t('email') }
|
|
];
|
|
|
|
content.push(
|
|
<TableSelect key="listCid" id="listCid" format="wide" label={t('list')} withHeader dropdown dataUrl={`rest/lists-table`} columns={listsColumns} selectionKeyIndex={2} selectionLabelIndex={1} />
|
|
);
|
|
|
|
if (listCid) {
|
|
content.push(
|
|
<TableSelect key="testUserSubscriptionCid" id="testUserSubscriptionCid" format="wide" label={t('subscription')} withHeader dropdown dataUrl={`rest/subscriptions-test-user-table/${listCid}`} columns={testUsersColumns} selectionKeyIndex={1} selectionLabelIndex={2} />
|
|
);
|
|
}
|
|
}
|
|
|
|
if ((mode === TestSendModalDialogMode.CAMPAIGN_CONTENT || mode === TestSendModalDialogMode.CAMPAIGN_STATUS) && target === Target.LIST_ALL) {
|
|
const listsColumns = [
|
|
{ data: 1, title: t('name') },
|
|
{ data: 2, title: t('id'), render: data => <code>{data}</code> },
|
|
{ data: 3, title: t('subscribers') },
|
|
{ data: 4, title: t('description') },
|
|
{ data: 5, title: t('namespace') }
|
|
];
|
|
|
|
const segmentsColumns = [
|
|
{ data: 1, title: t('name') }
|
|
];
|
|
|
|
content.push(
|
|
<TableSelect key="list" id="list" format="wide" label={t('list')} withHeader dropdown dataUrl='rest/lists-table' columns={listsColumns} selectionLabelIndex={1} />
|
|
);
|
|
|
|
const selectedList = this.getFormValue('list');
|
|
content.push(
|
|
<div key="segment">
|
|
<CheckBox id="useSegmentation" format="wide" text={t('useAParticularSegment')}/>
|
|
{selectedList && this.getFormValue('useSegmentation') &&
|
|
<TableSelect id="segment" format="wide" withHeader dropdown dataUrl={`rest/segments-table/${selectedList}`} columns={segmentsColumns} selectionLabelIndex={1} />
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (mode === TestSendModalDialogMode.CAMPAIGN_CONTENT || mode === TestSendModalDialogMode.CAMPAIGN_STATUS) {
|
|
content.push(
|
|
<InputField key="subjectPrepend" id="subjectPrepend" format="wide" label={t('Prepend to subject')}/>
|
|
);
|
|
|
|
content.push(
|
|
<InputField key="subjectAppend" id="subjectAppend" format="wide" label={t('Append to subject')}/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ModalDialog hidden={!this.props.visible} title={t('sendTestEmail')} onCloseAsync={() => this.hideModal()} buttons={[
|
|
{ label: t('send'), className: 'btn-primary', onClickAsync: ::this.performAction },
|
|
{ label: t('close'), className: 'btn-danger', onClickAsync: ::this.hideModal }
|
|
]}>
|
|
<Form stateOwner={this} format="wide">
|
|
{content}
|
|
</Form>
|
|
</ModalDialog>
|
|
);
|
|
}
|
|
}
|