@capillarytech/creatives-library 3.8.11 → 3.9.0

package/components/TemplatePreview/index.js

@@ -8,145 +8,18 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import _ from 'lodash';
-import { injectIntl, intlShape, FormattedMessage} from 'react-intl';
-import {CapColumn, CapTab, CapIcon, CapLabel, CapImage} from '@capillarytech/cap-ui-library';
+import { injectIntl, intlShape} from 'react-intl';
+import {CapColumn} from '@capillarytech/cap-react-ui-library';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
 const smsIcon = require('./assets/images/user-icon.svg');
-const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
-const wechatMobileAndroid = require('./assets/images/wechat_mobile_android.svg');
-const smsMobileIos = require('./assets/images/sms_mobile_ios.svg');
-const smsAndroidHomeScreen = require('./assets/images/home-screen-android.svg');
-const smsIosHomeScreen = require('./assets/images/home-screen-ios.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
-  getWechatAndroidPreview = (content) => (
-    <div className="shell-lock-screen-android align-center" id="sms-preview">
-      <div className="lock-screen-preview">
-        <CapImage className="preview-image sms" src={smsAndroidHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-        <div className="lock-msgContainer wechat">
-          <div className="sender-id-text">
-            {this.props.intl.formatMessage(messages.senderId)}
-          </div>
-          <div className="message-text-container">
-            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
-          </div>
-        </div>
-        <div className="action-text">
-          <FormattedMessage {...messages.markAsRead}/> <FormattedMessage {...messages.reply}/>
-        </div>
-      </div>
-      <div className="main-screen-preview">
-        <CapImage className="preview-image" src={wechatMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-        <div className="msgContainer wechat">
-          <div className="message-pop wechat align-left" style={{ background: '#ffffff', color: '#333333' }}>
-            {content}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  getWechatIosPreview = (content) => (
-    <div className="shell-lock-screen-ios align-center" id="sms-preview">
-      <div className="lock-screen-preview">
-        <CapImage className="preview-image sms" src={smsIosHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-        <div className="lock-msgContainer wechat">
-          <div className="sender-id-text">
-            {this.props.intl.formatMessage(messages.senderId)}
-          </div>
-          <div className="message-text-container">
-            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
-          </div>
-        </div>
-        <div className="action-text-reply">
-          <FormattedMessage {...messages.reply}/>
-        </div>
-        <div className="action-text-cancel">
-          <FormattedMessage {...messages.cancel}/>
-        </div>
-      </div>
-      <div className="main-screen-preview">
-        <CapImage className="preview-image" src={wechatMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-        <div className="msgContainer wechat">
-          <div className="message-pop wechat align-left" style={{ background: '#ffffff', color: '#333333' }}>
-            {content}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  getSmsAndroidPreview = (content) => (
-    <div className="shell-lock-screen-android align-center" id="sms-preview">
-      <div className="lock-screen-preview">
-        <CapImage className="preview-image sms" src={smsAndroidHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-        <div className="lock-msgContainer sms">
-          <div className="sender-id-text">
-          {this.props.intl.formatMessage(messages.senderId)}
-          </div>
-          <div className="message-text-container">
-            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
-          </div>
-        </div>
-        <div className="action-text">
-          <FormattedMessage {...messages.markAsRead}/> <FormattedMessage {...messages.reply}/>
-        </div>
-      </div>
-      <div className="main-screen-preview">
-        <CapImage className="preview-image sms" src={smsMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-        <div className="msgContainer sms">
-          <div className={"message-pop sms"}>
-            {content && content.length && content.map((msg) =>
-              <CapColumn className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
-                {msg}
-              </CapColumn>)
-            }
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  getSmsIosPreview = (content) => (
-    <div className="shell-lock-screen-ios align-center" id="sms-preview">
-      <div className="lock-screen-preview">
-        <CapImage className="preview-image sms" src={smsIosHomeScreen} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-        <div className="lock-msgContainer sms">
-          <div className="sender-id-text">
-          {this.props.intl.formatMessage(messages.senderId)}
-          </div>
-          <div className="message-text-container">
-            <CapLabel type="label1" style={{ height: '15px' }} >{content}</CapLabel>
-          </div>
-        </div>
-        <div className="action-text-reply">
-          <FormattedMessage {...messages.reply}/>
-        </div>
-        <div className="action-text-cancel">
-          <FormattedMessage {...messages.cancel}/>
-        </div>
-      </div>
-      <div className="main-screen-preview">
-        <CapImage className="preview-image sms" src={smsMobileIos} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
-        <div className="msgContainer sms">
-          <div className={"message-pop sms"}>
-            {content && content.length && content.map((msg) =>
-              <CapColumn className="message-pop-item align-left" style={{ background: '#ebecf0', color: '#091e42'}}>
-                {msg}
-              </CapColumn>)
-            }
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
   render() {
     console.log('preview props', this.props);
     let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
@@ -165,7 +38,6 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
       //smsText = this.props.intl.formatMessage(messages.previewGenerationMessage);
       //console.log('message text', smsText);
     }
-    const showLockScreenPreview = !!this.props.showLockScreenPreview;
     const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
     let iosActions = [];
     if (channel.toLowerCase() === "mobilepush") {
@@ -180,67 +52,35 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     }
     return (
       <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
-        { channel && channel.toLowerCase() === 'sms' && 
-            (showLockScreenPreview ? (
-              <CapTab
-                panes={[
-                  {
-                    content: this.getSmsAndroidPreview(content),
-                    tab: <CapIcon type="android" size='m' />,
-                    key: 'android',
-                  },
-                  {
-                    content: this.getSmsIosPreview(content),
-                    tab: <CapIcon type="ios" size='m' />,
-                    key: 'ios',
-                  },
-                ]}
-                tabBarStyle={{margin: 'auto', width: '14%'}}
-              /> 
-            ) : (
-            <div className="shell align-center" id="sms-preview">
-            <CapImage className="preview-image sms" src={smsMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+        { channel && channel.toLowerCase() === 'sms' &&
+          <div className="shell align-center" id="sms-preview">
+            <img className="preview-image sms" src={smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
             <div className="msgContainer sms">
+              <img className="sms-icon" src={smsIcon} alt={this.props.intl.formatMessage(messages.smsIcon)} />
               <div className={"message-pop sms"}>
                 {content && content.length && content.map((msg) =>
-                  <CapColumn className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
+                  <CapColumn className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
                     {msg}
                   </CapColumn>)
                 }
               </div>
             </div>
-          </div>)
-            )}
-        {channel && channel.toLowerCase() === 'wechat' &&
-          (showLockScreenPreview ? (
-            <CapTab
-              panes={[
-                {
-                  content: this.getWechatAndroidPreview(content),
-                  tab: <CapIcon type="android" size='m' />,
-                  key: 'android',
-                },
-                {
-                  content: this.getWechatIosPreview(content),
-                  tab: <CapIcon type="ios" size='m' />,
-                  key: 'ios',
-                },
-              ]}
-              tabBarStyle={{margin: 'auto', width: '14%'}}
-            />
-          ) : ( 
-          <div className="shell align-center" id="sms-preview">
-            <CapImage className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatMobileAndroid : smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+          </div>
+        }
+        {channel && channel.toLowerCase() === 'wechat' ?
+          ( <div className="shell align-center" id="sms-preview">
+            <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
             <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>
           </div>
-          )
-        )}
+          ) : ''
+        }
         { channel && (channel.toLowerCase() === 'mobilepush') &&
           (<div className="shell align-center" id="mobilepush-preview">
-            <CapImage className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+            <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}-push-message-Container`}>
                   {this.props.device === "android" ?
@@ -255,7 +95,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">
@@ -271,7 +111,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}
@@ -290,11 +130,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         {
           channel && channel.toLowerCase() === 'line' ? (
             <div className="shell align-center" id="sms-preview">
-              <CapImage className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <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>

package/components/TemplatePreview/messages.js

@@ -10,10 +10,6 @@ export default defineMessages({
     id: 'creatives.components.TemplatePreview.previewGenerationMessage',
     defaultMessage: "Preview is being generated",
   },
-  senderId: {
-    id: 'creatives.components.TemplatePreview.senderId',
-    defaultMessage: "Sender ID",
-  },
   sms: {
     id: 'creatives.components.TemplatePreview.sms',
     defaultMessage: "SMS",
@@ -50,16 +46,4 @@ export default defineMessages({
     id: 'creatives.components.TemplatePreview.smsIcon',
     defaultMessage: 'Sms Icon',
   },
-  markAsRead: {
-    id: 'creatives.components.TemplatePreview.markAsRead',
-    defaultMessage: 'Mark as read',
-  },
-  reply: {
-    id: 'creatives.components.TemplatePreview.reply',
-    defaultMessage: 'Reply',
-  },
-  cancel: {
-    id: 'creatives.components.TemplatePreview.cancel',
-    defaultMessage: 'Cancel',
-  },
 });

package/index.js

@@ -43,6 +43,10 @@ import Facebook from './v2Containers/Facebook';
 import facebookReducer from './v2Containers/Facebook/reducer';
 import facebookSaga from './v2Containers/Facebook/sagas';
 
+import Gallery from './v2Containers/Assets/Gallery';
+import galleryReducer from './v2Containers/Assets/Gallery/reducer';
+import gallerySagas from './v2Containers/Assets/Gallery/sagas';
+
 import MobilepushCreate from './v2Containers/MobilePush/Create';
 import mobilepushCreateReducer from './v2Containers/MobilePush/Create/reducer';
 import mobilepushCreateSaga from './v2Containers/MobilePush/Create/sagas';
@@ -86,6 +90,7 @@ const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const LineEditContainer = {LineEdit, lineEditReducer, lineEditSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
+const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 
 export {default as TagList} from './v2Containers/TagList/index';
 export {default as TagListSaga} from './v2Containers/TagList/sagas';
@@ -123,4 +128,5 @@ export { CapContainer,
   CreativesContainer,
   updateCharCount,
   FacebookContainer,
+  GalleryContainer,
 };

package/package.json

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

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, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
+import { CapDrawer, CapButton, CapInput, CapPopover, 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 = <CapImage src={imgSrc || ''} alt="" />;
+        const content = <img src={imgSrc || ''} alt="" />;
 
         temp.content = (
           <div
@@ -2382,10 +2382,8 @@ 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>
           );
           break;
@@ -2596,6 +2594,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         image: undefined,
         imagePreview: undefined,
       },
+      reUpload: true,
     });
   }
 
@@ -2824,7 +2823,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 ?
-                      <CapImage src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={val.alt} style={val.style}/>
+                      <img 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>
                     }
@@ -2835,15 +2834,21 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             );
             break;
           case 'upload':
-            const isImage = self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image;
+            const {
+              formData: {
+                [`${self.state.currentTab - 1}`]: {
+                  image,
+                } = {},
+              } = {},
+            } = self.state;
+            const isImage = !!image;
             ifError = (this.state.checkValidation || this.props.startValidation) && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             const ImageComponent = (props) => (
               <div key={`${val.id}-${this.state.currentTab}`}>
                 <div className={`image-container ${props.ifError ? 'error' : ''}`}>
-
                   {isImage ?
-                    <CapImage src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={props.alt} style={props.style}/>                    
-                     :
+                    <img 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>
@@ -2901,16 +2906,11 @@ 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={moduleFilterEnabled}
+                  moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
                   label={val.label ? val.label : ''}
                   onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
                   onContextChange={this.props.onContextChange}
@@ -2957,9 +2957,6 @@ 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>
@@ -3009,10 +3006,6 @@ 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>
@@ -3488,7 +3481,6 @@ FormBuilder.propTypes = {
   selectedOfferDetails: PropTypes.array,
   setDrawerVisibility: PropTypes.bool,
   capDrawerContent: PropTypes.array,
-  isFullMode: PropTypes.bool,
 };
 
 export default injectIntl(FormBuilder);

package/v2Components/MobilePushPreviewV2/index.js

@@ -7,10 +7,16 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { CapTab, CapIcon } from '@capillarytech/cap-ui-library';
+import { CapButton } from '@capillarytech/cap-ui-library';
+// import styled from 'styled-components';
+
+import { FormattedMessage } from 'react-intl';
+import { Button } from 'antd';
 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) {
@@ -18,9 +24,6 @@ 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";
@@ -35,7 +38,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');
 
@@ -56,21 +59,12 @@ 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(device) {
+  changeDevice(ev) {
+    const device = ev.target.value;
     const content = this.setContent(this.props.templateData, device);
     this.setState({device, content });
   }
@@ -78,40 +72,38 @@ 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} = this.props;
+    const {templateData, channel} = this.props;
+
     const hasAndroid = get(templateData, 'versions.base.ANDROID') || get(templateData, 'androidContent');
     const hasIos = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
-    const hasBothAndroidAndIos = hasAndroid && hasIos;
+
+    const {device, content} = this.state;
 
     return (
+
       <div>
         <div className="devices">
-          {!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')
-            ))
-          }
+          {!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>}
         </div>
+        <TemplatePreview
+          device={device === "android" ? "android" : "iphone"}
+          channel={channel}
+          content={content || ''}
+          templateData={templateData}
+              >
+        </TemplatePreview>
+
+
       </div>
+
+
     );
   }
+
 }
 
 MobilePushPreviewV2.propTypes = {

package/v2Components/MobilePushPreviewV2/messages.js

@@ -10,4 +10,12 @@ 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,69 +1,5 @@
 @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%;