@capillarytech/creatives-library 3.9.0 → 3.9.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.9.0",
+  "version": "3.9.2",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/translations/en.json

@@ -1091,6 +1091,9 @@
   "creatives.containersV2.Line.Create.uploadSuccess": "Photo uploaded successfully",
   "creatives.containersV2.Line.Create.uploadingImage": "Uploading image...",
   "creatives.containersV2.Line.Create.valueCantEmpty": "value cannot be empty.",
+  "creatives.containersV2.Line.CreateWrapper.accountLineListDescription": "Choose the account to send content",
+  "creatives.containersV2.Line.CreateWrapper.accountLineListTitle": "Line accounts",
+  "creatives.containersV2.Line.CreateWrapper.accountLineNoListTitle": "No line accounts present",
   "creatives.containersV2.Line.CreateWrapper.continue": "Continue",
   "creatives.containersV2.Line.CreateWrapper.hybridTemplateDescription": "Used to create combined text & image or video content",
   "creatives.containersV2.Line.CreateWrapper.hybridTemplateTitle": "Hybrid",
@@ -1326,6 +1329,7 @@
   "creatives.containersV2.Templates.imageTemplate": "Image",
   "creatives.containersV2.Templates.invalidUploadFileError": "File cannot be uploaded. Please select another file with valid file format.",
   "creatives.containersV2.Templates.layoutSelection": "Select layout",
+  "creatives.containersV2.Templates.lineAccount": "Line account",
   "creatives.containersV2.Templates.lineHeader": "Line",
   "creatives.containersV2.Templates.mapTemplate": "Map template",
   "creatives.containersV2.Templates.mapTemplates": "Map templates",
@@ -1338,6 +1342,7 @@
   "creatives.containersV2.Templates.newTemplate": "New template",
   "creatives.containersV2.Templates.noAccountMessage": "Please select an account to proceed",
   "creatives.containersV2.Templates.noAccountsPresent": "Push notifications are not setup for your brand",
+  "creatives.containersV2.Templates.noAccountsPresentLine": "Line accounts are not setup for your brand",
   "creatives.containersV2.Templates.noAccountsPresentWeChat": "Wechat accounts are not setup for your brand",
   "creatives.containersV2.Templates.noTemplatesFound": "No templates found",
   "creatives.containersV2.Templates.noTemplatesMessage": "No templates available",

package/translations/zh.json

@@ -1091,6 +1091,9 @@
   "creatives.containersV2.Line.Create.uploadSuccess": "",
   "creatives.containersV2.Line.Create.uploadingImage": "",
   "creatives.containersV2.Line.Create.valueCantEmpty": "",
+  "creatives.containersV2.Line.CreateWrapper.accountLineListDescription": "",
+  "creatives.containersV2.Line.CreateWrapper.accountLineListTitle": "",
+  "creatives.containersV2.Line.CreateWrapper.accountLineNoListTitle": "",
   "creatives.containersV2.Line.CreateWrapper.continue": "",
   "creatives.containersV2.Line.CreateWrapper.hybridTemplateDescription": "",
   "creatives.containersV2.Line.CreateWrapper.hybridTemplateTitle": "",
@@ -1326,6 +1329,7 @@
   "creatives.containersV2.Templates.imageTemplate": "",
   "creatives.containersV2.Templates.invalidUploadFileError": "",
   "creatives.containersV2.Templates.layoutSelection": "",
+  "creatives.containersV2.Templates.lineAccount": "",
   "creatives.containersV2.Templates.lineHeader": "",
   "creatives.containersV2.Templates.mapTemplate": "",
   "creatives.containersV2.Templates.mapTemplates": "",
@@ -1338,6 +1342,7 @@
   "creatives.containersV2.Templates.newTemplate": "",
   "creatives.containersV2.Templates.noAccountMessage": "",
   "creatives.containersV2.Templates.noAccountsPresent": "",
+  "creatives.containersV2.Templates.noAccountsPresentLine": "",
   "creatives.containersV2.Templates.noAccountsPresentWeChat": "",
   "creatives.containersV2.Templates.noTemplatesFound": "",
   "creatives.containersV2.Templates.noTemplatesMessage": "",

