@capillarytech/creatives-library 3.6.4 → 3.6.5

package/components/TemplatePreview/index.js

@@ -8,18 +8,145 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import _ from 'lodash';
-import { injectIntl, intlShape} from 'react-intl';
-import {CapColumn} from '@capillarytech/cap-react-ui-library';
+import { injectIntl, intlShape, FormattedMessage} from 'react-intl';
+import {CapColumn, CapTab, CapIcon, CapLabel, 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 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;
@@ -38,6 +165,7 @@ 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") {
@@ -52,35 +180,67 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     }
     return (
       <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
-        { 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)}/>
+        { 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)}/>
             <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: '#3F51B5', color: '#ffffff'}}>
+                  <CapColumn className="message-pop-item align-left" style={{ background: '#FFFFFF', color: '#091e42'}}>
                     {msg}
                   </CapColumn>)
                 }
               </div>
             </div>
-          </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>)
+            )}
+        {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 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">
-            <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+            <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`}>
                   {this.props.device === "android" ?
@@ -95,7 +255,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">
@@ -111,7 +271,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}
@@ -130,11 +290,11 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         {
           channel && channel.toLowerCase() === 'line' ? (
             <div className="shell align-center" id="sms-preview">
-              <img className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <CapImage 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) ? <img src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
+                  { (content && content.bodyImage) ? <CapImage src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
                   { (content && content.bodyText) ? content.bodyText : ''}
                 </div>
               </div>

package/components/TemplatePreview/messages.js

@@ -10,6 +10,10 @@ 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",
@@ -46,4 +50,16 @@ 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/containers/Cap/messsages.js

@@ -0,0 +1,63 @@
+import { defineMessages } from 'react-intl';
+export default defineMessages({
+  "sms": {
+    id: 'reon.components.Cap.sms',
+    defaultMessage: 'SMS',
+  },
+  "wechat": {
+    id: 'reon.components.Cap.wechat',
+    defaultMessage: 'WeChat',
+  },
+  "gallery": {
+    id: 'reon.components.Cap.gallery',
+    defaultMessage: 'Gallery',
+  },
+  "creativesDashboard": {
+    id: 'reon.components.Cap.creativesDashboard',
+    defaultMessage: 'Creatives',
+  },
+  "creatives": {
+    id: 'reon.components.Cap.creatives',
+    defaultMessage: 'Creatives',
+  },
+  "campaigns": {
+    id: 'reon.components.Cap.campaigns',
+    defaultMessage: 'Campaigns',
+  },
+  "loyalty": {
+    id: 'reon.components.Cap.loyalty',
+    defaultMessage: 'Loyalty',
+  },
+  "member care": {
+    id: 'reon.components.Cap.memberCare',
+    defaultMessage: 'Member Care',
+  },
+  "workbench": {
+    id: 'reon.components.Cap.Workbench',
+    defaultMessage: 'WorkBench',
+  },
+  "store care": {
+    id: 'reon.components.Cap.storeCare',
+    defaultMessage: 'Store Care',
+  },
+  "store performance": {
+    id: 'reon.components.Cap.storePerformance',
+    defaultMessage: 'Store Performance',
+  },
+  "email": {
+    id: 'reon.components.Cap.email',
+    defaultMessage: 'Email',
+  },
+  "ebill": {
+    id: 'reon.components.Cap.ebill',
+    defaultMessage: 'Ebill',
+  },
+  "campaignsDashboard": {
+    id: 'reon.components.campaignsDashboard',
+    defaultMessage: 'Campaigns',
+  },
+  "campaignsHome": {
+    id: 'reon.components.campaignsHome',
+    defaultMessage: "Campaigns Home",
+  },
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.6.4",
+  "version": "3.6.5",
   "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 { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
+import { 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 TemplatePreview from '../TemplatePreview';
@@ -2154,7 +2154,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
@@ -2339,8 +2339,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;
@@ -2706,7 +2708,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>
                     }
@@ -2722,7 +2724,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               <div key={`${val.id}-${this.state.currentTab}`}>
                 <div className={`image-container ${props.ifError ? 'error' : ''}`}>
                   {self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image ?
-                    <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>
                   }
@@ -2834,6 +2836,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>
@@ -2883,6 +2888,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>

package/v2Components/Header/index.js

@@ -0,0 +1,46 @@
+/**
+*
+* Header
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+// import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+
+import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-ui-library';
+import messages from './messages';
+
+
+function Header(props) {
+  return (
+    <div>
+      <CapRow className="template-form-header">
+        <CapColumn span={10}>
+          <CapInput id="template-name" placeholder="Enter template name*" defaultValue={props.templateName} type="input" onChange={props.templateNameHandler}/>
+        </CapColumn>
+        <CapColumn span={2} offset={8}>
+          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> <FormattedMessage {...messages.preview} /> </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> <FormattedMessage {...messages.cancel} /> </CapButton>
+        </CapColumn>
+        <CapColumn span={2}>
+          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> <FormattedMessage {...messages.save} /> </CapButton>
+        </CapColumn>
+      </CapRow>
+    </div>
+  );
+}
+
+Header.propTypes = {
+  templateNameHandler: PropTypes.func,
+  previewHandler: PropTypes.func,
+  cancelHandler: PropTypes.func,
+  saveHandler: PropTypes.func,
+  templateName: PropTypes.string,
+};
+
+export default Header;

package/v2Components/Header/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import Header from '../index';
+
+describe('<Header />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

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',
-  },
 });