@capillarytech/creatives-library 7.6.12 → 7.7.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/index.js +3 -3
- package/package.json +1 -1
- package/v2Components/TemplatePreview/index.js +0 -1
- package/v2Containers/CapFacebookPreview/index.js +3 -5
- package/v2Containers/CreativesContainer/SlideBoxContent.js +1 -16
- package/v2Containers/CreativesContainer/index.js +12 -122
- package/v2Containers/Facebook/Advertisement/index.js +36 -72
- package/v2Containers/Facebook/Advertisement/index.scss +1 -1
- package/v2Containers/Facebook/Facebook.style.js +1 -1
- package/v2Containers/Facebook/constants.js +0 -4
- package/v2Containers/Facebook/index.js +122 -198
- package/v2Containers/Facebook/messages.js +4 -24
- package/v2Containers/Templates/index.js +24 -37
- package/v2Containers/Templates/reducer.js +1 -1
- package/v2Containers/TemplatesV2/index.js +6 -23
- package/v2Containers/TemplatesV2/messages.js +0 -4
package/index.js
CHANGED
|
@@ -76,8 +76,8 @@ import viberSaga from './v2Containers/Viber/sagas';
|
|
|
76
76
|
import TemplatesV2 from './v2Containers/TemplatesV2/index';
|
|
77
77
|
|
|
78
78
|
import FacebookPreview from './v2Containers/CapFacebookPreview';
|
|
79
|
-
import
|
|
80
|
-
import
|
|
79
|
+
import FacebookPreviewReducer from './v2Containers/CapFacebookPreview/reducer';
|
|
80
|
+
import FacebookPreviewSaga from './v2Containers/CapFacebookPreview/sagas';
|
|
81
81
|
|
|
82
82
|
import CreativesContainer from './v2Containers/CreativesContainer';
|
|
83
83
|
import CreativesContainerReducer from './v2Containers/CreativesContainer/reducer';
|
|
@@ -105,7 +105,7 @@ const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
|
|
|
105
105
|
const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
|
|
106
106
|
const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
|
|
107
107
|
const ViberContainer = {Viber, viberReducer, viberSaga};
|
|
108
|
-
const FacebookPreviewContainer = { FacebookPreview,
|
|
108
|
+
const FacebookPreviewContainer = { FacebookPreview, FacebookPreviewReducer, FacebookPreviewSaga };
|
|
109
109
|
|
|
110
110
|
const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
|
|
111
111
|
const FTPContainer = {FTP, FTPReducer, FTPSagas};
|
package/package.json
CHANGED
|
@@ -45,7 +45,6 @@ export const CapFacebookPreview = (props) => {
|
|
|
45
45
|
orgUnitFacebookPageSettingsMap = {},
|
|
46
46
|
accessToken,
|
|
47
47
|
accountId,
|
|
48
|
-
defaultGeneratePreview,
|
|
49
48
|
} = props;
|
|
50
49
|
const {
|
|
51
50
|
formatMessage,
|
|
@@ -295,10 +294,11 @@ export const CapFacebookPreview = (props) => {
|
|
|
295
294
|
<iframe
|
|
296
295
|
src={src}
|
|
297
296
|
key={random}
|
|
297
|
+
scrolling="yes"
|
|
298
298
|
style={{border: "none"}}
|
|
299
299
|
width={width}
|
|
300
|
-
scrolling="yes"
|
|
301
300
|
height={height}
|
|
301
|
+
loading="lazy"
|
|
302
302
|
/>
|
|
303
303
|
</>);
|
|
304
304
|
};
|
|
@@ -317,9 +317,6 @@ export const CapFacebookPreview = (props) => {
|
|
|
317
317
|
|
|
318
318
|
useEffect(() => {
|
|
319
319
|
facebookPreviewActions.clearPreview();
|
|
320
|
-
if (defaultGeneratePreview) {
|
|
321
|
-
generatePreview();
|
|
322
|
-
}
|
|
323
320
|
}, []);
|
|
324
321
|
|
|
325
322
|
useEffect(() => {
|
|
@@ -338,6 +335,7 @@ export const CapFacebookPreview = (props) => {
|
|
|
338
335
|
setDisableAfterPreviewGenerate(false);
|
|
339
336
|
}
|
|
340
337
|
}, [previewIframeError]);
|
|
338
|
+
|
|
341
339
|
return (
|
|
342
340
|
<CapSpin spinning={isFetchingPreview}>
|
|
343
341
|
<div style={{display: 'inline-block'}}>
|
|
@@ -137,10 +137,6 @@ function SlideBoxContent(props) {
|
|
|
137
137
|
handleClose,
|
|
138
138
|
onFTPSubmit,
|
|
139
139
|
campaignSettings,
|
|
140
|
-
messageStrategy,
|
|
141
|
-
fbAdManager,
|
|
142
|
-
showDisabledFBInfo,
|
|
143
|
-
orgUnitId,
|
|
144
140
|
} = props;
|
|
145
141
|
const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
|
|
146
142
|
const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
|
|
@@ -338,9 +334,6 @@ function SlideBoxContent(props) {
|
|
|
338
334
|
slidBoxContent={slidBoxContent}
|
|
339
335
|
FTPMode="create"
|
|
340
336
|
selectedOfferDetails={selectedOfferDetails}
|
|
341
|
-
messageStrategy={messageStrategy}
|
|
342
|
-
showDisabledFBInfo={showDisabledFBInfo}
|
|
343
|
-
orgUnitId={orgUnitId}
|
|
344
337
|
/>
|
|
345
338
|
)}
|
|
346
339
|
{isPreview && (
|
|
@@ -565,10 +558,7 @@ function SlideBoxContent(props) {
|
|
|
565
558
|
isFullMode={isFullMode}
|
|
566
559
|
createNew
|
|
567
560
|
getFormSubscriptionData={getFormData}
|
|
568
|
-
|
|
569
|
-
fbAdManager={fbAdManager}
|
|
570
|
-
onSelectTemplate={onSelectTemplate}
|
|
571
|
-
orgUnitId={orgUnitId}
|
|
561
|
+
|
|
572
562
|
/>
|
|
573
563
|
)
|
|
574
564
|
}
|
|
@@ -585,7 +575,6 @@ function SlideBoxContent(props) {
|
|
|
585
575
|
id: templateData._id,
|
|
586
576
|
}}
|
|
587
577
|
getFormSubscriptionData={getFormData}
|
|
588
|
-
fbAdManager={fbAdManager}
|
|
589
578
|
/>
|
|
590
579
|
)
|
|
591
580
|
}
|
|
@@ -698,9 +687,5 @@ SlideBoxContent.propTypes = {
|
|
|
698
687
|
saveMessage: PropTypes.func,
|
|
699
688
|
selectedAccount: PropTypes.object,
|
|
700
689
|
onFTPSubmit: PropTypes.func,
|
|
701
|
-
messageStrategy: PropTypes.string,
|
|
702
|
-
fbAdManager: PropTypes.string,
|
|
703
|
-
showDisabledFBInfo: PropTypes.boolean,
|
|
704
|
-
orgUnitId: PropTypes.any,
|
|
705
690
|
};
|
|
706
691
|
export default SlideBoxContent;
|
|
@@ -25,9 +25,6 @@ import {isLoading as isLoadingSelector} from './selectors';
|
|
|
25
25
|
import messages from './messages';
|
|
26
26
|
import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
|
|
27
27
|
import { makeSelectFetchingCmsData } from '../Email/selectors';
|
|
28
|
-
import {IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
|
|
29
|
-
import { CREATIVE } from '../Facebook/constants';
|
|
30
|
-
|
|
31
28
|
|
|
32
29
|
const classPrefix = 'add-creatives-section';
|
|
33
30
|
|
|
@@ -54,6 +51,7 @@ class Creatives extends React.Component {
|
|
|
54
51
|
currentChannel: this.props.channel || 'sms',
|
|
55
52
|
weChatTemplateType: '',
|
|
56
53
|
weChatMaptemplateStep: 0,
|
|
54
|
+
|
|
57
55
|
};
|
|
58
56
|
this.creativesTemplateSteps = {
|
|
59
57
|
1: 'modeSelection',
|
|
@@ -76,12 +74,8 @@ class Creatives extends React.Component {
|
|
|
76
74
|
this.setState({templateNameExists: false});
|
|
77
75
|
}
|
|
78
76
|
|
|
79
|
-
onSelectTemplate = (template
|
|
80
|
-
|
|
81
|
-
if (fbAdManager) {
|
|
82
|
-
data.fbAdManager = fbAdManager;
|
|
83
|
-
}
|
|
84
|
-
this.setState(data);
|
|
77
|
+
onSelectTemplate = (template) => {
|
|
78
|
+
this.setState({ slidBoxContent: 'editTemplate', templateData: template });
|
|
85
79
|
};
|
|
86
80
|
onPreviewTemplate = (template) => {
|
|
87
81
|
const templateData = template;
|
|
@@ -93,12 +87,8 @@ class Creatives extends React.Component {
|
|
|
93
87
|
onEditTemplate = () => {
|
|
94
88
|
this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
|
|
95
89
|
};
|
|
96
|
-
onCreateNew = (
|
|
97
|
-
|
|
98
|
-
if (fbAdManager) {
|
|
99
|
-
data.fbAdManager = fbAdManager;
|
|
100
|
-
}
|
|
101
|
-
this.setState(data);
|
|
90
|
+
onCreateNew = () => {
|
|
91
|
+
this.setState({ slidBoxContent: 'createTemplate', showSlideBox: true });
|
|
102
92
|
};
|
|
103
93
|
|
|
104
94
|
onShowTemplates = () => {
|
|
@@ -230,61 +220,11 @@ class Creatives extends React.Component {
|
|
|
230
220
|
break;
|
|
231
221
|
}
|
|
232
222
|
case constants.FACEBOOK: {
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
} = templateData || {};
|
|
239
|
-
const fBContent = fbCreativeList;
|
|
240
|
-
const facebookCreativeList = [];
|
|
241
|
-
fBContent.forEach((obj) => {
|
|
242
|
-
const data = cloneDeep(obj);
|
|
243
|
-
const {subType, linkDescription, imageLink, websiteLink, videoId, videoName, videoUrl} = obj || {};
|
|
244
|
-
delete data.linkDescription;
|
|
245
|
-
delete data.websiteLink;
|
|
246
|
-
data.linkDesc = linkDescription;
|
|
247
|
-
data.webSiteLink = websiteLink;
|
|
248
|
-
data.type = creativeType;
|
|
249
|
-
switch (subType) {
|
|
250
|
-
case IMAGE:
|
|
251
|
-
data.imgSrc = imageLink;
|
|
252
|
-
delete data.imageLink;
|
|
253
|
-
break;
|
|
254
|
-
case VIDEO:
|
|
255
|
-
data.video = {
|
|
256
|
-
previewImageUrl: imageLink,
|
|
257
|
-
videoId,
|
|
258
|
-
videoSrc: videoUrl,
|
|
259
|
-
videoName,
|
|
260
|
-
};
|
|
261
|
-
delete data.imageLink;
|
|
262
|
-
break;
|
|
263
|
-
default:
|
|
264
|
-
break;
|
|
265
|
-
}
|
|
266
|
-
facebookCreativeList.push(data);
|
|
267
|
-
});
|
|
268
|
-
creativesTemplateData = {
|
|
269
|
-
versions: {
|
|
270
|
-
base: {
|
|
271
|
-
content: {
|
|
272
|
-
FacebookAd: {...facebookCreativeList},
|
|
273
|
-
pageOrgUnitId: this.props.orgUnitId,
|
|
274
|
-
},
|
|
275
|
-
},
|
|
276
|
-
},
|
|
277
|
-
type: constants.FACEBOOK,
|
|
278
|
-
edit: true,
|
|
279
|
-
selectedFacebookAccount,
|
|
280
|
-
};
|
|
281
|
-
} else {
|
|
282
|
-
creativesTemplateData = {
|
|
283
|
-
selectedMarketingObjective: templateData.selectedMarketingObjective,
|
|
284
|
-
edit: true,
|
|
285
|
-
type: channel,
|
|
286
|
-
};
|
|
287
|
-
}
|
|
223
|
+
creativesTemplateData = {
|
|
224
|
+
selectedMarketingObjective: templateData.selectedMarketingObjective,
|
|
225
|
+
edit: true,
|
|
226
|
+
type: channel,
|
|
227
|
+
};
|
|
288
228
|
break;
|
|
289
229
|
}
|
|
290
230
|
case constants.LINE: {
|
|
@@ -436,50 +376,6 @@ class Creatives extends React.Component {
|
|
|
436
376
|
};
|
|
437
377
|
}
|
|
438
378
|
break;
|
|
439
|
-
case constants.FACEBOOK: {
|
|
440
|
-
if (template.value) {
|
|
441
|
-
const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
|
|
442
|
-
const type = FacebookAd[0].type;
|
|
443
|
-
const {accountId} = this.props.Templates.selectedFacebookAccount || template.value || {};
|
|
444
|
-
const facebookCreativeList = [];
|
|
445
|
-
const fBContent = Object.values(FacebookAd);
|
|
446
|
-
fBContent.forEach((obj) => {
|
|
447
|
-
const data = cloneDeep(obj);
|
|
448
|
-
const {subType, linkDesc, imgSrc, webSiteLink, video} = obj;
|
|
449
|
-
delete data.type;
|
|
450
|
-
delete data.linkDesc;
|
|
451
|
-
delete data.webSiteLink;
|
|
452
|
-
data.linkDescription = linkDesc;
|
|
453
|
-
data.websiteLink = webSiteLink;
|
|
454
|
-
|
|
455
|
-
switch (subType) {
|
|
456
|
-
case IMAGE:
|
|
457
|
-
data.imageLink = imgSrc;
|
|
458
|
-
delete data.imgSrc;
|
|
459
|
-
break;
|
|
460
|
-
case VIDEO:
|
|
461
|
-
data.imageLink = video.previewImageUrl;
|
|
462
|
-
data.videoId = video.videoId;
|
|
463
|
-
data.videoUrl = video.videoSrc;
|
|
464
|
-
data.videoName = video.videoName;
|
|
465
|
-
delete data.video;
|
|
466
|
-
break;
|
|
467
|
-
default:
|
|
468
|
-
break;
|
|
469
|
-
}
|
|
470
|
-
facebookCreativeList.push(data);
|
|
471
|
-
});
|
|
472
|
-
templateData = {
|
|
473
|
-
fbContentType: CREATIVE,
|
|
474
|
-
creativeType: type,
|
|
475
|
-
facebookCreativeList,
|
|
476
|
-
channel: constants.FACEBOOK,
|
|
477
|
-
accountId,
|
|
478
|
-
selectedMarketingObjective: template.value.selectedMarketingObjective,
|
|
479
|
-
};
|
|
480
|
-
}
|
|
481
|
-
}
|
|
482
|
-
break;
|
|
483
379
|
default:
|
|
484
380
|
break;
|
|
485
381
|
}
|
|
@@ -682,8 +578,8 @@ class Creatives extends React.Component {
|
|
|
682
578
|
return false;
|
|
683
579
|
}
|
|
684
580
|
shouldShowHeader = () => {
|
|
685
|
-
const {currentChannel
|
|
686
|
-
if (currentChannel
|
|
581
|
+
const {currentChannel} = this.state;
|
|
582
|
+
if (currentChannel === constants.FACEBOOK) {
|
|
687
583
|
return false;
|
|
688
584
|
}
|
|
689
585
|
return true;
|
|
@@ -726,7 +622,6 @@ class Creatives extends React.Component {
|
|
|
726
622
|
campaignSettings={this.props.Templates.campaignSettings}
|
|
727
623
|
location={this.props.location}
|
|
728
624
|
messageDetails={this.props.messageDetails}
|
|
729
|
-
showDisabledFBInfo={this.props.showDisabledFBInfo}
|
|
730
625
|
getFormData={this.getFormData}
|
|
731
626
|
onCallTaskSubmit={this.onCallTaskSubmit}
|
|
732
627
|
onCreateNew={this.onCreateNew}
|
|
@@ -742,7 +637,6 @@ class Creatives extends React.Component {
|
|
|
742
637
|
onEnterTemplateName={this.onEnterTemplateName}
|
|
743
638
|
onRemoveTemplateName={this.onRemoveTemplateName}
|
|
744
639
|
onResetStep={this.resetStep}
|
|
745
|
-
fbAdManager={this.state.fbAdManager}
|
|
746
640
|
cap={cap}
|
|
747
641
|
setIsLoadingContent={this.setIsLoadingContent}
|
|
748
642
|
onMobilepushModeChange={this.onMobilepushModeChange}
|
|
@@ -767,8 +661,6 @@ class Creatives extends React.Component {
|
|
|
767
661
|
handleClose={this.handleCloseSlideBox}
|
|
768
662
|
onFTPSubmit={getCreativesData}
|
|
769
663
|
editor={editor}
|
|
770
|
-
messageStrategy={this.props.strategy}
|
|
771
|
-
orgUnitId={this.props.orgUnitId}
|
|
772
664
|
/>
|
|
773
665
|
}
|
|
774
666
|
footer={this.shouldShowFooter() &&
|
|
@@ -821,8 +713,6 @@ Creatives.propTypes = {
|
|
|
821
713
|
selectedWeChatAccount: PropTypes.object,
|
|
822
714
|
Templates: PropTypes.object,
|
|
823
715
|
selectedAccount: PropTypes.object,
|
|
824
|
-
strategy: PropTypes.string,
|
|
825
|
-
orgUnitId: PropTypes.number,
|
|
826
716
|
};
|
|
827
717
|
const mapStatesToProps = () => createStructuredSelector({
|
|
828
718
|
isLoading: isLoadingSelector(),
|
|
@@ -3,8 +3,6 @@ import React, { useState, useEffect, useCallback} from "react";
|
|
|
3
3
|
import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
|
|
4
4
|
import { isUrl } from '../../Line/Container/Wrapper/utils';
|
|
5
5
|
import get from 'lodash/get';
|
|
6
|
-
import isEmpty from 'lodash/isEmpty';
|
|
7
|
-
|
|
8
6
|
import {
|
|
9
7
|
CapInput,
|
|
10
8
|
CapRadioCard,
|
|
@@ -84,12 +82,10 @@ export const Advertisement = (props) => {
|
|
|
84
82
|
actions,
|
|
85
83
|
fbADData = {},
|
|
86
84
|
onCreateComplete,
|
|
87
|
-
templateData
|
|
85
|
+
templateData,
|
|
88
86
|
params,
|
|
89
87
|
getFormSubscriptionData,
|
|
90
88
|
facebookTemplateData,
|
|
91
|
-
selectedMarketingObjective,
|
|
92
|
-
orgUnitId,
|
|
93
89
|
} = props;
|
|
94
90
|
const {
|
|
95
91
|
formatMessage,
|
|
@@ -132,7 +128,7 @@ export const Advertisement = (props) => {
|
|
|
132
128
|
orgUnitFacebookPageSettingsMap = {},
|
|
133
129
|
employeeAccessToken: accessToken = "",
|
|
134
130
|
accountId = "",
|
|
135
|
-
} = selectedFacebookAccount
|
|
131
|
+
} = selectedFacebookAccount;
|
|
136
132
|
const { pageAccessToken, pageId: pId } = orgUnitFacebookPageSettingsMap[pageId] || {};
|
|
137
133
|
videoData = {
|
|
138
134
|
accessToken,
|
|
@@ -162,7 +158,7 @@ export const Advertisement = (props) => {
|
|
|
162
158
|
}, [paramObj.id]);
|
|
163
159
|
|
|
164
160
|
useEffect(() => {
|
|
165
|
-
if (params
|
|
161
|
+
if ((params && params.id) || (templateData || {}).edit) {
|
|
166
162
|
const { FacebookAd = [], pageOrgUnitId: editPageId} = get(templateData, `versions.base.content`) || get(fbADData, `templateDetails.versions.base.content`) || {};
|
|
167
163
|
const editMessageTitle = (templateData || {}).name || get(fbADData, 'templateDetails.name');
|
|
168
164
|
const editFBContent = Object.values(FacebookAd);
|
|
@@ -221,7 +217,6 @@ export const Advertisement = (props) => {
|
|
|
221
217
|
}
|
|
222
218
|
}, [fbADData[`templateDetails`] || templateData]);
|
|
223
219
|
|
|
224
|
-
|
|
225
220
|
const CustomToolTip = useCallback((msg) => <CapTooltipWithInfo
|
|
226
221
|
infoIconProps={{svgProps: {width: 12, height: 12}, style: {marginLeft: 5}}}
|
|
227
222
|
title={msg}
|
|
@@ -354,7 +349,8 @@ export const Advertisement = (props) => {
|
|
|
354
349
|
}
|
|
355
350
|
messageData.push(data);
|
|
356
351
|
});
|
|
357
|
-
|
|
352
|
+
|
|
353
|
+
return {
|
|
358
354
|
versions: {
|
|
359
355
|
base: {
|
|
360
356
|
content: {
|
|
@@ -366,17 +362,12 @@ export const Advertisement = (props) => {
|
|
|
366
362
|
type: "FACEBOOK",
|
|
367
363
|
name: messageTitle,
|
|
368
364
|
};
|
|
369
|
-
if (!isFullMode) {
|
|
370
|
-
finalResponse = {...finalResponse, selectedMarketingObjective, accountId};
|
|
371
|
-
}
|
|
372
|
-
return finalResponse;
|
|
373
365
|
}, [carouselData,
|
|
374
366
|
pageId,
|
|
375
367
|
messageTitle,
|
|
376
368
|
primaryText,
|
|
377
369
|
callToAction,
|
|
378
|
-
displayLink
|
|
379
|
-
selectedMarketingObjective]);
|
|
370
|
+
displayLink]);
|
|
380
371
|
|
|
381
372
|
const onCreateFacebookAd = useCallback( () => {
|
|
382
373
|
actions.createTemplate(
|
|
@@ -452,7 +443,6 @@ export const Advertisement = (props) => {
|
|
|
452
443
|
updateMessageTitle(val);
|
|
453
444
|
}, [messageTitle]);
|
|
454
445
|
|
|
455
|
-
|
|
456
446
|
const isDisableDone = useCallback((isPreview) => {
|
|
457
447
|
let flag = false;
|
|
458
448
|
if (primaryText === "" ) {
|
|
@@ -502,7 +492,8 @@ export const Advertisement = (props) => {
|
|
|
502
492
|
selectedAd,
|
|
503
493
|
]
|
|
504
494
|
);
|
|
505
|
-
|
|
495
|
+
|
|
496
|
+
const isDisableContinue = () => messageTitle.trim() === "" || selectedAd === "";
|
|
506
497
|
|
|
507
498
|
const onClickContinue = useCallback(() => { updateStep('createFacebookAd'); }, [step]);
|
|
508
499
|
|
|
@@ -811,8 +802,8 @@ export const Advertisement = (props) => {
|
|
|
811
802
|
setPageId(value);
|
|
812
803
|
}, [pageId]);
|
|
813
804
|
|
|
814
|
-
const selectedFacebookAccount =
|
|
815
|
-
const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount
|
|
805
|
+
const selectedFacebookAccount = get(facebookTemplateData, 'selectedFacebookAccount', {});
|
|
806
|
+
const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount;
|
|
816
807
|
|
|
817
808
|
const getPageAccessOrgs = useCallback(() => {
|
|
818
809
|
const {status, data } = fbADData.orgOuData || {};
|
|
@@ -822,32 +813,14 @@ export const Advertisement = (props) => {
|
|
|
822
813
|
const orgName = (
|
|
823
814
|
proxyOrgList.find(({ orgID }) => orgID === Number(orgId)) || {}
|
|
824
815
|
).orgName;
|
|
825
|
-
if (
|
|
826
|
-
// !status is the case of library
|
|
827
|
-
//if org id is the parent org
|
|
828
|
-
if (orgUnitFacebookPageSettingsMap[-1] && !pageId) {
|
|
829
|
-
setPageId(-1);
|
|
830
|
-
}
|
|
831
|
-
if (orgUnitFacebookPageSettingsMap[-1]) {
|
|
832
|
-
pageAccessOrgsOptions.push({label: orgName, value: -1});
|
|
833
|
-
}
|
|
834
|
-
// if we are coming from default startegy and calling templates from facebook/index.js
|
|
835
|
-
if (!pageId && orgUnitId && orgUnitFacebookPageSettingsMap[orgUnitId]) {
|
|
836
|
-
setPageId(orgUnitId);
|
|
837
|
-
}
|
|
838
|
-
} else if (status === 'SUCCESS') {
|
|
816
|
+
if (status === 'SUCCESS') {
|
|
839
817
|
Object.keys(data).forEach((obj) => {
|
|
840
818
|
if ((orgUnitFacebookPageSettingsMap[data[obj]] || {}).pageAccessToken) {
|
|
841
|
-
pageAccessOrgsOptions.push({label: obj, value: data[obj]});
|
|
819
|
+
pageAccessOrgsOptions.push({label: data[obj] === -1 ? orgName : obj, value: data[obj]});
|
|
842
820
|
}
|
|
843
821
|
});
|
|
844
|
-
if (
|
|
845
|
-
pageAccessOrgsOptions.push({label: orgName, value: -1});
|
|
846
|
-
}
|
|
847
|
-
if (!pageId && !isEmpty(data)) {
|
|
822
|
+
if (!pageId) {
|
|
848
823
|
setPageId((pageAccessOrgsOptions[0] || {} ).value);
|
|
849
|
-
} else if (orgUnitFacebookPageSettingsMap[-1] && !pageId) {
|
|
850
|
-
setPageId(-1);
|
|
851
824
|
}
|
|
852
825
|
}
|
|
853
826
|
return pageAccessOrgsOptions;
|
|
@@ -856,7 +829,7 @@ export const Advertisement = (props) => {
|
|
|
856
829
|
const options = getPageAccessOrgs() || [];
|
|
857
830
|
const { data = {} } = fbADData.orgOuData || {};
|
|
858
831
|
const selectedPageName = Object.keys(data).find((key) => data[key] === pageId);
|
|
859
|
-
return ( (step === 'modeSelection'
|
|
832
|
+
return ( (step === 'modeSelection') ?
|
|
860
833
|
( <CapSpin spinning={adSpinLoader} className="add-facebook-ad-section">
|
|
861
834
|
<div style={{ position: 'fixed', top: '25px', zIndex: 1}}>
|
|
862
835
|
<CapHeader
|
|
@@ -865,27 +838,25 @@ export const Advertisement = (props) => {
|
|
|
865
838
|
className={"cap-header-facebook-ad"}
|
|
866
839
|
/>
|
|
867
840
|
</div>
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
></CapSelect>
|
|
888
|
-
</>}
|
|
841
|
+
<CapInput
|
|
842
|
+
id={`fbAd_input`}
|
|
843
|
+
onChange={onTextTitleChange}
|
|
844
|
+
className="text-template-title"
|
|
845
|
+
defaultValue={messageTitle || ''}
|
|
846
|
+
value={messageTitle || ''}
|
|
847
|
+
style={{marginBottom: 27, width: '762px'}}
|
|
848
|
+
size="default"
|
|
849
|
+
label={formatMessage(messages.creativeName)}
|
|
850
|
+
/>
|
|
851
|
+
{isFullMode && <CapSelect
|
|
852
|
+
label={formatMessage(messages.facebookPage)}
|
|
853
|
+
key={"select-facebook-page"}
|
|
854
|
+
onChange={onChangeFacebookPage}
|
|
855
|
+
options={options}
|
|
856
|
+
defaultValue={(options[0] || {} ).value}
|
|
857
|
+
value={pageId || (options[0] || {} ).value}
|
|
858
|
+
style={{marginBottom: 27, width: '372px'}}
|
|
859
|
+
></CapSelect>}
|
|
889
860
|
<CapHeading
|
|
890
861
|
type="h4"
|
|
891
862
|
style={{marginBottom: 11}}
|
|
@@ -909,15 +880,8 @@ export const Advertisement = (props) => {
|
|
|
909
880
|
</FbAdFooter>
|
|
910
881
|
</CapSpin> ) : (
|
|
911
882
|
<CapSpin spinning={spinLoader}>
|
|
912
|
-
{!isFullMode && isEmpty(templateData) && <div style={{ position: 'fixed', top: '25px', zIndex: 1}}>
|
|
913
|
-
<CapHeader
|
|
914
|
-
inline
|
|
915
|
-
title={formatMessage(messages.newFacebookCreatives)}
|
|
916
|
-
className={"cap-header-facebook-ad"}
|
|
917
|
-
/>
|
|
918
|
-
</div>}
|
|
919
883
|
<CapRow className="add-facebook-ad-section" >
|
|
920
|
-
|
|
884
|
+
<div className="cap-header-facebook-ad">
|
|
921
885
|
<CapHeading
|
|
922
886
|
type="h2"
|
|
923
887
|
className="truncate-text"
|
|
@@ -935,7 +899,7 @@ export const Advertisement = (props) => {
|
|
|
935
899
|
title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
|
|
936
900
|
onClick={onClickEditName}
|
|
937
901
|
/>}
|
|
938
|
-
</div>
|
|
902
|
+
</div>
|
|
939
903
|
<CapColumn span={12}>
|
|
940
904
|
{isFullMode && <><CapHeading
|
|
941
905
|
type="h4"
|
|
@@ -1010,8 +974,8 @@ Advertisement.propTypes = {
|
|
|
1010
974
|
facebookTemplateData: PropTypes.object,
|
|
1011
975
|
templateData: PropTypes.object,
|
|
1012
976
|
params: PropTypes.object,
|
|
1013
|
-
selectedMarketingObjective: PropTypes.any,
|
|
1014
977
|
|
|
1015
978
|
};
|
|
1016
979
|
|
|
1017
980
|
export default injectIntl(Advertisement);
|
|
981
|
+
|
|
@@ -47,7 +47,3 @@ export const VALUE_REACH = 'VALUE_REACH';
|
|
|
47
47
|
export const VALUE_VIDEO_VIEWS = 'VALUE_VIDEO_VIEWS';
|
|
48
48
|
export const VALUE_LINK_CLICKS = 'VALUE_LINK_CLICKS';
|
|
49
49
|
export const VALUE_POST_ENGAGEMENT = 'VALUE_POST_ENGAGEMENT';
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
export const AD_MANAGER = "AD_MANAGER";
|
|
53
|
-
export const CREATIVE = "CREATIVE";
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*
|
|
5
5
|
*/
|
|
6
6
|
import PropTypes from "prop-types";
|
|
7
|
-
import React, { useState, useEffect
|
|
7
|
+
import React, { useState, useEffect } from "react";
|
|
8
8
|
import { injectIntl, FormattedMessage, intlShape } from "react-intl";
|
|
9
9
|
import {
|
|
10
10
|
CapHeading,
|
|
@@ -15,10 +15,7 @@ import {
|
|
|
15
15
|
CapDrawer,
|
|
16
16
|
CapCustomCard,
|
|
17
17
|
CapIcon,
|
|
18
|
-
CapRadioGroup,
|
|
19
|
-
CapTooltip,
|
|
20
18
|
} from '@capillarytech/cap-ui-library';
|
|
21
|
-
import Templates from '../Templates';
|
|
22
19
|
import { createStructuredSelector } from 'reselect';
|
|
23
20
|
import { connect } from 'react-redux';
|
|
24
21
|
import { bindActionCreators } from 'redux';
|
|
@@ -41,8 +38,6 @@ import {
|
|
|
41
38
|
VALUE_REACH,
|
|
42
39
|
VALUE_VIDEO_VIEWS,
|
|
43
40
|
VALUE_LINK_CLICKS,
|
|
44
|
-
AD_MANAGER,
|
|
45
|
-
CREATIVE,
|
|
46
41
|
} from './constants';
|
|
47
42
|
|
|
48
43
|
const StyledCampaignDetailCapColumn = withStyles(CapColumn, CampaignDetailCapColumn);
|
|
@@ -188,25 +183,12 @@ const Facebook = (props) => {
|
|
|
188
183
|
onCreateComplete,
|
|
189
184
|
params,
|
|
190
185
|
facebookTemplateData,
|
|
191
|
-
messageStrategy,
|
|
192
|
-
router,
|
|
193
|
-
handlePeviewTemplate,
|
|
194
|
-
renderNewCardGrid,
|
|
195
|
-
onSelectTemplate,
|
|
196
|
-
createNew,
|
|
197
|
-
fbAdManager,
|
|
198
|
-
getFormSubscriptionData,
|
|
199
|
-
showDisabledFBInfo,
|
|
200
|
-
orgUnitId,
|
|
201
186
|
} = props;
|
|
202
187
|
const {
|
|
203
188
|
selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
|
|
204
189
|
} = templateData || {};
|
|
205
190
|
const [isDrawerVisible, setDrawerVisibility] = useState(false);
|
|
206
191
|
const [selectedMarketingObjective, setMarketingObjective] = useState(socialObjective || fbMarketingObjectiveValue);
|
|
207
|
-
const [adManager, setAdManager] = useState(AD_MANAGER);
|
|
208
|
-
const [showTemplateList, setTemplateList] = useState(false);
|
|
209
|
-
|
|
210
192
|
|
|
211
193
|
useEffect(() => {
|
|
212
194
|
if (!isFullMode) {
|
|
@@ -243,188 +225,131 @@ const Facebook = (props) => {
|
|
|
243
225
|
|
|
244
226
|
const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
|
|
245
227
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
const onFacebookAdManagerContinue = useCallback(() => {
|
|
257
|
-
if (adManager === AD_MANAGER) {
|
|
258
|
-
onFacebookSubmit({ channel: "FACEBOOK", selectedMarketingObjective, accountId });
|
|
259
|
-
} else {
|
|
260
|
-
setTemplateList(true);
|
|
261
|
-
}
|
|
262
|
-
}, [
|
|
263
|
-
selectedMarketingObjective,
|
|
264
|
-
accountId,
|
|
265
|
-
adManager,
|
|
266
|
-
setAdManager,
|
|
267
|
-
setTemplateList,
|
|
268
|
-
showTemplateList,
|
|
269
|
-
]);
|
|
270
|
-
const query = {type: 'embedded', module: 'library'};
|
|
271
|
-
const location = {pathname: `/FACEBOOK`, search: '', query};
|
|
272
|
-
return (showTemplateList ? (
|
|
273
|
-
<Templates
|
|
274
|
-
key={"FACEBOOK"}
|
|
275
|
-
location={location}
|
|
276
|
-
route={{name: "FACEBOOK"}}
|
|
277
|
-
router={router}
|
|
278
|
-
isFullMode={isFullMode}
|
|
279
|
-
createNew={createNew}
|
|
280
|
-
onSelectTemplate={onSelectTemplate}
|
|
281
|
-
renderNewCardGrid={renderNewCardGrid}
|
|
282
|
-
handlePeviewTemplate={handlePeviewTemplate}
|
|
283
|
-
fbAdManager={CREATIVE}
|
|
284
|
-
/>
|
|
285
|
-
) :
|
|
286
|
-
(!isFullMode && fbAdManager !== CREATIVE && messageStrategy === "DEFAULT" ) ?
|
|
287
|
-
(<div className={className}>
|
|
288
|
-
|
|
289
|
-
<div className="is-scrollable-section" >
|
|
290
|
-
<div className="account-details-wrapper">
|
|
291
|
-
<div className="account-name-section">
|
|
292
|
-
<CapHeading type="h4">
|
|
293
|
-
<FormattedMessage {...messages.fbAccount} />
|
|
294
|
-
</CapHeading>
|
|
295
|
-
<CapHeading type="h3">{accountName}</CapHeading>
|
|
296
|
-
</div>
|
|
297
|
-
|
|
298
|
-
<div className="account-section-container">
|
|
299
|
-
<CapHeading type="h3">
|
|
300
|
-
<FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
|
|
301
|
-
</CapHeading>
|
|
302
|
-
<CapLabel type="label1">
|
|
303
|
-
<FormattedMessage
|
|
304
|
-
{...messages.fbAdCampaignSetDetailsDescription}
|
|
305
|
-
/>
|
|
306
|
-
</CapLabel>
|
|
307
|
-
</div>
|
|
228
|
+
return (
|
|
229
|
+
!isFullMode ? (<div className={className}>
|
|
230
|
+
<div className="is-scrollable-section" >
|
|
231
|
+
<div className="account-details-wrapper">
|
|
232
|
+
<div className="account-name-section">
|
|
233
|
+
<CapHeading type="h4">
|
|
234
|
+
<FormattedMessage {...messages.fbAccount} />
|
|
235
|
+
</CapHeading>
|
|
236
|
+
<CapHeading type="h3">{accountName}</CapHeading>
|
|
237
|
+
</div>
|
|
308
238
|
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
<CapHeading type="h4">
|
|
320
|
-
{value}
|
|
321
|
-
{!socialRemoteCampaignId && onChange && (
|
|
322
|
-
<CapButton
|
|
323
|
-
type="flat"
|
|
324
|
-
className="marketingObjective-change-button facebook-marketing-objective-change"
|
|
325
|
-
onClick={onChange}
|
|
326
|
-
>
|
|
327
|
-
<FormattedMessage {...messages.fbChange} />
|
|
328
|
-
</CapButton>
|
|
329
|
-
)}
|
|
330
|
-
</CapHeading>
|
|
331
|
-
</CapRow>
|
|
332
|
-
</StyledCampaignDetailCapColumn>
|
|
333
|
-
))}
|
|
334
|
-
</CapRow>
|
|
335
|
-
<CapDrawer
|
|
336
|
-
content={
|
|
337
|
-
<MarketingObjective
|
|
338
|
-
selectedMarketingObjective={selectedMarketingObjective}
|
|
339
|
-
onMarketingObjectiveSelect={onMarketingObjectiveSelect}
|
|
340
|
-
defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
|
|
341
|
-
onSubmit={setDrawerVisibility}
|
|
342
|
-
marketingObjectiveList={categorizedMarketingObjectiveList}
|
|
343
|
-
/>
|
|
344
|
-
}
|
|
345
|
-
visible={isDrawerVisible}
|
|
346
|
-
width={380}
|
|
347
|
-
onClose={() => setDrawerVisibility(false)}
|
|
348
|
-
/>
|
|
349
|
-
</div>
|
|
239
|
+
<div className="account-section-container">
|
|
240
|
+
<CapHeading type="h3">
|
|
241
|
+
<FormattedMessage {...messages.fbAdCampaignSetDetailsTitle} />
|
|
242
|
+
</CapHeading>
|
|
243
|
+
<CapLabel type="label1">
|
|
244
|
+
<FormattedMessage
|
|
245
|
+
{...messages.fbAdCampaignSetDetailsDescription}
|
|
246
|
+
/>
|
|
247
|
+
</CapLabel>
|
|
248
|
+
</div>
|
|
350
249
|
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
250
|
+
<CapRow span={12} type="flex">
|
|
251
|
+
{campaignDataList.map(({ label, value, onChange }, index) => (
|
|
252
|
+
<StyledCampaignDetailCapColumn
|
|
253
|
+
span={index % 2 === 0 ? 6 : 14}
|
|
254
|
+
key={label}
|
|
255
|
+
>
|
|
256
|
+
<CapRow>
|
|
257
|
+
<CapLabel type="label2">
|
|
258
|
+
<FormattedMessage {...messages[label]} />
|
|
259
|
+
</CapLabel>
|
|
260
|
+
<CapHeading type="h4">
|
|
261
|
+
{value}
|
|
262
|
+
{!socialRemoteCampaignId && onChange && (
|
|
263
|
+
<CapButton
|
|
264
|
+
type="flat"
|
|
265
|
+
className="marketingObjective-change-button facebook-marketing-objective-change"
|
|
266
|
+
onClick={onChange}
|
|
267
|
+
>
|
|
268
|
+
<FormattedMessage {...messages.fbChange} />
|
|
269
|
+
</CapButton>
|
|
270
|
+
)}
|
|
271
|
+
</CapHeading>
|
|
272
|
+
</CapRow>
|
|
273
|
+
</StyledCampaignDetailCapColumn>
|
|
274
|
+
))}
|
|
275
|
+
</CapRow>
|
|
276
|
+
<CapDrawer
|
|
277
|
+
content={
|
|
278
|
+
<MarketingObjective
|
|
279
|
+
selectedMarketingObjective={selectedMarketingObjective}
|
|
280
|
+
onMarketingObjectiveSelect={onMarketingObjectiveSelect}
|
|
281
|
+
defaultmarketingObjective={socialObjective || fbMarketingObjectiveValue}
|
|
282
|
+
onSubmit={setDrawerVisibility}
|
|
283
|
+
marketingObjectiveList={categorizedMarketingObjectiveList}
|
|
284
|
+
/>
|
|
285
|
+
}
|
|
286
|
+
visible={isDrawerVisible}
|
|
287
|
+
width={380}
|
|
288
|
+
onClose={() => setDrawerVisibility(false)}
|
|
363
289
|
/>
|
|
364
|
-
|
|
365
|
-
<div className="account-section-container">
|
|
366
|
-
<CapLabel type="label1">
|
|
367
|
-
<FormattedMessage {...messages.fbAdsDescription} />
|
|
368
|
-
</CapLabel>
|
|
369
|
-
</div>
|
|
290
|
+
</div>
|
|
370
291
|
|
|
292
|
+
<div className="ad-section">
|
|
293
|
+
<div className="account-section-container">
|
|
294
|
+
<CapHeading type="h3">
|
|
295
|
+
<FormattedMessage {...messages.fbAdsTitle} />
|
|
296
|
+
</CapHeading>
|
|
297
|
+
<CapLabel type="label1">
|
|
298
|
+
<FormattedMessage {...messages.fbAdsDescription} />
|
|
299
|
+
</CapLabel>
|
|
300
|
+
</div>
|
|
371
301
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
selectedMarketingObjective={selectedMarketingObjective}
|
|
424
|
-
fbAdManager={fbAdManager}
|
|
425
|
-
orgUnitId={orgUnitId}
|
|
426
|
-
/>
|
|
427
|
-
</div>
|
|
302
|
+
<div>
|
|
303
|
+
<CapRow span={12} type="flex">
|
|
304
|
+
<CapColumn span={6}>
|
|
305
|
+
<CapCustomCard
|
|
306
|
+
type="Facebook"
|
|
307
|
+
FBDynamicComponent={() => (
|
|
308
|
+
<CapIcon
|
|
309
|
+
size="l"
|
|
310
|
+
type="scenery"
|
|
311
|
+
className="facebook-dynamic-content"
|
|
312
|
+
/>
|
|
313
|
+
)}
|
|
314
|
+
/>
|
|
315
|
+
</CapColumn>
|
|
316
|
+
<CapColumn span={16}>
|
|
317
|
+
<ul className="parameter-list">
|
|
318
|
+
{adSetParameters.map((parameter, index) => (
|
|
319
|
+
<li key={parameter} className="parameter-list-item">
|
|
320
|
+
<CapLabel type="label2" className="parameter-index">
|
|
321
|
+
{index + 1}
|
|
322
|
+
</CapLabel>
|
|
323
|
+
<CapHeading type="h5">
|
|
324
|
+
<FormattedMessage {...messages[parameter]} />
|
|
325
|
+
</CapHeading>
|
|
326
|
+
</li>
|
|
327
|
+
))}
|
|
328
|
+
</ul>
|
|
329
|
+
</CapColumn>
|
|
330
|
+
</CapRow>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
<CapButton
|
|
335
|
+
className="facebook-confirm-button"
|
|
336
|
+
type="primary"
|
|
337
|
+
onClick={() =>
|
|
338
|
+
onFacebookSubmit({ channel: "FACEBOOK", selectedMarketingObjective, accountId })
|
|
339
|
+
}
|
|
340
|
+
>
|
|
341
|
+
<FormattedMessage {...messages.fbConfirm} />
|
|
342
|
+
</CapButton>
|
|
343
|
+
</div>) : <div style={{height: '1200px'}}>
|
|
344
|
+
<Advertisement
|
|
345
|
+
isFullMode={isFullMode}
|
|
346
|
+
actions={facebookActions}
|
|
347
|
+
fbADData={fbADData}
|
|
348
|
+
onCreateComplete={onCreateComplete}
|
|
349
|
+
templateData={templateData}
|
|
350
|
+
params={params}
|
|
351
|
+
facebookTemplateData={facebookTemplateData}
|
|
352
|
+
/></div>
|
|
428
353
|
);
|
|
429
354
|
};
|
|
430
355
|
|
|
@@ -442,12 +367,11 @@ Facebook.propTypes = {
|
|
|
442
367
|
fbADData: PropTypes.object,
|
|
443
368
|
onCreateComplete: PropTypes.func,
|
|
444
369
|
facebookTemplateData: PropTypes.object,
|
|
445
|
-
messageStrategy: PropTypes.string,
|
|
446
|
-
getFormSubscriptionData: PropTypes.func,
|
|
447
370
|
};
|
|
448
371
|
|
|
449
372
|
Facebook.defaultProps = {
|
|
450
373
|
marketingObjectiveList: [""],
|
|
374
|
+
|
|
451
375
|
};
|
|
452
376
|
|
|
453
377
|
const mapStateToProps = createStructuredSelector({
|
|
@@ -42,7 +42,7 @@ export default defineMessages({
|
|
|
42
42
|
},
|
|
43
43
|
fbAdsDescription: {
|
|
44
44
|
id: `${messagePrefix}.fbAdsDescription`,
|
|
45
|
-
defaultMessage: '
|
|
45
|
+
defaultMessage: 'You may create ads in Facebook Ad Manager under the below mentioned ad set. The performance of these ads will be reported here in Engage+.',
|
|
46
46
|
},
|
|
47
47
|
fbAdsDetailOne: {
|
|
48
48
|
id: `${messagePrefix}.fbAdsDetailOne`,
|
|
@@ -56,9 +56,9 @@ export default defineMessages({
|
|
|
56
56
|
id: `${messagePrefix}.fbAdsDetailThree`,
|
|
57
57
|
defaultMessage: 'You can create ads later in Facebook ad manager.',
|
|
58
58
|
},
|
|
59
|
-
|
|
60
|
-
id: `${messagePrefix}.
|
|
61
|
-
defaultMessage: '
|
|
59
|
+
fbConfirm: {
|
|
60
|
+
id: `${messagePrefix}.fbConfirm`,
|
|
61
|
+
defaultMessage: 'Confirm',
|
|
62
62
|
},
|
|
63
63
|
fbChange: {
|
|
64
64
|
id: `${messagePrefix}.fbChange`,
|
|
@@ -164,24 +164,4 @@ export default defineMessages({
|
|
|
164
164
|
id: `${messagePrefix}.fbMarketingObjectiveStoreTrafficDescription`,
|
|
165
165
|
defaultMessage: 'Drive visits to your physical stores by showing ads to people who are nearby.',
|
|
166
166
|
},
|
|
167
|
-
capFbAdManager: {
|
|
168
|
-
id: `${messagePrefix}.capFbAdManager`,
|
|
169
|
-
defaultMessage: 'Capillary Facebook ad manager',
|
|
170
|
-
},
|
|
171
|
-
fbAdManager: {
|
|
172
|
-
id: `${messagePrefix}.fbAdManager`,
|
|
173
|
-
defaultMessage: 'Facebook ad manager',
|
|
174
|
-
},
|
|
175
|
-
adManagerHeading: {
|
|
176
|
-
id: `${messagePrefix}.adManagerHeading`,
|
|
177
|
-
defaultMessage: "Where do you want to create your Facebook ad creative?",
|
|
178
|
-
},
|
|
179
|
-
capAdManagerHeading: {
|
|
180
|
-
id: `${messagePrefix}.capAdManagerHeading`,
|
|
181
|
-
defaultMessage: "You can create Facebook ads creative in Engage+ Facebook ad Manager.",
|
|
182
|
-
},
|
|
183
|
-
facebookDisableinfo: {
|
|
184
|
-
id: `${messagePrefix}.facebookDisableinfo`,
|
|
185
|
-
defaultMessage: 'Please integrate Facebook Ad page ID & username to enable this option.',
|
|
186
|
-
},
|
|
187
167
|
});
|
|
@@ -62,8 +62,6 @@ import {
|
|
|
62
62
|
} from '../App/constants';
|
|
63
63
|
import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK } from '../CreativesContainer/constants';
|
|
64
64
|
|
|
65
|
-
import {CREATIVE} from '../Facebook/constants'
|
|
66
|
-
|
|
67
65
|
import emailIllustration from '../Assets/images/emailIllustration.svg';
|
|
68
66
|
import smsIllustration from '../Assets/images/smsIllustration.svg';
|
|
69
67
|
import pushIllustration from '../Assets/images/pushIllustration.svg';
|
|
@@ -323,7 +321,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
323
321
|
}
|
|
324
322
|
const fbSetting = get(nextProps.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
|
|
325
323
|
const { accountName = "",
|
|
326
|
-
|
|
324
|
+
orgUnitFacebookPageSettingsMap = {},
|
|
327
325
|
} = fbSetting[0] || {};
|
|
328
326
|
let pageAccessToken = false;
|
|
329
327
|
if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
|
|
@@ -456,7 +454,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
456
454
|
this.setState({previewTemplate: nextProps.Templates.templateDetails});
|
|
457
455
|
}
|
|
458
456
|
|
|
459
|
-
if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat'].indexOf(this.state.channel.toLowerCase()) > -1)) {
|
|
457
|
+
if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat', 'mobilepush'].indexOf(this.state.channel.toLowerCase()) > -1)) {
|
|
460
458
|
const paramsDefault = {
|
|
461
459
|
name: this.state.searchText,
|
|
462
460
|
sortBy: this.state.sortBy,
|
|
@@ -466,6 +464,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
466
464
|
paramsDefault.wecrmToken = nextProps.Templates.weCrmAccounts[0].configs.wecrm_token;
|
|
467
465
|
paramsDefault.originalId = nextProps.Templates.weCrmAccounts[0].sourceAccountIdentifier;
|
|
468
466
|
nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
|
|
467
|
+
} else if (this.state.channel.toLowerCase() === 'mobilepush') {
|
|
468
|
+
nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
|
|
469
|
+
paramsDefault.accountId = nextProps.Templates.weCrmAccounts[0].id;
|
|
469
470
|
}
|
|
470
471
|
this.setState({defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: nextProps.Templates.weCrmAccounts[0].name });
|
|
471
472
|
this.getAllTemplates({params: paramsDefault}, true);
|
|
@@ -510,7 +511,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
510
511
|
}
|
|
511
512
|
|
|
512
513
|
this.setState({activeMode: TEMPLATES_MODE});
|
|
513
|
-
|
|
514
|
+
|
|
514
515
|
this.getAllTemplates({params, resetPage: true});
|
|
515
516
|
});
|
|
516
517
|
}
|
|
@@ -1138,14 +1139,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1138
1139
|
const channel = this.state.channel.toLowerCase();
|
|
1139
1140
|
//const keyType = ev.key && ev.key.toLowerCase() !== undefined ? ev.state.toLowerCase() : '';
|
|
1140
1141
|
let routeParams = {};
|
|
1141
|
-
const {fbAdManager} = this.props;
|
|
1142
1142
|
timeTracker.startTimer(CHANNEL_CREATE_TRACK_MAPPING[channel]);
|
|
1143
1143
|
if (this.isEnabledInLibraryModule("callCreateFromProps")) {
|
|
1144
|
-
|
|
1145
|
-
this.props.createNew(fbAdManager);
|
|
1146
|
-
} else {
|
|
1147
|
-
this.props.createNew();
|
|
1148
|
-
}
|
|
1144
|
+
this.props.createNew();
|
|
1149
1145
|
} else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
|
|
1150
1146
|
routeParams = {
|
|
1151
1147
|
pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
|
|
@@ -1416,7 +1412,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1416
1412
|
}
|
|
1417
1413
|
}
|
|
1418
1414
|
if (this.isEnabledInLibraryModule("callSelectFromProps")) {
|
|
1419
|
-
this.props.onSelectTemplate(
|
|
1415
|
+
this.props.onSelectTemplate(id);
|
|
1420
1416
|
} else {
|
|
1421
1417
|
if (this.state.channel.toLowerCase() === 'ebill') {
|
|
1422
1418
|
pathName = `/ebill/edit/${id}`;
|
|
@@ -1428,9 +1424,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1428
1424
|
}
|
|
1429
1425
|
}
|
|
1430
1426
|
|
|
1431
|
-
selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
1427
|
handlePreviewClick(template, modeType) {
|
|
1435
1428
|
this.togglePreview();
|
|
1436
1429
|
const templateInfo = cloneDeep(template);
|
|
@@ -1808,10 +1801,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1808
1801
|
const isWechatChannel = channel === WECHAT;
|
|
1809
1802
|
const isMobilePushChannel = channel === MOBILE_PUSH;
|
|
1810
1803
|
const isLineChannel = channel === LINE;
|
|
1811
|
-
const isFacebookChannel = channel === FACEBOOK;
|
|
1812
1804
|
|
|
1813
1805
|
|
|
1814
|
-
if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)
|
|
1806
|
+
if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
|
|
1815
1807
|
forEach(weCrmAccounts, (account) => {
|
|
1816
1808
|
if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
|
|
1817
1809
|
if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
|
|
@@ -1951,33 +1943,28 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1951
1943
|
render() {
|
|
1952
1944
|
const isFullMode = this.isFullMode();
|
|
1953
1945
|
const { activeMode, channel, wechatFilter, lineFilter } = this.state;
|
|
1954
|
-
let
|
|
1946
|
+
let showForFacebook = true;
|
|
1955
1947
|
if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1960
|
-
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
|
|
1965
|
-
|
|
1966
|
-
pageAccessToken = true;
|
|
1967
|
-
}
|
|
1968
|
-
});
|
|
1969
|
-
if (!pageAccessToken) {
|
|
1970
|
-
showFbAds = true;
|
|
1948
|
+
if (isEmpty(this.props.Templates.campaignSettings)) {
|
|
1949
|
+
showForFacebook = false;
|
|
1950
|
+
}
|
|
1951
|
+
const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
|
|
1952
|
+
const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
|
|
1953
|
+
let pageAccessToken = false;
|
|
1954
|
+
if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
|
|
1955
|
+
Object.values(orgUnitFacebookPageSettingsMap).forEach((obj) => {
|
|
1956
|
+
if (obj.pageAccessToken) {
|
|
1957
|
+
pageAccessToken = true;
|
|
1971
1958
|
}
|
|
1972
|
-
}
|
|
1973
|
-
|
|
1959
|
+
});
|
|
1960
|
+
if (!pageAccessToken) {
|
|
1961
|
+
showForFacebook = false;
|
|
1974
1962
|
}
|
|
1975
1963
|
}
|
|
1976
1964
|
}
|
|
1977
|
-
|
|
1978
1965
|
const showForViber = (![VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(channel.toLowerCase()) ||
|
|
1979
1966
|
(channel.toLowerCase() === VIBER_CHANNEL && !this.props.isFullMode && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))) ||
|
|
1980
|
-
(channel.toLowerCase() === FACEBOOK_CHANNEL &&
|
|
1967
|
+
(channel.toLowerCase() === FACEBOOK_CHANNEL && showForFacebook)
|
|
1981
1968
|
);
|
|
1982
1969
|
|
|
1983
1970
|
|
|
@@ -9,7 +9,7 @@ import * as types from './constants';
|
|
|
9
9
|
|
|
10
10
|
const initialState = fromJS({
|
|
11
11
|
getAllTemplatesInProgress: false,
|
|
12
|
-
fetchingOrgLevelCampaignSettings:
|
|
12
|
+
fetchingOrgLevelCampaignSettings: true,
|
|
13
13
|
templates: [],
|
|
14
14
|
deleteResponse: {},
|
|
15
15
|
deleteTemplateInProgress: false,
|
|
@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
|
|
|
10
10
|
import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
|
|
11
11
|
import { createStructuredSelector } from 'reselect';
|
|
12
12
|
import { bindActionCreators } from 'redux';
|
|
13
|
-
import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon
|
|
13
|
+
import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
|
|
14
14
|
import { find, get } from 'lodash';
|
|
15
15
|
import isEmpty from 'lodash/isEmpty';
|
|
16
16
|
import Helmet from 'react-helmet';
|
|
@@ -45,7 +45,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
45
45
|
channelsToDisable = [],
|
|
46
46
|
isFullMode,
|
|
47
47
|
onChannelChange,
|
|
48
|
-
showDisabledFBInfo,
|
|
49
48
|
} = props;
|
|
50
49
|
|
|
51
50
|
const defaultPanes = {
|
|
@@ -81,15 +80,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
81
80
|
if (channelsToDisable.includes(pane.key)) {
|
|
82
81
|
// eslint-disable-next-line no-param-reassign
|
|
83
82
|
pane.disabled = true;
|
|
84
|
-
if (pane.key === 'facebook' && showDisabledFBInfo) {
|
|
85
|
-
pane.tab = (<CapTooltip
|
|
86
|
-
title={
|
|
87
|
-
intl.formatMessage(messages.facebookDisableinfo)
|
|
88
|
-
}
|
|
89
|
-
>
|
|
90
|
-
{intl.formatMessage(messages.facebook)}
|
|
91
|
-
</CapTooltip>);
|
|
92
|
-
}
|
|
93
83
|
}
|
|
94
84
|
return pane;
|
|
95
85
|
});
|
|
@@ -158,16 +148,13 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
158
148
|
);
|
|
159
149
|
|
|
160
150
|
getFacebookComponent = () => {
|
|
161
|
-
const { messageDetails, cap, onFacebookSubmit,
|
|
151
|
+
const { messageDetails, cap, onFacebookSubmit, isFullMode } = this.props;
|
|
162
152
|
return (
|
|
163
153
|
<Facebook
|
|
164
154
|
{...this.props}
|
|
165
155
|
messageDetails={messageDetails}
|
|
166
156
|
cap={cap}
|
|
167
157
|
onFacebookSubmit={onFacebookSubmit}
|
|
168
|
-
messageStrategy={messageStrategy}
|
|
169
|
-
showDisabledFBInfo={showDisabledFBInfo}
|
|
170
|
-
orgUnitId={orgUnitId}
|
|
171
158
|
/>
|
|
172
159
|
);
|
|
173
160
|
}
|
|
@@ -191,21 +178,19 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
191
178
|
getTemplatesComponent(channel) {
|
|
192
179
|
// const templates = this.props.Templates[`${channel}Templates`];
|
|
193
180
|
let query = {};
|
|
194
|
-
|
|
195
|
-
if (!isFullMode) {
|
|
181
|
+
if (!this.props.isFullMode) {
|
|
196
182
|
query = {type: 'embedded', module: 'library'};
|
|
197
183
|
switch (channel) {
|
|
198
184
|
case 'line':
|
|
199
185
|
return this.getLineComponent();
|
|
200
186
|
case 'ftp':
|
|
201
187
|
return this.getFTPComponent();
|
|
188
|
+
case 'facebook':
|
|
189
|
+
return this.getFacebookComponent();
|
|
202
190
|
default:
|
|
203
191
|
break;
|
|
204
192
|
}
|
|
205
193
|
}
|
|
206
|
-
if (messageStrategy !== "X_ENGAGE" && channel === 'facebook' && !isFullMode) {
|
|
207
|
-
return this.getFacebookComponent();
|
|
208
|
-
}
|
|
209
194
|
const location = {pathname: `/${channel}`, search: '', query};
|
|
210
195
|
switch (channel) {
|
|
211
196
|
case 'call_task':
|
|
@@ -220,10 +205,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
|
|
|
220
205
|
router={this.props.router}
|
|
221
206
|
isFullMode={this.props.isFullMode}
|
|
222
207
|
createNew={this.props.createNew}
|
|
223
|
-
onSelectTemplate={this.props.onSelectTemplate}
|
|
208
|
+
onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
|
|
224
209
|
renderNewCardGrid={this.getTemplateDataForGrid}
|
|
225
210
|
handlePeviewTemplate={this.props.handlePeviewTemplate}
|
|
226
|
-
messageStrategy={this.props.messageStrategy}
|
|
227
211
|
/>);
|
|
228
212
|
}
|
|
229
213
|
}
|
|
@@ -303,7 +287,6 @@ TemplatesV2.propTypes = {
|
|
|
303
287
|
cap: PropTypes.object,
|
|
304
288
|
authData: PropTypes.object,
|
|
305
289
|
FTPMode: PropTypes.string,
|
|
306
|
-
messageStrategy: PropTypes.string,
|
|
307
290
|
};
|
|
308
291
|
|
|
309
292
|
TemplatesV2.defaultProps = {
|
|
@@ -66,8 +66,4 @@ export default defineMessages({
|
|
|
66
66
|
id: 'creatives.containersV2.TemplatesV2.line',
|
|
67
67
|
defaultMessage: 'Line',
|
|
68
68
|
},
|
|
69
|
-
facebookDisableinfo: {
|
|
70
|
-
id: `creatives.containersV2.TemplatesV2.facebookDisableinfo`,
|
|
71
|
-
defaultMessage: 'Please integrate Facebook Ad page ID & username to enable this option.',
|
|
72
|
-
},
|
|
73
69
|
});
|