@capillarytech/creatives-library 7.8.0 → 7.9.0

package/v2Containers/CreativesContainer/index.js

@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
+import { GA } from '@capillarytech/cap-ui-utils';
 
 import * as actions from './actions';
 import { selectEmailLayout, uploadSelector, templateUserList, makeSelectTemplates } from '../Templates/selectors';
@@ -18,6 +19,7 @@ import SlideBoxHeader from './SlideBoxHeader';
 import SlideBoxFooter from './SlideBoxFooter';
 import * as constants from './constants';
 import * as commonUtil from '../../utils/common';
+import { gtmPush } from '../../utils/gtmTrackers';
 import './index.scss';
 import * as templateActions from '../Templates/actions';
 import * as globalActions from '../Cap/actions';
@@ -25,11 +27,13 @@ import {isLoading as isLoadingSelector} from './selectors';
 import messages from './messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { makeSelectFetchingCmsData } from '../Email/selectors';
+import { IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO, TEMPLATE, STICKER } from '../Line/Container/constants';
 import {IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { CREATIVE } from '../Facebook/constants';
 
 
 const classPrefix = 'add-creatives-section';
+const CREATIVES_CONTAINER = 'creativesContainer';
 
 const SlideBoxWrapper = styled.div`
   .cap-slide-box-v2-container{
@@ -68,6 +72,10 @@ class Creatives extends React.Component {
     this.props.globalActions.clearMetaEntities();
   }
 
+  componentDidMount() {
+    GA.timeTracker.startTimer(CREATIVES_CONTAINER);
+  }
+
   onEnterTemplateName = () => {
     this.setState({templateNameExists: true});
   };
@@ -91,7 +99,7 @@ class Creatives extends React.Component {
     this.setState({ slidBoxContent: 'preview', templateData });
   };
   onEditTemplate = () => {
-    this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
+    this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true, templateNameExists: true });
   };
   onCreateNew = (fbAdManager) => {
     const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
@@ -345,7 +353,7 @@ class Creatives extends React.Component {
   }
 
   getCreativesData = (channel, template, templateRecords) => { //from creatives to consumers
-    let templateData = {channel };
+    let templateData = { channel };
     switch (channel) {
       case constants.SMS:
         if (template.value.base) {
@@ -502,6 +510,75 @@ class Creatives extends React.Component {
     return creativesMode;
   }
 
+  logGTMEvent(channel, creativesData) {
+    const LIBRARY = 'library';
+    const timeTaken = GA.timeTracker.stopTimer(CREATIVES_CONTAINER, {
+      category: 'Campaigns',
+      action: 'Creatives',
+      label: 'Indirect',
+    });
+    const {
+      androidContent: {
+        title: androidTitle,
+        message: androidMessage,
+        type: androidType,
+      } = {},
+      iosContent: {
+        title: iosTitle,
+        message: iosMessage,
+        type: iosType,
+      } = {},
+      messageBody = '',
+      emailBody = '',
+    } = creativesData;
+    let gtmDetails = {
+      channel,
+      timeTaken,
+      mode: LIBRARY,
+      content: messageBody,
+    };
+    switch (channel) {
+      case constants.SMS:
+      case constants.WECHAT:
+      case constants.VIBER:
+        break;
+      case constants.EMAIL:
+        gtmDetails = {
+          ...gtmDetails,
+          content: emailBody,
+        };
+        break;
+      case constants.MOBILE_PUSH:
+        gtmDetails = {
+          ...gtmDetails,
+
+          content: `${androidTitle} ${androidMessage} ${iosTitle} ${iosMessage}`,
+          imageAdded: androidType === 'IMAGE' || iosType === 'IMAGE',
+        };
+        break;
+      case constants.LINE:
+        gtmDetails = Object.assign({
+          ...gtmDetails,
+        }, this.getLineMessageTypes(messageBody));
+        break;
+      default:
+        return false;
+    }
+    gtmPush('creativeDetails', gtmDetails);
+  }
+
+  getLineMessageTypes(messageBody) {
+    const {
+      messages: lineMessages = [],
+    } = JSON.parse(messageBody);
+    const typeOfMessages = lineMessages.map((message) => message.type);
+    return {
+      imageAdded: typeOfMessages.some((type) => [IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, TEMPLATE].includes(type)),
+      videoAdded: typeOfMessages.includes(VIDEO),
+      stickerAdded: typeOfMessages.includes(STICKER),
+    };
+  }
+
   getFormData = (template) => {
     if (template.validity) {
       this.setState(
@@ -512,6 +589,7 @@ class Creatives extends React.Component {
           const templateData = this.state.templateData ? this.state.templateData : template; //select existing or create new content
           const channel = templateData.type;
           const creativesData = this.getCreativesData(channel, template, templateData );// convers data to consumer understandable format
+          this.logGTMEvent(channel, creativesData);
           this.props.getCreativesData(creativesData);// send data to consumer
         },
       );

package/v2Containers/Facebook/Advertisement/index.js

@@ -474,9 +474,9 @@ export const Advertisement = (props) => {
       if (webSiteLink === "" || errorMsg.websiteLinkErrorMsg ) {
         flag = true;
       }
-      if (Object.keys(imageData).length === 0 && subType === IMAGE) {
+      if (!imageData?.imageSrc && subType === IMAGE) {
         flag = true;
-      } else if (Object.keys(videoData).length === 0 && subType === VIDEO) {
+      } else if (!videoData?.videoSrc && subType === VIDEO) {
         flag = true;
       }
       subTypes.push(subType);

package/v2Containers/Facebook/Advertisement/index.scss

@@ -21,7 +21,7 @@ $classPrefix: add-facebook-ad-section;
         display: inline-block;
     }
     .cap-input-edit-name{
-        width: 500px;
+        width: 319px;
     }
     .cap-link-edit-name{
         display: inline-block;

package/v2Containers/Facebook/index.js

@@ -269,7 +269,11 @@ const Facebook = (props) => {
   ]);
   const query = {type: 'embedded', module: 'library'};
   const location = {pathname: `/FACEBOOK`, search: '', query};
-  return (showTemplateList ? (
+   
+  // fbAdManager ==cretaives only the case for default startegy and user selected "capillary ad manager"
+  // below condition (fbAdManager !==CREATIVE) is for edit fb ad manager from campaign
+  //-> select capillary ad manager-> select template
+  return ((showTemplateList && fbAdManager !==CREATIVE) ? (
     <Templates
       key={"FACEBOOK"}
       location={location}
@@ -280,11 +284,18 @@ const Facebook = (props) => {
       onSelectTemplate={onSelectTemplate}
       renderNewCardGrid={renderNewCardGrid}
       handlePeviewTemplate={handlePeviewTemplate}
-      fbAdManager={CREATIVE}
+      fbAdManager={CREATIVE} // it means we are selecting capillary ad manager from campaign
     />
   ) :
-    (!isFullMode && (fbAdManager !== CREATIVE && messageStrategy === "DEFAULT" || (templateData?.edit && templateData?.fbContentType !==CREATIVE)) ) ?
-      (<div className={className}>
+    (!isFullMode && ((fbAdManager !== CREATIVE && messageStrategy === "DEFAULT") 
+    || (templateData?.edit && templateData?.fbContentType !==CREATIVE && fbAdManager !== CREATIVE )) ) ?
+
+    // not fullmode + 
+    // default strtaegy and not selected "capillary ad manager" from campaign message + 
+    //edit template && not coming from campaign message where user selected "capillary ad manager" (means  edit "fb ad manager" from campaign) &&
+    // & also we are not selecting capillary ad manager from campaign
+
+    (<div className={className}>
 
         <div className="is-scrollable-section" >
           <div className="account-details-wrapper">

package/v2Containers/Line/Container/Drawer/index.js

@@ -59,7 +59,7 @@ export const LineDrawer = ({
         queryParams.page = page;
         queryParams.perPage = 25;
 
-        if (params.name !== "") {
+        if (params?.name) {
             queryParams.name = params.name;
             queryParams.page = 1;
         }

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';