@capillarytech/creatives-library 3.0.31 → 3.0.32

package/v2Containers/Sms/Edit/messages.js

@@ -7,83 +7,99 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   "saveTemplateLoader": {
-    id: 'app.containers.Edit.saveTemplateLoader',
+    id: 'creatives.containersV2.Edit.saveTemplateLoader',
     defaultMessage: 'Saving template...',
   },
   "getTemplateDetailsLoader": {
-    id: 'app.containers.Edit.getTemplateDetailsLoader',
+    id: 'creatives.containersV2.Edit.getTemplateDetailsLoader',
     defaultMessage: 'Getting template details...',
   },
   "Message": {
-    id: 'app.containers.Edit.messageLabel',
+    id: 'creatives.containersV2.Edit.messageLabel',
     defaultMessage: 'Message',
   },
   "Template name cannot be empty.": {
-    id: 'app.containers.Edit.emptyTemplateErrorMessage',
+    id: 'creatives.containersV2.Edit.emptyTemplateErrorMessage',
     defaultMessage: "Please provide a template name",
   },
   "Enter template name": {
-    id: 'app.containers.Edit.templateNamePlaceHolder',
+    id: 'creatives.containersV2.Edit.templateNamePlaceHolder',
     defaultMessage: "Enter template name",
   },
   "Discard changes": {
-    id: 'app.containers.Edit.discardChangesButton',
+    id: 'creatives.containersV2.Edit.discardChangesButton',
     defaultMessage: "Discard changes",
   },
   "Cancel": {
-    id: 'app.containers.Edit.cancelButton',
+    id: 'creatives.containersV2.Edit.cancelButton',
     defaultMessage: "Cancel",
   },
   "Save": {
-    id: 'app.containers.Edit.saveButton',
+    id: 'creatives.containersV2.Edit.saveButton',
     defaultMessage: "Save",
   },
   "Version": {
-    id: 'app.containers.Edit.versionLabel',
+    id: 'creatives.containersV2.Edit.versionLabel',
     defaultMessage: "Version",
   },
   "Mark as Final": {
-    id: 'app.containers.Edit.markFinalVersionLabel',
+    id: 'creatives.containersV2.Edit.markFinalVersionLabel',
     defaultMessage: "Mark as final",
   },
   "Duplicate": {
-    id: 'app.containers.Edit.duplicateLabel',
+    id: 'creatives.containersV2.Edit.duplicateLabel',
     defaultMessage: "Duplicate",
   },
   "Rename": {
-    id: 'app.containers.Edit.renameLabel',
+    id: 'creatives.containersV2.Edit.renameLabel',
     defaultMessage: "Rename",
   },
   "Delete": {
-    id: 'app.containers.Edit.deleteLabel',
+    id: 'creatives.containersV2.Edit.deleteLabel',
     defaultMessage: "Delete",
   },
   "Please check if you intend to use unicode characters.": {
-    id: 'app.containers.Edit.unicodeErrorMessage',
+    id: 'creatives.containersV2.Edit.unicodeErrorMessage',
     defaultMessage: "Please check this if you want to use unicode characters",
   },
   "Allow Unicode characters": {
-    id: 'app.containers.Edit.unicodeLabel',
+    id: 'creatives.containersV2.Edit.unicodeLabel',
     defaultMessage: "Allow unicode characters",
   },
   "Tags": {
-    id: 'app.containers.Edit.tagsLabel',
+    id: 'creatives.containersV2.Edit.tagsLabel',
     defaultMessage: "Tags",
   },
   "New Version": {
-    id: 'app.containers.Edit.newVersionLabel',
+    id: 'creatives.containersV2.Edit.newVersionLabel',
     defaultMessage: "New version",
   },
   "Template content has unsupported/missing tags!": {
-    id: 'app.containers.Edit.tagsErrorMessage',
+    id: 'creatives.containersV2.Edit.tagsErrorMessage',
     defaultMessage: "Please check the message content for unsupported/missing tags",
   },
   "Please input sms template content.": {
-    id: 'app.containers.Edit.smsEditorPlaceholder',
+    id: 'creatives.containersV2.Edit.smsEditorPlaceholder',
     defaultMessage: "Please enter the message content",
   },
   "somethingWentWrong": {
-    id: 'app.containers.Edit.somethingWentWrong',
+    id: 'creatives.containersV2.Edit.somethingWentWrong',
     defaultMessage: "Something went wrong!!",
   },
