@capillarytech/creatives-library 6.13.9 → 6.14.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 +2 -5
- package/config/app.js +2 -0
- package/containers/Templates/index.js +3 -0
- package/index.js +8 -8
- package/package.json +2 -2
- package/reducers.js +2 -3
- package/routes.js +1 -7
- package/services/api.js +7 -5
- package/utils/common.js +118 -0
- package/v2Components/FormBuilder/index.js +2 -4
- package/v2Components/TemplatePreview/_templatePreview.scss +2 -8
- package/v2Components/TemplatePreview/index.js +18 -104
- package/v2Containers/App/constants.js +2 -2
- package/v2Containers/CreativesContainer/SlideBoxContent.js +19 -66
- package/v2Containers/CreativesContainer/SlideBoxHeader.js +2 -0
- package/v2Containers/CreativesContainer/constants.js +2 -2
- package/v2Containers/CreativesContainer/index.js +12 -38
- package/v2Containers/FTP/_FTP.scss +92 -0
- package/v2Containers/FTP/actions.js +7 -0
- package/v2Containers/FTP/constants.js +3 -0
- package/v2Containers/FTP/index.js +517 -0
- package/v2Containers/FTP/messages.js +60 -0
- package/v2Containers/FTP/reducer.js +32 -0
- package/v2Containers/FTP/sagas.js +26 -0
- package/v2Containers/FTP/selectors.js +20 -0
- package/v2Containers/Templates/_templates.scss +0 -57
- package/v2Containers/Templates/actions.js +110 -117
- package/v2Containers/Templates/constants.js +0 -2
- package/v2Containers/Templates/index.js +6 -86
- package/v2Containers/Templates/messages.js +0 -4
- package/v2Containers/Templates/reducer.js +0 -2
- package/v2Containers/TemplatesV2/index.js +14 -9
- package/v2Containers/TemplatesV2/messages.js +4 -4
- package/v2Containers/WeChat/MapTemplates/index.js +1 -1
- package/assets/viber.png +0 -0
- package/utils/ignoredErrorMessages.js +0 -4
- package/v2Containers/Viber/_viber.scss +0 -3
- package/v2Containers/Viber/actions.js +0 -74
- package/v2Containers/Viber/constants.js +0 -30
- package/v2Containers/Viber/index.js +0 -707
- package/v2Containers/Viber/messages.js +0 -137
- package/v2Containers/Viber/reducer.js +0 -84
- package/v2Containers/Viber/sagas.js +0 -107
- package/v2Containers/Viber/selectors.js +0 -21
package/app.js
CHANGED
|
@@ -25,7 +25,6 @@ import initialState from './initialState';
|
|
|
25
25
|
import './styles/vendor/semantic/dist/semantic.min.css';
|
|
26
26
|
import './styles/main.scss';
|
|
27
27
|
import pathConfig from './config/path';
|
|
28
|
-
import ignoredErrorMessages from './utils/ignoredErrorMessages';
|
|
29
28
|
// addLocaleData([...en, ...es, ...fr, ...it, ...zh]);
|
|
30
29
|
|
|
31
30
|
const browserHistory = useRouterHistory(createHistory)({
|
|
@@ -39,12 +38,10 @@ const history = syncHistoryWithStore(browserHistory, store, {
|
|
|
39
38
|
});
|
|
40
39
|
|
|
41
40
|
const bugSnagErrorCallback = (event) => {
|
|
42
|
-
const { app: { releaseStage } = {}
|
|
43
|
-
const errorMessage = originalError && originalError.message;
|
|
41
|
+
const { app: { releaseStage } = {} } = event || {};
|
|
44
42
|
if (
|
|
45
43
|
(releaseStage || '').includes('nightly') ||
|
|
46
|
-
process.env.NODE_ENV !== 'production'
|
|
47
|
-
ignoredErrorMessages.includes(errorMessage)
|
|
44
|
+
process.env.NODE_ENV !== 'production'
|
|
48
45
|
) {
|
|
49
46
|
return false;
|
|
50
47
|
}
|
package/config/app.js
CHANGED
|
@@ -11,6 +11,7 @@ const config = {
|
|
|
11
11
|
dashboard_url: '/sms',
|
|
12
12
|
dashboard_url_v2: '/v2',
|
|
13
13
|
subscription_api_endpoint: '/arya/api/v1/org-settings/subscription',
|
|
14
|
+
exports_api_endpoint: '/arya/api/v1/export/data',
|
|
14
15
|
accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
|
|
15
16
|
},
|
|
16
17
|
development: {
|
|
@@ -19,6 +20,7 @@ const config = {
|
|
|
19
20
|
auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',
|
|
20
21
|
arya_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1',
|
|
21
22
|
subscription_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/org-settings/subscription',
|
|
23
|
+
exports_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/export/data',
|
|
22
24
|
login_url: '/auth/login',
|
|
23
25
|
dashboard_url: '/sms',
|
|
24
26
|
dashboard_url_v2: '/v2',
|
|
@@ -721,6 +721,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
721
721
|
}
|
|
722
722
|
}
|
|
723
723
|
switch (type) {
|
|
724
|
+
case "getFormData":
|
|
725
|
+
this.getFormData(e);
|
|
726
|
+
break;
|
|
724
727
|
case "startTemplateCreation":
|
|
725
728
|
console.log('Starting to create template');
|
|
726
729
|
//this.getFormData(e);
|
package/index.js
CHANGED
|
@@ -56,6 +56,10 @@ import MobilepushCreate from './v2Containers/MobilePush/Create';
|
|
|
56
56
|
import mobilepushCreateReducer from './v2Containers/MobilePush/Create/reducer';
|
|
57
57
|
import mobilepushCreateSaga from './v2Containers/MobilePush/Create/sagas';
|
|
58
58
|
|
|
59
|
+
import FTP from './v2Containers/FTP';
|
|
60
|
+
import FTPReducer from './v2Containers/FTP/reducer';
|
|
61
|
+
import FTPSagas from './v2Containers/FTP/sagas';
|
|
62
|
+
|
|
59
63
|
import MobilepushEdit from './v2Containers/MobilePush/Edit';
|
|
60
64
|
import mobilepushEditReducer from './v2Containers/MobilePush/Edit/reducer';
|
|
61
65
|
import mobilepushEditSaga from './v2Containers/MobilePush/Edit/sagas';
|
|
@@ -65,10 +69,6 @@ import LineCreate from './v2Containers/Line/Container';
|
|
|
65
69
|
import lineCreateReducer from './v2Containers/Line/Container/reducer';
|
|
66
70
|
import lineCreateSaga from './v2Containers/Line/Container/sagas';
|
|
67
71
|
|
|
68
|
-
import Viber from './v2Containers/Viber';
|
|
69
|
-
import viberReducer from './v2Containers/Viber/reducer';
|
|
70
|
-
import viberSaga from './v2Containers/Viber/sagas';
|
|
71
|
-
|
|
72
72
|
import TemplatesV2 from './v2Containers/TemplatesV2/index';
|
|
73
73
|
|
|
74
74
|
import CreativesContainer from './v2Containers/CreativesContainer';
|
|
@@ -86,7 +86,7 @@ const TemplatesContainer = {Templates, templateReducer, templateSaga};
|
|
|
86
86
|
const SmsCreateContainer = {SmsCreate, smsCreateReducer, smsCreateSaga};
|
|
87
87
|
const SmsEditContainer = {SmsEdit, smsEditReducer, smsEditSaga};
|
|
88
88
|
const EmailContainer = {Email, emailReducer, emailSaga};
|
|
89
|
-
const BeeContainer =
|
|
89
|
+
const BeeContainer ={ BeeEditor,beeReducer,beeSaga}
|
|
90
90
|
const CallTaskContainer = {CallTask, callTaskReducer, callTaskSaga};
|
|
91
91
|
const WeChatMapTemplateContainer = {WeChatMapTemplate, weChatMapTemplateReducer, weChatMapTemplateSaga};
|
|
92
92
|
const WeChatRichMediaCreateContainer = {WeChatRichMediaCreate, weChatRichMediaCreateReducer, weChatRichMediaCreateSaga};
|
|
@@ -96,9 +96,8 @@ const MobilePushEditContainer = {MobilepushEdit, mobilepushEditReducer, mobilepu
|
|
|
96
96
|
const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
|
|
97
97
|
const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
|
|
98
98
|
const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
|
|
99
|
-
const ViberContainer = {Viber, viberReducer, viberSaga};
|
|
100
|
-
|
|
101
99
|
const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
|
|
100
|
+
const FTPContainer = {FTP, FTPReducer, FTPSagas};
|
|
102
101
|
|
|
103
102
|
export {default as TagList} from './v2Containers/TagList/index';
|
|
104
103
|
export {default as TagListSaga} from './v2Containers/TagList/sagas';
|
|
@@ -110,6 +109,7 @@ export {default as CallTaskPreview} from './v2Components/CallTaskPreview';
|
|
|
110
109
|
export {default as EmailMobilePreview} from './v2Components/EmailMobilePreview';
|
|
111
110
|
export {default as MobilePushPreview} from './v2Components/MobilePushPreviewV2';
|
|
112
111
|
export {default as WechatRichmediaTemplatePreview} from './v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
|
|
112
|
+
export {default as FTP} from './v2Containers/FTP';
|
|
113
113
|
|
|
114
114
|
CreativesContainer.CreativesContainerReducer = CreativesContainerReducer;
|
|
115
115
|
|
|
@@ -137,5 +137,5 @@ export { CapContainer,
|
|
|
137
137
|
updateCharCount,
|
|
138
138
|
FacebookContainer,
|
|
139
139
|
GalleryContainer,
|
|
140
|
-
|
|
140
|
+
FTPContainer,
|
|
141
141
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capillarytech/creatives-library",
|
|
3
3
|
"author": "meharaj",
|
|
4
|
-
"version": "6.
|
|
4
|
+
"version": "6.14.1",
|
|
5
5
|
"description": "Capillary creatives ui",
|
|
6
6
|
"main": "./index.js",
|
|
7
7
|
"module": "./index.es.js",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"@babel/polyfill": "7.4.3",
|
|
16
16
|
"@bugsnag/js": "^7.2.1",
|
|
17
17
|
"@bugsnag/plugin-react": "^7.2.1",
|
|
18
|
-
"@capillarytech/cap-ui-utils": "1.3.
|
|
18
|
+
"@capillarytech/cap-ui-utils": "1.3.3",
|
|
19
19
|
"@mailupinc/bee-plugin": "^1.2.0",
|
|
20
20
|
"babel-cli": "^6.26.0",
|
|
21
21
|
"chalk": "1.1.3",
|
package/reducers.js
CHANGED
|
@@ -9,8 +9,6 @@ import { LOCATION_CHANGE } from 'react-router-redux';
|
|
|
9
9
|
|
|
10
10
|
import languageProviderReducer from 'v2Containers/LanguageProvider/reducer';
|
|
11
11
|
import beeEditorReducer from 'v2Containers/BeeEditor/reducer';
|
|
12
|
-
|
|
13
|
-
|
|
14
12
|
import capReducer from 'containers/Cap/reducer';
|
|
15
13
|
import appReducer from 'containers/App/reducer';
|
|
16
14
|
import createSmsReducer from 'containers/Sms/Create/reducer';
|
|
@@ -19,7 +17,7 @@ import templateReducer from 'containers/Templates/reducer';
|
|
|
19
17
|
import tagsReducer from 'containers/TagList/reducer';
|
|
20
18
|
import emailReducer from 'containers/Email/reducer';
|
|
21
19
|
import ebillReducer from 'containers/Ebill/reducer';
|
|
22
|
-
|
|
20
|
+
import ftpReducer from 'v2Containers/FTP/reducer';
|
|
23
21
|
/*
|
|
24
22
|
* routeReducer
|
|
25
23
|
*
|
|
@@ -64,6 +62,7 @@ export default function createReducer(asyncReducers) {
|
|
|
64
62
|
email: emailReducer,
|
|
65
63
|
ebill: ebillReducer,
|
|
66
64
|
beeEditor: beeEditorReducer,
|
|
65
|
+
FTP: ftpReducer,
|
|
67
66
|
...asyncReducers,
|
|
68
67
|
});
|
|
69
68
|
}
|
package/routes.js
CHANGED
|
@@ -598,8 +598,7 @@ export default function createRoutes(store) {
|
|
|
598
598
|
|
|
599
599
|
importModules.catch(errorLoading);
|
|
600
600
|
},
|
|
601
|
-
},
|
|
602
|
-
{
|
|
601
|
+
}, {
|
|
603
602
|
path: '/v2(/:channel)',
|
|
604
603
|
name: 'templatesV2',
|
|
605
604
|
getComponent(nextState, cb) {
|
|
@@ -635,8 +634,6 @@ export default function createRoutes(store) {
|
|
|
635
634
|
import('v2Containers/Facebook/reducer'),
|
|
636
635
|
import('v2Containers/Line/Container/sagas'),
|
|
637
636
|
import('v2Containers/Line/Container/reducer'),
|
|
638
|
-
import('v2Containers/Viber/sagas'),
|
|
639
|
-
import('v2Containers/Viber/reducer'),
|
|
640
637
|
]);
|
|
641
638
|
|
|
642
639
|
const renderRoute = loadModule(cb);
|
|
@@ -657,7 +654,6 @@ export default function createRoutes(store) {
|
|
|
657
654
|
galleryReducer, gallerySagas,
|
|
658
655
|
facebookSagas, facebookReducer,
|
|
659
656
|
lineCreateSagas, lineCreateReducer,
|
|
660
|
-
viberSagas, viberReducer,
|
|
661
657
|
]) => {
|
|
662
658
|
injectReducer('templates', reducer.default);
|
|
663
659
|
injectReducer('cap', capReducer.default);
|
|
@@ -674,7 +670,6 @@ export default function createRoutes(store) {
|
|
|
674
670
|
injectReducer('gallery', galleryReducer.default);
|
|
675
671
|
injectReducer('facebook', facebookReducer.default);
|
|
676
672
|
injectReducer('lineCreate', lineCreateReducer.default);
|
|
677
|
-
injectReducer('viber', viberReducer.default);
|
|
678
673
|
injectSagas(gallerySagas.default);
|
|
679
674
|
injectSagas(sagas.default);
|
|
680
675
|
injectSagas(capSagas.default);
|
|
@@ -690,7 +685,6 @@ export default function createRoutes(store) {
|
|
|
690
685
|
injectSagas(weChatRichmediaTemplatesEditSagas.default);
|
|
691
686
|
injectSagas(facebookSagas.default);
|
|
692
687
|
injectSagas(lineCreateSagas.default);
|
|
693
|
-
injectSagas(viberSagas.default);
|
|
694
688
|
renderRoute(component);
|
|
695
689
|
});
|
|
696
690
|
importModules.catch(errorLoading);
|
package/services/api.js
CHANGED
|
@@ -9,6 +9,7 @@ import getSchema from './getSchema';
|
|
|
9
9
|
import * as API from '../utils/ApiCaller';
|
|
10
10
|
import { GA } from '@capillarytech/cap-ui-utils';
|
|
11
11
|
let API_ENDPOINT = config.development.api_endpoint;
|
|
12
|
+
let EXPORT_API_ENDPOINT = config.development.exports_api_endpoint;
|
|
12
13
|
let CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_endpoint;
|
|
13
14
|
let API_AUTH_ENDPOINT = config.development.auth_endpoint;
|
|
14
15
|
let ARYA_ENDPOINT = config.development.arya_endpoint;
|
|
@@ -213,6 +214,12 @@ export const duplicateTemplate = ({id, channel}) => {
|
|
|
213
214
|
return request(url, getAPICallObject('GET'));
|
|
214
215
|
};
|
|
215
216
|
|
|
217
|
+
export const getFTPServers = () => {
|
|
218
|
+
console.log('in api.js getFTPServers');
|
|
219
|
+
const url = `${EXPORT_API_ENDPOINT}/ftplist`;
|
|
220
|
+
return request(url, getAPICallObject('GET'));
|
|
221
|
+
};
|
|
222
|
+
|
|
216
223
|
export const editWeChatTemplate = ({template}) => {
|
|
217
224
|
console.log('in api.js', template);
|
|
218
225
|
const url = `${API_ENDPOINT}/templates/WECHAT`;
|
|
@@ -358,11 +365,6 @@ export const createLineTemplate = ({template}) => {
|
|
|
358
365
|
return request(url, getAPICallObject('POST', template));
|
|
359
366
|
};
|
|
360
367
|
|
|
361
|
-
export const createViberTemplate = ({template}) => {
|
|
362
|
-
const url = `${API_ENDPOINT}/templates/VIBER`;
|
|
363
|
-
return request(url, getAPICallObject('POST', template));
|
|
364
|
-
};
|
|
365
|
-
|
|
366
368
|
export const getLocizMessage = async (locale) => {
|
|
367
369
|
const appName = 'creatives_v2';
|
|
368
370
|
const url = `${ARYA_ENDPOINT}/translations/${appName}/${locale}`;
|
package/utils/common.js
CHANGED
|
@@ -37,3 +37,121 @@ export const hasStore2DoorFeature = Auth.hasFeatureAccess.bind(
|
|
|
37
37
|
null,
|
|
38
38
|
STORE2DOOR_PLUS_ENABLED,
|
|
39
39
|
);
|
|
40
|
+
|
|
41
|
+
export function getTreeStructuredTags(tagsList, userLocale = 'en') {
|
|
42
|
+
console.log('populating tags', (tagsList || []).length);
|
|
43
|
+
const mainTags = {};
|
|
44
|
+
|
|
45
|
+
//Form tags object with tag headers
|
|
46
|
+
_.forEach(tagsList, (temp) => {
|
|
47
|
+
const tag = temp.definition;
|
|
48
|
+
if (!tag['tag-header']) {
|
|
49
|
+
mainTags[tag.value] = {
|
|
50
|
+
name: tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
|
|
51
|
+
value: tag.value,
|
|
52
|
+
};
|
|
53
|
+
} else if (tag['tag-header'] && mainTags[tag.value]) {
|
|
54
|
+
mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
|
|
55
|
+
} else if (!mainTags[tag.value]) {
|
|
56
|
+
// console.log('Inside ', tag.label);
|
|
57
|
+
mainTags[tag.value] = {
|
|
58
|
+
'tag-header': true,
|
|
59
|
+
"name": tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
|
|
60
|
+
"subtags": tag.subtags,
|
|
61
|
+
"value": tag.value,
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
const mainTagsCloned = _.cloneDeep(mainTags);
|
|
67
|
+
//Insert subtags in tag headers and reomve them from top level
|
|
68
|
+
const result = {};
|
|
69
|
+
_.forEach(mainTagsCloned, (tag, key) => {
|
|
70
|
+
if (tag['tag-header']) {
|
|
71
|
+
const tagWithChildren = populateTagForChildren(tag, mainTagsCloned, key);
|
|
72
|
+
tagWithChildren.resolved = true;
|
|
73
|
+
result[key] = tagWithChildren;
|
|
74
|
+
} else {
|
|
75
|
+
result[key] = tag;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
//Delete extra tag headers
|
|
80
|
+
_.forEach(result, (tag) => {
|
|
81
|
+
if (tag['tag-header']) {
|
|
82
|
+
_.forEach(tag.subtags, (subtag, key) => {
|
|
83
|
+
if (result[key]) {
|
|
84
|
+
result[key].deleted = true;
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
//Actually delete them
|
|
90
|
+
_.forEach(result, (tag, key) => {
|
|
91
|
+
if (tag.deleted) {
|
|
92
|
+
delete result[key];
|
|
93
|
+
}
|
|
94
|
+
});
|
|
95
|
+
return getTreeStructureData(result);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
function populateTagForChildren(targetTag, tagsObject, tagValue) {
|
|
99
|
+
const tag = targetTag;
|
|
100
|
+
if (tag && tag['tag-header'] && !tag.resolved) {
|
|
101
|
+
const tempSubTags = {};
|
|
102
|
+
_.forEach(tag.subtags, (subtag) => {
|
|
103
|
+
if (tagsObject[subtag]) {
|
|
104
|
+
const children = populateTagForChildren(tagsObject[subtag], tagsObject, subtag);
|
|
105
|
+
children.resolved = true;
|
|
106
|
+
tempSubTags[subtag] = children;
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
tag.subtags = tempSubTags;
|
|
110
|
+
return tag;
|
|
111
|
+
}
|
|
112
|
+
return tagsObject[tagValue];
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
function getTreeStructureData(data) {
|
|
116
|
+
const result = [];
|
|
117
|
+
_.forOwn(data, (mainTag) => {
|
|
118
|
+
const { name, value, subtags = [] } = mainTag;
|
|
119
|
+
if (!mainTag['tag-header']) {
|
|
120
|
+
result.push({
|
|
121
|
+
title: name,
|
|
122
|
+
value: `{{${value}}}`,
|
|
123
|
+
});
|
|
124
|
+
} else {
|
|
125
|
+
const obj = {
|
|
126
|
+
title: name,
|
|
127
|
+
value: `{{${value}}}`,
|
|
128
|
+
selectable: false,
|
|
129
|
+
};
|
|
130
|
+
obj.children = getSubTags(subtags);
|
|
131
|
+
result.push(obj);
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
return result;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
function getSubTags(subtagsParam) {
|
|
138
|
+
const result = [];
|
|
139
|
+
_.forOwn(subtagsParam, (subTag) => {
|
|
140
|
+
const { name, value, subtags = [] } = subTag;
|
|
141
|
+
if (_.isEmpty(subtags)) {
|
|
142
|
+
result.push({
|
|
143
|
+
title: name,
|
|
144
|
+
value: `{{${value}}}`,
|
|
145
|
+
});
|
|
146
|
+
} else {
|
|
147
|
+
const obj = {
|
|
148
|
+
title: name,
|
|
149
|
+
value: `{{${value}}}`,
|
|
150
|
+
selectable: false,
|
|
151
|
+
};
|
|
152
|
+
obj.children = getSubTags(subtags);
|
|
153
|
+
result.push(obj);
|
|
154
|
+
}
|
|
155
|
+
});
|
|
156
|
+
return result;
|
|
157
|
+
}
|
|
@@ -2362,9 +2362,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
|
|
|
2362
2362
|
this.renderTextAreaContent(styling, columns, val, isVersionEnable, rows, cols, val.offset);
|
|
2363
2363
|
break;
|
|
2364
2364
|
case "contentPreview":
|
|
2365
|
-
|
|
2366
|
-
const tab = formData && formData[currentTab - 1];
|
|
2367
|
-
content = isVersionEnable ? tab && tab['sms-editor'] : formData && formData['sms-editor'];
|
|
2365
|
+
content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
|
|
2368
2366
|
charList = updateCharCount(content).char_list;
|
|
2369
2367
|
columns.push(<CapColumn id={val.id} className={"preview-chars"} span={val.width}>
|
|
2370
2368
|
{charList.map((char) => char)}
|
|
@@ -3200,7 +3198,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
|
|
|
3200
3198
|
}
|
|
3201
3199
|
}
|
|
3202
3200
|
const { currentTab, formData } = this.state;
|
|
3203
|
-
const supportedLanguages = (formData[currentTab - 1] || {}).selectedLanguages
|
|
3201
|
+
const supportedLanguages = (formData[currentTab - 1] || {}).selectedLanguages;
|
|
3204
3202
|
const currentLang = supportedLanguages[langTab - 1];
|
|
3205
3203
|
|
|
3206
3204
|
let beeJson = '',
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
left: 23%;
|
|
22
22
|
width: 42%;
|
|
23
23
|
height: 336px;
|
|
24
|
+
display: -webkit-box;
|
|
25
|
+
display: -ms-flexbox;
|
|
24
26
|
display: flex;
|
|
25
27
|
|
|
26
28
|
.sms-icon{
|
|
@@ -49,14 +51,6 @@
|
|
|
49
51
|
left: 36px;
|
|
50
52
|
margin-top: -6px;
|
|
51
53
|
}
|
|
52
|
-
}
|
|
53
|
-
&.viber-preview{
|
|
54
|
-
width: 43%;
|
|
55
|
-
.message-pop {
|
|
56
|
-
width: 80%;
|
|
57
|
-
left: 36px;
|
|
58
|
-
margin-top: -6px;
|
|
59
|
-
}
|
|
60
54
|
}
|
|
61
55
|
|
|
62
56
|
.message-pop{
|
|
@@ -16,19 +16,15 @@ import {updateCharCount} from '../../utils/smsCharCountV2';
|
|
|
16
16
|
import messages from './messages';
|
|
17
17
|
import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
|
|
18
18
|
import Carousel from '../Carousel';
|
|
19
|
-
import { VIBER } from '../../v2Containers/App/constants';
|
|
20
19
|
const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
|
|
21
20
|
const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
|
|
22
21
|
const lineMobileAndroid = require('../../assets/line.png');
|
|
23
|
-
const viberMobileAndroid = require('../../assets/viber.png');
|
|
24
|
-
|
|
25
22
|
const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
|
|
26
23
|
const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
|
|
27
24
|
const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
|
|
28
25
|
const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
|
|
29
26
|
const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
|
|
30
|
-
|
|
31
|
-
import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06, CAP_G15, CAP_PURPLE01, CAP_G16 } from '@capillarytech/cap-ui-library/styled/variables';
|
|
27
|
+
import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06 } from '@capillarytech/cap-ui-library/styled/variables';
|
|
32
28
|
import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
|
|
33
29
|
|
|
34
30
|
class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
|
@@ -131,8 +127,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
131
127
|
|
|
132
128
|
render() {
|
|
133
129
|
let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
|
|
134
|
-
const { channel, showTestAndPreviewIcon, module
|
|
135
|
-
const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
|
|
130
|
+
const { channel, showTestAndPreviewIcon, module} = this.props;
|
|
136
131
|
let smsDetails = {};
|
|
137
132
|
// let smsText = '';
|
|
138
133
|
if (this.props.content && this.props.charCounterEnabled) {
|
|
@@ -160,11 +155,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
160
155
|
});
|
|
161
156
|
}
|
|
162
157
|
const disablePreviewAndTest = this.props.channel === 'MOBILEPUSH' ? !this.props.content.header : (this.props.channel === 'SMS' ? !this.props.content : false);
|
|
163
|
-
const showTestAndPreview = showTestAndPreviewIcon &&
|
|
158
|
+
const showTestAndPreview = showTestAndPreviewIcon &&
|
|
164
159
|
channel !== WECHAT &&
|
|
165
160
|
['outbound', 'library'].includes(module);
|
|
166
161
|
|
|
167
|
-
const renderLineMultiText = (content)
|
|
162
|
+
const renderLineMultiText = (content) => {
|
|
168
163
|
let textCount = 0;
|
|
169
164
|
return content.map((item) => {
|
|
170
165
|
const { type, messageContent = '' } = item || {};
|
|
@@ -175,17 +170,12 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
175
170
|
{this.props.intl.formatMessage(messages.textMessageLabel)}
|
|
176
171
|
{textCount}: ({messageContent.length}/{1600} {this.props.intl.formatMessage(messages.textMessageCharacter)})
|
|
177
172
|
</p>
|
|
178
|
-
)
|
|
173
|
+
)
|
|
179
174
|
}
|
|
180
|
-
return null
|
|
175
|
+
return null
|
|
181
176
|
});
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
"padding": '3.5px 0 0',
|
|
185
|
-
'border-radius': '8px',
|
|
186
|
-
'background-color': CAP_G15,
|
|
187
|
-
'width': '79%',
|
|
188
|
-
};
|
|
177
|
+
}
|
|
178
|
+
|
|
189
179
|
const getVideoContent = ({
|
|
190
180
|
video,
|
|
191
181
|
actionUrl,
|
|
@@ -255,7 +245,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
255
245
|
/>
|
|
256
246
|
)
|
|
257
247
|
}
|
|
258
|
-
</div>
|
|
248
|
+
</div>
|
|
259
249
|
);
|
|
260
250
|
|
|
261
251
|
return (
|
|
@@ -403,8 +393,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
403
393
|
marginLeft: 40,
|
|
404
394
|
}}
|
|
405
395
|
>
|
|
406
|
-
<div
|
|
407
|
-
className="sms-icon"
|
|
396
|
+
<div className="sms-icon"
|
|
408
397
|
style={{
|
|
409
398
|
left: 0,
|
|
410
399
|
top: 8,
|
|
@@ -412,7 +401,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
412
401
|
width: 20,
|
|
413
402
|
height: 20,
|
|
414
403
|
background: CAP_COLOR_03,
|
|
415
|
-
paddingRight: 5
|
|
404
|
+
paddingRight: 5
|
|
416
405
|
}}
|
|
417
406
|
>
|
|
418
407
|
{this.props.LineAccountName}
|
|
@@ -475,7 +464,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
475
464
|
},
|
|
476
465
|
}}
|
|
477
466
|
/>
|
|
478
|
-
</div>
|
|
467
|
+
</div>
|
|
479
468
|
);
|
|
480
469
|
}
|
|
481
470
|
if (type === VIDEO) {
|
|
@@ -506,7 +495,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
506
495
|
},
|
|
507
496
|
}}
|
|
508
497
|
/>
|
|
509
|
-
</div>
|
|
498
|
+
</div>
|
|
510
499
|
);
|
|
511
500
|
}
|
|
512
501
|
if (type === STICKER && selectedSticker) {
|
|
@@ -521,7 +510,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
521
510
|
alignItems: 'center',
|
|
522
511
|
}}
|
|
523
512
|
>
|
|
524
|
-
<CapImage
|
|
513
|
+
<CapImage
|
|
525
514
|
src={selectedSticker.stickerUrl}
|
|
526
515
|
style={{maxWidth: '100%', marginBottom: 5 }}
|
|
527
516
|
rest={{
|
|
@@ -530,11 +519,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
530
519
|
marginBottom: 5,
|
|
531
520
|
},
|
|
532
521
|
height: 70,
|
|
533
|
-
onMouseOut:
|
|
534
|
-
onMouseOver:
|
|
522
|
+
onMouseOut: e => (e.currentTarget.src = selectedSticker.stickerUrl),
|
|
523
|
+
onMouseOver: e => (e.currentTarget.src = selectedSticker.animatedStickerUrl || selectedSticker.stickerUrl),
|
|
535
524
|
}}
|
|
536
525
|
/>
|
|
537
|
-
</div>
|
|
526
|
+
</div>
|
|
538
527
|
);
|
|
539
528
|
}
|
|
540
529
|
if ((type === IMAGE_CAROUSEL || type === TEMPLATE) && imageCarousel) {
|
|
@@ -546,7 +535,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
546
535
|
>
|
|
547
536
|
<Carousel imageCarousel={imageCarousel}/>
|
|
548
537
|
</div>
|
|
549
|
-
)
|
|
538
|
+
)
|
|
550
539
|
}
|
|
551
540
|
return null;
|
|
552
541
|
})
|
|
@@ -557,82 +546,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
557
546
|
</div>
|
|
558
547
|
) : ''
|
|
559
548
|
}
|
|
560
|
-
{
|
|
561
|
-
channel && channel.toLowerCase() === VIBER ? (
|
|
562
|
-
<div className="shell-v2 align-center" id="sms-preview">
|
|
563
|
-
<CapImage className="preview-image" src={viberMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
|
|
564
|
-
<div
|
|
565
|
-
className="msgContainer viber-preview"
|
|
566
|
-
style={{
|
|
567
|
-
maxHeight: 292,
|
|
568
|
-
marginLeft: 28,
|
|
569
|
-
}}
|
|
570
|
-
>
|
|
571
|
-
<div
|
|
572
|
-
className="sms-icon"
|
|
573
|
-
style={{
|
|
574
|
-
"width": 20,
|
|
575
|
-
"height": 20,
|
|
576
|
-
"margin": '0 4px 277px 0',
|
|
577
|
-
"padding": '6px 2px 7px 3px',
|
|
578
|
-
'border-radius': '4px',
|
|
579
|
-
'background-color': CAP_PURPLE01,
|
|
580
|
-
'font-size': '6px',
|
|
581
|
-
'font-weight': 900,
|
|
582
|
-
"color": CAP_WHITE,
|
|
583
|
-
}}
|
|
584
|
-
>
|
|
585
|
-
{this.props.viberAccountName}
|
|
586
|
-
</div>
|
|
587
|
-
<div
|
|
588
|
-
className="message-pop align-left"
|
|
589
|
-
style={viberSectionStyle}>
|
|
590
|
-
{/* Text Viber preview */}
|
|
591
|
-
<p
|
|
592
|
-
style={{
|
|
593
|
-
'font-size': '10px',
|
|
594
|
-
"color": CAP_G16,
|
|
595
|
-
"margin": '1.5px 6px 1px 7px',
|
|
596
|
-
}}>{viberMessageContent || ''}
|
|
597
|
-
</p>
|
|
598
|
-
{/* Image Viber preview */}
|
|
599
|
-
{imageURL && <CapImage
|
|
600
|
-
src={imageURL}
|
|
601
|
-
alt="brand-name"
|
|
602
|
-
rest={{
|
|
603
|
-
style: {
|
|
604
|
-
maxWidth: '100%',
|
|
605
|
-
marginBottom: 5,
|
|
606
|
-
},
|
|
607
|
-
}}
|
|
608
|
-
/>
|
|
609
|
-
}
|
|
610
|
-
{/* button viber preview */}
|
|
611
|
-
{buttonText && <div
|
|
612
|
-
style={{
|
|
613
|
-
'border-radius': '16px',
|
|
614
|
-
'background-color': CAP_PURPLE01,
|
|
615
|
-
"margin-top": '14px',
|
|
616
|
-
'text-align': 'center',
|
|
617
|
-
"width": '132px',
|
|
618
|
-
"height": '20px',
|
|
619
|
-
"margin-left": "5px",
|
|
620
|
-
}}>
|
|
621
|
-
<p
|
|
622
|
-
style={{ 'font-size': '12px',
|
|
623
|
-
'font-weight': '500',
|
|
624
|
-
"color": CAP_WHITE }}
|
|
625
|
-
>
|
|
626
|
-
{buttonText || ''}</p>
|
|
627
|
-
</div>
|
|
628
|
-
}
|
|
629
|
-
<div style={{ paddingBottom: 32}}></div>
|
|
630
|
-
</div>
|
|
631
549
|
|
|
632
|
-
</div>
|
|
633
|
-
</div>
|
|
634
|
-
) : ''
|
|
635
|
-
}
|
|
636
550
|
</div>
|
|
637
551
|
|
|
638
552
|
</CapColumn>
|
|
@@ -20,7 +20,7 @@ export const TRACK_CREATE_WECHAT = 'createWeChat';
|
|
|
20
20
|
export const TRACK_CREATE_IMAGE = 'createImage';
|
|
21
21
|
export const TRACK_CREATE_LINE = 'createLine';
|
|
22
22
|
|
|
23
|
-
|
|
23
|
+
|
|
24
24
|
export const TRACK_EDIT_SMS = 'editSms';
|
|
25
25
|
export const TRACK_EDIT_EMAIL = 'editEmail';
|
|
26
26
|
export const TRACK_EDIT_MPUSH = 'editMpush';
|
|
@@ -47,5 +47,5 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
|
|
|
47
47
|
};
|
|
48
48
|
export const GTM_TRACKING_ID = 'UA-110024621-2';
|
|
49
49
|
export const BEE_PLUGIN = 'BEE_PLUGIN';
|
|
50
|
-
|
|
50
|
+
export const NO_COMMUNICATION = 'NO_COMMUNICATION';
|
|
51
51
|
export const CREATIVES_UI_VIEW = 'CREATIVES_UI_VIEW';
|