@capillarytech/creatives-library 3.0.31 → 3.0.33

package/app.js

@@ -10,7 +10,7 @@ import CapV2 from 'v2Containers/Cap';
 import Cap from 'containers/Cap';
 import { LocaleProvider } from 'antd';
 import { makeSelectLocationState } from 'containers/Cap/selectors';
-import LanguageProvider from 'containers/LanguageProvider';
+import LanguageProvider from 'v2Containers/LanguageProvider';
 import FontFaceObserver from 'fontfaceobserver';
 /* eslint-disable import/no-unresolved, import/extensions */
 import '!file-loader?name=[name].[ext]!./favicon.ico';

package/components/BreadCrumbs/messages.js

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

package/components/CapTagList/index.js

@@ -165,15 +165,15 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     const options = [
       {
         value: "All",
-        label: "All",
+        label: this.props.intl.formatMessage(messages.all),
       },
       {
         value: "Outbound",
-        label: "Outbound",
+        label: this.props.intl.formatMessage(messages.outbound),
       },
       {
         value: "Loyalty",
-        label: "Loyalty",
+        label: this.props.intl.formatMessage(messages.loyalty),
       },
     ];
     return (

package/components/CapTagList/messages.js

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

package/components/Ckeditor/messages.js

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

package/components/CustomPopOver/index.js

@@ -7,11 +7,10 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-// import styled from 'styled-components';
 import {CapPopover} from '@capillarytech/cap-react-ui-library';
-// import { FormattedMessage } from 'react-intl';
-// import messages from './messages';
 import _ from "lodash";
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
 
 class CustomPopOver extends React.Component { // eslint-disable-line react/prefer-stateless-function
   componentWillMount() {
@@ -51,7 +50,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/components/CustomPopOver/messages.js

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

package/components/DateFilter/index.js

@@ -235,10 +235,10 @@ class DateFilter extends React.Component { // eslint-disable-line react/prefer-s
           <Grid.Row className={this.state.openCustomDatePicker ? 'hide' : ''}>
             <Grid.Column width={16}>
               <Button.Group fluid className="btn-group till-date">
-                <Button className={dateType === 'week' ? 'active' : ''} onClick={() => this.handleDateTypeClick('week')}>WTD</Button>
-                <Button className={dateType === 'month' ? 'active' : ''} onClick={() => this.handleDateTypeClick('month')}>MTD</Button>
-                <Button className={dateType === 'year' ? 'active' : ''} onClick={() => this.handleDateTypeClick('year')}>YTD</Button>
-                <Button className={dateType === 'custom' ? 'active' : ''} onClick={() => this.handleDateTypeClick('custom')}>Custom</Button>
+                <Button className={dateType === 'week' ? 'active' : ''} onClick={() => this.handleDateTypeClick('week')}><FormattedMessage {...messages.wtd} /></Button>
+                <Button className={dateType === 'month' ? 'active' : ''} onClick={() => this.handleDateTypeClick('month')}><FormattedMessage {...messages.mtd} /></Button>
+                <Button className={dateType === 'year' ? 'active' : ''} onClick={() => this.handleDateTypeClick('year')}><FormattedMessage {...messages.ytd} /></Button>
+                <Button className={dateType === 'custom' ? 'active' : ''} onClick={() => this.handleDateTypeClick('custom')}><FormattedMessage {...messages.custom} /></Button>
               </Button.Group>
             </Grid.Column>
             <Grid.Column width={16} className="selectedDateText">
@@ -256,11 +256,11 @@ class DateFilter extends React.Component { // eslint-disable-line react/prefer-s
               <Grid.Column width={16}>
                 <Button.Group fluid className="btn-group till-date">
                   {dateType !== 'week' ? '' :
-                  <Button className={this.state.compareDateRange.dateType !== 'week' ? '' : 'active'} onClick={() => this.handleCompareDateChange('week')}>Previous Week</Button> }
+                  <Button className={this.state.compareDateRange.dateType !== 'week' ? '' : 'active'} onClick={() => this.handleCompareDateChange('week')}><FormattedMessage {...messages.previousWeek} /></Button> }
                   {dateType !== 'month' ? '' :
-                  <Button className={this.state.compareDateRange.dateType !== 'month' ? '' : 'active'} onClick={() => this.handleCompareDateChange('month')}>Previous Month</Button>}
-                  <Button className={this.state.compareDateRange.dateType === 'year' ? 'active' : ''} onClick={() => this.handleCompareDateChange('year')}>Previous Year</Button>
-                  <Button className={this.state.compareDateRange.dateType === 'custom' ? 'active' : ''} onClick={() => this.handleCompareDateChange('custom')}>Custom</Button>
+                  <Button className={this.state.compareDateRange.dateType !== 'month' ? '' : 'active'} onClick={() => this.handleCompareDateChange('month')}><FormattedMessage {...messages.previousMonth} /></Button>}
+                  <Button className={this.state.compareDateRange.dateType === 'year' ? 'active' : ''} onClick={() => this.handleCompareDateChange('year')}><FormattedMessage {...messages.previousYear} /></Button>
+                  <Button className={this.state.compareDateRange.dateType === 'custom' ? 'active' : ''} onClick={() => this.handleCompareDateChange('custom')}><FormattedMessage {...messages.custom} /></Button>
                 </Button.Group>
               </Grid.Column>
               <Grid.Column width={16} className="selectedDateText">
@@ -272,8 +272,8 @@ class DateFilter extends React.Component { // eslint-disable-line react/prefer-s
           }
           <Grid.Row className={this.state.openCustomDatePicker ? 'hide' : ''}>
             <Grid.Column width={16}>
-              <Button primary onClick={this.handleApply}>Apply</Button>
-              <Button basic onClick={this.handleCancel}>Cancel</Button>
+              <Button primary onClick={this.handleApply}><FormattedMessage {...messages.apply} /></Button>
+              <Button basic onClick={this.handleCancel}><FormattedMessage {...messages.cancel} /></Button>
             </Grid.Column>
           </Grid.Row>
 
@@ -281,7 +281,7 @@ class DateFilter extends React.Component { // eslint-disable-line react/prefer-s
             <Grid.Row className={!this.state.openCustomDatePicker ? 'hide' : ''}>
               <Grid.Column className="selectDateRangeTitle" width={16}>
                 <a href="" className="backButton" onClick={this.handleCustomDatePickerCancel}><i className="material-icons">keyboard_backspace</i></a>
-                <span className="dateRangeTitle">Select Date Range</span>
+                <span className="dateRangeTitle"><FormattedMessage {...messages.selectDateRange} /></span>
               </Grid.Column>
               <Grid.Column width={16} className="dateRangeWrapper">
                 <DateRange prevSelectedDate={this.state.selectedDateRange} handleDatePickerApply={this.handleDatePickerApply} handleDatePickerCancel={this.handleCustomDatePickerCancel} />
@@ -296,7 +296,7 @@ class DateFilter extends React.Component { // eslint-disable-line react/prefer-s
             <Grid.Row className={!this.state.openCustomDatePicker ? 'hide' : ''}>
               <Grid.Column width={16}>
                 <a href="" className="backButton" onClick={this.handleCustomDatePickerCancel}><i className="material-icons">keyboard_backspace</i></a>
-                <span className="dateRangeTitle">Select Date Range</span>
+                <span className="dateRangeTitle"><FormattedMessage {...messages.selectDateRange} /></span>
               </Grid.Column>
               <Grid.Column width={16}>
                 {this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType)} vs

package/components/DateFilter/messages.js

@@ -14,4 +14,44 @@ export default defineMessages({
     id: 'reon.components.DateFilter.editText',
     defaultMessage: 'Edit',
   },
+  wtd: {
+    id: 'reon.components.DateFilter.wtd',
+    defaultMessage: 'WTD',
+  },
+  mtd: {
+    id: 'reon.components.DateFilter.mtd',
+    defaultMessage: 'MTD',
+  },
+  ytd: {
+    id: 'reon.components.DateFilter.ytd',
+    defaultMessage: 'YTD',
+  },
+  custom: {
+    id: 'reon.components.DateFilter.custom',
+    defaultMessage: 'Custom',
+  },
+  previousWeek: {
+    id: 'reon.components.DateFilter.previousWeek',
+    defaultMessage: 'Previous Week',
+  },
+  previousMonth: {
+    id: 'reon.components.DateFilter.previousMonth',
+    defaultMessage: 'Previous Month',
+  },
+  previousYear: {
+    id: 'reon.components.DateFilter.previousYear',
+    defaultMessage: 'Previous Year',
+  },
+  selectDateRange: {
+    id: 'reon.components.DateFilter.selectDateRange',
+    defaultMessage: 'Select Date Range',
+  },
+  apply: {
+    id: 'reon.components.DateFilter.apply',
+    defaultMessage: 'Apply',
+  },
+  cancel: {
+    id: 'reon.components.DateFilter.cancel',
+    defaultMessage: 'Cancel',
+  },
 });

package/components/DateRange/index.js

@@ -16,6 +16,7 @@ import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 
 import moment from 'moment';
+import messages from './messages';
 
 class DateRange extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -55,14 +56,14 @@ class DateRange extends React.Component { // eslint-disable-line react/prefer-st
       <Grid className="dateRangeWrapper" columns={2}>
         <Grid.Row className="selectedDateTitleWrapper">
           <Grid.Column style={{ paddingLeft: 0, paddingBottom: `${8}px` }}>
-            <span className="selectedDateTitle">From</span>
+            <span className="selectedDateTitle"><FormattedMessage {...messages.from} /></span>
             <input className="selectedDateRange" type="text" readOnly defaultValue={moment(startDate).format('MM/DD/YYYY').toString()} />
-            <i className="calenderIcon material-icons">today</i>
+            <i className="calenderIcon material-icons"><FormattedMessage {...messages.today} /></i>
           </Grid.Column>
           <Grid.Column style={{ paddingLeft: 0 }}>
-            <span className="selectedDateTitle">To</span>
+            <span className="selectedDateTitle"><FormattedMessage {...messages.to} /></span>
             <input className="selectedDateRange" readOnly type="text" defaultValue={moment(endDate).format('MM/DD/YYYY').toString()} />
-            <i className="calenderIcon material-icons">today</i>
+            <i className="calenderIcon material-icons"><FormattedMessage {...messages.today} /></i>
           </Grid.Column>
         </Grid.Row>
         <Grid.Row style={{ paddingTop: 0, paddingBottom: `${2}px` }}>

package/components/DateRange/messages.js

@@ -7,7 +7,19 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.DateRange.header',
+    id: 'creatives.components.DateRange.header',
     defaultMessage: 'This is the DateRange component !',
   },
+  today: {
+    id: 'creatives.components.DateRange.today',
+    defaultMessage: 'Today',
+  },
+  from: {
+    id: 'creatives.components.DateRange.from',
+    defaultMessage: 'From',
+  },
+  to: {
+    id: 'creatives.components.DateRange.to',
+    defaultMessage: 'To',
+  },
 });

package/components/Edmeditor/messages.js

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

package/components/EmailPreview/index.js

@@ -57,9 +57,9 @@ class EmailPreview extends React.Component { // eslint-disable-line react/prefer
             <div id="emailPreivew-content">
               {/* {this.props.content} */}
               <div className="device-wrapper">
-                <div onClick={() => this.props.changePreviewDevice("desktop")} className={(this.props.device.toLowerCase() === "desktop") ? "device-name active" : "device-name"}>Desktop</div>
-                <div onClick={() => this.props.changePreviewDevice("tablet")} className={(this.props.device.toLowerCase() === "tablet") ? "device-name active" : "device-name"}>Tablet</div>
-                <div onClick={() => this.props.changePreviewDevice("mobile")} className={(this.props.device.toLowerCase() === "mobile") ? "device-name active" : "device-name"}>Mobile</div>
+                <div onClick={() => this.props.changePreviewDevice("desktop")} className={(this.props.device.toLowerCase() === "desktop") ? "device-name active" : "device-name"}><FormattedMessage {...messages.desktop} /></div>
+                <div onClick={() => this.props.changePreviewDevice("tablet")} className={(this.props.device.toLowerCase() === "tablet") ? "device-name active" : "device-name"}><FormattedMessage {...messages.tablet} /></div>
+                <div onClick={() => this.props.changePreviewDevice("mobile")} className={(this.props.device.toLowerCase() === "mobile") ? "device-name active" : "device-name"}><FormattedMessage {...messages.mobile} /></div>
               </div>
               <div className="email-preview-container">
                 <div className={this.props.device === 'desktop' ? '' : "shell align-center"}>
@@ -69,7 +69,7 @@ class EmailPreview extends React.Component { // eslint-disable-line react/prefer
                     <img src={mobileBody} alt="capillary" width="85%" /> : ''}
                   <div className={messageContainerName}>
                     <iframe srcDoc={copyContent} {...deviceAspectRatio[this.props.device]} >
-                      <p>Your browser does not support iframes.</p>
+                      <p><FormattedMessage {...messages.browserNotSupportIframe} /></p>
                     </iframe>
                   </div>
                 </div>

package/components/EmailPreview/messages.js

@@ -7,11 +7,27 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   lastModified: {
-    id: 'app.components.EmailPreview.lastModified',
+    id: 'creatives.components.EmailPreview.lastModified',
     defaultMessage: 'Last modified on',
   },
   uploadedBy: {
-    id: 'app.components.EmailPreview.uploadedBy',
+    id: 'creatives.components.EmailPreview.uploadedBy',
     defaultMessage: 'Last modified by',
   },
+  desktop: {
+    id: 'creatives.components.EmailPreview.desktop',
+    defaultMessage: 'Desktop',
+  },
+  tablet: {
+    id: 'creatives.components.EmailPreview.tablet',
+    defaultMessage: 'Tablet',
+  },
+  mobile: {
+    id: 'creatives.components.EmailPreview.mobile',
+    defaultMessage: 'Mobile',
+  },
+  browserNotSupportIframe: {
+    id: 'creatives.components.EmailPreview.browserNotSupportIframe',
+    defaultMessage: 'Your browser does not support iframes.',
+  },
 });

