@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 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 facebookPreviewReducer from './v2Containers/CapFacebookPreview/reducer';
80
- import facebookPreviewSaga from './v2Containers/CapFacebookPreview/sagas';
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, facebookPreviewReducer, facebookPreviewSaga };
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
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "7.6.12",
4
+ "version": "7.7.0",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
@@ -651,7 +651,6 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
651
651
  pageId: content.pageId}}
652
652
  accountId={content.accountId}
653
653
  accessToken={content.accessToken}
654
- defaultGeneratePreview
655
654
  />
656
655
  </div>
657
656
  )}
@@ -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
- messageStrategy={messageStrategy}
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, fbAdManager) => {
80
- const data = {slidBoxContent: 'editTemplate', templateData: template};
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 = (fbAdManager) => {
97
- const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
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
- 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
- }
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, slidBoxContent} = this.state;
686
- if (currentChannel.toUpperCase() === constants.FACEBOOK && slidBoxContent === 'createTemplate') {
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?.id || templateData?.edit) {
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
- let finalResponse = {
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
- const isDisableContinue = () => isFullMode ? (messageTitle.trim() === "" || selectedAd === "") : ( selectedAd === "");
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 = templateData?.edit ? templateData?.selectedFacebookAccount : facebookTemplateData?.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 (!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') {
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 (orgUnitFacebookPageSettingsMap[-1]) {
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' && (isEmpty(templateData) || templateData?.mode === "create")) ?
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
- {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
- </>}
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
- {isFullMode && <div className="cap-header-facebook-ad">
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
+
@@ -30,7 +30,7 @@ $classPrefix: add-facebook-ad-section;
30
30
 
31
31
  .cap-header-facebook-ad{
32
32
  position: fixed;
33
- top: 58px;
33
+ top: 27px;
34
34
  z-index: 1000;
35
35
  .title-desc-container{
36
36
  padding-left: 10px;
@@ -50,7 +50,7 @@ export default css`
50
50
 
51
51
  .parameter-list-item {
52
52
  list-style: none;
53
- margin-bottom: 60px;
53
+ margin-bottom: ${CAP_SPACE_28};
54
54
 
55
55
  .parameter-index {
56
56
  float: left;
@@ -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, useCallback } from "react";
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
- 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
- }];
251
-
252
- const onChangeAdManager = useCallback(({ target: { value } }) => {
253
- setAdManager(value);
254
- }, [setAdManager]);
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
- <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}
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
- <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`}
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
- {adManager === AD_MANAGER ? <>
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
- <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>
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: 'Proceed with empty content block & you can create ads in Facebook Ad Manager under the mentioned ad set.',
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
- fbContinue: {
60
- id: `${messagePrefix}.fbContinue`,
61
- defaultMessage: 'Continue',
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
- orgUnitFacebookPageSettingsMap = {},
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
- if (this.props.fbAdManager === CREATIVE) {
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(this.selectTemplate(id), this.props.fbAdManager);
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) && !isFacebookChannel ) {
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 showFbAds = false;
1946
+ let showForFacebook = true;
1955
1947
  if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
1956
- const campaignSettings = this.props.Templates.campaignSettings;
1957
- if (campaignSettings && isEmpty(campaignSettings?.accountSettings)) {
1958
- showFbAds = true;
1959
- } else if (!isEmpty(campaignSettings?.accountSettings)) {
1960
- const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
1961
- const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
1962
- let pageAccessToken = false;
1963
- if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
1964
- Object.values(orgUnitFacebookPageSettingsMap).forEach((obj) => {
1965
- if (obj.pageAccessToken) {
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
- } else {
1973
- showFbAds = true;
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 && showFbAds)
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: false,
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, CapTooltip } from '@capillarytech/cap-ui-library';
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, messageStrategy, showDisabledFBInfo, orgUnitId } = this.props;
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
- const {isFullMode, messageStrategy} = this.props;
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
  });