@capillarytech/creatives-library 6.13.3 → 6.13.4
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/assets/viber.png +0 -0
- package/components/FormBuilder/index.js +2 -6
- package/containers/Ebill/index.js +0 -3
- package/containers/Email/index.js +8 -16
- package/containers/Sms/Create/index.js +1 -2
- package/index.js +8 -1
- package/package.json +2 -2
- package/reducers.js +2 -0
- package/routes.js +7 -1
- package/services/api.js +6 -0
- package/v2Components/FormBuilder/index.js +3 -5
- package/v2Components/TemplatePreview/_templatePreview.scss +8 -2
- package/v2Components/TemplatePreview/index.js +100 -17
- package/v2Containers/Cap/index.js +9 -30
- package/v2Containers/CreativesContainer/SlideBoxContent.js +65 -2
- package/v2Containers/CreativesContainer/constants.js +2 -0
- package/v2Containers/CreativesContainer/index.js +29 -2
- package/v2Containers/Templates/_templates.scss +57 -0
- package/v2Containers/Templates/index.js +54 -5
- package/v2Containers/TemplatesV2/index.js +12 -1
- package/v2Containers/TemplatesV2/messages.js +4 -0
- package/v2Containers/Viber/_viber.scss +3 -0
- package/v2Containers/Viber/actions.js +74 -0
- package/v2Containers/Viber/constants.js +30 -0
- package/v2Containers/Viber/index.js +700 -0
- package/v2Containers/Viber/messages.js +137 -0
- package/v2Containers/Viber/reducer.js +84 -0
- package/v2Containers/Viber/sagas.js +107 -0
- package/v2Containers/Viber/selectors.js +21 -0
- package/v2Containers/WeChat/MapTemplates/index.js +1 -1
- package/utils/ignoredErrorMessages.js +0 -4
- package/v2Containers/Line/Create/_lineCreate.scss +0 -64
- package/v2Containers/Line/Create/actions.js +0 -94
- package/v2Containers/Line/Create/constants.js +0 -43
- package/v2Containers/Line/Create/index.js +0 -1112
- package/v2Containers/Line/Create/initialSchema.js +0 -378
- package/v2Containers/Line/Create/messages.js +0 -229
- package/v2Containers/Line/Create/reducer.js +0 -99
- package/v2Containers/Line/Create/sagas.js +0 -113
- package/v2Containers/Line/Create/selectors.js +0 -30
- package/v2Containers/Line/CreateWrapper/constants.js +0 -2
- package/v2Containers/Line/CreateWrapper/index.js +0 -117
- package/v2Containers/Line/CreateWrapper/messages.js +0 -55
- package/v2Containers/Line/Edit/_lineEdit.scss +0 -23
- package/v2Containers/Line/Edit/actions.js +0 -79
- package/v2Containers/Line/Edit/constants.js +0 -27
- package/v2Containers/Line/Edit/index.js +0 -1051
- package/v2Containers/Line/Edit/messages.js +0 -173
- package/v2Containers/Line/Edit/reducer.js +0 -83
- package/v2Containers/Line/Edit/sagas.js +0 -81
- package/v2Containers/Line/Edit/selectors.js +0 -29
- package/v2Containers/Line/Edit/tests/actions.test.js +0 -18
- package/v2Containers/Line/Edit/tests/index.test.js +0 -10
- package/v2Containers/Line/Edit/tests/reducer.test.js +0 -9
- package/v2Containers/Line/Edit/tests/sagas.test.js +0 -15
- package/v2Containers/Line/Edit/tests/selectors.test.js +0 -10
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 = error && error.message;
|
|
41
|
+
const { app: { releaseStage } = {} } = event || {};
|
|
44
42
|
if (
|
|
45
43
|
(releaseStage || '').includes('nightly') ||
|
|
46
|
-
process.env.NODE_ENV !== 'production'
|
|
47
|
-
ignoredErrorMessages.include[errorMessage]
|
|
44
|
+
process.env.NODE_ENV !== 'production'
|
|
48
45
|
) {
|
|
49
46
|
return false;
|
|
50
47
|
}
|
package/assets/viber.png
ADDED
|
Binary file
|
|
@@ -204,9 +204,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
|
|
|
204
204
|
|
|
205
205
|
if (!_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData)) {
|
|
206
206
|
if (nextProps.isNewVersionFlow) {
|
|
207
|
-
const
|
|
208
|
-
const nextPropsTabKey = nextPropsFormData && nextPropsFormData.tabKey;
|
|
209
|
-
const tabKey = (this.state.tabKey !== nextPropsTabKey) ? nextPropsTabKey: this.state.tabKey;
|
|
207
|
+
const tabKey = (this.state.tabKey !== nextProps.formData[nextProps.currentTab - 1].tabKey) ? nextProps.formData[nextProps.currentTab - 1].tabKey : this.state.tabKey;
|
|
210
208
|
|
|
211
209
|
this.setState({tabKey});
|
|
212
210
|
}
|
|
@@ -1843,9 +1841,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
|
|
|
1843
1841
|
formData.base.tabKey = `${data}`;
|
|
1844
1842
|
}
|
|
1845
1843
|
|
|
1846
|
-
|
|
1847
|
-
const formDataTabKey = formDataActiveKey && formDataActiveKey.tabKey;
|
|
1848
|
-
that.setState({formData, currentLangTab: formData[(this.state.currentTab - 1)].activeTab, tabKey: formDataTabKey}, () => {
|
|
1844
|
+
that.setState({formData, currentLangTab: formData[(this.state.currentTab - 1)].activeTab, tabKey: formData[(this.state.currentTab - 1)][formData[(this.state.currentTab - 1)].activeTab].tabKey}, () => {
|
|
1849
1845
|
val.injectedEvents[event].call(that.props.parent, this.state.currentTab, formData);
|
|
1850
1846
|
});
|
|
1851
1847
|
} else {
|
|
@@ -908,9 +908,6 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
|
|
|
908
908
|
injectEvents(schema) {
|
|
909
909
|
console.log('now injecting events', schema);
|
|
910
910
|
const temp = schema;
|
|
911
|
-
if (!temp.standalone) {
|
|
912
|
-
temp.standalone = {};
|
|
913
|
-
}
|
|
914
911
|
temp.standalone.sections = this.injectSections(temp.standalone.sections);
|
|
915
912
|
_.forEach(temp.containers, (container) => {
|
|
916
913
|
let tempContainer = container;
|
|
@@ -1155,11 +1155,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
1155
1155
|
const msgString = JSON.stringify(msg);
|
|
1156
1156
|
const langId = formData[this.state.currentTab - 1].activeTab;
|
|
1157
1157
|
const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
|
|
1158
|
-
const
|
|
1159
|
-
|
|
1160
|
-
const win = elementToSelect.contentWindow;
|
|
1161
|
-
win.postMessage(msgString, '*');
|
|
1162
|
-
}
|
|
1158
|
+
const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
|
|
1159
|
+
win.postMessage(msgString, '*');
|
|
1163
1160
|
} else {
|
|
1164
1161
|
console.log('tag', this.state, this.state.editorInstanse);
|
|
1165
1162
|
if (this.state.editorInstanse) {
|
|
@@ -1418,8 +1415,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
1418
1415
|
|
|
1419
1416
|
getMappedEvent = (id, event) => {
|
|
1420
1417
|
console.log('Map ', this.map, id, event);
|
|
1421
|
-
|
|
1422
|
-
return mapIdObject && mapIdObject[event] ? mapIdObject[event] : () => {};
|
|
1418
|
+
return this.map[id][event];
|
|
1423
1419
|
}
|
|
1424
1420
|
|
|
1425
1421
|
getCurrentWindow = (e) => {
|
|
@@ -1515,11 +1511,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
1515
1511
|
_.forEach(data.selectedLanguages, (language, langIndex) => {
|
|
1516
1512
|
if (data[language].is_drag_drop) {
|
|
1517
1513
|
console.log('saving edm template', document.getElementById("edmeditor"), `edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
|
|
1518
|
-
const
|
|
1519
|
-
|
|
1520
|
-
const win = elementToSelect.contentWindow;
|
|
1521
|
-
win.postMessage("saveProject", '*');
|
|
1522
|
-
}
|
|
1514
|
+
const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
|
|
1515
|
+
win.postMessage("saveProject", '*');
|
|
1523
1516
|
}
|
|
1524
1517
|
});
|
|
1525
1518
|
});
|
|
@@ -2508,7 +2501,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
2508
2501
|
const tempEl = containerInputFieldCol;
|
|
2509
2502
|
if (containerInputFieldCol.id === "tab-header") {
|
|
2510
2503
|
const baseLanguage = this.props.Global.currentOrgDetails && this.props.Global.currentOrgDetails.basic_details && this.props.Global.currentOrgDetails.basic_details.base_language && this.props.Global.currentOrgDetails.basic_details.base_language !== "" ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en';
|
|
2511
|
-
const supportedLanguages = this.props.Global.currentOrgDetails
|
|
2504
|
+
const supportedLanguages = this.props.Global.currentOrgDetails.basic_details.supported_languages;
|
|
2512
2505
|
if (!supportedLanguages) {
|
|
2513
2506
|
tempEl.value = baseLanguage || 'English';
|
|
2514
2507
|
return;
|
|
@@ -2662,13 +2655,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
|
|
|
2662
2655
|
if (languageIndex === -1) {
|
|
2663
2656
|
languageIndex = 0;
|
|
2664
2657
|
}
|
|
2665
|
-
const dataBase = data.base;
|
|
2666
2658
|
const tempData = {
|
|
2667
|
-
"is_drag_drop":
|
|
2659
|
+
"is_drag_drop": data.base.is_drag_drop,
|
|
2668
2660
|
"lang_id": this.supportedLanguages[languageIndex].lang_id,
|
|
2669
2661
|
"iso_code": this.supportedLanguages[languageIndex].iso_code,
|
|
2670
2662
|
"language": this.supportedLanguages[languageIndex].language,
|
|
2671
|
-
"template-content":
|
|
2663
|
+
"template-content": !data.base.is_drag_drop && data.base.is_drag_drop !== 1 ? data.base.html_content : "",
|
|
2672
2664
|
};
|
|
2673
2665
|
formData[0].base = true;
|
|
2674
2666
|
formData[0].selectedLanguages.push(this.supportedLanguages[languageIndex].iso_code);
|
|
@@ -297,8 +297,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
|
|
|
297
297
|
onTabChange: this.onTabChange,
|
|
298
298
|
},
|
|
299
299
|
};
|
|
300
|
-
|
|
301
|
-
return mappedIdObject && mappedIdObject[event] ? mappedIdObject[event] : () => {};
|
|
300
|
+
return map[id][event];
|
|
302
301
|
}
|
|
303
302
|
|
|
304
303
|
setFormValidity(isFormValid) {
|
package/index.js
CHANGED
|
@@ -65,6 +65,10 @@ import LineCreate from './v2Containers/Line/Container';
|
|
|
65
65
|
import lineCreateReducer from './v2Containers/Line/Container/reducer';
|
|
66
66
|
import lineCreateSaga from './v2Containers/Line/Container/sagas';
|
|
67
67
|
|
|
68
|
+
import Viber from './v2Containers/Viber';
|
|
69
|
+
import viberReducer from './v2Containers/Viber/reducer';
|
|
70
|
+
import viberSaga from './v2Containers/Viber/sagas';
|
|
71
|
+
|
|
68
72
|
import TemplatesV2 from './v2Containers/TemplatesV2/index';
|
|
69
73
|
|
|
70
74
|
import CreativesContainer from './v2Containers/CreativesContainer';
|
|
@@ -82,7 +86,7 @@ const TemplatesContainer = {Templates, templateReducer, templateSaga};
|
|
|
82
86
|
const SmsCreateContainer = {SmsCreate, smsCreateReducer, smsCreateSaga};
|
|
83
87
|
const SmsEditContainer = {SmsEdit, smsEditReducer, smsEditSaga};
|
|
84
88
|
const EmailContainer = {Email, emailReducer, emailSaga};
|
|
85
|
-
const BeeContainer ={ BeeEditor,beeReducer,beeSaga}
|
|
89
|
+
const BeeContainer = { BeeEditor, beeReducer, beeSaga};
|
|
86
90
|
const CallTaskContainer = {CallTask, callTaskReducer, callTaskSaga};
|
|
87
91
|
const WeChatMapTemplateContainer = {WeChatMapTemplate, weChatMapTemplateReducer, weChatMapTemplateSaga};
|
|
88
92
|
const WeChatRichMediaCreateContainer = {WeChatRichMediaCreate, weChatRichMediaCreateReducer, weChatRichMediaCreateSaga};
|
|
@@ -92,6 +96,8 @@ const MobilePushEditContainer = {MobilepushEdit, mobilepushEditReducer, mobilepu
|
|
|
92
96
|
const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
|
|
93
97
|
const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
|
|
94
98
|
const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
|
|
99
|
+
const ViberContainer = {Viber, viberReducer, viberSaga};
|
|
100
|
+
|
|
95
101
|
const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
|
|
96
102
|
|
|
97
103
|
export {default as TagList} from './v2Containers/TagList/index';
|
|
@@ -131,4 +137,5 @@ export { CapContainer,
|
|
|
131
137
|
updateCharCount,
|
|
132
138
|
FacebookContainer,
|
|
133
139
|
GalleryContainer,
|
|
140
|
+
ViberContainer,
|
|
134
141
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@capillarytech/creatives-library",
|
|
3
3
|
"author": "meharaj",
|
|
4
|
-
"version": "6.13.
|
|
4
|
+
"version": "6.13.4",
|
|
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.2",
|
|
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,6 +9,8 @@ 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
|
+
|
|
12
14
|
import capReducer from 'containers/Cap/reducer';
|
|
13
15
|
import appReducer from 'containers/App/reducer';
|
|
14
16
|
import createSmsReducer from 'containers/Sms/Create/reducer';
|
package/routes.js
CHANGED
|
@@ -598,7 +598,8 @@ export default function createRoutes(store) {
|
|
|
598
598
|
|
|
599
599
|
importModules.catch(errorLoading);
|
|
600
600
|
},
|
|
601
|
-
},
|
|
601
|
+
},
|
|
602
|
+
{
|
|
602
603
|
path: '/v2(/:channel)',
|
|
603
604
|
name: 'templatesV2',
|
|
604
605
|
getComponent(nextState, cb) {
|
|
@@ -634,6 +635,8 @@ export default function createRoutes(store) {
|
|
|
634
635
|
import('v2Containers/Facebook/reducer'),
|
|
635
636
|
import('v2Containers/Line/Container/sagas'),
|
|
636
637
|
import('v2Containers/Line/Container/reducer'),
|
|
638
|
+
import('v2Containers/Viber/sagas'),
|
|
639
|
+
import('v2Containers/Viber/reducer'),
|
|
637
640
|
]);
|
|
638
641
|
|
|
639
642
|
const renderRoute = loadModule(cb);
|
|
@@ -654,6 +657,7 @@ export default function createRoutes(store) {
|
|
|
654
657
|
galleryReducer, gallerySagas,
|
|
655
658
|
facebookSagas, facebookReducer,
|
|
656
659
|
lineCreateSagas, lineCreateReducer,
|
|
660
|
+
viberSagas, viberReducer,
|
|
657
661
|
]) => {
|
|
658
662
|
injectReducer('templates', reducer.default);
|
|
659
663
|
injectReducer('cap', capReducer.default);
|
|
@@ -670,6 +674,7 @@ export default function createRoutes(store) {
|
|
|
670
674
|
injectReducer('gallery', galleryReducer.default);
|
|
671
675
|
injectReducer('facebook', facebookReducer.default);
|
|
672
676
|
injectReducer('lineCreate', lineCreateReducer.default);
|
|
677
|
+
injectReducer('viber', viberReducer.default);
|
|
673
678
|
injectSagas(gallerySagas.default);
|
|
674
679
|
injectSagas(sagas.default);
|
|
675
680
|
injectSagas(capSagas.default);
|
|
@@ -685,6 +690,7 @@ export default function createRoutes(store) {
|
|
|
685
690
|
injectSagas(weChatRichmediaTemplatesEditSagas.default);
|
|
686
691
|
injectSagas(facebookSagas.default);
|
|
687
692
|
injectSagas(lineCreateSagas.default);
|
|
693
|
+
injectSagas(viberSagas.default);
|
|
688
694
|
renderRoute(component);
|
|
689
695
|
});
|
|
690
696
|
importModules.catch(errorLoading);
|
package/services/api.js
CHANGED
|
@@ -358,6 +358,12 @@ export const createLineTemplate = ({template}) => {
|
|
|
358
358
|
return request(url, getAPICallObject('POST', template));
|
|
359
359
|
};
|
|
360
360
|
|
|
361
|
+
export const createViberTemplate = ({template}) => {
|
|
362
|
+
console.log('VIBER : in api.js', template);
|
|
363
|
+
const url = `${API_ENDPOINT}/templates/VIBER`;
|
|
364
|
+
return request(url, getAPICallObject('POST', template));
|
|
365
|
+
};
|
|
366
|
+
|
|
361
367
|
export const getLocizMessage = async (locale) => {
|
|
362
368
|
const appName = 'creatives_v2';
|
|
363
369
|
const url = `${ARYA_ENDPOINT}/translations/${appName}/${locale}`;
|
|
@@ -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)}
|
|
@@ -3177,7 +3175,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
|
|
|
3177
3175
|
}
|
|
3178
3176
|
console.log('CKEditor Data 2', this.state.formData, this.state.formData[`${this.state.currentTab - 1}`], val, this.state.currentTab, this.state.currentLangTab, langIndex);
|
|
3179
3177
|
const currentLang = ((!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage) || 'en';
|
|
3180
|
-
const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`]
|
|
3178
|
+
const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] ? this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] : '');
|
|
3181
3179
|
columns.push(
|
|
3182
3180
|
<CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
|
|
3183
3181
|
<CKEditor
|
|
@@ -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 =
|
|
3201
|
+
const supportedLanguages = formData[currentTab - 1].selectedLanguages;
|
|
3204
3202
|
const currentLang = supportedLanguages[langTab - 1];
|
|
3205
3203
|
|
|
3206
3204
|
let beeJson = '',
|
|
@@ -21,8 +21,6 @@
|
|
|
21
21
|
left: 23%;
|
|
22
22
|
width: 42%;
|
|
23
23
|
height: 336px;
|
|
24
|
-
display: -webkit-box;
|
|
25
|
-
display: -ms-flexbox;
|
|
26
24
|
display: flex;
|
|
27
25
|
|
|
28
26
|
.sms-icon{
|
|
@@ -51,6 +49,14 @@
|
|
|
51
49
|
left: 36px;
|
|
52
50
|
margin-top: -6px;
|
|
53
51
|
}
|
|
52
|
+
}
|
|
53
|
+
&.viber-preview{
|
|
54
|
+
width: 43%;
|
|
55
|
+
.message-pop {
|
|
56
|
+
width: 80%;
|
|
57
|
+
left: 36px;
|
|
58
|
+
margin-top: -6px;
|
|
59
|
+
}
|
|
54
60
|
}
|
|
55
61
|
|
|
56
62
|
.message-pop{
|
|
@@ -19,12 +19,14 @@ import Carousel from '../Carousel';
|
|
|
19
19
|
const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
|
|
20
20
|
const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
|
|
21
21
|
const lineMobileAndroid = require('../../assets/line.png');
|
|
22
|
+
const viberMobileAndroid = require('../../assets/viber.png');
|
|
23
|
+
|
|
22
24
|
const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
|
|
23
25
|
const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
|
|
24
26
|
const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
|
|
25
27
|
const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
|
|
26
28
|
const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
|
|
27
|
-
import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06 } from '@capillarytech/cap-ui-library/styled/variables';
|
|
29
|
+
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';
|
|
28
30
|
import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
|
|
29
31
|
|
|
30
32
|
class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
|
@@ -155,11 +157,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
155
157
|
});
|
|
156
158
|
}
|
|
157
159
|
const disablePreviewAndTest = this.props.channel === 'MOBILEPUSH' ? !this.props.content.header : (this.props.channel === 'SMS' ? !this.props.content : false);
|
|
158
|
-
const showTestAndPreview = showTestAndPreviewIcon &&
|
|
160
|
+
const showTestAndPreview = showTestAndPreviewIcon &&
|
|
159
161
|
channel !== WECHAT &&
|
|
160
162
|
['outbound', 'library'].includes(module);
|
|
161
163
|
|
|
162
|
-
const renderLineMultiText = (content)
|
|
164
|
+
const renderLineMultiText = (content) => {
|
|
163
165
|
let textCount = 0;
|
|
164
166
|
return content.map((item) => {
|
|
165
167
|
const { type, messageContent = '' } = item || {};
|
|
@@ -170,12 +172,17 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
170
172
|
{this.props.intl.formatMessage(messages.textMessageLabel)}
|
|
171
173
|
{textCount}: ({messageContent.length}/{1600} {this.props.intl.formatMessage(messages.textMessageCharacter)})
|
|
172
174
|
</p>
|
|
173
|
-
)
|
|
175
|
+
);
|
|
174
176
|
}
|
|
175
|
-
return null
|
|
177
|
+
return null;
|
|
176
178
|
});
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
+
};
|
|
180
|
+
const viberSectionStyle = {
|
|
181
|
+
"padding": '3.5px 0 0',
|
|
182
|
+
'border-radius': '8px',
|
|
183
|
+
'background-color': CAP_G15,
|
|
184
|
+
'width': '79%',
|
|
185
|
+
};
|
|
179
186
|
const getVideoContent = ({
|
|
180
187
|
video,
|
|
181
188
|
actionUrl,
|
|
@@ -245,7 +252,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
245
252
|
/>
|
|
246
253
|
)
|
|
247
254
|
}
|
|
248
|
-
</div>
|
|
255
|
+
</div>
|
|
249
256
|
);
|
|
250
257
|
|
|
251
258
|
return (
|
|
@@ -393,7 +400,8 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
393
400
|
marginLeft: 40,
|
|
394
401
|
}}
|
|
395
402
|
>
|
|
396
|
-
<div
|
|
403
|
+
<div
|
|
404
|
+
className="sms-icon"
|
|
397
405
|
style={{
|
|
398
406
|
left: 0,
|
|
399
407
|
top: 8,
|
|
@@ -401,7 +409,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
401
409
|
width: 20,
|
|
402
410
|
height: 20,
|
|
403
411
|
background: CAP_COLOR_03,
|
|
404
|
-
paddingRight: 5
|
|
412
|
+
paddingRight: 5,
|
|
405
413
|
}}
|
|
406
414
|
>
|
|
407
415
|
{this.props.LineAccountName}
|
|
@@ -464,7 +472,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
464
472
|
},
|
|
465
473
|
}}
|
|
466
474
|
/>
|
|
467
|
-
</div>
|
|
475
|
+
</div>
|
|
468
476
|
);
|
|
469
477
|
}
|
|
470
478
|
if (type === VIDEO) {
|
|
@@ -495,7 +503,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
495
503
|
},
|
|
496
504
|
}}
|
|
497
505
|
/>
|
|
498
|
-
</div>
|
|
506
|
+
</div>
|
|
499
507
|
);
|
|
500
508
|
}
|
|
501
509
|
if (type === STICKER && selectedSticker) {
|
|
@@ -510,7 +518,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
510
518
|
alignItems: 'center',
|
|
511
519
|
}}
|
|
512
520
|
>
|
|
513
|
-
<CapImage
|
|
521
|
+
<CapImage
|
|
514
522
|
src={selectedSticker.stickerUrl}
|
|
515
523
|
style={{maxWidth: '100%', marginBottom: 5 }}
|
|
516
524
|
rest={{
|
|
@@ -519,11 +527,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
519
527
|
marginBottom: 5,
|
|
520
528
|
},
|
|
521
529
|
height: 70,
|
|
522
|
-
onMouseOut: e => (e.currentTarget.src = selectedSticker.stickerUrl),
|
|
523
|
-
onMouseOver: e => (e.currentTarget.src = selectedSticker.animatedStickerUrl ||
|
|
530
|
+
onMouseOut: (e) => (e.currentTarget.src = selectedSticker.stickerUrl),
|
|
531
|
+
onMouseOver: (e) => (e.currentTarget.src = selectedSticker.animatedStickerUrl || selectedSticker.stickerUrl),
|
|
524
532
|
}}
|
|
525
533
|
/>
|
|
526
|
-
</div>
|
|
534
|
+
</div>
|
|
527
535
|
);
|
|
528
536
|
}
|
|
529
537
|
if ((type === IMAGE_CAROUSEL || type === TEMPLATE) && imageCarousel) {
|
|
@@ -535,7 +543,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
535
543
|
>
|
|
536
544
|
<Carousel imageCarousel={imageCarousel}/>
|
|
537
545
|
</div>
|
|
538
|
-
)
|
|
546
|
+
);
|
|
539
547
|
}
|
|
540
548
|
return null;
|
|
541
549
|
})
|
|
@@ -546,7 +554,82 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
|
|
|
546
554
|
</div>
|
|
547
555
|
) : ''
|
|
548
556
|
}
|
|
557
|
+
{
|
|
558
|
+
channel && channel.toLowerCase() === 'viber' ? (
|
|
559
|
+
<div className="shell-v2 align-center" id="sms-preview">
|
|
560
|
+
<CapImage className="preview-image" src={viberMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
|
|
561
|
+
<div
|
|
562
|
+
className="msgContainer viber-preview"
|
|
563
|
+
style={{
|
|
564
|
+
maxHeight: 292,
|
|
565
|
+
marginLeft: 28,
|
|
566
|
+
}}
|
|
567
|
+
>
|
|
568
|
+
<div
|
|
569
|
+
className="sms-icon"
|
|
570
|
+
style={{
|
|
571
|
+
"width": 20,
|
|
572
|
+
"height": 20,
|
|
573
|
+
"margin": '0 4px 277px 0',
|
|
574
|
+
"padding": '6px 2px 7px 3px',
|
|
575
|
+
'border-radius': '4px',
|
|
576
|
+
'background-color': CAP_PURPLE01,
|
|
577
|
+
'font-size': '6px',
|
|
578
|
+
'font-weight': 900,
|
|
579
|
+
"color": CAP_WHITE,
|
|
580
|
+
}}
|
|
581
|
+
>
|
|
582
|
+
{this.props.viberAccountName}
|
|
583
|
+
</div>
|
|
584
|
+
<div
|
|
585
|
+
className="message-pop align-left"
|
|
586
|
+
style={viberSectionStyle}>
|
|
587
|
+
{/* Text Viber preview */}
|
|
588
|
+
<p
|
|
589
|
+
style={{
|
|
590
|
+
'font-size': '10px',
|
|
591
|
+
"color": CAP_G16,
|
|
592
|
+
"margin": '1.5px 6px 1px 7px',
|
|
593
|
+
}}>{this.props.content.messageContent || ''}
|
|
594
|
+
</p>
|
|
595
|
+
{/* Image Viber preview */}
|
|
596
|
+
{this.props.content.imageURL && <CapImage
|
|
597
|
+
src={this.props.content.imageURL}
|
|
598
|
+
alt="brand-name"
|
|
599
|
+
rest={{
|
|
600
|
+
style: {
|
|
601
|
+
maxWidth: '100%',
|
|
602
|
+
marginBottom: 5,
|
|
603
|
+
},
|
|
604
|
+
}}
|
|
605
|
+
/>
|
|
606
|
+
}
|
|
607
|
+
{/* button viber preview */}
|
|
608
|
+
{this.props.content.buttonText && <div
|
|
609
|
+
style={{
|
|
610
|
+
'border-radius': '16px',
|
|
611
|
+
'background-color': CAP_PURPLE01,
|
|
612
|
+
"margin-top": '14px',
|
|
613
|
+
'text-align': 'center',
|
|
614
|
+
"width": '132px',
|
|
615
|
+
"height": '20px',
|
|
616
|
+
"margin-left": "5px",
|
|
617
|
+
}}>
|
|
618
|
+
<p
|
|
619
|
+
style={{ 'font-size': '12px',
|
|
620
|
+
'font-weight': '500',
|
|
621
|
+
"color": CAP_WHITE }}
|
|
622
|
+
>
|
|
623
|
+
{this.props.content.buttonText || ''}</p>
|
|
624
|
+
</div>
|
|
625
|
+
}
|
|
626
|
+
<div style={{ paddingBottom: 32}}></div>
|
|
627
|
+
</div>
|
|
549
628
|
|
|
629
|
+
</div>
|
|
630
|
+
</div>
|
|
631
|
+
) : ''
|
|
632
|
+
}
|
|
550
633
|
</div>
|
|
551
634
|
|
|
552
635
|
</CapColumn>
|
|
@@ -33,7 +33,7 @@ import './_cap.scss';
|
|
|
33
33
|
const gtm = window.dataLayer || [];
|
|
34
34
|
const {
|
|
35
35
|
logNewTab,
|
|
36
|
-
|
|
36
|
+
getOrgNameFromId,
|
|
37
37
|
tabBeforeUnloadEventHandler,
|
|
38
38
|
utilsHandleStorageChange,
|
|
39
39
|
isMultipleTabsOpen,
|
|
@@ -297,36 +297,18 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
|
|
|
297
297
|
}
|
|
298
298
|
};
|
|
299
299
|
|
|
300
|
-
getOrgNameFromId = orgId => {
|
|
301
|
-
const {
|
|
302
|
-
Global: {
|
|
303
|
-
user: {
|
|
304
|
-
proxyOrgList,
|
|
305
|
-
orgName: defaultOrgName,
|
|
306
|
-
orgID: defaultOrgID,
|
|
307
|
-
} = {},
|
|
308
|
-
} = {},
|
|
309
|
-
} = this.props;
|
|
310
|
-
return utilsGetOrgNameFromId(
|
|
311
|
-
orgId,
|
|
312
|
-
proxyOrgList,
|
|
313
|
-
defaultOrgID,
|
|
314
|
-
defaultOrgName,
|
|
315
|
-
);
|
|
316
|
-
};
|
|
317
|
-
|
|
318
300
|
renderOrgRefreshModal = () => {
|
|
319
301
|
const {
|
|
320
302
|
localStorageOrgInfo: { oldValue: oldOrgId, newValue: newOrgId } = {},
|
|
321
303
|
showRefreshModal,
|
|
322
304
|
refreshSeconds,
|
|
323
305
|
} = this.state;
|
|
324
|
-
const {
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
306
|
+
const {
|
|
307
|
+
Global: { user: { proxyOrgList } = {} } = {},
|
|
308
|
+
intl: { formatMessage } = {},
|
|
309
|
+
} = this.props;
|
|
310
|
+
const oldOrgName = getOrgNameFromId(Number(oldOrgId), proxyOrgList);
|
|
311
|
+
const newOrgName = getOrgNameFromId(Number(newOrgId), proxyOrgList);
|
|
330
312
|
const modalData = (
|
|
331
313
|
<CapModal
|
|
332
314
|
title={formatMessage(messages.orgRefreshHeading)}
|
|
@@ -357,15 +339,12 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
|
|
|
357
339
|
renderOrgChangeModal = () => {
|
|
358
340
|
const { selectedOrgId, showOrgChangeModal } = this.state;
|
|
359
341
|
const {
|
|
360
|
-
Global: {
|
|
342
|
+
Global: { user: { proxyOrgList } = {},
|
|
361
343
|
currentOrgDetails: { basic_details: { name: oldOrgName } = {} } = {},
|
|
362
344
|
},
|
|
363
345
|
intl: { formatMessage } = {},
|
|
364
346
|
} = this.props;
|
|
365
|
-
const newOrgName =
|
|
366
|
-
// some users do not have entry for their default org in proxyOrgList.
|
|
367
|
-
// getOrgNameFromId returns back orgID if no matching entry is present in proxyOrgList
|
|
368
|
-
// so replacing with defaultOrgName if defaultOrgID is returned
|
|
347
|
+
const newOrgName = getOrgNameFromId(selectedOrgId, proxyOrgList);
|
|
369
348
|
return (
|
|
370
349
|
<CapModal
|
|
371
350
|
className="change-org-confirm"
|