+  "templateEditedSuccessfully": {
+    id: 'creatives.containersV2.Edit.templateEditedSuccessfully',
+    defaultMessage: "SMS Template Edited Successfully",
+  },
+  "alertMessage": {
+    id: 'creatives.containersV2.Edit.alertMessage',
+    defaultMessage: "Alert",
+  },
+  "goBackTemporaryChangesLost": {
+    id: 'creatives.containersV2.Edit.goBackTemporaryChangesLost',
+    defaultMessage: "Do you really want to go back? All your temporary changes will be lost!",
+  },
+  "templateMarkedSuccessfully": {
+    id: 'creatives.containersV2.Edit.templateMarkedSuccessfully',
+    defaultMessage: "Template Marked as Final Successfully",
+  },
 });

package/v2Containers/TagList/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.containers.TagList.header',
+    id: 'creatives.containersV2.TagList.header',
     defaultMessage: 'This is TagList container !',
   },
 });

package/v2Containers/Templates/messages.js

@@ -4,7 +4,7 @@
  * This contains all the text for the Templates component.
  */
 import { defineMessages } from 'react-intl';
-const scope = `app.containers.Templates`;
+const scope = `creatives.containersV2.Templates`;
 export default defineMessages({
   "header": {
     id: `${scope}.header`,
@@ -251,7 +251,7 @@ export default defineMessages({
     defaultMessage: `Edit message content`,
   },
   "createMessageContent": {
-    id: `${scope}.editMessageContent`,
+    id: `${scope}.createMessageContent`,
     defaultMessage: `New message`,
   },
   "creativeTemplatesDesc": {
@@ -263,7 +263,7 @@ export default defineMessages({
     defaultMessage: `Done`,
   },
   "creativesTemplatesEdit": {
-    id: `${scope}.creativesTemplatesSave`,
+    id: `${scope}.creativesTemplatesEdit`,
     defaultMessage: `Edit`,
   },
   "continue": {
@@ -310,4 +310,28 @@ export default defineMessages({
     id: `${scope}.noTemplatesFound`,
     defaultMessage: 'No templates found',
   },
+  "chooseAccount": {
+    id: `${scope}.chooseAccount`,
+    defaultMessage: 'Choose the account to send content',
+  },
+  "wechatAccount": {
+    id: `${scope}.wechatAccount`,
+    defaultMessage: 'Wechat account',
+  },
+  "mobilepushAccount": {
+    id: `${scope}.mobilepushAccount`,
+    defaultMessage: 'Mobilepush account',
+  },
+  "all": {
+    id: `${scope}.all`,
+    defaultMessage: 'All',
+  },
+  "mapTemplates": {
+    id: `${scope}.mapTemplates`,
+    defaultMessage: 'Map templates',
+  },
+  "richMediaTemplates": {
+    id: `${scope}.richMediaTemplates`,
+    defaultMessage: 'Rich media templates',
+  },
 });

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -0,0 +1,29 @@
+import { css } from 'styled-components';
+import {CAP_SPACE_24, CAP_SPACE_16} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+  .cap-tab-v2-wrapper{
+    .ant-tabs-tabpane {
+        border: none;
+    }
+  }
+
+  .component-wrapper {
+    ${(props) => props.isFullMode ? `
+      max-width: 1140px;
+      margin: 0 auto;
+      width: 100%;
+      padding: ${CAP_SPACE_24} 0;
+      .ant-tabs-content{
+        margin-top: ${CAP_SPACE_16}
+      }
+    ` : `.cap-tab-v2 {
+      height: calc(100vh - 118px);
+    } `}
+  }
+`;
+
+export const CapTabStyle = css`
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
+  }
+`;

package/v2Containers/TemplatesV2/index.js

@@ -5,18 +5,15 @@
  */
 
 import PropTypes from 'prop-types';
-
 import React from 'react';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import styled from 'styled-components';
 import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
 import Helmet from 'react-helmet';
 
-import {CAP_SPACE_24, CAP_SPACE_16} from '@capillarytech/cap-ui-library/styled/variables';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/selectors';
 import messages from './messages';
@@ -24,29 +21,13 @@ import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Gallery from '../Assets/Gallery';
-import './_templatesV2.scss';
+import withStyles from '../../hoc/withStyles';
+import styles, { CapTabStyle } from './TemplatesV2.style';
 
 const {CapCustomCardList} = CapCustomCard;
 
-const ComponentWrapper = styled.div`
-${(props) => props.isFullMode ? `
-max-width: 1140px;
-margin: 0 auto;
-width: 100%;
-padding: ${CAP_SPACE_24} 0;
-.ant-tabs-content{
-  margin-top: ${CAP_SPACE_16}
-}
-  ` : `.cap-tab-v2 {
-    height: calc(100vh - 118px);
-  } `}
-  
- 
-`;
-const MarginTop = styled.div`
-  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
-}
-`;
+const StyledCapTab = withStyles(CapTab, CapTabStyle);
+
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -146,21 +127,20 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     }
   }
 
-  setChannelContent = (selectedChannel, argsPanes) => {
-    const panes = argsPanes.map((p) => {
-      const pane = p;
+  setChannelContent = (selectedChannel, argsPanes) => (
+    argsPanes.map((pane) => {
+      let content = null;
       if (pane.key === selectedChannel) {
-        let channel = selectedChannel;
-        if (channel === "mpush") {
-          channel = "mobilepush";
-        }
-        pane.content = this.getTemplatesComponent(channel);
-        return pane;
+        const channel = selectedChannel === "mpush" ? "mobilepush" : selectedChannel;
+        content = this.getTemplatesComponent(channel);
       }
-      return {...pane, content: <div></div>};
-    });
-    return panes;
-  }
+      return {
+        ...pane,
+        content,
+      };
+    })
+  );
+
   channelChange = (selectedChannel) => {
     const panes = this.setChannelContent(selectedChannel, this.state.panes);
     this.setState({panes, selectedChannel}, () => { if (!this.props.isFullMode) this.props.onChannelChange(selectedChannel); });
@@ -171,28 +151,25 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     return this.props.Templates.loadingTemplates;
   }
   render() {
-    const {isFullMode} = this.props;
+    const { isFullMode, className } = this.props;
     return (
-      <div className={`creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
+      <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
         {isFullMode && <Helmet
           title={this.props.intl.formatMessage(messages.creatives)}
           meta={[
             { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
           ]}
         />}
-        <ComponentWrapper isFullMode={isFullMode}>
-
+        <div className="component-wrapper">
           {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-          <MarginTop isFullMode={isFullMode}>
-            <CapTab
-              panes={this.state.panes}
-              onChange={this.channelChange}
-              activeKey={this.state.selectedChannel}
-              defaultActiveKey={this.state.selectedChannel}/>
-          </MarginTop>
-
-
-        </ComponentWrapper>
+          <StyledCapTab
+            panes={this.state.panes}
+            onChange={this.channelChange}
+            activeKey={this.state.selectedChannel}
+            defaultActiveKey={this.state.selectedChannel}
+            isFullMode={isFullMode}
+          />
+        </div>
       </div>
 
     );
@@ -212,6 +189,7 @@ TemplatesV2.propTypes = {
   intl: intlShape,
   onChannelChange: PropTypes.func,
   channelsToHide: PropTypes.array,
+  className: PropTypes.string.isRequired,
 };
 
 TemplatesV2.defaultProps = {
@@ -229,4 +207,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(TemplatesV2)));
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(TemplatesV2, styles))));

package/v2Containers/TemplatesV2/messages.js

@@ -7,23 +7,47 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.containers.TemplatesV2.header',
+    id: 'creatives.containersV2.TemplatesV2.header',
     defaultMessage: 'This is TemplatesV2 container !',
   },
   select: {
-    id: 'app.containers.TemplatesV2.select',
+    id: 'creatives.containersV2.TemplatesV2.select',
     defaultMessage: 'Select',
   },
   edit: {
-    id: 'app.containers.TemplatesV2.edit',
+    id: 'creatives.containersV2.TemplatesV2.edit',
     defaultMessage: 'Edit',
   },
   creatives: {
-    id: 'app.containers.TemplatesV2.creatives',
+    id: 'creatives.containersV2.TemplatesV2.creatives',
     defaultMessage: 'Creatives',
   },
   creativesDesc: {
-    id: 'app.containers.TemplatesV2.creativesDesc',
+    id: 'creatives.containersV2.TemplatesV2.creativesDesc',
     defaultMessage: 'These are pre-built templates which you could use to customize your message content.',
   },
