@capillarytech/creatives-library 3.3.1 → 3.3.3

package/v2Components/MarketingObjective/messages.js

@@ -0,0 +1,23 @@
+/*
+ * Marketing Objective Messages
+ *
+ * This contains all the text for the Facebook component.
+ */
+import { defineMessages } from 'react-intl';
+
+const messagePrefix = 'creatives.containersV2.FacebookMarketingObjective';
+
+export default defineMessages({
+  fbMarketingObjectiveTitle: {
+    id: `${messagePrefix}.fbMarketingObjectiveTitle`,
+    defaultMessage: 'Facebook Marketing Objective',
+  },
+  fbMarketingObjectiveDescription: {
+    id: `${messagePrefix}.fbMarketingObjectiveDescription`,
+    defaultMessage: 'Objectives help break reporting into a more granular level',
+  },
+  fbMarketingObjectiveDone: {
+    id: `${messagePrefix}.fbMarketingObjectiveDone`,
+    defaultMessage: 'Done',
+  },
+});

package/v2Containers/App/constants.js

@@ -12,3 +12,32 @@ 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,
+};

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';
@@ -33,6 +34,8 @@ const CapWrapper = styled.div`
   flex-direction: column;
 `;
 
+GA.initialize({ accessKey: 'UA-152081629-1' });
+
 export class Cap extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
   constructor(props) {

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -12,6 +12,7 @@ import MobilepushWrapper from '../MobilepushWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
 import WechatWrapper from '../WeChat/Wrapper';
+import Facebook from '../Facebook';
 import { RICH_MEDIA, MAP_TEMPLATE, CREATE } from '../WeChat/Wrapper/constants';
 import CallTask from '../CallTask';
 import MobliPushEdit from '../MobilePush/Edit';
@@ -30,6 +31,7 @@ function getWechatTemplateType(mode, templateData, weChatTemplateType = '') {
   }
   return weChatTemplateType;
 }
