@capillarytech/creatives-library 3.8.10 → 3.8.11

package/v2Components/TemplatePreview/assets/images/wechat-home-screen-android.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="221" height="473" viewBox="0 0 221 473">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="220" height="473" fill="#101211" rx="26"/>
+        <rect width="52" height="5.011" x="84" y="14.03" fill="#2E2E2E" rx="2.5"/>
+        <rect width="52" height="5.011" x="84" y="455.964" fill="#2E2E2E" rx="2.5"/>
+        <ellipse cx="45.5" cy="19.541" fill="#2E2E2E" rx="5.5" ry="5.512"/>
+        <ellipse cx="65.5" cy="19.541" fill="#2E2E2E" rx="3.5" ry="3.507"/>
+        <rect width="202" height="404.856" x="9" y="36.076" fill="#E51FA3" rx="9"/>
+        <path fill="#FFF" d="M20.692 152.322h178.616c2.675 0 3.645.279 4.623.801.977.523 1.745 1.29 2.268 2.268.523.978.801 1.948.801 4.623v78.816c0 2.674-.278 3.644-.801 4.622-.523.978-1.29 1.745-2.268 2.268-.978.523-1.948.801-4.623.801H20.692c-2.675 0-3.645-.278-4.623-.801-.977-.523-1.745-1.29-2.268-2.268-.523-.978-.801-1.948-.801-4.622v-78.816c0-2.675.278-3.645.801-4.623.523-.977 1.29-1.745 2.268-2.268.978-.522 1.948-.801 4.623-.801z"/>
+        <text fill="#5E5E5E" font-family="Roboto-Regular, Roboto" font-size="10">
+            <tspan x="25" y="169.351">Wechat</tspan>
+        </text>
+        <text fill="#5E5E5E" font-family="Roboto-Regular, Roboto" font-size="10">
+            <tspan x="73.146" y="169.351">now</tspan>
+        </text>
+        <circle cx="66" cy="167.354" r="1" fill="#5E5E5E" fill-rule="nonzero"/>
+        <path fill="#5E5E5E" d="M104.725 163.393L101.424 166.694 98.123 163.393 97.109 164.409 101.424 168.734 105.739 164.409z"/>
+        <path fill="#FFF" fill-opacity=".6" d="M113.75 420.222h-.625v-1.241c0-1.712-1.4-3.102-3.125-3.102s-3.125 1.39-3.125 3.102v1.24h-.625c-.688 0-1.25.56-1.25 1.241v6.204c0 .682.563 1.24 1.25 1.24h7.5c.688 0 1.25-.558 1.25-1.24v-6.204c0-.682-.563-1.24-1.25-1.24zM110 425.9c-.55 0-1-.45-1-1.002 0-.55.45-1.002 1-1.002s1 .451 1 1.002c0 .551-.45 1.002-1 1.002zm2-6.012h-4v-1.18c0-1.007.897-1.827 2-1.827s2 .82 2 1.828v1.179z"/>
+        <path fill="#FFF" fill-rule="nonzero" d="M86.325 112.121l6.192-8.694-.072-.072c-.84.577-1.908.865-3.204.865-1.248 0-2.472-.348-3.672-1.046-1.2-.697-2.172-1.653-2.916-2.868-.744-1.215-1.116-2.567-1.116-4.059 0-1.443.378-2.795 1.134-4.058.756-1.263 1.776-2.279 3.06-3.049s2.682-1.154 4.194-1.154c1.632 0 3.09.397 4.374 1.19 1.284.794 2.28 1.822 2.988 3.085.708 1.263 1.062 2.592 1.062 3.986 0 1.323-.27 2.592-.81 3.807-.54 1.214-1.314 2.567-2.322 4.058l-6.444 9.705-2.448-1.696zm3.6-10.642c.96 0 1.854-.235 2.682-.704.828-.469 1.482-1.106 1.962-1.912.48-.806.72-1.69.72-2.652 0-.986-.24-1.882-.72-2.687-.48-.806-1.134-1.443-1.962-1.912-.828-.47-1.722-.704-2.682-.704s-1.848.235-2.664.704c-.816.469-1.464 1.106-1.944 1.912-.48.805-.72 1.701-.72 2.687 0 .962.24 1.846.72 2.652s1.128 1.443 1.944 1.912c.816.469 1.704.704 2.664.704zm13.806-2.237c-.648 0-1.194-.223-1.638-.668-.444-.445-.666-.992-.666-1.641 0-.65.222-1.197.666-1.642.444-.444.99-.667 1.638-.667.624 0 1.158.223 1.602.667.444.445.666.993.666 1.642 0 .65-.222 1.196-.666 1.641-.444.445-.978.668-1.602.668zm0 14.214c-.648 0-1.194-.223-1.638-.668-.444-.444-.666-.992-.666-1.641 0-.625.222-1.16.666-1.605.444-.445.99-.668 1.638-.668.624 0 1.158.223 1.602.668.444.445.666.98.666 1.605 0 .65-.222 1.197-.666 1.641-.444.445-.978.668-1.602.668zm17.191-5.52h-11.808v-2.309l11.52-17.064h3.312v16.487h3.168v2.886h-3.168v5.303h-3.024v-5.303zm0-2.886V93.037h-.144l-8.172 12.013h8.316zm14.527-12.194l-4.32 3.103-1.584-2.345 7.02-5.05h1.944v24.675h-3.06V92.856zM90.177 134.444c-.56 0-1.074-.17-1.54-.51-.467-.342-.787-.82-.96-1.434l.81-.33c.113.427.323.778.63 1.052.306.274.666.41 1.08.41.413 0 .763-.111 1.05-.335.286-.224.43-.53.43-.917 0-.334-.122-.61-.365-.827-.244-.217-.642-.42-1.195-.606l-.45-.16c-.507-.18-.92-.418-1.24-.712-.32-.294-.48-.701-.48-1.223 0-.34.093-.656.28-.947.186-.29.446-.522.78-.696.333-.174.706-.26 1.12-.26.413 0 .773.076 1.08.23.306.154.551.34.735.561.183.22.311.438.385.651l-.8.341c-.067-.247-.219-.47-.455-.671-.237-.2-.549-.3-.935-.3-.367 0-.68.103-.94.31-.26.207-.39.467-.39.781 0 .281.11.51.33.687.22.177.553.342 1 .496l.47.16c.606.22 1.08.496 1.42.827.34.33.51.78.51 1.348 0 .46-.119.848-.355 1.162-.237.314-.535.545-.895.692-.36.147-.73.22-1.11.22zm4.995 0c-.614 0-1.082-.18-1.405-.54-.324-.362-.485-.866-.485-1.514v-3.217h.85v3.087c0 .487.11.845.33 1.072.22.227.516.34.89.34.286 0 .541-.076.765-.23.223-.154.396-.354.52-.601.123-.247.185-.508.185-.782v-2.886h.85v5.11h-.81v-.74h-.04c-.14.253-.364.467-.67.64-.307.174-.634.261-.98.261zm3.615-5.27h.81v.75h.04c.14-.253.363-.469.67-.646.307-.177.633-.265.98-.265.613 0 1.082.178 1.405.536.323.357.485.843.485 1.458v3.277h-.85v-3.147c0-.474-.113-.818-.34-1.032-.227-.214-.537-.32-.93-.32-.273 0-.518.076-.735.23-.217.154-.385.356-.505.606s-.18.513-.18.787v2.876h-.85v-5.11zm8.88 5.27c-.526 0-.986-.145-1.38-.436-.393-.29-.67-.7-.83-1.227l.8-.331c.24.788.71 1.183 1.41 1.183.394 0 .709-.137.945-.411.237-.274.355-.635.355-1.083v-5.03h.85v4.96c0 .501-.091.93-.275 1.288-.183.357-.436.628-.76.812-.323.183-.695.275-1.115.275zm5.065 0c-.613 0-1.081-.18-1.405-.54-.323-.362-.485-.866-.485-1.514v-3.217h.85v3.087c0 .487.11.845.33 1.072.22.227.517.34.89.34.287 0 .542-.076.765-.23.224-.154.397-.354.52-.601.124-.247.185-.508.185-.782v-2.886h.85v5.11h-.81v-.74h-.04c-.14.253-.363.467-.67.64-.306.174-.633.261-.98.261zm3.616-7.335h.85v7.175h-.85v-7.175zm2.525 7.235c-.18 0-.332-.062-.455-.185-.124-.124-.185-.276-.185-.456 0-.174.061-.323.185-.446.123-.124.275-.186.455-.186.173 0 .321.062.445.186.123.123.185.272.185.446 0 .18-.062.332-.185.456-.124.123-.272.185-.445.185zm3.67-.912c.207-.207.617-.623 1.23-1.248.613-.624 1.04-1.067 1.28-1.327.34-.368.57-.655.69-.862.12-.207.18-.458.18-.752 0-.2-.052-.389-.155-.566-.103-.177-.253-.32-.45-.43-.197-.111-.432-.166-.705-.166-.36 0-.648.105-.865.315-.217.21-.358.44-.425.687l-.78-.31c.067-.215.187-.437.36-.667.173-.23.407-.428.7-.591.293-.164.64-.246 1.04-.246.42 0 .792.09 1.115.27.323.181.575.422.755.722.18.3.27.625.27.972 0 .702-.367 1.427-1.1 2.175l-2.05 2.064h3.23v.812h-4.32v-.852zm6.435.541l1.72-2.415-.02-.02c-.233.16-.53.24-.89.24-.346 0-.686-.096-1.02-.29-.333-.194-.603-.46-.81-.797-.206-.337-.31-.713-.31-1.127 0-.4.105-.777.315-1.127.21-.351.494-.633.85-.847.357-.214.745-.32 1.165-.32.454 0 .859.11 1.215.33.357.22.634.506.83.857.197.35.295.72.295 1.107 0 .367-.075.72-.225 1.057-.15.338-.365.713-.645 1.128l-1.79 2.695-.68-.47zm1-2.956c.267 0 .515-.065.745-.195.23-.13.412-.308.545-.532.134-.223.2-.469.2-.736 0-.274-.066-.523-.2-.747-.133-.223-.315-.4-.545-.53-.23-.131-.478-.196-.745-.196-.266 0-.513.065-.74.195-.226.13-.406.308-.54.531-.133.224-.2.473-.2.747 0 .267.067.513.2.736.134.224.314.401.54.532.227.13.474.195.74.195z"/>
+    </g>
+</svg>

