@capillarytech/creatives-library 2.0.28 → 2.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/CmsTemplatesComponent/index.js +2 -3
- package/containers/CreativesContainer/SlideBoxContent.js +8 -2
- package/containers/CreativesContainer/SlideBoxFooter.js +20 -16
- package/containers/CreativesContainer/index.js +18 -9
- package/containers/Email/index.js +12 -13
- package/containers/Email/sagas.js +2 -6
- package/containers/EmailWrapper/index.js +48 -43
- package/package.json +1 -1
- package/routes.js +3 -1
|
@@ -15,19 +15,18 @@ function CmsTemplatesComponent(props) {
|
|
|
15
15
|
const cardDataList = props.cmsTemplates.map((template) => (
|
|
16
16
|
{
|
|
17
17
|
title: template.name,
|
|
18
|
-
|
|
18
|
+
url: template.versions.base.preview_http_url,
|
|
19
19
|
hoverOption: <CapButton onClick={() => props.handleEdmDefaultTemplateSelection(template._id)}><FormattedMessage {...messages.select}/></CapButton>,
|
|
20
20
|
}));
|
|
21
21
|
return (<div>
|
|
22
22
|
<div className="pagination-container">
|
|
23
|
-
<CapCustomCardList cardList={cardDataList} type="
|
|
23
|
+
<CapCustomCardList cardList={cardDataList} type="Email" />
|
|
24
24
|
</div>
|
|
25
25
|
</div>);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
CmsTemplatesComponent.propTypes = {
|
|
29
29
|
cmsTemplates: PropTypes.array,
|
|
30
|
-
handleEdmDefaultTemplateSelection: PropTypes.func,
|
|
31
30
|
};
|
|
32
31
|
|
|
33
32
|
export default CmsTemplatesComponent;
|
|
@@ -32,6 +32,7 @@ function SlideBoxContent(props) {
|
|
|
32
32
|
onEmailModeChange,
|
|
33
33
|
emailCreateMode,
|
|
34
34
|
emailStep,
|
|
35
|
+
onEmailNextStep,
|
|
35
36
|
} = props;
|
|
36
37
|
const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
|
|
37
38
|
const query = { type: 'embedded', module: 'library' };
|
|
@@ -110,9 +111,10 @@ function SlideBoxContent(props) {
|
|
|
110
111
|
isGetFormData={isGetFormData}
|
|
111
112
|
getFormdata={getFormData}
|
|
112
113
|
templateData={templateData}
|
|
113
|
-
|
|
114
|
-
getDefaultTags={type}
|
|
114
|
+
type={type}
|
|
115
115
|
step={emailStep}
|
|
116
|
+
showNextStep={onEmailNextStep}
|
|
117
|
+
isFullMode={false}
|
|
116
118
|
/>
|
|
117
119
|
)}
|
|
118
120
|
{(isEditEmailWithId || isEmailEditWithContent) && (
|
|
@@ -145,5 +147,9 @@ SlideBoxContent.propTypes = {
|
|
|
145
147
|
onCreateNew: PropTypes.func,
|
|
146
148
|
onChannelChange: PropTypes.func,
|
|
147
149
|
currentChannel: PropTypes.string,
|
|
150
|
+
onEmailModeChange: PropTypes.func,
|
|
151
|
+
emailCreateMode: PropTypes.string,
|
|
152
|
+
emailStep: PropTypes.string,
|
|
153
|
+
onEmailNextStep: PropTypes.func,
|
|
148
154
|
};
|
|
149
155
|
export default SlideBoxContent;
|
|
@@ -4,26 +4,28 @@ import { CapButton } from '@capillarytech/cap-ui-library';
|
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import * as constants from './constants';
|
|
6
6
|
function SlideBoxFooter(props) {
|
|
7
|
-
const { slidBoxContent, onSave, messages, onEditTemplate, currentChannel, onEmailNextStep } = props;
|
|
8
|
-
const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL;
|
|
7
|
+
const { slidBoxContent, onSave, messages, onEditTemplate, currentChannel, onEmailNextStep, emailStep, emailCreateMode } = props;
|
|
8
|
+
const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL && emailStep !== 'createTemplate';
|
|
9
9
|
const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
|
|
10
10
|
return (
|
|
11
11
|
<div>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
)}
|
|
17
|
-
{slidBoxContent &&
|
|
18
|
-
<CapButton onClick={onEmailNextStep}>
|
|
19
|
-
<FormattedMessage {...messages.continue} />
|
|
12
|
+
<div>
|
|
13
|
+
{(isCreate) && (
|
|
14
|
+
<CapButton onClick={onSave}>
|
|
15
|
+
<FormattedMessage {...messages.creativesTemplatesSave} />
|
|
20
16
|
</CapButton>
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
)}
|
|
18
|
+
{isEmailCreate && emailCreateMode &&
|
|
19
|
+
<CapButton onClick={onEmailNextStep}>
|
|
20
|
+
<FormattedMessage {...messages.continue} />
|
|
21
|
+
</CapButton>
|
|
22
|
+
}
|
|
23
|
+
{slidBoxContent === 'preview' && (
|
|
24
|
+
<CapButton onClick={onEditTemplate} type="secondary">
|
|
25
|
+
<FormattedMessage {...messages.creativesTemplatesEdit} />
|
|
26
|
+
</CapButton>
|
|
27
|
+
)}
|
|
28
|
+
</div>
|
|
27
29
|
</div>
|
|
28
30
|
);
|
|
29
31
|
}
|
|
@@ -34,5 +36,7 @@ SlideBoxFooter.propTypes = {
|
|
|
34
36
|
onEditTemplate: PropTypes.func,
|
|
35
37
|
currentChannel: PropTypes.string,
|
|
36
38
|
onEmailNextStep: PropTypes.func,
|
|
39
|
+
emailStep: PropTypes.string,
|
|
40
|
+
emailCreateMode: PropTypes.string,
|
|
37
41
|
};
|
|
38
42
|
export default SlideBoxFooter;
|
|
@@ -21,12 +21,17 @@ class Creatives extends React.Component {
|
|
|
21
21
|
constructor(props) {
|
|
22
22
|
super(props);
|
|
23
23
|
this.state = {
|
|
24
|
-
emailStep:
|
|
24
|
+
emailStep: 1, //modeSelection: for selecting upload or editor, and createTemplate to create template create based on modeSelection
|
|
25
25
|
showSlideBox: true,
|
|
26
26
|
slidBoxContent: this.getSlideBocContent({mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode}),
|
|
27
27
|
templateData: this.getTemplateData(props.templateData),
|
|
28
28
|
currentChannel: this.props.channel || 'sms',
|
|
29
29
|
};
|
|
30
|
+
this.creativesEmailSteps = {
|
|
31
|
+
1: 'modeSelection',
|
|
32
|
+
2: 'templateSelection',
|
|
33
|
+
3: 'createTemplate',
|
|
34
|
+
};
|
|
30
35
|
}
|
|
31
36
|
componentWillUnmount() {
|
|
32
37
|
console.log("unmounting creatives");
|
|
@@ -54,7 +59,14 @@ class Creatives extends React.Component {
|
|
|
54
59
|
onChannelChange = (channel) => {
|
|
55
60
|
this.setState({currentChannel: channel});
|
|
56
61
|
}
|
|
57
|
-
|
|
62
|
+
onEmailNextStep = () => {
|
|
63
|
+
this.setState((prevState) => ({
|
|
64
|
+
emailStep: prevState.emailStep + 1,
|
|
65
|
+
}));
|
|
66
|
+
}
|
|
67
|
+
onEmailModeChange = (mode) => {
|
|
68
|
+
this.setState({ emailCreateMode: mode});
|
|
69
|
+
}
|
|
58
70
|
getTemplateData = (templateData) => { //from consumers to creatives
|
|
59
71
|
const {isFullMode} = this.props;
|
|
60
72
|
if (!isFullMode && templateData) { // for component mode
|
|
@@ -113,12 +125,6 @@ class Creatives extends React.Component {
|
|
|
113
125
|
}
|
|
114
126
|
return creativesMode;
|
|
115
127
|
}
|
|
116
|
-
onEmailModeChange = (mode) => {
|
|
117
|
-
this.setState({ emailCreateMode: mode});
|
|
118
|
-
}
|
|
119
|
-
onEmailNextStep = (step) => {
|
|
120
|
-
this.setState({emailStep: step });
|
|
121
|
-
}
|
|
122
128
|
getFormData = (template) => {
|
|
123
129
|
if (template.validity) {
|
|
124
130
|
this.setState(
|
|
@@ -176,7 +182,8 @@ class Creatives extends React.Component {
|
|
|
176
182
|
onChannelChange={this.onChannelChange}
|
|
177
183
|
onEmailModeChange={this.onEmailModeChange}//used when create is clicked in email
|
|
178
184
|
emailCreateMode={emailCreateMode}// upload zip || use editor are values
|
|
179
|
-
emailStep={emailStep}
|
|
185
|
+
emailStep={this.creativesEmailSteps[emailStep]}
|
|
186
|
+
onEmailNextStep={this.onEmailNextStep}
|
|
180
187
|
/>
|
|
181
188
|
}
|
|
182
189
|
footer={
|
|
@@ -187,6 +194,8 @@ class Creatives extends React.Component {
|
|
|
187
194
|
slidBoxContent={slidBoxContent}
|
|
188
195
|
onEmailNextStep={this.onEmailNextStep}
|
|
189
196
|
currentChannel={currentChannel.toUpperCase()}
|
|
197
|
+
emailStep={this.creativesEmailSteps[emailStep]}
|
|
198
|
+
emailCreateMode={emailCreateMode}
|
|
190
199
|
/>
|
|
191
200
|
}
|
|
192
201
|
handleClose={this.toggleShowSlideBox}
|
|
@@ -10,7 +10,7 @@ import React from 'react';
|
|
|
10
10
|
import { connect } from 'react-redux';
|
|
11
11
|
import { bindActionCreators } from 'redux';
|
|
12
12
|
import Helmet from 'react-helmet';
|
|
13
|
-
import { Row, Col, Spin,
|
|
13
|
+
import { Row, Col, Spin, Popover, Modal, Select } from 'antd';
|
|
14
14
|
import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
|
|
15
15
|
import { CapButton, CapInput } from '@capillarytech/cap-react-ui-library';
|
|
16
16
|
import { createStructuredSelector } from 'reselect';
|
|
@@ -1123,11 +1123,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
1123
1123
|
this.setState({currentTab: data, formData, schema});
|
|
1124
1124
|
}
|
|
1125
1125
|
|
|
1126
|
-
onTemplateNameChange = (
|
|
1126
|
+
onTemplateNameChange = () => {
|
|
1127
1127
|
|
|
1128
1128
|
}
|
|
1129
1129
|
|
|
1130
|
-
onTagSelect = (data
|
|
1130
|
+
onTagSelect = (data) => {
|
|
1131
1131
|
const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
|
|
1132
1132
|
const formData = _.cloneDeep(this.state.formData);
|
|
1133
1133
|
const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
|
|
@@ -1148,7 +1148,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
1148
1148
|
}
|
|
1149
1149
|
}
|
|
1150
1150
|
|
|
1151
|
-
onImageSelect = (
|
|
1151
|
+
onImageSelect = () => {
|
|
1152
1152
|
this.setState({ showImageSelectionBox: true }, () => {
|
|
1153
1153
|
const params = {
|
|
1154
1154
|
name: this.state.searchText,
|
|
@@ -1234,7 +1234,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
1234
1234
|
const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
|
|
1235
1235
|
const formData = _.cloneDeep(this.state.formData);
|
|
1236
1236
|
|
|
1237
|
-
const tabIndex = this.state.currentTab + 1;
|
|
1238
1237
|
const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone() : _.cloneDeep(this.state.schema);
|
|
1239
1238
|
const containers = _.cloneDeep(schema.containers.slice());
|
|
1240
1239
|
let tabKey = "";
|
|
@@ -1699,7 +1698,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
1699
1698
|
this.setState({schema, formData, showModal: false});
|
|
1700
1699
|
}
|
|
1701
1700
|
|
|
1702
|
-
initFormData(props
|
|
1701
|
+
initFormData(props) {
|
|
1703
1702
|
let newFormData = {};
|
|
1704
1703
|
if (props.Global.currentOrgDetails && props.Global.currentOrgDetails.basic_details) {
|
|
1705
1704
|
newFormData = {
|
|
@@ -1887,7 +1886,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
1887
1886
|
this.setState({formData});
|
|
1888
1887
|
}
|
|
1889
1888
|
|
|
1890
|
-
handleOnHoverItem = (isHovering
|
|
1889
|
+
handleOnHoverItem = (isHovering) => {
|
|
1891
1890
|
if (!isHovering) {
|
|
1892
1891
|
// const data = _.find(this.props.Email.assetList, {_id: id});
|
|
1893
1892
|
//
|
|
@@ -1944,7 +1943,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
1944
1943
|
showSubject = () => {
|
|
1945
1944
|
const schema = _.cloneDeep(this.state.schema);
|
|
1946
1945
|
if (schema.standalone) {
|
|
1947
|
-
if (
|
|
1946
|
+
if ((this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" || this.props.location.query.module === "coupon_expiry" ||
|
|
1948
1947
|
this.props.location.query.module === "library")) {
|
|
1949
1948
|
schema.standalone.sections[0].inputFields[0].style.display = "";
|
|
1950
1949
|
schema.standalone.sections[0].inputFields[0].labelStyle.display = "";
|
|
@@ -2018,7 +2017,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
2018
2017
|
this.setState({ device });
|
|
2019
2018
|
}
|
|
2020
2019
|
|
|
2021
|
-
handleVersionSelect = (status, formData
|
|
2020
|
+
handleVersionSelect = (status, formData) => {
|
|
2022
2021
|
const newFormData = _.cloneDeep(this.state.formData);
|
|
2023
2022
|
const schema = _.cloneDeep(this.state.schema);
|
|
2024
2023
|
const versionIndex = _.findIndex(formData['template-version-options'], {key: status});
|
|
@@ -2038,7 +2037,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
2038
2037
|
this.setState({formData: newFormData, schema, currentTab: (versionIndex + 1), isSchemaChanged: true});
|
|
2039
2038
|
}
|
|
2040
2039
|
|
|
2041
|
-
afterPaste = (
|
|
2040
|
+
afterPaste = () => {
|
|
2042
2041
|
|
|
2043
2042
|
}
|
|
2044
2043
|
|
|
@@ -2061,11 +2060,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
2061
2060
|
this.setState({showConfirmationModal: true});
|
|
2062
2061
|
}
|
|
2063
2062
|
|
|
2064
|
-
renameVersion = (
|
|
2063
|
+
renameVersion = () => {
|
|
2065
2064
|
|
|
2066
2065
|
}
|
|
2067
2066
|
|
|
2068
|
-
markFinalVersion = (
|
|
2067
|
+
markFinalVersion = () => {
|
|
2069
2068
|
const message = getMessageObject('success', this.props.intl.formatMessage(messages["Template Marked as Final Successfully"]), true);
|
|
2070
2069
|
this.props.globalActions.addMessageToQueue(message);
|
|
2071
2070
|
}
|
|
@@ -2561,7 +2560,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
2561
2560
|
const formData = _.cloneDeep(this.state.formData);
|
|
2562
2561
|
formData[0].selectedLanguages = [];
|
|
2563
2562
|
let tabKey;
|
|
2564
|
-
if (
|
|
2563
|
+
if ((this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
|
|
2565
2564
|
formData['template-subject'] = data.base.subject ? data.base.subject : '';
|
|
2566
2565
|
const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
|
|
2567
2566
|
let languageIndex = _.findIndex(this.supportedLanguages, {iso_code: baseLanguage});
|
|
@@ -7,7 +7,6 @@ import * as types from './constants';
|
|
|
7
7
|
export function* createTemplate(template) {
|
|
8
8
|
let errorMsg;
|
|
9
9
|
try {
|
|
10
|
-
console.log('Template data ', template);
|
|
11
10
|
const result = yield call(Api.createEmailTemplate, template);
|
|
12
11
|
if (result.message || result.status.code === 500) {
|
|
13
12
|
errorMsg = result.message;
|
|
@@ -21,7 +20,6 @@ export function* createTemplate(template) {
|
|
|
21
20
|
export function* duplicateTemplate(id, channel) {
|
|
22
21
|
let errorMsg;
|
|
23
22
|
try {
|
|
24
|
-
console.log('Duplicate template ', id, channel);
|
|
25
23
|
const result = yield call(Api.duplicateTemplate, id, channel );
|
|
26
24
|
if (result.message || result.status.code === 500) {
|
|
27
25
|
errorMsg = result.message;
|
|
@@ -34,7 +32,6 @@ export function* duplicateTemplate(id, channel) {
|
|
|
34
32
|
|
|
35
33
|
export function* getTemplateDetails(id) {
|
|
36
34
|
try {
|
|
37
|
-
console.log('saga get Template details', id);
|
|
38
35
|
const result = yield call(Api.getTemplateDetails, id);
|
|
39
36
|
// const sidebar = result.response.sidebar;
|
|
40
37
|
yield put({ type: types.GET_TEMPLATE_DETAILS_SUCCESS, data: result.response });
|
|
@@ -54,9 +51,8 @@ export function* getAllAssets(assetType, queryParams) {
|
|
|
54
51
|
|
|
55
52
|
export function* getCmsSetting({cmsType, projectId, cmsMode, langId, isEdmSupport}) {
|
|
56
53
|
try {
|
|
57
|
-
console.log('cms sagas', langId);
|
|
58
54
|
const result = yield call(Api.getCmsTemplateSettings, cmsType, projectId, cmsMode, langId, isEdmSupport);
|
|
59
|
-
|
|
55
|
+
|
|
60
56
|
yield put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: result.data.response.cmsDetails });
|
|
61
57
|
} catch (error) {
|
|
62
58
|
yield put({ type: types.GET_CMS_EDITOR_DETAILS_FAILURE, error });
|
|
@@ -66,7 +62,7 @@ export function* getCmsSetting({cmsType, projectId, cmsMode, langId, isEdmSuppor
|
|
|
66
62
|
export function* getCmsData({cmsType, projectId, langId}) {
|
|
67
63
|
try {
|
|
68
64
|
const result = yield call(Api.getCmsTemplateData, cmsType, projectId, langId);
|
|
69
|
-
|
|
65
|
+
|
|
70
66
|
yield put({ type: types.GET_CMS_EDITOR_DATA_SUCCESS, data: result.data.response.data, langId: result.data.response.langId });
|
|
71
67
|
} catch (error) {
|
|
72
68
|
yield put({ type: types.GET_CMS_EDITOR_DATA_FAILURE, error });
|
|
@@ -10,7 +10,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
|
|
|
10
10
|
import { createStructuredSelector } from 'reselect';
|
|
11
11
|
import { bindActionCreators } from 'redux';
|
|
12
12
|
import _ from 'lodash';
|
|
13
|
-
import {
|
|
13
|
+
import { CapRadioCard, CapHeader} from '@capillarytech/cap-ui-library';
|
|
14
14
|
import { UserIsAuthenticated } from '../../utils/authWrapper';
|
|
15
15
|
import {selectEmailLayout, selectCmsTemplates, selectEdmEditor} from '../Templates/selectors';
|
|
16
16
|
import * as templatesActionsCreators from '../Templates/actions';
|
|
@@ -21,13 +21,15 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
|
|
|
21
21
|
constructor(props) {
|
|
22
22
|
super(props);
|
|
23
23
|
this.state = {
|
|
24
|
+
templateName: '',
|
|
24
25
|
routeParams: {
|
|
25
26
|
pathname: `/email/create`,
|
|
26
|
-
query: {},
|
|
27
|
+
query: { module: 'library', type: 'embedded', isEdmSupport: true, isLanguageSupport: true},
|
|
27
28
|
},
|
|
28
29
|
modeContent: {
|
|
29
30
|
|
|
30
31
|
},
|
|
32
|
+
// selectedCreateMode: '',
|
|
31
33
|
|
|
32
34
|
};
|
|
33
35
|
this.modes = [
|
|
@@ -43,19 +45,21 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
|
|
|
43
45
|
},
|
|
44
46
|
];
|
|
45
47
|
}
|
|
48
|
+
|
|
46
49
|
componentDidUpdate() {
|
|
47
|
-
const {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
50
|
+
const {modeContent} = this.state;
|
|
51
|
+
// const isValid = this.isValid();
|
|
52
|
+
const {emailCreateMode, EmailLayout, CmsTemplates, step, SelectedEdmDefaultTemplate} = this.props;
|
|
53
|
+
if (step === "modeSelection" && !this.state.selectedCreateMode && emailCreateMode === 'upload' && !EmailLayout) {
|
|
54
|
+
document.getElementById('upload-email-template').click();
|
|
55
|
+
} else if (step === "templateSelection" && !this.state.selectedCreateMode) {
|
|
56
|
+
if (emailCreateMode === "editor" && !CmsTemplates) {
|
|
52
57
|
this.props.templatesActions.getEdmDefaultTemplates();
|
|
53
58
|
}
|
|
54
|
-
} else if (step === "createTemplate") {
|
|
55
|
-
const {modeContent} = this.state;
|
|
59
|
+
} else if (step === "createTemplate" && !this.state.selectedCreateMode) {
|
|
56
60
|
if (emailCreateMode === 'upload' && !EmailLayout) {
|
|
57
61
|
this.handleFileUpload(modeContent.e, modeContent.files);
|
|
58
|
-
} else if (emailCreateMode === "editor" &&
|
|
62
|
+
} else if (emailCreateMode === "editor" && _.isEmpty(SelectedEdmDefaultTemplate)) {
|
|
59
63
|
this.handleEdmDefaultTemplateSelection(modeContent.id);
|
|
60
64
|
}
|
|
61
65
|
}
|
|
@@ -63,31 +67,33 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
|
|
|
63
67
|
onChange = (e) => {
|
|
64
68
|
this.props.onEmailModeChange( e.target.value );
|
|
65
69
|
};
|
|
70
|
+
onTemplateNameChange = (ev) => {
|
|
71
|
+
this.setState({templateName: ev.target.vale});
|
|
72
|
+
}
|
|
73
|
+
//isValid = () => !_.isEmpty(this.state.templateName)
|
|
74
|
+
setCreateMode = (emailCreateMode) => {
|
|
75
|
+
this.setState({selectedCreateMode: emailCreateMode});
|
|
76
|
+
}
|
|
66
77
|
handleFileUpload = (e, files) => {
|
|
67
|
-
const {
|
|
78
|
+
const { templatesActions } = this.props;
|
|
68
79
|
if (files.length === 0) {
|
|
69
80
|
return;
|
|
70
81
|
}
|
|
82
|
+
this.setCreateMode('upload');
|
|
71
83
|
const fileExtension = files[0].name.split('.').pop();
|
|
72
84
|
const supportedZipFormats = ['zip'];
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
const isEdmSupport = (location.query.isEdmSupport !== "false") || false;
|
|
85
|
+
//TODO: has to be changed based on props.
|
|
86
|
+
|
|
76
87
|
|
|
77
88
|
if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
|
|
78
89
|
templatesActions.handleZipUpload(files[0]);
|
|
79
|
-
document.getElementById("
|
|
90
|
+
document.getElementById("upload-email-template").value = "";
|
|
80
91
|
} else if (fileExtension === 'html' || fileExtension === 'htm') {
|
|
81
92
|
const reader = new FileReader();
|
|
82
93
|
reader.onload = () => {
|
|
83
94
|
const text = reader.result;
|
|
84
95
|
templatesActions.handleHtmlUpload(text);
|
|
85
|
-
document.getElementById("
|
|
86
|
-
const type = location.query.type;
|
|
87
|
-
this.setState({routeParams: {
|
|
88
|
-
pathname: `/email/create`,
|
|
89
|
-
query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
|
|
90
|
-
}});
|
|
96
|
+
document.getElementById("upload-email-template").value = "";
|
|
91
97
|
};
|
|
92
98
|
reader.readAsText(files[0]);
|
|
93
99
|
} else {
|
|
@@ -99,36 +105,35 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
|
|
|
99
105
|
handleEdmDefaultTemplateSelection = (id) => {
|
|
100
106
|
const {CmsTemplates, templatesActions } = this.props;
|
|
101
107
|
const data = _.find(CmsTemplates, {_id: id});
|
|
102
|
-
const module = 'default'; //location.query.module || 'default';
|
|
103
|
-
const isLanguageSupport = true; //location.query.isLanguageSupport || true;
|
|
104
|
-
const isEdmSupport = true; //(location.query.isEdmSupport !== "false") || false;
|
|
105
108
|
|
|
106
109
|
templatesActions.setEdmTemplate(data);
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
pathname: `/email/create`,
|
|
110
|
-
query: getQuery,
|
|
111
|
-
}});
|
|
110
|
+
this.setState({
|
|
111
|
+
selectedCreateMode: 'editor'});
|
|
112
112
|
};
|
|
113
113
|
useFileUpload = (e, {files}) => {
|
|
114
|
-
this.setState({modeContent: {e, files}});
|
|
114
|
+
this.setState({modeContent: {e, files}}, this.props.showNextStep);
|
|
115
115
|
}
|
|
116
116
|
useEditor = (id) => {
|
|
117
|
-
this.setState({modeContent: {id}});
|
|
117
|
+
this.setState({modeContent: {id}}, this.props.showNextStep);
|
|
118
118
|
}
|
|
119
|
+
|
|
120
|
+
isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
|
|
119
121
|
render() {
|
|
120
|
-
const {emailCreateMode, isGetFormData,
|
|
121
|
-
const
|
|
122
|
+
const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step} = this.props;
|
|
123
|
+
const {templateName} = this.state;
|
|
124
|
+
const isShowEmailCreate = this.isShowEmailCreate();
|
|
122
125
|
return (
|
|
123
126
|
<div>
|
|
124
|
-
<input type="file" id="
|
|
127
|
+
<input type="file" id="upload-email-template" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.useFileUpload(event, {files: event.target.files})} />
|
|
125
128
|
|
|
126
|
-
{
|
|
129
|
+
{step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload") ?
|
|
127
130
|
<div>
|
|
128
|
-
<CapInput
|
|
131
|
+
{/* <CapInput
|
|
129
132
|
label={<FormattedMessage {...messages.creativeName}/>}
|
|
130
|
-
|
|
131
|
-
|
|
133
|
+
onChange={this.onTemplateNameChange}
|
|
134
|
+
value={templateName}
|
|
135
|
+
labelPosition="top"/> */}
|
|
136
|
+
<CapHeader size="small" title={<FormattedMessage {...messages.createMode}/>}/>
|
|
132
137
|
<CapRadioCard
|
|
133
138
|
panes={this.modes}
|
|
134
139
|
onChange={this.onChange}
|
|
@@ -143,9 +148,10 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
|
|
|
143
148
|
route={{ name: 'email' }}
|
|
144
149
|
params={{}}
|
|
145
150
|
isGetFormData={isGetFormData}
|
|
146
|
-
getFormdata={
|
|
147
|
-
getFormSubscriptionData={
|
|
151
|
+
getFormdata={getFormdata}
|
|
152
|
+
getFormSubscriptionData={getFormdata}
|
|
148
153
|
getDefaultTags={type}
|
|
154
|
+
defaultData={{templateName}}
|
|
149
155
|
/>}
|
|
150
156
|
{CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor}/>}
|
|
151
157
|
|
|
@@ -160,16 +166,15 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
|
|
|
160
166
|
EmailWrapper.propTypes = {
|
|
161
167
|
onEmailModeChange: PropTypes.func.isRequired,
|
|
162
168
|
isGetFormData: PropTypes.bool,
|
|
163
|
-
getFormData: PropTypes.func,
|
|
164
169
|
type: PropTypes.string,
|
|
165
170
|
emailCreateMode: PropTypes.string,
|
|
166
171
|
EmailLayout: PropTypes.object,
|
|
167
|
-
location: PropTypes.object,
|
|
168
|
-
route: PropTypes.object,
|
|
169
172
|
templatesActions: PropTypes.object,
|
|
170
173
|
CmsTemplates: PropTypes.arrayOf(PropTypes.object),
|
|
171
174
|
SelectedEdmDefaultTemplate: PropTypes.object,
|
|
172
175
|
step: PropTypes.string,
|
|
176
|
+
showNextStep: PropTypes.func,
|
|
177
|
+
getFormdata: PropTypes.func,
|
|
173
178
|
};
|
|
174
179
|
|
|
175
180
|
const mapStateToProps = createStructuredSelector({
|
package/package.json
CHANGED
package/routes.js
CHANGED
|
@@ -557,13 +557,15 @@ export default function createRoutes(store) {
|
|
|
557
557
|
import('containers/Templates/reducer'),
|
|
558
558
|
import('containers/Templates/sagas'),
|
|
559
559
|
import('containers/TemplatesV2'),
|
|
560
|
+
import('containers/Email/sagas'),
|
|
560
561
|
]);
|
|
561
562
|
|
|
562
563
|
const renderRoute = loadModule(cb);
|
|
563
564
|
|
|
564
|
-
importModules.then(([reducer, sagas, component]) => {
|
|
565
|
+
importModules.then(([reducer, sagas, component, emailContainerSagas]) => {
|
|
565
566
|
injectReducer('templates', reducer.default);
|
|
566
567
|
injectSagas(sagas.default);
|
|
568
|
+
injectSagas(emailContainerSagas.default);
|
|
567
569
|
renderRoute(component);
|
|
568
570
|
});
|
|
569
571
|
|