@capillarytech/creatives-library 3.0.31 → 3.0.33

package/utils/smsCharCountV2.js

@@ -1,4 +1,9 @@
 import React from 'react';
+import * as Api from './../services/api';
+let optoutUrl;
+let showOptoutCount = true;
+let responseState = "REQUEST";
+
 function getURLParameter(name) {
   return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
 }
@@ -49,13 +54,27 @@ export function checkUnicode(content) {
   return false;
 }
 export function updateCharCount(content, isUnicodeEnabled) {
-  console.log(content);
-  var chars_arr = content.split("");
-  console.log(chars_arr);
+  if (showOptoutCount && optoutUrl === undefined && responseState === 'REQUEST') {
+    Api.getUnsubscribeUrl().then((res) => {
+      optoutUrl = res.response.response;
+      responseState = "SUCCESS";
+    }).catch((err) => {
+      showOptoutCount = false;
+      responseState = "FAIL";
+      optoutUrl = undefined;
+      console.log('get optouturl error: ', err);
+    });
+  }
+  const optoutTag = /{{optout}}/g;
+  const optoutTagLength = 14;
+  const contentOriginal = content;
+  const noOfOptout = (content.match(optoutTag) || []).length;
+  content = showOptoutCount ? content.replace(optoutTag, "") : content;
+  var chars_arr = contentOriginal.split("");
   var coding = '7bit';
   var parts = 1;
   var part = 1;
-  var chars_used = 0;
+  var chars_used = showOptoutCount ? ((optoutUrl && optoutUrl.length || 0) * noOfOptout) : 0;
   var chars_sms = 160;
   var sms_parts_container = [];
   var partc = [];
@@ -127,17 +146,20 @@ export function updateCharCount(content, isUnicodeEnabled) {
     }
   }
 
+  chars_used = showOptoutCount ? (chars_used - (optoutTagLength * noOfOptout)) : chars_used;
   console.log('Type:', (coding == '7bit' ? '7bit' : 'Unicode'));
   console.log('Parts:', parts);
   console.log('SMS Chars:', chars_sms);
   console.log('SMS Char total:', chars_used);
-
+  console.log('SMS optouturl: ', optoutUrl);
   return {
     unicode: (coding === '7bit' ? false : true),
     parts,
     chars_sms,
     chars_used,
     char_list: partc,
+    optouturlLength: (optoutUrl && optoutUrl.length) || 0,
+    optoutUrlPresent: noOfOptout > 0,
+    responseState,
   };
 }
-

package/v2Components/BreadCrumbs/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.BreadCrumbs.header',
+    id: 'creatives.componentsV2.BreadCrumbs.header',
     defaultMessage: 'This is the BreadCrumbs component !',
   },
 });

package/v2Components/CallTaskPreview/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.CallTaskPreview.header',
+    id: 'creatives.componentsV2.CallTaskPreview.header',
     defaultMessage: 'This is the CallTaskPreview component !',
   },
 });

package/v2Components/CapTagList/index.js

