@capillarytech/creatives-library 2.0.90 → 2.0.92

package/containers/Cap/index.js

@@ -10,7 +10,6 @@ import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
-import isEqual from 'lodash/isEqual';
 import { injectIntl, intlShape } from 'react-intl';
 import TopBar from '../../components/TopBar';
 // import 'moment/locale/en-us';
@@ -151,7 +150,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const { user: userData } = props.Global;
     const userName = userData.attributes.USERNAME;
     const userEmail = userData.attributes.EMAIL;
-    const orgObj = find(userData.proxyOrgList, {orgID: props.Global.orgID});
+    const orgObj = _.find(userData.proxyOrgList, {orgID: props.Global.orgID});
     const gtmData = {
       orgId: props.Global.orgID,
       orgName: orgObj && orgObj.orgName,

package/containers/Email/index.js

@@ -1258,7 +1258,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const formData = _.cloneDeep(this.state.formData);
 
     const tabIndex = this.state.currentTab + 1;
-    const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone() : _.cloneDeep(this.state.schema);
+    const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone(this.state.schema) : _.cloneDeep(this.state.schema);
     const containers = _.cloneDeep(schema.containers.slice());
     let tabKey = "";
     let currentTab = _.cloneDeep(this.state.currentTab);
@@ -2472,18 +2472,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
     return data;
   }
-
   injectEvents = (schema) => {
     const type = this.props.location.query.type;
-    console.log('now injecting events');
-    const temp = schema;
+    let temp = _.cloneDeep(schema);
     temp.standalone.sections = this.injectSections(temp.standalone.sections);
     _.forEach(temp.containers, (container) => {
       let tempContainer = container;
       tempContainer = this.injectContainer(tempContainer);
       return tempContainer;
     });
-    console.log("Lang Test ", this.props.location.query.isLanguageSupport, (this.props.location.query.isLanguageSupport === false));
+
     // if (type !== "embedded" || (type === "embedded" && (this.props.location.query.isLanguageSupport === "false" || (this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === "true")))) {
     const ifLangSupported = this.props.location.query.isLanguageSupport === "true" || type !== "embedded";
     _.forEach(temp.containers, (container) => {
@@ -2518,14 +2516,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
           if (containerInputFieldCol.id === 'add-language-button' && !ifLangSupported) {
             const newContainerInputFieldCol = containerInputFieldCol;
-            newContainerInputFieldCol.colStyle.display = "none";
+            if (newContainerInputFieldCol.colStyle.display !== "none") {
+              newContainerInputFieldCol.colStyle.display = "none";
+            }
             hideLang = true;
           } else if (containerInputFieldCol.id === 'add-language-button') {
             hideLang = true;
           }
           if (containerInputFieldCol.id === "mark-final-version-label") {
             const newContainerInputFieldCol = containerInputFieldCol;
-            newContainerInputFieldCol.colStyle.display = "none";
+            if (newContainerInputFieldCol.colStyle.display !== "none") {
+              newContainerInputFieldCol.colStyle.display = "none";
+            }
           }
           // if (containerInputFieldCol.id === "tab-options-popover") {
           //   const newContainerInputFieldCol = containerInputFieldCol;
@@ -2542,11 +2544,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       }
     });
     //}
