@capillarytech/creatives-library 3.0.35 → 3.1.0

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -5,6 +5,8 @@
     background: white;
     width: 40%;
     text-align: left;
+    height: 300px;
+    overflow: scroll;
 }
 .wechatMsgContainerOutbound{
     position: absolute;

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 /**
 *
 * WechatRichmediaTemplatePreview
@@ -9,7 +10,6 @@ import PropTypes from 'prop-types';
 import { CapRow, CapColumn, CapButton } from '@capillarytech/cap-ui-library/';
 import { FormattedMessage } from 'react-intl';
 import _ from 'lodash';
-import SlideBox from '../../SlideBox';
 import './_wechatRichmediaTemplatePrev.scss';
 import messages from './messages';
 const wechatBody = require('./../assets/images/WECHAT_5x.png');
@@ -90,43 +90,33 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
   }
   render() {
     return (
-      this.props.showSlidebox ?
-        <SlideBox
-          show={this.props.show}
-          handleClose={this.props.closeSlideBox}
-          header={this.props.templateName}
-          width={50}
-          content={
-            <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
-              <div className="shell align-center" id="sms-preview">
-                <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
-                <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
-                  <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>{this.preparePreviewData(this.props.content)}
-                  </div>
-                </div>
+      this.props.contentForSlideBox ?
+        <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
+          <div className="shell align-center" id="sms-preview">
+            <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
+            <div className={this.props.type === 'embedded' ? "wechatMsgContainerOutbound" : "wechatMsgContainer"}>
+              <div className={this.props.type === 'embedded' ? "overflow-handle-preview-outbound" : "overflow-handle-preview"}>
+                {this.preparePreviewData(this.props.content)}
               </div>
-              {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
             </div>
-          }
-        />
+          </div>
+          {this.props.showEdit ? <CapButton onClick={(e) => this.goToEdit(e, this.props.path)} className="preview-buttons" type="primary">{this.props.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} /> }</CapButton> : ""}
+        </div>
         :
-            <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
-              <div className="shell align-center" id="sms-preview">
-                <div className="wechatMsgContainerCardLayout">
-                  <div>{this.prepareCardLayoutPreviewData(this.props.content)}
-                  </div>
-                </div>
+        <div className={`preview-container ${this.props.type === 'embedded' ? 'embedded-preview' : ''}`}>
+          <div className="shell align-center" id="sms-preview">
+            <div className="wechatMsgContainerCardLayout">
+              <div>{this.prepareCardLayoutPreviewData(this.props.content)}
               </div>
             </div>
+          </div>
+        </div>
     );
   }
 }
 
 WechatRichmediaTemplatePreview.propTypes = {
-  showSlidebox: PropTypes.bool,
-  show: PropTypes.bool,
-  closeSlideBox: PropTypes.function,
-  templateName: PropTypes.string,
+  contentForSlideBox: PropTypes.bool,
   type: PropTypes.string,
   content: PropTypes.array,
   onEditClick: PropTypes.func,

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js

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

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -350,12 +350,3 @@
   background-color: #333333;
   margin-right: 4px;
 }
-
-.character-count-col{
-  margin-top: 8px;
-  text-align: center;
-  width: 100%;
-  .optout-tag-heading{
-    font-size: 12px;
-  }
-}

package/v2Components/TemplatePreview/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import _ from 'lodash';
-import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
+import { injectIntl, FormattedMessage} from 'react-intl';
 // import styled from 'styled-components';
 import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
 import './_templatePreview.scss';
@@ -59,47 +59,29 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
               <FormattedMessage {...messages.smsFormatType}/>
             }
           </CapHeading>}
-          {smsDetails.optoutUrlPresent && <CapHeading type="h6">
-            <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
-          </CapHeading>}
         </CapColumn>}
         <CapColumn span={this.props.showCount ? 8 : 24}>
           <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
             { channel && channel.toLowerCase() === 'sms' &&
-              <div>
-                <div className="shell align-center" id="sms-preview">
-                  <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
-                  <div className="msgContainer sms">
-                    <img className="sms-icon" src={smsIcon} alt="Sms icon" />
-                    <div className={"message-pop sms"}>
-                      {content && content.length && content.map((msg, index) =>
-                        <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
-                          {msg}
-                        </CapColumn>)
-                  }
-                    </div>
+              <div className="shell align-center" id="sms-preview">
+                <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
+                <div className="msgContainer sms">
+                  <img className="sms-icon" src={smsIcon} alt="Sms icon" />
+                  <div className={"message-pop sms"}>
+                    {content && content.length && content.map((msg, index) =>
+                      <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
+                        {msg}
+                      </CapColumn>)
+                }
                   </div>
                 </div>
-                {!this.props.showCount && <div>
-                  <CapColumn className="character-count-col" span={22}>
-                    {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
-                      <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
-                      {smsDetails.unicode &&
-                        <FormattedMessage {...messages.smsFormatType}/>
-                      }
-                    </CapHeading>}
-                    {smsDetails.optoutUrlPresent && <CapHeading type="h6" className="optout-tag-heading">
-                      <FormattedMessage {...messages.optoutCharactersTotal} values={{optoutUrlLength: smsDetails.optouturlLength}} />
-                    </CapHeading>}
-                  </CapColumn>
-                </div>}
               </div>
-            }
+          }
             {channel && channel.toLowerCase() === 'wechat' ?
             ( <div className="shell align-center" id="sms-preview">
               <img className="preview-image" src={channel.toLowerCase() === 'wechat' ? wechatBody : smsBody} alt="Preview is being generated"/>
               <div className="msgContainer">
-                {this.props.channel.toLowerCase() === 'wechat' ? <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div> : <img className="sms-icon" src={smsIcon} alt={this.props.intl.formatMessage(messages.smsIcon)} />}
+                {this.props.channel.toLowerCase() === 'wechat' ? <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div> : <img className="sms-icon" src={smsIcon} alt="Sms icon" />}
                 <div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
                 </div>
               </div>
@@ -108,7 +90,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
         }
             { channel && (channel.toLowerCase() === 'mobilepush') &&
             (<div className="shell align-center" id="mobilepush-preview">
-              <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt="Preview is being generated"/>
               {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
                 <div className={`${this.props.device}-push-message-Container`}>
                   {this.props.device === "android" ?
@@ -135,7 +117,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
                     :
                     <div className="message-pop align-left">
                       <div className="app-name">
-                        <span className="app-icon"></span>{content.appName ? content.appName : "App name"} <i className="material-icons">{this.props.intl.formatMessage(messages.close)}</i>
+                        <span className="app-icon"></span>{content.appName ? content.appName : "App name"} <i className="material-icons">close</i>
                       </div>
                       {content.bodyImage && <div className="body-image">
                         <img src={content.bodyImage} alt=""/>
@@ -157,7 +139,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
             {
           channel && channel.toLowerCase() === 'line' ? (
             <div className="shell align-center" id="sms-preview">
-              <img className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
+              <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
               <div className="msgContainer">
                 <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div>
                 <div className="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
@@ -188,7 +170,6 @@ TemplatePreview.propTypes = {
   device: PropTypes.string,
   unicodeEnabled: PropTypes.bool,
   showCount: PropTypes.bool,
-  intl: intlShape.isRequired,
 };
 
 export default (injectIntl(TemplatePreview));

package/v2Components/TemplatePreview/messages.js

@@ -7,47 +7,31 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   previewGenerationMessage: {
-    id: 'creatives.componentsV2.TemplatePreview.previewGenerationMessage',
+    id: 'app.components.TemplatePreview.previewGenerationMessage',
     defaultMessage: "Preview is being generated",
   },
   sms: {
-    id: 'creatives.componentsV2.TemplatePreview.sms',
+    id: 'app.components.TemplatePreview.sms',
     defaultMessage: "SMS",
   },
   charactersPerSms: {
-    id: 'creatives.componentsV2.TemplatePreview.charactersPerSms',
+    id: 'app.components.TemplatePreview.charactersPerSms',
     defaultMessage: "SMS chars",
   },
   charactersTotal: {
-    id: 'creatives.componentsV2.TemplatePreview.charactersTotal',
+    id: 'app.components.TemplatePreview.charactersTotal',
     defaultMessage: "{smsCount} SMS ({charCount} characters)",
   },
-  optoutCharactersTotal: {
-    id: 'app.components.TemplatePreview.optoutCharactersTotal',
-    defaultMessage: "Includes Optout tag ({optoutUrlLength} characters)",
-  },
   smsFormatType: {
-    id: 'creatives.componentsV2.TemplatePreview.smsFormatType',
+    id: 'app.components.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',
   },
   lastModified: {
-    id: 'creatives.componentsV2.PreviewSideBar.lastModified',
+    id: 'app.components.PreviewSideBar.lastModified',
     defaultMessage: 'Last modified on',
   },
   uploadedBy: {
-    id: 'creatives.componentsV2.PreviewSideBar.uploadedBy',
+    id: 'app.components.PreviewSideBar.uploadedBy',
     defaultMessage: 'Last modified by',
   },
-  previewGenerated: {
-    id: 'creatives.componentsV2.TemplatePreview.previewGenerated',
-    defaultMessage: 'Preview is being generated',
-  },
-  close: {
-    id: 'creatives.componentsV2.TemplatePreview.close',
-    defaultMessage: 'close',
-  },
-  smsIcon: {
-    id: 'creatives.componentsV2.TemplatePreview.smsIcon',
-    defaultMessage: 'Sms Icon',
-  },
 });

package/v2Components/Toastr/messages.js

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

package/v2Components/ToastrMessage/index.js

@@ -7,10 +7,8 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 import { messageTypeConfig } from '../../config/toastr';
-import messages from './messages';
 
 const StyledMessageWrapper = styled.div`
   background: #f9f9fa;
@@ -86,7 +84,7 @@ class ToastrMessage extends React.Component { // eslint-disable-line react/prefe
         <div style={{ padding: `${16}px` }}>
           <MessageHeader>
             { this.props.title ? <span style={{ fontSize: `${20}px` }}>{this.props.title}</span> : '' }
-            <StyleIcon className="material-icons" onClick={() => this.closeMessagePopup(this.props.messageId)}><FormattedMessage {...messages.close} /></StyleIcon>
+            <StyleIcon className="material-icons" onClick={() => this.closeMessagePopup(this.props.messageId)}>close</StyleIcon>
           </MessageHeader>
           <MessageContent>
             {this.props.text}
@@ -104,6 +102,7 @@ ToastrMessage.propTypes = {
   text: PropTypes.string,
   type: PropTypes.string,
   handleMessageClose: PropTypes.func,
+  hideProgressBar: PropTypes.bool,
 };
 
 export default ToastrMessage;

package/v2Components/ToastrMessage/messages.js

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

package/v2Components/TopBar/_topbar.scss

@@ -0,0 +1,46 @@
+.ui.navbar.menu {
+  height: 40px !important;
+}
+.ui.menu.navbar .item>img.logo{
+  height: 27px !important;
+  padding-left: 0!important;
+  margin: 0 auto;
+  max-width: 200px;
+}
+.ui.menu.navbar .ui.selection.dropdown{
+  height: 40px !important;
+}
+
+.ui.menu .ui.dropdown .menu>.selected.item {
+  background: #151821;
+}
+.org-list-drp-dwn .menu > .item{
+  height: 40px !important;
+}
+.ui.menu.navbar .ui.dropdown .menu>.item{
+  height: 40px !important;
+}
+
+.ui.search.selection.dropdown>input.search{
+  padding-left: 12px !important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+}
+
+.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
+  padding-right: 4px;
+}
+
+.ui.menu .item {
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+}
+
+.ui.secondary.vertical.menu>.item {
+  margin-bottom: 0 !important;
+  padding: 8px 16px !important;
+}
+
+.ui.menu.navbar .item.dropdownItem {
+  padding: 0px !important;
+}

package/v2Components/TopBar/messages.js

@@ -7,31 +7,31 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   profile: {
-    id: 'creatives.componentsV2.TopBar.profile',
+    id: 'reon.components.TopBar.profile',
     defaultMessage: 'Profile',
   },
   settings: {
-    id: 'creatives.componentsV2.TopBar.settings',
+    id: 'reon.components.TopBar.settings',
     defaultMessage: 'Settings',
   },
   logout: {
-    id: 'creatives.componentsV2.TopBar.logout',
+    id: 'reon.components.TopBar.logout',
     defaultMessage: 'Logout',
   },
   dropdownMessage: {
-    id: 'creatives.componentsV2.TopBar.brand.dropdown',
+    id: 'reon.components.TopBar.brand.dropdown',
     defaultMessage: 'Select brand',
   },
   hi: {
-    id: 'creatives.componentsV2.TopBar.brand.hi',
+    id: 'app.components.TopBar.brand.dropdown',
     defaultMessage: 'Hi',
   },
   selectOrganization: {
-    id: 'creatives.componentsV2.TopBar.brand.selectOrganization',
+    id: 'app.components.TopBar.brand.selectOrganization',
     defaultMessage: 'Select organization',
   },
   selectProduct: {
-    id: 'creatives.componentsV2.TopBar.brand.selectProduct',
+    id: 'app.components.TopBar.brand.selectProduct',
     defaultMessage: 'Select product',
   },
 });

package/v2Containers/App/constants.js

@@ -1,14 +1,3 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import globalMessages from '../Cap/messages';
-
 export const GET_SIDEBAR_REQUEST = 'app/App/GET_SIDEBAR_REQUEST';
 export const GET_SIDEBAR_SUCCESS = 'app/App/GET_SIDEBAR_SUCCESS';
 export const GET_SIDEBAR_FAILURE = 'app/App/GET_SIDEBAR_FAILURE';
-
-export const getTopbarMenuDataValue = () => ([
-      { label: <FormattedMessage {...globalMessages.campaigns} />, link: '/campaigns/ui/list', key: 'campaigns' },
-      { label: <FormattedMessage {...globalMessages.audience} />, link: '/audience-manager/list', key: 'audience' },
-      { label: <FormattedMessage {...globalMessages.incentive} />, link: '/coupons/ui/', key: 'incentive' },
-      { label: <FormattedMessage {...globalMessages.creatives} />, link: '/creatives/ui/v2', key: 'creatives' },
-]);

package/v2Containers/Assets/Gallery/messages.js

@@ -7,99 +7,99 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   uploadedAt: {
-    id: 'creatives.containersV2.Assets.Gallery.uploadedAt',
+    id: 'app.containers.Assets.Gallery.uploadedAt',
     defaultMessage: 'Uploaded at ',
   },
   uploadedOn: {
-    id: 'creatives.containersV2.Assets.Gallery.uploadedOn',
+    id: 'app.containers.Assets.Gallery.uploadedOn',
     defaultMessage: 'Uploaded on ',
   },
   uploadedBy: {
-    id: 'creatives.containersV2.Assets.Gallery.uploadedBy',
+    id: 'app.containers.Assets.Gallery.uploadedBy',
     defaultMessage: 'Uploaded by ',
   },
   upload: {
-    id: 'creatives.containersV2.Assets.Gallery.upload',
+    id: 'app.containers.Assets.Gallery.upload',
     defaultMessage: 'Upload image',
   },
   addImages: {
-    id: `creatives.containersV2.Assets.Gallery.addImages`,
+    id: `app.containers.Assets.Gallery.addImages`,
     defaultMessage: 'Add images',
   },
   imagePreview: {
-    id: 'creatives.containersV2.Assets.Gallery.imagePreview',
+    id: 'app.containers.Assets.Gallery.imagePreview',
     defaultMessage: 'Image preview',
   },
   size: {
-    id: 'creatives.containersV2.Assets.Gallery.size',
+    id: 'app.containers.Assets.Gallery.size',
     defaultMessage: 'Size',
   },
   dimensions: {
-    id: 'creatives.containersV2.Assets.Gallery.dimensions',
+    id: 'app.containers.Assets.Gallery.dimensions',
     defaultMessage: 'Dimensions',
   },
   gallery: {
-    id: 'creatives.containersV2.Assets.Gallery.gallery',
+    id: 'app.containers.Assets.Gallery.gallery',
     defaultMessage: 'Gallery',
   },
   backToGallery: {
-    id: 'creatives.containersV2.Assets.Gallery.backToGallery',
+    id: 'app.containers.Assets.Gallery.backToGallery',
     defaultMessage: 'Back to image gallery',
   },
   mostRecent: {
-    id: 'creatives.containersV2.Assets.Gallery.mostRecent',
+    id: 'app.containers.Assets.Gallery.mostRecent',
     defaultMessage: 'Most recent',
   },
   alphabetically: {
-    id: 'creatives.containersV2.Assets.Gallery.alphabetically',
+    id: 'app.containers.Assets.Gallery.alphabetically',
     defaultMessage: 'Alphabetically',
   },
   sortby: {
-    id: 'creatives.containersV2.Assets.Gallery.sortby',
+    id: 'app.containers.Assets.Gallery.sortby',
     defaultMessage: 'Sort by',
   },
   delete: {
-    id: 'creatives.containersV2.Assets.Gallery.delete',
+    id: 'app.containers.Assets.Gallery.delete',
     defaultMessage: 'Delete',
   },
   search: {
-    id: 'creatives.containersV2.Assets.Gallery.search',
+    id: 'app.containers.Assets.Gallery.search',
     defaultMessage: 'Search',
   },
   select: {
-    id: 'creatives.containersV2.Assets.Gallery.select',
+    id: 'app.containers.Assets.Gallery.select',
     defaultMessage: 'Select',
   },
   preview: {
-    id: 'creatives.containersV2.Assets.Gallery.preview',
+    id: 'app.containers.Assets.Gallery.preview',
     defaultMessage: 'Preview',
   },
   assetUploadSuccess: {
-    id: 'creatives.containersV2.Assets.Gallery.assetUploadSuccess',
+    id: 'app.containers.Assets.Gallery.assetUploadSuccess',
     defaultMessage: 'Image uploaded successfully',
   },
   assetUploadFailed: {
-    id: 'creatives.containersV2.Assets.Gallery.assetUploadFailed',
+    id: 'app.containers.Assets.Gallery.assetUploadFailed',
     defaultMessage: 'Image uploaded failed',
   },
   assetDeleteSuccess: {
-    id: 'creatives.containersV2.Assets.Gallery.assetDeleteSuccess',
+    id: 'app.containers.Assets.Gallery.assetDeleteSuccess',
     defaultMessage: 'Image deleted successfully.',
   },
   assetDeleteFailed: {
-    id: 'creatives.containersV2.Assets.Gallery.assetDeleteFailed',
+    id: 'app.containers.Assets.Gallery.assetDeleteFailed',
     defaultMessage: 'Image deletion failed.',
   },
   noAssetMessage: {
-    id: 'creatives.containersV2.Assets.Gallery.noAssetMessage',
+    id: 'app.containers.Assets.Gallery.noAssetMessage',
     defaultMessage: 'No image is uploaded',
   },
   lastUpdated: {
-    id: 'creatives.containersV2.Assets.Gallery.lastUpdated',
+    id: 'app.containers.Assets.Gallery.lastUpdated',
     defaultMessage: 'Last update {on} by {by}',
   },
   noTemplatesFound: {
-    id: `creatives.containersV2.Assets.Gallery.noTemplatesFound`,
+    id: `app.containers.Assets.Gallery.noTemplatesFound`,
     defaultMessage: 'No templates found',
   },
 });

package/v2Containers/CallTask/messages.js

@@ -7,27 +7,27 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   addNewCallTask: {
-    id: 'creatives.containersV2.CallTask.addNewCallTask',
+    id: 'app.containers.CallTask.addNewCallTask',
     defaultMessage: 'Add new call task',
   },
   newMessage: {
-    id: 'creatives.containersV2.CallTask.newMessage',
+    id: 'app.containers.CallTask.newMessage',
     defaultMessage: 'New message',
   },
   callTaskInfo: {
-    id: 'creatives.containersV2.CallTask.callTaskInfo',
+    id: 'app.containers.CallTask.callTaskInfo',
     defaultMessage: 'Call Tasks are message sent to store staff. The messages are displayed on the Point of Sale (POS) machines for store staff to take action.',
   },
   callTaskTitleIllustartion: {
-    id: `creatives.containersV2.CallTask.callTaskTitleIllustartion`,
+    id: `app.containers.CallTask.callTaskTitleIllustartion`,
     defaultMessage: 'Create a Call Task {templateText}',
   },
   newCallTaskTemplate: {
-    id: `creatives.containersV2.CallTask.newCallTaskTemplate`,
+    id: `app.containers.CallTask.newCallTaskTemplate`,
     defaultMessage: 'New Call Task {templateText}',
   },
   template: {
-    id: `creatives.containersV2.CallTask.template`,
+    id: `app.containers.CallTask.template`,
     defaultMessage: 'template',
   },
 });

package/v2Containers/Cap/actions.js

@@ -24,7 +24,6 @@ export function changeOrg(orgID) {
 }
 
 export function addMessageToQueue(message) {
-  console.log('CAP Action ', message);
   return {
     type: types.ADD_MESSAGE,
     message,

package/v2Containers/Cap/index.js

@@ -2,15 +2,14 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
-import {CapNotification} from '@capillarytech/cap-ui-library';
 import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from 'moment';
 // import 'moment/locale/zh-cn';
-import { injectIntl, FormattedMessage } from 'react-intl';
-import messages from './messages';
+import { injectIntl } from 'react-intl';
+import {CapNotification} from '@capillarytech/cap-ui-library';
 import { makeSelectAuthenticated, makeSelectUser } from './selectors';
 import * as actions from './actions';
 import * as locationActions from '../LanguageProvider/actions';
@@ -165,9 +164,9 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       <CapWrapper>
         <Helmet
           titleTemplate="Capillary - %s"
-          defaultTitle={<FormattedMessage {...messages.appName} />}
+          defaultTitle="App Name"
           meta={[
-            { name: 'description', content: <FormattedMessage {...messages.appName} /> },
+            { name: 'description', content: 'App Name' },
           ]}
         />
         <div className="wrapper">
@@ -192,7 +191,11 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
           </div>
         </div>
         {(toastMessages && toastMessages.length > 0) &&
-          toastMessages.map((message) => CapNotification[message.type]({message: message.text, key: message.text, duration: message.duration || 5})
+          toastMessages.map((message) => {
+            //If the messages are not removed then the same messages appear again
+            setTimeout(this.handleRemoveMessage(message.messageIndex), (message.duration || 5) * 1000);
+            return CapNotification[message.type]({message: message.text, key: message.text, duration: message.duration || 5});
+          }
           )
         }
         {this.props.Global.fetching_userdata &&