+
 function SlideBoxContent(props) {
   const {
       slidBoxContent,
@@ -67,6 +69,7 @@ function SlideBoxContent(props) {
       selectedWeChatAccount,
       weChatMaptemplateStep,
       onWeChatMaptemplateStepChange,
+      onFacebookSubmit,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -87,6 +90,7 @@ function SlideBoxContent(props) {
   let isMpushPreview = false;
   let isEditCallTask = false;
   let isEditMPush = false;
+  let isEditFacebook = false;
   const isEmailCreate = slidBoxContent === 'createTemplate' && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
@@ -95,6 +99,7 @@ function SlideBoxContent(props) {
     isEditMPush = slidBoxContent === 'editTemplate' && channel === constants.MOBILE_PUSH;
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
     isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
+    isEditFacebook = slidBoxContent === 'editTemplate' && channel === constants.FACEBOOK;
     isPreview = slidBoxContent === 'preview' && channel === constants.SMS;
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
@@ -116,6 +121,8 @@ function SlideBoxContent(props) {
         channelsToHide={channelsToHide}
         forwardedTags={forwardedTags}
         channelsToDisable={channelsToDisable}
+        messageDetails={messageDetails}
+        onFacebookSubmit={onFacebookSubmit}
         />
         )}
       {isPreview && (
@@ -302,6 +309,16 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         selectedOfferDetails={selectedOfferDetails}/>
         }
+      {
+        isEditFacebook && (
+          <Facebook
+            templateData={templateData}
+            messageDetails={messageDetails}
+            cap={cap}
+            onFacebookSubmit={onFacebookSubmit}
+          />
+        )
+      }
     </CreativesWrapper>
   );
 }
@@ -341,5 +358,6 @@ SlideBoxContent.propTypes = {
   selectedWeChatAccount: PropTypes.object,
   onWeChatMaptemplateStepChange: PropTypes.func,
   weChatMaptemplateStep: PropTypes.string,
+  onFacebookSubmit: PropTypes.func,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/constants.js

@@ -12,5 +12,6 @@ export const LINE = "LINE";
 export const CALL_TASK = "CALL_TASK";
 export const MOBILE_PUSH = "MOBILEPUSH";
 export const WECHAT = "WECHAT";
+export const FACEBOOK = "FACEBOOK";
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

package/v2Containers/CreativesContainer/index.js

@@ -207,6 +207,14 @@ class Creatives extends React.Component {
           };
           break;
         }
+        case constants.FACEBOOK: {
+          creativesTemplateData = {
+            selectedMarketingObjective: templateData.selectedMarketingObjective,
+            edit: true,
+            type: channel,
+          };
+          break;
+        }
         default:
           break;
       }
@@ -465,7 +473,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, getCreativesData} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
@@ -530,6 +538,7 @@ class Creatives extends React.Component {
               weChatMaptemplateStep={weChatMaptemplateStep}
               selectedWeChatAccount={selectedWeChatAccount}
               onWeChatMaptemplateStepChange={this.onWeChatMaptemplateStepChange}
+              onFacebookSubmit={getCreativesData}
             />
           }
           footer={this.shouldShowFooter() &&

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,6 +622,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
   }
   onUpdateTemplateComplete = (createResponse) => {
+    GA.timeTracker.stopTimer(this.state.isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL, {
+      category: 'Creatives',
+      action: this.state.isEdit ? 'Create' : 'Edit',
+      label: 'using editor',
+    });
     if (createResponse && createResponse.templateId) {
       // this.resetSchema();
       let message;

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/Facebook/Facebook.style.js

@@ -0,0 +1,75 @@
+import { css } from 'styled-components';
+import {
+  CAP_SPACE_44,
+  CAP_SPACE_28,
+  CAP_SPACE_20,
+  CAP_SPACE_12,
+  CAP_SPACE_08,
+  CAP_G07,
+  CAP_G12,
+  CAP_G06,
+  FONT_COLOR_05,
+} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+  margin-left: ${CAP_SPACE_44};
+
+  .is-scrollable-section {
+    height: calc(100vh - 220px);
+    overflow-y: auto;
+  }
+
+  .account-details-wrapper {
+    border-bottom: 1px solid ${CAP_G12};
+    margin-bottom: ${CAP_SPACE_20};
+  }
+
+  .account-name-section {
+    margin-bottom: ${CAP_SPACE_28};
+  }
+
+  .account-section-container {
+    margin-bottom: ${CAP_SPACE_20};
+    max-width: 564px;
+  }
+
+  .ad-section {
+    margin-bottom: ${CAP_SPACE_44};
+  }
+
+  .dynamic-content-section {
+    max-width: 140px;
+
+    .facebook-dynamic-content {
+      color: ${CAP_G06};
+    }
+  }
+
+  .parameter-list {
+    padding: ${CAP_SPACE_08} ${CAP_SPACE_28};
+
+    .parameter-list-item {
+      list-style: none;
+      margin-bottom: ${CAP_SPACE_28};
+  
+      .parameter-index {
+        float: left;
+        margin-right: ${CAP_SPACE_12};
+        background: ${CAP_G07};
+        padding: 6px 10px;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .cap-button-v2 {
+    &.marketingObjective-change-button {
+      color: ${FONT_COLOR_05};
+      height: ${CAP_SPACE_20};
+    }
+  }
+`;
+
+export const CampaignDetailCapColumn = css`
+  margin-bottom: ${CAP_SPACE_20};
+`;

package/v2Containers/Facebook/actions.js

@@ -0,0 +1,13 @@
+/*
+ *
+ * Facebook actions
+ *
+ */
+
+import {
+  GET_MARKETING_OBJECTIVES,
+} from './constants';
+
+export const getMarketingObjectives = () => ({
+  type: GET_MARKETING_OBJECTIVES,
+});

package/v2Containers/Facebook/constants.js

@@ -0,0 +1,24 @@
+/*
+ *
+ * Facebook constants
+ *
+ */
+
+const prefix = 'app/Facebook';
+
+export const GET_MARKETING_OBJECTIVES = `${prefix}/GET_MARKETING_OBJECTIVES`;
+export const SET_MARKETING_OBJECTIVES_SUCCESS = `${prefix}/SET_MARKETING_OBJECTIVES_SUCCESS`;
+export const SET_MARKETING_OBJECTIVES_FAILURE = `${prefix}/SET_MARKETING_OBJECTIVES_FAILURE`;
+
+// marketing objectives constants
+
+export const VALUE_APP_INSTALLS = 'VALUE_APP_INSTALLS';
+export const VALUE_BRAND_AWARENESS = 'VALUE_BRAND_AWARENESS';
+export const VALUE_CONVERSIONS = 'VALUE_CONVERSIONS';
+export const VALUE_LEAD_GENERATION = 'VALUE_LEAD_GENERATION';
+export const VALUE_LOCAL_AWARENESS = 'VALUE_LOCAL_AWARENESS';
+export const VALUE_MESSAGES = 'VALUE_MESSAGES';
+export const VALUE_PRODUCT_CATALOG_SALES = 'VALUE_PRODUCT_CATALOG_SALES';
+export const VALUE_REACH = 'VALUE_REACH';
+export const VALUE_VIDEO_VIEWS = 'VALUE_VIDEO_VIEWS';
+export const VALUE_LINK_CLICKS = 'VALUE_LINK_CLICKS';