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