@capillarytech/creatives-library 3.0.28 → 3.0.30

package/v2Containers/CreativesContainer/index.js

@@ -119,8 +119,11 @@ class Creatives extends React.Component {
       channel: 'CALL_TASK',
       ...data,
     });
-  }
+  };
 
+  onValidationFail = () => {
+    this.setState({ isGetFormData: false });
+  };
   getTemplateData = (templateData) => { //from consumers to creatives
     const {isFullMode} = this.props;
     if (!isFullMode && templateData) { // for component mode
@@ -224,6 +227,7 @@ class Creatives extends React.Component {
     }
     return templateData;
   };
+
   getSlideBocContent({mode, templateData, isFullMode}) {
     let creativesMode = isFullMode ? 'createTemplate' : 'templates';// for library mode templates page is initial mode and for full mode createTemplates
     if (mode === 'create' && isFullMode) {
@@ -253,7 +257,6 @@ class Creatives extends React.Component {
       );
     }
   };
-
   setIsLoadingContent = (isLoadingContent) => {
     if (this.state.isLoadingContent !== isLoadingContent) {
       this.setState({isLoadingContent });
@@ -280,9 +283,6 @@ class Creatives extends React.Component {
   saveMessage = () => {
     this.setState({ isGetFormData: true });
   };
-  onValidationFail = () => {
-    this.setState({ isGetFormData: false });
-  }
   discardMessage = () => {
     this.setState({ isDiscardMessage: true });
   }
@@ -404,10 +404,11 @@ class Creatives extends React.Component {
       const name = get(formData, 'template-name');
       return showTemplateNameComponentEdit ? this.templateNameComponentInput({formData, onFormDataChange, name}) : this.templateNameComponentHeader({formData, onFormDataChange, name});
     }
+    return false;
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide} = this.props;
+    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, forwardedTags} = this.props;
     return (
       <SlideBoxWrapper className={classnames(`${classPrefix} ${isFullMode ? 'creatives-full-mode' : 'creatives-library-mode'}`)}>
         <CapSlideBox
@@ -458,6 +459,7 @@ class Creatives extends React.Component {
               showTemplateName={this.showTemplateName}
               onValidationFail={this.onValidationFail}
               channelsToHide={channelsToHide}
+              forwardedTags={forwardedTags}
             />
           }
           footer={this.shouldShowFooter() &&
@@ -503,6 +505,7 @@ Creatives.propTypes = {
   isUploading: PropTypes.bool,
   EmailLayout: PropTypes.string,
   channelsToHide: PropTypes.array,
+  forwardedTags: PropTypes.object,
 };
 const mapStatesToProps = () => createStructuredSelector({
   isLoading: isLoadingSelector(),

package/v2Containers/Ebill/index.js

@@ -7,24 +7,23 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Spin, Row, Col, Breadcrumb } from 'antd';
 import Helmet from 'react-helmet';
-import { injectIntl, intlShape } from 'react-intl';
+import { intlShape } from 'react-intl';
 import _ from 'lodash';
 import { createStructuredSelector } from 'reselect';
 import * as actions from './actions';
 import FormBuilder from '../../v2Components/FormBuilder';
 import { makeSelectMetaEntities, makeSelectAuthenticated, setInjectedTags } from '../Cap/selectors';
-import * as globalActions from '../Cap/actions';
-import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { makeSelectTemplates } from '../Templates/selectors';
 import {getMessageObject} from '../../utils/messageUtils';
 import makeSelectEbill from './selectors';
 import messages from './messages';
 import EmailPreview from '../../v2Components/EmailPreview';
 import './_ebill.scss';
+import withCreatives from '../../hoc/withCreatives';
+
 const BreadcrumbItem = Breadcrumb.Item;
 
 export class Ebill extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -1253,8 +1252,12 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Ebill)));
+export default withCreatives({
+  WrappedComponent: Ebill,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});

package/v2Containers/Email/index.js

@@ -7,10 +7,9 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Row, Col, Popover, Modal } from 'antd';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { intlShape, FormattedMessage } from 'react-intl';
 import { CapButton, CapInput, CapSpin, CapSlideBox, CapCustomCard, CapNotification } from '@capillarytech/cap-ui-library';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
@@ -19,8 +18,6 @@ import FormBuilder from '../../v2Components/FormBuilder';
 import { makeSelectMetaEntities, selectCurrentOrgDetails, isLoadingMetaEntities, makeSelectAuthenticated, setInjectedTags } from '../Cap/selectors';
 import * as actions from './actions';
 import * as templatesActions from '../Templates/actions';
-import * as globalActions from '../Cap/actions';
-import { UserIsAuthenticated } from '../../utils/authWrapper';
 import {makeSelectEmail} from './selectors';
 import { makeSelectTemplates } from '../Templates/selectors';
 import messages from './messages';
@@ -31,6 +28,8 @@ import EmailPreview from '../../v2Components/EmailPreview';
 
 import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
+import withCreatives from '../../hoc/withCreatives';
+
 const {CapCustomCardList} = CapCustomCard;
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -1421,6 +1420,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
             newContainerInputFieldCol.style.display = isDragDrop ? "none" : '';
           }
           if (containerInputFieldCol.id === 'tab-options-popover') {
+            // eslint-disable-next-line no-param-reassign
             containerInputFieldCol.colStyle.display = isDragDrop ? "flex" : "none";
             _.forEach(containerInputFieldCol.content.sections[0].inputFields, (tabPopoverSection) => {
               if (tabPopoverSection.cols[0].id === 'switch-editor-label') {
@@ -2684,11 +2684,14 @@ const mapStateToProps = (state, props) => createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
     templatesActions: bindActionCreators(templatesActions, dispatch),
     creativesContainerActions: bindActionCreators(creativesContainerActions, dispatch),
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Email)));
-
+export default withCreatives({
+  WrappedComponent: Email,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});

package/v2Containers/LanguageProvider/index.js

@@ -32,6 +32,8 @@ export class LanguageProvider extends React.PureComponent { // eslint-disable-li
     const map = {
       'en': 'en-US',
       'zh-cn': 'zh',
+      'zh': 'zh',
+      'en-US': 'en-US',
     };
     return map[locale];
   };

package/v2Containers/LanguageProvider/reducer.js

@@ -13,7 +13,7 @@ import {
 
 const initialState = fromJS({
   locale: DEFAULT_LOCALE,
-  messages: [],
+  messages: {},
   localeLoading: false,
 });
 

package/v2Containers/Line/Create/index.js

@@ -1,22 +1,20 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import {connect} from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { injectIntl, intlShape } from 'react-intl';
+import { intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { Row, Col, Spin, Breadcrumb } from 'antd';
 import _ from 'lodash';
 import messages from './messages';
 import * as actions from './actions';
 import FormBuilder from '../../../v2Components/FormBuilder';
-import { UserIsAuthenticated } from '../../../utils/authWrapper';
-import * as globalActions from '../../Cap/actions';
 //import { makeSelectCreate, makeSelectCreateResponse, makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';
 import {makeSelectCreateLine} from './selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
 import './_lineCreate.scss';
+import withCreatives from '../../../hoc/withCreatives';
 
 const BreadcrumbItem = Breadcrumb.Item;
 
@@ -813,8 +811,12 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Line)));
+export default withCreatives({
+  WrappedComponent: Line,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});

