@capillarytech/creatives-library 3.0.35 → 3.1.0

package/v2Components/DateRange/index.js

@@ -0,0 +1,113 @@
+/**
+*
+* DateRange
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+// import styled from 'styled-components';
+
+import { FormattedMessage } from 'react-intl';
+import { Grid, Button } from 'semantic-ui-react';
+
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import moment from 'moment';
+
+class DateRange extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      startDate: this.props.prevSelectedDate.startDate,
+      endDate: this.props.prevSelectedDate.endDate,
+    };
+
+    this.handleChangeStart = this.handleChangeStart.bind(this);
+    this.handleChangeEnd = this.handleChangeEnd.bind(this);
+    this.closeAndUpdate = this.closeAndUpdate.bind(this);
+    this.closeAndCancel = this.closeAndCancel.bind(this);
+  }
+
+  handleChangeStart(date) {
+    this.setState({ startDate: date });
+  }
+
+  handleChangeEnd(date) {
+    this.setState({ endDate: date });
+  }
+
+  closeAndUpdate() {
+    this.props.handleDatePickerApply(this.state.startDate, this.state.endDate, 'custom');
+    this.props.handleDatePickerCancel();
+  }
+
+  closeAndCancel() {
+    this.props.handleDatePickerCancel();
+  }
+
+  render() {
+    const { startDate, endDate } = this.state;
+
+    return (
+      <Grid className="dateRangeWrapper" columns={2}>
+        <Grid.Row className="selectedDateTitleWrapper">
+          <Grid.Column style={{ paddingLeft: 0, paddingBottom: `${8}px` }}>
+            <span className="selectedDateTitle">From</span>
+            <input className="selectedDateRange" type="text" readOnly defaultValue={moment(startDate).format('MM/DD/YYYY').toString()} />
+            <i className="calenderIcon material-icons">today</i>
+          </Grid.Column>
+          <Grid.Column style={{ paddingLeft: 0 }}>
+            <span className="selectedDateTitle">To</span>
+            <input className="selectedDateRange" readOnly type="text" defaultValue={moment(endDate).format('MM/DD/YYYY').toString()} />
+            <i className="calenderIcon material-icons">today</i>
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row style={{ paddingTop: 0, paddingBottom: `${2}px` }}>
+          <Grid.Column style={{ paddingLeft: 0 }}>
+            <DatePicker
+              inline
+              selected={startDate}
+              startDate={startDate}
+              endDate={endDate}
+              onChange={this.handleChangeStart}
+              showMonthDropdown
+              showYearDropdown
+              dropdownMode="select"
+            />
+          </Grid.Column>
+          <Grid.Column style={{ paddingLeft: 0 }}>
+            <DatePicker
+              inline
+              selected={endDate}
+              startDate={startDate}
+              endDate={endDate}
+              minDate={startDate}
+              maxDate={moment()}
+              onChange={this.handleChangeEnd}
+              showMonthDropdown
+              showYearDropdown
+              dropdownMode="select"
+            />
+          </Grid.Column>
+        </Grid.Row>
+        <Grid.Row>
+          <Grid.Column width={16} style={{ paddingLeft: 0 }}>
+            <Button onClick={this.closeAndUpdate} className="btn-primary" floated="left"><FormattedMessage id="customdatepicker.done" defaultMessage="Done" /></Button>
+            <Button onClick={this.closeAndCancel} className="btn-secondary" floated="left"><FormattedMessage id="customdatepicker.cancel" defaultMessage="Cancel" /></Button>
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    );
+  }
+}
+
+DateRange.propTypes = {
+  prevSelectedDate: PropTypes.object.isRequired,
+  handleDatePickerCancel: PropTypes.func,
+  handleDatePickerApply: PropTypes.func,
+};
+
+export default DateRange;

package/v2Components/DateRange/messages.js

@@ -0,0 +1,13 @@
+/*
+ * DateRange Messages
+ *
+ * This contains all the text for the DateRange component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.DateRange.header',
+    defaultMessage: 'This is the DateRange component !',
+  },
+});

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

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

package/v2Components/Edmeditor/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'creatives.componentsV2.Edmeditor.header',
+    id: 'app.components.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><FormattedMessage {...messages.browserDoesntSupportIframe} /></p>
+        <p>Your browser does not support iframes.</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"><FormattedMessage {...messages.close} /></i>
+              <i className="material-icons close-emailPreivew">close</i>
             </div>
           </div>
 

package/v2Components/EmailPreview/messages.js

@@ -7,23 +7,15 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   lastModified: {
-    id: 'creatives.componentsV2.EmailPreview.lastModified',
+    id: 'app.components.EmailPreview.lastModified',
     defaultMessage: 'Last modified on',
   },
   uploadedBy: {
-    id: 'creatives.componentsV2.EmailPreview.uploadedBy',
+    id: 'app.components.EmailPreview.uploadedBy',
     defaultMessage: 'Last modified by',
   },
   subject: {
-    id: 'creatives.componentsV2.EmailPreview.subject',
+    id: 'app.components.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><FormattedMessage {...messages.browserDoesntSupportIframe} /></p>
+        <p>Your browser does not support iframes.</p>
       </iframe>
     </div>);
 

package/v2Components/EmailPreviewV2/messages.js

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

package/v2Components/FormBuilder/_formBuilder.scss

@@ -76,3 +76,22 @@
     }
   }
 }
+
+.form-builder-dragger  {
+  .ant-upload-drag {
+    background-color: white;
+  }
+  .ant-upload-drag-container {
+    height: 200px;
+    padding: 44px 0px;
+    .dragger-title {
+      margin-bottom: 12px;
+    }
+    .dragger-or {
+      margin-bottom: 8px;
+    }
+    .dragger-button {
+
+    }
+  }
+}

package/v2Components/FormBuilder/index.js

@@ -11,8 +11,7 @@ import PropTypes from 'prop-types';
 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 { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import TemplatePreview from '../TemplatePreview';
 import TagList from '../../v2Containers/TagList';
@@ -24,7 +23,6 @@ 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;
@@ -271,9 +269,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           onOk={this.handleOk}
           onCancel={this.handleCancel}
           footer={[
-            <CapButton key="back" onClick={this.handleCancel}><FormattedMessage {...messages.cancel} /></CapButton>,
+            <CapButton key="back" onClick={this.handleCancel}>Cancel</CapButton>,
             <CapButton key="submit" type="primary" id={this.state.modal.id} onClick={this.handleOk}>
-              <FormattedMessage {...messages.yes} />
+              Yes
             </CapButton>,
           ]}
         >
@@ -286,7 +284,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           onOk={this.handleOk}
           onCancel={this.handleCancel}
           footer={[
-            <CapButton key="back" onClick={this.handleCancel}><FormattedMessage {...messages.ok} /></CapButton>,
+            <CapButton key="back" onClick={this.handleCancel}>Ok</CapButton>,
           ]}
         >
           {this.state.modal.body}
@@ -885,13 +883,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 += `${this.props.intl.formatMessage(messages.contentNotValidLanguage)} ${currentLang}\n`;
+                  errorString += `Content is not valid for language: ${currentLang}\n`;
                 }
                 if (tagValidationResponse.missingTags.length > 0) {
-                  errorString += `${this.props.intl.formatMessage(messages.missingTags)} ${tagValidationResponse.missingTags.toString()}\n`;
+                  errorString += `Missing tags are: ${tagValidationResponse.missingTags.toString()}\n`;
                 }
                 if (tagValidationResponse.unsupportedTags.length > 0) {
-                  errorString += `${this.props.intl.formatMessage(messages.unsupportedTags)} ${tagValidationResponse.unsupportedTags.toString()}\n`;
+                  errorString += `Unsupported tags are: ${tagValidationResponse.unsupportedTags.toString()}\n`;
                 }
               }
             }
@@ -949,7 +947,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   };
   saveForm(saveForm) {
-    
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
       return;
@@ -2088,7 +2085,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return val.value;
   }
   uploadImages = (e, {files}, val) => {
-    e.preventDefault();
+    if (e) {
+      e.preventDefault();
+    }
     const _URL = window.URL || window.webkitURL;
     const file = files[0];
     if (val.supportedExtensions) {
@@ -2107,10 +2106,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       };
       this.callChildEvent({file, type: 'image', fileParams}, val, val.submitAction);
     };
-    const event = e;
-    event.target.value = null;
+    if (e) {
+      const event = e;
+      event.target.value = null;
+    }
   };
 
+  capUploaderCustomRequest = (uploadData, val) => {
+    this.uploadImages(undefined, {files: [uploadData.file]}, val);
+  }
+
   findBaseTab = () => {
     const activeTabKey = this.state.formData && this.state.formData.base ? this.state.formData.base.tabKey : -1;
     const formData = _.cloneDeep(this.state.formData);
@@ -2200,12 +2205,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       if (!val.onlyDisplay && !val.standalone && (!this.state.errorData[`${this.state.currentTab - 1}`] || (!this.state.errorData[`${this.state.currentTab - 1}`][val.id] && this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null))) {
         return true;
       }
-      //
-      columns.push(
-        <CapColumn key="label" span={4}>
-          <CapLabel style={val.labelStyle ? val.labelStyle : {}}>{val.label}</CapLabel>
-        </CapColumn>
-      );
+
       let ifError = false;
       const isVersionEnable = (this.state.usingTabContainer && !val.standalone);
       if (val.primitive) {
@@ -2230,7 +2230,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             columns.push(
-              <CapColumn key={val.id} span={val.width} offset={val.offset}>
+              <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
                 <CapInput
                   id={val.id}
                   errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
@@ -2377,6 +2377,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 onSelect={(data) => this.updateFormData(data, val, 'onSelect')}
                 value={(this.state.formData[val.id] && this.state.formData[val.id] !== '' ? this.state.formData[val.id] : undefined)}
                 disabled={val.disabled}
+                label={val.label}
               />
             </CapColumn>
           );
@@ -2583,11 +2584,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             if (styling === 'semantic') {
               columns.push(
-                <CapColumn key={val.id} span={val.width} offset={val.offset}>
+                <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
                   <CapInput
                     id={val.id}
                     errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                     label={val.label}
+                    inductiveText={val.inductiveText}
                     className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
                     // fluid={val.fluid}
                     style={val.style ? val.style : {}}
@@ -2596,7 +2598,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     value={value || ""}
                     defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     disabled={val.disabled}
-                    size="default"
+                    size={val.size || "default"}
                   />
                 </CapColumn>
               );
@@ -2733,13 +2735,42 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 {val.showPreview && <WithLabel key={`${val.id}-with-label`} {...rest} errorMessage={ifError && errorMessage} ifError={ifError}/>}
                 <form encType="multipart/form-data" id={val.id}>
                   <input key={val.id} style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files}, val)} accept={val.supportedExtensions ? val.supportedExtensions : "image/*"} />
-                  <CapButton disabled={val.disabled ? val.disabled : false} type="secondary" onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right', right: '-16px', top: '212px'}}>
+                  <CapButton disabled={val.disabled ? val.disabled : false} type="flat" prefix={<CapIcon size="s" type="add-photo" />} onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right', color: `${val.disabled ? '#b3bac5' : '#2466ea'}`}}>
                     {val.label}
                   </CapButton>
                 </form>
               </CapColumn>
               );
             break;
+          
+          case 'capUpload':
+            columns.push(
+              <CapUploader
+                customRequest={(data) => this.capUploaderCustomRequest(data, val)}
+              >
+                <CapButton>
+                  {"Upload"}
+                  {' '}
+                </CapButton>
+              </CapUploader>
+            );
+            break;
+
+          case 'capDragger':
+            columns.push(
+              <CapUploader.CapDragger
+                customRequest={(data) => this.capUploaderCustomRequest(data, val)}
+                {...val.componentProps}
+                className="form-builder-dragger"
+              >
+                <CapHeading className="dragger-title" type="h7">Drag and drop image here</CapHeading>
+                <CapHeading className="dragger-or" type="label6">OR</CapHeading>
+                <CapButton className="dragger-button" type="secondary">
+                  Select a file from your computer
+                </CapButton>
+              </CapUploader.CapDragger>
+            );
+            break;
 
           case "table":
             columns.push(
@@ -2925,6 +2956,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   onSelect={(data) => this.updateFormData(data, val, 'onSelect')}
                   value={isVersionEnable ? this.state.formData[this.state.currentTab - 1][val.id] : this.state.formData[val.id]}
                   disabled={val.disabled}
+                  label={val.label}
                 />
                 {ifError && val.errorMessage &&
                   <span className={'error'}>{val.errorMessage}</span>
@@ -3252,12 +3284,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           this.props.schema ? this.renderForm() : ''
         }
         <SlideBox
-          header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
+          header={(<h3>Layout Selection</h3>)}
           width={60}
           content={cmsTemplateSelectionContent}
           show={this.props.showEdmEmailTemplates}
           handleClose={this.props.toggleEdmEmailTemplateSelection}
-          loadingText={this.props.intl.formatMessage(messages.loadingEDMTemplates)}
+          loadingText={"Loading EDM Templates"}
           isLoading={this.props.getCmsTemplatesInProgress}
         />
       </CapRow>
@@ -3308,7 +3340,6 @@ FormBuilder.propTypes = {
   // saveForm: PropTypes.bool,
   stopValidation: PropTypes.func,
   handleDelete: PropTypes.func,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(FormBuilder);
+export default FormBuilder;

package/v2Components/FormBuilder/messages.js

@@ -7,55 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'creatives.componentsV2.FormBuilder.header',
+    id: 'app.components.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/index.js

@@ -21,7 +21,7 @@ function Header(props) {
         <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}>
+        {/* <CapColumn span={2} offset={8}>
           <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> <FormattedMessage {...messages.preview} /> </CapButton>
         </CapColumn>
         <CapColumn span={2}>
@@ -29,7 +29,7 @@ function Header(props) {
         </CapColumn>
         <CapColumn span={2}>
           <CapButton id="save-button" type="primary" onClick={props.saveHandler}> <FormattedMessage {...messages.save} /> </CapButton>
-        </CapColumn>
+        </CapColumn> */}
       </CapRow>
     </div>
   );

package/v2Components/Header/messages.js

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

package/v2Components/ImagePreview/index.js

@@ -7,9 +7,8 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl } 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
@@ -22,7 +21,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"><FormattedMessage {...messages.close} /></i>
+              <i className="material-icons close-image-preview">close</i>
             </div>
           </div>
 

package/v2Components/ImagePreview/messages.js

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