package/v2Components/TemplatePreview/assets/images/wechat_mobile_android.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="472" viewBox="0 0 220 472">
+    <g fill="none" fill-rule="evenodd">
+        <rect width="220" height="472" fill="#101211" rx="26"/>
+        <rect width="202" height="404" x="9" y="36" fill="#F4F5F7" rx="9"/>
+        <rect width="182" height="136" x="19" y="112" fill="#F4F5F7" rx="17.5"/>
+        <path fill="#F4F5F7" d="M18 36h184c4.97 0 9 4.03 9 9v6H9v-6c0-4.97 4.03-9 9-9z"/>
+        <path fill="#F4F5F7" d="M9 51H211V82H9z" transform="matrix(1 0 0 -1 0 133)"/>
+        <rect width="52" height="5" x="84" y="14" fill="#2E2E2E" rx="2.5"/>
+        <rect width="52" height="5" x="84" y="455" fill="#2E2E2E" rx="2.5"/>
+        <circle cx="45.5" cy="19.5" r="5.5" fill="#2E2E2E"/>
+        <circle cx="65.5" cy="19.5" r="3.5" fill="#2E2E2E"/>
+        <text fill="#000" font-family="Roboto-Regular, Roboto" font-size="12" letter-spacing=".175">
+            <tspan x="49.5" y="71">Muji India</tspan>
+        </text>
+        <circle cx="199" cy="63" r="1" fill="#000"/>
+        <circle cx="199" cy="70" r="1" fill="#000"/>
+        <circle cx="199" cy="66.5" r="1" fill="#000"/>
+        <path fill="#000" d="M28 66c0 .279-.226.505-.505.505h-5.556l2.42 2.42c.198.197.198.518 0 .716-.198.198-.52.198-.718 0l-2.934-2.934c-.39-.39-.39-1.024 0-1.414l2.934-2.934c.198-.198.52-.198.718 0 .198.198.198.519 0 .717l-2.42 2.419h5.556c.279 0 .505.226.505.505z"/>
+    </g>
+</svg>

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;
@@ -64,16 +161,43 @@ 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 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 +220,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 +230,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 +246,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 +261,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,8 +279,8 @@ 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 sms" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+            <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">
                 <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' }}>