package/v2Containers/Line/Edit/index.js

@@ -9,21 +9,20 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import {bindActionCreators} from "redux";
-import { connect } from 'react-redux';
 import { Row, Col, Spin, Breadcrumb, notification } from 'antd';
 import { createStructuredSelector } from 'reselect';
-import { injectIntl, intlShape } from 'react-intl';
+import { intlShape } from 'react-intl';
 import _ from 'lodash';
 import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse} from "../../MobilePush/Edit/selectors";
 import {makeSelectMetaEntities, setInjectedTags} from "../../Cap/selectors";
 import {getMessageObject} from "../../../utils/messageUtils";
 import FormBuilder from '../../../v2Components/FormBuilder';
-import * as globalActions from "../../Cap/actions";
 import * as actions from "../../MobilePush/Edit/actions";
 import * as templatesActions from "../../Templates/actions";
 import {makeSelectTemplates} from "../../Templates/selectors";
 import messages from './messages';
 import './_lineEdit.scss';
+import withCreatives from '../../../hoc/withCreatives';
 
 const BreadcrumbItem = Breadcrumb.Item;
 
@@ -1040,9 +1039,13 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
     templatesActions: bindActionCreators(templatesActions, dispatch),
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Edit));
+export default withCreatives({
+  WrappedComponent: Edit,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: false,
+});

package/v2Containers/MobilePush/Create/index.js

@@ -7,20 +7,19 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { notification } from 'antd';
 import {get, set, filter, isEmpty, map, forEach, uniqueId, cloneDeep, isEqual, findIndex} from 'lodash';
 import { createStructuredSelector } from 'reselect';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { intlShape, FormattedMessage } from 'react-intl';
 import styled from 'styled-components';
 import { CapSlideBox, CapHeader, CapTable, CapLink, CapRow, CapColumn, CapIcons, CapSpin, CapNotification } from '@capillarytech/cap-ui-library';
 import { makeSelectCreate, makeSelectCreateResponse, makeSelectIosCta } from './selectors';
 import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
-import * as globalActions from '../../Cap/actions';
 import FormBuilder from '../../../v2Components/FormBuilder';
 import './_mobilePushCreate.scss';
 import * as actions from './actions';
