@capillarytech/creatives-library 3.0.31 → 3.0.32

package/v2Components/NewCallTask/messages.js

@@ -7,23 +7,23 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   callTaskTitle: {
-    id: 'app.components.NewCallTask.callTaskTitle',
+    id: 'creatives.componentsV2.NewCallTask.callTaskTitle',
     defaultMessage: 'Call Task title',
   },
   messageHeader: {
-    id: 'app.components.NewCallTask.messageHeader',
+    id: 'creatives.componentsV2.NewCallTask.messageHeader',
     defaultMessage: 'Message',
   },
   description: {
-    id: 'app.components.NewCallTask.description',
+    id: 'creatives.componentsV2.NewCallTask.description',
     defaultMessage: 'Description',
   },
   done: {
-    id: 'app.components.NewCallTask.done',
+    id: 'creatives.componentsV2.NewCallTask.done',
     defaultMessage: 'Done',
   },
   personalisationTags: {
-    id: 'app.components.NewCallTask.personalisationTags',
+    id: 'creatives.componentsV2.NewCallTask.personalisationTags',
     defaultMessage: 'Add Labels',
   },
 });

package/v2Components/PreviewSideBar/messages.js

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

package/v2Components/SmsTest/index.js

@@ -9,6 +9,8 @@ import React from 'react';
 
 // import { FormattedMessage } from 'react-intl';
 // import messages from './messages';
+import { injectIntl, intlShape } from 'react-intl';
+import messages from './messages';
 import FormBuilder from '../FormBuilder';
 
 class SmsTest extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -46,7 +48,7 @@ class SmsTest extends React.Component { // eslint-disable-line react/prefer-stat
           metaType: "text",
           datatype: "string",
           required: true,
-          placeholder: "Please input template name.",
+          placeholder: this.props.intl.formatMessage(messages.inputTemplateName),
           fluid: true,
           styling: "semantic",
           order: 1,
@@ -62,7 +64,7 @@ class SmsTest extends React.Component { // eslint-disable-line react/prefer-stat
           metaType: "text",
           datatype: "string",
           required: true,
-          placeholder: "Please input sms template content.",
+          placeholder: this.props.intl.formatMessage(messages.inputSmsTemplate),
           fluid: false,
           styling: "custom",
           order: 2,
@@ -109,7 +111,7 @@ class SmsTest extends React.Component { // eslint-disable-line react/prefer-stat
 }
 
 SmsTest.propTypes = {
-
+  intl: intlShape.isRequired,
 };
 
-export default SmsTest;
+export default injectIntl(SmsTest);

package/v2Components/SmsTest/messages.js

@@ -7,7 +7,15 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'app.components.SmsTest.header',
+    id: 'creatives.componentsV2.SmsTest.header',
     defaultMessage: 'This is the SmsTest component !',
   },
+  inputTemplateName: {
+    id: 'creatives.componentsV2.SmsTest.inputTemplateName',
+    defaultMessage: 'Please input template name.',
+  },
+  inputSmsTemplate: {
+    id: 'creatives.componentsV2.SmsTest.inputSmsTemplate',
+    defaultMessage: 'Please input sms template content.',
+  },
 });

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js

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

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -350,3 +350,11 @@
   background-color: #333333;
   margin-right: 4px;
 }
+
+.character-count-col{
+  margin-top: 8px;
+  margin-left: 40px;
+  .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} from 'react-intl';
+import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 // import styled from 'styled-components';
 import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
 import './_templatePreview.scss';
@@ -59,29 +59,47 @@ 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 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>
                 </div>
+                {!this.props.showCount && <div>
+                  <CapColumn className="character-count-col" span={20}>
+                    {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="Sms icon" />}
+                {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)} />}
                 <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>
