@capillarytech/creatives-library 7.7.1 → 7.7.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/index.js +3 -3
- package/package.json +1 -1
- package/v2Components/TemplatePreview/index.js +1 -0
- package/v2Containers/Cap/index.js +6 -5
- package/v2Containers/CapFacebookPreview/index.js +11 -9
- package/v2Containers/CapFacebookPreview/index.scss +4 -0
- package/v2Containers/CapFacebookPreview/messages.js +2 -2
- package/v2Containers/CreativesContainer/SlideBoxContent.js +16 -1
- package/v2Containers/CreativesContainer/index.js +122 -12
- package/v2Containers/Facebook/Advertisement/index.js +64 -35
- package/v2Containers/Facebook/Advertisement/index.scss +1 -1
- package/v2Containers/Facebook/Facebook.style.js +1 -1
- package/v2Containers/Facebook/constants.js +4 -0
- package/v2Containers/Facebook/index.js +198 -122
- package/v2Containers/Facebook/messages.js +24 -4
- package/v2Containers/Templates/index.js +37 -21
- package/v2Containers/Templates/messages.js +1 -1
- package/v2Containers/Templates/reducer.js +1 -1
- package/v2Containers/TemplatesV2/index.js +23 -6
- package/v2Containers/TemplatesV2/messages.js +4 -0
- package/v2Components/TemplatePreview/assets/images/mobile.svg +0 -24
- 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 -1132
- 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/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
|
@@ -182,13 +182,14 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
|
|
|
182
182
|
USERNAME : userName,
|
|
183
183
|
EMAIL : userEmail
|
|
184
184
|
} = {},
|
|
185
|
-
proxyOrgList,
|
|
185
|
+
proxyOrgList =[],
|
|
186
186
|
isCapUser,
|
|
187
|
-
refID
|
|
187
|
+
refID,
|
|
188
|
+
orgName: userOrgName,
|
|
188
189
|
} = userData;
|
|
189
|
-
const {
|
|
190
|
-
orgName
|
|
191
|
-
}
|
|
190
|
+
const { orgName } = _.find(proxyOrgList, { orgID: orgID }) || {
|
|
191
|
+
orgName: userOrgName,
|
|
192
|
+
};
|
|
192
193
|
const gtmData = {
|
|
193
194
|
isCapUser: isCapUser,
|
|
194
195
|
orgId: orgID,
|
|
@@ -30,7 +30,7 @@ import {
|
|
|
30
30
|
CAROUSEL,
|
|
31
31
|
NO_CALL_TO_ACTION,
|
|
32
32
|
} from '../../v2Containers/Facebook/Advertisement/constant';
|
|
33
|
-
|
|
33
|
+
import './index.scss';
|
|
34
34
|
|
|
35
35
|
export const CapFacebookPreview = (props) => {
|
|
36
36
|
const {
|
|
@@ -45,6 +45,7 @@ export const CapFacebookPreview = (props) => {
|
|
|
45
45
|
orgUnitFacebookPageSettingsMap = {},
|
|
46
46
|
accessToken,
|
|
47
47
|
accountId,
|
|
48
|
+
defaultGeneratePreview,
|
|
48
49
|
} = props;
|
|
49
50
|
const {
|
|
50
51
|
formatMessage,
|
|
@@ -198,6 +199,7 @@ export const CapFacebookPreview = (props) => {
|
|
|
198
199
|
ad_format: adPreviewFormat,
|
|
199
200
|
},
|
|
200
201
|
};
|
|
202
|
+
const { webSiteLink= "" } = (previewData || [] )[0] || {};
|
|
201
203
|
if (selectedAd !== CAROUSEL) {
|
|
202
204
|
const {
|
|
203
205
|
imageData = {},
|
|
@@ -272,6 +274,7 @@ export const CapFacebookPreview = (props) => {
|
|
|
272
274
|
message: primaryText,
|
|
273
275
|
child_attachments: childData,
|
|
274
276
|
multi_share_end_card: false,
|
|
277
|
+
"link":webSiteLink,
|
|
275
278
|
},
|
|
276
279
|
};
|
|
277
280
|
facebookPreviewActions.getPreview(data);
|
|
@@ -283,22 +286,19 @@ export const CapFacebookPreview = (props) => {
|
|
|
283
286
|
const r = random + 1;
|
|
284
287
|
setRandom(r);
|
|
285
288
|
};
|
|
286
|
-
|
|
287
289
|
const getIframe = (iframe) => {
|
|
288
290
|
const divTag = document.createElement('div');
|
|
289
291
|
divTag.innerHTML = iframe;
|
|
290
292
|
const src = divTag.getElementsByTagName('iframe')[0].getAttribute('src');
|
|
291
|
-
const width = divTag.getElementsByTagName('iframe')[0].getAttribute('width');
|
|
292
|
-
const height = divTag.getElementsByTagName('iframe')[0].getAttribute('height');
|
|
293
293
|
return (<>
|
|
294
294
|
<iframe
|
|
295
295
|
src={src}
|
|
296
296
|
key={random}
|
|
297
|
-
scrolling="yes"
|
|
298
297
|
style={{border: "none"}}
|
|
299
|
-
width={
|
|
300
|
-
|
|
301
|
-
|
|
298
|
+
width={"600px"}
|
|
299
|
+
scrolling="no"
|
|
300
|
+
height={"1000px"}
|
|
301
|
+
className="cap-facebook-ad-iframe"
|
|
302
302
|
/>
|
|
303
303
|
</>);
|
|
304
304
|
};
|
|
@@ -317,6 +317,9 @@ export const CapFacebookPreview = (props) => {
|
|
|
317
317
|
|
|
318
318
|
useEffect(() => {
|
|
319
319
|
facebookPreviewActions.clearPreview();
|
|
320
|
+
if (defaultGeneratePreview) {
|
|
321
|
+
generatePreview();
|
|
322
|
+
}
|
|
320
323
|
}, []);
|
|
321
324
|
|
|
322
325
|
useEffect(() => {
|
|
@@ -335,7 +338,6 @@ export const CapFacebookPreview = (props) => {
|
|
|
335
338
|
setDisableAfterPreviewGenerate(false);
|
|
336
339
|
}
|
|
337
340
|
}, [previewIframeError]);
|
|
338
|
-
|
|
339
341
|
return (
|
|
340
342
|
<CapSpin spinning={isFetchingPreview}>
|
|
341
343
|
<div style={{display: 'inline-block'}}>
|
|
@@ -73,7 +73,7 @@ export default defineMessages({
|
|
|
73
73
|
},
|
|
74
74
|
instagramStandard: {
|
|
75
75
|
id: `${messagePrefix}.instagramStandard`,
|
|
76
|
-
defaultMessage: '
|
|
76
|
+
defaultMessage: 'Instagram standard',
|
|
77
77
|
},
|
|
78
78
|
instagramStory: {
|
|
79
79
|
id: `${messagePrefix}.instagramStory`,
|
|
@@ -81,7 +81,7 @@ export default defineMessages({
|
|
|
81
81
|
},
|
|
82
82
|
instagramExploreContextual: {
|
|
83
83
|
id: `${messagePrefix}.instagramExploreContextual`,
|
|
84
|
-
defaultMessage: '
|
|
84
|
+
defaultMessage: 'Instagram explore contextual',
|
|
85
85
|
},
|
|
86
86
|
instagramExploreImmersive: {
|
|
87
87
|
id: `${messagePrefix}.instagramExploreImmersive`,
|
|
@@ -137,6 +137,10 @@ function SlideBoxContent(props) {
|
|
|
137
137
|
handleClose,
|
|
138
138
|
onFTPSubmit,
|
|
139
139
|
campaignSettings,
|
|
140
|
+
messageStrategy,
|
|
141
|
+
fbAdManager,
|
|
142
|
+
showDisabledFBInfo,
|
|
143
|
+
orgUnitId,
|
|
140
144
|
} = props;
|
|
141
145
|
const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
|
|
142
146
|
const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
|
|
@@ -334,6 +338,9 @@ function SlideBoxContent(props) {
|
|
|
334
338
|
slidBoxContent={slidBoxContent}
|
|
335
339
|
FTPMode="create"
|
|
336
340
|
selectedOfferDetails={selectedOfferDetails}
|
|
341
|
+
messageStrategy={messageStrategy}
|
|
342
|
+
showDisabledFBInfo={showDisabledFBInfo}
|
|
343
|
+
orgUnitId={orgUnitId}
|
|
337
344
|
/>
|
|
338
345
|
)}
|
|
339
346
|
{isPreview && (
|
|
@@ -558,7 +565,10 @@ function SlideBoxContent(props) {
|
|
|
558
565
|
isFullMode={isFullMode}
|
|
559
566
|
createNew
|
|
560
567
|
getFormSubscriptionData={getFormData}
|
|
561
|
-
|
|
568
|
+
messageStrategy={messageStrategy}
|
|
569
|
+
fbAdManager={fbAdManager}
|
|
570
|
+
onSelectTemplate={onSelectTemplate}
|
|
571
|
+
orgUnitId={orgUnitId}
|
|
562
572
|
/>
|
|
563
573
|
)
|
|
564
574
|
}
|
|
@@ -575,6 +585,7 @@ function SlideBoxContent(props) {
|
|
|
575
585
|
id: templateData._id,
|
|
576
586
|
}}
|
|
577
587
|
getFormSubscriptionData={getFormData}
|
|
588
|
+
fbAdManager={fbAdManager}
|
|
578
589
|
/>
|
|
579
590
|
)
|
|
580
591
|
}
|
|
@@ -687,5 +698,9 @@ SlideBoxContent.propTypes = {
|
|
|
687
698
|
saveMessage: PropTypes.func,
|
|
688
699
|
selectedAccount: PropTypes.object,
|
|
689
700
|
onFTPSubmit: PropTypes.func,
|
|
701
|
+
messageStrategy: PropTypes.string,
|
|
702
|
+
fbAdManager: PropTypes.string,
|
|
703
|
+
showDisabledFBInfo: PropTypes.boolean,
|
|
704
|
+
orgUnitId: PropTypes.any,
|
|
690
705
|
};
|
|
691
706
|
export default SlideBoxContent;
|
|
@@ -25,6 +25,9 @@ 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
|
+
|
|
28
31
|
|
|
29
32
|
const classPrefix = 'add-creatives-section';
|
|
30
33
|
|
|
@@ -51,7 +54,6 @@ class Creatives extends React.Component {
|
|
|
51
54
|
currentChannel: this.props.channel || 'sms',
|
|
52
55
|
weChatTemplateType: '',
|
|
53
56
|
weChatMaptemplateStep: 0,
|
|
54
|
-
|
|
55
57
|
};
|
|
56
58
|
this.creativesTemplateSteps = {
|
|
57
59
|
1: 'modeSelection',
|
|
@@ -74,8 +76,12 @@ class Creatives extends React.Component {
|
|
|
74
76
|
this.setState({templateNameExists: false});
|
|
75
77
|
}
|
|
76
78
|
|
|
77
|
-
onSelectTemplate = (template) => {
|
|
78
|
-
|
|
79
|
+
onSelectTemplate = (template, fbAdManager) => {
|
|
80
|
+
const data = {slidBoxContent: 'editTemplate', templateData: template};
|
|
81
|
+
if (fbAdManager) {
|
|
82
|
+
data.fbAdManager = fbAdManager;
|
|
83
|
+
}
|
|
84
|
+
this.setState(data);
|
|
79
85
|
};
|
|
80
86
|
onPreviewTemplate = (template) => {
|
|
81
87
|
const templateData = template;
|
|
@@ -87,8 +93,12 @@ class Creatives extends React.Component {
|
|
|
87
93
|
onEditTemplate = () => {
|
|
88
94
|
this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
|
|
89
95
|
};
|
|
90
|
-
onCreateNew = () => {
|
|
91
|
-
|
|
96
|
+
onCreateNew = (fbAdManager) => {
|
|
97
|
+
const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
|
|
98
|
+
if (fbAdManager) {
|
|
99
|
+
data.fbAdManager = fbAdManager;
|
|
100
|
+
}
|
|
101
|
+
this.setState(data);
|
|
92
102
|
};
|
|
93
103
|
|
|
94
104
|
onShowTemplates = () => {
|
|
@@ -220,11 +230,61 @@ class Creatives extends React.Component {
|
|
|
220
230
|
break;
|
|
221
231
|
}
|
|
222
232
|
case constants.FACEBOOK: {
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
233
|
+
if (templateData.fbContentType === CREATIVE) {
|
|
234
|
+
const {
|
|
235
|
+
creativeType = "",
|
|
236
|
+
selectedFacebookAccount = {},
|
|
237
|
+
facebookCreativeList: fbCreativeList = [],
|
|
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
|
+
}
|
|
228
288
|
break;
|
|
229
289
|
}
|
|
230
290
|
case constants.LINE: {
|
|
@@ -376,6 +436,50 @@ class Creatives extends React.Component {
|
|
|
376
436
|
};
|
|
377
437
|
}
|
|
378
438
|
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;
|
|
379
483
|
default:
|
|
380
484
|
break;
|
|
381
485
|
}
|
|
@@ -578,8 +682,8 @@ class Creatives extends React.Component {
|
|
|
578
682
|
return false;
|
|
579
683
|
}
|
|
580
684
|
shouldShowHeader = () => {
|
|
581
|
-
const {currentChannel} = this.state;
|
|
582
|
-
if (currentChannel === constants.FACEBOOK) {
|
|
685
|
+
const {currentChannel, slidBoxContent} = this.state;
|
|
686
|
+
if (currentChannel.toUpperCase() === constants.FACEBOOK && slidBoxContent === 'createTemplate') {
|
|
583
687
|
return false;
|
|
584
688
|
}
|
|
585
689
|
return true;
|
|
@@ -622,6 +726,7 @@ class Creatives extends React.Component {
|
|
|
622
726
|
campaignSettings={this.props.Templates.campaignSettings}
|
|
623
727
|
location={this.props.location}
|
|
624
728
|
messageDetails={this.props.messageDetails}
|
|
729
|
+
showDisabledFBInfo={this.props.showDisabledFBInfo}
|
|
625
730
|
getFormData={this.getFormData}
|
|
626
731
|
onCallTaskSubmit={this.onCallTaskSubmit}
|
|
627
732
|
onCreateNew={this.onCreateNew}
|
|
@@ -637,6 +742,7 @@ class Creatives extends React.Component {
|
|
|
637
742
|
onEnterTemplateName={this.onEnterTemplateName}
|
|
638
743
|
onRemoveTemplateName={this.onRemoveTemplateName}
|
|
639
744
|
onResetStep={this.resetStep}
|
|
745
|
+
fbAdManager={this.state.fbAdManager}
|
|
640
746
|
cap={cap}
|
|
641
747
|
setIsLoadingContent={this.setIsLoadingContent}
|
|
642
748
|
onMobilepushModeChange={this.onMobilepushModeChange}
|
|
@@ -661,6 +767,8 @@ class Creatives extends React.Component {
|
|
|
661
767
|
handleClose={this.handleCloseSlideBox}
|
|
662
768
|
onFTPSubmit={getCreativesData}
|
|
663
769
|
editor={editor}
|
|
770
|
+
messageStrategy={this.props.strategy}
|
|
771
|
+
orgUnitId={this.props.orgUnitId}
|
|
664
772
|
/>
|
|
665
773
|
}
|
|
666
774
|
footer={this.shouldShowFooter() &&
|
|
@@ -713,6 +821,8 @@ Creatives.propTypes = {
|
|
|
713
821
|
selectedWeChatAccount: PropTypes.object,
|
|
714
822
|
Templates: PropTypes.object,
|
|
715
823
|
selectedAccount: PropTypes.object,
|
|
824
|
+
strategy: PropTypes.string,
|
|
825
|
+
orgUnitId: PropTypes.number,
|
|
716
826
|
};
|
|
717
827
|
const mapStatesToProps = () => createStructuredSelector({
|
|
718
828
|
isLoading: isLoadingSelector(),
|
|
@@ -84,10 +84,12 @@ export const Advertisement = (props) => {
|
|
|
84
84
|
actions,
|
|
85
85
|
fbADData = {},
|
|
86
86
|
onCreateComplete,
|
|
87
|
-
templateData,
|
|
87
|
+
templateData = {},
|
|
88
88
|
params,
|
|
89
89
|
getFormSubscriptionData,
|
|
90
90
|
facebookTemplateData,
|
|
91
|
+
selectedMarketingObjective,
|
|
92
|
+
orgUnitId,
|
|
91
93
|
} = props;
|
|
92
94
|
const {
|
|
93
95
|
formatMessage,
|
|
@@ -130,7 +132,7 @@ export const Advertisement = (props) => {
|
|
|
130
132
|
orgUnitFacebookPageSettingsMap = {},
|
|
131
133
|
employeeAccessToken: accessToken = "",
|
|
132
134
|
accountId = "",
|
|
133
|
-
} = selectedFacebookAccount;
|
|
135
|
+
} = selectedFacebookAccount || {};
|
|
134
136
|
const { pageAccessToken, pageId: pId } = orgUnitFacebookPageSettingsMap[pageId] || {};
|
|
135
137
|
videoData = {
|
|
136
138
|
accessToken,
|
|
@@ -160,7 +162,7 @@ export const Advertisement = (props) => {
|
|
|
160
162
|
}, [paramObj.id]);
|
|
161
163
|
|
|
162
164
|
useEffect(() => {
|
|
163
|
-
if (
|
|
165
|
+
if (params?.id || templateData?.edit) {
|
|
164
166
|
const { FacebookAd = [], pageOrgUnitId: editPageId} = get(templateData, `versions.base.content`) || get(fbADData, `templateDetails.versions.base.content`) || {};
|
|
165
167
|
const editMessageTitle = (templateData || {}).name || get(fbADData, 'templateDetails.name');
|
|
166
168
|
const editFBContent = Object.values(FacebookAd);
|
|
@@ -219,6 +221,7 @@ export const Advertisement = (props) => {
|
|
|
219
221
|
}
|
|
220
222
|
}, [fbADData[`templateDetails`] || templateData]);
|
|
221
223
|
|
|
224
|
+
|
|
222
225
|
const CustomToolTip = useCallback((msg) => <CapTooltipWithInfo
|
|
223
226
|
infoIconProps={{svgProps: {width: 12, height: 12}, style: {marginLeft: 5}}}
|
|
224
227
|
title={msg}
|
|
@@ -351,8 +354,7 @@ export const Advertisement = (props) => {
|
|
|
351
354
|
}
|
|
352
355
|
messageData.push(data);
|
|
353
356
|
});
|
|
354
|
-
|
|
355
|
-
return {
|
|
357
|
+
let finalResponse = {
|
|
356
358
|
versions: {
|
|
357
359
|
base: {
|
|
358
360
|
content: {
|
|
@@ -364,12 +366,17 @@ export const Advertisement = (props) => {
|
|
|
364
366
|
type: "FACEBOOK",
|
|
365
367
|
name: messageTitle,
|
|
366
368
|
};
|
|
369
|
+
if (!isFullMode) {
|
|
370
|
+
finalResponse = {...finalResponse, selectedMarketingObjective, accountId};
|
|
371
|
+
}
|
|
372
|
+
return finalResponse;
|
|
367
373
|
}, [carouselData,
|
|
368
374
|
pageId,
|
|
369
375
|
messageTitle,
|
|
370
376
|
primaryText,
|
|
371
377
|
callToAction,
|
|
372
|
-
displayLink
|
|
378
|
+
displayLink,
|
|
379
|
+
selectedMarketingObjective]);
|
|
373
380
|
|
|
374
381
|
const onCreateFacebookAd = useCallback( () => {
|
|
375
382
|
actions.createTemplate(
|
|
@@ -445,6 +452,7 @@ export const Advertisement = (props) => {
|
|
|
445
452
|
updateMessageTitle(val);
|
|
446
453
|
}, [messageTitle]);
|
|
447
454
|
|
|
455
|
+
|
|
448
456
|
const isDisableDone = useCallback((isPreview) => {
|
|
449
457
|
let flag = false;
|
|
450
458
|
if (primaryText === "" ) {
|
|
@@ -494,8 +502,7 @@ export const Advertisement = (props) => {
|
|
|
494
502
|
selectedAd,
|
|
495
503
|
]
|
|
496
504
|
);
|
|
497
|
-
|
|
498
|
-
const isDisableContinue = () => messageTitle.trim() === "" || selectedAd === "";
|
|
505
|
+
const isDisableContinue = () => isFullMode ? (messageTitle.trim() === "" || selectedAd === "") : ( selectedAd === "");
|
|
499
506
|
|
|
500
507
|
const onClickContinue = useCallback(() => { updateStep('createFacebookAd'); }, [step]);
|
|
501
508
|
|
|
@@ -804,8 +811,8 @@ export const Advertisement = (props) => {
|
|
|
804
811
|
setPageId(value);
|
|
805
812
|
}, [pageId]);
|
|
806
813
|
|
|
807
|
-
const selectedFacebookAccount =
|
|
808
|
-
const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount;
|
|
814
|
+
const selectedFacebookAccount = templateData?.edit ? templateData?.selectedFacebookAccount : facebookTemplateData?.selectedFacebookAccount;
|
|
815
|
+
const {orgUnitFacebookPageSettingsMap = {}, employeeAccessToken: accessToken = "", accountId = "" } = selectedFacebookAccount || {};
|
|
809
816
|
|
|
810
817
|
const getPageAccessOrgs = useCallback(() => {
|
|
811
818
|
const {status, data } = fbADData.orgOuData || {};
|
|
@@ -815,9 +822,22 @@ export const Advertisement = (props) => {
|
|
|
815
822
|
const orgName = (
|
|
816
823
|
proxyOrgList.find(({ orgID }) => orgID === Number(orgId)) || {}
|
|
817
824
|
).orgName;
|
|
818
|
-
if (status
|
|
825
|
+
if (!status) {
|
|
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') {
|
|
819
839
|
Object.keys(data).forEach((obj) => {
|
|
820
|
-
if ((orgUnitFacebookPageSettingsMap[data[obj]] || {}).pageAccessToken) {
|
|
840
|
+
if ((orgUnitFacebookPageSettingsMap[data[obj]] || {}).pageAccessToken && data[obj]!== -1) {
|
|
821
841
|
pageAccessOrgsOptions.push({label: obj, value: data[obj]});
|
|
822
842
|
}
|
|
823
843
|
});
|
|
@@ -836,7 +856,7 @@ export const Advertisement = (props) => {
|
|
|
836
856
|
const options = getPageAccessOrgs() || [];
|
|
837
857
|
const { data = {} } = fbADData.orgOuData || {};
|
|
838
858
|
const selectedPageName = Object.keys(data).find((key) => data[key] === pageId);
|
|
839
|
-
return ( (step === 'modeSelection') ?
|
|
859
|
+
return ( (step === 'modeSelection' && (isEmpty(templateData) || templateData?.mode === "create")) ?
|
|
840
860
|
( <CapSpin spinning={adSpinLoader} className="add-facebook-ad-section">
|
|
841
861
|
<div style={{ position: 'fixed', top: '25px', zIndex: 1}}>
|
|
842
862
|
<CapHeader
|
|
@@ -845,25 +865,27 @@ export const Advertisement = (props) => {
|
|
|
845
865
|
className={"cap-header-facebook-ad"}
|
|
846
866
|
/>
|
|
847
867
|
</div>
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
868
|
+
{isFullMode && <>
|
|
869
|
+
<CapInput
|
|
870
|
+
id={`fbAd_input`}
|
|
871
|
+
onChange={onTextTitleChange}
|
|
872
|
+
className="text-template-title"
|
|
873
|
+
defaultValue={messageTitle || ''}
|
|
874
|
+
value={messageTitle || ''}
|
|
875
|
+
style={{marginBottom: 27, width: '762px'}}
|
|
876
|
+
size="default"
|
|
877
|
+
label={formatMessage(messages.creativeName)}
|
|
878
|
+
/>
|
|
879
|
+
<CapSelect
|
|
880
|
+
label={formatMessage(messages.facebookPage)}
|
|
881
|
+
key={"select-facebook-page"}
|
|
882
|
+
onChange={onChangeFacebookPage}
|
|
883
|
+
options={options}
|
|
884
|
+
defaultValue={(options[0] || {} ).value}
|
|
885
|
+
value={pageId || (options[0] || {} ).value}
|
|
886
|
+
style={{marginBottom: 27, width: '372px'}}
|
|
887
|
+
></CapSelect>
|
|
888
|
+
</>}
|
|
867
889
|
<CapHeading
|
|
868
890
|
type="h4"
|
|
869
891
|
style={{marginBottom: 11}}
|
|
@@ -887,8 +909,15 @@ export const Advertisement = (props) => {
|
|
|
887
909
|
</FbAdFooter>
|
|
888
910
|
</CapSpin> ) : (
|
|
889
911
|
<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>}
|
|
890
919
|
<CapRow className="add-facebook-ad-section" >
|
|
891
|
-
<div className="cap-header-facebook-ad">
|
|
920
|
+
{isFullMode && <div className="cap-header-facebook-ad">
|
|
892
921
|
<CapHeading
|
|
893
922
|
type="h2"
|
|
894
923
|
className="truncate-text"
|
|
@@ -906,7 +935,7 @@ export const Advertisement = (props) => {
|
|
|
906
935
|
title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
|
|
907
936
|
onClick={onClickEditName}
|
|
908
937
|
/>}
|
|
909
|
-
</div>
|
|
938
|
+
</div>}
|
|
910
939
|
<CapColumn span={12}>
|
|
911
940
|
{isFullMode && <><CapHeading
|
|
912
941
|
type="h4"
|
|
@@ -981,8 +1010,8 @@ Advertisement.propTypes = {
|
|
|
981
1010
|
facebookTemplateData: PropTypes.object,
|
|
982
1011
|
templateData: PropTypes.object,
|
|
983
1012
|
params: PropTypes.object,
|
|
1013
|
+
selectedMarketingObjective: PropTypes.any,
|
|
984
1014
|
|
|
985
1015
|
};
|
|
986
1016
|
|
|
987
1017
|
export default injectIntl(Advertisement);
|
|
988
|
-
|
|
@@ -47,3 +47,7 @@ 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";
|