@capillarytech/creatives-library 3.2.4 → 3.3.1
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/app.js +1 -1
- package/components/FormBuilder/index.js +1 -1
- package/components/Header/index.js +4 -3
- package/components/Header/messages.js +4 -0
- package/config/app.js +2 -0
- package/containers/Assets/Gallery/index.js +1 -1
- package/containers/Cap/index.js +4 -5
- package/containers/Email/index.js +2 -2
- package/containers/Email/messages.js +8 -0
- package/containers/LanguageProvider/index.js +28 -4
- package/containers/Templates/index.js +2 -2
- package/containers/Templates/messages.js +24 -4
- package/containers/WeChat/RichmediaTemplates/Create/messages.js +24 -0
- package/i18n.js +16 -9
- package/index.js +6 -0
- package/package.json +1 -4
- package/reducers.js +1 -1
- package/routes.js +2 -1
- package/services/api.js +11 -2
- package/translations/en.json +120 -63
- package/translations/zh.json +117 -60
- package/utils/smsCharCountV2.js +1 -1
- package/v2Components/CapTagList/index.js +2 -2
- package/v2Components/FormBuilder/index.js +7 -4
- package/v2Components/NavigationBar/index.js +11 -17
- package/v2Components/NavigationBar/messages.js +28 -0
- package/v2Components/NewCallTask/index.js +3 -1
- package/v2Components/TopBar/index.js +3 -0
- package/v2Components/TopBar/messages.js +8 -0
- package/v2Containers/Assets/Gallery/index.js +12 -6
- package/v2Containers/Assets/Gallery/messages.js +4 -0
- package/v2Containers/CallTask/index.js +3 -1
- package/v2Containers/Cap/index.js +3 -2
- package/v2Containers/CreativesContainer/SlideBoxContent.js +14 -1
- package/v2Containers/CreativesContainer/index.js +6 -1
- package/v2Containers/Email/index.js +10 -7
- package/v2Containers/Email/messages.js +16 -0
- package/v2Containers/EmailWrapper/index.js +12 -9
- package/v2Containers/LanguageProvider/actions.js +9 -4
- package/v2Containers/LanguageProvider/constants.js +7 -1
- package/v2Containers/LanguageProvider/index.js +49 -12
- package/v2Containers/LanguageProvider/reducer.js +11 -9
- package/v2Containers/LanguageProvider/selectors.js +1 -1
- package/v2Containers/MobilePush/Create/index.js +2 -1
- package/v2Containers/MobilePush/Create/messages.js +4 -0
- package/v2Containers/MobilePush/Edit/index.js +2 -1
- package/v2Containers/MobilePush/Edit/messages.js +4 -0
- package/v2Containers/Sms/Create/index.js +3 -1
- package/v2Containers/Sms/Create/messages.js +16 -0
- package/v2Containers/Sms/Edit/index.js +3 -1
- package/v2Containers/Sms/Edit/messages.js +16 -0
- package/v2Containers/TagList/index.js +43 -0
- package/v2Containers/Templates/_templates.scss +9 -1
- package/v2Containers/Templates/index.js +66 -53
- package/v2Containers/TemplatesV2/index.js +54 -54
- package/v2Containers/WeChat/MapTemplates/index.js +0 -1
- package/v2Containers/WeChat/MapTemplates/messages.js +1 -1
- package/v2Containers/WeChat/RichmediaTemplates/Create/_createRichmedia.scss +10 -0
- package/v2Containers/WeChat/RichmediaTemplates/Create/actions.js +9 -0
- package/v2Containers/WeChat/RichmediaTemplates/Create/constants.js +3 -0
- package/v2Containers/WeChat/RichmediaTemplates/Create/index.js +146 -4
- package/v2Containers/WeChat/RichmediaTemplates/Create/messages.js +86 -57
- package/v2Containers/WeChat/RichmediaTemplates/Create/reducer.js +24 -1
- package/v2Containers/WeChat/RichmediaTemplates/Create/sagas.js +45 -0
- package/v2Containers/WeChat/RichmediaTemplates/Edit/constants.js +4 -0
- package/v2Containers/WeChat/RichmediaTemplates/Edit/index.js +8 -1
- package/v2Containers/WeChat/Wrapper/_wrapper.scss +9 -1
- package/v2Containers/WeChat/Wrapper/messages.js +5 -5
- package/v2Containers/TemplatesV2/_templatesV2.scss +0 -5
|
@@ -102,4 +102,20 @@ export default defineMessages({
|
|
|
102
102
|
id: 'creatives.containersV2.Edit.templateMarkedSuccessfully',
|
|
103
103
|
defaultMessage: "Template Marked as Final Successfully",
|
|
104
104
|
},
|
|
105
|
+
"Creative name": {
|
|
106
|
+
id: 'creatives.containersV2.Edit.creativeName',
|
|
107
|
+
defaultMessage: 'Creative name',
|
|
108
|
+
},
|
|
109
|
+
"Add label": {
|
|
110
|
+
id: 'creatives.containersV2.Edit.addLabel',
|
|
111
|
+
defaultMessage: 'Add label',
|
|
112
|
+
},
|
|
113
|
+
"sms": {
|
|
114
|
+
id: 'creatives.containersV2.Edit.sms',
|
|
115
|
+
defaultMessage: 'SMS',
|
|
116
|
+
},
|
|
117
|
+
"characters" : {
|
|
118
|
+
id: 'creatives.containersV2.Edit.characters',
|
|
119
|
+
defaultMessage: 'characters',
|
|
120
|
+
},
|
|
105
121
|
});
|
|
@@ -31,6 +31,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
|
|
|
31
31
|
this.populateTags = this.populateTags.bind(this);
|
|
32
32
|
this.populateTagForChildren = this.populateTagForChildren.bind(this);
|
|
33
33
|
this.transformInjectedTags = this.transformInjectedTags.bind(this);
|
|
34
|
+
this.transformCouponTags = this.transformCouponTags.bind(this);
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
componentDidMount() {
|
|
@@ -138,6 +139,44 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
|
|
|
138
139
|
return tagsObject[tagValue];
|
|
139
140
|
}
|
|
140
141
|
|
|
142
|
+
transformCouponTags(offerDetails, allTags) {
|
|
143
|
+
const couponTags = {};
|
|
144
|
+
const couponTagsKeys = Object.keys(_.get(allTags, 'coupon.subtags', []));
|
|
145
|
+
const withCouponId = (obj, id) => {
|
|
146
|
+
const tempObj = {};
|
|
147
|
+
if (obj.subtags) {
|
|
148
|
+
tempObj.subtags = _.mapValues(obj.subtags, (tag) => ({
|
|
149
|
+
...withCouponId(tag, id),
|
|
150
|
+
}));
|
|
151
|
+
}
|
|
152
|
+
return {
|
|
153
|
+
...obj,
|
|
154
|
+
...tempObj,
|
|
155
|
+
couponSeriesId: id,
|
|
156
|
+
};
|
|
157
|
+
};
|
|
158
|
+
offerDetails.forEach((offer) => {
|
|
159
|
+
const { id, couponName } = offer;
|
|
160
|
+
const couponSubTags = {};
|
|
161
|
+
couponTagsKeys.forEach((couponTagKey) => {
|
|
162
|
+
const couponSubTagsObj = withCouponId(allTags.coupon.subtags[couponTagKey], id);
|
|
163
|
+
couponSubTags[couponTagKey] = couponSubTagsObj;
|
|
164
|
+
});
|
|
165
|
+
const key = couponName || id;
|
|
166
|
+
couponTags[key] = {
|
|
167
|
+
'tag-header': true,
|
|
168
|
+
'name': couponName || id,
|
|
169
|
+
'desc': couponName || id,
|
|
170
|
+
'couponSeriesId': id,
|
|
171
|
+
'subtags': couponSubTags,
|
|
172
|
+
'resolved': true,
|
|
173
|
+
'couponTags': true,
|
|
174
|
+
};
|
|
175
|
+
});
|
|
176
|
+
// eslint-disable-next-line no-param-reassign
|
|
177
|
+
allTags.coupon.subtags = couponTags;
|
|
178
|
+
}
|
|
179
|
+
|
|
141
180
|
transformInjectedTags(tags) {
|
|
142
181
|
_.forEach(tags, (tag) => {
|
|
143
182
|
const temp = tag;
|
|
@@ -189,6 +228,9 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
|
|
|
189
228
|
tags = this.populateTags(this.props.tags);
|
|
190
229
|
console.log('populating tags', tags);
|
|
191
230
|
}
|
|
231
|
+
if (this.props.selectedOfferDetails && !_.isEmpty(this.props.selectedOfferDetails) && (tags && tags.coupon)) {
|
|
232
|
+
this.transformCouponTags(this.props.selectedOfferDetails, tags);
|
|
233
|
+
}
|
|
192
234
|
tags = _.merge( {}, tags, injectedTags);
|
|
193
235
|
console.log('merged tags', tags);
|
|
194
236
|
return (
|
|
@@ -220,6 +262,7 @@ TagList.propTypes = {
|
|
|
220
262
|
moduleFilterEnabled: PropTypes.bool,
|
|
221
263
|
className: PropTypes.string,
|
|
222
264
|
userLocale: PropTypes.string,
|
|
265
|
+
selectedOfferDetails: PropTypes.array,
|
|
223
266
|
};
|
|
224
267
|
|
|
225
268
|
const mapStateToProps = createStructuredSelector({
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
|
|
2
|
+
|
|
3
|
+
.ant-tabs-content{
|
|
2
4
|
margin-top: 16px;
|
|
3
5
|
.ant-tabs-tabpane-active{
|
|
4
6
|
padding: unset;
|
|
@@ -16,6 +18,12 @@
|
|
|
16
18
|
}
|
|
17
19
|
}
|
|
18
20
|
|
|
21
|
+
.ant-radio-group.#{cap-radioCard-v2} {
|
|
22
|
+
.ant-radio-button-wrapper {
|
|
23
|
+
border: 1px solid $CAP_G07;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
19
27
|
.card-title {
|
|
20
28
|
line-height: 24px;
|
|
21
29
|
font-size: 14px;
|
|
@@ -54,6 +54,7 @@ import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContai
|
|
|
54
54
|
import emailIllustration from '../Assets/images/emailIllustration.svg';
|
|
55
55
|
import smsIllustration from '../Assets/images/smsIllustration.svg';
|
|
56
56
|
import pushIllustration from '../Assets/images/pushIllustration.svg';
|
|
57
|
+
import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
|
|
57
58
|
|
|
58
59
|
|
|
59
60
|
const {CapCustomCardList} = CapCustomCard;
|
|
@@ -67,6 +68,7 @@ const InlineDiv = styled.div`
|
|
|
67
68
|
}
|
|
68
69
|
`;
|
|
69
70
|
const ACCOUNT_SELECTION_MODE = "accountSelectionMode";
|
|
71
|
+
const ACCOUNT_CHANGE_MODE = 'accountChangeMode';
|
|
70
72
|
const TEMPLATES_MODE = "templatesMode";
|
|
71
73
|
const WECHAT_FILTERS = {
|
|
72
74
|
ALL: 'all',
|
|
@@ -1525,6 +1527,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1525
1527
|
|
|
1526
1528
|
renderAccountSelection = () => {
|
|
1527
1529
|
const accountOptions = [];
|
|
1530
|
+
const { selectedAccount } = this.state;
|
|
1528
1531
|
let { channel = '' } = this.state;
|
|
1529
1532
|
channel = channel.toUpperCase();
|
|
1530
1533
|
const { Templates: templates = {}, location = {} } = this.props;
|
|
@@ -1569,8 +1572,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1569
1572
|
});
|
|
1570
1573
|
}
|
|
1571
1574
|
return (<CapSpin spinning={fetchingWeCrmAccounts}>
|
|
1572
|
-
{isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...messages.noAccountsPresentWeChat} /> :
|
|
1573
|
-
<div style={{overflowX: "auto"}}>
|
|
1575
|
+
{isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...(channel === WECHAT ? messages.noAccountsPresentWeChat : messages.noAccountsPresent)} /> :
|
|
1576
|
+
<div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>
|
|
1574
1577
|
<CapHeader
|
|
1575
1578
|
title={isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}
|
|
1576
1579
|
description={this.props.intl.formatMessage(messages.chooseAccount)}
|
|
@@ -1584,7 +1587,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1584
1587
|
cardHeight="48px"
|
|
1585
1588
|
cardWidth="276px"
|
|
1586
1589
|
size="small"
|
|
1587
|
-
|
|
1590
|
+
defaultValue={selectedAccount}
|
|
1591
|
+
selected={selectedAccount}
|
|
1592
|
+
/>
|
|
1588
1593
|
</div>
|
|
1589
1594
|
}
|
|
1590
1595
|
</CapSpin>);
|
|
@@ -1594,18 +1599,23 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1594
1599
|
this.setState({activeMode: ACCOUNT_SELECTION_MODE});
|
|
1595
1600
|
}
|
|
1596
1601
|
|
|
1602
|
+
setAccountChangeMode = () => {
|
|
1603
|
+
this.setState({activeMode: ACCOUNT_CHANGE_MODE});
|
|
1604
|
+
}
|
|
1605
|
+
|
|
1597
1606
|
setTemplatesMode = () => {
|
|
1598
1607
|
this.setState({activeMode: TEMPLATES_MODE});
|
|
1599
1608
|
}
|
|
1600
1609
|
|
|
1601
1610
|
showAccountName = () => {
|
|
1602
|
-
const { selectedAccount, channel } = this.state;
|
|
1611
|
+
const { activeMode, selectedAccount, channel } = this.state;
|
|
1603
1612
|
const { Templates: templates = {}} = this.props;
|
|
1604
1613
|
const { weCrmAccounts = []} = templates;
|
|
1605
1614
|
const isMobilePushChannel = channel === MOBILE_PUSH;
|
|
1606
|
-
return (
|
|
1615
|
+
return (activeMode !== ACCOUNT_CHANGE_MODE &&
|
|
1616
|
+
<CapHeader
|
|
1607
1617
|
title={<CapHeading type="h4">{isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}</CapHeading>}
|
|
1608
|
-
description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.
|
|
1618
|
+
description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountChangeMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
|
|
1609
1619
|
size="regular"
|
|
1610
1620
|
/>);
|
|
1611
1621
|
}
|
|
@@ -1691,63 +1701,66 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1691
1701
|
const {route} = this.props;
|
|
1692
1702
|
const loadingTip = (this.props.Templates.sendingFile && (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) ? this.props.intl.formatMessage(messages.uploadingFile) : this.props.intl.formatMessage(messages.gettingAllTemplates);
|
|
1693
1703
|
return (
|
|
1694
|
-
|
|
1695
|
-
|
|
1704
|
+
<>
|
|
1705
|
+
{activeMode === ACCOUNT_CHANGE_MODE && this.renderAccountSelection()}
|
|
1706
|
+
<div className={`creatives-templates-list ${this.props.isFullMode ? 'full-mode' : 'library-mode'}`}>
|
|
1707
|
+
<input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
|
|
1696
1708
|
|
|
1697
1709
|
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1710
|
+
<CapRow>
|
|
1711
|
+
<Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
|
|
1712
|
+
{this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
|
|
1713
|
+
</Pagination>
|
|
1714
|
+
{(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
|
|
1703
1715
|
<div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
|
|
1704
1716
|
<CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
|
|
1705
1717
|
</div>}
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1718
|
+
</CapRow>
|
|
1719
|
+
|
|
1720
|
+
|
|
1721
|
+
<CapRow>
|
|
1722
|
+
{!isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
|
|
1723
|
+
<CreativesContainer
|
|
1724
|
+
key={creativesParams.mode}
|
|
1725
|
+
messageDetails={{type: "default"}}
|
|
1726
|
+
creativesMode={creativesParams.mode}
|
|
1727
|
+
messages={messages}
|
|
1728
|
+
isFullMode={isFullMode}
|
|
1729
|
+
templateData={creativesParams}
|
|
1730
|
+
getCreativesData={() => { this.onCreateComplete(true); }}
|
|
1731
|
+
channel={route.name.toUpperCase()}
|
|
1732
|
+
handleCloseCreatives={this.onCreateComplete}
|
|
1733
|
+
selectedWeChatAccount={get(this.props, 'Templates.selectedWeChatAccount', {})}
|
|
1722
1734
|
/>
|
|
1723
1735
|
}
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1736
|
+
</CapRow>
|
|
1737
|
+
<CapRow>
|
|
1738
|
+
|
|
1739
|
+
{(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
|
|
1740
|
+
header={previewHeader}
|
|
1741
|
+
content={htmlPreviewContent}
|
|
1742
|
+
show={this.state.showHtmlPreview}
|
|
1743
|
+
device={this.state.device}
|
|
1744
|
+
handleClose={this.toggleEmailPreview}
|
|
1745
|
+
changePreviewDevice={this.changePreviewDevice}
|
|
1746
|
+
versions={get(this.state, 'previewTemplate.versions', {})}
|
|
1747
|
+
lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
|
|
1748
|
+
updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
|
|
1737
1749
|
/>}
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1750
|
+
<CapSlideBox
|
|
1751
|
+
header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
|
|
1752
|
+
width={60}
|
|
1753
|
+
content={cmsTemplateSelectionContent}
|
|
1754
|
+
show={this.state.showEdmEmailTemplates}
|
|
1755
|
+
handleClose={this.toggleEdmEmailTemplateSelection}
|
|
1756
|
+
loadingText={"Loading EDM Templates"}
|
|
1757
|
+
isLoading={this.props.Templates.getCmsTemplatesInProgress}
|
|
1746
1758
|
/>
|
|
1747
|
-
|
|
1748
|
-
|
|
1759
|
+
{this.renderDeleteConfirmationModal()}
|
|
1760
|
+
</CapRow>
|
|
1749
1761
|
|
|
1750
|
-
|
|
1762
|
+
</div>
|
|
1763
|
+
</>
|
|
1751
1764
|
);
|
|
1752
1765
|
}
|
|
1753
1766
|
|
|
@@ -5,18 +5,16 @@
|
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
|
-
|
|
9
8
|
import React from 'react';
|
|
10
9
|
import { connect } from 'react-redux';
|
|
11
10
|
import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
|
|
12
11
|
import { createStructuredSelector } from 'reselect';
|
|
13
12
|
import { bindActionCreators } from 'redux';
|
|
14
|
-
import styled from 'styled-components';
|
|
15
13
|
import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
|
|
16
14
|
import { find, get } from 'lodash';
|
|
15
|
+
import isEmpty from 'lodash/isEmpty';
|
|
17
16
|
import Helmet from 'react-helmet';
|
|
18
17
|
|
|
19
|
-
import {CAP_SPACE_24, CAP_SPACE_16} from '@capillarytech/cap-ui-library/styled/variables';
|
|
20
18
|
import { UserIsAuthenticated } from '../../utils/authWrapper';
|
|
21
19
|
import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/selectors';
|
|
22
20
|
import messages from './messages';
|
|
@@ -24,33 +22,17 @@ import * as actions from './actions';
|
|
|
24
22
|
import Templates from '../Templates';
|
|
25
23
|
import CallTask from '../CallTask';
|
|
26
24
|
import Gallery from '../Assets/Gallery';
|
|
27
|
-
import '
|
|
25
|
+
import withStyles from '../../hoc/withStyles';
|
|
26
|
+
import styles, { CapTabStyle } from './TemplatesV2.style';
|
|
28
27
|
|
|
29
28
|
const {CapCustomCardList} = CapCustomCard;
|
|
30
29
|
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
max-width: 1140px;
|
|
34
|
-
margin: 0 auto;
|
|
35
|
-
width: 100%;
|
|
36
|
-
padding: ${CAP_SPACE_24} 0;
|
|
37
|
-
.ant-tabs-content{
|
|
38
|
-
margin-top: ${CAP_SPACE_16}
|
|
39
|
-
}
|
|
40
|
-
` : `.cap-tab-v2 {
|
|
41
|
-
height: calc(100vh - 118px);
|
|
42
|
-
} `}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
`;
|
|
46
|
-
const MarginTop = styled.div`
|
|
47
|
-
${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
|
|
48
|
-
}
|
|
49
|
-
`;
|
|
30
|
+
const StyledCapTab = withStyles(CapTab, CapTabStyle);
|
|
31
|
+
|
|
50
32
|
export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
|
51
33
|
constructor(props) {
|
|
52
34
|
super(props);
|
|
53
|
-
|
|
35
|
+
let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
|
|
54
36
|
const defaultPanes = {
|
|
55
37
|
sms: {content: <div></div>, tab: props.intl.formatMessage(messages.sms), key: 'sms'},
|
|
56
38
|
email: {content: <div></div>, tab: props.intl.formatMessage(messages.email), key: 'email'},
|
|
@@ -59,8 +41,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
59
41
|
mPush: {content: <div></div>, tab: props.intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
|
|
60
42
|
};
|
|
61
43
|
const channelsToHide = this.props.channelsToHide || [];
|
|
62
|
-
|
|
63
|
-
|
|
44
|
+
const channelsToDisable = this.props.channelsToDisable || [];
|
|
45
|
+
let filteredPanes = Object.keys(defaultPanes)
|
|
64
46
|
.filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
|
|
65
47
|
obj.push(defaultPanes[key]);
|
|
66
48
|
return obj;
|
|
@@ -72,11 +54,31 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
72
54
|
filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.callTask), key: 'call_task'});
|
|
73
55
|
}
|
|
74
56
|
|
|
57
|
+
filteredPanes = filteredPanes.map( (pane) => {
|
|
58
|
+
if (channelsToDisable.includes(pane.key)) {
|
|
59
|
+
pane.disabled = true;
|
|
60
|
+
}
|
|
61
|
+
return pane;
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
const channel = ['sms', 'email', 'mobilepush', 'call_task'];
|
|
65
|
+
if (!isEmpty(channelsToDisable)) {
|
|
66
|
+
channel.some((ch) => {
|
|
67
|
+
if (!channelsToDisable.includes(ch)) {
|
|
68
|
+
defaultChannel = ch;
|
|
69
|
+
return true;
|
|
70
|
+
}
|
|
71
|
+
return false;
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
|
|
75
75
|
const panes = this.setChannelContent(defaultChannel, filteredPanes);
|
|
76
|
+
|
|
76
77
|
this.state = {
|
|
77
78
|
selectedChannel: defaultChannel,
|
|
78
79
|
panes,
|
|
79
80
|
};
|
|
81
|
+
!props.isFullMode && this.props.onChannelChange(defaultChannel);
|
|
80
82
|
}
|
|
81
83
|
componentWillReceiveProps(nextProps) {
|
|
82
84
|
if (this.props.channel !== nextProps.channel) {
|
|
@@ -147,21 +149,20 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
147
149
|
}
|
|
148
150
|
}
|
|
149
151
|
|
|
150
|
-
setChannelContent = (selectedChannel, argsPanes) =>
|
|
151
|
-
|
|
152
|
-
|
|
152
|
+
setChannelContent = (selectedChannel, argsPanes) => (
|
|
153
|
+
argsPanes.map((pane) => {
|
|
154
|
+
let content = null;
|
|
153
155
|
if (pane.key === selectedChannel) {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
channel = "mobilepush";
|
|
157
|
-
}
|
|
158
|
-
pane.content = this.getTemplatesComponent(channel);
|
|
159
|
-
return pane;
|
|
156
|
+
const channel = selectedChannel === "mpush" ? "mobilepush" : selectedChannel;
|
|
157
|
+
content = this.getTemplatesComponent(channel);
|
|
160
158
|
}
|
|
161
|
-
return {
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
159
|
+
return {
|
|
160
|
+
...pane,
|
|
161
|
+
content,
|
|
162
|
+
};
|
|
163
|
+
})
|
|
164
|
+
);
|
|
165
|
+
|
|
165
166
|
channelChange = (selectedChannel) => {
|
|
166
167
|
const panes = this.setChannelContent(selectedChannel, this.state.panes);
|
|
167
168
|
this.setState({panes, selectedChannel}, () => { if (!this.props.isFullMode) this.props.onChannelChange(selectedChannel); });
|
|
@@ -172,28 +173,25 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
172
173
|
return this.props.Templates.loadingTemplates;
|
|
173
174
|
}
|
|
174
175
|
render() {
|
|
175
|
-
const {isFullMode} = this.props;
|
|
176
|
+
const { isFullMode, className } = this.props;
|
|
176
177
|
return (
|
|
177
|
-
<div className={
|
|
178
|
+
<div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
|
|
178
179
|
{isFullMode && <Helmet
|
|
179
180
|
title={this.props.intl.formatMessage(messages.creatives)}
|
|
180
181
|
meta={[
|
|
181
182
|
{ name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
|
|
182
183
|
]}
|
|
183
184
|
/>}
|
|
184
|
-
<
|
|
185
|
-
|
|
185
|
+
<div className="component-wrapper">
|
|
186
186
|
{isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
|
|
187
|
-
<
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
</ComponentWrapper>
|
|
187
|
+
<StyledCapTab
|
|
188
|
+
panes={this.state.panes}
|
|
189
|
+
onChange={this.channelChange}
|
|
190
|
+
activeKey={this.state.selectedChannel}
|
|
191
|
+
defaultActiveKey={this.state.selectedChannel}
|
|
192
|
+
isFullMode={isFullMode}
|
|
193
|
+
/>
|
|
194
|
+
</div>
|
|
197
195
|
</div>
|
|
198
196
|
|
|
199
197
|
);
|
|
@@ -213,6 +211,8 @@ TemplatesV2.propTypes = {
|
|
|
213
211
|
intl: intlShape,
|
|
214
212
|
onChannelChange: PropTypes.func,
|
|
215
213
|
channelsToHide: PropTypes.array,
|
|
214
|
+
className: PropTypes.string.isRequired,
|
|
215
|
+
channelsToDisable: PropTypes.array,
|
|
216
216
|
};
|
|
217
217
|
|
|
218
218
|
TemplatesV2.defaultProps = {
|
|
@@ -230,4 +230,4 @@ function mapDispatchToProps(dispatch) {
|
|
|
230
230
|
};
|
|
231
231
|
}
|
|
232
232
|
|
|
233
|
-
export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(TemplatesV2)));
|
|
233
|
+
export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(TemplatesV2, styles))));
|
|
@@ -426,7 +426,6 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
|
|
|
426
426
|
|
|
427
427
|
getFormData(formData) {
|
|
428
428
|
let { editTemplateData} = this.state;
|
|
429
|
-
const { formData: stateFormData } = this.state;
|
|
430
429
|
const selectedWeChatAccount = (!isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.WeChat.selectedWeChatAccount);
|
|
431
430
|
if (isEmpty(editTemplateData)) {
|
|
432
431
|
editTemplateData = formData;
|
|
@@ -60,7 +60,7 @@ export default defineMessages({
|
|
|
60
60
|
},
|
|
61
61
|
"wechatEditSuccess": {
|
|
62
62
|
id: 'creatives.containersV2.WeChat.wechatEditSuccess',
|
|
63
|
-
defaultMessage: "WeChat template
|
|
63
|
+
defaultMessage: "WeChat template edited successfully",
|
|
64
64
|
},
|
|
65
65
|
"wechatCreateSuccess": {
|
|
66
66
|
id: 'creatives.containersV2.WeChat.wechatCreateSuccess',
|
|
@@ -59,6 +59,16 @@
|
|
|
59
59
|
border-bottom-left-radius: 4px;
|
|
60
60
|
border-bottom-right-radius: 4px;
|
|
61
61
|
}
|
|
62
|
+
|
|
63
|
+
.existing-template-title-card {
|
|
64
|
+
padding: 12px;
|
|
65
|
+
background-color: white;
|
|
66
|
+
height: 44px;
|
|
67
|
+
width: 244px;
|
|
68
|
+
border-bottom-left-radius: 4px;
|
|
69
|
+
border-bottom-right-radius: 4px;
|
|
70
|
+
}
|
|
71
|
+
|
|
62
72
|
.custom-image {
|
|
63
73
|
position: relative;
|
|
64
74
|
.name-container {
|
|
@@ -10,6 +10,15 @@ export function defaultAction() {
|
|
|
10
10
|
type: types.DEFAULT_ACTION,
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
|
+
|
|
14
|
+
export function getAllTemplates(channel, queryParams) {
|
|
15
|
+
return {
|
|
16
|
+
type: types.GET_ALL_TEMPLATES_REQUEST,
|
|
17
|
+
channel,
|
|
18
|
+
queryParams,
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
|
|
13
22
|
export function uploadAsset(file, assetType, fileParams, mode, wechatParams, contentId, uploadId) {
|
|
14
23
|
return {
|
|
15
24
|
type: types.UPLOAD_ASSET_REQUEST,
|
|
@@ -13,3 +13,6 @@ export const SAVE_TEMPLATE_REQUEST = 'app/v2Containers/Wechat/RichmediaTemplates
|
|
|
13
13
|
export const SAVE_TEMPLATE_SUCCESS = 'app/v2Containers/Wechat/RichmediaTemplates/Create/SAVE_TEMPLATE_SUCCESS';
|
|
14
14
|
export const SAVE_TEMPLATE_FAILURE = 'app/v2Containers/Wechat/RichmediaTemplates/Create/SAVE_TEMPLATE_FAILURE';
|
|
15
15
|
export const CLEAR_CONTENT_ASSET = 'app/v2Containers/Wechat/RichmediaTemplates/Create/CLEAR_CONTENT_ASSET';
|
|
16
|
+
export const GET_ALL_TEMPLATES_REQUEST = 'app/v2Containers/Wechat/RichmediaTemplates/Create/GET_ALL_TEMPLATES_REQUEST';
|
|
17
|
+
export const GET_ALL_TEMPLATES_SUCCESS = 'app/v2Containers/Wechat/RichmediaTemplates/Create/GET_ALL_TEMPLATES_SUCCESS';
|
|
18
|
+
export const GET_ALL_TEMPLATES_FAILURE = 'app/v2Containers/Wechat/RichmediaTemplates/Create/GET_ALL_TEMPLATES_FAILURE';
|