@@ -139,6 +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((
@@ -159,17 +160,17 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     const options = [
       {
         value: "All",
-        label: "All",
+        label: this.props.intl.formatMessage(messages.all),
         key: 'all',
       },
       {
         value: "Outbound",
-        label: "Outbound",
+        label: this.props.intl.formatMessage(messages.outbound),
         key: 'outbound',
       },
       {
         value: "Loyalty",
-        label: "Loyalty",
+        label: this.props.intl.formatMessage(messages.loyalty),
         key: 'loyalty',
       },
     ];
@@ -179,8 +180,8 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           visible={this.state.visible}
           onVisibleChange={this.togglePopoverVisibility}
           content={<div>
-            <CapSpin tip="Getting tags..." spinning={this.props.loading}>
-              <Search style={{ marginBottom: 8, width: '250px'}} placeholder="Search" onChange={this.onChange} />
+            <CapSpin tip={this.props.intl.formatMessage(messages.gettingTags)} spinning={this.props.loading}>
+              <Search style={{ marginBottom: 8, width: '250px'}} placeholder={this.props.intl.formatMessage(messages.search)} onChange={this.onChange} />
               {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue="All" options={options}>
               </CapSelect> : ''}
               <CapTree

package/v2Components/CapTagList/messages.js

@@ -7,19 +7,39 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   "Ok": {
-    id: 'app.components.CapTagList.Ok',
+    id: 'creatives.componentsV2.CapTagList.Ok',
     defaultMessage: 'Ok',
   },
   "numberOfDaysBeforeExpiry": {
-    id: 'app.components.CapTagList.numberOfDaysBeforeExpiry',
+    id: 'creatives.componentsV2.CapTagList.numberOfDaysBeforeExpiry',
     defaultMessage: 'Number of days before expiry',
   },
   "Cancel": {
-    id: 'app.components.CapTagList.Cancel',
+    id: 'creatives.componentsV2.CapTagList.Cancel',
     defaultMessage: 'Cancel',
   },
   "Dynamic Days before Expiry": {
-    id: 'app.components.CapTagList.dynamic_days_before_expiry',
+    id: 'creatives.componentsV2.CapTagList.dynamic_days_before_expiry',
     defaultMessage: 'Dynamic days before expiry',
   },
+  "all": {
+    id: 'creatives.componentsV2.CapTagList.all',
+    defaultMessage: 'Dynamic days before expiry',
+  },
+  "outbound": {
+    id: 'creatives.componentsV2.CapTagList.outbound',
+    defaultMessage: 'Outbound',
+  },
+  "loyalty": {
+    id: 'creatives.componentsV2.CapTagList.loyalty',
+    defaultMessage: 'Loyalty',
+  },
+  "gettingTags": {
+    id: 'creatives.componentsV2.CapTagList.gettingTags',
+    defaultMessage: 'Getting tags...',
+  },
+  "search": {
+    id: 'creatives.componentsV2.CapTagList.search',
+    defaultMessage: 'Search',
+  },
 });

package/v2Components/Ckeditor/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.Ckeditor.header',
+    id: 'creatives.componentsV2.Ckeditor.header',
     defaultMessage: 'This is the Ckeditor component !',
   },
 });

package/v2Components/CmsTemplatesComponent/messages.js

@@ -7,11 +7,11 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.CmsTemplatesComponent.header',
+    id: 'creatives.componentsV2.CmsTemplatesComponent.header',
     defaultMessage: 'This is the CmsTemplatesComponent component !',
   },
   select: {
-    id: 'app.components.CmsTemplatesComponent.select',
+    id: 'creatives.componentsV2.CmsTemplatesComponent.select',
     defaultMessage: 'Select',
   },
 });

package/v2Components/CustomPopOver/index.js

@@ -9,10 +9,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 // import styled from 'styled-components';
 import {CapPopover} from '@capillarytech/cap-ui-library';
-// import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 // import messages from './messages';
 import _ from "lodash";
 
+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);
@@ -51,7 +53,7 @@ class CustomPopOver extends React.Component { // eslint-disable-line react/prefe
             this.renderPopoverContent()
           }
         >
-          <p style={{fontFamily: "open-sans", fontWeight: '600', display: `${this.props.popOverList.length === this.props.excludeList.length ? 'none' : ''}`}}>+ Languages</p>
+          <p style={{fontFamily: "open-sans", fontWeight: '600', display: `${this.props.popOverList.length === this.props.excludeList.length ? 'none' : ''}`}}><FormattedMessage {...messages.languages} /></p>
         </CapPopover>
       </div>
     );

package/v2Components/CustomPopOver/messages.js

@@ -7,7 +7,11 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.CustomPopOver.header',
+    id: 'creatives.componentsV2.CustomPopOver.header',
     defaultMessage: 'This is the CustomPopOver component !',
   },
+  languages: {
+    id: 'creatives.componentsV2.CustomPopOver.languages',
+    defaultMessage: '+ Languages',
+  },
 });

package/v2Components/Edmeditor/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.Edmeditor.header',
+    id: 'creatives.componentsV2.Edmeditor.header',
     defaultMessage: 'This is the Edmeditor component !',
   },
 });

package/v2Components/EmailPreview/index.js