package/v2Components/FormBuilder/index.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { Tabs, Table, Modal} from 'antd';
-import { CapDrawer, CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
+import { CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -2197,7 +2197,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         //
         const imgSrc = template && template.versions && template.versions.base ? template.versions.base.preview_http_url : '';
         // const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
-        const content = <img src={imgSrc || ''} alt="" />;
+        const content = <CapImage src={imgSrc || ''} alt="" />;
 
         temp.content = (
           <div
@@ -2382,8 +2382,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 content={content}
                 charCounterEnabled={val.charCounterEnabled}
                 unicodeEnabled={unicodeEnabled}
-              >
-              </TemplatePreview>
+                showTestAndPreviewIcon
+                onPreviewContentClicked={this.props.onPreviewContentClicked}
+                onTestContentClicked={this.props.onTestContentClicked}
+              />
             </CapColumn>
           );
           break;
@@ -2823,7 +2825,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <div>
                   <div className={`image-container ${ifError ? 'error' : ''}`}>
                     {self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image ?
-                      <img src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={val.alt} style={val.style}/>
+                      <CapImage src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={val.alt} style={val.style}/>
                       :
                       <div style={{width: "100%", textAlign: "center"}}><span className="image-placeholder">{val.placeholder}</span></div>
                     }
@@ -2846,9 +2848,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             const ImageComponent = (props) => (
               <div key={`${val.id}-${this.state.currentTab}`}>
                 <div className={`image-container ${props.ifError ? 'error' : ''}`}>
+
                   {isImage ?
-                    <img src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={props.alt} style={props.style}/>
-                    :
+                    <CapImage src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={props.alt} style={props.style}/>                    
+                     :
                     <div style={{width: "100%", textAlign: "center"}}><span className="image-placeholder">{props.placeholder}</span></div>
                   }
                 </div>
@@ -2906,11 +2909,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             );
             break;
           case "tag-list":
+            let moduleFilterEnabled = this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded';
+            const channel = _.get(this.props, 'schema.channel', "");
+            if (channel === 'EMAIL') {
+              moduleFilterEnabled = this.props.isFullMode;
+            }
             columns.push(
               <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
                 <TagList
                   key={`input-${val.id}`}
-                  moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
+                  moduleFilterEnabled={moduleFilterEnabled}
                   label={val.label ? val.label : ''}
                   onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
                   onContextChange={this.props.onContextChange}
@@ -2957,6 +2965,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   content={content}
                   charCounterEnabled={val.charCounterEnabled}
                   unicodeEnabled={unicodeEnabled}
+                  showTestAndPreviewIcon
+                  onPreviewContentClicked={this.props.onPreviewContentClicked}
+                  onTestContentClicked={this.props.onTestContentClicked}
                 >
                 </TemplatePreview>
               </CapColumn>
@@ -3006,6 +3017,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     ],
                     appName: val.content.appName,
                   }}
+                  showTestAndPreviewIcon
+                  onPreviewContentClicked={this.props.onPreviewContentClicked}
+                  onTestContentClicked={this.props.onTestContentClicked}
+                  templateDataRaw={this.props.templateData}
                 >
                 </TemplatePreview>
               </CapColumn>
@@ -3481,6 +3496,7 @@ FormBuilder.propTypes = {
   selectedOfferDetails: PropTypes.array,
   setDrawerVisibility: PropTypes.bool,
   capDrawerContent: PropTypes.array,
+  isFullMode: PropTypes.bool,
 };
 
 export default injectIntl(FormBuilder);

package/v2Components/MobilePushPreviewV2/index.js

@@ -7,16 +7,10 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { CapButton } from '@capillarytech/cap-ui-library';
-// import styled from 'styled-components';
-
-import { FormattedMessage } from 'react-intl';
-import { Button } from 'antd';
+import { CapTab, CapIcon } from '@capillarytech/cap-ui-library';
 import { get, map, isEmpty} from 'lodash';
 import TemplatePreview from '../TemplatePreview';
 import '../PreviewSideBar/_previewsidebar.scss';
