@capillarytech/creatives-library 7.6.12 → 7.6.13

package/v2Containers/App/constants.js

@@ -19,6 +19,8 @@ export const TRACK_CREATE_MPUSH = 'createMpush';
 export const TRACK_CREATE_WECHAT = 'createWeChat';
 export const TRACK_CREATE_IMAGE = 'createImage';
 export const TRACK_CREATE_LINE = 'createLine';
+export const TRACK_CREATE_VIBER = 'createViber';
+export const TRACK_CREATE_FACEBOOK = 'createFacebook';
 
 export const CREATE = 'create';
 export const EDIT = 'edit';
@@ -33,6 +35,8 @@ export const TRACK_EDIT_MPUSH = 'editMpush';
 export const TRACK_EDIT_WECHAT = 'editWeChat';
 export const TRACK_EDIT_IMAGE = 'editImage';
 export const TRACK_EDIT_LINE = 'editLine';
+export const TRACK_EDIT_VIBER = 'editViber';
+export const TRACK_EDIT_FACEBOOK = 'editFacebook';
 
 export const CHANNEL_CREATE_TRACK_MAPPING = {
   sms: TRACK_CREATE_SMS,
@@ -41,6 +45,8 @@ export const CHANNEL_CREATE_TRACK_MAPPING = {
   wechat: TRACK_CREATE_WECHAT,
   gallery: TRACK_CREATE_IMAGE,
   line: TRACK_CREATE_LINE,
+  viber: TRACK_CREATE_VIBER,
+  facebook: TRACK_CREATE_FACEBOOK
 };
 
 export const CHANNEL_EDIT_TRACK_MAPPING = {
@@ -50,6 +56,8 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
   wechat: TRACK_EDIT_WECHAT,
   gallery: TRACK_EDIT_IMAGE,
   line: TRACK_EDIT_LINE,
+  viber: TRACK_EDIT_VIBER,
+  facebook: TRACK_EDIT_FACEBOOK
 };
 export const GTM_TRACKING_ID = 'UA-110024621-2';
 export const BEE_PLUGIN = 'BEE_PLUGIN';
@@ -75,3 +83,6 @@ export const FB_AD_CALL_TO_ACTION = {
   SUBSCRIBE,
   WATCH_MORE,
 };
+
+
+export const CREATIVES = 'creatives';

package/v2Containers/Cap/index.js

@@ -77,13 +77,11 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       if (!userData.accessiblePermissions.includes(CREATIVES_UI_VIEW)) {
         this.setState({ isCreativesAccessible: false });
       }
-      this.setDimensionData();
+      const userGtmData = this.getUserGtmData();
+      this.setDimensionData(userGtmData);
+      gtm.push({...userGtmData, event: 'userAuthenticated'});
     });
     this.props.actions.getTopbarMenuData();
-    if (this.props.Global.user) {
-      const userGtmData = this.getUserGtmData();
-      gtm.push(userGtmData);
-    }
     if (this.props.Global.orgID !== undefined) {
       gtm.push({orgId: this.props.Global.orgID});
     }
@@ -133,18 +131,6 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     if (nextPropsUser && user && nextProps.Global.isLoggedIn && nextProps.Global.isLoggedIn !== this.props.Global.isLoggedIn) {
       this.props.appActions.getSidebar();
     }
-
-    if (nextProps.Global.user && this.props.Global.user && (nextProps.Global.user.refID !== this.props.Global.user.refID)) {
-      const userGtmData = this.getUserGtmData(nextProps);
-      gtm.push(userGtmData);
-    }
-
-    if (nextProps.Global.isLoggedIn && nextProps.Global.isLoggedIn !== this.props.Global.isLoggedIn) {
-      if (nextProps.Global.orgID !== undefined && !_.isEqual(nextProps.Global.orgID, this.props.Global.orgID)) {
-        const userGtmData = this.getUserGtmData(nextProps);
-        gtm.push(userGtmData);
-      }
-    }
   }
 
   componentDidUpdate(prevProps) {
@@ -182,26 +168,34 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     logNewTab();
   }
   