@@ -61,7 +61,7 @@ class EmailPreview extends React.Component { // eslint-disable-line react/prefer
     const iframeDiv = (<div className={`${messageContainerName}`}>
       {emailSubjectLabel}
       <iframe srcDoc={copyContent} {...deviceAspectRatio[device](emailSubject)} >
-        <p>Your browser does not support iframes.</p>
+        <p><FormattedMessage {...messages.browserDoesntSupportIframe} /></p>
       </iframe>
     </div>);
     return (
@@ -72,7 +72,7 @@ class EmailPreview extends React.Component { // eslint-disable-line react/prefer
               {this.props.header}
             </div>
             <div id="box-actions" style={{ float: 'right' }} onClick={this.props.handleClose}>
-              <i className="material-icons close-emailPreivew">close</i>
+              <i className="material-icons close-emailPreivew"><FormattedMessage {...messages.close} /></i>
             </div>
           </div>
 

package/v2Components/EmailPreview/messages.js

@@ -7,15 +7,23 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   lastModified: {
-    id: 'app.components.EmailPreview.lastModified',
+    id: 'creatives.componentsV2.EmailPreview.lastModified',
     defaultMessage: 'Last modified on',
   },
   uploadedBy: {
-    id: 'app.components.EmailPreview.uploadedBy',
+    id: 'creatives.componentsV2.EmailPreview.uploadedBy',
     defaultMessage: 'Last modified by',
   },
   subject: {
-    id: 'app.components.EmailPreview.subject',
+    id: 'creatives.componentsV2.EmailPreview.subject',
     defaultMessage: 'Subject:',
   },
+  browserDoesntSupportIframe: {
+    id: 'creatives.componentsV2.EmailPreview.browserDoesntSupportIframe',
+    defaultMessage: 'Your browser does not support iframes.',
+  },
+  close: {
+    id: 'creatives.componentsV2.EmailPreview.close',
+    defaultMessage: 'close',
+  },
 });

package/v2Components/EmailPreviewV2/index.js

@@ -89,7 +89,7 @@ class EmailPreviewV2 extends React.Component {
     const iframeDiv = (<div className={`${messageContainerName}`}>
       {emailSubjectLabel}
       <iframe srcDoc={copyContent} {...deviceAspectRatio[currentDevice](emailSubject)} >
-        <p>Your browser does not support iframes.</p>
+        <p><FormattedMessage {...messages.browserDoesntSupportIframe} /></p>
       </iframe>
     </div>);
 

package/v2Components/EmailPreviewV2/messages.js

@@ -7,39 +7,43 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.EmailPreviewV2.header',
+    id: 'creatives.componentsV2.EmailPreviewV2.header',
     defaultMessage: 'This is the EmailPreviewV2 component !',
   },
   desktop: {
-    id: 'app.components.EmailPreviewV2.desktop',
+    id: 'creatives.componentsV2.EmailPreviewV2.desktop',
     defaultMessage: 'Desktop',
   },
   tablet: {
-    id: 'app.components.EmailPreviewV2.tablet',
+    id: 'creatives.componentsV2.EmailPreviewV2.tablet',
     defaultMessage: 'Tablet',
   },
   mobile: {
-    id: 'app.components.EmailPreviewV2.mobile',
+    id: 'creatives.componentsV2.EmailPreviewV2.mobile',
     defaultMessage: 'Mobile',
   },
   noIframeSupport: {
-    id: 'app.components.EmailPreviewV2.noIframeSupport',
+    id: 'creatives.componentsV2.EmailPreviewV2.noIframeSupport',
     defaultMessage: 'Your browser does not support iframes.',
   },
   showAllDevices: {
-    id: 'app.components.EmailPreviewV2.showAllDevices',
+    id: 'creatives.componentsV2.EmailPreviewV2.showAllDevices',
     defaultMessage: 'Show all devices',
   },
   lastModified: {
-    id: 'app.components.PreviewSideBar.lastModified',
+    id: 'creatives.componentsV2.EmailPreviewV2.lastModified',
     defaultMessage: 'Last modified on',
   },
   uploadedBy: {
-    id: 'app.components.PreviewSideBar.uploadedBy',
+    id: 'creatives.componentsV2.EmailPreviewV2.uploadedBy',
     defaultMessage: 'Last modified by',
   },
   subject: {
-    id: 'app.components.PreviewSideBar.uploadedBy',
+    id: 'creatives.componentsV2.EmailPreviewV2.subject',
     defaultMessage: 'Subject:',
   },
+  browserDoesntSupportIframe: {
+    id: 'creatives.componentsV2.EmailPreviewV2.browserDoesntSupportIframe',
+    defaultMessage: 'Your browser does not support iframes.',
+  },
 });

package/v2Components/Footer/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.Footer.header',
+    id: 'creatives.componentsV2.Footer.header',
     defaultMessage: 'This is the Footer component !',
   },
 });

package/v2Components/FormBuilder/index.js

@@ -12,6 +12,7 @@ import React from 'react';
 import _ from 'lodash';
 import { Tabs, Table, Modal} from 'antd';
 import { CapLabel, CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification} 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';
 import TagList from '../../v2Containers/TagList';
@@ -23,6 +24,7 @@ import CustomPopOver from '../CustomPopOver';
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
 import {SMS} from '../../v2Containers/CreativesContainer/constants';