-import messages from './messages';
-const ButtonGroup = Button.Group;
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -24,6 +18,9 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     this.goToEdit = this.goToEdit.bind(this);
     this.goToDuplicate = this.goToDuplicate.bind(this);
     this.changeDevice = this.changeDevice.bind(this);
+    this.getPreview = this.getPreview.bind(this);
+    this.setContent = this.setContent.bind(this);
+    this.goToDuplicate = this.goToDuplicate.bind(this);
     const hasAndroid = get(props, 'templateData.versions.base.ANDROID') || get(props, 'templateData.androidContent');
     const hasIos = get(props, 'templateData.versions.base.IOS') || get(props, 'templateData.iosContent');
     let device = "android";
@@ -38,7 +35,7 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     };
   }
 
-  setContent = (templateData, device) => {
+  setContent(templateData, device) {
     const androidContent = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
     const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
 
@@ -59,12 +56,21 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     }
     return content;
   }
+  getPreview(device) {
+    return (
+      <TemplatePreview
+        device={device}
+        channel={this.props.channel}
+        content={this.state.content || ''}
+        templateData={this.props.templateData}
+      />
+    );
+  }
   goToDuplicate() {
     this.props.onDuplicateClick(this.props.templateData);
     this.props.handleClose();
   }
-  changeDevice(ev) {
-    const device = ev.target.value;
+  changeDevice(device) {
     const content = this.setContent(this.props.templateData, device);
     this.setState({device, content });
   }
@@ -72,38 +78,40 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
     this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
   }
   render() {
-    const {templateData, channel} = this.props;
-
+    const {templateData} = this.props;
     const hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
     const hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
-
-    const {device, content} = this.state;
+    const hasBothAndroidAndIos = hasAndroid && hasIos;
 
     return (
-
       <div>
         <div className="devices">
-          {!isEmpty(templateData) && hasAndroid && hasIos &&
-          <ButtonGroup onClick={this.changeDevice}>
-            <CapButton type={device === "android" ? "primary" : "secondary"} value={"android"}><FormattedMessage {...messages.android} /></CapButton>
-            <CapButton type={device === "iphone" ? "primary" : "secondary"} value={"iphone"}><FormattedMessage {...messages.ios} /></CapButton>
-          </ButtonGroup>}
+          {!isEmpty(templateData) &&
+            ( hasBothAndroidAndIos ? (
+              <CapTab
+                panes={[
+                  {
+                    content: this.getPreview('android'),
+                    tab: <CapIcon type="android" size="m" />,
+                    key: 'android',
+                  },
+                  {
+                    content: this.getPreview('iphone'),
+                    tab: <CapIcon type="ios" size="m" />,
+                    key: 'iphone',
+                  },
+                ]}
+                onChange={(activeKey) => this.changeDevice(activeKey)}
+                tabBarStyle={{margin: 'auto', width: '38%'}}
+              />
+            ) : (
+              (hasAndroid || hasIos) && this.getPreview(hasAndroid ? 'android' : 'ios')
+            ))
+          }
         </div>
-        <TemplatePreview
-          device={device === "android" ? "android" : "iphone"}
-          channel={channel}
-          content={content || ''}
-          templateData={templateData}
-              >
-        </TemplatePreview>
-
-
       </div>
-
-
     );
   }
