@capillarytech/creatives-library 3.9.21 → 3.10.0

package/v2Components/TemplatePreview/index.js

@@ -10,114 +10,17 @@ import React from 'react';
 import _ from 'lodash';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 // import styled from 'styled-components';
-import {CapColumn, CapRow, CapHeading, CapIcon, CapButton, CapImage} from '@capillarytech/cap-ui-library';
+import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
-import { WECHAT } from '../../v2Containers/CreativesContainer/constants';
-const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
-const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
+const smsIcon = require('./assets/images/user-icon.svg');
+const wechatBody = require('./assets/images/WECHAT_5x.png');
+const smsBody = require('./assets/images/mobile.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
 
 class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  onPreviewContentClicked = (channel) => {
-    const IOSContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.IOS) ||
-      ((this.props.device === 'iphone' || this.props.device === 'ios') && this.props.content);
-    const ANDROIDContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.ANDROID) ||
-      (this.props.device === 'android' && this.props.content);
-    const mobilePushPreviewContent = [];
-    if (this.props.channel === 'MOBILEPUSH') {
-      const previewObj = {
-        channel: this.props.channel,
-        accountId: this.props.templateDataRaw && this.props.templateDataRaw.definition.accountId,
-        messageSubject: this.props.templateDataRaw && this.props.templateDataRaw.name,
-        id: 'message_content_id_1',
-      };
-      if (IOSContent) {
-        previewObj.iosContent = {
-          title: IOSContent.title || IOSContent.header,
-          message: IOSContent.message || IOSContent.bodyText,
-          deviceType: "IOS",
-          expandableDetails: IOSContent.expandableDetails ||
-            {
-              style: "BIG_PICTURE",
-              image: this.props.content.bodyImage,
-              message: this.props.content.bodyText,
-            },
-        };
-      }
-      if (ANDROIDContent) {
-        previewObj.androidContent = {
-          title: ANDROIDContent.title || ANDROIDContent.header,
-          message: ANDROIDContent.message || ANDROIDContent.bodyText,
-          deviceType: "ANDROID",
-          expandableDetails: ANDROIDContent.expandableDetails ||
-            {
-              style: "BIG_PICTURE",
-              image: this.props.content.bodyImage,
-              message: this.props.content.bodyText,
-            },
-        };
-      }
-      mobilePushPreviewContent.push(previewObj);
-    }
-    const previewContent = this.props.channel === 'MOBILEPUSH' ? mobilePushPreviewContent : this.props.content;
-    const params = {
-      content: previewContent,
-      channel,
-    };
-    this.props.onPreviewContentClicked(params);
-  };
-
-  onTestContentClicked = (channel) => {
-    let mobilePushPreviewContent = {};
-    const IOSContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.IOS) ||
-      ((this.props.device === 'iphone' || this.props.device === 'ios') && this.props.content);
-    const ANDROIDContent = (this.props.templateDataRaw && this.props.templateDataRaw.versions.base.ANDROID) ||
-      (this.props.device === 'android' && this.props.content);
-    if (this.props.channel === 'MOBILEPUSH') {
-      mobilePushPreviewContent = {
-        channel: this.props.channel,
-        accountId: this.props.templateDataRaw && this.props.templateDataRaw.definition.accountId,
-        messageSubject: this.props.templateDataRaw && this.props.templateDataRaw.name,
-        id: 'message_content_id_1',
-      };
-      if (ANDROIDContent) {
-        mobilePushPreviewContent.androidContent = {
-          title: ANDROIDContent.title || ANDROIDContent.header,
-          message: ANDROIDContent.message || ANDROIDContent.bodyText,
-          deviceType: "ANDROID",
-          expandableDetails: ANDROIDContent.expandableDetails ||
-            {
-              style: "BIG_PICTURE",
-              image: this.props.content.bodyImage,
-              message: this.props.content.bodyText,
-            },
-        };
-      }
-      if (IOSContent) {
-        mobilePushPreviewContent.iosContent = {
-          title: IOSContent.title || IOSContent.header,
-          message: IOSContent.message || IOSContent.bodyText,
-          deviceType: "IOS",
-          expandableDetails: IOSContent.expandableDetails ||
-            {
-              style: "BIG_PICTURE",
-              image: this.props.content.bodyImage,
-              message: this.props.content.bodyText,
-            },
-        };
-      }
-    }
-    const previewContent = this.props.channel === 'MOBILEPUSH' ? mobilePushPreviewContent : this.props.content;
-    const params = {
-      content: previewContent,
-      channel,
-    };
-    this.props.onTestContentClicked(params);
-  };
-
   render() {
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
     const channel = this.props.channel;
@@ -147,7 +50,6 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         return undefined;
       });
     }