+import messages from './messages';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -269,9 +271,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           onOk={this.handleOk}
           onCancel={this.handleCancel}
           footer={[
-            <CapButton key="back" onClick={this.handleCancel}>Cancel</CapButton>,
+            <CapButton key="back" onClick={this.handleCancel}><FormattedMessage {...messages.cancel} /></CapButton>,
             <CapButton key="submit" type="primary" id={this.state.modal.id} onClick={this.handleOk}>
-              Yes
+              <FormattedMessage {...messages.yes} />
             </CapButton>,
           ]}
         >
@@ -284,7 +286,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           onOk={this.handleOk}
           onCancel={this.handleCancel}
           footer={[
-            <CapButton key="back" onClick={this.handleCancel}>Ok</CapButton>,
+            <CapButton key="back" onClick={this.handleCancel}><FormattedMessage {...messages.ok} /></CapButton>,
           ]}
         >
           {this.state.modal.body}
@@ -883,13 +885,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               isValid = false;
               if (showMessages && !isNaN(index)) {
                 if (tagValidationResponse.missingTags.length > 0 || tagValidationResponse.unsupportedTags.length > 0) {
-                  errorString += `Content is not valid for language: ${currentLang}\n`;
+                  errorString += `${this.props.intl.formatMessage(messages.contentNotValidLanguage)} ${currentLang}\n`;
                 }
                 if (tagValidationResponse.missingTags.length > 0) {
-                  errorString += `Missing tags are: ${tagValidationResponse.missingTags.toString()}\n`;
+                  errorString += `${this.props.intl.formatMessage(messages.missingTags)} ${tagValidationResponse.missingTags.toString()}\n`;
                 }
                 if (tagValidationResponse.unsupportedTags.length > 0) {
-                  errorString += `Unsupported tags are: ${tagValidationResponse.unsupportedTags.toString()}\n`;
+                  errorString += `${this.props.intl.formatMessage(messages.unsupportedTags)} ${tagValidationResponse.unsupportedTags.toString()}\n`;
                 }
               }
             }
@@ -1882,15 +1884,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         let activeTabIndex = '1';
         let selector = ".ant-tabs-tab";
         if (this.props.schema.channel.toUpperCase() === "MOBILEPUSH") {
-            selector = `.mobilepush-wrapper ${selector}`;
-          }
+          selector = `.mobilepush-wrapper ${selector}`;
+        }
         const elems = document.querySelectorAll(selector);
 
         for (let i = 0; i < elems.length; i += 1) {
-            if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
-              activeTabIndex = i + 1;
-            }
+          if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
+            activeTabIndex = i + 1;
           }
+        }
         if (this.props.isNewVersionFlow) {
           const formData = _.cloneDeep(this.state.formData);
           formData[(this.state.currentTab - 1)].activeTab = formData[(this.state.currentTab - 1)].selectedLanguages[activeTabIndex - 1];
@@ -3250,12 +3252,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           this.props.schema ? this.renderForm() : ''
         }
         <SlideBox
-          header={(<h3>Layout Selection</h3>)}
+          header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
           width={60}
           content={cmsTemplateSelectionContent}
           show={this.props.showEdmEmailTemplates}
           handleClose={this.props.toggleEdmEmailTemplateSelection}
-          loadingText={"Loading EDM Templates"}
+          loadingText={this.props.intl.formatMessage(messages.loadingEDMTemplates)}
           isLoading={this.props.getCmsTemplatesInProgress}
         />
       </CapRow>
@@ -3306,6 +3308,7 @@ FormBuilder.propTypes = {
   // saveForm: PropTypes.bool,
   stopValidation: PropTypes.func,
   handleDelete: PropTypes.func,
+  intl: intlShape.isRequired,
 };
 
-export default FormBuilder;
+export default injectIntl(FormBuilder);

package/v2Components/FormBuilder/messages.js

@@ -7,7 +7,55 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.FormBuilder.header',
+    id: 'creatives.componentsV2.FormBuilder.header',
     defaultMessage: 'This is the FormBuilder component !',
   },