@@ -90,7 +108,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="Preview is being generated"/>
+              <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
                 <div className={`${this.props.device}-push-message-Container`}>
                   {this.props.device === "android" ?
@@ -117,7 +135,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">close</i>
+                        <span className="app-icon"></span>{content.appName ? content.appName : "App name"} <i className="material-icons">{this.props.intl.formatMessage(messages.close)}</i>
                       </div>
                       {content.bodyImage && <div className="body-image">
                         <img src={content.bodyImage} alt=""/>
@@ -139,7 +157,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="Preview is being generated"/>
+              <img className="preview-image" src={wechatBody} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
               <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' }}>
@@ -170,6 +188,7 @@ TemplatePreview.propTypes = {
   device: PropTypes.string,
   unicodeEnabled: PropTypes.bool,
   showCount: PropTypes.bool,
+  intl: intlShape.isRequired,
 };
 
 export default (injectIntl(TemplatePreview));

package/v2Components/TemplatePreview/messages.js

@@ -7,31 +7,47 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   previewGenerationMessage: {
-    id: 'app.components.TemplatePreview.previewGenerationMessage',
+    id: 'creatives.componentsV2.TemplatePreview.previewGenerationMessage',
     defaultMessage: "Preview is being generated",
   },
   sms: {
-    id: 'app.components.TemplatePreview.sms',
+    id: 'creatives.componentsV2.TemplatePreview.sms',
     defaultMessage: "SMS",
   },
   charactersPerSms: {
-    id: 'app.components.TemplatePreview.charactersPerSms',
+    id: 'creatives.componentsV2.TemplatePreview.charactersPerSms',
     defaultMessage: "SMS chars",
   },
   charactersTotal: {
-    id: 'app.components.TemplatePreview.charactersTotal',
+    id: 'creatives.componentsV2.TemplatePreview.charactersTotal',
     defaultMessage: "{smsCount} SMS ({charCount} characters)",
   },
+  optoutCharactersTotal: {
+    id: 'app.components.TemplatePreview.optoutCharactersTotal',
+    defaultMessage: "Includes Optout tag ({optoutUrlLength} characters)",
+  },
   smsFormatType: {
-    id: 'app.components.TemplatePreview.smsFormatType',
+    id: 'creatives.componentsV2.TemplatePreview.smsFormatType',
     defaultMessage: 'Message has unicode characters',
   },
   lastModified: {
-    id: 'app.components.PreviewSideBar.lastModified',
+    id: 'creatives.componentsV2.PreviewSideBar.lastModified',
     defaultMessage: 'Last modified on',
   },
   uploadedBy: {
-    id: 'app.components.PreviewSideBar.uploadedBy',
+    id: 'creatives.componentsV2.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: 'app.components.Toastr.header',
+    id: 'creatives.componentsV2.Toastr.header',
     defaultMessage: 'This is the Toastr component !',
   },
 });

package/v2Components/ToastrMessage/index.js

@@ -7,8 +7,10 @@
 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;
@@ -84,7 +86,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)}>close</StyleIcon>
+            <StyleIcon className="material-icons" onClick={() => this.closeMessagePopup(this.props.messageId)}><FormattedMessage {...messages.close} /></StyleIcon>
           </MessageHeader>
           <MessageContent>
             {this.props.text}
@@ -102,7 +104,6 @@ ToastrMessage.propTypes = {
   text: PropTypes.string,
   type: PropTypes.string,
   handleMessageClose: PropTypes.func,
-  hideProgressBar: PropTypes.bool,
 };
 
 export default ToastrMessage;

package/v2Components/ToastrMessage/messages.js

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

package/v2Components/TopBar/messages.js

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

package/v2Containers/App/constants.js