@@ -167,7 +290,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                         return content[item];
                       }
                       if (item === 'bodyImage' && content[item]) {
-                        return <img src={content[item]} alt="brand-name" style={{maxWidth: '100%'}}/>;
+                        return <CapImage src={content[item]} alt="brand-name" style={{maxWidth: '100%'}}/>;
                       }
                       return null;
                     })
@@ -198,6 +321,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/CreativesContainer/SlideBoxContent.js

@@ -72,6 +72,8 @@ 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
@@ -216,6 +218,8 @@ function SlideBoxContent(props) {
           templateData={templateData}
           forwardedTags={forwardedTags}
           selectedOfferDetails={selectedOfferDetails}
+          onPreviewContentClicked={onPreviewContentClicked}
+          onTestContentClicked={onTestContentClicked}
         />
       )}
       {
@@ -249,6 +253,8 @@ function SlideBoxContent(props) {
         isFullMode={isFullMode}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
       />
         )}
       {isEmailCreate && (
@@ -271,6 +277,8 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -294,6 +302,8 @@ function SlideBoxContent(props) {
         onValidationFail={onValidationFail}
         forwardedTags={forwardedTags}
         selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}
       />
         )}
       {isEditMPush &&
@@ -314,6 +324,8 @@ function SlideBoxContent(props) {
           onValidationFail={onValidationFail}
           forwardedTags={forwardedTags}
           selectedOfferDetails={selectedOfferDetails}
+          onPreviewContentClicked={onPreviewContentClicked}
+          onTestContentClicked={onTestContentClicked}
         />
         }
       {isCreateMPush &&
@@ -338,7 +350,9 @@ function SlideBoxContent(props) {
         query={query}
         forwardedTags={forwardedTags}
         onValidationFail={onValidationFail}
-        selectedOfferDetails={selectedOfferDetails}/>
+        selectedOfferDetails={selectedOfferDetails}
+        onPreviewContentClicked={onPreviewContentClicked}
+        onTestContentClicked={onTestContentClicked}/>
         }
       {
         isEditFacebook && (

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

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, getCreativesData} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, 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 (
@@ -539,6 +539,8 @@ 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 message content`,
+    defaultMessage: `Edit {channel}`,
   },
   "createMessageContent": {
     id: `${scope}.createMessageContent`,
-    defaultMessage: `New {channel} message`,
+    defaultMessage: `New {channel}`,
   },
   "creativeTemplatesDesc": {
     id: `${scope}.creativeTemplatesDesc`,

package/v2Containers/Email/_email.scss

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