@capillarytech/creatives-library 2.0.90 → 2.0.91

package/components/SmsPreviewV2/index.js

@@ -0,0 +1,69 @@
+/**
+*
+* SmsPreviewV2
+*
+*/
+
+import React from 'react';
+// import styled from 'styled-components';
+
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
+import androidPhoneImage from '../../assets/android-message-gui-2.svg';
+
+class SmsPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    let content = [this.props.content];
+    const channel = this.props.channel;
+    let smsDetails = {};
+    if (this.props.content && this.props.charCounterEnabled) {
+      smsDetails = updateCharCount(this.props.content, this.props.unicodeEnabled);
+      content = [];
+      for (let i = 0, limit = 0; i < smsDetails.parts; i += 1, limit += smsDetails.chars_sms) {
+        content.push(smsDetails.char_list.slice(limit, smsDetails.chars_sms * (i + 1)));
+      }
+      if (document.getElementById("msg_count") && this.props.showCount) {
+        document.getElementById("msg_count").val = smsDetails.parts;
+      }
+    }
+    const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
+    return (
+      <CapRow>
+        {this.props.showCount && <CapColumn span={16}>
+          {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
+            <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
+            {smsDetails.unicode &&
+              <FormattedMessage {...messages.smsFormatType}/>
+            }
+          </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>
+              </div>
+            }
+          </div>
+        </CapColumn>
+      </CapRow>
+    );
+  }
+}
+
+SmsPreviewV2.propTypes = {
+
+};
+
+export default SmsPreviewV2;

package/components/SmsPreviewV2/messages.js

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

package/components/SmsPreviewV2/tests/index.test.js

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

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.91",
   "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;