@@ -1,3 +1,14 @@
+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: 'app.containers.Assets.Gallery.uploadedAt',
+    id: 'creatives.containersV2.Assets.Gallery.uploadedAt',
     defaultMessage: 'Uploaded at ',
   },
   uploadedOn: {
-    id: 'app.containers.Assets.Gallery.uploadedOn',
+    id: 'creatives.containersV2.Assets.Gallery.uploadedOn',
     defaultMessage: 'Uploaded on ',
   },
   uploadedBy: {
-    id: 'app.containers.Assets.Gallery.uploadedBy',
+    id: 'creatives.containersV2.Assets.Gallery.uploadedBy',
     defaultMessage: 'Uploaded by ',
   },
   upload: {
-    id: 'app.containers.Assets.Gallery.upload',
+    id: 'creatives.containersV2.Assets.Gallery.upload',
     defaultMessage: 'Upload image',
   },
   addImages: {
-    id: `app.containers.Assets.Gallery.addImages`,
+    id: `creatives.containersV2.Assets.Gallery.addImages`,
     defaultMessage: 'Add images',
   },
   imagePreview: {
-    id: 'app.containers.Assets.Gallery.imagePreview',
+    id: 'creatives.containersV2.Assets.Gallery.imagePreview',
     defaultMessage: 'Image preview',
   },
   size: {
-    id: 'app.containers.Assets.Gallery.size',
+    id: 'creatives.containersV2.Assets.Gallery.size',
     defaultMessage: 'Size',
   },
   dimensions: {
-    id: 'app.containers.Assets.Gallery.dimensions',
+    id: 'creatives.containersV2.Assets.Gallery.dimensions',
     defaultMessage: 'Dimensions',
   },
   gallery: {
-    id: 'app.containers.Assets.Gallery.gallery',
+    id: 'creatives.containersV2.Assets.Gallery.gallery',
     defaultMessage: 'Gallery',
   },
   backToGallery: {
-    id: 'app.containers.Assets.Gallery.backToGallery',
+    id: 'creatives.containersV2.Assets.Gallery.backToGallery',
     defaultMessage: 'Back to image gallery',
   },
   mostRecent: {
-    id: 'app.containers.Assets.Gallery.mostRecent',
+    id: 'creatives.containersV2.Assets.Gallery.mostRecent',
     defaultMessage: 'Most recent',
   },
   alphabetically: {
-    id: 'app.containers.Assets.Gallery.alphabetically',
+    id: 'creatives.containersV2.Assets.Gallery.alphabetically',
     defaultMessage: 'Alphabetically',
   },
   sortby: {
-    id: 'app.containers.Assets.Gallery.sortby',
+    id: 'creatives.containersV2.Assets.Gallery.sortby',
     defaultMessage: 'Sort by',
   },
   delete: {
-    id: 'app.containers.Assets.Gallery.delete',
+    id: 'creatives.containersV2.Assets.Gallery.delete',
     defaultMessage: 'Delete',
   },
   search: {
-    id: 'app.containers.Assets.Gallery.search',
+    id: 'creatives.containersV2.Assets.Gallery.search',
     defaultMessage: 'Search',
   },
   select: {
-    id: 'app.containers.Assets.Gallery.select',
+    id: 'creatives.containersV2.Assets.Gallery.select',
     defaultMessage: 'Select',
   },
   preview: {
-    id: 'app.containers.Assets.Gallery.preview',
+    id: 'creatives.containersV2.Assets.Gallery.preview',
     defaultMessage: 'Preview',
   },
   assetUploadSuccess: {
-    id: 'app.containers.Assets.Gallery.assetUploadSuccess',
+    id: 'creatives.containersV2.Assets.Gallery.assetUploadSuccess',
     defaultMessage: 'Image uploaded successfully',
   },
   assetUploadFailed: {
-    id: 'app.containers.Assets.Gallery.assetUploadFailed',
+    id: 'creatives.containersV2.Assets.Gallery.assetUploadFailed',
     defaultMessage: 'Image uploaded failed',
   },
   assetDeleteSuccess: {
-    id: 'app.containers.Assets.Gallery.assetDeleteSuccess',
+    id: 'creatives.containersV2.Assets.Gallery.assetDeleteSuccess',
     defaultMessage: 'Image deleted successfully.',
   },
   assetDeleteFailed: {
-    id: 'app.containers.Assets.Gallery.assetDeleteFailed',
+    id: 'creatives.containersV2.Assets.Gallery.assetDeleteFailed',
     defaultMessage: 'Image deletion failed.',
   },
   noAssetMessage: {
-    id: 'app.containers.Assets.Gallery.noAssetMessage',
+    id: 'creatives.containersV2.Assets.Gallery.noAssetMessage',
     defaultMessage: 'No image is uploaded',
   },
   lastUpdated: {
-    id: 'app.containers.Assets.Gallery.lastUpdated',
+    id: 'creatives.containersV2.Assets.Gallery.lastUpdated',
     defaultMessage: 'Last update {on} by {by}',
   },
   noTemplatesFound: {
-    id: `app.containers.Assets.Gallery.noTemplatesFound`,
+    id: `creatives.containersV2.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: 'app.containers.CallTask.addNewCallTask',
+    id: 'creatives.containersV2.CallTask.addNewCallTask',
     defaultMessage: 'Add new call task',
   },
   newMessage: {
-    id: 'app.containers.CallTask.newMessage',
+    id: 'creatives.containersV2.CallTask.newMessage',
     defaultMessage: 'New message',
   },
   callTaskInfo: {
-    id: 'app.containers.CallTask.callTaskInfo',
+    id: 'creatives.containersV2.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: `app.containers.CallTask.callTaskTitleIllustartion`,
+    id: `creatives.containersV2.CallTask.callTaskTitleIllustartion`,
     defaultMessage: 'Create a Call Task {templateText}',
   },
   newCallTaskTemplate: {
-    id: `app.containers.CallTask.newCallTaskTemplate`,
+    id: `creatives.containersV2.CallTask.newCallTaskTemplate`,
     defaultMessage: 'New Call Task {templateText}',
   },
   template: {
-    id: `app.containers.CallTask.template`,
+    id: `creatives.containersV2.CallTask.template`,
     defaultMessage: 'template',
   },
 });

package/v2Containers/Cap/index.js

@@ -2,14 +2,15 @@ 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 } from 'react-intl';
-import {CapNotification} from '@capillarytech/cap-ui-library';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import messages from './messages';
 import { makeSelectAuthenticated, makeSelectUser } from './selectors';
 import * as actions from './actions';
 import * as locationActions from '../LanguageProvider/actions';
@@ -164,9 +165,9 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
       <CapWrapper>
         <Helmet
           titleTemplate="Capillary - %s"
-          defaultTitle="App Name"
+          defaultTitle={<FormattedMessage {...messages.appName} />}
           meta={[
-            { name: 'description', content: 'App Name' },
+            { name: 'description', content: <FormattedMessage {...messages.appName} /> },
           ]}
         />
         <div className="wrapper">