+  sms: {
+    id: 'creatives.containersV2.TemplatesV2.sms',
+    defaultMessage: 'SMS',
+  },
+  email: {
+    id: 'creatives.containersV2.TemplatesV2.email',
+    defaultMessage: 'Email',
+  },
+  pushNotification: {
+    id: 'creatives.containersV2.TemplatesV2.pushNotification',
+    defaultMessage: 'Push notification',
+  },
+  callTask: {
+    id: 'creatives.containersV2.TemplatesV2.callTask',
+    defaultMessage: 'Call Task',
+  },
+  gallery: {
+    id: 'creatives.containersV2.TemplatesV2.gallery',
+    defaultMessage: 'Gallery',
+  },
+  wechat: {
+    id: 'creatives.containersV2.TemplatesV2.wechat',
+    defaultMessage: 'Wechat',
+  },
 });

package/v2Containers/TestPage/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.TestPage.header',
+    id: 'creatives.containersV2.TestPage.header',
     defaultMessage: 'Looks like youas are lost!',
   },
 });

package/v2Containers/Testv2/index.js

@@ -19,9 +19,9 @@ export class Testv2 extends React.Component { // eslint-disable-line react/prefe
     return (
       <div>
         <Helmet
-          title="Testv2"
+          title={<FormattedMessage {...messages.testv2} />}
           meta={[
-            { name: 'description', content: 'Description of Testv2' },
+            { name: 'description', content: <FormattedMessage {...messages.descriptionTestv2} /> },
           ]}
         />
         <FormattedMessage {...messages.header} />

package/v2Containers/Testv2/messages.js

@@ -7,7 +7,15 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.containers.Testv2.header',
+    id: 'creatives.containersV2.Testv2.header',
     defaultMessage: 'This is Testv2 container !',
   },
+  testv2: {
+    id: 'creatives.containersV2.Testv2.testv2',
+    defaultMessage: 'Testv2',
+  },
+  descriptionTestv2: {
+    id: 'creatives.containersV2.Testv2.descriptionTestv2',
+    defaultMessage: 'Description of Testv2',
+  },
 });

