@capillarytech/creatives-library 3.1.49 → 3.2.0

package/v2Containers/Sms/Create/index.js

@@ -176,7 +176,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const unicodeEnabled = _.get(this.state, `formData[0]['unicode-validity']`);
     const smsDetails = updateCharCount(content || "", unicodeEnabled || false);
     if (this.smsCount.current) {
-      this.smsCount.current.innerText = `${smsDetails.parts}${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`;
+      this.smsCount.current.innerText = `${smsDetails.parts}SMS (${smsDetails.chars_used} characters)`;
     }
   }
 
@@ -970,7 +970,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 router={this.props.router}
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
-                selectedOfferDetails={this.props.selectedOfferDetails}
               />
             </CapColumn>
           </CapRow>
@@ -996,7 +995,6 @@ Create.propTypes = {
   isFullMode: PropTypes.bool,
   getFormSubscriptionData: PropTypes.func,
   isLoadingMetaEntities: PropTypes.bool,
-  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Create/messages.js

@@ -110,20 +110,4 @@ export default defineMessages({
     id: 'creatives.containersV2.Create.templateNotValid',
     defaultMessage: 'Template data is not valid',
   },
-  "Creative name": {
-    id: 'creatives.containersV2.Create.creativeName',
-    defaultMessage: 'Creative name',
-  },
-  "Add label": {
-    id: 'creatives.containersV2.Create.addLabel',
-    defaultMessage: 'Add label',
-  },
-  "sms": {
-    id: 'creatives.containersV2.Create.sms',
-    defaultMessage: 'SMS',
-  },
-  "characters" : {
-    id: 'creatives.containersV2.Create.characters',
-    defaultMessage: 'characters',
-  },
 });

package/v2Containers/Sms/Edit/index.js

@@ -194,7 +194,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const unicodeEnabled = _.get(this.state, `formData[0]['unicode-validity']`);
     const smsDetails = updateCharCount(content || "", unicodeEnabled || false);
     if (this.smsCount.current) {
-      this.smsCount.current.innerText = `${smsDetails.parts}${this.props.intl.formatMessage(messages.sms)} (${smsDetails.chars_used} ${this.props.intl.formatMessage(messages.characters)})`;
+      this.smsCount.current.innerText = `${smsDetails.parts}SMS (${smsDetails.chars_used} characters)`;
     }
   }
 
@@ -966,7 +966,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 router={this.props.router}
                 startValidation={this.state.startValidation}
                 stopValidation={this.stopValidation}
-                selectedOfferDetails={this.props.selectedOfferDetails}
               />
             </CapColumn>
           </CapRow>
@@ -995,7 +994,6 @@ Edit.propTypes = {
   setIsLoadingContent: PropTypes.func,
   // route: PropTypes.object,
   injectedTags: PropTypes.object,
-  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Sms/Edit/messages.js

@@ -102,20 +102,4 @@ export default defineMessages({
     id: 'creatives.containersV2.Edit.templateMarkedSuccessfully',
     defaultMessage: "Template Marked as Final Successfully",
   },
-  "Creative name": {
-    id: 'creatives.containersV2.Edit.creativeName',
-    defaultMessage: 'Creative name',
-  },
-  "Add label": {
-    id: 'creatives.containersV2.Edit.addLabel',
-    defaultMessage: 'Add label',
-  },
-  "sms": {
-    id: 'creatives.containersV2.Edit.sms',
-    defaultMessage: 'SMS',
-  },
-  "characters" : {
-    id: 'creatives.containersV2.Edit.characters',
-    defaultMessage: 'characters',
-  },
 });

package/v2Containers/TagList/index.js

@@ -31,7 +31,6 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     this.populateTags = this.populateTags.bind(this);
     this.populateTagForChildren = this.populateTagForChildren.bind(this);
     this.transformInjectedTags = this.transformInjectedTags.bind(this);
-    this.transformCouponTags = this.transformCouponTags.bind(this);
   }
 
   componentDidMount() {
@@ -139,44 +138,6 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     return tagsObject[tagValue];
   }
 