-
 }
 
 MobilePushPreviewV2.propTypes = {

package/v2Components/MobilePushPreviewV2/messages.js

@@ -10,12 +10,4 @@ export default defineMessages({
     id: 'creatives.componentsv2.MobilePushPreviewV2.header',
     defaultMessage: 'This is the MobilePushPreviewV2 component !',
   },
-  android: {
-    id: 'creatives.componentsv2.MobilePushPreviewV2.android',
-    defaultMessage: 'Android',
-  },
-  ios: {
-    id: 'creatives.componentsv2.MobilePushPreviewV2.ios',
-    defaultMessage: 'IOS',
-  },
 });

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -1,5 +1,69 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
+.shell-lock-screen-android .main-screen-preview .wechatMsgContainer{
+  position: absolute;
+  left: 53.5%;
+  top:28%;
+  background: white;
+  width: 19.5%;
+  text-align: left;
+  height: fit-content;
+  border-radius: 0.285rem;
+}
+
+.shell-lock-screen-android .lock-screen-preview{
+  .wechat-android-sender-id{
+    position: absolute;
+    top: 46%;
+    font-size: 10px;
+    left: 28%;
+  }
+  .wechat-android-title{
+    position: absolute;
+    top: 49%;
+    font-size: 10px;
+    left: 28%;
+    color: #5e6c84;
+  }
+  .wechat-android-action-buttons{
+    position: absolute;
+    left: 28%;
+    top: 53%;
+    font-size: 10px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+  .wechat-ios-sender-id{
+    position: absolute;
+    top: 44%;
+    font-size: 10px;
+    left: 28.5%;
+  }
+  .wechat-ios-title{
+    position: absolute;
+    top: 47%;
+    font-size: 10px;
+    left: 28.5%;
+    color: #5e6c84;
+  }
+  .wechat-ios-action-reply{
+    position: absolute;
+    left: 35%;
+    top: 59%;
+    font-size: 12px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+  .wechat-ios-action-cancel{
+    position: absolute;
+    left: 34.5%;
+    top: 66%;
+    font-size: 12px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+}
+
 .wechatMsgContainer{
     position: absolute;
     left: 30%;

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -8,13 +8,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 // import { connect } from 'react-redux';
 import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-react-ui-library/';
-import { CapHeading, CapLabel } from '@capillarytech/cap-ui-library/';
+import { CapHeading, CapLabel, CapTab, CapIcon, CapImage } 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_5x.png');
-
+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');
 class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function
   preparePreviewData = (mediaList) => {
     const previewMsg = [];
@@ -23,7 +24,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
     const contentData = content[0];
     previewMsg.push(
       <div className="richmedia-image-container">
-        <img alt="default" width="100%" height="102px" src={contentData.image_url} />
+        <CapImage 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>
@@ -43,7 +44,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>
-          <img alt="default" width="34px" height="34px" src={data.image_url} />
+          <CapImage alt="default" width="34px" height="34px" src={data.image_url} />
         </div>
       );
     });
@@ -61,7 +62,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
         returnObj.push(
           <div style={{ width: "100%", height: 116, position: "relative" }}>
             <CapRow>
-              <img alt="default" width="100%" height="110px" src={contentData.image_url} />
+              <CapImage 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 ?
@@ -80,7 +81,7 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
               {contentData.title}
             </CapColumn>
             <CapColumn style={{ float: "right" }}>
-              <img alt="default" width="60px" height="60px" src={contentData.image_url}/>
+              <CapImage alt="default" width="60px" height="60px" src={contentData.image_url}/>
             </CapColumn>
           </CapRow>
         );
@@ -91,21 +92,102 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
   goToEdit(e, path) {
     this.props.onEditClick(e, this.props.templateId, this.props.modeType, path);
   }
-  render() {
+  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 (
-      <div>
-        {this.props.contentForSlideBox ?
-          <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>
+      !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>
-            {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>
+          {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">

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js

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

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

@@ -0,0 +1,21 @@
+<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="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"/>
+        <rect width="202" height="404" x="9" y="36" fill="#E51FA3" rx="9"/>
+        <path fill="#F4F5F7" d="M20.692 152h178.616c2.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.623v78.616c0 2.675-.278 3.645-.801 4.623-.523.977-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.623v-78.616c0-2.675.278-3.645.801-4.623.523-.977 1.29-1.745 2.268-2.268.978-.523 1.948-.801 4.623-.801z"/>
+        <text fill="#5E5E5E" font-family="Roboto-Regular, Roboto" font-size="10">
+            <tspan x="25" y="169">Messages</tspan>
+        </text>
+        <text fill="#5E5E5E" font-family="Roboto-Regular, Roboto" font-size="10">
+            <tspan x="85.146" y="169">now</tspan>
+        </text>
+        <circle cx="78" cy="167" r="1" fill="#5E5E5E" fill-rule="nonzero"/>
+        <path fill="#5E5E5E" d="M116.725 163.048L113.424 166.342 110.123 163.048 109.109 164.062 113.424 168.377 117.739 164.062z"/>
+        <path fill="#FFF" fill-opacity=".6" d="M113.75 419.333h-.625v-1.238c0-1.708-1.4-3.095-3.125-3.095s-3.125 1.387-3.125 3.095v1.238h-.625c-.688 0-1.25.557-1.25 1.238v6.19c0 .682.563 1.239 1.25 1.239h7.5c.688 0 1.25-.557 1.25-1.238v-6.19c0-.682-.563-1.239-1.25-1.239zM110 425c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm2-6h-4v-1.176c0-1.006.897-1.824 2-1.824s2 .818 2 1.824V419z"/>
+        <path fill="#FFF" fill-rule="nonzero" d="M86.325 111.884l6.192-8.676-.072-.072c-.84.576-1.908.864-3.204.864-1.248 0-2.472-.348-3.672-1.044-1.2-.696-2.172-1.65-2.916-2.862-.744-1.212-1.116-2.562-1.116-4.05 0-1.44.378-2.79 1.134-4.05.756-1.26 1.776-2.274 3.06-3.042 1.284-.768 2.682-1.152 4.194-1.152 1.632 0 3.09.396 4.374 1.188 1.284.792 2.28 1.818 2.988 3.078.708 1.26 1.062 2.586 1.062 3.978 0 1.32-.27 2.586-.81 3.798-.54 1.212-1.314 2.562-2.322 4.05l-6.444 9.684-2.448-1.692zm3.6-10.62c.96 0 1.854-.234 2.682-.702.828-.468 1.482-1.104 1.962-1.908.48-.804.72-1.686.72-2.646 0-.984-.24-1.878-.72-2.682s-1.134-1.44-1.962-1.908c-.828-.468-1.722-.702-2.682-.702s-1.848.234-2.664.702c-.816.468-1.464 1.104-1.944 1.908-.48.804-.72 1.698-.72 2.682 0 .96.24 1.842.72 2.646.48.804 1.128 1.44 1.944 1.908.816.468 1.704.702 2.664.702zm13.806-2.232c-.648 0-1.194-.222-1.638-.666-.444-.444-.666-.99-.666-1.638 0-.648.222-1.194.666-1.638.444-.444.99-.666 1.638-.666.624 0 1.158.222 1.602.666.444.444.666.99.666 1.638 0 .648-.222 1.194-.666 1.638-.444.444-.978.666-1.602.666zm0 14.184c-.648 0-1.194-.222-1.638-.666-.444-.444-.666-.99-.666-1.638 0-.624.222-1.158.666-1.602.444-.444.99-.666 1.638-.666.624 0 1.158.222 1.602.666.444.444.666.978.666 1.602 0 .648-.222 1.194-.666 1.638-.444.444-.978.666-1.602.666zm17.191-5.508h-11.808v-2.304l11.52-17.028h3.312v16.452h3.168v2.88h-3.168V113h-3.024v-5.292zm0-2.88V92.84h-.144l-8.172 11.988h8.316zm14.527-12.168l-4.32 3.096-1.584-2.34 7.02-5.04h1.944V113h-3.06V92.66zM90.177 134.16c-.56 0-1.074-.17-1.54-.51-.467-.34-.787-.817-.96-1.43l.81-.33c.113.427.323.777.63 1.05.306.273.666.41 1.08.41.413 0 .763-.112 1.05-.335.286-.223.43-.528.43-.915 0-.333-.122-.608-.365-.825-.244-.217-.642-.418-1.195-.605l-.45-.16c-.507-.18-.92-.417-1.24-.71-.32-.293-.48-.7-.48-1.22 0-.34.093-.655.28-.945.186-.29.446-.522.78-.695.333-.173.706-.26 1.12-.26.413 0 .773.077 1.08.23.306.153.551.34.735.56.183.22.311.437.385.65l-.8.34c-.067-.247-.219-.47-.455-.67-.237-.2-.549-.3-.935-.3-.367 0-.68.103-.94.31-.26.207-.39.467-.39.78 0 .28.11.508.33.685.22.177.553.342 1 .495l.47.16c.606.22 1.08.495 1.42.825.34.33.51.778.51 1.345 0 .46-.119.847-.355 1.16-.237.313-.535.543-.895.69-.36.147-.73.22-1.11.22zm4.995 0c-.614 0-1.082-.18-1.405-.54-.324-.36-.485-.863-.485-1.51v-3.21h.85v3.08c0 .487.11.843.33 1.07.22.227.516.34.89.34.286 0 .541-.077.765-.23.223-.153.396-.353.52-.6.123-.247.185-.507.185-.78v-2.88h.85v5.1h-.81v-.74h-.04c-.14.253-.364.467-.67.64-.307.173-.634.26-.98.26zm3.615-5.26h.81v.75h.04c.14-.253.363-.468.67-.645.307-.177.633-.265.98-.265.613 0 1.082.178 1.405.535.323.357.485.842.485 1.455V134h-.85v-3.14c0-.473-.113-.817-.34-1.03-.227-.213-.537-.32-.93-.32-.273 0-.518.077-.735.23-.217.153-.385.355-.505.605s-.18.512-.18.785V134h-.85v-5.1zm8.88 5.26c-.526 0-.986-.145-1.38-.435-.393-.29-.67-.698-.83-1.225l.8-.33c.24.787.71 1.18 1.41 1.18.394 0 .709-.137.945-.41.237-.273.355-.633.355-1.08v-5.02h.85v4.95c0 .5-.091.928-.275 1.285-.183.357-.436.627-.76.81-.323.183-.695.275-1.115.275zm5.065 0c-.613 0-1.081-.18-1.405-.54-.323-.36-.485-.863-.485-1.51v-3.21h.85v3.08c0 .487.11.843.33 1.07.22.227.517.34.89.34.287 0 .542-.077.765-.23.224-.153.397-.353.52-.6.124-.247.185-.507.185-.78v-2.88h.85v5.1h-.81v-.74h-.04c-.14.253-.363.467-.67.64-.306.173-.633.26-.98.26zm3.616-7.32h.85V134h-.85v-7.16zm2.525 7.22c-.18 0-.332-.062-.455-.185-.124-.123-.185-.275-.185-.455 0-.173.061-.322.185-.445.123-.123.275-.185.455-.185.173 0 .321.062.445.185.123.123.185.272.185.445 0 .18-.062.332-.185.455-.124.123-.272.185-.445.185zm3.67-.91c.207-.207.617-.622 1.23-1.245.613-.623 1.04-1.065 1.28-1.325.34-.367.57-.653.69-.86.12-.207.18-.457.18-.75 0-.2-.052-.388-.155-.565-.103-.177-.253-.32-.45-.43-.197-.11-.432-.165-.705-.165-.36 0-.648.105-.865.315-.217.21-.358.438-.425.685l-.78-.31c.067-.213.187-.435.36-.665.173-.23.407-.427.7-.59.293-.163.64-.245 1.04-.245.42 0 .792.09 1.115.27.323.18.575.42.755.72.18.3.27.623.27.97 0 .7-.367 1.423-1.1 2.17l-2.05 2.06h3.23v.81h-4.32v-.85zm6.435.54l1.72-2.41-.02-.02c-.233.16-.53.24-.89.24-.346 0-.686-.097-1.02-.29-.333-.193-.603-.458-.81-.795-.206-.337-.31-.712-.31-1.125 0-.4.105-.775.315-1.125.21-.35.494-.632.85-.845.357-.213.745-.32 1.165-.32.454 0 .859.11 1.215.33.357.22.634.505.83.855.197.35.295.718.295 1.105 0 .367-.075.718-.225 1.055-.15.337-.365.712-.645 1.125l-1.79 2.69-.68-.47zm1-2.95c.267 0 .515-.065.745-.195.23-.13.412-.307.545-.53.134-.223.2-.468.2-.735 0-.273-.066-.522-.2-.745-.133-.223-.315-.4-.545-.53-.23-.13-.478-.195-.745-.195-.266 0-.513.065-.74.195-.226.13-.406.307-.54.53-.133.223-.2.472-.2.745 0 .267.067.512.2.735.134.223.314.4.54.53.227.13.474.195.74.195z"/>
+    </g>
+</svg>