@capillarytech/creatives-library 3.6.1 → 3.6.3

package/containers/LanguageProvider/index.js

@@ -19,22 +19,12 @@ import moment from 'moment';
 import { makeSelectLocale } from './selectors';
 
 export class LanguageProvider extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
-  getMappedLocale = (locale) => {
-    const map = {
-      'en': 'en-US',
-      'zh-cn': 'zh',
-      'en-US': 'en-US',
-      'zh': 'zh',
-    };
-    return map[locale];
-  }
-
   render() {
     const mappedLocale = {
       'en': enUS,
       'zh-cn': zhCN,
       'en-US': enUS,
-      zh: zhCN,
+      'zh': zhCN,
     };
     const jLocale = localStorage.getItem('jlocale') || 'en';
     moment.locale(jLocale);

package/package.json

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

package/v2Components/MarketingObjective/MarketingObjective.style.js

@@ -29,6 +29,11 @@ export default css`
     }
   }
 
+  .is-scrollable-section {
+    height: calc(100vh - 150px);
+    overflow-y: auto;
+  }
+
   .radio-group-heading {
     margin-top: ${CAP_SPACE_16};
   }

package/v2Components/MarketingObjective/index.js

@@ -41,7 +41,11 @@ const renderMarketingObjectiveList = ({
     );
   };
 
-  return marketingObjectiveList.map((marketinObjective) => marketingList(marketinObjective));
+  return (
+    <div className="is-scrollable-section">
+      {marketingObjectiveList.map(marketingList)}
+    </div>
+  );
 };
 
 const MarketingObjective = ({

package/v2Containers/App/constants.js

@@ -41,4 +41,4 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
   wechat: TRACK_EDIT_WECHAT,
   gallery: TRACK_EDIT_IMAGE,
 };
-export const GTM_TRACKING_ID = 'UA-152081629-1';
+export const GTM_TRACKING_ID = 'UA-110024621-2';

package/v2Containers/Cap/actions.js

@@ -37,9 +37,10 @@ export function removeMessageFromQueue(messageIndex) {
   };
 }
 
-export function getUserData() {
+export function getUserData(callback) {
   return {
     type: types.GET_USER_DATA_REQUEST,
+    callback,
   };
 }
 

package/v2Containers/Cap/index.js

@@ -35,9 +35,9 @@ const CapWrapper = styled.div`
   padding: 0;
   flex-direction: column;
 `;
-
 GA.initialize({ accessKey: GTM_TRACKING_ID });
 
+
 export class Cap extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
   constructor(props) {
@@ -52,10 +52,12 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   componentWillMount() {
-    this.props.actions.getUserData();
+    this.props.actions.getUserData(() => {
+      this.setDimensionData();
+    });
     this.props.actions.getTopbarMenuData();
     if (this.props.Global.user) {
-      const userGtmData = this.getUserGtmData(this.props);
+      const userGtmData = this.getUserGtmData();
       gtm.push(userGtmData);
     }
     if (this.props.Global.orgID !== undefined) {
@@ -117,21 +119,30 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.setState({ switchedOrg: false });
     this.props.actions.clearTopbarMenuData();
   }
-
-  getUserGtmData = (props) => {
-    const { user: userData } = props.Global;
-    const userName = userData.attributes.USERNAME;
-    const userEmail = userData.attributes.EMAIL;
-    const orgObj = _.find(userData.proxyOrgList, {orgID: props.Global.orgID});
-    const gtmData = {
-      orgId: props.Global.orgID,
-      orgName: orgObj && orgObj.orgName,
-      userId: userData.refID,
-      userName: userName && userName.value,
-      userEmail: userEmail && userEmail.value,
-      isCapUser: userData.isCapUser,
-    };
-    return gtmData;
+  setDimensionData() {
+    const userGtmData = this.getUserGtmData();
+    Object.values(userGtmData).forEach((value, index) => {
+      GA.setCustomDimension({ [`dimension${index + 1}`]: value });
+    });
+  }
+  getUserGtmData(props) {
+    const selectedProps = props || this.props;
+    const { user: userData } = selectedProps.Global;
+    if (userData) {
+      const userName = userData.attributes.USERNAME;
+      const userEmail = userData.attributes.EMAIL;
+      const orgObj = _.find(userData.proxyOrgList, {orgID: selectedProps.Global.orgID});
+      const gtmData = {
+        isCapUser: userData.isCapUser,
+        orgId: selectedProps.Global.orgID,
+        orgName: orgObj && orgObj.orgName,
+        userId: userData.refID,
+        userName: userName && userName.value,
+        userEmail: userEmail && userEmail.value,
+      };
+      return gtmData;
+    }
+    return {};
   }
 
   getMappedLocale(locale) {

package/v2Containers/Cap/sagas.js

@@ -70,7 +70,7 @@ function* logoutFlow() {
   }
 }
 
-export function* fetchUserInfo() {
+export function* fetchUserInfo(option) {
   try {
     const result = yield call(Api.getUserData);
     const userData = result.user;
@@ -92,6 +92,9 @@ export function* fetchUserInfo() {
     yield call(LocalStorage.saveItem, 'orgID', result.currentOrgId);
     yield call(LocalStorage.saveItem, 'user', userData);
     yield put({type: types.GET_USER_DATA_SUCCESS, userData, currentOrgId: result.currentOrgId, currentOrgDetails});
+    if (option.callback) {
+      option.callback(userData);
+    }
   } catch (error) {
     yield call(LocalStorage.clearItem, 'user');
     yield put({

package/v2Containers/Email/index.js

@@ -625,7 +625,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const isEdit = this.state.isEdit;
     GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL, {
       category: 'Creatives',
-      action: isEdit ? 'Create' : 'Edit',
+      action: isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL,
       label: 'using editor',
     });
     if (createResponse && createResponse.templateId) {

package/v2Containers/Facebook/index.js

@@ -273,7 +273,7 @@ const Facebook = (props) => {
               />
             }
             visible={isDrawerVisible}
-            width={372}
+            width={380}
             onClose={() => setDrawerVisibility(false)}
           />
         </div>

package/v2Containers/MobilePush/Create/index.js

@@ -1408,7 +1408,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.props.actions.createTemplate(obj, () => {
       GA.timeTracker.stopTimer(TRACK_CREATE_MPUSH, {
         category: 'Creatives',
-        action: 'Create',
+        action: TRACK_CREATE_MPUSH,
         label,
       });
       this.discardValues();

package/v2Containers/MobilePush/Edit/index.js

@@ -276,7 +276,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const label = this.props.location.pathname.indexOf('image') >= 0 ? 'image' : 'text';
     GA.timeTracker.stopTimer(TRACK_EDIT_MPUSH, {
       category: 'Creatives',
-      action: 'Edit',
+      action: TRACK_EDIT_MPUSH,
       label,
     });
     this.resetSchema();

package/v2Containers/Sms/Create/index.js

@@ -27,7 +27,7 @@ import {SMS} from '../../CreativesContainer/constants';
 import {showError} from '../commonMethods';
 import withCreatives from '../../../hoc/withCreatives';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_SMS } from '../../App/constants'
+import { TRACK_CREATE_SMS } from '../../App/constants';
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -204,7 +204,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   onCreateTemplateComplete = (editResponse) => {
     GA.timeTracker.stopTimer(TRACK_CREATE_SMS, {
       category: 'Creatives',
-      action: 'Create',
+      action: TRACK_CREATE_SMS,
     });
     if (editResponse.templateId) {
       this.resetSchema();

package/v2Containers/Sms/Edit/index.js

@@ -25,7 +25,7 @@ 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 { 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) {
@@ -222,7 +222,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   onUpdateTemplateComplete = (editResponse) => {
     GA.timeTracker.stopTimer(TRACK_EDIT_SMS, {
       category: 'Creatives',
-      action: 'Edit',
+      action: TRACK_EDIT_SMS,
     });
     if (editResponse.templateId) {
       this.resetSchema();

package/v2Containers/WeChat/MapTemplates/index.js

@@ -30,7 +30,7 @@ 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 { TRACK_CREATE_WECHAT, TRACK_EDIT_WECHAT } from '../../App/constants';
 
 const SELECT_TEMPLATE_MODE = "selectTemplate";
 const MAP_TEMPLATE_MODE = "mapTemplateMode";
@@ -1015,7 +1015,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         }
         GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_WECHAT : TRACK_CREATE_WECHAT, {
           category: 'Creatives',
-          action: isEdit ? 'Edit' : 'Create',
+          action: isEdit ? TRACK_EDIT_WECHAT : TRACK_CREATE_WECHAT,
           label : 'MapTemplates',
         });
         console.log("Template created successfully", response, obj);

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

@@ -27,9 +27,9 @@ import FormBuilder from '../../../../v2Components/FormBuilder';
 import WechatRichmediaTemplatePreview from '../../../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 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 { 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 { 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);
@@ -274,9 +274,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     // if (temp.value && messages[temp.value] && temp.metaType === 'label') {
     //   temp.value = this.props.intl.formatMessage(messages[temp.value]);
     // }
-    // if (temp.inductiveText && messages[temp.inductiveText]) {
-    //   temp.inductiveText = this.props.intl.formatMessage(messages[temp.inductiveText]);
-    // }
+    if (temp.inductiveText && messages[temp.inductiveText]) {
+      temp.inductiveText = this.props.intl.formatMessage(messages[temp.inductiveText]);
+    }
     if (temp.options) {
       forEach(temp.options, (option, id) => {
         if (messages[option]) {
@@ -558,8 +558,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         // });
         GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_WECHAT : TRACK_CREATE_WECHAT, {
           category: 'Creatives',
-          action: isEdit ? 'Edit' : 'Create',
-          label : 'RichMedia',
+          action: isEdit ? TRACK_EDIT_WECHAT : TRACK_CREATE_WECHAT,
+          label: 'RichMedia',
         });
         if (getFormData) {
           getFormData(this.getFormData({
@@ -729,13 +729,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                   <div className={`custom-image ${totalContentBlocks !== 1 && "custom-image-border-bottom"}`}>
                     <img alt="" width="100%" height="136px" src={imageUrl} />
                     {totalContentBlocks !== 1 && <div className="name-container">
-                      <CapHeading type="h4">{formData['title-value'] || "Title"}</CapHeading>
+                      <CapHeading type="h4">{formData['title-value'] || this.props.intl.formatMessage(messages.title)}</CapHeading>
                     </div>}
                   </div>
                   {totalContentBlocks === 1 &&
                   <div className="custom-card">
-                    <CapHeading type="h4" className="overflow-wrap-fields">{formData['title-value'] || "Title"}</CapHeading>
-                    <CapLabel type="label9" className="overflow-wrap-fields">{formData['cover-abstract-value'] || "Cover abstract"}</CapLabel>
+                    <CapHeading type="h4" className="overflow-wrap-fields">{formData['title-value'] || this.props.intl.formatMessage(messages.title)}</CapHeading>
+                    <CapLabel type="label9" className="overflow-wrap-fields">{formData['cover-abstract-value'] || this.props.intl.formatMessage(messages.coverAbstract)}</CapLabel>
                   </div>
                 }
                 </div>
@@ -754,7 +754,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
             >
               <div className="richmedia-card-container">
                 <CapColumn span={18} className="overflow-wrap-fields title" >
-                  <CapLabel type="label9">{formData['title-value'] || "Title"}</CapLabel>
+                  <CapLabel type="label9">{formData['title-value'] || this.props.intl.formatMessage(messages.title)}</CapLabel>
                 </CapColumn>
                 <CapColumn span={6} className="image">
                   <img alt="" width="40px" height="40px" src={imageUrl} />
@@ -889,7 +889,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({showExistingTemplates: true});
     const queryParams = {
       name: searchText || '',
-      sortBy: sortBy,
+      sortBy,
       wecrmId: selectedWeChatAccount.configs.wecrm_app_id,
       wecrmToken: selectedWeChatAccount.configs.wecrm_token,
       originalId: selectedWeChatAccount.sourceAccountIdentifier,
@@ -914,7 +914,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       () => {
         this.getExistingTemplates();
         setTimeout(() => {
-          this.setState({ scrollDebounce: true })
+          this.setState({ scrollDebounce: true });
         }, 500);
       });
     }
@@ -934,27 +934,27 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         />
         <Pagination style={{ height: 'calc(100vh - 150px)', overflowY: 'auto' }} onPageChange={templates.length && this.onPaginationChange}>
           { templates.map((template) => (
-              <CapCard
-                key={template._id}
-                bordered={false}
-                bodyStyle={{
-                  padding: 0,
-                  borderRadius: '4px',
-                  width: '276px',
-                  border: '16px solid #f4f5f7',
-                }}
-                onClick={(e) => this.onChooseExistingTemplate(template, e)}
-                style={{ paddingBottom: CAP_SPACE_12 }}
+            <CapCard
+              key={template._id}
+              bordered={false}
+              bodyStyle={{
+                padding: 0,
+                borderRadius: '4px',
+                width: '276px',
+                border: '16px solid #f4f5f7',
+              }}
+              onClick={(e) => this.onChooseExistingTemplate(template, e)}
+              style={{ paddingBottom: CAP_SPACE_12 }}
               >
-                <div>
-                  <div className="custom-image">
-                    <img alt="" width="244px" height="136px" src={template.versions.base.mediaList[0].image_url} />
-                  </div>
-                  <div className="existing-template-title-card">
-                    <CapHeading type="h5" className="overflow-wrap-fields">{template.name || "Title"}</CapHeading>
-                  </div>
+              <div>
+                <div className="custom-image">
+                  <img alt="" width="244px" height="136px" src={template.versions.base.mediaList[0].image_url} />
                 </div>
-              </CapCard>
+                <div className="existing-template-title-card">
+                  <CapHeading type="h5" className="overflow-wrap-fields">{template.name || this.props.intl.formatMessage(messages.title)}</CapHeading>
+                </div>
+              </div>
+            </CapCard>
             ))
           }
         </Pagination>

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

@@ -263,4 +263,12 @@ export default defineMessages({
     id: `${scope}.searchText`,
     defaultMessage: 'Search Templates',
   },
+  'coverAbstract': {
+    id: `${scope}.coverAbstract`,
+    defaultMessage: 'Cover abstract',
+  },
+  'title': {
+    id: `${scope}.wechatTitle`,
+    defaultMessage: 'Title',
+  },
 });