+  cancel: {
+    id: 'creatives.componentsV2.FormBuilder.cancel',
+    defaultMessage: 'Cancel',
+  },
+  yes: {
+    id: 'creatives.componentsV2.FormBuilder.yes',
+    defaultMessage: 'Yes',
+  },
+  ok: {
+    id: 'creatives.componentsV2.FormBuilder.ok',
+    defaultMessage: 'Ok',
+  },
+  contentNotValidLanguage: {
+    id: 'creatives.componentsV2.FormBuilder.contentNotValidLanguage',
+    defaultMessage: 'Content is not valid for language:',
+  },
+  missingTags: {
+    id: 'creatives.componentsV2.FormBuilder.missingTags',
+    defaultMessage: 'Missing tags are:',
+  },
+  unsupportedTags: {
+    id: 'creatives.componentsV2.FormBuilder.unsupportedTags',
+    defaultMessage: 'Unsupported tags are:',
+  },
+  upload: {
+    id: 'creatives.componentsV2.FormBuilder.upload',
+    defaultMessage: 'Upload',
+  },
+  dragAndDrop: {
+    id: 'creatives.componentsV2.FormBuilder.dragAndDrop',
+    defaultMessage: 'Drag and drop image here',
+  },
+  or: {
+    id: 'creatives.componentsV2.FormBuilder.or',
+    defaultMessage: 'OR',
+  },
+  selectAFile: {
+    id: 'creatives.componentsV2.FormBuilder.selectAFile',
+    defaultMessage: 'Select a file from your computer',
+  },
+  layoutSelection: {
+    id: 'creatives.componentsV2.FormBuilder.layoutSelection',
+    defaultMessage: 'Layout Selection',
+  },
+  loadingEDMTemplates: {
+    id: 'creatives.componentsV2.FormBuilder.loadingEDMTemplates',
+    defaultMessage: 'Loading EDM Templates',
+  },
 });

package/v2Components/Header/messages.js

@@ -7,19 +7,19 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.Header.header',
+    id: 'creatives.componentsV2.Header.header',
     defaultMessage: 'This is the Header component !',
   },
   preview: {
-    id: 'app.components.Header.preview',
+    id: 'creatives.componentsV2.Header.preview',
     defaultMessage: 'Preview',
   },
   cancel: {
-    id: 'app.components.Header.cancel',
+    id: 'creatives.componentsV2.Header.cancel',
     defaultMessage: 'Cancel',
   },
   save: {
-    id: 'app.components.Header.save',
+    id: 'creatives.componentsV2.Header.save',
     defaultMessage: 'Save',
   },
 });

package/v2Components/ImagePreview/index.js

@@ -7,8 +7,9 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { injectIntl } from 'react-intl';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import { Spin } from 'antd';
+import messages from './messages';
 import './_imagePreview.scss';
 
 class ImagePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -21,7 +22,7 @@ class ImagePreview extends React.Component { // eslint-disable-line react/prefer
               {this.props.header}
             </div>
             <div id="box-actions" style={{ float: 'right' }} onClick={this.props.handleClose}>
-              <i className="material-icons close-image-preview">close</i>
+              <i className="material-icons close-image-preview"><FormattedMessage {...messages.close} /></i>
             </div>
           </div>
 

package/v2Components/ImagePreview/messages.js

@@ -7,7 +7,11 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   loadingImage: {
-    id: 'app.components.ImagePreview.loadingImage',
+    id: 'creatives.componentsV2.ImagePreview.loadingImage',
     defaultMessage: 'Loading images !!!!',
   },
+  close: {
+    id: 'creatives.componentsV2.ImagePreview.close',
+    defaultMessage: 'close',
+  },
 });

package/v2Components/MobilePushPreviewV2/index.js

@@ -85,8 +85,8 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
         <div className="devices">
           {!isEmpty(templateData) && hasAndroid && hasIos &&
           <ButtonGroup onClick={this.changeDevice}>
-            <CapButton type={device === "android" ? "primary" : "secondary"} value={"android"}>Android</CapButton>
-            <CapButton type={device === "iphone" ? "primary" : "secondary"} value={"iphone"}>IOS</CapButton>
+            <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
@@ -109,12 +109,9 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
 MobilePushPreviewV2.propTypes = {
   templateData: PropTypes.object.isRequired,
   channel: PropTypes.string.isRequired,
-  showPreview: PropTypes.bool,
   handleClose: PropTypes.func,
   onEditClick: PropTypes.func,
   onDuplicateClick: PropTypes.func,
-  location: PropTypes.object,
-  embedded: PropTypes.bool,
 };
 
 export default MobilePushPreviewV2;

package/v2Components/MobilePushPreviewV2/messages.js

@@ -7,7 +7,15 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.MobilePushPreviewV2.header',
+    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/NavigationBar/messages.js

@@ -6,7 +6,7 @@
 
 import { defineMessages } from 'react-intl';
 
-export const scope = 'app.components.NavigationBar';
+export const scope = 'creatives.componentsV2.NavigationBar';
 
 export default defineMessages({
   header: {