@capillarytech/creatives-library 3.6.7 → 3.6.9

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -7,15 +7,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // import { connect } from 'react-redux';
-import { CapRow, CapColumn, CapButton, CapImage } from '@capillarytech/cap-react-ui-library/';
-import { CapHeading, CapLabel, CapTab, CapIcon } from '@capillarytech/cap-ui-library/';
+import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-react-ui-library/';
+import { CapHeading, CapLabel } from '@capillarytech/cap-ui-library/';
 import { FormattedMessage } from 'react-intl';
 import _ from 'lodash';
 import './_wechatRichmediaTemplatePrev.scss';
 import messages from './messages';
-const wechatBody = require('./../assets/images/wechat_mobile_android.svg');
-const wechatLockScreenAndroid = require('./../assets/images/wechat-home-screen-android.svg');
-const wechatLockScreenIos = require('./../assets/images/home-screen-ios.svg');
+const wechatBody = require('./../assets/images/WECHAT_5x.png');
+
 class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   preparePreviewData = (mediaList) => {
     const previewMsg = [];
@@ -24,7 +23,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
     const contentData = content[0];
     previewMsg.push(
       <div className="richmedia-image-container">
-        <CapImage alt="default" width="100%" height="102px" src={contentData.image_url} />
+        <img alt="default" width="100%" height="102px" src={contentData.image_url} />
         {mediaListLength !== 1 && (
           <div className="name-container">
             <CapHeading type="h4" style={{color: "white"}}>{contentData.title}</CapHeading>
@@ -44,7 +43,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
       previewMsg.push(
         <div className="additional-richmedia-container">
           <div><CapLabel type="label9" style={{width: '170px', top: '12px', position: 'relative'}}>{data.title}</CapLabel></div>
-          <CapImage alt="default" width="34px" height="34px" src={data.image_url} />
+          <img alt="default" width="34px" height="34px" src={data.image_url} />
         </div>
       );
     });
@@ -62,7 +61,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
         returnObj.push(
           <div style={{ width: "100%", height: 116, position: "relative" }}>
             <CapRow>
-              <CapImage alt="default" width="100%" height="110px" src={contentData.image_url} />
+              <img alt="default" width="100%" height="110px" src={contentData.image_url} />
               <div className="preview-overflow-wrap-fields" style={{ position: "absolute", bottom: "5%", left: "10%", width: "auto" }}>{contentData.title ? contentData.title : ""}</div>
             </CapRow>
             {Object.keys(mediaList).length === 1 ?
@@ -81,7 +80,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
               {contentData.title}
             </CapColumn>
             <CapColumn style={{ float: "right" }}>
-              <CapImage alt="default" width="60px" height="60px" src={contentData.image_url}/>
+              <img alt="default" width="60px" height="60px" src={contentData.image_url}/>
             </CapColumn>
           </CapRow>
         );
@@ -92,102 +91,21 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
   goToEdit(e, path) {
     this.props.onEditClick(e, this.props.templateId, this.props.modeType, path);
   }
-  getWechatRichMediaAndroidPreview = (content) => (
-    <div className="preview-container">
-      <div className="shell-lock-screen-android align-center">
-        <div className="lock-screen-preview">
-          <CapImage className="preview-image" src={wechatLockScreenAndroid} alt="Preview is being generated"/>
-          <div className="wechat-android-sender-id">
-            Muji India
-          </div>
-          <div className="wechat-android-title">
-            {content[0].title}
-          </div>
-          <div className="wechat-android-action-buttons">
-          <FormattedMessage {...messages.MarkAsRead} /> <FormattedMessage {...messages.reply} />
-          </div>
-        </div>
-        <div className="main-screen-preview">
-          <CapImage className="preview-image" src={wechatBody} alt="Preview is being generated"/>
-          <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
-            <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
-              {this.preparePreviewData(content)}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  getWechatRIchMediaIosPreview = (content) => (
-    <div className="preview-container">
-      <div className="shell-lock-screen-android align-center">
-        <div className="lock-screen-preview">
-          <CapImage className="preview-image" src={wechatLockScreenIos} alt="Preview is being generated"/>
-          <div className="wechat-ios-sender-id">
-            Muji India
-          </div>
-          <div className="wechat-ios-title">
-            {content[0].title}
-          </div>
-          <div className="wechat-ios-action-reply">
-          <FormattedMessage {...messages.reply} />
-          </div>
-          <div className="wechat-ios-action-cancel">
-          <FormattedMessage {...messages.cancel} />
-          </div>
-        </div>
-        <div className="main-screen-preview">
-          <CapImage className="preview-image" src={wechatBody} alt="Preview is being generated"/>
-          <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
-            <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
-              {this.preparePreviewData(content)}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  getContentForSlidebox = (content) => {
-    return (
-      !this.props.showLockScreenPreview ? (
-        <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
-          <div className="shell align-center" id="sms-preview">
-            <CapImage className="preview-image" src={wechatBody} alt="Preview is being generated"/>
-            <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
-              <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
-                {this.preparePreviewData(this.props.content)}
-              </div>
-            </div>
-          </div>
-          {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
-        </div>
-      ) : (
-        <CapTab
-          panes={[
-            {
-              content: this.getWechatRichMediaAndroidPreview(this.props.content),
-              tab: <CapIcon type="android" size='m' />,
-              key: 'android',
-            },
-            {
-              content: this.getWechatRIchMediaIosPreview(this.props.content),
-              tab: <CapIcon type="ios" size='m' />,
-              key: 'ios',
-            },
-          ]}
-          tabBarStyle={{margin: 'auto', width: '14%'}}
-        />
-      )
-    );
-  };
-
   render() {
     return (
       <div>
         {this.props.contentForSlideBox ?
-          this.getContentForSlidebox(this.props.content)
+          <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
+            <div className="shell align-center" id="sms-preview">
+              <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
+              <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
+                <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
+                  {this.preparePreviewData(this.props.content)}
+                </div>
+              </div>
+            </div>
+            {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
+          </div>
         :
           <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
             <div className="shell align-center" id="sms-preview">

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js

@@ -18,16 +18,4 @@ export default defineMessages({
     id: 'creatives.components.WechatRichmediaTemplatePreview.edit',
     defaultMessage: 'Edit',
   },
-  MarkAsRead: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.MarkAsRead',
-    defaultMessage: 'Mark as read',
-  },
-  reply: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.reply',
-    defaultMessage: 'Reply',
-  },
-  cancel: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.cancel',
-    defaultMessage: 'Cancel',
-  },
 });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -1,4 +1,4 @@
-.shell-v2 {
+.shell {
   position: relative;
   -webkit-transform: translate(-50%);
   transform: translate(-50%);
@@ -15,8 +15,8 @@
 
   .msgContainer {
     position: absolute;
-    top: 20%;
-    left: 23%;
+    top: 18%;
+    left: 28.8%;
     width: 42%;
     height: 336px;
     display: -webkit-box;
@@ -37,9 +37,6 @@
         left: 14px;
       }
     }
-    &.wechat{
-      width: 52%;
-    }
 
     .message-pop{
       .unicode-disabled{
@@ -57,7 +54,7 @@
         line-height: 14px;
         padding: 0 8px 8px 8px;
         font-size: 10px;
-        width: 100%;
+        width: 80%;
         font-family: 'open-sans';
         .message-pop-item{
           padding: 4px;
@@ -362,9 +359,3 @@
     font-size: 12px;
   }
 }
-
-.test-and-preview-container{
-  display: flex;
-  margin-top: -12px;
-  margin-bottom: 12px;
-}

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;
@@ -161,43 +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)}
-              >
-                <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)}
-              >
-                <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>)
                   }
@@ -220,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>
@@ -230,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">
@@ -246,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">
@@ -261,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}
@@ -279,12 +156,12 @@ 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="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 && content.bodyImage) ? <CapImage src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
+                  { (content && content.bodyImage) ? <img src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
                   { (content && content.bodyText) ? content.bodyText : ''}
                 </div>
               </div>
@@ -312,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/CallTask/index.js

@@ -63,6 +63,7 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
     const templateIntlText = formatMessage(messages.template);
     const templateText = isFullMode ? templateIntlText : '';
     return {
+      buttonClassName: 'new-call-task-button',
       buttonLabel: formatMessage(messages.newCallTaskTemplate, { templateText }),
       onClick: showContentInSlidebox ? this.showNewCallTask : onCreateNew,
       illustrationImage: calltaskIllustration,

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -69,8 +69,6 @@ function SlideBoxContent(props) {
       selectedWeChatAccount,
       weChatMaptemplateStep,
       onWeChatMaptemplateStepChange,
-      onTestContentClicked,
-      onPreviewContentClicked,
       onFacebookSubmit,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
@@ -106,6 +104,7 @@ function SlideBoxContent(props) {
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
   }
+
   return (
     <CreativesWrapper>
       {!isFullMode && slidBoxContent === 'templates' && (
@@ -186,8 +185,6 @@ function SlideBoxContent(props) {
           templateData={templateData}
           forwardedTags={forwardedTags}
           selectedOfferDetails={selectedOfferDetails}
-          onPreviewContentClicked={onPreviewContentClicked}
-          onTestContentClicked={onTestContentClicked}
         />
       )}
       {
@@ -221,8 +218,6 @@ function SlideBoxContent(props) {
         isFullMode={isFullMode}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}
       />
         )}
       {isEmailCreate && (
@@ -245,8 +240,6 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -270,8 +263,6 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}
       />
         )}
       {isEditMPush &&
@@ -292,8 +283,6 @@ function SlideBoxContent(props) {
           onValidationFail={onValidationFail}
           forwardedTags={forwardedTags}
           selectedOfferDetails={selectedOfferDetails}
-          onPreviewContentClicked={onPreviewContentClicked}
-          onTestContentClicked={onTestContentClicked}
         />
         }
       {isCreateMPush &&
@@ -318,9 +307,7 @@ function SlideBoxContent(props) {
         query={query}
         forwardedTags={forwardedTags}
         onValidationFail={onValidationFail}
-        selectedOfferDetails={selectedOfferDetails}
-        onPreviewContentClicked={onPreviewContentClicked}
-        onTestContentClicked={onTestContentClicked}/>
+        selectedOfferDetails={selectedOfferDetails}/>
         }
       {
         isEditFacebook && (

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} />

package/v2Containers/CreativesContainer/index.js

@@ -473,7 +473,7 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, getCreativesData} = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
@@ -538,8 +538,6 @@ class Creatives extends React.Component {
               weChatMaptemplateStep={weChatMaptemplateStep}
               selectedWeChatAccount={selectedWeChatAccount}
               onWeChatMaptemplateStepChange={this.onWeChatMaptemplateStepChange}
-              onPreviewContentClicked={onPreviewContentClicked}
-              onTestContentClicked={onTestContentClicked}
               onFacebookSubmit={getCreativesData}
             />
           }

package/v2Containers/CreativesContainer/messages.js

@@ -256,11 +256,11 @@ export default defineMessages({
   },
   "editMessageContent": {
     id: `${scope}.editMessageContent`,
-    defaultMessage: `Edit {channel}`,
+    defaultMessage: `Edit message content`,
   },
   "createMessageContent": {
     id: `${scope}.createMessageContent`,
-    defaultMessage: `New {channel}`,
+    defaultMessage: `New {channel} message`,
   },
   "creativeTemplatesDesc": {
     id: `${scope}.creativeTemplatesDesc`,

package/v2Containers/Email/_email.scss

@@ -123,13 +123,7 @@
       margin-right: 0 !important;
     }
   }
-  .test-and-preview-container{
-    position: absolute;
-    left: 70%;
-    top: 4%;
-    margin-top: 0;
-    z-index: 999;
-  }
+
 }
 
 .version-popover {