@capillarytech/creatives-library 2.0.89 → 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.89",
+  "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;
@@ -1234,15 +1236,23 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   initializeStandAloneSections(schema, formDataObj, ifError) {
     let formData = _.cloneDeep(formDataObj);
+    const channel = _.get(this, "props.schema.channel");
+    let isContainer = false;
+    let index = -1;
+    if (channel && channel.toUpperCase() === SMS) {
+      // sms v2 scema does not have any containers section the input ant preview fields are in stand alon section and v1 FormBuilder did not have valiation support for stand alone input fields
+      isContainer = true;
+      index = 0;
+    }
     if (schema.standalone) {
       _.forEach(schema.standalone.sections, (section) => {
         if (section) {
           if (section.type === 'multicols') {
-            formData = this.initializeMultiColSection(section, formData, false, -1, ifError);
+            formData = this.initializeMultiColSection(section, formData, isContainer, index, ifError);
           } else if (section.type === 'col-label') {
-            formData = this.initializeColLabelSection(section, formData, false, -1, ifError);
+            formData = this.initializeColLabelSection(section, formData, isContainer, index, ifError);
           } else if (section.type === 'parent') {
-            formData = this.initializeParentSection(section, formData, false, -1, ifError);
+            formData = this.initializeParentSection(section, formData, isContainer, index, ifError);
           }
         }
       });

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;