-    console.log('final injected schema', schema);
-    this.setState({schema, isSchemaChanged: true}, () => {
-      if (type === 'embedded') {
-        this.removeStandAlone();
-      }
+    temp = type === 'embedded' ? this.removeStandAlone(temp) : temp;
+    this.setState({schema: temp, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1}, () => {
       if (type === 'embedded' && (this.props.route.name === 'EmailView' || (this.props.location.query.module && (this.props.location.query.module.toLowerCase() === 'loyalty' || this.props.location.query.module.toLowerCase() === 'dvs' || this.props.location.query.module.toLowerCase() === 'coupon_expiry' || this.props.location.query.module.toLowerCase() === 'timeline')))) {
         if ((this.props.route.name === "EmailEdit" || this.props.route.name === "EmailCreate") && (this.props.location.query.module === "dvs" || this.props.location.query.module.toLowerCase() === 'coupon_expiry')) {
           return;
@@ -2557,7 +2556,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         parent.postMessage(JSON.stringify(response), '*');
       }
     });
-    return schema;
+    return temp;
   }
 
   handleOnTagsContextChange = (data) => {
@@ -2571,17 +2570,17 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.props.globalActions.fetchSchemaForEntity(query);
   }
 
-  removeStandAlone() {
-    const schema = _.cloneDeep(this.state.schema);
-    delete schema.standalone;
-    schema.standalone = {};
-    schema.standalone.sections = [];
+  removeStandAlone(schema) {
+    const newSchema = _.cloneDeep(schema);
+    delete newSchema.standalone;
+    newSchema.standalone = {};
+    newSchema.standalone.sections = [];
     if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "coupon_expiry" || this.props.location.query.module === "timeline" ||
       this.props.location.query.module === "library")) {
-      schema.standalone.sections.push(_.cloneDeep(this.state.schema.standalone.sections[0]));
+      newSchema.standalone.sections.push(_.cloneDeep(schema.standalone.sections[0]));
     }
 
-    _.forEach(schema.containers, (container) => {
+    _.forEach(newSchema.containers, (container) => {
       const temp = container;
       if (temp.type === 'tabs') {
         // temp.tabBarExtraContent = {};
@@ -2617,8 +2616,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         temp.panes.push(basePane);
       }
     });
-    this.setState({ schema, isSchemaChanged: true });
-    return schema;
+    return newSchema;
   }
 
   startTemplateCreation(data) {

package/containers/Sms/Create/index.js

@@ -196,7 +196,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   onTagSelect(data, currentTab) {
     console.log('parent data tag', data, currentTab);
     const editorId = currentTab > 1 ? `sms-editor${currentTab}` : 'sms-editor';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   }
 
@@ -717,7 +717,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     return false;
   }
 
-  insertAtCursor(field, myValue) {
+  insertAtCursor(field, myValue, currentTab) {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -735,8 +735,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     } else {
       myField.value += myValue;
     }
-    const event = new Event('input', { bubbles: true });
-    myField.dispatchEvent(event);
+    const formData = _.cloneDeep(this.state.formData);
+    formData[currentTab - 1][field.id] = myField.value;
+    this.setState({formData});
   }
 
   startTemplateCreation(data) {

package/containers/Sms/Edit/index.js

@@ -198,7 +198,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   onTagSelect(data, currentTab) {
     console.log('parent data tag', data, currentTab);
     const editorId = currentTab > 1 ? `sms-editor${currentTab}` : 'sms-editor';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   }
 
@@ -1219,7 +1219,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
   }
 
-  insertAtCursor(field, myValue) {
+  insertAtCursor(field, myValue, currentTab) {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -1237,8 +1237,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     } else {
       myField.value += myValue;
     }
-    const event = new Event('input', { bubbles: true });
-    myField.dispatchEvent(event);
+    const formData = _.cloneDeep(this.state.formData);
+    formData[currentTab - 1][field.id] = myField.value;
+    this.setState({formData});
   }
 
   handleFrameTasks = (e) => {

package/containers/WeChat/MapTemplates/index.js

@@ -425,7 +425,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
 
   onTagSelect(data, currentTab, value) {
     const editorId = (value.id).replace('tagList', 'template');
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   }
 
@@ -1018,7 +1018,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     parent.postMessage(JSON.stringify(response), '*');
   }
 
-  insertAtCursor(field, myValue) {
+  insertAtCursor(field, myValue, currentTab) {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -1036,8 +1036,11 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     } else {
       myField.value += myValue;
     }
-    const event = new Event('input', { bubbles: true });
-    myField.dispatchEvent(event);
+    const formData = _.cloneDeep(this.state.formData);
+    if (currentTab) {
+      formData[currentTab - 1][field.id] = myField.value;
+    }
+    this.setState({formData});
   }
 
   internalUrlChecked() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.90",
+  "version": "2.0.92",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,7 +12,7 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
-    "@capillarytech/cap-ui-library": "^1.0.168",
+    "@capillarytech/cap-ui-library": "^1.0.170",
     "antd": "3.19.6",
     "axios": "^0.16.2",
     "babel-polyfill": "6.20.0",

package/v2Components/FormBuilder/index.js

@@ -111,13 +111,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     if (nextProps.startValidation && nextProps.startValidation !== false && this.props.startValidation !== nextProps.startValidation) {
       this.setState({checkValidation: true});
-      const ifValid = this.validateForm(null, null, null, true);
-
-      if (ifValid) {
-        this.saveForm(true);
-      } else {
-        this.props.stopValidation();
-      }
+      this.validateForm(null, null, null, true, () => {
+        //triggering the saveFormData or onSubmit when validation sets isFormValid to TRUE
+        if (this.state.isFormValid) {
+          this.saveForm(true);
+        } else {
+          this.props.stopValidation();
+        }
+      });
     }
     // if (nextProps.saveForm && this.props.saveForm !== nextProps.saveForm) {
     //   this.saveForm(saveForm);
@@ -433,7 +434,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return isPresent;
   }
   /* eslint-disable */
-  validateForm(tags, injectedTags, isSave, showMessages) {
+  validateForm(tags, injectedTags, isSave, showMessages, onValidationComplete) {
     const channel = _.get(this, "props.schema.channel");
     let isValid = true;
     const type = (this.props.location && this.props.location.query.type) ? this.props.location.query.type : 'full';
@@ -441,9 +442,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     let errorData = _.cloneDeep(this.state.errorData);
     const stateFormData = _.cloneDeep(this.state.formData);
     if (channel && channel.toUpperCase() === SMS) {
-      if(!this.errorFieldsPresent(errorData, SMS)){
-        errorData = this.initializeEditErrorData(stateFormData, 1, true);
-      }
       for (let count = 0; count < this.state.tabCount; count += 1) {
         if (_.isEmpty(errorData[count])) {
           return;
@@ -933,7 +931,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       //   errorData['template-name'] = false;
       // }
     }
-    this.setState({isFormValid : isValid, errorData});
+    this.setState({isFormValid : isValid, errorData}, () => {
+      if (onValidationComplete) {
+        onValidationComplete();
+      }
+    });
     
     this.props.onFormValidityChange(isValid, errorData);
     return isValid;

package/v2Components/NavigationBar/index.js

@@ -12,7 +12,7 @@ import { loadItem } from 'services/localStorageApi';
 import { intlShape, injectIntl } from 'react-intl';
 import TopBar from '../TopBar';
 import messages from './messages';
-
+const PRODUCT_MASTERS = 'masters';
 const EMBEDDED = 'embedded';
 
 const CapWrapper = styled.div`
@@ -108,7 +108,7 @@ class NavigationBar extends React.Component {
     const productsList = [];
     if (currentOrgDetails) {
       forEach(currentOrgDetails.module_details, (module) => {
-        if (module.name.toLowerCase() !== 'masters') {
+        if (module.name.toLowerCase() !== PRODUCT_MASTERS) {
           productsList.push({
             value: module.name.toLowerCase(),
             url: module.url,

package/v2Components/TopBar/index.js

@@ -5,6 +5,7 @@ import { CAP_SPACE_24 } from '@capillarytech/cap-ui-library/styled/variables';
 import { intlShape, injectIntl } from 'react-intl';
 import messages from './messages';
 const drawerPlacement = 'left';
+const DEFAULT_MODULE = 'creatives';
 
 const TopBar = (props) => {
   const {
@@ -45,7 +46,7 @@ const TopBar = (props) => {
       }}
       menuProps={{
         items: topbarMenuData,
-        defaultSelectedKeys: ['creatives'],
+        defaultSelectedKeys: [DEFAULT_MODULE],
         onMenuItemClick: handleTopbarMenuChange,
       }}
       dropdownMenuProps={dropdownMenuProps}

package/v2Containers/Assets/Gallery/index.js

@@ -227,7 +227,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     e.preventDefault();
     const _URL = window.URL || window.webkitURL;
     //const file = files[0];
-    for (let file in files) {
+    for (const file in files) {
       const img = new Image();
       const that = this;
       img.src = _URL.createObjectURL(files[file]);
@@ -386,13 +386,13 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     const filterContent = (
       <div className="action-container" style={{ display: 'inline-flex', width: '100%'}}>
         <div style={{ marginTop: '8px', width: '50%'}}>
-          <CapInput
+          <CapInput.Search
             className="search-text"
             style={{width: '210px'}}
-            placeholder="Search"
-            prefix={<i className="material-icons" style={{color: '#707070', fontSize: '16px'}}>search</i>}
+            placeholder={this.props.intl.formatMessage(messages.search)}
             value={this.state.searchText}
             onChange={(e) => this.searchAsset(e.target.value)}
+            onClear={() => this.searchAsset('')}
           />
         </div>
         <div style={{ textAlign: 'right', marginTop: '16px', width: '50%'}}>

package/v2Containers/Cap/constants.js

@@ -28,7 +28,7 @@ export const GET_TOPBAR_MENU_DATA_SUCCESS = 'creatives/cap/GET_TOPBAR_MENU_DATA_
 export const GET_TOPBAR_MENU_DATA_FAILURE = 'creatives/cap/GET_TOPBAR_MENU_DATA_FAILURE';
 export const CLEAR_TOPBAR_MENU_DATA = 'creatives/cap/CLEAR_TOPBAR_MENU_DATA';
 
-export const CAMPAIGN_SETTINGS_URL = '/campaign/settings/message?from="/creatives/ui/v2/"';
+export const CAMPAIGN_SETTINGS_URL = '/creatives/settings/message';
 export const BRAND_SETTINGS_URL = '/org/index';
 export const PROFILE_SETTINGS_URL = '/org/users/NewProfile';
 export const HELP_URL = 'https://support.capillarytech.com';

package/v2Containers/Cap/index.js

@@ -118,7 +118,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     const { user: userData } = props.Global;
     const userName = userData.attributes.USERNAME;
     const userEmail = userData.attributes.EMAIL;
-    const orgObj = find(userData.proxyOrgList, {orgID: props.Global.orgID});
+    const orgObj = _.find(userData.proxyOrgList, {orgID: props.Global.orgID});
     const gtmData = {
       orgId: props.Global.orgID,
       orgName: orgObj && orgObj.orgName,
@@ -184,7 +184,8 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
               topbarMenuData={topbarMenuDataOptions}
               location={location}
             /> : ''}
-          <div className="main">
+          <div className="main" style={{minHeight: 'calc(100vh - 74px', position: 'relative', top: '74px'}}>
+
             <div className="main-content">
               {React.Children.toArray(this.props.children)}
             </div>

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -47,6 +47,7 @@ function SlideBoxContent(props) {
       onCallTaskSubmit,
       setIsLoadingContent,
       showTemplateName,
+      onValidationFail,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'defualt' : 'library'};
@@ -171,6 +172,7 @@ function SlideBoxContent(props) {
         cap={cap}
         onResetStep={onResetStep}
         showTemplateName={showTemplateName}
+        onValidationFail={onValidationFail}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -191,6 +193,7 @@ function SlideBoxContent(props) {
         isFullMode={isFullMode}
         cap={cap}
         showTemplateName={showTemplateName}
+        onValidationFail={onValidationFail}
           />
         )}
       {isEditMPush &&
@@ -260,5 +263,6 @@ SlideBoxContent.propTypes = {
   onMobilepushModeChange: PropTypes.func,
   mobilePushCreateMode: PropTypes.string,
   showTemplateName: PropTypes.func,
+  onValidationFail: PropTypes.func,
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -17,11 +17,11 @@ function getChannelLabel(channel) {
   return labels[channel.toLowerCase()];
 }
 function SlideBoxHeader(props) {
-  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, showTemplateName, channel } = props;
-  const TemplateName = isFullMode && showTemplateName;
+  const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, shouldShowTemplateName, channel, templateNameRenderProp } = props;
+  const showTemplateNameHeader = isFullMode && shouldShowTemplateName;
   return (
     <div key="creatives-container-slidebox-header-content">
-      {slidBoxContent === 'templates' && !TemplateName && (
+      {slidBoxContent === 'templates' && !showTemplateNameHeader && (
       <CapHeader
         title={<FormattedMessage {...messages.creativeTemplates} />}
         description={
@@ -29,12 +29,12 @@ function SlideBoxHeader(props) {
             }
           />
         )}
-      {TemplateName && <TemplateName/>}
+      {showTemplateNameHeader && templateNameRenderProp()}
       {slidBoxContent === 'preview' && (
       <CapHeader
         title={templateData.name}
         description={<CapLabel type="label3">
-          <FormattedMessage {...messages.lastUpdated}/>{moment(templateData.updatedAt).format('DD MMM YYYY')} <FormattedMessage {...messages.by}/>{templateData.updatedByName}
+          <FormattedMessage {...messages.lastUpdated} values={{date: moment(templateData.updatedAt).format('DD MMM YYYY'), user: templateData.updatedByName}}/>
         </CapLabel>}
         prefix={!isFullMode &&
           <PrefixWrapper>
@@ -43,7 +43,7 @@ function SlideBoxHeader(props) {
             }
           />
         )}
-      {!TemplateName && slidBoxContent === 'editTemplate' && (
+      {!showTemplateNameHeader && slidBoxContent === 'editTemplate' && (
       <CapHeader
         title={<FormattedMessage {...messages.editMessageContent} />}
         prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&
@@ -53,7 +53,7 @@ function SlideBoxHeader(props) {
             }
           />
         )}
-      {!TemplateName && slidBoxContent === 'createTemplate' && (
+      {!showTemplateNameHeader && slidBoxContent === 'createTemplate' && (
       <CapHeader
         title={<FormattedMessage {...messages.createMessageContent} values={{channel: getChannelLabel(channel)}}/>}
         prefix={!isFullMode && showPrefix &&
@@ -73,7 +73,8 @@ SlideBoxHeader.propTypes = {
   creativesMode: PropTypes.string,
   isFullMode: PropTypes.bool,
   showPrefix: PropTypes.bool,
-  showTemplateName: PropTypes.func,
   channel: PropTypes.string,
+  shouldShowTemplateName: PropTypes.bool,
+  templateNameRenderProp: PropTypes.func,
 };
 export default SlideBoxHeader;

package/v2Containers/CreativesContainer/index.js

@@ -279,6 +279,9 @@ class Creatives extends React.Component {
   saveMessage = () => {
     this.setState({ isGetFormData: true });
   };
+  onValidationFail = () => {
+    this.setState({ isGetFormData: false });
+  }
   discardMessage = () => {
     this.setState({ isDiscardMessage: true });
   }
@@ -342,34 +345,35 @@ class Creatives extends React.Component {
 
     return showDone;
   }
+  templateNameComponentHeader = ({formData, onFormDataChange, name}) => (
+    <CapHeader
+      inline
+      title={name}
+      description={<CapLink
+        title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
+        onClick={() => { this.setState({isEditName: true}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}/>
+    }/>)
+  templateNameComponentInput = ({formData, onFormDataChange, name}) => (<CapInput
+
+    value={name}
+    suffix={<span/>}
+    onBlur={() => { this.setState({isEditName: false}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}
+    onChange={(ev) => {
+      const value = ev.currentTarget.value;
+      const newFormData = {...formData, 'template-name': value};
+      onFormDataChange(newFormData);
+    }}
+    />)
   showTemplateName = ({formData, onFormDataChange}) => { //gets called from email/index after template data is fetched
     const {slidBoxContent, currentChannel, isEditName} = this.state;
     const channel = currentChannel.toUpperCase();
     if ((channel === constants.EMAIL || channel === constants.MOBILE_PUSH) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
       const name = get(formData, 'template-name');
+      this.templateContainerDetails = {formData, onFormDataChange};
       if (name && !isEditName) {
-        const TemplateNameComponent = () => (
-          <CapHeader
-            inline
-            title={name}
-            description={<CapLink
-              title={<FormattedMessage {...messages.creativesTemplatesEditName}/>}
-              onClick={() => { this.setState({isEditName: true}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}/>
-          }/>);
-        this.setState({templateNameComponent: TemplateNameComponent});
+        this.setState({showTemplateNameComponentEdit: false});
       } else if (isEditName) {
-        const TemplateNameComponent = () => (<CapInput
-          key="cap-input-template-name"
-          value={name}
-          suffix={<span/>}
-          onBlur={() => { this.setState({isEditName: false}, () => { this.showTemplateName({formData, onFormDataChange}); }); }}
-          onChange={(ev) => {
-            const value = ev.currentTarget.value;
-            const newFormData = {...formData, 'template-name': value};
-            onFormDataChange(newFormData);
-          }}
-          />);
-        this.setState({templateNameComponent: TemplateNameComponent});
+        this.setState({showTemplateNameComponentEdit: true});
       }
     }
   }
@@ -390,8 +394,18 @@ class Creatives extends React.Component {
 
     return isShowContinueFooter;
   }
+  templateNameRenderProp = () => {
+    const {showTemplateNameComponentEdit, currentChannel, slidBoxContent} = this.state;
+    const {templateContainerDetails} = this;
+    const {formData, onFormDataChange} = templateContainerDetails;
+    const channel = currentChannel.toUpperCase();
+    if ((channel === constants.EMAIL || channel === constants.MOBILE_PUSH) && (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate')) {
+      const name = get(formData, 'template-name');
+      return showTemplateNameComponentEdit ? this.templateNameComponentInput({formData, onFormDataChange, name}) : this.templateNameComponentHeader({formData, onFormDataChange, name});
+    }
+  }
   render() {
-    const {templateNameComponent, slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage} = this.state;
+    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage} = this.state;
     const {isFullMode, creativesMode, cap, isUploading} = this.props;
     return (
       <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
@@ -407,7 +421,8 @@ class Creatives extends React.Component {
               creativesMode={creativesMode}
               isFullMode={isFullMode}
               isLoadingContent={isLoadingContent}
-              showTemplateName={templateNameComponent}
+              shouldShowTemplateName={this.templateContainerDetails}
+              templateNameRenderProp={this.templateNameRenderProp}
               showPrefix={!isUploading} // not show back button when email template is being uploaded
             />
           }
@@ -440,6 +455,7 @@ class Creatives extends React.Component {
               onMobilepushModeChange={this.onMobilepushModeChange}
               mobilePushCreateMode={mobilePushCreateMode}
               showTemplateName={this.showTemplateName}
+              onValidationFail={this.onValidationFail}
             />
           }
           footer={this.shouldShowFooter() &&

package/v2Containers/CreativesContainer/messages.js

@@ -16,7 +16,7 @@ export default defineMessages({
   },
   "lastUpdated": {
     id: 'app.containers.Creatives.lastUpdated',
-    defaultMessage: 'Last updated:',
+    defaultMessage: 'Last updated: {date} by {user}',
   },
   "by": {
     id: 'app.containers.Creatives.by',

package/v2Containers/Email/index.js

@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Row, Col, Popover, Modal } from 'antd';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import { CapButton, CapInput, CapSpin, CapSlideBox, CapCustomCard } from '@capillarytech/cap-ui-library';
+import { CapButton, CapInput, CapSpin, CapSlideBox, CapCustomCard, CapNotification } from '@capillarytech/cap-ui-library';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from "moment";
@@ -216,6 +216,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // if (this.props.location.query.type === 'embedded') {
     //   this.showNext();
     // }
+    const {isFullMode, isGetFormData} = nextProps;
+    if (isFullMode && isGetFormData && !_.isEqual(isGetFormData, this.props.isGetFormData)) {
+      //when create button is clicked in full mode
+      this.startValidation(true);
+    }
     if (this.state.languageDataSet && nextProps.Templates.selectedEmailLayout && nextProps.Templates.selectedEmailLayout !== '' && !_.isEqual(this.props.Templates.selectedEmailLayout, nextProps.Templates.selectedEmailLayout )) {
       this.setNewLanguageContent(nextProps.Templates.selectedEmailLayout);
     }
@@ -632,7 +637,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       } else {
         message = getMessageObject('success', this.props.intl.formatMessage(messages.emailCreateSuccess), true);
       }
-      this.props.globalActions.addMessageToQueue(message);
+      CapNotification.success({message});
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const type = this.props.location.query.type;
       const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
@@ -944,13 +949,18 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   shouldStartValidation = () => {
     this.setState((prevState) => ({ cmsDataCount: prevState.cmsDataCount + 1}), () => {
       if (this.state.targetSaveCount === this.state.cmsDataCount) {
-        this.setState({startValidation: true});
+        //gets called when org is edm editor enabled, whenever the edm data get saved
+        this.startValidation(this.props.isGetFormData);
       }
     });
   }
-
+  startValidation = (shouldSave) => {
+    if (!this.state.startValidation && shouldSave) {
+      this.setState({startValidation: true});
+    }
+  }
   stopValidation = () => {
-    this.setState({startValidation: false});
+    this.setState({startValidation: false}, this.props.onValidationFail);
   }
   saveValidationData = () => {
     let saveCount = 0;
@@ -965,7 +975,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         }
       });
       if (saveCount === 0) {
-        this.setState({startValidation: true});
+        this.startValidation();
         return;
       }
       this.setState({targetSaveCount: saveCount, mode: "save", saveCount: 0, cmsDataCount: 0}, () => {
@@ -2310,16 +2320,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   saveFormData = (passedData) => {
-    //Logic to save in db etc
-    // const isValidated = this.validateFormData(formData);
-    //
-    // if (!isValidated) {
-    //   return;
-    // }
-    //if (!this.state.startValidation) {
-    //  this.saveValidationData();
-    //  return;
-    //}
+    //saveFormData gets called only when validation result is true
+
 
     if (this.state.gettingFormData && !this.props.isFullMode) {
       const response = {
@@ -2682,6 +2684,7 @@ Email.propTypes = {
   injectedTags: PropTypes.object,
   defaultData: PropTypes.object,
   showTemplateName: PropTypes.func,
+  onValidationFail: PropTypes.func,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({

package/v2Containers/Email/sagas.js

@@ -1,18 +1,21 @@
 import { take, cancel, call, put, takeLatest, takeEvery } from 'redux-saga/effects';
 import { LOCATION_CHANGE } from 'react-router-redux';
+import {CapNotification} from '@capillarytech/cap-ui-library';
 import * as Api from '../../services/api';
 import * as types from './constants';
 
-
 export function* createTemplate(template) {
   let errorMsg;
   try {
     const result = yield call(Api.createEmailTemplate, template);
-    if (result.message || result.status.code === 500) {
+    if (result.status.code === 500) {
       errorMsg = result.message;
+      CapNotification.error({message: errorMsg, key: 'create-email-template-error'});
+      yield put({ type: types.CREATE_TEMPLATE_FAILURE, errorMsg });
+    } else {
+      yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+      yield template.onCreateTemplateComplete(result.response);
     }
-    yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
-    yield template.onCreateTemplateComplete(result.response);
   } catch (error) {
     yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
   }

package/v2Containers/EmailWrapper/index.js

@@ -158,7 +158,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
   isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
   render() {
-    const {showTemplateName, emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode, EmailLayout, setIsLoadingContent} = this.props;
+    const {showTemplateName, emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode, EmailLayout, setIsLoadingContent, onValidationFail} = this.props;
     const {templateName, modeContent} = this.state;
     const isShowEmailCreate = this.isShowEmailCreate();
     return (
@@ -211,6 +211,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 defaultData={{'template-name': templateName}}
                 cap={cap}
                 showTemplateName={showTemplateName}
+                onValidationFail={onValidationFail}
             />}
               {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor}/>}
             </div>
@@ -240,6 +241,7 @@ EmailWrapper.propTypes = {
   isUploading: PropTypes.bool,
   setIsLoadingContent: PropTypes.func,
   showTemplateName: PropTypes.func,
+  onValidationFail: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Create/_smsCreate.scss

@@ -12,47 +12,3 @@
   }
 }
 
-.ant-breadcrumb{
-  color: #707070;
-  font-family: open-sans;
-  line-height: 16px;
-  font-size: 12px;
-  padding-left: 8px;
-}
-.ant-checkbox{
-  vertical-align: middle !important;
-}
-
-#template-name.ant-input{
-  font-size: 20px !important;
-  // font-family: proxima-nova, sans-serif;
-  font-style: normal;
-  font-weight: 600;
-}
-.ant-tabs-bar{
-  margin-bottom: 0 !important;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-.ant-tabs-tabpane{
-  border: 1px solid #d9d9d9;
-  border-top: none;
-  margin-top: -0.2%;
-  min-height: calc(70vh);
-}
-
-.ant-tabs-extra-content{
-  flex: 1;
-  align-self: flex-end;
-}
-
-.version-popover {
-  line-height: 24px;
-  cursor: pointer;
-}
-
-.version-popover:hover{
-  background-color: #ecf6fd;
-}

package/v2Containers/Sms/Create/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { CapRow, CapColumn, CapSpin } from '@capillarytech/cap-ui-library';
+import { CapRow, CapColumn, CapSpin, CapNotification } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
@@ -25,6 +25,7 @@ import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import * as globalActions from '../../Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 import * as creativesContainerActions from '../../CreativesContainer/actions';
+import {SMS} from '../../CreativesContainer/constants';
 // import callNativeEvent from '../../../utils/callNativeEvent';
 import {showError} from '../commonMethods';
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -137,8 +138,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       this.startValidation();
     }
     if (nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
-      const message = getMessageObject('error', (nextProps.Create.createTemplateErrorMessage && nextProps.Create.createTemplateErrorMessage !== '') ? nextProps.Create.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = (nextProps.Create.createTemplateErrorMessage && nextProps.Create.createTemplateErrorMessage !== '') ? nextProps.Create.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong);
+      CapNotification.error({key: 'createTemplateError', message });
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
       this.injectEvents(nextProps.metaEntities.layouts[0].definition);
@@ -209,8 +210,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         currentTab: 1,
         editData: {},
       });
-      const message = getMessageObject('success', 'SMS Template Created Successfully', true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = 'SMS Template Created Successfully';
+      CapNotification.success({key: 'createMessageSuccess', message});
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const type = this.props.location.query.type;
       if (this.props.isFullMode) {
@@ -279,7 +280,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         cancelTemplate: this.cancelTemplate,
       },
       "save-button": {
-        saveFormData: this.saveFormData,
+        saveFormData: this.validateAndSaveFormData,
       },
       "sms-editor": {
         onChange: this.onTemplateContentChange,
@@ -879,20 +880,21 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({showModal: false});
   }
 
-  saveFormData(formData) {
+  validateAndSaveFormData = () => {
+    this.setState({startValidation: true});
+  }
+  stopValidation = () => {
+    this.setState({startValidation: false});
+  }
+  saveFormData() {
     //Logic to save in db etc
-    const validatedFormData = this.getFormData();
-
-    if (!validatedFormData.validity) {
-      return;
-    }
-
+    const formData = _.cloneDeep(this.state.formData);
     const obj = {};
     obj.versions = {
       base: {},
       history: [],
     };
-    obj.type = validatedFormData.type;
+    obj.type = SMS;
     for (let index = 0; index < this.state.tabCount; index += 1 ) {
       obj.versions.history.push(formData[index]);
       // if (formData[index])

package/v2Containers/Sms/Edit/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { Row, Col, Spin } from 'antd';
+import { CapRow, CapColumn, CapSpinner, CapNotification } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
@@ -161,8 +161,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         currentTab: 1,
         editData: {},
       });
-      const message = getMessageObject('success', 'SMS Template Edited Successfully', true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = 'SMS Template Edited Successfully';
+      CapNotification.success({key: 'messageCreateSuccess', message });
       this.props.actions.clearEditResponse();
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const type = this.props.location.query.type;
@@ -173,8 +173,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (nextProps.Edit.editTemplateError && !_.isEqual(nextProps.Edit.editTemplateError, this.props.Edit.editTemplateError)) {
-      const message = getMessageObject('error', (nextProps.Edit.editTemplateErrorMessage && nextProps.Edit.editTemplateErrorMessage !== '') ? nextProps.Edit.editTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = (nextProps.Edit.editTemplateErrorMessage && nextProps.Edit.editTemplateErrorMessage !== '') ? nextProps.Edit.editTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong);
+      CapNotification.error({key: 'templateEditFailed', message});
     }
   }
 
@@ -228,8 +228,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         currentTab: 1,
         editData: {},
       });
-      const message = getMessageObject('success', 'SMS Template Edited Successfully', true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = 'SMS Template Edited Successfully';
+      CapNotification.success({key: 'editTemplateSuccess', message});
       this.props.actions.clearEditResponse();
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       const type = this.props.location.query.type;
@@ -351,7 +351,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         cancelTemplate: this.cancelTemplate,
       },
       "save-button": {
-        saveFormData: this.saveFormData,
+        saveFormData: this.validateAndSaveFormData,
       },
       "sms-editor": {
         onChange: this.onTemplateContentChange,
@@ -889,22 +889,22 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   handleCancelModal = () => {
     this.setState({showModal: false});
   }
-
-  saveFormData(formData) {
+  validateAndSaveFormData = () => {
+    this.setState({startValidation: true});
+  }
+  stopValidation = () => {
+    this.setState({startValidation: false});
+  }
+  saveFormData() {
     //Logic to save in db etc
+    //saveFormData gets called only when validation result is true
 
-    const obj = _.cloneDeep(this.state.editData);
-    obj.versions = {
-      base: {},
-      history: [],
-    };
-    for (let index = 0; index < this.state.tabCount; index += 1 ) {
-      obj.versions.history.push(formData[index]);
-    }
-    obj.name = formData['template-name'];
-    obj.versions.base = formData.base;
+    const editData = _.cloneDeep(this.state.editData);
+    const formData = _.cloneDeep(this.state.formData);
+    editData.name = formData['template-name'];
+    editData.versions.base = formData.base;
 
-    this.props.actions.editTemplate(obj, this.onUpdateTemplateComplete);
+    this.props.actions.editTemplate(editData, this.onUpdateTemplateComplete);
   }
   isSmsLoading = () => {
     //let {isLoading} = this.props;
@@ -932,18 +932,18 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     return (
       <div className="sms-email-container">
-        <Spin tip={tipText} spinning={spinning}>
-          {/*<Row style={{marginBottom: '16px', marginLeft: '-40px'}}>
-            <Col offset={1}>
+        <CapSpinner tip={tipText} spinning={spinning}>
+          {/*<CapRow style={{marginBottom: '16px', marginLeft: '-40px'}}>
+            <CapColumn offset={1}>
               <Breadcrumb>
                 <Breadcrumb.Item>Campaigns</Breadcrumb.Item>
                 <Breadcrumb.Item>Creatives</Breadcrumb.Item>
                 <Breadcrumb.Item>SMS</Breadcrumb.Item>
               </Breadcrumb>
-            </Col>
-          </Row>*/}
-          <Row>
-            <Col>
+            </CapColumn>
+          </CapRow>*/}
+          <CapRow>
+            <CapColumn>
               <FormBuilder
                 isFullMode={this.props.isFullMode}
                 refs={this.componentRefs}
@@ -968,10 +968,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 onContextChange={this.handleOnTagsContextChange}
                 handleCancelModal={this.handleCancelModal}
                 router={this.props.router}
+                startValidation={this.state.startValidation}
+                stopValidation={this.stopValidation}
               />
-            </Col>
-          </Row>
-        </Spin>
+            </CapColumn>
+          </CapRow>
+        </CapSpinner>
       </div>
     );
   }

package/v2Containers/Sms/initialSchema.js

@@ -235,24 +235,24 @@ export const response = {
                             "saveFormData",
                           ],
                         },
-                        {
-                          id: "discard-button",
-                          metaType: "submit-button",
+                        // {
+                        //   id: "discard-button",
+                        //   metaType: "submit-button",
 
-                          type: "button",
-                          buttonType: "secondary",
-                          value: "Discard changes",
-                          customComponent: false,
-                          standalone: true,
-                          styling: "semantic",
-                          order: 3,
-                          fluid: true,
-                          submitAction: "discardValues",
-                          onlyDisplay: true,
-                          supportedEvents: [
-                            "discardValues",
-                          ],
-                        },
+                        //   type: "button",
+                        //   buttonType: "secondary",
+                        //   value: "Discard changes",
+                        //   customComponent: false,
+                        //   standalone: true,
+                        //   styling: "semantic",
+                        //   order: 3,
+                        //   fluid: true,
+                        //   submitAction: "discardValues",
+                        //   onlyDisplay: true,
+                        //   supportedEvents: [
+                        //     "discardValues",
+                        //   ],
+                        // },
 
 
                       ],

package/v2Containers/Templates/index.js

@@ -15,7 +15,7 @@ import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { Modal} from 'antd';
-import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading} from '@capillarytech/cap-ui-library';
+import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -38,7 +38,6 @@ import config from '../../config/app';
 import './_templates.scss';
 import * as globalActions from '../Cap/actions';
 import { makeSelectAuthenticated } from '../Cap/selectors';
-import {getMessageObject} from '../../utils/messageUtils';
 import * as commonUtil from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import EmailPreview from '../../v2Components/EmailPreview';
@@ -259,36 +258,36 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
         params.accountId = nextProps.Templates.selectedWeChatAccount.id;
       }
-      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+      CapNotification.success({key: 'duplicateSuccess', message});
       this.getAllTemplates({params});
       this.props.mobilepushActions.clearCreateResponse();
     }
 
     if (this.state.channel.toLowerCase() === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
-      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+      CapNotification.success({key: 'duplicateSucess', message});
       this.getAllTemplates({params, resetPage: true});
       this.props.ebillActions.clearStoreValues();
     }
 
     if (this.state.channel.toLowerCase() === "email" && nextProps.EmailCreate && nextProps.EmailCreate.duplicateResponse && nextProps.EmailCreate.duplicateResponse.templateId && nextProps.EmailCreate.duplicateResponse.templateId !== '') {
-      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+      CapNotification.success({key: 'duplicateSucess', message});
       this.getAllTemplates({params, resetPage: true});
       this.props.emailActions.clearStoreValues();
     }
 
     if (this.state.channel.toLowerCase() === "line" && nextProps.Line && nextProps.Line.response && nextProps.Line.response.templateId && nextProps.Line.response.templateId !== '') {
-      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+      CapNotification.success({key: 'duplicateSuccess', message});
       this.getAllTemplates({params, resetPage: true});
       this.props.lineActions.clearCreateResponse();
     }
 
     if (nextProps.Create && this.props.Create && nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
-      const message = getMessageObject('error', this.props.intl.formatMessage(messages.somethingWentWrong), true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = this.props.intl.formatMessage(messages.somethingWentWrong);
+      CapNotification.error({key: 'somethingWrong', message});
       if (this.state.channel.toLowerCase() === "sms") {
         this.props.smsActions.clearCreateResponse();
       } else if (this.state.channel.toLowerCase() === "mobilepush") {
@@ -305,8 +304,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     if (!nextProps.Templates.deleteTemplateInProgress && !_.isEqual(nextProps.Templates.deleteTemplateInProgress, this.props.Templates.deleteTemplateInProgress) &&
     nextProps.Templates.deleteResponse) {
-      const message = getMessageObject('success', `${this.state.channel.toUpperCase()} ${this.props.intl.formatMessage(messages['Template deleted successfully'])}`, true);
-      nextProps.globalActions.addMessageToQueue(message);
+      const message = `${this.state.channel.toUpperCase()} ${this.props.intl.formatMessage(messages['Template deleted successfully'])}`;
+      CapNotification.success({key: 'deleteSucess', message});
       this.getAllTemplates({params, resetPage: true});
     }
 
@@ -330,8 +329,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (nextProps.Templates.errorMessage && nextProps.Templates.errorMessage !== "") {
         errorMessage = nextProps.Templates.errorMessage;
       }
-      const message = getMessageObject('error', errorMessage, true);
-      nextProps.globalActions.addMessageToQueue(message);
+      CapNotification.error({key: 'uploadError', message: errorMessage});
     }
 
     if (!_.isEmpty(nextProps.Templates.templateDetails) && !_.isEqual(nextProps.Templates.templateDetails, this.props.Templates.templateDetails)) {
@@ -661,8 +659,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       };
       reader.readAsText(files[0]);
     } else {
-      const message = getMessageObject('error', this.props.intl.formatMessage(messages.invalidUploadFileError), true);
-      this.props.globalActions.addMessageToQueue(message);
+      const message = this.props.intl.formatMessage(messages.invalidUploadFileError);
+      CapNotification.error({key: 'uploadError', message});
     }
   };
 
@@ -867,8 +865,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           type = this.props.location.query.type;
           if (this.props.Templates && this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && (_.isEmpty(this.props.Templates.selectedWeChatAccount.configs.wechat_app_id) || _.isEmpty(this.props.Templates.selectedWeChatAccount.configs.wechat_app_secret))) {
             const errorMessage = this.props.intl.formatMessage(messages.wechatAccountNotConfigured);
-            const message = getMessageObject('error', errorMessage, true);
-            this.props.globalActions.addMessageToQueue(message);
+            CapNotification.error({key: 'wechatError', message: errorMessage});
           } else {
             this.props.router.push({
               pathname: `/wechat/richmedia/create`,
@@ -967,8 +964,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.channel.toLowerCase() === "sms") {
       this.props.smsActions.createTemplate(duplicateObj, (response) => {
         if (response && response.templateId) {
-          const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
-          this.props.globalActions.addMessageToQueue(message);
+          const message = `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`;
+          CapNotification.success({key: 'duplicateSucess', message});
+
           this.getAllTemplates({params, resetPage: true});
           this.props.smsActions.clearCreateResponse();
         }
@@ -1570,6 +1568,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           value={this.state.searchText}
           onChange={(e) => this.searchTemplate(e.target.value)}
           disabled={this.checkSearchDisabled()}
+          onClear={() => this.searchTemplate('')}
         />
         <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
           {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}