package/v2Containers/WeChat/MapTemplates/index.js

@@ -63,8 +63,8 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       isLoading: true,
       showModal: false,
       modalContent: {
-        title: "Alert",
-        body: "Do you really want to go back? All your temporary changes will be lost!",
+        title: this.props.intl.formatMessage(messages.alertMessage),
+        body: this.props.intl.formatMessage(messages.goBackTemporaryChangesLost),
         type: 'confirm',
         id: 'template-back-confirm-modal',
       },
@@ -545,8 +545,8 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
   moveToTemplates() {
     console.log('in move to Templates');
     const modalContent = {
-      title: "Alert",
-      body: "Do you really want to go back? All your temporary changes will be lost!",
+      title: this.props.intl.formatMessage(messages.alertMessage),
+      body: this.props.intl.formatMessage(messages.goBackTemporaryChangesLost),
       type: 'confirm',
       id: 'template-back-confirm-modal',
       show: true,
@@ -627,7 +627,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
             type: "input",  //Resembles component to be used
             metaType: "text",
             datatype: "string",
-            errorMessage: `${title} has invalid content.`,
+            errorMessage: `${title} ${this.props.intl.formatMessage(messages.hasValidContent)}`,
             required: true,
             fluid: true,
             disabled: (this.props.location.query.type === 'embedded'),
@@ -711,7 +711,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
           {
             id: "template-label-link",
             metaType: "label",
-            value: 'Link',
+            value: this.props.intl.formatMessage(messages.Link),
             primitive: true,
             type: "div",
             width: 4,
@@ -736,7 +736,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
             type: "input",  //Resembles component to be used
             metaType: "text",
             datatype: "string",
-            errorMessage: `Link cannot be empty.`,
+            errorMessage: this.props.intl.formatMessage(messages.linkCantEmpty),
             required: true,
             fluid: true,
             disabled: (this.props.location.query.type === 'embedded'),
@@ -763,7 +763,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
         cols: [
           {
             id: "is-internal-url",
-            label: 'Is this internal url',
+            label: this.props.intl.formatMessage(messages.isInternalUrl),
             standalone: true,
             labelStyle: {
               backgroundColor: "white",

package/v2Containers/WeChat/MapTemplates/messages.js

@@ -7,67 +7,99 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   "header": {
-    id: 'app.containers.WeChat.header',
+    id: 'creatives.containersV2.WeChat.header',
     defaultMessage: 'WeChat',
   },
   'Template mapping': {
-    id: 'app.containers.WeChat.templateMapping',
+    id: 'creatives.containersV2.WeChat.templateMapping',
     defaultMessage: 'Template mapping',
   },
   'Discard': {
-    id: 'app.containers.WeChat.discard',
+    id: 'creatives.containersV2.WeChat.discard',
     defaultMessage: 'Discard',
   },
   'Cancel': {
-    id: 'app.containers.WeChat.cancel',
+    id: 'creatives.containersV2.WeChat.cancel',
     defaultMessage: 'Cancel',
   },
   'Save': {
-    id: 'app.containers.WeChat.save',
+    id: 'creatives.containersV2.WeChat.save',
     defaultMessage: 'Save',
   },
   'Account Id': {
-    id: 'app.containers.WeChat.accountId',
+    id: 'creatives.containersV2.WeChat.accountId',
     defaultMessage: 'Account id',
   },
   'Select Wechat Account': {
-    id: 'app.containers.WeChat.selectWechatAccount',
+    id: 'creatives.containersV2.WeChat.selectWechatAccount',
     defaultMessage: 'Select wechat account',
   },
   'Template': {
-    id: 'app.containers.WeChat.template',
+    id: 'creatives.containersV2.WeChat.template',
     defaultMessage: 'Template',
   },
   'Select Wechat Template': {
-    id: 'app.containers.WeChat.selectWechatTemplate',
+    id: 'creatives.containersV2.WeChat.selectWechatTemplate',
     defaultMessage: 'Select wechat template',
   },
   'Link': {
-    id: 'app.containers.WeChat.link',
+    id: 'creatives.containersV2.WeChat.link',
     defaultMessage: 'Link',
   },
-  'Is this internal url': {
-    id: 'app.containers.WeChat.isInternalUrl',
+  'isInternalUrl': {
+    id: 'creatives.containersV2.WeChat.isInternalUrl',
     defaultMessage: 'Is this internal url',
   },
   "Tags": {
-    id: 'app.containers.WeChat.tagsLabel',
+    id: 'creatives.containersV2.WeChat.tagsLabel',
     defaultMessage: "Tags",
   },
   "gettingTemplateData": {
-    id: 'app.containers.WeChat.gettingTemplateData',
+    id: 'creatives.containersV2.WeChat.gettingTemplateData',
     defaultMessage: "Getting template data..",
   },
   "wechatEditSuccess": {
-    id: 'app.containers.WeChat.wechatEditSuccess',
+    id: 'creatives.containersV2.WeChat.wechatEditSuccess',
     defaultMessage: "WeChat template unmapped successfully",
   },
   "wechatCreateSuccess": {
-    id: 'app.containers.WeChat.wechatCreateSuccess',
+    id: 'creatives.containersV2.WeChat.wechatCreateSuccess',
     defaultMessage: "WeChat template mapped successfully",
   },
   "somethingWentWrong": {
-    id: 'app.containers.WeChat.somethingWentWrong',
+    id: 'creatives.containersV2.WeChat.somethingWentWrong',
     defaultMessage: "Something went wrong!!",
   },
+  "alertMessage": {
+    id: 'creatives.containersV2.WeChat.alertMessage',
+    defaultMessage: "Alert",
+  },
+  "goBackTemporaryChangesLost": {
+    id: 'creatives.containersV2.WeChat.goBackTemporaryChangesLost',
+    defaultMessage: "Do you really want to go back? All your temporary changes will be lost!",
+  },
+  "hasValidContent": {
+    id: 'creatives.containersV2.WeChat.hasValidContent',
+    defaultMessage: "has valid content.",
+  },
+  "linkCantEmpty": {
+    id: 'creatives.containersV2.WeChat.linkCantEmpty',
+    defaultMessage: "has valid content.",
+  },
+  "select": {
+    id: 'creatives.containers.WeChat.select',
+    defaultMessage: 'Select',
+  },
+  "newWechat": {
+    id: 'creatives.containers.WeChat.newWechat',
+    defaultMessage: 'New wechat',
+  },
+  "linkErrorMessage": {
+    id: 'creatives.containers.WeChat.linkErrorMessage',
+    defaultMessage: 'Link cannot be empty.',
+  },
+  "hasInvalidContent": {
+    id: 'creatives.containers.WeChat.hasInvalidContent',
+    defaultMessage: 'has invalid content.',
+  },
 });

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

@@ -723,13 +723,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                     <i className="material-icons hover-icons">arrow_downward</i>
                   </div>
                   <div id={id} onClick={(e) => this.viewContent(e, id)} style={{ 'padding-left': '190px' }}>
-                    <i className="material-icons hover-icons">visibility</i>
+                    <i className="material-icons hover-icons">{this.props.intl.formatMessage(messages.visibility)}</i>
                   </div>
                 </div>
                 :
                 <div className="richmedia-icons">
                   <div id={id} onClick={(e) => this.viewContent(e, id)} style={{ 'padding-left': '214px' }}>
-                    <i className="material-icons hover-icons">visibility</i>
+                    <i className="material-icons hover-icons">{this.props.intl.formatMessage(messages.visibility)}</i>
                   </div>
                 </div>
                 }
@@ -766,19 +766,19 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 {id !== (this.state.totalContentBlocks - 1 ) ?
                   <div style={{'display': 'inline-flex', 'padding-left': '142px'}}>
                     <div id={id} onClick={(e) => this.viewContent(e, id)}>
-                      <i className="material-icons hover-icons">visibility</i>
+                      <i className="material-icons hover-icons">{this.props.intl.formatMessage(messages.visibility)}</i>
                     </div>
                     <div id={id} onClick={(e) => this.deleteContent(e, id)} >
-                      <i className="material-icons hover-icons">delete</i>
+                      <i className="material-icons hover-icons">{this.props.intl.formatMessage(messages.delete)}</i>
                     </div>
                   </div>
                   :
                   <div style={{'display': 'inline-flex', 'padding-left': '166px'}}>
                     <div id={id} onClick={(e) => this.viewContent(e, id)}>
-                      <i className="material-icons hover-icons">visibility</i>
+                      <i className="material-icons hover-icons">{this.props.intl.formatMessage(messages.visibility)}</i>
                     </div>
                     <div id={id} onClick={(e) => this.deleteContent(e, id)} >
-                      <i className="material-icons hover-icons">delete</i>
+                      <i className="material-icons hover-icons">{this.props.intl.formatMessage(messages.delete)}</i>
                     </div>
                   </div>
                 }