+import withCreatives from '../../../hoc/withCreatives';
 
 import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
@@ -1809,8 +1808,12 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Create));
+export default withCreatives({
+  WrappedComponent: Create,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: false,
+});

package/v2Containers/MobilePush/Edit/index.js

@@ -9,10 +9,9 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import {bindActionCreators} from "redux";
-import { connect } from 'react-redux';
 import { notification } from 'antd';
 import { createStructuredSelector } from 'reselect';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { intlShape, FormattedMessage } from 'react-intl';
 import _, {get, findIndex, set, forEach, cloneDeep} from 'lodash';
 import { CapSpin, CapSlideBox, CapHeader, CapTable, CapLink, CapRow, CapColumn, CapIcons, CapNotification} from '@capillarytech/cap-ui-library';
 import styled from 'styled-components';
@@ -20,13 +19,13 @@ import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsRespons
 import {makeSelectMetaEntities, setInjectedTags, isLoadingMetaEntities} from "../../Cap/selectors";
 import {getMessageObject} from "../../../utils/messageUtils";
 import FormBuilder from '../../../v2Components/FormBuilder';
-import * as globalActions from "../../Cap/actions";
 import * as actions from "../../MobilePush/Edit/actions";
 import * as templatesActions from "../../Templates/actions";
 import {makeSelectTemplates} from "../../Templates/selectors";
 import messages from './messages';
 import './_mobilePushCreate.scss';
 import {makeSelectCreate} from "../Create/selectors";
+import withCreatives from '../../../hoc/withCreatives';
 
 import getEventsMap from '../eventsMap';
 import {getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields} from '../commonMethods';
@@ -1902,9 +1901,13 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
     templatesActions: bindActionCreators(templatesActions, dispatch),
   };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Edit));
+export default withCreatives({
+  WrappedComponent: Edit,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: false,
+});

package/v2Containers/Sms/Create/index.js

@@ -7,27 +7,26 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { connect } from 'react-redux';
 import { CapRow, CapColumn, CapSpin, CapNotification } from '@capillarytech/cap-ui-library';
-import { injectIntl, intlShape } from 'react-intl';
+import { intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { makeSelectCreate, makeSelectCreateResponse } from './selectors';
 import { makeSelectMetaEntities, isLoadingMetaEntities, setInjectedTags } from '../../Cap/selectors';
-import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import './_smsCreate.scss';
 import FormBuilder from '../../../v2Components/FormBuilder';
 import * as actions from './actions';
 import messages from './messages';
 import * as charCount from '../../../utils/smsCharCount';
 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';
+import withCreatives from '../../../hoc/withCreatives';
+
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -743,7 +742,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
-    this.setState({formData});
+    this.setState({formData}, () => this.onTemplateContentChange());
   }
 
   startTemplateCreation(data) {
@@ -1009,9 +1008,13 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
     creativesContainerActions: bindActionCreators(creativesContainerActions, dispatch),
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Create)));
+export default withCreatives({
+  WrappedComponent: Create,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});

package/v2Containers/Sms/Edit/index.js

@@ -8,25 +8,24 @@
 import PropTypes from 'prop-types';
 
 import React from 'react';
-import { connect } from 'react-redux';
 import { CapRow, CapColumn, CapSpin, CapNotification } from '@capillarytech/cap-ui-library';