-  transformCouponTags(offerDetails, allTags) {
-    const couponTags = {};
-    const couponTagsKeys = Object.keys(_.get(allTags, 'coupon.subtags', []));
-    const withCouponId = (obj, id) => {
-      const tempObj = {};
-      if (obj.subtags) {
-        tempObj.subtags = _.mapValues(obj.subtags, (tag) => ({
-          ...withCouponId(tag, id),
-        }));
-      }
-      return {
-        ...obj,
-        ...tempObj,
-        couponSeriesId: id,
-      };
-    };
-    offerDetails.forEach((offer) => {
-      const { id, couponName } = offer;
-      const couponSubTags = {};
-      couponTagsKeys.forEach((couponTagKey) => {
-        const couponSubTagsObj = withCouponId(allTags.coupon.subtags[couponTagKey], id);
-        couponSubTags[couponTagKey] = couponSubTagsObj;
-      });
-      const key = couponName || id;
-      couponTags[key] = {
-        'tag-header': true,
-        'name': couponName || id,
-        'desc': couponName || id,
-        'couponSeriesId': id,
-        'subtags': couponSubTags,
-        'resolved': true,
-        'couponTags': true,
-      };
-    });
-    // eslint-disable-next-line no-param-reassign
-    allTags.coupon.subtags = couponTags;
-  }
-
   transformInjectedTags(tags) {
     _.forEach(tags, (tag) => {
       const temp = tag;
@@ -228,9 +189,6 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       tags = this.populateTags(this.props.tags);
       console.log('populating tags', tags);
     }
-    if (this.props.selectedOfferDetails && !_.isEmpty(this.props.selectedOfferDetails) && (tags && tags.coupon)) {
-      this.transformCouponTags(this.props.selectedOfferDetails, tags);
-    }
     tags = _.merge( {}, tags, injectedTags);
     console.log('merged tags', tags);
     return (
@@ -262,7 +220,6 @@ TagList.propTypes = {
   moduleFilterEnabled: PropTypes.bool,
   className: PropTypes.string,
   userLocale: PropTypes.string,
-  selectedOfferDetails: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/_templates.scss

@@ -1,6 +1,4 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.ant-tabs-content{
+  .ant-tabs-content{
     margin-top: 16px;
     .ant-tabs-tabpane-active{
       padding: unset;
@@ -18,12 +16,6 @@
   }
 }
 
-.ant-radio-group.#{cap-radioCard-v2} {
-  .ant-radio-button-wrapper {
-    border: 1px solid $CAP_G07;
-  }
-}
-
 .card-title {
   line-height: 24px;
   font-size: 14px;

package/v2Containers/Templates/index.js

@@ -54,7 +54,6 @@ import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContai
 import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
-import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 
 
 const {CapCustomCardList} = CapCustomCard;
@@ -68,7 +67,6 @@ const InlineDiv = styled.div`
   }
 `;
 const ACCOUNT_SELECTION_MODE = "accountSelectionMode";
-const ACCOUNT_CHANGE_MODE = 'accountChangeMode';
 const TEMPLATES_MODE = "templatesMode";
 const WECHAT_FILTERS = {
   ALL: 'all',
@@ -1527,7 +1525,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   renderAccountSelection = () => {
     const accountOptions = [];
-    const { selectedAccount } = this.state;
     let { channel = '' } = this.state;
     channel = channel.toUpperCase();
     const { Templates: templates = {}, location = {} } = this.props;
@@ -1572,8 +1569,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     }
     return (<CapSpin spinning={fetchingWeCrmAccounts}>
-      {isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...(channel === WECHAT ? messages.noAccountsPresentWeChat : messages.noAccountsPresent)} /> :
-      <div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>
+      {isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts ? <FormattedMessage {...messages.noAccountsPresentWeChat} /> :
+      <div style={{overflowX: "auto"}}>
         <CapHeader
           title={isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}
           description={this.props.intl.formatMessage(messages.chooseAccount)}
@@ -1587,9 +1584,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           cardHeight="48px"
           cardWidth="276px"
           size="small"
-          defaultValue={selectedAccount}
-          selected={selectedAccount}
-        />
+                      />
       </div>
        }
     </CapSpin>);
@@ -1599,23 +1594,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({activeMode: ACCOUNT_SELECTION_MODE});
   }
 
-  setAccountChangeMode = () => {
-    this.setState({activeMode: ACCOUNT_CHANGE_MODE});
-  }
-
   setTemplatesMode = () => {
     this.setState({activeMode: TEMPLATES_MODE});
   }
 
   showAccountName = () => {
-    const { activeMode, selectedAccount, channel } = this.state;
+    const { selectedAccount, channel } = this.state;
     const { Templates: templates = {}} = this.props;
     const { weCrmAccounts = []} = templates;
     const isMobilePushChannel = channel === MOBILE_PUSH;
-    return (activeMode !== ACCOUNT_CHANGE_MODE &&
-    <CapHeader
+    return (<CapHeader
       title={<CapHeading type="h4">{isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}</CapHeading>}
-      description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountChangeMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
+      description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountSelectionMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
       size="regular"
   />);
   }
@@ -1701,66 +1691,63 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const {route} = this.props;
     const loadingTip = (this.props.Templates.sendingFile && (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) ? this.props.intl.formatMessage(messages.uploadingFile) : this.props.intl.formatMessage(messages.gettingAllTemplates);
     return (
-      <>
-        {activeMode === ACCOUNT_CHANGE_MODE && this.renderAccountSelection()}
-        <div className={`creatives-templates-list ${this.props.isFullMode ? 'full-mode' : 'library-mode'}`}>
-          <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
+      <div className={`creatives-templates-list ${this.props.isFullMode ? 'full-mode' : 'library-mode'}`}>
+        <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
 
 
-          <CapRow>
-            <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
-              {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
-            </Pagination>
-            {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
+        <CapRow>
+          <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
+            {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
+          </Pagination>
+          {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
               <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
             </div>}
-          </CapRow>
-
-
-          <CapRow>
-            {!isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
-            <CreativesContainer
-              key={creativesParams.mode}
-              messageDetails={{type: "default"}}
-              creativesMode={creativesParams.mode}
-              messages={messages}
-              isFullMode={isFullMode}
-              templateData={creativesParams}
-              getCreativesData={() => { this.onCreateComplete(true); }}
-              channel={route.name.toUpperCase()}
-              handleCloseCreatives={this.onCreateComplete}
-              selectedWeChatAccount={get(this.props, 'Templates.selectedWeChatAccount', {})}
+        </CapRow>
+
+
+        <CapRow>
+          {!isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
+          <CreativesContainer
+            key={creativesParams.mode}
+            messageDetails={{type: "default"}}
+            creativesMode={creativesParams.mode}
+            messages={messages}
+            isFullMode={isFullMode}
+            templateData={creativesParams}
+            getCreativesData={() => { this.onCreateComplete(true); }}
+            channel={route.name.toUpperCase()}
+            handleCloseCreatives={this.onCreateComplete}
+            selectedWeChatAccount={get(this.props, 'Templates.selectedWeChatAccount', {})}
             />
           }
-          </CapRow>
-          <CapRow>
-
-            {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
-              header={previewHeader}
-              content={htmlPreviewContent}
-              show={this.state.showHtmlPreview}
-              device={this.state.device}
-              handleClose={this.toggleEmailPreview}
-              changePreviewDevice={this.changePreviewDevice}
-              versions={get(this.state, 'previewTemplate.versions', {})}
-              lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
-              updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
+        </CapRow>
+        <CapRow>
+
+          {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
+            header={previewHeader}
+            content={htmlPreviewContent}
+            show={this.state.showHtmlPreview}
+            device={this.state.device}
+            handleClose={this.toggleEmailPreview}
+            changePreviewDevice={this.changePreviewDevice}
+            versions={get(this.state, 'previewTemplate.versions', {})}
+            lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
+            updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
           />}
-            <CapSlideBox
-              header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
-              width={60}
-              content={cmsTemplateSelectionContent}
-              show={this.state.showEdmEmailTemplates}
-              handleClose={this.toggleEdmEmailTemplateSelection}
-              loadingText={"Loading EDM Templates"}
-              isLoading={this.props.Templates.getCmsTemplatesInProgress}
+          <CapSlideBox
+            header={(<h3>{this.props.intl.formatMessage(messages.layoutSelection)}</h3>)}
+            width={60}
+            content={cmsTemplateSelectionContent}
+            show={this.state.showEdmEmailTemplates}
+            handleClose={this.toggleEdmEmailTemplateSelection}
+            loadingText={"Loading EDM Templates"}
+            isLoading={this.props.Templates.getCmsTemplatesInProgress}
             />
-            {this.renderDeleteConfirmationModal()}
-          </CapRow>
+          {this.renderDeleteConfirmationModal()}
+        </CapRow>
 
-        </div>
-      </>
+      </div>
     );
   }
 

package/v2Containers/TemplatesV2/_templatesV2.scss

@@ -0,0 +1,5 @@
+.cap-tab-v2-wrapper{
+    .ant-tabs-tabpane {
+        border: none;
+    }
+}

package/v2Containers/TemplatesV2/index.js

@@ -5,16 +5,18 @@
  */
 
 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 isEmpty from 'lodash/isEmpty';
 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';
@@ -22,17 +24,33 @@ import * as actions from './actions';
 import Templates from '../Templates';
 import CallTask from '../CallTask';
 import Gallery from '../Assets/Gallery';
-import withStyles from '../../hoc/withStyles';
-import styles, { CapTabStyle } from './TemplatesV2.style';
+import './_templatesV2.scss';
 
 const {CapCustomCardList} = CapCustomCard;
 
-const StyledCapTab = withStyles(CapTab, CapTabStyle);
-
+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}` : ``
+}
+`;
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
-    let defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
+    const defaultChannel = get(this, 'props.channel') || get(this, 'props.params.channel') || 'sms';
     const defaultPanes = {
       sms: {content: <div></div>, tab: props.intl.formatMessage(messages.sms), key: 'sms'},
       email: {content: <div></div>, tab: props.intl.formatMessage(messages.email), key: 'email'},
@@ -41,8 +59,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       mPush: {content: <div></div>, tab: props.intl.formatMessage(messages.pushNotification), key: 'mobilepush'},
     };
     const channelsToHide = this.props.channelsToHide || [];
-    const channelsToDisable = this.props.channelsToDisable || [];
-    let filteredPanes = Object.keys(defaultPanes)
+
+    const filteredPanes = Object.keys(defaultPanes)
       .filter((key) => !channelsToHide.includes(key)).reduce((obj = [], key) => {
         obj.push(defaultPanes[key]);
         return obj;
@@ -54,31 +72,11 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       filteredPanes.push({content: <div></div>, tab: props.intl.formatMessage(messages.callTask), key: 'call_task'});
     }
 
-    filteredPanes = filteredPanes.map( (pane) => {
-      if (channelsToDisable.includes(pane.key)) {
-        pane.disabled = true;
-      }
-    return pane;
-    });
-
-    const channel = ['sms', 'email', 'mobilepush', 'call_task'];
-    if (!isEmpty(channelsToDisable)) {
-      channel.some((ch) => {
-        if (!channelsToDisable.includes(ch)) {
-          defaultChannel = ch;
-          return true;
-        }
-        return false;
-      });
-    }
-
     const panes = this.setChannelContent(defaultChannel, filteredPanes);
-
     this.state = {
       selectedChannel: defaultChannel,
       panes,
     };
-    !props.isFullMode && this.props.onChannelChange(defaultChannel);
   }
   componentWillReceiveProps(nextProps) {
     if (this.props.channel !== nextProps.channel) {
@@ -149,20 +147,21 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     }
   }
 
-  setChannelContent = (selectedChannel, argsPanes) => (
-    argsPanes.map((pane) => {
-      let content = null;
+  setChannelContent = (selectedChannel, argsPanes) => {
+    const panes = argsPanes.map((p) => {
+      const pane = p;
       if (pane.key === selectedChannel) {
-        const channel = selectedChannel === "mpush" ? "mobilepush" : selectedChannel;
-        content = this.getTemplatesComponent(channel);
+        let channel = selectedChannel;
+        if (channel === "mpush") {
+          channel = "mobilepush";
+        }
+        pane.content = this.getTemplatesComponent(channel);
+        return pane;
       }
-      return {
-        ...pane,
-        content,
-      };
-    })
-  );
-
+      return {...pane, content: <div></div>};
+    });
+    return panes;
+  }
   channelChange = (selectedChannel) => {
     const panes = this.setChannelContent(selectedChannel, this.state.panes);
     this.setState({panes, selectedChannel}, () => { if (!this.props.isFullMode) this.props.onChannelChange(selectedChannel); });
@@ -173,25 +172,28 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     return this.props.Templates.loadingTemplates;
   }
   render() {
-    const { isFullMode, className } = this.props;
+    const {isFullMode} = this.props;
     return (
-      <div className={`${className} creatives-templates-container ${isFullMode ? 'fullmode' : 'library-mode'}`}>
+      <div 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) },
           ]}
         />}
-        <div className="component-wrapper">
+        <ComponentWrapper isFullMode={isFullMode}>
+
           {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
-          <StyledCapTab
-            panes={this.state.panes}
-            onChange={this.channelChange}
-            activeKey={this.state.selectedChannel}
-            defaultActiveKey={this.state.selectedChannel}
-            isFullMode={isFullMode}
-          />
-        </div>
+          <MarginTop isFullMode={isFullMode}>
+            <CapTab
+              panes={this.state.panes}
+              onChange={this.channelChange}
+              activeKey={this.state.selectedChannel}
+              defaultActiveKey={this.state.selectedChannel}/>
+          </MarginTop>
+
+
+        </ComponentWrapper>
       </div>
 
     );
@@ -211,8 +213,6 @@ TemplatesV2.propTypes = {
   intl: intlShape,
   onChannelChange: PropTypes.func,
   channelsToHide: PropTypes.array,
-  className: PropTypes.string.isRequired,
-  channelsToDisable: PropTypes.array,
 };
 
 TemplatesV2.defaultProps = {
@@ -230,4 +230,4 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
-export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(withStyles(TemplatesV2, styles))));
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(TemplatesV2)));

package/v2Containers/WeChat/MapTemplates/index.js

@@ -8,6 +8,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { bindActionCreators } from 'redux';
+import Helmet from 'react-helmet';
 import { intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { CapRow, CapColumn, CapSpin, CapCustomCard, CapButton, CapHeading } from '@capillarytech/cap-ui-library';
@@ -426,6 +427,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
 
   getFormData(formData) {
     let { editTemplateData} = this.state;
+    const { formData: stateFormData } = this.state;
     const selectedWeChatAccount = (!isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.WeChat.selectedWeChatAccount);
     if (isEmpty(editTemplateData)) {
       editTemplateData = formData;
@@ -1212,7 +1214,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
       if (!isLoading && this.props.setIsLoadingContent) {
         this.props.setIsLoadingContent(isLoading);
       }
-      return !!isLoading;
+      return isLoading;
     }
     
     render() {
@@ -1231,7 +1233,10 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
               tip={this.props.intl.formatMessage(messages.gettingTemplateData)}
               spinning={spinning}>
               <div>
-                <CapHeading type="h5"><FormattedMessage {...messages.templateName}/></CapHeading>
+                <Helmet
+                title="WeChat"
+                />
+                <CapHeading type="h5">Template name</CapHeading>
                 <CapHeading type="h3">{weChatData.title}</CapHeading>
                 <CapRow className="wechat-container">
                   <CapColumn>

package/v2Containers/WeChat/MapTemplates/messages.js

@@ -60,7 +60,7 @@ export default defineMessages({
   },
   "wechatEditSuccess": {
     id: 'creatives.containersV2.WeChat.wechatEditSuccess',
-    defaultMessage: "WeChat template edited successfully",
+    defaultMessage: "WeChat template unmapped successfully",
   },
   "wechatCreateSuccess": {
     id: 'creatives.containersV2.WeChat.wechatCreateSuccess',
@@ -87,23 +87,19 @@ export default defineMessages({
     defaultMessage: "has valid content.",
   },
   "select": {
-    id: 'creatives.containersV2.WeChat.select',
+    id: 'creatives.containers.WeChat.select',
     defaultMessage: 'Select',
   },
   "newWechat": {
-    id: 'creatives.containersV2.WeChat.newWechat',
+    id: 'creatives.containers.WeChat.newWechat',
     defaultMessage: 'New wechat',
   },
   "linkErrorMessage": {
-    id: 'creatives.containersV2.WeChat.linkErrorMessage',
+    id: 'creatives.containers.WeChat.linkErrorMessage',
     defaultMessage: 'Link cannot be empty.',
   },
   "hasInvalidContent": {
-    id: 'creatives.containersV2.WeChat.hasInvalidContent',
+    id: 'creatives.containers.WeChat.hasInvalidContent',
     defaultMessage: 'has invalid content.',
   },
-  "templateName": {
-    id: 'creatives.containersV2.WeChat.templateName',
-    defaultMessage: 'Template Name',
-  },
 });

package/v2Containers/WeChat/RichmediaTemplates/Create/_createRichmedia.scss

@@ -59,16 +59,6 @@
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
   }
-
-  .existing-template-title-card {
-    padding: 12px;
-    background-color: white;
-    height: 44px;
-    width: 244px;
-    border-bottom-left-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
-
   .custom-image {
     position: relative;
     .name-container {