-    const disablePreviewAndTest = this.props.channel === 'MOBILEPUSH' ? !this.props.content.header : (this.props.channel === 'SMS' ? !this.props.content : false);
     return (
       <CapRow>
         {this.props.showCount && <CapColumn span={16}>
@@ -162,45 +64,16 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           </CapHeading>}
         </CapColumn>}
         <CapColumn span={this.props.showCount ? 8 : 24}>
-          {this.props.showTestAndPreviewIcon && this.props.channel !== WECHAT && (
-            <div className="test-and-preview-container">
-              <CapButton
-                style={{
-                  color: '#2466ea',
-                  display: 'inline-block',
-                  padding: '0 6px',
-                  marginTop: '12px',
-                }}
-                type="flat"
-                onClick={() => this.onPreviewContentClicked(this.props.channel)}
-                disabled={disablePreviewAndTest}
-              >
-                <CapIcon type="eye"/><FormattedMessage {...messages.preview} />
-              </CapButton>
-              <CapButton
-                style={{
-                  color: '#2466ea',
-                  display: 'inline-block',
-                  padding: '0 6px',
-                  marginTop: '12px',
-                }}
-                type="flat"
-                onClick={() => this.onTestContentClicked(this.props.channel)}
-                disabled={disablePreviewAndTest}
-              >
-                <CapIcon type="lab"/><FormattedMessage {...messages.testMessage} />
-              </CapButton>
-            </div>
-          )}
           <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
             { channel && channel.toLowerCase() === 'sms' &&
               <div>
-                <div className="shell-v2 align-center" id="sms-preview">
-                  <CapImage className="preview-image sms" src={smsMobileAndroid} alt="Preview is being generated"/>
+                <div className="shell align-center" id="sms-preview">
+                  <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
                   <div className="msgContainer sms">
+                    <img className="sms-icon" src={smsIcon} alt="Sms icon" />
                     <div className={"message-pop sms"}>
                       {content && content.length && content.map((msg, index) =>
-                        <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
+                        <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
                           {msg}
                         </CapColumn>)
                   }
@@ -223,9 +96,10 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               </div>
             }
             {channel && channel.toLowerCase() === 'wechat' ?
-            ( <div className="shell-v2 align-center" id="sms-preview">
-              <CapImage className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBodyNew : smsMobileAndroid} alt="Preview is being generated"/>
-              <div className="msgContainer wechat">
+            ( <div className="shell align-center" id="sms-preview">
+              <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt="Preview is being generated"/>
+              <div className="msgContainer">
+                {this.props.channel.toLowerCase() === 'wechat' ? <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div> : <img className="sms-icon" src={smsIcon} alt={this.props.intl.formatMessage(messages.smsIcon)} />}
                 <div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
                 </div>
               </div>
@@ -233,10 +107,10 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           ) : ''
         }
             { channel && (channel.toLowerCase() === 'mobilepush') &&
-            (<div className="shell-v2 align-center" id="mobilepush-preview">
-              <CapImage className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+            (<div className="shell align-center" id="mobilepush-preview">
+              <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
-                <div className={`${this.props.device === 'ios' ? 'iphone' : this.props.device}-push-message-Container`}>
+                <div className={`${this.props.device}-push-message-Container`}>
                   {this.props.device === "android" ?
                     <div className="message-pop align-left">
                       <div className="app-name">
@@ -249,7 +123,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         {content.bodyText}
                       </div>
                       {content.bodyImage && <div className="body-image">
-                        <CapImage src={content.bodyImage} alt="" />
+                        <img src={content.bodyImage} alt="" />
                       </div>}
                       {content.actions.filter((action) => action.label).length ?
                         <div className="actions">
@@ -264,7 +138,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         <span className="app-icon"></span>{content.appName ? content.appName : "App name"} <i className="material-icons">{this.props.intl.formatMessage(messages.close)}</i>
                       </div>
                       {content.bodyImage && <div className="body-image">
-                        <CapImage src={content.bodyImage} alt=""/>
+                        <img src={content.bodyImage} alt=""/>
                       </div>}
                       <div className="title">
                         {content.header}
@@ -282,22 +156,13 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         }
             {
           channel && channel.toLowerCase() === 'line' ? (
-            <div className="shell-v2 align-center" id="sms-preview">
-              <CapImage className="preview-image" src={wechatBodyNew} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-              <div className="msgContainer line-preview">
-                <div className="sms-icon" style={{ left: 10, borderRadius: '50%', width: '20px', height: '20px', background: '#2E89DF' }}></div>
+            <div className="shell align-center" id="sms-preview">
+              <img className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <div className="msgContainer">
+                <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div>
                 <div className="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
-                  {
-                    content && Object.keys(content).map((item) => {
-                      if (item === 'bodyText' && content[item]) {
-                        return content[item];
-                      }
-                      if (item === 'bodyImage' && content[item]) {
-                        return <CapImage src={content[item]} alt="brand-name" style={{maxWidth: '100%'}}/>;
-                      }
-                      return null;
-                    })
-                  }
+                  { (content && content.bodyImage) ? <img src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
+                  { (content && content.bodyText) ? content.bodyText : ''}
                 </div>
               </div>
               { (content && content.bodyText) ? <p style={{fontSize: 16, fontWeight: "bold"}}>Chars Count: {content.bodyText.length} / (1600)</p> : '' }
@@ -324,10 +189,6 @@ TemplatePreview.propTypes = {
   unicodeEnabled: PropTypes.bool,
   showCount: PropTypes.bool,
   intl: intlShape.isRequired,
-  templateDataRaw: PropTypes.object,
-  onPreviewContentClicked: PropTypes.func,
-  onTestContentClicked: PropTypes.func,
-  showTestAndPreviewIcon: PropTypes.bool,
 };
 
 export default (injectIntl(TemplatePreview));

package/v2Components/TemplatePreview/messages.js

@@ -50,12 +50,4 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.smsIcon',
     defaultMessage: 'Sms Icon',
   },
-  preview: {
-    id: 'creatives.componentsV2.TemplatePreview.preview',
-    defaultMessage: 'Preview',
-  },
-  testMessage: {
-    id: 'creatives.componentsV2.TemplatePreview.testMessage',
-    defaultMessage: 'Test Message',
-  },
 });

package/v2Containers/Assets/Gallery/index.js

@@ -81,7 +81,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
       const params = {
         name: this.state.searchText,
       };
-      this.getAllAssets({params, resetPage: true});
+      this.getAllAssets({params});
     }
     if (!this.props.Gallery.fetchingAllAssets && !_.isEmpty(this.props.Gallery.assetList) && this.props.Gallery.assetList[0] && this.props.Gallery.assetList[0].totalCount && this.state.totalCount === 0) {
       this.setState({totalCount: this.props.Gallery.assetList[0].totalCount});
@@ -98,12 +98,19 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
         name: this.state.searchText,
         sortBy: 'Most Recent',
       };
-      this.getAllAssets({params, resetPage: true});
+      this.getAllAssets({params});
     }
     if (!nextProps.Gallery.deletingAsset && nextProps.Gallery.assetDeleteError && !_.isEqual(nextProps.Gallery.deletingAsset, this.props.Gallery.deletingAsset)) {
       const message = getMessageObject('error', this.props.intl.formatMessage(messages.assetDeleteFailed), true);
       this.props.globalActions.addMessageToQueue(message);
     }
+    if ( nextProps.Gallery.itemDeleted || !nextProps.Gallery.assetUploading) {
+      const params = {
+        name: this.state.searchText,
+        sortBy: 'Most Recent',
+      };
+      this.getAllAssets({params}, true);
+    }
   }
 
   componentWillUnmount() {
@@ -229,20 +236,18 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
   uploadImages(e, {files}) {
     e.preventDefault();
     const _URL = window.URL || window.webkitURL;
+    //const file = files[0];
     for (const file in files) {
-      if (files.hasOwnProperty(file)) {
-        const img = new Image();
-        const that = this;
-        img.src = _URL.createObjectURL(files[file]);
-        img.onload = function () {
-          const fileParams = {
-            width: this.width,
-            height: this.height,
-            isGeneratePreview: true,
-          };
-          that.props.actions.uploadAsset(files[file], 'image', fileParams);
+      const img = new Image();
+      const that = this;
+      img.src = _URL.createObjectURL(files[file]);
+      img.onload = function () {
+        const fileParams = {
+          width: this.width,
+          height: this.height,
         };
-      }
+        that.props.actions.uploadAsset(files[file], 'image', fileParams);
+      };
     }
   }
   getIllustrationProps={
@@ -311,34 +316,29 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
         {
           key: `${currentChannel}-card-${template.name}`,
           title: <span title={template.name} >{template.name}</span>,
+          extra: [
+            <CapIcon
+              className="view-gallery"
+              style={{marginRight: '16px'}}
+              type="eye"
+              onClick={() => { this.openPreviewMode(template); }}
+              />,
+            <CapDropdown
+              overlay={
+                <CapMenu>
+                  <CapMenu.Item className="delete-gallery" onClick={() => this.deleteAsset(template)}>
+                    <FormattedMessage {...messages.delete} />
+                  </CapMenu.Item>
+                </CapMenu>
+          }
+        >
+              <CapIcon type="more" />
+            </CapDropdown>,
+          ],
         };
-      if (!this.props.isLineAsset) {
-        templateData.extra = [
-          <CapIcon
-            className="view-gallery"
-            style={{marginRight: '16px'}}
-            type="eye"
-            onClick={() => { this.openPreviewMode(template); }}
-            />,
-          <CapDropdown
-            overlay={
-              <CapMenu>
-                <CapMenu.Item className="delete-gallery" onClick={() => this.deleteAsset(template)}>
-                  <FormattedMessage {...messages.delete} />
-                </CapMenu.Item>
-              </CapMenu>
-        }
-      >
-            <CapIcon type="more" />
-          </CapDropdown>,
-        ];
-      }
       if (!this.props.isFullMode) {
         templateData.hoverOption = <CapButton onClick={(e) => handlers.selectAsset(e, template._id)}><FormattedMessage {...messages.select} /></CapButton>;
       }
-      if (this.props.isLineAsset) {
-        templateData.hoverOption = <CapButton onClick={() => this.props.onGalleryImageSelect(template)}><FormattedMessage {...messages.select} /></CapButton>;
-      }
       const secureFilePath = _.get(template, 'metaInfo.secure_file_path');
       templateData.url = secureFilePath || _.get(template, 'metaInfo.public_url');
       return templateData;
@@ -347,7 +347,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
       {filterContent}
       <CapSpin spinning={isLoading} tip={loadingTip} style={{width: "100%"}}>
         {!isLoading && <div>
-          {!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className={`pagination-container ${this.props.isLineAsset ? 'gallery-upload' : ''}`}>
+          {!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className="pagination-container">
             <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
             {!_.isEmpty(searchText) && _.isEmpty(templates) && (
               <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
@@ -421,25 +421,21 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
         <div style={{ marginTop: '8px', width: '50%'}}>
           <CapInput.Search
             className="search-text"
-            style={{width: `${this.props.isLineAsset ? '324px' : '210px'}`}}
+            style={{width: '210px'}}
             placeholder={this.props.intl.formatMessage(messages.search)}
             value={this.state.searchText}
             onChange={(e) => this.searchAsset(e.target.value)}
             onClear={() => this.searchAsset('')}
           />
         </div>
-        {
-          !this.props.isLineAsset && (
-            <div style={{ textAlign: 'right', marginTop: '16px', width: '50%'}}>
-              <form encType="multipart/form-data" id="myForm">
-                <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>
-                <CapButton className="upload-image-gallery" type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
-                  <FormattedMessage {...messages.upload} />
-                </CapButton>
-              </form>
-            </div>
-          )
-        }
+        <div style={{ textAlign: 'right', marginTop: '16px', width: '50%'}}>
+          <form encType="multipart/form-data" id="myForm">
+            <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>
+            <CapButton className="upload-image-gallery" type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+              <FormattedMessage {...messages.upload} />
+            </CapButton>
+          </form>
+        </div>
       </div>
     ) : <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>;
     const isLoading = this.props.Gallery.assetUploading || this.props.Gallery.fetchingAllAssets;
@@ -500,8 +496,6 @@ Gallery.propTypes = {
   location: PropTypes.object,
   intl: intlShape.isRequired,
   isFullMode: PropTypes.bool,
-  isLineAsset: PropTypes.bool,
-  onGalleryImageSelect: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -11,14 +11,12 @@ import EmailWrapper from '../EmailWrapper';
 import MobilepushWrapper from '../MobilepushWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
-import LineEdit from '../Line/Create';
 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';
 import * as constants from './constants';
-import CreateLineWrapper from '../Line/CreateWrapper';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -43,7 +41,6 @@ function SlideBoxContent(props) {
       location,
       isGetFormData,
       getFormData,
-      onCreateComplete,
       messageDetails,
       onCreateNew,
       currentChannel,
@@ -72,11 +69,7 @@ function SlideBoxContent(props) {
       selectedWeChatAccount,
       weChatMaptemplateStep,
       onWeChatMaptemplateStepChange,
-      onTestContentClicked,
-      onPreviewContentClicked,
       onFacebookSubmit,
-      saveMessage,
-      selectedAccount,
     } = 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,11 +80,9 @@ function SlideBoxContent(props) {
   };
   let channel = currentChannel;//for create mode
   const isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
-  const isCreateLine = slidBoxContent === 'createTemplate' && channel === constants.LINE;
   const isCreateMPush = slidBoxContent === 'createTemplate' && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = slidBoxContent === 'createTemplate' && channel === constants.CALL_TASK;
   let isEditSms = false;
-  let isEditLine = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;
   let isPreview = false;
@@ -104,42 +95,16 @@ function SlideBoxContent(props) {
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
     isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
-    isEditLine = slidBoxContent === 'editTemplate' && channel === constants.LINE;
     isEditCallTask = slidBoxContent === 'editTemplate' && channel === constants.CALL_TASK;
     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 || channel === constants.LINE);
+    isPreview = slidBoxContent === 'preview' && channel === constants.SMS;
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
   }
 
-  const getChannelPreviewContent = (templateDataObject) => {
-    switch (templateDataObject.type.toUpperCase()) {
-      case constants.SMS:
-        return get(templateDataObject, `versions.base['sms-editor']`);
-      case constants.LINE: {
-        const content = get(templateDataObject, `versions.base.content.messages[0]`, {});
-        let previewContent = {};
-        if (content.text) {
-          previewContent = {
-            bodyText: content.text,
-          };
-        }
-        if (content.originalContentUrl) {
-          previewContent = {
-            ...previewContent,
-            bodyImage: content.previewImageUrl,
-          };
-        }
-        return previewContent;
-      }
-      default:
-        return get(templateDataObject, `versions.base.content`);
-    }
-  };
-
   return (
     <CreativesWrapper>
       {!isFullMode && slidBoxContent === 'templates' && (
@@ -162,10 +127,10 @@ function SlideBoxContent(props) {
         )}
       {isPreview && (
       <TemplatePreview
-        content={getChannelPreviewContent(templateData)}
+        content={templateData.type.toUpperCase() === constants.SMS ? get(templateData, `versions.base['sms-editor']`) : get(templateData, `versions.base.content`)}
         unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
         channel={templateData.type.toLowerCase()}
-        charCounterEnabled={channel === constants.SMS}
+        charCounterEnabled
         templateData={templateData}
         showCount
         forwardedTags={forwardedTags}
@@ -220,8 +185,6 @@ function SlideBoxContent(props) {
           templateData={templateData}
           forwardedTags={forwardedTags}
           selectedOfferDetails={selectedOfferDetails}
-          onPreviewContentClicked={onPreviewContentClicked}
-          onTestContentClicked={onTestContentClicked}
         />
       )}
       {
@@ -255,8 +218,6 @@ function SlideBoxContent(props) {
         isFullMode={isFullMode}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}
       />
         )}
       {isEmailCreate && (
@@ -279,8 +240,6 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -304,8 +263,6 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}
       />
         )}
       {isEditMPush &&
@@ -326,8 +283,6 @@ function SlideBoxContent(props) {
           onValidationFail={onValidationFail}
           forwardedTags={forwardedTags}
           selectedOfferDetails={selectedOfferDetails}
-          onPreviewContentClicked={onPreviewContentClicked}
-          onTestContentClicked={onTestContentClicked}
         />
         }
       {isCreateMPush &&
@@ -352,9 +307,7 @@ function SlideBoxContent(props) {
         query={query}
         forwardedTags={forwardedTags}
         onValidationFail={onValidationFail}
-        selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}/>
+        selectedOfferDetails={selectedOfferDetails}/>
         }
       {
         isEditFacebook && (
@@ -366,39 +319,6 @@ function SlideBoxContent(props) {
           />
         )
       }
-      {
-        isEditLine && (
-          <LineEdit
-            location={creativesLocationProps}
-            params={{
-              id: templateData._id,
-              mode: templateData.modeType || (templateData.definition && templateData.definition.mode),
-            }}
-            route={{ name: (templateData.modeType || (templateData.definition && templateData.definition.mode)) === 'image' ? 'edit_image' : 'edit_text' }}
-            onCreateComplete={onCreateComplete}
-            isFullMode={isFullMode}
-            saveMessage={saveMessage}
-            getFormSubscriptionData={getFormData}
-            isGetFormData={isGetFormData}
-            templateData={templateData}
-            selectedAccount={selectedAccount}
-          />
-        )
-      }
-      {
-        isCreateLine && (
-          <CreateLineWrapper
-            location={creativesLocationProps}
-            onCreateComplete={onCreateComplete}
-            isFullMode={isFullMode}
-            isGetFormData={isGetFormData}
-            saveMessage={saveMessage}
-            selectedAccount={selectedAccount}
-            templateData={templateData}
-            getFormSubscriptionData={getFormData}
-          />
-        )
-      }
     </CreativesWrapper>
   );
 }
@@ -439,8 +359,5 @@ SlideBoxContent.propTypes = {
   onWeChatMaptemplateStepChange: PropTypes.func,
   weChatMaptemplateStep: PropTypes.string,
   onFacebookSubmit: PropTypes.func,
-  onCreateComplete: PropTypes.func,
-  saveMessage: PropTypes.func,
-  selectedAccount: PropTypes.object,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -48,7 +48,7 @@ function SlideBoxHeader(props) {
         )}
       {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
       <CapHeader
-        title={<FormattedMessage {...messages.editMessageContent} values={{channel: getChannelLabel(channel)}}/>}
+        title={<FormattedMessage {...messages.editMessageContent} />}
         prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
           <PrefixWrapper>
             <CapIcons.backIcon onClick={onShowTemplates} />