-import { injectIntl, intlShape } from 'react-intl';
+import { intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';
 import { makeSelectMetaEntities, isLoadingMetaEntities, setInjectedTags } from '../../Cap/selectors';
-import { UserIsAuthenticated } from '../../../utils/authWrapper';
 import FormBuilder from '../../../v2Components/FormBuilder';
 import * as actions from './actions';
 import {checkUnicode, updateCharCount} from '../../../utils/smsCharCountV2';
 import '../Create/_smsCreate.scss';
 import messages from './messages';
-import * as globalActions from '../../Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 import * as creativesContainerActions from '../../CreativesContainer/actions';
 // import callNativeEvent from '../../../utils/callNativeEvent';
 import {showError} from '../commonMethods';
+import withCreatives from '../../../hoc/withCreatives';
+
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -790,7 +789,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
     formData.base[field.id] = myField.value;
-    this.setState({formData});
+    this.setState({formData}, () => this.onTemplateContentChange());
   }
 
   handleFrameTasks = (e) => {
@@ -1009,9 +1008,13 @@ const mapStateToProps = createStructuredSelector({
 function mapDispatchToProps(dispatch) {
   return {
     actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
     creativesContainerActions: bindActionCreators(creativesContainerActions, dispatch),
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Edit)));
+export default withCreatives({
+  WrappedComponent: Edit,
+  mapStateToProps,
+  mapDispatchToProps,
+  userAuth: true,
+});

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -0,0 +1,29 @@
+import { css } from 'styled-components';
+import {CAP_SPACE_24, CAP_SPACE_16} from '@capillarytech/cap-ui-library/styled/variables';
+
+export default css`
+  .cap-tab-v2-wrapper{
+    .ant-tabs-tabpane {
+        border: none;
+    }
+  }
+
+  .component-wrapper {
+    ${(props) => props.isFullMode ? `
+      max-width: 1140px;
+      margin: 0 auto;
+      width: 100%;
+      padding: ${CAP_SPACE_24} 0;
+      .ant-tabs-content{
+        margin-top: ${CAP_SPACE_16}
+      }
+    ` : `.cap-tab-v2 {
+      height: calc(100vh - 118px);
+    } `}
+  }
+`;
+
+export const CapTabStyle = css`
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
+  }
+`;

package/v2Containers/TemplatesV2/index.js

@@ -5,18 +5,15 @@
  */
 
 import PropTypes from 'prop-types';
-
 import React from 'react';
 import { connect } from 'react-redux';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import styled from 'styled-components';
 import { CapTab, CapCustomCard, CapButton, CapHeader, CapSpin, CapIcon } from '@capillarytech/cap-ui-library';
 import { find, get } from 'lodash';
 import Helmet from 'react-helmet';
 
-import {CAP_SPACE_24, CAP_SPACE_16} from '@capillarytech/cap-ui-library/styled/variables';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/selectors';
 import messages from './messages';
@@ -24,29 +21,13 @@ import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Gallery from '../Assets/Gallery';
-import './_templatesV2.scss';
+import withStyles from '../../hoc/withStyles';
+import styles, { CapTabStyle } from './TemplatesV2.style';
 
 const {CapCustomCardList} = CapCustomCard;
 
-const ComponentWrapper = styled.div`
-${(props) => props.isFullMode ? `
-max-width: 1140px;
-margin: 0 auto;
-width: 100%;
-padding: ${CAP_SPACE_24} 0;
-.ant-tabs-content{
-  margin-top: ${CAP_SPACE_16}
-}
-  ` : `.cap-tab-v2 {
-    height: calc(100vh - 118px);
-  } `}
-  
- 
-`;
-const MarginTop = styled.div`
-  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
-}
-`;
+const StyledCapTab = withStyles(CapTab, CapTabStyle);
+
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -146,21 +127,20 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     }
   }
 
-  setChannelContent = (selectedChannel, argsPanes) => {
-    const panes = argsPanes.map((p) => {
-      const pane = p;
+  setChannelContent = (selectedChannel, argsPanes) => (
+    argsPanes.map((pane) => {
+      let content = null;
       if (pane.key === selectedChannel) {
-        let channel = selectedChannel;
-        if (channel === "mpush") {
-          channel = "mobilepush";
-        }
-        pane.content = this.getTemplatesComponent(channel);
-        return pane;
+        const channel = selectedChannel === "mpush" ? "mobilepush" : selectedChannel;
+        content = this.getTemplatesComponent(channel);
       }
-      return {...pane, content: <div></div>};
-    });
-    return panes;
-  }
+      return {
+        ...pane,
+        content,
+      };
+    })
+  );
+
   channelChange = (selectedChannel) => {
     const panes = this.setChannelContent(selectedChannel, this.state.panes);
     this.setState({panes, selectedChannel}, () => { if (!this.props.isFullMode) this.props.onChannelChange(selectedChannel); });
@@ -171,28 +151,25 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     return this.props.Templates.loadingTemplates;
   }
   render() {
-    const {isFullMode} = this.props;
+    const { isFullMode, className } = this.props;
     return (
-      <div className={`creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
+      <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
         {isFullMode && <Helmet
           title={this.props.intl.formatMessage(messages.creatives)}
           meta={[
             { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
           ]}
         />}
-        <ComponentWrapper isFullMode={isFullMode}>
-
+        <div className="component-wrapper">
           {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-          <MarginTop isFullMode={isFullMode}>
-            <CapTab
-              panes={this.state.panes}
-              onChange={this.channelChange}
-              activeKey={this.state.selectedChannel}
-              defaultActiveKey={this.state.selectedChannel}/>
-          </MarginTop>
-
-
-        </ComponentWrapper>
+          <StyledCapTab
+            panes={this.state.panes}
+            onChange={this.channelChange}
+            activeKey={this.state.selectedChannel}
+            defaultActiveKey={this.state.selectedChannel}
+            isFullMode={isFullMode}
+          />
+        </div>
       </div>
 
     );
@@ -212,6 +189,7 @@ TemplatesV2.propTypes = {
   intl: intlShape,
   onChannelChange: PropTypes.func,
   channelsToHide: PropTypes.array,
+  className: PropTypes.string.isRequired,
 };
 
 TemplatesV2.defaultProps = {
@@ -229,4 +207,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(TemplatesV2)));
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(TemplatesV2, styles))));