-  setDimensionData() {
-    const userGtmData = this.getUserGtmData();
+  setDimensionData(userGtmData) {
     Object.values(userGtmData).forEach((value, index) => {
       GA.setCustomDimension({ [`dimension${index + 1}`]: value });
     });
   }
   getUserGtmData(props) {
     const selectedProps = props || this.props;
-    const { user: userData } = selectedProps.Global;
+    const { user: userData,  orgID} = selectedProps?.Global || {};
     if (userData) {
-      const userName = userData.attributes.USERNAME;
-      const userEmail = userData.attributes.EMAIL;
-      const orgObj = _.find(userData.proxyOrgList, {orgID: selectedProps.Global.orgID});
+      const {
+        attributes: {
+          USERNAME : userName,
+          EMAIL : userEmail
+        } = {},
+        proxyOrgList,
+        isCapUser,
+        refID
+      } = userData;
+      const {
+        orgName
+      } = _.find(proxyOrgList, {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,
+        isCapUser: isCapUser,
+        orgId: orgID,
+        orgName,
+        userId: refID,
+        userName: userName?.value,
+        userEmail: userEmail?.value,
       };
       return gtmData;
     }

package/v2Containers/Email/index.js

@@ -31,8 +31,9 @@ import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
 import { EMAIL } from '../CreativesContainer/constants';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN } from '../App/constants';
+import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN, CREATE, EDIT } from '../App/constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
+import { gtmPush } from '../../utils/gtmTrackers';
 const {CapCustomCardList} = CapCustomCard;
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -656,8 +657,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
   }
   onUpdateTemplateComplete = (createResponse) => {
-    const {isEdit, formData = {} } = this.state || {};
+    const {isEdit, formData = {} } = _.cloneDeep(this.state) || {};
     const base = formData.base || {};
+    const { activeTab } = base;
     const isDragDrop = _.get(base[base.activeTab], 'is_drag_drop');
     let editorType = '';
     if ( isDragDrop === true && this.checkBeeEditorAllowedForLibrary()) {
@@ -665,12 +667,21 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     } else if (isDragDrop === false && !this.checkBeeEditorAllowedForLibrary()) {
       editorType = 'ckEditor';
     }
-    GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL, {
+    const timeTaken = GA.timeTracker.stopTimer(isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL, {
       category: 'Creatives',
       action: isEdit ? TRACK_EDIT_EMAIL : TRACK_CREATE_EMAIL,
       label: `using ${editorType}`,
     });
     if (createResponse && createResponse.templateId) {
+      gtmPush('creativeDetails', {
+        id: createResponse.templateId._id || createResponse.templateId,
+        name: formData['template-name'],
+        channel: EMAIL,
+        timeTaken,
+        content: base?.[activeTab]?.['template-content'],
+        mode: isEdit ? EDIT : CREATE
+      });
+      
       // this.resetSchema();
       let message;
       if (isEdit) {

package/v2Containers/EmailWrapper/index.js

@@ -27,6 +27,8 @@ import Email from '../Email';
 import CmsTemplatesComponent from '../../v2Components/CmsTemplatesComponent';
 import messages from './messages';
 import { CHANNEL_CREATE_TRACK_MAPPING } from '../App/constants';
+import { gtmPush } from '../../utils/gtmTrackers';
+import { EMAIL } from '../CreativesContainer/constants';
 
 const CapRadioCardWithLabel = ComponentWithLabelHOC(CapRadioCard);
 const { timeTracker } = GA;
@@ -116,13 +118,18 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     };
     CapNotification.error(message);
   }
-  stopTimerGA=() => {
+  stopTimerGA = () => {
     // stop timer
-    timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
+    const timeTaken = timeTracker.stopTimer(CHANNEL_CREATE_TRACK_MAPPING.email, {
       category: 'Creatives',
       action: 'Create',
       label: 'uploadZip',
     });
+    gtmPush('creativeDetails', {
+      channel: EMAIL,
+      timeTaken,
+      mode: 'uploadZip'
+    });    
   }
   handleFileUpload = (file = {}) => {
     const { templatesActions, intl, showNextStep, isUploading } = this.props;
@@ -133,8 +140,8 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
       if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
         templatesActions.handleZipUpload(file.originFileObj, () => { //handle upload success
+          this.stopTimerGA();
           this.setState({ modeContent: { file } }, showNextStep);
-          stopTimerGA();
         }, this.handleZipUploadError);
       } else if (fileExtension === 'html' || fileExtension === 'htm') {
         const reader = new FileReader();

package/v2Containers/Line/Container/index.js

@@ -18,11 +18,11 @@ import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 // GA
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_LINE, TRACK_EDIT_LINE } from '../../App/constants';
+import { CREATE, EDIT, TRACK_CREATE_LINE, TRACK_EDIT_LINE } from '../../App/constants';
 
 import LineWrapper from './Wrapper';
 import messages from './messages';
-import { TEXT, IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE, DEFAULT_VIDEO_URI  } from './constants';
+import { TEXT, IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, MAX_LINE_WRAPPER_LIMIT, MAX_LINE_WRAPPER_LIMIT_FULL_MODE, DEFAULT_VIDEO_URI, VIDEO, TEMPLATE  } from './constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
@@ -32,6 +32,8 @@ import {makeSelectCreateLine, makeSelectLine } from './selectors';
 import * as compActions from './actions';
 import * as templateActionsConfig from '../../Templates/actions';
 import withCreatives from '../../../hoc/withCreatives';
+import { gtmPush } from '../../../utils/gtmTrackers';
+import { LINE } from '../../CreativesContainer/constants';
 
 const { stopTimer } = GA.timeTracker;
 
@@ -348,6 +350,19 @@ export const LineContainer = ({
         }
     }
 
+    const formatFSPayload = (lineWrapperContents) => {
+        const [ {
+            messageTitle,
+            messageContent: content,
+            type,
+        } = {}] = lineWrapperContents;
+        return {
+            name: messageTitle,
+            content,
+            imageAdded: [IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, TEMPLATE].includes(type),
+            videoAdded: type === VIDEO
+        }
+    }
     const formatSubmitPayload = (lineWrapperContents) => {
         const [ {
             messageTitle,
@@ -561,11 +576,17 @@ export const LineContainer = ({
               createCallback(errorMessage);
               if (!errorMessage) {
                 // stop timer for create line
-                stopTimer(TRACK_CREATE_LINE, {
+                const timeTaken = stopTimer(TRACK_CREATE_LINE, {
                     category: 'Creatives',
                     action: TRACK_CREATE_LINE,
                     label: getLineType(lineWrapperContents),
                 });
+                gtmPush('creativeDetails', Object.assign({
+                    id: resp.templateId,
+                    channel: LINE,
+                    mode: CREATE,
+                    timeTaken,
+                }, formatFSPayload(lineWrapperContents)));
                 onCreateComplete();
               }
             }
@@ -604,11 +625,18 @@ export const LineContainer = ({
                 editCallback(errorMessage);
                 if (!errorMessage) {
                     // stop timer for edit line
-                    stopTimer(TRACK_EDIT_LINE, {
+                    const timeTaken = stopTimer(TRACK_EDIT_LINE, {
                         category: 'Creatives',
                         action: TRACK_EDIT_LINE,
                         label: getLineType(lineWrapperContents),
                     });
+                    gtmPush('creativeDetails', Object.assign({
+                        id: resp.templateId._id,
+                        channel: LINE,
+                        mode: EDIT,
+                        timeTaken,
+                    }, formatFSPayload(lineWrapperContents)));
+                   
                     onCreateComplete();
                 }
           });

package/v2Containers/Line/Create/_lineCreate.scss

@@ -0,0 +1,64 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.line-row{
+  margin-bottom: 16px;
+}
+.slidebox-content-container {
+  overflow-x: hidden;
+}
+.line-image {
+  position: relative;
+}
+.image-container {
+  display: flex;
+  & > div {
+    min-width: 516px;
+  }
+  border-radius: 5px;
+  .image-placeholder{
+    line-height: 150px;
+  }
+  img {
+    object-fit: cover;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto !important;
+    width: auto !important;
+  }
+}
+
+.pagination-container.gallery-upload {
+  height: calc(100vh - 60px);
+
+  .cap-custom-card-list-col {
+    max-width: 156px;
+    max-height: 156px;
+    display: inline-block;
+    margin-left: $CAP_SPACE_04;
+    margin-right: $CAP_SPACE_04;
+  }
+
+  .ant-card-body {
+    padding-top: 0;
+
+    .ant-card-meta-description img {
+      height: 80px;
+      width: auto;
+    }
+  }
+}
+
+.gallery-image {
+  height: 156px;
+  width: 156px;
+  border-radius: 4px;
+  margin: 3px;
+}
+
+.sms-text {
+  img {
+    display: block;
+    max-width: 100%;
+    object-fit: cover;
+  }
+}

package/v2Containers/Line/Create/actions.js

@@ -0,0 +1,94 @@
+/*
+ *
+ * Create actions
+ *
+ */
+
+import * as types from './constants';
+
+export function createTemplate(template, callback) {
+  console.log('action trigereed createtemplate');
+  return {
+    type: types.CREATE_TEMPLATE_REQUEST,
+    template,
+    callback,
+  };
+}
+
+export function clearCreateResponse() {
+  console.log('clearCreateResponse');
+  return {
+    type: types.CLEAR_CREATE_RESPONSE_REQUEST,
+  };
+}
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function uploadAsset(file, assetType, fileParams) {
+  return {
+    type: types.UPLOAD_ASSET_REQUEST,
+    file,
+    assetType,
+    fileParams,
+  };
+}
+
+export function clearAsset() {
+  return {
+    type: types.CLEAR_ASSET,
+  };
+}
+
+
+// FOR EDIT
+
+
+export function editTemplate(template, callback) {
+  console.log('action trigereed editTemplate line @@@');
+  return {
+    type: types.EDIT_TEMPLATE_REQUEST,
+    template,
+    callback,
+  };
+}
+
+export function getTemplateDetails(id) {
+  console.log('getting template line @@@', id);
+  return {
+    type: types.GET_TEMPLATE_DETAILS_REQUEST,
+    id,
+    channel: 'LINE',
+  };
+}
+
+export function clearEditResponse() {
+  console.log('clearEditResponse');
+  return {
+    type: types.CLEAR_EDIT_RESPONSE_REQUEST,
+  };
+}
+
+export function clearData() {
+  return {
+    type: types.CLEAR_DATA,
+  };
+}
+
+export function getLineTemplatesList(channel, queryParams) {
+  return {
+    type: types.GET_LINE_TEMPLATES_LIST_REQUEST,
+    channel,
+    queryParams,
+  };
+}
+
+export function setSelectedTemplate(templateData) {
+  return {
+    type: types.SET_SELECTED_TEMPLATE,
+    data: templateData,
+  };
+}

package/v2Containers/Line/Create/constants.js

@@ -0,0 +1,43 @@
+/*
+ *
+ * Create constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/Create/DEFAULT_ACTION';
+
+
+export const CREATE_TEMPLATE_REQUEST = 'app/v2Containers/Line/Create/CREATE_TEMPLATE_REQUEST';
+export const CREATE_TEMPLATE_SUCCESS = 'app/v2Containers/Line/Create/CREATE_TEMPLATE_SUCCESS';
+export const CREATE_TEMPLATE_FAILURE = 'app/v2Containers/Line/Create/CREATE_TEMPLATE_FAILURE';
+export const UPLOAD_ASSET_REQUEST = 'app/v2Containers/Line/Create/UPLOAD_ASSET_REQUEST';
+export const UPLOAD_ASSET_SUCCESS = 'app/v2Containers/Line/Create/UPLOAD_ASSET_SUCCESS';
+export const UPLOAD_ASSET_FAILURE = 'app/v2Containers/Line/Create/UPLOAD_ASSET_FAILURE';
+export const CLEAR_ASSET = 'app/v2Containers/Line/Create/CLEAR_ASSET';
+
+export const CLEAR_CREATE_RESPONSE_REQUEST = 'app/v2Containers/Line/Create/CLEAR_CREATE_RESPONSE_REQUEST';
+export const CLEAR_CREATE_RESPONSE_SUCCESS = 'app/v2Containers/Line/Create/CLEAR_CREATE_RESPONSE_SUCCESS';
+export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/v2Containers/Line/Create/CLEAR_CREATE_RESPONSE_FAILURE';
+
+export const LINE_IMG_HEIGHT = 400;
+export const LINE_IMG_WIDTH = 300;
+export const LINE_IMG_SIZE = 30000000;
+
+
+// edit
+
+export const GET_TEMPLATE_DETAILS_REQUEST = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_FAILURE';
+
+export const EDIT_TEMPLATE_REQUEST = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_REQUEST';
+export const EDIT_TEMPLATE_SUCCESS = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_SUCCESS';
+export const EDIT_TEMPLATE_FAILURE = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_FAILURE';
+
+export const CLEAR_EDIT_RESPONSE_REQUEST = 'app/v2Containers/line/Edit/CLEAR_EDIT_RESPONSE_REQUEST';
+export const CLEAR_DATA = 'app/v2Containers/Line/Edit/CLEAR_DATA';
+export const SET_SELECTED_TEMPLATE = 'app/v2Containers/Line/Edit/SET_SELECTED_TEMPLATE';
+
+export const GET_LINE_TEMPLATES_LIST_REQUEST = 'app/v2Containers/Line/GET_LINE_TEMPLATES_LIST_REQUEST';
+export const GET_LINE_TEMPLATES_LIST_SUCCESS = 'app/v2Containers/Line/GET_LINE_TEMPLATES_LIST_SUCCESS';
+export const GET_LINE_TEMPLATES_LIST_FAILURE = 'app/v2Containers/Line/GET_LINE_TEMPLATES_LIST_FAILURE';