@capillarytech/creatives-library 7.6.1 → 7.6.2

package/containers/WeChat/RichmediaTemplates/Create/index.js

@@ -188,11 +188,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({templateData});
   }
   getEditorInstanse = (instance, id) => {
-    console.log('Got editor Instance ', instance, id);
+    
     window.CKEDITOR.on( 'instanceReady', ( event ) => {
       this.setState({editorInstanse: event.editor});
       event.editor.on( 'focus', () => {
-        console.log( 'focused', event.editor, this );
+        
         this.setState({editorInstanse: event.editor});
       });
     });
@@ -208,7 +208,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({isFormValid});
   }
   getCurrentWindow(e) {
-    console.log("moveToTemplates richmedia getCurrentWindow");
+    
     const response = {
       action: e.action,
       value: 'edit',
@@ -217,7 +217,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     parent.postMessage(JSON.stringify(response), '*');
   }
   getFormData(e) {
-    console.log("getformdata wechat richmedia: ", this.state.templateData, this.props, this.state);
+    
     const message = {
       mediaList: this.props.templateData.templateDetails.versions.base.mediaList,
       media_id: this.props.templateData.templateDetails.versions.base.mediaId,
@@ -241,7 +241,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       value: data,
       validity: this.state.isFormValid,
     };
-    console.log("getformdata2 wechat richmedia: ", data);
+    
     e.source.postMessage(JSON.stringify(response), e.origin);
   }
   injectMessages(elem) {
@@ -300,7 +300,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   //   }
   // }
   moveToTemplates() {
-    console.log("moveToTemplates richmedia");
+    
     const modalContent = {
       title: this.props.intl.formatMessage(messages.modalTitle),
       body: this.props.intl.formatMessage(messages.modalBody),
@@ -314,7 +314,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({showModal: false});
   }
   showNext() {
-    console.log("richmedia shownext");
+    
     const response = {
       action: "showNext",
       value: true,
@@ -322,7 +322,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     parent.postMessage(JSON.stringify(response), '*');
   }
   handleFrameTasks = (e) => {
-    console.log("richmedia handleFrameTasks: ", e.data);
+    
     const type = e.data;
     if (typeof type === 'object') {
       const action = type.action;
@@ -342,7 +342,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           this.getFormData(e);
           break;
         case "moveToTemplates":
-          console.log("moveToTemplates richmedia case");
+          
           this.moveToTemplates();
           break;
         default:

package/containers/WeChat/RichmediaTemplates/Edit/actions.js

@@ -13,7 +13,7 @@ export function defaultAction() {
 }
 
 export function getTemplateDetails(id, channel) {
-  console.log('getting template', id);
+  
   return {
     type: types.GET_TEMPLATE_DETAILS_REQUEST, id, channel,
   };

package/containers/WeChat/RichmediaTemplates/Edit/sagas.js

@@ -12,7 +12,7 @@ export function* getTemplateDetails({id, channel}) {
     const params = {
       id, channel,
     };
-    console.log('saga get Template details', id);
+    
     const result = yield call(Api.getTemplateDetails, params);
     // const sidebar = result.response.sidebar;
     yield put({ type: types.GET_TEMPLATE_DETAILS_SUCCESS, data: result.response });

package/index.js

@@ -75,6 +75,10 @@ import viberSaga from './v2Containers/Viber/sagas';
 
 import TemplatesV2 from './v2Containers/TemplatesV2/index';
 
+import FacebookPreview from './v2Containers/CapFacebookPreview';
+import FacebookPreviewReducer from './v2Containers/CapFacebookPreview/reducer';
+import FacebookPreviewSaga from './v2Containers/CapFacebookPreview/sagas';
+
 import CreativesContainer from './v2Containers/CreativesContainer';
 import CreativesContainerReducer from './v2Containers/CreativesContainer/reducer';
 import { updateCharCount } from './utils/smsCharCountV2';
@@ -101,6 +105,7 @@ const LineCreateContainer = {LineCreate, lineCreateReducer, lineCreateSaga};
 const TemplatesV2Container = {TemplatesV2, templateReducer, templateSaga};
 const FacebookContainer = {Facebook, facebookReducer, facebookSaga};
 const ViberContainer = {Viber, viberReducer, viberSaga};
+const FacebookPreviewContainer = { FacebookPreview, FacebookPreviewReducer, FacebookPreviewSaga };
 
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 const FTPContainer = {FTP, FTPReducer, FTPSagas};
@@ -145,4 +150,5 @@ export { CapContainer,
   GalleryContainer,
   FTPContainer,
   ViberContainer,
+  FacebookPreviewContainer,
 };

package/package.json

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

package/reducers.js

@@ -9,7 +9,7 @@ import { LOCATION_CHANGE } from 'react-router-redux';
 
 import languageProviderReducer from 'v2Containers/LanguageProvider/reducer';
 import beeEditorReducer from 'v2Containers/BeeEditor/reducer';
-
+import CapFacebookPreviewReducer from 'v2Containers/CapFacebookPreview/reducer';
 
 import capReducer from 'containers/Cap/reducer';
 import appReducer from 'containers/App/reducer';
@@ -64,6 +64,7 @@ export default function createReducer(asyncReducers) {
     email: emailReducer,
     ebill: ebillReducer,
     beeEditor: beeEditorReducer,
+    facebookPreview: CapFacebookPreviewReducer,
     FTP: ftpReducer,
     ...asyncReducers,
   });

package/routes.js

@@ -637,6 +637,8 @@ export default function createRoutes(store) {
           import('v2Containers/Line/Container/reducer'),
           import('v2Containers/Viber/sagas'),
           import('v2Containers/Viber/reducer'),
+          import('v2Containers/CapFacebookPreview/sagas'),
+          import('v2Containers/CapFacebookPreview/reducer'),
         ]);
 
         const renderRoute = loadModule(cb);
@@ -658,6 +660,7 @@ export default function createRoutes(store) {
           facebookSagas, facebookReducer,
           lineCreateSagas, lineCreateReducer,
           viberSagas, viberReducer,
+          capFacebookPreviewSagas, capFacebookPreviewReducer,
         ]) => {
           injectReducer('templates', reducer.default);
           injectReducer('cap', capReducer.default);
@@ -675,6 +678,7 @@ export default function createRoutes(store) {
           injectReducer('facebook', facebookReducer.default);
           injectReducer('lineCreate', lineCreateReducer.default);
           injectReducer('viber', viberReducer.default);
+          injectReducer('facebookPreview', capFacebookPreviewReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
           injectSagas(capSagas.default);
@@ -691,6 +695,7 @@ export default function createRoutes(store) {
           injectSagas(facebookSagas.default);
           injectSagas(lineCreateSagas.default);
           injectSagas(viberSagas.default);
+          injectSagas(capFacebookPreviewSagas.default);
           renderRoute(component);
         });
         importModules.catch(errorLoading);

package/services/api.js

@@ -11,12 +11,15 @@ import { GA } from '@capillarytech/cap-ui-utils';
 let API_ENDPOINT = config.development.api_endpoint;
 let EXPORT_API_ENDPOINT = config.development.exports_api_endpoint;
 let CAMPAIGNS_API_ENDPOINT = config.development.campaigns_api_endpoint;
+let CAMPAIGNS_API_ORG_ENDPOINT = config.development.campaigns_api_org_endpoint;
+
 let API_AUTH_ENDPOINT = config.development.auth_endpoint;
 let ARYA_ENDPOINT = config.development.arya_endpoint;
 let SUBSCRIPTION_API_ENDPOINT = config.development.subscription_api_endpoint;
 if (process.env.NODE_ENV === 'production') {
   API_ENDPOINT = config.production.api_endpoint;
   CAMPAIGNS_API_ENDPOINT = config.production.campaigns_api_endpoint;
+  CAMPAIGNS_API_ORG_ENDPOINT = config.production.campaigns_api_org_endpoint;
   API_AUTH_ENDPOINT = config.production.auth_endpoint;
   ARYA_ENDPOINT = config.production.arya_endpoint;
   SUBSCRIPTION_API_ENDPOINT = config.production.subscription_api_endpoint;
@@ -84,7 +87,7 @@ function request(url, options) {
   try {
     requestCallerName = getCallerName();
   } catch (e) {
-    console.log('requestCallerName error :', e);
+    
   }
   const fetchUrl = url.indexOf('?') !== -1 ? `${url}&time=${Date.now()}` : `${url}?time=${Date.now()}`;
   return fetch(fetchUrl, options)
@@ -187,30 +190,31 @@ export const getUserData = () => {
 };
 
 export const createTemplate = ({template}) => {
-  console.log('in api.js', template);
+  
   const url = `${API_ENDPOINT}/templates/SMS`;
   return request(url, getAPICallObject('POST', template));
 };
 
 export const editTemplate = ({template}) => {
-  console.log('in api.js', template);
+  
   const url = `${API_ENDPOINT}/templates/SMS`;
   return request(url, getAPICallObject('POST', template));
 };
 
 export const createWeChatTemplate = ({template}) => {
-  console.log('in api.js', template);
+  
   const url = `${API_ENDPOINT}/templates/WECHAT`;
   return request(url, getAPICallObject('POST', template));
 };
+
 export const createMobilePushTemplate = ({template}) => {
-  console.log('in api.js', template);
+  
   const url = `${API_ENDPOINT}/templates/MOBILEPUSH`;
   return request(url, getAPICallObject('POST', template));
 };
 
 export const duplicateTemplate = ({id, channel}) => {
-  console.log('in api.js duplicateTemplate', id, channel);
+  
   const url = `${API_ENDPOINT}/templates/duplicate/${id}/${channel}`;
   return request(url, getAPICallObject('GET'));
 };
@@ -221,37 +225,36 @@ export const getFTPServers = () => {
 };
 
 export const editWeChatTemplate = ({template}) => {
-  console.log('in api.js', template);
+  
   const url = `${API_ENDPOINT}/templates/WECHAT`;
   return request(url, getAPICallObject('POST', template));
 };
 
 export const createEmailTemplate = ({template}) => {
-  console.log('in api.js', template);
+  
   const url = `${API_ENDPOINT}/templates/EMAIL`;
   return request(url, getAPICallObject('POST', template));
 };
 
 export const createEbillTemplate = ({template}) => {
-  console.log('in api.js', template);
+  
   const url = `${API_ENDPOINT}/templates/EBILL`;
   return request(url, getAPICallObject('POST', template));
 };
 
 export const getTemplateDetails = ({id, channel}) => {
-  console.log('in api.js', id);
+  
   const url = `${API_ENDPOINT}/templates/${id}/${channel ? channel.toUpperCase() : 'SMS'}`;
   return request(url, getAPICallObject('GET'));
 };
 
 export const getAllTemplates = ({channel, queryParams}) => {
-  console.log('in api.js', channel, queryParams);
   const url = `${API_ENDPOINT}/templates/${channel}?query=${encodeURIComponent(JSON.stringify(queryParams))}`;
   return request(url, getAPICallObject('GET'));
 };
 
 export const deleteTemplate = ({channel, id}) => {
-  console.log('in api.js delete', id, channel);
+  
   const url = `${API_ENDPOINT}/templates/${id}/${channel}`;
   return request(url, getAPICallObject('DELETE'));
   //return API.deleteResource(url);
@@ -347,7 +350,7 @@ export const getCmsData = (cmsType, projectId, langId) => {
 };
 
 export const getEdmTemplates = () => {
-  console.log('in api.js');
+  
   const url = `${API_ENDPOINT}/templates/email/default`;
   return request(url, getAPICallObject('GET'));
 };
@@ -360,7 +363,7 @@ export const getDefaultBeeTemplates = () => {
 // All about line
 
 export const createLineTemplate = ({template}) => {
-  console.log('LINE : in api.js', template);
+  
   const url = `${API_ENDPOINT}/templates/LINE`;
   return request(url, getAPICallObject('POST', template));
 };
@@ -370,6 +373,11 @@ export const createViberTemplate = ({template}) => {
   return request(url, getAPICallObject('POST', template));
 };
 
+export const createFacebookADTemplate = ({template}) => {
+  const url = `${API_ENDPOINT}/templates/FACEBOOK`;
+  return request(url, getAPICallObject('POST', template));
+};
+
 export const getLocizMessage = async (locale) => {
   const appName = 'creatives_v2';
   const url = `${ARYA_ENDPOINT}/translations/${appName}/${locale}`;
@@ -403,3 +411,24 @@ export const createCustomRow = (data) => {
   const url = `${API_ENDPOINT}/cms/saveRows`;
   return request(url, getAPICallObject('POST', data));
 };
+
+export const getFacebookPreview = ({previewData}) => {
+  const url = `${API_ENDPOINT}/facebook/getPreview`;
+  return request(url, getAPICallObject('POST', previewData));
+};
+
+
+export const getOrgOUs = ({ orgID }) => {
+  const url = `${ARYA_ENDPOINT}/org/${orgID}/oulist`;
+  return request(url, getAPICallObject('GET'));
+};
+
+export const getOrgLevelCampaignSettings = () => {
+  const url = `${CAMPAIGNS_API_ORG_ENDPOINT}/settings`;
+  return request(url, getAPICallObject('GET', null, false, true));
+};
+
+export const getFacebookVideoId = ({videoUrl, accessToken, actId, pageAccessToken, pageId}) => {
+  const url = `${API_ENDPOINT}/facebook/getFacebookVideoId`;
+  return request(url, getAPICallObject('POST', {videoUrl, accessToken, actId, pageAccessToken, pageId}));
+};

package/utils/authWrapper.js

@@ -10,10 +10,10 @@ const getIsLoggedIn = () => {
   let isLoggedIn = false;
   if (process.env.NODE_ENV === "production" && JSON.parse(window.localStorage.getItem('isLoggedIn'))) {
     isLoggedIn = true;
-    console.log("Auth wrapper production", isLoggedIn);
+    
   } else if (localStorage.getItem("token")) {
     isLoggedIn = true;
-    console.log("Auth wrapper development", isLoggedIn);
+    
   }
   return isLoggedIn;
 };

package/utils/common.js

@@ -49,7 +49,7 @@ export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails
         name: tag.label[userLocale] || tag.label.en,
         value: tag.value,
       };
-    } else if (tag['tag-header'] && mainTags[tag.value]) { 
+    } else if (tag['tag-header'] && mainTags[tag.value]) {
       // to check it this tag header is already available in mainTags object,
       //If yes, it will concat the subtag
       mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
@@ -215,3 +215,15 @@ function getSubTags(subtagsParam) {
   });
   return result;
 }
+
+export const bytes2Size = (bytes, decimals = 2) => {
+  if (bytes === 0) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${Math.ceil((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+};

package/utils/smsCharCount.js

@@ -174,7 +174,7 @@ let updateSmsData = (chars) => {
   msgContent = msgContent.replace(/\r/g, " ").replace(/\f/g, "  ");
 
   const matches = msgContent.split("");
-  console.log('Test 1', msgContent, matches);
+  
   let use7bit = true;
   let length7bit = 0;
   let length16bit = 0;
@@ -255,7 +255,7 @@ function _camp1(s) {
   try {
     return i18n.dgettext("camp1", s) !== '' ? this.i18n.dgettext("camp1", s) : s;
   } catch (err) {
-    console.log('i18n Error', err.message);
+    
     return s;
   }
 }
@@ -328,7 +328,7 @@ export function updateCharCount(boxVal) {
 
   // let unicodeFlag = 0;
   // let extraChars = 0;
-  console.log('Box val', boxVal);
+  
   let msgCount = 0;
   const lenCount = smsCharCount(boxVal);
   const len = lenCount[0];
@@ -337,9 +337,9 @@ export function updateCharCount(boxVal) {
   const totalChars = lenCount[2].total_chars;
   const charset = lenCount[2].charset;
   if (!charset && totalChars > 1000) {
-    console.log("only 1000 character allowed in normal sms remaining character will be discarded");
+    
   } else if (charset && totalChars > 500) {
-    console.log("only 500 character allowed in unicode sms remaining character will be discarded");
+    
   }
 
   // return `${len} characters = ${msgCount} Messages*, Characters left: ${charLeft}`;

package/v2Components/CapTagList/index.js

@@ -139,7 +139,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         supportedTagsString += `${supportedTag} ,`;
       });
       supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
-      console.log(supportedTagsString);
+      
       if (_.has(val, 'subtags')) {
         const temp = this.renderTags(val.subtags);
         list.push((

package/v2Components/CapVideoUpload/index.js

@@ -17,6 +17,7 @@ import {
   CapError,
   CapUploader,
   CapSpin,
+  CapNotification,
 } from '@capillarytech/cap-ui-library';
 import {bytes2Size} from '../../utils/common';
 import './index.scss';
@@ -48,6 +49,7 @@ function CapVideoUpload(props) {
     previewUrl,
     videoHeight,
     videoWidth,
+    videoId,
   } = uploadedAssetList;
 
   const [isTemplateDrawerRequired, updateTemplateDrawerRequirement] = useState(false);
@@ -82,11 +84,14 @@ function CapVideoUpload(props) {
       const metaVideoSrc = get(videoData, `uploadedAssetDataVideo_${index}.metaInfo.secure_file_path`, '');
       const previewImgUrl = get(videoData, `uploadedAssetDataVideo_${index}.metaInfo.video_file_path_preview`, '');
       const metaVideoName = get(videoData, `uploadedAssetDataVideo_${index}.metaInfo.name`, '');
+      const metaVideoId = get(videoData, `uploadedAssetDataVideo_${index}.videoIdResponse.fbVideo.id`, '');
+
       if (metaVideoSrc && videoSrc === "") {
         onVideoUploadUpdateAssestList(index, {
           previewUrl: previewImgUrl,
           videoSrc: metaVideoSrc,
           videoName: metaVideoName,
+          videoId: metaVideoId,
         },
         );
       }
@@ -100,6 +105,7 @@ function CapVideoUpload(props) {
     }
   }, [videoData[`assetUploadingVideo_${index}`]]);
 
+
   useEffect(() => {
     if (!isEmpty(uploadedAssetList)) {
       const {
@@ -184,12 +190,13 @@ function CapVideoUpload(props) {
       onVideoUploadUpdateAssestList(
         index,
         {
-          previewUrl,
-          videoName,
-          videoHeight,
-          videoWidth,
-          videoSrc,
-          videoDuration,
+          previewUrl: "",
+          videoName: "",
+          videoHeight: "",
+          videoWidth: "",
+          videoSrc: "",
+          videoDuration: "",
+          videoId: "",
         }
       );
     };
@@ -204,6 +211,7 @@ function CapVideoUpload(props) {
             index,
             {
               videoSrc,
+              videoId,
               videoName,
               videoHeight: metaVideoHeight,
               videoWidth: metaVideoWidth,

package/v2Components/Card/index.js

@@ -33,7 +33,7 @@ class CustomCard extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   handleMouseHover(data) {
-    console.log('hover mouse data', data);
+    
     this.setState({isHovering: data});
     this.props.onHover(!this.state.isHovering, this.props.id);
   }

package/v2Components/Ckeditor/index.js

@@ -166,7 +166,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
       // setTimeout(() => {
       //   this.editorInstance.name = this.id;
       // }, 5000);
-      console.log('nextProps CKEditor', nextProps, this.state.content, this.props.id);
+      
     }
   }
 
@@ -183,7 +183,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
   onLoad() {
     if (this.unmounting) return;
 
-    console.log('CKEditor Loading');
+    
     if (!window.CKEDITOR) {
       console.error("CKEditor not found");
       return;
@@ -191,13 +191,13 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
 
     let html = this.props.content;
     html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"");
-    console.log("ckeditor loading 1", this.node, html);
+    
     this.editorInstance = window.CKEDITOR.appendTo(
       this.node,
       this.state.config,
       html
     );
-    console.log('2');
+    
 
     if (this.props.getEditorInstanse) {
       this.props.getEditorInstanse(this.editorInstance, this.props.id);
@@ -248,7 +248,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
   };
 
   render() {
-    console.log('ckeditor loading render', this.props);
+    
     return (
       <div id={this.props.id} style={{borderRight: "1px solid #000 !important"}}>
         <div className={this.props.activeClass} ref={(node) => (this.node = node)}/>

package/v2Components/CustomPopOver/index.js

@@ -17,17 +17,17 @@ import messages from './messages';
 
 class CustomPopOver extends React.Component { // eslint-disable-line react/prefer-stateless-function
   componentWillMount() {
-    console.log('popOver List ', this.props.popOverList, this.props.excludeList);
+    
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log('next popOver List ', nextProps.popOverList, nextProps.excludeList);
+    
   }
 
   renderPopoverContent() {
     const elem = [];
     _.forEach(this.props.popOverList, (content, index) => {
-      console.log('PopOver Content', content);
+      
       if (this.props.excludeList.indexOf(content.iso_code) === -1) {
         elem.push(
           <p style={{ cursor: "pointer"}} key={index} onClick={() => this.props.handlePopOverClick(content)}>{content.language}</p>

package/v2Components/Edmeditor/index.js

@@ -25,13 +25,13 @@ class Edmeditor extends React.Component { // eslint-disable-line react/prefer-st
   }
 
   componentDidMount() {
-    console.log('current language edm editor mounted', this.props.id, this.props.edmSrc);
+    
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log('current language nextProps', nextProps, nextProps.id, nextProps.edmSrc);
+    
     // if (!_.isEqual(nextProps.content, this.props.content)) {
-    //   console.log(nextProps.content);
+    //   
     //   this.editorInstance.content = nextProps.content;
     // }
   }
@@ -41,7 +41,7 @@ class Edmeditor extends React.Component { // eslint-disable-line react/prefer-st
   }
 
   render() {
-    console.log('current language edm editor loading', this.props.id, this.props.edmSrc);
+    
     return (
       this.props.edmSrc ?
         (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%" style={{height: "calc(100vh - 180px)"}}></iframe>)

package/v2Components/EmailMobilePreview/index.js

@@ -17,15 +17,15 @@ import moment from 'moment';
 import EmailPreviewV2 from '../EmailPreviewV2';
 import messages from '../EmailPreviewV2/messages';
 import './index.scss';
-import mobileBody from '../../assets/mobile.png';
+import mobileBody from '../../assets/DeviceForEmail.png';
 import { removeLinksFromHtmlContent } from './../../utils/common';
 import {selectTemplateContent} from '../../containers/Templates/selectors';
 import * as templateActions from '../../containers/Templates/actions';
 
 const deviceAspectRatio = {
   mobile: {
-    height: "415",
-    width: "238",
+    height: "541",
+    width: "340",
   },
 };
 
@@ -95,7 +95,7 @@ class EmailMobilePreview extends React.Component {
                       )}
                     <div className={"shell align-center"}>
 
-                      <img src={mobileBody} alt="capillary" width="270" />
+                      <img src={mobileBody} alt="capillary" width="386" />
                       <div className={`${messageContainerName} ${emailSubjectLabel ? 'with-subject' : ''}`}>
                         {emailSubjectLabel}
                         <iframe srcDoc={copyContent} {...deviceAspectRatio.mobile} >

package/v2Components/EmailPreviewV2/index.js

@@ -18,7 +18,7 @@ import moment from 'moment';
 import messages from './messages';
 import './_emailPreviewV2.scss';
 import tabletBody from '../../assets/iPad.svg';
-import mobileBody from '../../assets/mobile.png';
+import mobileBody from '../../assets/DeviceForEmail.png';
 import { removeLinksFromHtmlContent } from './../../utils/common';
 
 import {selectTemplateContent} from '../../v2Containers/Templates/selectors';
@@ -34,8 +34,8 @@ const deviceAspectRatio = {
     width: "450",
   }),
   mobile: (emailSubject) => ({
-    height: emailSubject ? "570" : "600",
-    width: "310",
+    height: emailSubject ? "541" : "511",
+    width: "340",
   }),
 };
 const devices = {
@@ -127,7 +127,7 @@ class EmailPreviewV2 extends React.Component {
                       tab: <StyledCapIcon type="mobile" active={currentDevice === 'mobile'} />,
                       content: (<div className="email-preview-container">
                         <div className="shell align-center">
-                          <img src={mobileBody} alt="capillary" width="350" />
+                          <img src={mobileBody} alt="capillary" width="386" />
                           {iframeDiv}
                         </div>
                       </div>),