@capillarytech/creatives-library 3.10.0 → 3.11.0

package/v2Components/TemplatePreview/index.js

@@ -10,17 +10,114 @@ import React from 'react';
 import _ from 'lodash';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 // import styled from 'styled-components';
-import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
+import {CapColumn, CapRow, CapHeading, CapIcon, CapButton, CapImage} from '@capillarytech/cap-ui-library';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
-const smsIcon = require('./assets/images/user-icon.svg');
-const wechatBody = require('./assets/images/WECHAT_5x.png');
-const smsBody = require('./assets/images/mobile.svg');
+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 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;
@@ -50,6 +147,7 @@ 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}>
@@ -64,16 +162,45 @@ 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 align-center" id="sms-preview">
-                  <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
+                <div className="shell-v2 align-center" id="sms-preview">
+                  <CapImage className="preview-image sms" src={smsMobileAndroid} 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: '#3F51B5', color: '#ffffff'}}>
+                        <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
                           {msg}
                         </CapColumn>)
                   }
@@ -96,10 +223,9 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               </div>
             }
             {channel && channel.toLowerCase() === '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="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="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
                 </div>
               </div>
@@ -107,10 +233,10 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
           ) : ''
         }
             { channel && (channel.toLowerCase() === 'mobilepush') &&
-            (<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)}/>
+            (<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)}/>
               {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
-                <div className={`${this.props.device}-push-message-Container`}>
+                <div className={`${this.props.device === 'ios' ? 'iphone' : this.props.device}-push-message-Container`}>
                   {this.props.device === "android" ?
                     <div className="message-pop align-left">
                       <div className="app-name">
@@ -123,7 +249,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         {content.bodyText}
                       </div>
                       {content.bodyImage && <div className="body-image">
-                        <img src={content.bodyImage} alt="" />
+                        <CapImage src={content.bodyImage} alt="" />
                       </div>}
                       {content.actions.filter((action) => action.label).length ?
                         <div className="actions">
@@ -138,7 +264,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">
-                        <img src={content.bodyImage} alt=""/>
+                        <CapImage src={content.bodyImage} alt=""/>
                       </div>}
                       <div className="title">
                         {content.header}
@@ -156,13 +282,22 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         }
             {
           channel && channel.toLowerCase() === 'line' ? (
-            <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="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="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
-                  { (content && content.bodyImage) ? <img src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
-                  { (content && content.bodyText) ? content.bodyText : ''}
+                  {
+                    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;
+                    })
+                  }
                 </div>
               </div>
               { (content && content.bodyText) ? <p style={{fontSize: 16, fontWeight: "bold"}}>Chars Count: {content.bodyText.length} / (1600)</p> : '' }
@@ -189,6 +324,10 @@ 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,4 +50,12 @@ 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});
+      this.getAllAssets({params, resetPage: true});
     }
     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,19 +98,12 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
         name: this.state.searchText,
         sortBy: 'Most Recent',
       };
-      this.getAllAssets({params});
+      this.getAllAssets({params, resetPage: true});
     }
     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() {
@@ -236,18 +229,20 @@ 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) {
-      const img = new Image();
-      const that = this;
-      img.src = _URL.createObjectURL(files[file]);
-      img.onload = function () {
-        const fileParams = {
-          width: this.width,
-          height: this.height,
+      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);
         };
-        that.props.actions.uploadAsset(files[file], 'image', fileParams);
-      };
+      }
     }
   }
   getIllustrationProps={
@@ -316,29 +311,34 @@ 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">
+          {!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className={`pagination-container ${this.props.isLineAsset ? 'gallery-upload' : ''}`}>
             <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
             {!_.isEmpty(searchText) && _.isEmpty(templates) && (
               <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
@@ -421,21 +421,25 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
         <div style={{ marginTop: '8px', width: '50%'}}>
           <CapInput.Search
             className="search-text"
-            style={{width: '210px'}}
+            style={{width: `${this.props.isLineAsset ? '324px' : '210px'}`}}
             placeholder={this.props.intl.formatMessage(messages.search)}
             value={this.state.searchText}
             onChange={(e) => this.searchAsset(e.target.value)}
             onClear={() => this.searchAsset('')}
           />
         </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>
+        {
+          !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>
     ) : <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;
@@ -496,6 +500,8 @@ 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,12 +11,14 @@ 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,
@@ -41,6 +43,7 @@ function SlideBoxContent(props) {
       location,
       isGetFormData,
       getFormData,
+      onCreateComplete,
       messageDetails,
       onCreateNew,
       currentChannel,
@@ -69,7 +72,11 @@ 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};
@@ -80,9 +87,11 @@ 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;
@@ -95,16 +104,42 @@ 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;
+    isPreview = slidBoxContent === 'preview' && (channel === constants.SMS || channel === constants.LINE);
     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' && (
@@ -127,10 +162,10 @@ function SlideBoxContent(props) {
         )}
       {isPreview && (
       <TemplatePreview
-        content={templateData.type.toUpperCase() === constants.SMS ? get(templateData, `versions.base['sms-editor']`) : get(templateData, `versions.base.content`)}
+        content={getChannelPreviewContent(templateData)}
         unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
         channel={templateData.type.toLowerCase()}
-        charCounterEnabled
+        charCounterEnabled={channel === constants.SMS}
         templateData={templateData}
         showCount
         forwardedTags={forwardedTags}
@@ -185,6 +220,8 @@ function SlideBoxContent(props) {
           templateData={templateData}
           forwardedTags={forwardedTags}
           selectedOfferDetails={selectedOfferDetails}
+          onPreviewContentClicked={onPreviewContentClicked}
+          onTestContentClicked={onTestContentClicked}
         />
       )}
       {
@@ -218,6 +255,8 @@ function SlideBoxContent(props) {
         isFullMode={isFullMode}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
       />
         )}
       {isEmailCreate && (
@@ -240,6 +279,8 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -263,6 +304,8 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
       />
         )}
       {isEditMPush &&
@@ -283,6 +326,8 @@ function SlideBoxContent(props) {
           onValidationFail={onValidationFail}
           forwardedTags={forwardedTags}
           selectedOfferDetails={selectedOfferDetails}
+          onPreviewContentClicked={onPreviewContentClicked}
+          onTestContentClicked={onTestContentClicked}
         />
         }
       {isCreateMPush &&
@@ -307,7 +352,9 @@ function SlideBoxContent(props) {
         query={query}
         forwardedTags={forwardedTags}
         onValidationFail={onValidationFail}
-        selectedOfferDetails={selectedOfferDetails}/>
+        selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}/>
         }
       {
         isEditFacebook && (
@@ -319,6 +366,39 @@ 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>
   );
 }
@@ -359,5 +439,8 @@ 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} />}
+        title={<FormattedMessage {...messages.editMessageContent} values={{channel: getChannelLabel(channel)}}/>}
         prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
           <PrefixWrapper>
             <CapIcons.backIcon onClick={onShowTemplates} />