@capillarytech/creatives-library 3.4.3 → 3.4.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.4.3",
+  "version": "3.4.4",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -13,6 +13,7 @@
   "license": "LicenseRef-LICENSE",
   "dependencies": {
     "@babel/polyfill": "7.4.3",
+    "@capillarytech/cap-ui-utils": "1.0.8",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",
     "jquery": "^3.3.1",

package/v2Containers/App/constants.js

@@ -12,3 +12,33 @@ export const getTopbarMenuDataValue = () => ([
       { label: <FormattedMessage {...globalMessages.incentive} />, link: '/coupons/ui/', key: 'incentive' },
       { label: <FormattedMessage {...globalMessages.creatives} />, link: '/creatives/ui/v2', key: 'creatives' },
 ]);
+
+export const TRACK_CREATE_SMS = 'createSms';
+export const TRACK_CREATE_EMAIL = 'createEmail';
+export const TRACK_CREATE_MPUSH = 'createMpush';
+export const TRACK_CREATE_WECHAT = 'createWeChat';
+export const TRACK_CREATE_IMAGE = 'createImage';
+
+
+export const TRACK_EDIT_SMS = 'editSms';
+export const TRACK_EDIT_EMAIL = 'editEmail';
+export const TRACK_EDIT_MPUSH = 'editMpush';
+export const TRACK_EDIT_WECHAT = 'editWeChat';
+export const TRACK_EDIT_IMAGE = 'editImage';
+
+export const CHANNEL_CREATE_TRACK_MAPPING = {
+  sms: TRACK_CREATE_SMS,
+  email: TRACK_CREATE_EMAIL,
+  mobilepush: TRACK_CREATE_MPUSH,
+  wechat: TRACK_CREATE_WECHAT,
+  gallery: TRACK_CREATE_IMAGE,
+};
+
+export const CHANNEL_EDIT_TRACK_MAPPING = {
+  sms: TRACK_EDIT_SMS,
+  email: TRACK_EDIT_EMAIL,
+  mobilepush: TRACK_EDIT_MPUSH,
+  wechat: TRACK_EDIT_WECHAT,
+  gallery: TRACK_EDIT_IMAGE,
+};
+export const GTM_TRACKING_ID = 'UA-152081629-1';

package/v2Containers/Cap/index.js

@@ -9,6 +9,7 @@ import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from 'moment';
 // import 'moment/locale/zh-cn';
+import { GA } from '@capillarytech/cap-ui-utils';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import messages from './messages';
 import { makeSelectAuthenticated, makeSelectUser } from './selectors';
@@ -18,6 +19,8 @@ import * as appActions from '../App/actions';
 import config from '../../config/app';
 import NavigationBar from '../../v2Components/NavigationBar';
 import { engagePlusPublicPath } from '../../config/path';
+import { GTM_TRACKING_ID } from '../App/constants';
+
 import {
   HELP_URL,
   ORG_SETTINGS_URL,
@@ -33,6 +36,8 @@ const CapWrapper = styled.div`
   flex-direction: column;
 `;
 
+GA.initialize({ accessKey: GTM_TRACKING_ID });
+
 export class Cap extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
   constructor(props) {

package/v2Containers/Email/index.js

@@ -29,6 +29,8 @@ import EmailPreview from '../../v2Components/EmailPreview';
 import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
+import { GA } from '@capillarytech/cap-ui-utils';
+import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL } from '../App/constants';
 
 const {CapCustomCardList} = CapCustomCard;
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -620,10 +622,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
   }
   onUpdateTemplateComplete = (createResponse) => {
+    const isEdit = this.state.isEdit;
+    GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL, {
+      category: 'Creatives',
+      action: isEdit ? 'Create' : 'Edit',
+      label: 'using editor',
+    });
     if (createResponse && createResponse.templateId) {
       // this.resetSchema();
       let message;
-      if (this.state.isEdit) {
+      if (isEdit) {
         message = this.props.intl.formatMessage(messages.emailEditSuccess);
       } else {
         message = this.props.intl.formatMessage(messages.emailCreateSuccess);

package/v2Containers/EmailWrapper/index.js

@@ -7,6 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { GA } from '@capillarytech/cap-ui-utils';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import _ from 'lodash';
@@ -19,7 +20,10 @@ import * as templatesActionsCreators from '../Templates/actions';
 import Email from '../Email';
 import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
 import messages from './messages';
+import { CHANNEL_CREATE_TRACK_MAPPING } from '../App/constants'
+
 const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
+const { timeTracker } = GA;
 const CardContainer = styled.div`
   margin-top: 16px;
   .ant-radio-group{
@@ -106,7 +110,16 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     };
     CapNotification.error(message);
   }
+  stopTimerGA=()=>{
+    // stop timer
+    timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING['email'], {
+      category: 'Creatives',
+      action: 'Create',
+      label: 'uploadZip',
+    });
+  }
   handleFileUpload = (file) => {
+    
     const { templatesActions, intl, showNextStep, isUploading } = this.props;
     if (!isUploading) {
       const fileExtension = file.name.split('.').pop();
@@ -116,7 +129,9 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
         templatesActions.handleZipUpload(file.originFileObj, () => { //handle upload success
           this.setState({ modeContent: { file } }, showNextStep);
+          stopTimerGA();
         }, this.handleZipUploadError);
+        
       } else if (fileExtension === 'html' || fileExtension === 'htm') {
         const reader = new FileReader();
         reader.onload = () => {
@@ -124,7 +139,6 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
           this.setState({ modeContent: { file } }, () => {
             templatesActions.handleHtmlUpload(text);
           });
-
           // showNextStep();
         };
         reader.readAsText(file.originFileObj);

package/v2Containers/MobilePush/Create/index.js

@@ -25,6 +25,8 @@ import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
 import messages from './messages';
 import getEventsMap from '../eventsMap';
+import { GA } from '@capillarytech/cap-ui-utils';
+import { TRACK_CREATE_MPUSH } from '../../App/constants';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -1402,7 +1404,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   saveFormData = (formData) => {
     //this function gets called from form bulder only when the form data is valid
     const obj = this.getTransformedData(formData);
+    const label = this.props.location.pathname.indexOf('image') >= 0 ? 'image' : 'text';
     this.props.actions.createTemplate(obj, () => {
+      GA.timeTracker.stopTimer(TRACK_CREATE_MPUSH, {
+        category: 'Creatives',
+        action: 'Create',
+        label,
+      });
       this.discardValues();
       const message = this.props.intl.formatMessage(messages.messageCreateSuccess);
       CapNotification.success({message, key: 'createMpushSuccess'});

package/v2Containers/MobilePush/Edit/index.js

@@ -29,6 +29,8 @@ import withCreatives from '../../../hoc/withCreatives';
 
 import getEventsMap from '../eventsMap';
 import {getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields} from '../commonMethods';
+import { GA } from '@capillarytech/cap-ui-utils';
+import { TRACK_EDIT_MPUSH } from '../../App/constants';
 
 const PrefixWrapper = styled.div`
   margin-right: 16px;
@@ -271,6 +273,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
   onUpdateTemplateComplete = () => {
     console.log('reseting schema');
+    const label = this.props.location.pathname.indexOf('image') >= 0 ? 'image' : 'text';
+    GA.timeTracker.stopTimer(TRACK_EDIT_MPUSH, {
+      category: 'Creatives',
+      action: 'Edit',
+      label,
+    });
     this.resetSchema();
     this.setState({
       formData: {},

package/v2Containers/Sms/Create/index.js

@@ -26,7 +26,8 @@ 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'
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -201,6 +202,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({currentTab: data});
   }
   onCreateTemplateComplete = (editResponse) => {
+    GA.timeTracker.stopTimer(TRACK_CREATE_SMS, {
+      category: 'Creatives',
+      action: 'Create',
+    });
     if (editResponse.templateId) {
       this.resetSchema();
       this.setState({

package/v2Containers/Sms/Edit/index.js

@@ -25,7 +25,8 @@ 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 { GA } from '@capillarytech/cap-ui-utils';
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -219,6 +220,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({currentTab: data});
   }
   onUpdateTemplateComplete = (editResponse) => {
+    GA.timeTracker.stopTimer(TRACK_EDIT_SMS, {
+      category: 'Creatives',
+      action: 'Edit',
+    });
     if (editResponse.templateId) {
       this.resetSchema();
       this.setState({

package/v2Containers/Templates/index.js

@@ -50,13 +50,14 @@ import Pagination from '../../v2Components/Pagination';
 import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
+import { CHANNEL_CREATE_TRACK_MAPPING, CHANNEL_EDIT_TRACK_MAPPING } from '../App/constants'
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContainer/constants';
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
 import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
-
-
+import { GA } from '@capillarytech/cap-ui-utils';
+const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
 const InlineDiv = styled.div`
   display: inline;
@@ -75,6 +76,8 @@ const WECHAT_FILTERS = {
   RICHMEDIA: 'richmedia',
   MAPTEMPLATES: 'maptemplate',
 };
+
+
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -163,6 +166,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   componentDidMount() {
+    
     if (this.props.location.query.type === 'embedded' && this.isEnabledInLibraryModule("setLocale")) {
       this.setLocale();
     }
@@ -922,13 +926,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         break;
     }
   };
-
+ 
   createTemplate(ev) {
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     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();
     } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
@@ -1123,6 +1128,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
 
   handleEditClick(e, template, modeType, path) {
+    timeTracker.startTimer(CHANNEL_EDIT_TRACK_MAPPING[this.state.channel.toLowerCase()]);
     if (modeType && modeType !== undefined) {
       this.setState({modeType});
     }

package/v2Containers/WeChat/MapTemplates/index.js

@@ -29,6 +29,8 @@ import {getMessageObject} from '../../../utils/messageUtils';
 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'
 
 const SELECT_TEMPLATE_MODE = "selectTemplate";
 const MAP_TEMPLATE_MODE = "mapTemplateMode";
@@ -955,8 +957,9 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     saveFormData(formData) {
       const obj = {};
       let selectedWechatData = {};
+      const isEdit = this.state.isEdit;
       const { getFormData } = this.props;
-      if (this.state.isEdit) {
+      if (isEdit) {
         obj['_id'] = this.state.editTemplateData._id;
         selectedWechatData = {
           'template_id': this.state.editTemplateData.versions.base.template_id,
@@ -1010,6 +1013,11 @@ 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, {
+          category: 'Creatives',
+          action: isEdit ? 'Edit' : 'Create',
+          label : 'MapTemplates',
+        });
         console.log("Template created successfully", response, obj);
       });
     }

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

@@ -28,7 +28,8 @@ import WechatRichmediaTemplatePreview from '../../../../v2Components/TemplatePre
 import noImage from '../../../../assets/noImage.png';
 import Pagination from '../../../../v2Components/Pagination';
 import { CAP_SPACE_08, CAP_SPACE_12, CAP_SPACE_20, 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'
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -544,7 +545,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         msgtype: "MPNEWS",
         msgcontent: "RICH_MEDIA_WECHAT",
       };
-      if (this.state.isEdit) {
+      const isEdit = this.state.isEdit;
+      if (isEdit) {
         saveObj._id = this.props.templateId;
         saveObj.mediaId = this.props.mediaId;
         saveObj.type = "WECHAT";
@@ -554,6 +556,11 @@ 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, {
+          category: 'Creatives',
+          action: isEdit ? 'Edit' : 'Create',
+          label : 'RichMedia',
+        });
         if (getFormData) {
           getFormData(this.getFormData({
             mediaId: response.mediaId,