,
diff --git a/client/src/campaigns/root.js b/client/src/campaigns/root.js
index c77a41e8..5f152cb1 100644
--- a/client/src/campaigns/root.js
+++ b/client/src/campaigns/root.js
@@ -7,7 +7,12 @@ import Content from './Content';
import CampaignsList from './List';
import Share from '../shares/Share';
import Files from "../lib/files";
-import {CampaignSource, CampaignType} from "../../../shared/campaigns";
+import {
+ CampaignSource,
+ CampaignType
+} from "../../../shared/campaigns";
+import TriggersCUD from './triggers/CUD';
+import TriggersList from './triggers/List';
function getMenus(t) {
@@ -51,6 +56,32 @@ function getMenus(t) {
visible: resolved => resolved.campaign.permissions.includes('viewAttachments'),
panelRender: props =>
},
+ triggers: {
+ title: t('Triggers'),
+ link: params => `/campaigns/${params.campaignId}/triggers/`,
+ visible: resolved => resolved.campaign.type === CampaignType.TRIGGERED && resolved.campaign.permissions.includes('viewTriggers'),
+ panelRender: props => ,
+ children: {
+ ':triggerId([0-9]+)': {
+ title: resolved => t('Trigger "{{name}}"', {name: resolved.trigger.name}),
+ resolve: {
+ trigger: params => `rest/triggers/${params.campaignId}/${params.triggerId}`,
+ },
+ link: params => `/campaigns/${params.campaignId}/triggers/${params.triggerId}/edit`,
+ navs: {
+ ':action(edit|delete)': {
+ title: t('Edit'),
+ link: params => `/campaigns/${params.campaignId}/triggers/${params.triggerId}/edit`,
+ panelRender: props =>
+ }
+ }
+ },
+ create: {
+ title: t('Create'),
+ panelRender: props =>
+ }
+ }
+ },
share: {
title: t('Share'),
link: params => `/campaigns/${params.campaignId}/share`,
diff --git a/client/src/campaigns/triggers/CUD.js b/client/src/campaigns/triggers/CUD.js
new file mode 100644
index 00000000..a016af78
--- /dev/null
+++ b/client/src/campaigns/triggers/CUD.js
@@ -0,0 +1,237 @@
+'use strict';
+
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {translate} from 'react-i18next';
+import {
+ NavButton,
+ 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 {getCampaignTypeLabels} from "../helpers";
+
+
+@translate()
+@withForm
+@withPageHelpers
+@withErrorHandling
+@requiresAuthenticatedUser
+export default class CUD extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {};
+
+ this.campaignTypes = getCampaignTypeLabels(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
+ }
+
+ componentDidMount() {
+ if (this.props.entity) {
+ this.getFormValuesFromEntity(this.props.entity, data => {
+ data.daysAfter = (Math.round(data.seconds_after / (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;
+ }
+ });
+
+ } 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('Name must not be empty'));
+ } else {
+ state.setIn(['name', 'error'], null);
+ }
+
+ const daysAfter = state.getIn(['daysAfter', 'value']).trim();
+ if (daysAfter === '') {
+ state.setIn(['daysAfter', 'error'], t('Values must not be empty'));
+ } else if (isNaN(daysAfter) || Number.parseInt(daysAfter) < 0) {
+ state.setIn(['daysAfter', 'error'], t('Value must be a non-negative number'));
+ } else {
+ state.setIn(['daysAfter', 'error'], null);
+ }
+
+ if (entityKey === Entity.CAMPAIGN && !state.getIn(['source_campaign', 'value'])) {
+ state.setIn(['source_campaign', 'error'], t('Source campaign must not be empty'));
+ } else {
+ state.setIn(['source_campaign', 'error'], null);
+ }
+ }
+
+ async submitHandler() {
+ 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 submitSuccessful = await this.validateAndSendFormValuesToURL(sendMethod, url, data => {
+ data.seconds_after = 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 (submitSuccessful) {
+ this.navigateToWithFlashMessage(`/campaigns/${this.props.campaign.id}/triggers`, 'success', t('Trigger saved'));
+ } else {
+ this.enableForm();
+ this.setFormStatusMessage('warning', t('There are errors in the form. Please fix them and submit again.'));
+ }
+ } 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('Description') },
+ { data: 3, title: t('Type'), render: data => this.campaignTypes[data] },
+ { data: 4, title: t('Created'), render: data => moment(data).fromNow() },
+ { data: 5, title: t('Namespace') }
+ ];
+
+ return (
+
+ {isEdit &&
+
+ }
+
+
{isEdit ? t('Edit Trigger') : t('Create Trigger')}
+
+