package/components/Footer/messages.js

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

package/components/FormBuilder/index.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Label } from 'semantic-ui-react';
 import _ from 'lodash';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { Tabs, Row, Col, Table, Modal, notification} from 'antd';
 import { CapButton, CapInput, CapPopover, CapTextArea, CapCheckbox, CapRadio, CapRadioGroup, CapSelect, CapTable, CapColumn} from '@capillarytech/cap-react-ui-library';
 import TemplatePreview from '../../components/TemplatePreview';
@@ -23,6 +24,7 @@ import EDMEditor from "../../components/Edmeditor";
 import CustomPopOver from '../../components/CustomPopOver';
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
+import messages from './messages';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 // import styled from 'styled-components';
@@ -261,9 +263,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>,
           ]}
         >
@@ -276,7 +278,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}
@@ -838,13 +840,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`;
                 }
               }
             }
@@ -1582,9 +1584,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   deleteLanguage = () => {
-    if (this.state.formData[`${this.state.currentTab - 1}`].activeTab === this.props.baseLanguage) {
-
-    } else {
+    if (this.state.formData[`${this.state.currentTab - 1}`].activeTab !== this.props.baseLanguage) {
       const formData = _.cloneDeep(this.state.formData);
       const currentTab = `${this.state.currentTab - 1}`;
       const currentLang = formData[`${this.state.currentTab - 1}`].activeTab;
@@ -2084,7 +2084,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       if (this.props.schema.channel.toLowerCase() === 'email') {
         //
         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="" />;
 
         temp.content = (
@@ -2482,10 +2481,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         const type = val.type;
         const styling = val.styling;
         const isVersionEnable = (this.state.usingTabContainer && !val.standalone);
-        if (val.id.match(/edmeditor/g)) {
-
-        }
-
 
         if (!this.props.isNewVersionFlow && !val.standalone && !val.onlyDisplay && isVersionEnable && !this.state.formData[`${this.state.currentTab - 1}`]) {
           return true;
@@ -3181,12 +3176,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}
         />
       </Row>
@@ -3237,6 +3232,7 @@ FormBuilder.propTypes = {
   // saveForm: PropTypes.bool,
   stopValidation: PropTypes.func,
   handleDelete: PropTypes.func,
+  intl: intlShape.isRequired,
 };
 
-export default FormBuilder;
+export default injectIntl(FormBuilder);

package/components/FormBuilder/messages.js

@@ -7,7 +7,39 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.FormBuilder.header',
+    id: 'creatives.components.FormBuilder.header',
     defaultMessage: 'This is the FormBuilder component !',
   },
+  contentNotValidLanguage: {
+    id: 'creatives.components.FormBuilder.contentNotValidLanguage',
+    defaultMessage: 'Content is not valid for language:',
+  },
+  missingTags: {
+    id: 'creatives.components.FormBuilder.missingTags',
+    defaultMessage: 'Missing tags are:',
+  },
+  unsupportedTags: {
+    id: 'creatives.components.FormBuilder.unsupportedTags',
+    defaultMessage: 'Unsupported tags are:',
+  },
+  layoutSelection: {
+    id: 'creatives.components.FormBuilder.layoutSelection',
+    defaultMessage: 'Layout Selection',
+  },
+  loadingEDMTemplates: {
+    id: 'creatives.components.FormBuilder.loadingEDMTemplates',
+    defaultMessage: 'Loading EDM Templates',
+  },
+  cancel: {
+    id: 'creatives.components.FormBuilder.cancel',
+    defaultMessage: 'Cancel',
+  },
+  yes: {
+    id: 'creatives.components.FormBuilder.yes',
+    defaultMessage: 'Yes',
+  },
+  ok: {
+    id: 'creatives.components.FormBuilder.ok',
+    defaultMessage: 'Ok',
+  },
 });

package/components/Header/messages.js

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

package/components/ImagePreview/index.js

@@ -22,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">{this.props.intl.formatMessage(messages.close)}</i>
             </div>
           </div>
 

package/components/ImagePreview/messages.js

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

package/components/PageHeader/messages.js

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

package/components/PreviewSideBar/index.js

@@ -99,8 +99,8 @@ class PreviewSideBar extends React.Component { // eslint-disable-line react/pref
             <div className="devices">
               {!_.isEmpty(this.props.templateData) && this.props.templateData.versions.base.ANDROID && this.props.templateData.versions.base.IOS &&
               <ButtonGroup onClick={this.changeDevice}>
-                <CapButton type={this.state.device === "android" ? "primary" : "secondary"} value={"android"}>Android</CapButton>
-                <CapButton type={this.state.device === "iphone" ? "primary" : "secondary"} value={"iphone"}>IOS</CapButton>
+                <CapButton type={this.state.device === "android" ? "primary" : "secondary"} value={"android"}><FormattedMessage {...messages.android} /></CapButton>
+                <CapButton type={this.state.device === "iphone" ? "primary" : "secondary"} value={"iphone"}><FormattedMessage {...messages.ios} /></CapButton>
               </ButtonGroup>}
             </div>
             {this.props.channel.toLowerCase() === "mobilepush" ?

package/components/PreviewSideBar/messages.js

@@ -7,27 +7,35 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.PreviewSideBar.header',
+    id: 'creatives.components.PreviewSideBar.header',
     defaultMessage: 'This is the PreviewSideBar component !',
   },
   lastModified: {
-    id: 'app.components.PreviewSideBar.lastModified',
+    id: 'creatives.components.PreviewSideBar.lastModified',
     defaultMessage: 'Last modified on',
   },
   uploadedBy: {
-    id: 'app.components.PreviewSideBar.uploadedBy',
+    id: 'creatives.components.PreviewSideBar.uploadedBy',
     defaultMessage: 'Last modified by',
   },
   edit: {
-    id: 'app.components.PreviewSideBar.edit',
+    id: 'creatives.components.PreviewSideBar.edit',
     defaultMessage: 'Edit',
   },
   select: {
-    id: 'app.components.PreviewSideBar.select',
+    id: 'creatives.components.PreviewSideBar.select',
     defaultMessage: 'Select',
   },
   duplicate: {
-    id: 'app.components.PreviewSideBar.duplicate',
+    id: 'creatives.components.PreviewSideBar.duplicate',
     defaultMessage: 'Duplicate',
   },
+  android: {
+    id: 'creatives.components.PreviewSideBar.android',
+    defaultMessage: 'Android',
+  },
+  ios: {
+    id: 'creatives.components.PreviewSideBar.ios',
+    defaultMessage: 'IOS',
+  },
 });

package/components/Sidebar/messages.js

@@ -7,15 +7,15 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   inputPlaceholder: {
-    id: 'app.components.Sidebar.input.placeholder',
+    id: 'creatives.components.Sidebar.input.placeholder',
     defaultMessage: 'Search...',
   },
   menuTitle: {
-    id: 'app.components.Sidebar.menuTitle',
+    id: 'creatives.components.Sidebar.menuTitle',
     defaultMessage: 'Menu',
   },
   creatives: {
-    id: 'app.components.Sidebar.creatives',
+    id: 'creatives.components.Sidebar.creatives',
     defaultMessage: 'Creatives',
   },
 });