@capillarytech/creatives-library 7.7.0 → 7.7.3

package/v2Containers/Sms/Create/index.js

@@ -21,13 +21,14 @@ import messages from './messages';
 import * as charCount from '../../../utils/smsCharCount';
 import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import {getMessageObject} from '../../../utils/messageUtils';
+import { gtmPush } from '../../../utils/gtmTrackers';
 import * as creativesContainerActions from '../../CreativesContainer/actions';
 import {SMS} from '../../CreativesContainer/constants';
 // import callNativeEvent from '../../../utils/callNativeEvent';
 import {showError} from '../commonMethods';
 import withCreatives from '../../../hoc/withCreatives';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_SMS } from '../../App/constants';
+import { CREATE, TRACK_CREATE_SMS } from '../../App/constants';
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -203,11 +204,22 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({currentTab: data});
   }
   onCreateTemplateComplete = (editResponse) => {
-    GA.timeTracker.stopTimer(TRACK_CREATE_SMS, {
+    const timeTaken = GA.timeTracker.stopTimer(TRACK_CREATE_SMS, {
       category: 'Creatives',
       action: TRACK_CREATE_SMS,
     });
+    const {
+      formData
+    } = this.state;
     if (editResponse.templateId) {
+      gtmPush('creativeDetails', {
+        id: editResponse.templateId,
+        name: formData?.['template-name'],
+        channel: SMS,
+        timeTaken,
+        content: formData?.base?.['sms-editor'],
+        mode: CREATE
+      });
       this.resetSchema();
       this.setState({
         formData: {},

package/v2Containers/Sms/Edit/index.js

@@ -21,12 +21,14 @@ import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import '../Create/_smsCreate.scss';
 import messages from './messages';
 import {getMessageObject} from '../../../utils/messageUtils';
+import { gtmPush } from '../../../utils/gtmTrackers';
 import * as creativesContainerActions from '../../CreativesContainer/actions';
 // import callNativeEvent from '../../../utils/callNativeEvent';
 import {showError} from '../commonMethods';
 import withCreatives from '../../../hoc/withCreatives';
-import { TRACK_EDIT_SMS } from '../../App/constants';
+import { EDIT, TRACK_EDIT_SMS } from '../../App/constants';
 import { GA } from '@capillarytech/cap-ui-utils';
+import { SMS } from '../../CreativesContainer/constants';
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -220,11 +222,22 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({currentTab: data});
   }
   onUpdateTemplateComplete = (editResponse) => {
-    GA.timeTracker.stopTimer(TRACK_EDIT_SMS, {
+    const timeTaken = GA.timeTracker.stopTimer(TRACK_EDIT_SMS, {
       category: 'Creatives',
       action: TRACK_EDIT_SMS,
     });
+    const {
+      formData
+    } = this.state;
     if (editResponse.templateId) {
+      gtmPush('creativeDetails', {
+        id: editResponse.templateId,
+        name: formData?.['template-name'],
+        channel: SMS,
+        timeTaken,
+        content: formData?.base?.['sms-editor'],
+        mode: EDIT
+      })
       this.resetSchema();
       this.setState({
         formData: {},

package/v2Containers/Templates/index.js

@@ -62,6 +62,8 @@ import {
 } from '../App/constants';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE, VIBER, FACEBOOK } from '../CreativesContainer/constants';
 
+import {CREATIVE} from '../Facebook/constants';
+
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
@@ -321,7 +323,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
       const fbSetting = get(nextProps.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
       const { accountName = "",
-         orgUnitFacebookPageSettingsMap = {},
+          orgUnitFacebookPageSettingsMap = {},
         } = fbSetting[0] || {};
       let pageAccessToken = false;
       if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
@@ -454,7 +456,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({previewTemplate: nextProps.Templates.templateDetails});
     }
 
-    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat', 'mobilepush'].indexOf(this.state.channel.toLowerCase()) > -1)) {
+    if (nextProps.Templates.weCrmAccounts !== undefined && nextProps.Templates.weCrmAccounts.length === 1 && this.state.defaultAccount && (['wechat'].indexOf(this.state.channel.toLowerCase()) > -1)) {
       const paramsDefault = {
         name: this.state.searchText,
         sortBy: this.state.sortBy,
@@ -464,9 +466,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         paramsDefault.wecrmToken = nextProps.Templates.weCrmAccounts[0].configs.wecrm_token;
         paramsDefault.originalId = nextProps.Templates.weCrmAccounts[0].sourceAccountIdentifier;
         nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
-      } else if (this.state.channel.toLowerCase() === 'mobilepush') {
-        nextProps.actions.setWeChatAccount(nextProps.Templates.weCrmAccounts[0]);
-        paramsDefault.accountId = nextProps.Templates.weCrmAccounts[0].id;
       }
       this.setState({defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: nextProps.Templates.weCrmAccounts[0].name });
       this.getAllTemplates({params: paramsDefault}, true);
@@ -511,7 +510,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
 
       this.setState({activeMode: TEMPLATES_MODE});
-      
+
       this.getAllTemplates({params, resetPage: true});
     });
   }
@@ -1139,9 +1138,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channel = this.state.channel.toLowerCase();
     //const keyType = ev.key && ev.key.toLowerCase() !== undefined ? ev.state.toLowerCase() : '';
     let routeParams = {};
-    timeTracker.startTimer(CHANNEL_CREATE_TRACK_MAPPING[channel]);
-    if (this.isEnabledInLibraryModule("callCreateFromProps")) {
-      this.props.createNew();
+    const {fbAdManager} = this.props;
+    const isLibraryMode = this.isEnabledInLibraryModule("callCreateFromProps");
+    if (!isLibraryMode) {
+      timeTracker.startTimer(CHANNEL_CREATE_TRACK_MAPPING[channel]);
+    }
+    if (isLibraryMode) {
+      if (this.props.fbAdManager === CREATIVE) {
+        this.props.createNew(fbAdManager);
+      } else {
+        this.props.createNew();
+      }
     } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
       routeParams = {
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
@@ -1359,7 +1366,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   handleEditClick(e, template, modeType, path, options) {
-    timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
     if (modeType && modeType !== undefined) {
       this.setState({modeType});
     }
@@ -1412,8 +1418,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     if (this.isEnabledInLibraryModule("callSelectFromProps")) {
-      this.props.onSelectTemplate(id);
+      this.props.onSelectTemplate(this.selectTemplate(id), this.props.fbAdManager);
     } else {
+      timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
       if (this.state.channel.toLowerCase() === 'ebill') {
         pathName = `/ebill/edit/${id}`;
       }
@@ -1424,6 +1431,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   }
 
+  selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
+
+
   handlePreviewClick(template, modeType) {
     this.togglePreview();
     const templateInfo = cloneDeep(template);
@@ -1801,9 +1811,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isWechatChannel = channel === WECHAT;
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isLineChannel = channel === LINE;
+    const isFacebookChannel = channel === FACEBOOK;
 
 
-    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
+    if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts) && !isFacebookChannel ) {
       forEach(weCrmAccounts, (account) => {
         if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
           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
   render() {
     const isFullMode = this.isFullMode();
     const { activeMode, channel, wechatFilter, lineFilter } = this.state;
-    let showForFacebook = true;
+    let showFbAds = false;
     if (channel.toLowerCase() === FACEBOOK_CHANNEL) {
-      if (isEmpty(this.props.Templates.campaignSettings)) {
-        showForFacebook = false;
-      }
-      const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
-      const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
-      let pageAccessToken = false;
-      if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
-        Object.values(orgUnitFacebookPageSettingsMap).forEach((obj) => {
-          if (obj.pageAccessToken) {
-            pageAccessToken = true;
+      const campaignSettings = this.props.Templates.campaignSettings;
+      if (campaignSettings && isEmpty(campaignSettings?.accountSettings)) {
+        showFbAds = true;
+      } else if (!isEmpty(campaignSettings?.accountSettings)) {
+        const fbSetting = get(this.props.Templates, 'campaignSettings.accountSettings.socialAccountSettings.facebookAccountSettings', []);
+        const { orgUnitFacebookPageSettingsMap = {} } = fbSetting[0] || {};
+        let pageAccessToken = false;
+        if (!isEmpty(orgUnitFacebookPageSettingsMap)) {
+          Object.values(orgUnitFacebookPageSettingsMap).forEach((obj) => {
+            if (obj.pageAccessToken) {
+              pageAccessToken = true;
+            }
+          });
+          if (!pageAccessToken) {
+            showFbAds = true;
           }
-        });
-        if (!pageAccessToken) {
-          showForFacebook = false;
+        } else {
+          showFbAds = true;
         }
       }
     }
+
     const showForViber = (![VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(channel.toLowerCase()) ||
       (channel.toLowerCase() === VIBER_CHANNEL && !this.props.isFullMode && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))) ||
-      (channel.toLowerCase() === FACEBOOK_CHANNEL && showForFacebook)
+      (channel.toLowerCase() === FACEBOOK_CHANNEL && showFbAds)
     );
 
 

package/v2Containers/Templates/messages.js

@@ -372,6 +372,6 @@ export default defineMessages({
   },
   "noAccountsPresentFacebook": {
     id: `${scope}.noAccountsPresentFacebook`,
-    defaultMessage: "Facebook accounts or Facebook Page are not setup for your brand",
+    defaultMessage: "Please setup the Facebook account & Facebook page to start creating content in Capillary's FB content creator.",
   },
 });

package/v2Containers/Templates/reducer.js

@@ -9,7 +9,7 @@ import * as types from './constants';
 
 const initialState = fromJS({
   getAllTemplatesInProgress: false,
-  fetchingOrgLevelCampaignSettings: true,
+  fetchingOrgLevelCampaignSettings: false,
   templates: [],
   deleteResponse: {},
   deleteTemplateInProgress: false,
@@ -67,7 +67,9 @@ function templatesReducer(state = initialState, action) {
     case types.GET_WECRM_ACCOUNTS_REQUEST:
       return state
         .set('fetchingWeCrmAccounts', true)
-        .set('weCrmAccountFetchingError', false);
+        .set('weCrmAccountFetchingError', false)
+        .remove('selectedWeChatAccount')
+        .remove('weCrmAccounts');
     case types.GET_WECRM_ACCOUNTS_SUCCESS:
       return state
         .set('fetchingWeCrmAccounts', false)

package/v2Containers/TemplatesV2/index.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
+import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon, CapTooltip } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
 import Helmet from 'react-helmet';
@@ -45,6 +45,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       channelsToDisable = [],
       isFullMode,
       onChannelChange,
+      showDisabledFBInfo,
     } = props;
 
     const defaultPanes = {
@@ -80,6 +81,15 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       if (channelsToDisable.includes(pane.key)) {
         // eslint-disable-next-line no-param-reassign
         pane.disabled = true;
+        if (pane.key === 'facebook' && showDisabledFBInfo) {
+          pane.tab = (<CapTooltip
+            title={
+            intl.formatMessage(messages.facebookDisableinfo)
+          }
+        >
+            {intl.formatMessage(messages.facebook)}
+          </CapTooltip>);
+        }
       }
       return pane;
     });
@@ -148,13 +158,16 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   );
 
   getFacebookComponent = () => {
-    const { messageDetails, cap, onFacebookSubmit, isFullMode } = this.props;
+    const { messageDetails, cap, onFacebookSubmit, messageStrategy, showDisabledFBInfo, orgUnitId } = this.props;
     return (
       <Facebook
         {...this.props}
         messageDetails={messageDetails}
         cap={cap}
         onFacebookSubmit={onFacebookSubmit}
+        messageStrategy={messageStrategy}
+        showDisabledFBInfo={showDisabledFBInfo}
+        orgUnitId={orgUnitId}
       />
     );
   }
@@ -178,19 +191,21 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
-    if (!this.props.isFullMode) {
+    const {isFullMode, messageStrategy} = this.props;
+    if (!isFullMode) {
       query = {type: 'embedded', module: 'library'};
       switch (channel) {
         case 'line':
           return this.getLineComponent();
         case 'ftp':
           return this.getFTPComponent();
-        case 'facebook':
-          return this.getFacebookComponent();
         default:
           break;
       }
     }
+    if (messageStrategy !== "X_ENGAGE" && channel === 'facebook' && !isFullMode) {
+      return this.getFacebookComponent();
+    }
     const location = {pathname: `/${channel}`, search: '', query};
     switch (channel) {
       case 'call_task':
@@ -205,9 +220,10 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
           router={this.props.router}
           isFullMode={this.props.isFullMode}
           createNew={this.props.createNew}
-          onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
+          onSelectTemplate={this.props.onSelectTemplate}
           renderNewCardGrid={this.getTemplateDataForGrid}
           handlePeviewTemplate={this.props.handlePeviewTemplate}
+          messageStrategy={this.props.messageStrategy}
     />);
     }
   }
@@ -287,6 +303,7 @@ TemplatesV2.propTypes = {
   cap: PropTypes.object,
   authData: PropTypes.object,
   FTPMode: PropTypes.string,
+  messageStrategy: PropTypes.string,
 };
 
 TemplatesV2.defaultProps = {

package/v2Containers/TemplatesV2/messages.js

@@ -66,4 +66,8 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.line',
     defaultMessage: 'Line',
   },
+  facebookDisableinfo: {
+    id: `creatives.containersV2.TemplatesV2.facebookDisableinfo`,
+    defaultMessage: 'Please integrate Facebook Ad page ID & username to enable this option.',
+  },
 });

package/v2Containers/Viber/index.js

@@ -49,6 +49,10 @@ import {
   VIBER_IMG_SIZE,
   charLimit,
 } from './constants';
+import { GA } from '@capillarytech/cap-ui-utils';
+import { CREATE, EDIT, TRACK_CREATE_VIBER, TRACK_EDIT_VIBER } from '../App/constants';
+import { gtmPush } from '../../utils/gtmTrackers';
+import { VIBER } from '../CreativesContainer/constants';
 const { CapHeadingSpan } = CapHeading;
 const { TextArea } = CapInput;
 
@@ -562,7 +566,7 @@ const Viber = (props) => {
     };
   };
 
-  const createCallback = (errorMessage, isEdit) => {
+  const createCallback = ({errorMessage, resp}, isEdit) => {
     if (!errorMessage) {
       CapNotification.success({
         message: isEdit ? formatMessage(messages.viberEditNotification) : formatMessage(messages.viberCreateNotification),
@@ -572,6 +576,18 @@ const Viber = (props) => {
       } else {
         actions.clearCreateResponse();
       }
+      const timeTaken = GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_VIBER : TRACK_CREATE_VIBER, {
+        category: 'Creatives',
+        action: isEdit ? TRACK_EDIT_VIBER : TRACK_CREATE_VIBER,
+      });
+      gtmPush('creativeDetails', {
+        id: resp.templateId._id || resp.templateId,
+        name: messageTitle,
+        channel: VIBER,
+        timeTaken,
+        content: messageContent,
+        mode: isEdit ? EDIT : CREATE
+      });
     } else {
       CapNotification.error({
         message: errorMessage,
@@ -583,7 +599,7 @@ const Viber = (props) => {
     actions.createTemplate(
         formatSubmitPayload(),
         (resp, errorMessage) => {
-          createCallback(errorMessage);
+          createCallback({resp, errorMessage});
           onCreateComplete();
         }
     );
@@ -596,7 +612,7 @@ const Viber = (props) => {
         _id: params.id,
       },
         (resp, errorMessage) => {
-          createCallback(errorMessage, true);
+          createCallback({resp, errorMessage}, true);
           onCreateComplete();
         });
   };

package/v2Containers/WeChat/MapTemplates/index.js

@@ -30,7 +30,9 @@ import * as templateActions from '../../Templates/actions';
 import './_mapTemplates.scss';
 import withCreatives from '../../../hoc/withCreatives';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_WECHAT, TRACK_EDIT_WECHAT } from '../../App/constants';
+import { CREATE, EDIT, TRACK_CREATE_WECHAT, TRACK_EDIT_WECHAT } from '../../App/constants';
+import { gtmPush } from '../../../utils/gtmTrackers';
+import { WECHAT } from '../../CreativesContainer/constants';
 
 const SELECT_TEMPLATE_MODE = "selectTemplate";
 const MAP_TEMPLATE_MODE = "mapTemplateMode";
@@ -1172,12 +1174,19 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
             getFormData(this.getFormData(obj));
           }, 0);
         }
-        GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_WECHAT : TRACK_CREATE_WECHAT, {
+        const timeTaken = GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_WECHAT : TRACK_CREATE_WECHAT, {
           category: 'Creatives',
           action: isEdit ? TRACK_EDIT_WECHAT : TRACK_CREATE_WECHAT,
           label : 'MapTemplates',
         });
-        
+        gtmPush('creativeDetails', {
+          id: response.templateId._id || response.templateId,
+          name: obj?.versions?.base?.Title,
+          channel: `${WECHAT} Maptemplate`,
+          timeTaken,
+          content: this.state.formData?.base?.['sms-editor'],
+          mode: isEdit ? EDIT : CREATE
+        });
       });
     }
     

package/v2Containers/WeChat/RichmediaTemplates/Create/index.js

@@ -29,7 +29,9 @@ import noImage from '../../../../assets/noImage.png';
 import Pagination from '../../../../v2Components/Pagination';
 import { CAP_SPACE_08, CAP_SPACE_12, CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_WECHAT, TRACK_EDIT_WECHAT } from '../../../App/constants';
+import { CREATE, EDIT, TRACK_CREATE_WECHAT, TRACK_EDIT_WECHAT } from '../../../App/constants';
+import { gtmPush } from '../../../../utils/gtmTrackers';
+import { WECHAT } from '../../../CreativesContainer/constants';
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -556,11 +558,18 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         // CapNotification.success({
         //   message: this.props.intl.formatMessage(messages.saveSuccess),
         // });
-        GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_WECHAT : TRACK_CREATE_WECHAT, {
+        const timeTaken = GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_WECHAT : TRACK_CREATE_WECHAT, {
           category: 'Creatives',
           action: isEdit ? TRACK_EDIT_WECHAT : TRACK_CREATE_WECHAT,
           label: 'RichMedia',
         });
+        gtmPush('creativeDetails', {
+          id: response.templateId._id || response.templateId,
+          name: saveObj?.name,
+          channel: `${WECHAT} Richmedia`,
+          timeTaken,
+          mode: isEdit ? EDIT : CREATE
+        });
         if (getFormData) {
           getFormData(this.getFormData({
             mediaId: response.mediaId,