@capillarytech/creatives-library 3.3.0 → 3.3.3

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});
     }
@@ -1572,7 +1578,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     }
     return (<CapSpin spinning={fetchingWeCrmAccounts}>
-      {isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...messages.noAccountsPresentWeChat} /> :
+      {isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...(channel === WECHAT ? messages.noAccountsPresentWeChat : messages.noAccountsPresent)} /> :
       <div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>
         <CapHeader
           title={isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}

package/v2Containers/TemplatesV2/_templatesV2.scss

@@ -0,0 +1,5 @@
+.cap-tab-v2-wrapper{
+    .ant-tabs-tabpane {
+        border: none;
+    }
+}

package/v2Containers/TemplatesV2/index.js

@@ -21,6 +21,7 @@ import messages from './messages';
 import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
+import Facebook from '../Facebook';
 import Gallery from '../Assets/Gallery';
 import withStyles from '../../hoc/withStyles';
 import styles, { CapTabStyle } from './TemplatesV2.style';
@@ -33,32 +34,44 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
   constructor(props) {
     super(props);
     let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
+    const {
+      intl,
+      channelsToHide = [],
+      channelsToDisable = [],
+      isFullMode,
+      onChannelChange,
+    } = props;
+
     const defaultPanes = {
-      sms: {content: <div></div>, tab: props.intl.formatMessage(messages.sms), key: 'sms'},
-      email: {content: <div></div>, tab: props.intl.formatMessage(messages.email), key: 'email'},
-      weChat: {content: <div></div>, tab: props.intl.formatMessage(messages.wechat), key: 'wechat'},
+      sms: {content: <div></div>, tab: intl.formatMessage(messages.sms), key: 'sms'},
+      email: {content: <div></div>, tab: intl.formatMessage(messages.email), key: 'email'},
+      weChat: {content: <div></div>, tab: intl.formatMessage(messages.wechat), key: 'wechat'},
       //'wechat': {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
-      mPush: {content: <div></div>, tab: props.intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
+      mPush: {content: <div></div>, tab: intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
     };
-    const channelsToHide = this.props.channelsToHide || [];
-    const channelsToDisable = this.props.channelsToDisable || [];
     let filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
         obj.push(defaultPanes[key]);
         return obj;
       }, []);
 
-    if (props.isFullMode ) {
-      filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.gallery), key: 'assets'});
-    } else if (!channelsToHide.includes('callTask')) {
-      filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.callTask), key: 'call_task'});
+    if (isFullMode ) {
+      filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.gallery), key: 'assets'});
+    } else {
+      if (!channelsToHide.includes('callTask')) {
+        filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.callTask), key: 'call_task'});
+      }
+      if (!channelsToHide.includes('facebook')) {
+        filteredPanes.push({content: <div></div>, tab: intl.formatMessage(messages.facebook), key: 'facebook'});
+      }
     }
 
     filteredPanes = filteredPanes.map( (pane) => {
       if (channelsToDisable.includes(pane.key)) {
+        // eslint-disable-next-line no-param-reassign
         pane.disabled = true;
       }
-    return pane;
+      return pane;
     });
 
     const channel = ['sms', 'email', 'mobilepush', 'call_task'];
@@ -78,7 +91,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       selectedChannel: defaultChannel,
       panes,
     };
-    !props.isFullMode && this.props.onChannelChange(defaultChannel);
+    if (!isFullMode) {
+      onChannelChange(defaultChannel);
+    }
   }
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
@@ -122,6 +137,17 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     />
   );
 
+  getFacebookComponent = () => {
+    const { messageDetails, cap, onFacebookSubmit } = this.props;
+    return (
+      <Facebook
+        messageDetails={messageDetails}
+        cap={cap}
+        onFacebookSubmit={onFacebookSubmit}
+      />
+    );
+  }
+
   getTemplatesComponent(channel) {
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
@@ -134,6 +160,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
         return this.getCallTaskComponent();
       case 'assets':
         return this.getGalleryComponent(location);
+      case 'facebook':
+        return this.getFacebookComponent();
       default:
         return (<Templates
           key={channel}
@@ -182,16 +210,16 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
             { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
           ]}
         />}
-        <div className="component-wrapper">
-          {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-          <StyledCapTab
-            panes={this.state.panes}
-            onChange={this.channelChange}
-            activeKey={this.state.selectedChannel}
-            defaultActiveKey={this.state.selectedChannel}
-            isFullMode={isFullMode}
-          />
-        </div>
+          <div className="component-wrapper">
+            {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
+              <StyledCapTab
+                panes={this.state.panes}
+                onChange={this.channelChange}
+                activeKey={this.state.selectedChannel}
+                defaultActiveKey={this.state.selectedChannel}
+                isFullMode={isFullMode}
+              />
+          </div>
       </div>
 
     );
@@ -213,6 +241,9 @@ TemplatesV2.propTypes = {
   channelsToHide: PropTypes.array,
   className: PropTypes.string.isRequired,
   channelsToDisable: PropTypes.array,
+  onFacebookSubmit: PropTypes.func,
+  messageDetails: PropTypes.object,
+  cap: PropTypes.object,
 };
 
 TemplatesV2.defaultProps = {

package/v2Containers/TemplatesV2/messages.js

@@ -42,6 +42,10 @@ export default defineMessages({
     id: 'creatives.containersV2.TemplatesV2.callTask',
     defaultMessage: 'Call Task',
   },
+  facebook: {
+    id: 'creatives.containersV2.TemplatesV2.facebook',
+    defaultMessage: 'Facebook',
+  },
   gallery: {
     id: 'creatives.containersV2.TemplatesV2.gallery',
     defaultMessage: 'Gallery',

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,