@capillarytech/creatives-library 7.7.12 → 7.7.13
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 +3 -1
- package/v2Components/TemplatePreview/index.js +1 -0
- package/v2Containers/CapFacebookPreview/index.js +15 -11
- 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 +125 -12
- package/v2Containers/Facebook/Advertisement/index.js +80 -41
- package/v2Containers/Facebook/Advertisement/index.scss +3 -3
- 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 +4 -4
- package/v2Containers/TemplatesV2/index.js +23 -6
- package/v2Containers/TemplatesV2/messages.js +4 -0
|
@@ -17,7 +17,7 @@ $classPrefix: add-facebook-ad-section;
|
|
|
17
17
|
text-overflow: ellipsis;
|
|
18
18
|
white-space: nowrap;
|
|
19
19
|
min-width: 112px;
|
|
20
|
-
max-width:
|
|
20
|
+
max-width: 320px;
|
|
21
21
|
display: inline-block;
|
|
22
22
|
}
|
|
23
23
|
.cap-input-edit-name{
|
|
@@ -30,7 +30,7 @@ $classPrefix: add-facebook-ad-section;
|
|
|
30
30
|
|
|
31
31
|
.cap-header-facebook-ad{
|
|
32
32
|
position: fixed;
|
|
33
|
-
top:
|
|
33
|
+
top: 58px;
|
|
34
34
|
z-index: 1000;
|
|
35
35
|
.title-desc-container{
|
|
36
36
|
padding-left: 10px;
|
|
@@ -48,7 +48,7 @@ $classPrefix: add-facebook-ad-section;
|
|
|
48
48
|
.cap-custom-image-upload{
|
|
49
49
|
.dragger-button.re-upload{
|
|
50
50
|
margin-top: 50px;
|
|
51
|
-
top:
|
|
51
|
+
top: 35px;
|
|
52
52
|
position: absolute;
|
|
53
53
|
right: 60px;
|
|
54
54
|
color: $FONT_COLOR_05;
|
|
@@ -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";
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*
|
|
5
5
|
*/
|
|
6
6
|
import PropTypes from "prop-types";
|
|
7
|
-
import React, { useState, useEffect } from "react";
|
|
7
|
+
import React, { useState, useEffect, useCallback } from "react";
|
|
8
8
|
import { injectIntl, FormattedMessage, intlShape } from "react-intl";
|
|
9
9
|
import {
|
|
10
10
|
CapHeading,
|
|
@@ -15,7 +15,10 @@ import {
|
|
|
15
15
|
CapDrawer,
|
|
16
16
|
CapCustomCard,
|
|
17
17
|
CapIcon,
|
|
18
|
+
CapRadioGroup,
|
|
19
|
+
CapTooltip,
|
|
18
20
|
} from '@capillarytech/cap-ui-library';
|
|
21
|
+
import Templates from '../Templates';
|
|
19
22
|
import { createStructuredSelector } from 'reselect';
|
|
20
23
|
import { connect } from 'react-redux';
|
|
21
24
|
import { bindActionCreators } from 'redux';
|
|
@@ -38,6 +41,8 @@ import {
|
|
|
38
41
|
VALUE_REACH,
|
|
39
42
|
VALUE_VIDEO_VIEWS,
|
|
40
43
|
VALUE_LINK_CLICKS,
|
|
44
|
+
AD_MANAGER,
|
|
45
|
+
CREATIVE,
|
|
41
46
|
} from './constants';
|
|
42
47
|
|
|
43
48
|
const StyledCampaignDetailCapColumn = withStyles(CapColumn, CampaignDetailCapColumn);
|
|
@@ -183,12 +188,25 @@ const Facebook = (props) => {
|
|
|
183
188
|
onCreateComplete,
|
|
184
189
|
params,
|
|
185
190
|
facebookTemplateData,
|
|
191
|
+
messageStrategy,
|
|
192
|
+
router,
|
|
193
|
+
handlePeviewTemplate,
|
|
194
|
+
renderNewCardGrid,
|
|
195
|
+
onSelectTemplate,
|
|
196
|
+
createNew,
|
|
197
|
+
fbAdManager,
|
|
198
|
+
getFormSubscriptionData,
|
|
199
|
+
showDisabledFBInfo,
|
|
200
|
+
orgUnitId,
|
|
186
201
|
} = props;
|
|
187
202
|
const {
|
|
188
203
|
selectedMarketingObjective: fbMarketingObjectiveValue = VALUE_REACH,
|
|
189
204
|
} = templateData || {};
|
|
190
205
|
const [isDrawerVisible, setDrawerVisibility] = useState(false);
|
|
191
206
|
const [selectedMarketingObjective, setMarketingObjective] = useState(socialObjective || fbMarketingObjectiveValue);
|
|
207
|
+
const [adManager, setAdManager] = useState(AD_MANAGER);
|
|
208
|
+
const [showTemplateList, setTemplateList] = useState(false);
|
|
209
|
+
|
|
192
210
|
|
|
193
211
|
useEffect(() => {
|
|
194
212
|
if (!isFullMode) {
|
|
@@ -225,131 +243,188 @@ const Facebook = (props) => {
|
|
|
225
243
|
|
|
226
244
|
const onMarketingObjectiveSelect = (value) => setMarketingObjective(value);
|
|
227
245
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
<CapHeading type="h4">
|
|
234
|
-
<FormattedMessage {...messages.fbAccount} />
|
|
235
|
-
</CapHeading>
|
|
236
|
-
<CapHeading type="h3">{accountName}</CapHeading>
|
|
237
|
-
</div>
|
|
246
|
+
const radioOptions = [{
|
|
247
|
+
label: showDisabledFBInfo ? <CapTooltip title={intl.formatMessage(messages.facebookDisableinfo)}>{intl.formatMessage(messages.capFbAdManager)}</CapTooltip> : intl.formatMessage(messages.capFbAdManager), value: CREATIVE, disabled: showDisabledFBInfo,
|
|
248
|
+
}, {
|
|
249
|
+
label: intl.formatMessage(messages.fbAdManager), value: AD_MANAGER,
|
|
250
|
+
}];
|
|
238
251
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
</CapHeading>
|
|
243
|
-
<CapLabel type="label1">
|
|
244
|
-
<FormattedMessage
|
|
245
|
-
{...messages.fbAdCampaignSetDetailsDescription}
|
|
246
|
-
/>
|
|
247
|
-
</CapLabel>
|
|
248
|
-
</div>
|
|
252
|
+
const onChangeAdManager = useCallback(({ target: { value } }) => {
|
|
253
|
+
setAdManager(value);
|
|
254
|
+
}, [setAdManager]);
|
|
249
255
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
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" || (templateData?.edit && templateData?.fbContentType !==CREATIVE)) ) ?
|
|
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>
|
|
291
297
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
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>
|
|
301
308
|
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
309
|
+
<CapRow span={12} type="flex">
|
|
310
|
+
{campaignDataList.map(({ label, value, onChange }, index) => (
|
|
311
|
+
<StyledCampaignDetailCapColumn
|
|
312
|
+
span={index % 2 === 0 ? 6 : 14}
|
|
313
|
+
key={label}
|
|
314
|
+
>
|
|
315
|
+
<CapRow>
|
|
316
|
+
<CapLabel type="label2">
|
|
317
|
+
<FormattedMessage {...messages[label]} />
|
|
318
|
+
</CapLabel>
|
|
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}
|
|
314
343
|
/>
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
344
|
+
}
|
|
345
|
+
visible={isDrawerVisible}
|
|
346
|
+
width={380}
|
|
347
|
+
onClose={() => setDrawerVisibility(false)}
|
|
348
|
+
/>
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
<div className="ad-section">
|
|
352
|
+
<CapHeading type="h4" style={{marginBottom: 17}}>
|
|
353
|
+
<FormattedMessage
|
|
354
|
+
{...messages.adManagerHeading}
|
|
355
|
+
/>
|
|
356
|
+
</CapHeading>
|
|
357
|
+
<CapRadioGroup
|
|
358
|
+
style={{paddingBottom: '18px'}}
|
|
359
|
+
options={radioOptions}
|
|
360
|
+
onChange={onChangeAdManager}
|
|
361
|
+
value={adManager}
|
|
362
|
+
key={`fb-ad-creatives`}
|
|
363
|
+
/>
|
|
364
|
+
{adManager === AD_MANAGER ? <>
|
|
365
|
+
<div className="account-section-container">
|
|
366
|
+
<CapLabel type="label1">
|
|
367
|
+
<FormattedMessage {...messages.fbAdsDescription} />
|
|
368
|
+
</CapLabel>
|
|
369
|
+
</div>
|
|
370
|
+
|
|
371
|
+
|
|
372
|
+
<CapRow span={12} type="flex">
|
|
373
|
+
<CapColumn span={6}>
|
|
374
|
+
<CapCustomCard
|
|
375
|
+
type="Facebook"
|
|
376
|
+
FBDynamicComponent={() => (
|
|
377
|
+
<CapIcon
|
|
378
|
+
size="l"
|
|
379
|
+
type="scenery"
|
|
380
|
+
className="facebook-dynamic-content"
|
|
381
|
+
/>
|
|
382
|
+
)}
|
|
383
|
+
/>
|
|
384
|
+
</CapColumn>
|
|
385
|
+
<CapColumn span={16}>
|
|
386
|
+
<ul className="parameter-list">
|
|
387
|
+
{adSetParameters.map((parameter, index) => (
|
|
388
|
+
<li key={parameter} className="parameter-list-item">
|
|
389
|
+
<CapLabel type="label2" className="parameter-index">
|
|
390
|
+
{index + 1}
|
|
391
|
+
</CapLabel>
|
|
392
|
+
<CapHeading type="h5">
|
|
393
|
+
<FormattedMessage {...messages[parameter]} />
|
|
394
|
+
</CapHeading>
|
|
395
|
+
</li>
|
|
396
|
+
))}
|
|
397
|
+
</ul>
|
|
398
|
+
</CapColumn>
|
|
399
|
+
</CapRow></> : <CapLabel type="label1"><FormattedMessage {...messages.capAdManagerHeading}/></CapLabel>}
|
|
400
|
+
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
<CapButton
|
|
404
|
+
className="facebook-confirm-button"
|
|
405
|
+
type="primary"
|
|
406
|
+
onClick={onFacebookAdManagerContinue}
|
|
407
|
+
>
|
|
408
|
+
<FormattedMessage {...messages.fbContinue} />
|
|
409
|
+
</CapButton>
|
|
410
|
+
</div>
|
|
411
|
+
) :
|
|
412
|
+
<div style={{height: '1200px'}}>
|
|
413
|
+
<Advertisement
|
|
414
|
+
isFullMode={isFullMode}
|
|
415
|
+
actions={facebookActions}
|
|
416
|
+
fbADData={fbADData}
|
|
417
|
+
onCreateComplete={onCreateComplete}
|
|
418
|
+
templateData={templateData}
|
|
419
|
+
params={params}
|
|
420
|
+
facebookTemplateData={facebookTemplateData}
|
|
421
|
+
messageStrategy={messageStrategy}
|
|
422
|
+
getFormSubscriptionData={getFormSubscriptionData}
|
|
423
|
+
selectedMarketingObjective={selectedMarketingObjective}
|
|
424
|
+
fbAdManager={fbAdManager}
|
|
425
|
+
orgUnitId={orgUnitId}
|
|
426
|
+
/>
|
|
427
|
+
</div>
|
|
353
428
|
);
|
|
354
429
|
};
|
|
355
430
|
|
|
@@ -367,11 +442,12 @@ Facebook.propTypes = {
|
|
|
367
442
|
fbADData: PropTypes.object,
|
|
368
443
|
onCreateComplete: PropTypes.func,
|
|
369
444
|
facebookTemplateData: PropTypes.object,
|
|
445
|
+
messageStrategy: PropTypes.string,
|
|
446
|
+
getFormSubscriptionData: PropTypes.func,
|
|
370
447
|
};
|
|
371
448
|
|
|
372
449
|
Facebook.defaultProps = {
|
|
373
450
|
marketingObjectiveList: [""],
|
|
374
|
-
|
|
375
451
|
};
|
|
376
452
|
|
|
377
453
|
const mapStateToProps = createStructuredSelector({
|
|
@@ -42,7 +42,7 @@ export default defineMessages({
|
|
|
42
42
|
},
|
|
43
43
|
fbAdsDescription: {
|
|
44
44
|
id: `${messagePrefix}.fbAdsDescription`,
|
|
45
|
-
defaultMessage: '
|
|
45
|
+
defaultMessage: 'Proceed with empty content block & you can create ads in Facebook Ad Manager under the mentioned ad set.',
|
|
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
|
+
fbContinue: {
|
|
60
|
+
id: `${messagePrefix}.fbContinue`,
|
|
61
|
+
defaultMessage: 'Continue',
|
|
62
62
|
},
|
|
63
63
|
fbChange: {
|
|
64
64
|
id: `${messagePrefix}.fbChange`,
|
|
@@ -164,4 +164,24 @@ 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 page ID & page name to enable this option.',
|
|
186
|
+
},
|
|
167
187
|
});
|
|
@@ -62,6 +62,8 @@ 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
|
+
|
|
65
67
|
import emailIllustration from '../Assets/images/emailIllustration.svg';
|
|
66
68
|
import smsIllustration from '../Assets/images/smsIllustration.svg';
|
|
67
69
|
import pushIllustration from '../Assets/images/pushIllustration.svg';
|
|
@@ -321,7 +323,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
321
323
|
}
|
|
322
324
|
const fbSetting = get(nextProps.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
|
|
323
325
|
const { accountName = "",
|
|
324
|
-
|
|
326
|
+
orgUnitFacebookPageSettingsMap = {},
|
|
325
327
|
} = fbSetting[0] || {};
|
|
326
328
|
let pageAccessToken = false;
|
|
327
329
|
if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
|
|
@@ -508,7 +510,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
508
510
|
}
|
|
509
511
|
|
|
510
512
|
this.setState({activeMode: TEMPLATES_MODE});
|
|
511
|
-
|
|
513
|
+
|
|
512
514
|
this.getAllTemplates({params, resetPage: true});
|
|
513
515
|
});
|
|
514
516
|
}
|
|
@@ -1136,12 +1138,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1136
1138
|
const channel = this.state.channel.toLowerCase();
|
|
1137
1139
|
//const keyType = ev.key && ev.key.toLowerCase() !== undefined ? ev.state.toLowerCase() : '';
|
|
1138
1140
|
let routeParams = {};
|
|
1141
|
+
const {fbAdManager} = this.props;
|
|
1139
1142
|
const isLibraryMode = this.isEnabledInLibraryModule("callCreateFromProps");
|
|
1140
|
-
if(!isLibraryMode) {
|
|
1143
|
+
if (!isLibraryMode) {
|
|
1141
1144
|
timeTracker.startTimer(CHANNEL_CREATE_TRACK_MAPPING[channel]);
|
|
1142
1145
|
}
|
|
1143
1146
|
if (isLibraryMode) {
|
|
1144
|
-
this.props.
|
|
1147
|
+
if (this.props.fbAdManager === CREATIVE) {
|
|
1148
|
+
this.props.createNew(fbAdManager);
|
|
1149
|
+
} else {
|
|
1150
|
+
this.props.createNew();
|
|
1151
|
+
}
|
|
1145
1152
|
} else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
|
|
1146
1153
|
routeParams = {
|
|
1147
1154
|
pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
|
|
@@ -1411,7 +1418,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1411
1418
|
}
|
|
1412
1419
|
}
|
|
1413
1420
|
if (this.isEnabledInLibraryModule("callSelectFromProps")) {
|
|
1414
|
-
this.props.onSelectTemplate(id);
|
|
1421
|
+
this.props.onSelectTemplate(this.selectTemplate(id), this.props.fbAdManager);
|
|
1415
1422
|
} else {
|
|
1416
1423
|
timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
|
|
1417
1424
|
if (this.state.channel.toLowerCase() === 'ebill') {
|
|
@@ -1424,6 +1431,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1424
1431
|
}
|
|
1425
1432
|
}
|
|
1426
1433
|
|
|
1434
|
+
selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
|
|
1435
|
+
|
|
1436
|
+
|
|
1427
1437
|
handlePreviewClick(template, modeType) {
|
|
1428
1438
|
this.togglePreview();
|
|
1429
1439
|
const templateInfo = cloneDeep(template);
|
|
@@ -1801,9 +1811,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1801
1811
|
const isWechatChannel = channel === WECHAT;
|
|
1802
1812
|
const isMobilePushChannel = channel === MOBILE_PUSH;
|
|
1803
1813
|
const isLineChannel = channel === LINE;
|
|
1814
|
+
const isFacebookChannel = channel === FACEBOOK;
|
|
1804
1815
|
|
|
1805
1816
|
|
|
1806
|
-
if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
|
|
1817
|
+
if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts) && !isFacebookChannel ) {
|
|
1807
1818
|
forEach(weCrmAccounts, (account) => {
|
|
1808
1819
|
if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
|
|
1809
1820
|
if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
|
|
@@ -1943,28 +1954,33 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1943
1954
|
render() {
|
|
1944
1955
|
const isFullMode = this.isFullMode();
|
|
1945
1956
|
const { activeMode, channel, wechatFilter, lineFilter } = this.state;
|
|
1946
|
-
let
|
|
1957
|
+
let showFbAds = false;
|
|
1947
1958
|
if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
pageAccessToken
|
|
1959
|
+
const {campaignSettings, fetchedOrgLevelCampaignSettings} = this?.props?.Templates || {};
|
|
1960
|
+
if (campaignSettings && isEmpty(campaignSettings?.accountSettings) && fetchedOrgLevelCampaignSettings) {
|
|
1961
|
+
showFbAds = true;
|
|
1962
|
+
} else if (!isEmpty(campaignSettings?.accountSettings)) {
|
|
1963
|
+
const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
|
|
1964
|
+
const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
|
|
1965
|
+
let pageAccessToken = false;
|
|
1966
|
+
if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
|
|
1967
|
+
Object.values(orgUnitFacebookPageSettingsMap).forEach((obj) => {
|
|
1968
|
+
if (obj.pageAccessToken) {
|
|
1969
|
+
pageAccessToken = true;
|
|
1970
|
+
}
|
|
1971
|
+
});
|
|
1972
|
+
if (!pageAccessToken) {
|
|
1973
|
+
showFbAds = true;
|
|
1958
1974
|
}
|
|
1959
|
-
}
|
|
1960
|
-
|
|
1961
|
-
showForFacebook = false;
|
|
1975
|
+
} else {
|
|
1976
|
+
showFbAds = true;
|
|
1962
1977
|
}
|
|
1963
1978
|
}
|
|
1964
1979
|
}
|
|
1980
|
+
|
|
1965
1981
|
const showForViber = (![VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(channel.toLowerCase()) ||
|
|
1966
1982
|
(channel.toLowerCase() === VIBER_CHANNEL && !this.props.isFullMode && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))) ||
|
|
1967
|
-
(channel.toLowerCase() === FACEBOOK_CHANNEL &&
|
|
1983
|
+
(channel.toLowerCase() === FACEBOOK_CHANNEL && showFbAds)
|
|
1968
1984
|
);
|
|
1969
1985
|
|
|
1970
1986
|
|
|
@@ -372,6 +372,6 @@ export default defineMessages({
|
|
|
372
372
|
},
|
|
373
373
|
"noAccountsPresentFacebook": {
|
|
374
374
|
id: `${scope}.noAccountsPresentFacebook`,
|
|
375
|
-
defaultMessage: "Facebook
|
|
375
|
+
defaultMessage: "Please setup the Facebook account & Facebook page to start creating content in Capillary's FB content creator.",
|
|
376
376
|
},
|
|
377
377
|
});
|
|
@@ -9,7 +9,7 @@ import * as types from './constants';
|
|
|
9
9
|
|
|
10
10
|
const initialState = fromJS({
|
|
11
11
|
getAllTemplatesInProgress: false,
|
|
12
|
-
|
|
12
|
+
fetchedOrgLevelCampaignSettings: true,
|
|
13
13
|
templates: [],
|
|
14
14
|
deleteResponse: {},
|
|
15
15
|
deleteTemplateInProgress: false,
|
|
@@ -160,9 +160,9 @@ function templatesReducer(state = initialState, action) {
|
|
|
160
160
|
.set('templates', [])
|
|
161
161
|
.set('weCRMtemplates', fromJS({}));
|
|
162
162
|
case types.GET_ORG_LEVEL_CAMPAIGN_SETTINGS_REQUEST:
|
|
163
|
-
return state.set('
|
|
163
|
+
return state.set('fetchedOrgLevelCampaignSettings', false);
|
|
164
164
|
case types.GET_ORG_LEVEL_CAMPAIGN_SETTINGS_SUCCESS:
|
|
165
|
-
return state.set('
|
|
165
|
+
return state.set('fetchedOrgLevelCampaignSettings', true).set(
|
|
166
166
|
'campaignSettings',
|
|
167
167
|
fromJS({
|
|
168
168
|
...state.get('campaignSettings'),
|
|
@@ -170,7 +170,7 @@ function templatesReducer(state = initialState, action) {
|
|
|
170
170
|
}),
|
|
171
171
|
);
|
|
172
172
|
case types.GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE:
|
|
173
|
-
return state.set('
|
|
173
|
+
return state.set('fetchedOrgLevelCampaignSettings', false);
|
|
174
174
|
default:
|
|
175
175
|
return state;
|
|
176
176
|
}
|