262 lines
No EOL
10 KiB
JavaScript
262 lines
No EOL
10 KiB
JavaScript
'use strict';
|
|
|
|
import React, {Component} from 'react';
|
|
import PropTypes
|
|
from 'prop-types';
|
|
import {withTranslation} from '../../lib/i18n';
|
|
import {
|
|
LinkButton,
|
|
requiresAuthenticatedUser,
|
|
Title,
|
|
withPageHelpers
|
|
} from '../../lib/page';
|
|
import {
|
|
AlignedRow,
|
|
Button,
|
|
ButtonRow,
|
|
CheckBox,
|
|
Dropdown,
|
|
Form,
|
|
FormSendMethod,
|
|
InputField,
|
|
TableSelect,
|
|
TextArea,
|
|
withForm
|
|
} from '../../lib/form';
|
|
import {withErrorHandling} from '../../lib/error-handling';
|
|
import {DeleteModalDialog} from "../../lib/modals";
|
|
import {getTriggerTypes} from './helpers';
|
|
import {
|
|
Entity,
|
|
Event
|
|
} from '../../../../shared/triggers';
|
|
import moment
|
|
from 'moment';
|
|
import {getCampaignLabels} from "../helpers";
|
|
import {withComponentMixins} from "../../lib/decorator-helpers";
|
|
|
|
|
|
@withComponentMixins([
|
|
withTranslation,
|
|
withForm,
|
|
withErrorHandling,
|
|
withPageHelpers,
|
|
requiresAuthenticatedUser
|
|
])
|
|
export default class CUD extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {};
|
|
|
|
this.campaignTypeLabels = getCampaignLabels(props.t);
|
|
|
|
const {entityLabels, eventLabels} = getTriggerTypes(props.t);
|
|
this.entityLabels = entityLabels;
|
|
|
|
this.entityOptions = [
|
|
{key: Entity.SUBSCRIPTION, label: entityLabels[Entity.SUBSCRIPTION]},
|
|
{key: Entity.CAMPAIGN, label: entityLabels[Entity.CAMPAIGN]}
|
|
];
|
|
|
|
const SubscriptionEvent = Event[Entity.SUBSCRIPTION];
|
|
const CampaignEvent = Event[Entity.CAMPAIGN];
|
|
this.eventOptions = {
|
|
[Entity.SUBSCRIPTION]: [
|
|
{key: SubscriptionEvent.CREATED, label: eventLabels[Entity.SUBSCRIPTION][SubscriptionEvent.CREATED]},
|
|
{key: SubscriptionEvent.LATEST_OPEN, label: eventLabels[Entity.SUBSCRIPTION][SubscriptionEvent.LATEST_OPEN]},
|
|
{key: SubscriptionEvent.LATEST_CLICK, label: eventLabels[Entity.SUBSCRIPTION][SubscriptionEvent.LATEST_CLICK]}
|
|
],
|
|
[Entity.CAMPAIGN]: [
|
|
{key: CampaignEvent.DELIVERED, label: eventLabels[Entity.CAMPAIGN][CampaignEvent.DELIVERED]},
|
|
{key: CampaignEvent.OPENED, label: eventLabels[Entity.CAMPAIGN][CampaignEvent.OPENED]},
|
|
{key: CampaignEvent.CLICKED, label: eventLabels[Entity.CAMPAIGN][CampaignEvent.CLICKED]},
|
|
{key: CampaignEvent.NOT_OPENED, label: eventLabels[Entity.CAMPAIGN][CampaignEvent.NOT_OPENED]},
|
|
{key: CampaignEvent.NOT_CLICKED, label: eventLabels[Entity.CAMPAIGN][CampaignEvent.NOT_CLICKED]}
|
|
]
|
|
};
|
|
|
|
|
|
this.initForm();
|
|
}
|
|
|
|
static propTypes = {
|
|
action: PropTypes.string.isRequired,
|
|
campaign: PropTypes.object,
|
|
entity: PropTypes.object
|
|
}
|
|
|
|
getFormValuesMutator(data) {
|
|
data.daysAfter = (Math.round(data.seconds / (3600 * 24))).toString();
|
|
|
|
if (data.entity === Entity.SUBSCRIPTION) {
|
|
data.subscriptionEvent = data.event;
|
|
} else {
|
|
data.subscriptionEvent = Event[Entity.SUBSCRIPTION].CREATED;
|
|
}
|
|
|
|
if (data.entity === Entity.CAMPAIGN) {
|
|
data.campaignEvent = data.event;
|
|
} else {
|
|
data.campaignEvent = Event[Entity.CAMPAIGN].DELIVERED;
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (this.props.entity) {
|
|
this.getFormValuesFromEntity(this.props.entity, ::this.getFormValuesMutator);
|
|
|
|
} else {
|
|
this.populateFormValues({
|
|
name: '',
|
|
description: '',
|
|
entity: Entity.SUBSCRIPTION,
|
|
subscriptionEvent: Event[Entity.SUBSCRIPTION].CREATED,
|
|
campaignEvent: Event[Entity.CAMPAIGN].DELIVERED,
|
|
daysAfter: '',
|
|
enabled: true,
|
|
source_campaign: null
|
|
});
|
|
}
|
|
}
|
|
|
|
localValidateFormValues(state) {
|
|
const t = this.props.t;
|
|
|
|
const entityKey = state.getIn(['entity', 'value']);
|
|
|
|
if (!state.getIn(['name', 'value'])) {
|
|
state.setIn(['name', 'error'], t('nameMustNotBeEmpty'));
|
|
} else {
|
|
state.setIn(['name', 'error'], null);
|
|
}
|
|
|
|
const daysAfter = state.getIn(['daysAfter', 'value']).trim();
|
|
if (daysAfter === '') {
|
|
state.setIn(['daysAfter', 'error'], t('valuesMustNotBeEmpty'));
|
|
} else if (isNaN(daysAfter) || Number.parseInt(daysAfter) < 0) {
|
|
state.setIn(['daysAfter', 'error'], t('valueMustBeANonnegativeNumber'));
|
|
} else {
|
|
state.setIn(['daysAfter', 'error'], null);
|
|
}
|
|
|
|
if (entityKey === Entity.CAMPAIGN && !state.getIn(['source_campaign', 'value'])) {
|
|
state.setIn(['source_campaign', 'error'], t('sourceCampaignMustNotBeEmpty'));
|
|
} else {
|
|
state.setIn(['source_campaign', 'error'], null);
|
|
}
|
|
}
|
|
|
|
async submitHandler(submitAndLeave) {
|
|
const t = this.props.t;
|
|
|
|
let sendMethod, url;
|
|
if (this.props.entity) {
|
|
sendMethod = FormSendMethod.PUT;
|
|
url = `rest/triggers/${this.props.campaign.id}/${this.props.entity.id}`
|
|
} else {
|
|
sendMethod = FormSendMethod.POST;
|
|
url = `rest/triggers/${this.props.campaign.id}`
|
|
}
|
|
|
|
try {
|
|
this.disableForm();
|
|
this.setFormStatusMessage('info', t('saving'));
|
|
|
|
const submitResult = await this.validateAndSendFormValuesToURL(sendMethod, url, data => {
|
|
data.seconds = Number.parseInt(data.daysAfter) * 3600 * 24;
|
|
|
|
if (data.entity === Entity.SUBSCRIPTION) {
|
|
data.event = data.subscriptionEvent;
|
|
} else if (data.entity === Entity.CAMPAIGN) {
|
|
data.event = data.campaignEvent;
|
|
}
|
|
});
|
|
|
|
if (submitResult) {
|
|
if (this.props.entity) {
|
|
if (submitAndLeave) {
|
|
this.navigateToWithFlashMessage(`/campaigns/${this.props.campaign.id}/triggers`, 'success', t('Trigger updated'));
|
|
} else {
|
|
await this.getFormValuesFromURL(`rest/triggers/${this.props.campaign.id}/${this.props.entity.id}`, ::this.getFormValuesMutator);
|
|
this.enableForm();
|
|
this.setFormStatusMessage('success', t('Trigger updated'));
|
|
}
|
|
} else {
|
|
if (submitAndLeave) {
|
|
this.navigateToWithFlashMessage(`/campaigns/${this.props.campaign.id}/triggers`, 'success', t('Trigger created'));
|
|
} else {
|
|
this.navigateToWithFlashMessage(`/campaigns/${this.props.campaign.id}/triggers/${submitResult}/edit`, 'success', t('Trigger created'));
|
|
}
|
|
}
|
|
} else {
|
|
this.enableForm();
|
|
this.setFormStatusMessage('warning', t('thereAreErrorsInTheFormPleaseFixThemAnd'));
|
|
}
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const t = this.props.t;
|
|
const isEdit = !!this.props.entity;
|
|
|
|
const entityKey = this.getFormValue('entity');
|
|
|
|
const campaignsColumns = [
|
|
{ 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.campaignTypeLabels[data] },
|
|
{ data: 5, title: t('created'), render: data => moment(data).fromNow() },
|
|
{ data: 6, title: t('namespace') }
|
|
];
|
|
|
|
const campaignLists = this.props.campaign.lists.map(x => x.list).join(';');
|
|
|
|
return (
|
|
<div>
|
|
{isEdit &&
|
|
<DeleteModalDialog
|
|
stateOwner={this}
|
|
visible={this.props.action === 'delete'}
|
|
deleteUrl={`rest/triggers/${this.props.campaign.id}/${this.props.entity.id}`}
|
|
backUrl={`/campaigns/${this.props.campaign.id}/triggers/${this.props.entity.id}/edit`}
|
|
successUrl={`/campaigns/${this.props.campaign.id}/triggers`}
|
|
deletingMsg={t('deletingTrigger')}
|
|
deletedMsg={t('triggerDeleted')}/>
|
|
}
|
|
|
|
<Title>{isEdit ? t('editTrigger') : t('createTrigger')}</Title>
|
|
|
|
<Form stateOwner={this} onSubmitAsync={::this.submitHandler}>
|
|
<InputField id="name" label={t('name')}/>
|
|
<TextArea id="description" label={t('description')}/>
|
|
|
|
<Dropdown id="entity" label={t('entity')} options={this.entityOptions} help={t('selectTheTypeOfTheTriggerRule')}/>
|
|
|
|
<InputField id="daysAfter" label={t('triggerFires')}/>
|
|
|
|
<AlignedRow>days after:</AlignedRow>
|
|
|
|
{entityKey === Entity.SUBSCRIPTION && <Dropdown id="subscriptionEvent" label={t('event')} options={this.eventOptions[Entity.SUBSCRIPTION]} help={t('selectTheEventThatTriggersSendingThe')}/>}
|
|
|
|
{entityKey === Entity.CAMPAIGN && <Dropdown id="campaignEvent" label={t('event')} options={this.eventOptions[Entity.CAMPAIGN]} help={t('selectTheEventThatTriggersSendingThe')}/>}
|
|
|
|
{entityKey === Entity.CAMPAIGN &&
|
|
<TableSelect id="source_campaign" label={t('campaign')} withHeader dropdown dataUrl={`rest/campaigns-others-by-list-table/${this.props.campaign.id}/${campaignLists}`} columns={campaignsColumns} selectionLabelIndex={1} />
|
|
}
|
|
|
|
<CheckBox id="enabled" text={t('enabled')}/>
|
|
|
|
<ButtonRow>
|
|
<Button type="submit" className="btn-primary" icon="check" label={t('Save')}/>
|
|
<Button type="submit" className="btn-primary" icon="check" label={t('Save and leave')} onClickAsync={async () => this.submitHandler(true)}/>
|
|
{isEdit && <LinkButton className="btn-danger" icon="trash-alt" label={t('delete')} to={`/campaigns/${this.props.campaign.id}/triggers/${this.props.entity.id}/delete`}/>}
|
|
</ButtonRow>
|
|
</Form>
|
|
</div>
|
|
);
|
|
}
|
|
} |