@capillarytech/creatives-library 2.0.14 → 2.0.16

package/containers/CreativesContainer/SlideBoxContent.js

@@ -28,6 +28,8 @@ function SlideBoxContent(props) {
       onCreateNew,
       toggleShowSlideBox,
       showSlideBox,
+      currentChannel,
+      onChannelChange,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: 'embedded', module: 'library' };
@@ -42,8 +44,9 @@ function SlideBoxContent(props) {
   let isEmailEditWithContent = false;
   let isPreview = false;
   let isEmailPreview = false;
-  if (templateData) {
-    const channel = templateData.type;
+  let channel = currentChannel;//for create mode
+  if (templateData && channel) {
+    channel = templateData.type;// for edit mode with template data
     isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
     isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
     isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
@@ -61,6 +64,8 @@ function SlideBoxContent(props) {
         handlePeviewTemplate={onPreviewTemplate}
         location={location}
         createNew={onCreateNew}
+        channel={channel}
+        onChannelChange={onChannelChange}
         />
         )}
       {isPreview && (
@@ -147,5 +152,7 @@ SlideBoxContent.propTypes = {
   onCreateNew: PropTypes.func,
   toggleShowSlideBox: PropTypes.func,
   showSlideBox: PropTypes.bool,
+  onChannelChange: PropTypes.func,
+  currentChannel: PropTypes.string,
 };
 export default SlideBoxContent;

package/containers/CreativesContainer/index.js

@@ -19,8 +19,9 @@ class Creatives extends React.Component {
     super(props);
     this.state = {
       showSlideBox: true,
-      slidBoxContent: this.getSlideBocContent({mode: props.creativesMode, templateData: props.templateData}),
+      slidBoxContent: this.getSlideBocContent({mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode}),
       templateData: this.getTemplateData(props.templateData),
+      currentChannel: this.props.channel || 'sms',
     };
   }
   componentWillUnmount() {
@@ -44,27 +45,13 @@ class Creatives extends React.Component {
   onShowTemplates = () => {
     this.setState({ slidBoxContent: 'templates', showSlideBox: true });
   };
-  getSlideBocContent({mode, templateData}) {
-    let creativesMode = 'templates';
-    if (mode === 'create' && isEmpty(templateData)) {
-      creativesMode = 'templates';
-    } else if (mode === 'edit') {
-      creativesMode = 'editTemplate';
-    }
-    return creativesMode;
+  onChannelChange = (channel) => {
+    this.setState({currentChannel: channel});
   }
-  getCreativesData = (channel, template) => { //from creatives to consumers
-    const templateData = {channel };
-    if (channel === constants.SMS && template.value.base) {
-      templateData.messageBody = template.value.base['sms-editor'];
-    } else if (channel === constants.EMAIL && template.value.base) {
-      templateData.emailBody = template.value.base.html_content;
-      templateData.emailSubject = template.value.base.subject;
-    }
-    return templateData;
-  };
+
   getTemplateData = (templateData) => { //from consumers to creatives
-    if (templateData) {
+    const {isFullMode} = this.props;
+    if (!isFullMode && templateData) { // for component mode
       const {channel} = templateData;
       let creativesTeplateData = {type: channel };
       if (channel === constants.SMS) {
@@ -99,6 +86,27 @@ class Creatives extends React.Component {
     return null;
   }
 
+  getCreativesData = (channel, template) => { //from creatives to consumers
+    const templateData = {channel };
+    if (channel === constants.SMS && template.value.base) {
+      templateData.messageBody = template.value.base['sms-editor'];
+    } else if (channel === constants.EMAIL && template.value.base) {
+      templateData.emailBody = template.value.base.html_content;
+      templateData.emailSubject = template.value.base.subject;
+    }
+    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) {
+      creativesMode = 'createTemplate';
+    } else if (mode === 'create' && isEmpty(templateData)) {
+      creativesMode = 'templates';
+    } else if (mode === 'edit') {
+      creativesMode = 'editTemplate';
+    }
+    return creativesMode;
+  }
   getFormData = (template) => {
     if (template.validity) {
       this.setState(
@@ -123,7 +131,8 @@ class Creatives extends React.Component {
     this.setState({ isGetFormData: true });
   };
   render() {
-    const {slidBoxContent, isGetFormData, showSlideBox, templateData} = this.state;
+    const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel} = this.state;
+    const {isFullMode} = this.props;
     return (
       <div className={classnames(`${classPrefix}`)}>
         <CapSlideBox
@@ -148,6 +157,9 @@ class Creatives extends React.Component {
               isGetFormData={isGetFormData}
               toggleShowSlideBox={this.toggleShowSlideBox}
               showSlideBox={showSlideBox}
+              isFullMode={isFullMode}
+              currentChannel={currentChannel}
+              onChannelChange={this.onChannelChange}
             />
           }
           footer={
@@ -175,5 +187,7 @@ Creatives.propTypes = {
   location: PropTypes.object,
   handleCloseCreatives: PropTypes.func,
   templateData: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  channel: PropTypes.string,
 };
 export default injectIntl(Creatives);

package/containers/CreativesContainer/index.scss

@@ -1,4 +1,4 @@
-@import '@capillarytech/cap-ui-library/styles/_variables.scss';
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 $classPrefix: add-creatives-section;
 

package/containers/Templates/index.js

@@ -44,6 +44,7 @@ import * as commonUtil from '../../utils/common';
 import SlideBox from '../../components/SlideBox';
 import Pagination from '../../components/Pagination';
 import EmailPreview from '../../components/EmailPreview';
+import CreativesContainer from '../CreativesContainer';
 const MenuItem = Menu.Item;
 const Option = Select.Option;
 const BreadcrumbItem = Breadcrumb.Item;
@@ -307,10 +308,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.props.createNew();
         return;
       }
-      this.props.router.push({
+      this.setState({routeParams: {
         pathname: `/${nextProps.route.name.toLowerCase()}/create`,
         query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
-      });
+      }});
     }
 
     if (!nextProps.Templates.sendingFile && !_.isEqual(this.props.Templates.sendingFile, nextProps.Templates.sendingFile) && nextProps.Templates.errorSendingFile) {
@@ -369,26 +370,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.getAllTemplates({params, resetPage: true});
     });
   }
+  onPaginationChange = () => { this.getAllTemplates({getNextPage: true}); }
 
-  setLocale = () => {
-    const user = localStorage.getItem('user');
-    let locale = 'en';
-    if (user) {
-      locale = JSON.parse(user).lang;
-    }
-    locale = this.getMappedLocale(locale);
-    //locale = 'zh';
-    console.log('Setting final locale as', locale);
-    moment.locale(locale);
-  };
-
-  getMappedLocale = (locale) => {
-    const map = {
-      'en': 'en',
-      'zh-cn': 'zh',
-    };
-    return map[locale];
-  };
 
   getAllTemplates = ({params, getNextPage, resetPage}, resetTemplates) => {
     let queryParams = params;
@@ -435,7 +418,24 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     }
   };
-
+  getMappedLocale = (locale) => {
+    const map = {
+      'en': 'en',
+      'zh-cn': 'zh',
+    };
+    return map[locale];
+  };
+  setLocale = () => {
+    const user = localStorage.getItem('user');
+    let locale = 'en';
+    if (user) {
+      locale = JSON.parse(user).lang;
+    }
+    locale = this.getMappedLocale(locale);
+    //locale = 'zh';
+    console.log('Setting final locale as', locale);
+    moment.locale(locale);
+  };
   getCurrentWindow(e) {
     console.log('in sms templates', e);
     const response = {
@@ -445,39 +445,49 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     };
     parent.postMessage(JSON.stringify(response), '*');
   }
-
+  getCreativesMode = () => {
+    const routeParams = this.state.routeParams;
+    let creativesMode = '';
+    if (routeParams) {
+      if (routeParams.pathname.indexOf('create') > -1) {
+        creativesMode = 'create';
+      }
+    }
+    return creativesMode;
+  }
   skipTemplateSelection = (e) => {
     console.log("vvv", e);
     const type = this.props.location.query.type;
     const module = (type === 'embedded') ? this.props.location.query.module : 'default';
+    let routeParams = {};
     if (this.state.channel.toLowerCase() === 'email') {
       const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
-      this.props.router.push({
+      routeParams = {
         pathname: `/email/view`,
         query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {},
-      });
+      };
     } else if (this.state.channel.toLowerCase() === 'sms') {
-      this.props.router.push({
+      routeParams = {
         pathname: `/sms/view`,
         query: type === 'embedded' ? {type: 'embedded', module} : {},
-      });
+      };
     } else if (this.state.channel.toLowerCase() === 'mobilepush') {
-      this.props.router.push({
+      routeParams = {
         pathname: `/mobilepush/edit/${e.template_id}`,
         query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id} : {},
-      });
+      };
     } else if (this.state.channel.toLowerCase() === 'wechat') {
-      this.props.router.push({
+      routeParams = {
         pathname: `/wechat/edit/${e.template_id}`,
         query: type === 'embedded' ? {type: 'embedded', module, source_account_id: e.source_account_id} : {},
-      });
+      };
     } else if (this.state.channel.toLowerCase() === 'line') {
-      this.props.router.push({
+      routeParams = {
         pathname: `/line/view/${e.msg_type}/`,
         query: type === 'embedded' ? {type: 'embedded', module, account_id: e.account_id } : {},
-      });
+      };
     }
-    this.setState({loading: true});
+    this.setState({loading: true, routeParams});
   }
 
   handleMenuAction = (item, key) => {
@@ -494,6 +504,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   handleBlankTemplateAction = (item, channel) => {
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+    let routeParams = {};
     if (item === "uploadFile") {
       document.getElementById('filename').click();
     } else if (item === "editor") {
@@ -501,16 +512,17 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     } else if (this.isEnabledInLibraryModule("callCreateFromProps")) {
       this.props.createNew(item);
     } else if (item === 'textTemplate') {
-      this.props.router.push({
+      routeParams = {
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/text`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      });
+      };
     } else if (item === 'imageTemplate') {
-      this.props.router.push({
+      routeParams = {
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/image`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      });
+      };
     }
+    this.setState({routeParams});
   }
 
   handleFileUpload = (e, {files}) => {
@@ -539,10 +551,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.props.createNew();
           return;
         }
-        this.props.router.push({
+        this.setState({routeParams: {
           pathname: `/${this.props.route.name.toLowerCase()}/create`,
           query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
-        });
+        }});
       };
       reader.readAsText(files[0]);
     } else {
@@ -555,10 +567,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     // const index = _.findIndex(this.props.Templates.weCRMtemplates, {template_id: key});
     // console.log('Wechat menu clicked ', item, key, index);
     const type = this.props.location.query.type;
-    this.props.router.push({
+    this.setState({routeParams: {
       pathname: `/wechat/create`,
       query: type === 'embedded' ? {type: 'embedded'} : {},
-    });
+    }});
   }
 
   prepareWeChatPreviewData(content, templateTags, tagData) {
@@ -722,19 +734,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
     const channel = this.state.channel.toLowerCase();
     //const keyType = ev.key && ev.key.toLowerCase() !== undefined ? ev.state.toLowerCase() : '';
+    let routeParams = {};
     if (this.isEnabledInLibraryModule("callCreateFromProps")) {
       this.props.createNew();
     } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
-      this.props.router.push({
+      routeParams = {
         pathname: `/${channel === 'line' ? 'line' : 'mobilepush'}/create/${ev.key.toLowerCase()}`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      });
+      };
     } else {
-      this.props.router.push({
-        pathname: `/${this.state.channel.toLowerCase()}/create`,
+      routeParams = {
+        pathname: `/templates/${this.state.channel.toLowerCase()}/create`,
         query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      });
+      };
     }
+    this.setState({routeParams});
   }
 
   searchTemplate(data) {
@@ -862,10 +876,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.props.createNew();
         return;
       }
-      this.props.router.push({
+      this.setState({routeParams: {
         pathname: `/${this.state.channel.toLowerCase()}/create`,
         query: getQuery,
-      });
+      }});
     }
   };
 
@@ -907,10 +921,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === 'ebill') {
         pathName = `/ebill/edit/${id}`;
       }
-      this.props.router.push({
+      this.setState({routeParams: {
         pathname: pathName,
         query: getQuery,
-      });
+      }});
     }
   }
 
@@ -1227,30 +1241,30 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         pageHeaderText = this.props.intl.formatMessage(messages.lineHeader);
       }
     }
-    const options = [
-      {
-        value: "Most Recent",
-        label: this.props.intl.formatMessage(messages.mostRecentOption),
-      },
-      {
-        value: "Alphabetically",
-        label: this.props.intl.formatMessage(messages.alphabeticallyOption),
-      },
-    ];
-    const typeOptions = [
-      {
-        value: "All",
-        label: "All",
-      },
-      {
-        label: "Text",
-        value: 'Text',
-      },
-      {
-        label: "Image",
-        value: "Image",
-      },
-    ];
+    // const options = [
+    //   {
+    //     value: "Most Recent",
+    //     label: this.props.intl.formatMessage(messages.mostRecentOption),
+    //   },
+    //   {
+    //     value: "Alphabetically",
+    //     label: this.props.intl.formatMessage(messages.alphabeticallyOption),
+    //   },
+    // ];
+    // const typeOptions = [
+    //   {
+    //     value: "All",
+    //     label: "All",
+    //   },
+    //   {
+    //     label: "Text",
+    //     value: 'Text',
+    //   },
+    //   {
+    //     label: "Image",
+    //     value: "Image",
+    //   },
+    // ];
     const filterContent = (
       <div className="action-container">
         <CapInput
@@ -1261,24 +1275,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           value={this.state.searchText}
           onChange={(e) => this.searchTemplate(e.target.value)}
         />
-        {this.props.isComponent ? <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-          <CapButton type="secondary" onClick={() => this.props.isComponent ? this.handleBlankTemplateAction() : this.createTemplate()}>{ this.props.intl.formatMessage(messages.createNewActionButton) }</CapButton>
+        <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
+          <CapButton
+            type={this.props.isFullMode ? "primary" : "secondary"}
+            onClick={(ev) => this.props.isFullMode ? this.createTemplate(ev) : this.handleBlankTemplateAction()} >
+            { this.props.intl.formatMessage(messages.createNewActionButton) }
+          </CapButton>
         </div>
-        :
-        <div className="action-container">
-          <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-            <div className="select-font">{this.props.intl.formatMessage(messages.sortBy)}</div>
-            <CapSelect key={"select-account"} style={{width: '120px', marginLeft: '16px', minWidth: 'initial'}} defaultValue="Most Recent" onChange={this.handleSortBy} options={options}>
-            </CapSelect>
-          </div>
-          { (this.state.channel.toLowerCase() === 'mobilepush' || this.state.channel.toLowerCase() === 'line') &&
-            <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center', marginLeft: '16px'}}>
-              <div className="select-font">Type</div>
-              <CapSelect key={"select-type"} style={{width: '120px', marginLeft: '16px', minWidth: 'initial'}} defaultValue="All" onChange={this.handleType} options={typeOptions}>
-              </CapSelect>
-            </div>
-          }
-        </div>}
+
       </div>
     );
     const accountOptions = [];
@@ -1322,7 +1326,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const pageHeader = (
       <div>
         {(this.props.location.query.type !== 'embedded') && `${pageHeaderText}`}
-        {!this.props.isComponent && templateText}
+        {this.props.isFullMode && templateText}
         {(this.isEnabledInLibraryModule("showAccountSelection") || (((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && (this.props.location.query.type !== 'embedded') && !_.isEmpty(this.props.Templates.weCrmAccounts)))) &&
           <CapSelect className="selectAccount" onSelect={this.onAccountSelect} value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined} placeholder={this.props.intl.formatMessage(messages.selectAccount)}>
             {accountOptions}
@@ -1461,6 +1465,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const templateList = this.populateTemplatesList(this.props.TemplatesList, true);
 
     const isSearch = this.props.Templates.isSearch;
+    const creativesMode = this.getCreativesMode();
+    const {isFullMode, route} = this.props;
     return (
       <div>
         <Spin
@@ -1470,7 +1476,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
           <Row>
             <Col>
-              {(!this.props.isComponent || this.props.location.query.type !== "embedded") &&
+              {(this.props.isFullMode || this.props.location.query.type !== "embedded") &&
                 <Breadcrumb>
                   <BreadcrumbItem>{this.props.intl.formatMessage(messages.campaigns)}</BreadcrumbItem>
                   <BreadcrumbItem>{this.props.intl.formatMessage(messages.creatives)}</BreadcrumbItem>
@@ -1481,7 +1487,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           </Row>
           <Row className="template-header-container">
             <div className="template-header">{(this.props.location.query.type === 'embedded' && moduleName === 'dvs') ? pageHeaderDvs : pageHeader}</div>
-            {!this.props.isComponent && actionButton}
           </Row>
           <Row>
             <Helmet
@@ -1491,9 +1496,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               ]}
             />
             {this.props.renderNewCardGrid && templateList && templateList.length > 0 &&
-              this.props.renderNewCardGrid({templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})
+              <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
+                  {this.props.renderNewCardGrid({templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
+              </Pagination>
             }
-            {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) && <Pagination onPageChange={() => { console.log('getting all templates pagination'); this.getAllTemplates({getNextPage: true}); }} paginationSelector="pagination-container">
+            {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) &&
+            <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
               <CardGrid
                 className={this.state.channel.toLowerCase() === "mobilepush" ? "mobilepush-templates" : ""}
                 listItem={templateList}
@@ -1512,6 +1520,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             </div>}
           </Row>
           <Row>
+            {!_.isEmpty(creativesMode) && isFullMode &&
+              <CreativesContainer
+                messageDetails={{type: "default"}}
+                creativesMode={creativesMode}
+                messages={messages}
+                isFullMode={isFullMode}
+                channel={route.name.toUpperCase()}/>
+            }
             <PreviewSideBar
               showPreview={this.state.previewOpen}
               templateData={this.state.previewTemplate}
@@ -1569,7 +1585,7 @@ Templates.propTypes = {
   createNew: PropTypes.func,
   onSelectTemplate: PropTypes.func,
   lineActions: PropTypes.object,
-  isComponent: PropTypes.bool,
+  isFullMode: PropTypes.bool,
   renderNewCardGrid: PropTypes.func,
 };
 

package/containers/Templates/messages.js

@@ -4,234 +4,258 @@
  * This contains all the text for the Templates component.
  */
 import { defineMessages } from 'react-intl';
-
+const scope = `app.containers.Templates`;
 export default defineMessages({
   "header": {
-    id: 'app.containers.Templates.header',
-    defaultMessage: 'This is Templates container !',
+    id: `${scope}.header`,
+    defaultMessage: `This is Templates container !`,
   },
   "uploadedAt": {
-    id: 'app.containers.Templates.uploadedAt',
-    defaultMessage: 'Modified',
+    id: `${scope}.uploadedAt`,
+    defaultMessage: `Modified`,
   },
   "uploadedBy": {
-    id: 'app.containers.Templates.uploadedBy',
-    defaultMessage: 'Uploaded By',
+    id: `${scope}.uploadedBy`,
+    defaultMessage: `Uploaded By`,
   },
   "mapTemplate": {
-    id: 'app.containers.Templates.mapTemplate',
-    defaultMessage: 'Map Template',
+    id: `${scope}.mapTemplate`,
+    defaultMessage: `Map Template`,
   },
   "somethingWentWrong": {
-    id: 'app.containers.Templates.somethingWentWrong',
-    defaultMessage: 'Something Went Wrong!!',
+    id: `${scope}.somethingWentWrong`,
+    defaultMessage: `Something Went Wrong!!`,
   },
   "wechatHeader": {
-    id: 'app.containers.Templates.wechatHeader',
-    defaultMessage: 'WECHAT',
+    id: `${scope}.wechatHeader`,
+    defaultMessage: `WECHAT`,
   },
   "smsHeader": {
-    id: 'app.containers.Templates.smsHeader',
-    defaultMessage: 'SMS',
+    id: `${scope}.smsHeader`,
+    defaultMessage: `SMS`,
   },
   "emailHeader": {
-    id: 'app.containers.Templates.emailHeader',
-    defaultMessage: 'Email',
+    id: `${scope}.emailHeader`,
+    defaultMessage: `Email`,
   },
   "mobilepushHeader": {
-    id: 'app.containers.Templates.mobilepushHeader',
-    defaultMessage: 'Mobile Push',
+    id: `${scope}.mobilepushHeader`,
+    defaultMessage: `Mobile Push`,
   },
   "ebillHeader": {
-    id: 'app.containers.Templates.ebillHeader',
-    defaultMessage: 'Ebill',
+    id: `${scope}.ebillHeader`,
+    defaultMessage: `Ebill`,
   },
   "lineHeader": {
-    id: 'app.containers.Templates.lineHeader',
-    defaultMessage: 'Line',
+    id: `${scope}.lineHeader`,
+    defaultMessage: `Line`,
   },
   "selectWechatHeader": {
-    id: 'app.containers.Templates.selectWechatHeader',
-    defaultMessage: 'Select WECHAT Template',
+    id: `${scope}.selectWechatHeader`,
+    defaultMessage: `Select WECHAT Template`,
   },
   "selectSmsHeader": {
-    id: 'app.containers.Templates.selectSmsHeader',
-    defaultMessage: 'Select SMS Template',
+    id: `${scope}.selectSmsHeader`,
+    defaultMessage: `Select SMS Template`,
   },
   "selectAccount": {
-    id: 'app.containers.Templates.selectAccount',
+    id: `${scope}.selectAccount`,
     defaultMessage: "Select Account",
   },
   "gettingAllTemplates": {
-    id: 'app.containers.Templates.gettingAllTemplates',
+    id: `${scope}.gettingAllTemplates`,
     defaultMessage: "Getting all templates...",
   },
   "smsChannelTemplatesHeader": {
-    id: 'app.containers.Templates.smsChannelTemplatesHeader',
+    id: `${scope}.smsChannelTemplatesHeader`,
     defaultMessage: "SMS Templates",
   },
   "wechatChannelTemplatesHeader": {
-    id: 'app.containers.Templates.wechatChannelTemplatesHeader',
+    id: `${scope}.wechatChannelTemplatesHeader`,
     defaultMessage: "WECHAT Templates",
   },
   "blankTemplate": {
-    id: 'app.containers.Templates.blankTemplate',
+    id: `${scope}.blankTemplate`,
     defaultMessage: "Blank Template",
   },
   "selectButton": {
-    id: 'app.containers.Templates.selectButton',
+    id: `${scope}.selectButton`,
     defaultMessage: "Select",
   },
   "previewButton": {
-    id: 'app.containers.Templates.previewButton',
+    id: `${scope}.previewButton`,
     defaultMessage: "Preview",
   },
   "editButton": {
-    id: 'app.containers.Templates.editButton',
+    id: `${scope}.editButton`,
     defaultMessage: "Edit",
   },
   "duplicateButton": {
-    id: 'app.containers.Templates.duplicateButton',
+    id: `${scope}.duplicateButton`,
     defaultMessage: "Duplicate",
   },
   "deleteButton": {
-    id: 'app.containers.Templates.deleteButton',
+    id: `${scope}.deleteButton`,
     defaultMessage: "Delete",
   },
   "mostRecentOption": {
-    id: 'app.containers.Templates.mostRecentOption',
+    id: `${scope}.mostRecentOption`,
     defaultMessage: "Most Recent",
   },
   "alphabeticallyOption": {
-    id: 'app.containers.Templates.alphabeticallyOption',
+    id: `${scope}.alphabeticallyOption`,
     defaultMessage: "Alphabetically",
   },
   "searchText": {
-    id: 'app.containers.Templates.searchText',
+    id: `${scope}.searchText`,
     defaultMessage: "Search",
   },
   "noAccountMessage": {
-    id: 'app.containers.Templates.noAccountMessage',
+    id: `${scope}.noAccountMessage`,
     defaultMessage: "Please select an account to proceed",
   },
   "noTemplatesMessage": {
-    id: 'app.containers.Templates.noTemplatesMessage',
+    id: `${scope}.noTemplatesMessage`,
     defaultMessage: "No Templates Available",
   },
   "createSmsActionButton": {
-    id: 'app.containers.Templates.createSmsActionButton',
+    id: `${scope}.createSmsActionButton`,
     defaultMessage: "Create SMS",
   },
   "createEmailActionButton": {
-    id: 'app.containers.Templates.createEmailActionButton',
+    id: `${scope}.createEmailActionButton`,
     defaultMessage: "Create Email",
   },
   "sortBy": {
-    id: 'app.containers.Templates.sortBy',
+    id: `${scope}.sortBy`,
     defaultMessage: "Sort by",
   },
   "unMapButton": {
-    id: 'app.containers.Templates.unMapButton',
+    id: `${scope}.unMapButton`,
     defaultMessage: "Unmap",
   },
   "templateDuplicateSuccess": {
-    id: 'app.containers.Templates.templateDuplicateSuccess',
+    id: `${scope}.templateDuplicateSuccess`,
     defaultMessage: "Template Duplicated Successfully",
   },
   "templateDeleteSuccess": {
-    id: 'app.containers.Templates.templateDeleteSuccess',
+    id: `${scope}.templateDeleteSuccess`,
     defaultMessage: "SMS Template Deleted Successfully",
   },
   "uploadFile": {
-    id: 'app.containers.Templates.uploadFile',
+    id: `${scope}.uploadFile`,
     defaultMessage: "Upload File",
   },
   "useEditor": {
-    id: 'app.containers.Templates.useEditor',
+    id: `${scope}.useEditor`,
     defaultMessage: "Use Editor",
   },
   "newTemplate": {
-    id: 'app.containers.Templates.newTemplate',
+    id: `${scope}.newTemplate`,
     defaultMessage: "New Template",
   },
   "uploadingFile": {
-    id: 'app.containers.Templates.uploadingFile',
+    id: `${scope}.uploadingFile`,
     defaultMessage: "Uploading File",
   },
   "zipUploadFailed": {
-    id: 'app.containers.Templates.zipUploadFailed',
-    defaultMessage: 'Failed to Upload zip file',
+    id: `${scope}.zipUploadFailed`,
+    defaultMessage: `Failed to Upload zip file`,
   },
   "campaigns": {
-    id: 'app.containers.Templates.campaigns',
-    defaultMessage: 'Campaigns',
+    id: `${scope}.campaigns`,
+    defaultMessage: `Campaigns`,
   },
   "creatives": {
-    id: 'app.containers.Templates.creatives',
-    defaultMessage: 'Creatives',
+    id: `${scope}.creatives`,
+    defaultMessage: `Creatives`,
   },
   "ebillPreview": {
-    id: 'app.containers.Templates.ebillPreview',
-    defaultMessage: 'Ebill Preview',
+    id: `${scope}.ebillPreview`,
+    defaultMessage: `Ebill Preview`,
   },
   "emailPreview": {
-    id: 'app.containers.Templates.emailPreview',
-    defaultMessage: 'Email Preview',
+    id: `${scope}.emailPreview`,
+    defaultMessage: `Email Preview`,
   },
   "Template deleted successfully": {
-    id: 'app.containers.Templates.deletedSuccssfully',
-    defaultMessage: 'Template deleted successfully',
+    id: `${scope}.deletedSuccssfully`,
+    defaultMessage: `Template deleted successfully`,
   },
   "Template deletion failed": {
-    id: 'app.containers.Templates.deletionFailed',
-    defaultMessage: 'Template deletion failed',
+    id: `${scope}.deletionFailed`,
+    defaultMessage: `Template deletion failed`,
   },
   "preview": {
-    id: 'app.containers.Templates.preview',
-    defaultMessage: 'Preview',
+    id: `${scope}.preview`,
+    defaultMessage: `Preview`,
   },
   "invalidUploadFileError": {
-    id: 'app.containers.Templates.invalidUploadFileError',
-    defaultMessage: 'File cannot be uploaded. Please select another file with valid file format.',
+    id: `${scope}.invalidUploadFileError`,
+    defaultMessage: `File cannot be uploaded. Please select another file with valid file format.`,
   },
   "templateDeleteConfirm": {
-    id: 'app.containers.Templates.templateDeleteConfirm',
-    defaultMessage: 'Are you sure you want to delete this Template?',
+    id: `${scope}.templateDeleteConfirm`,
+    defaultMessage: `Are you sure you want to delete this Template?`,
   },
   "cancelText": {
-    id: 'app.containers.Templates.cancelText',
-    defaultMessage: 'Cancel',
+    id: `${scope}.cancelText`,
+    defaultMessage: `Cancel`,
   },
   "yesText": {
-    id: 'app.containers.Templates.yesText',
-    defaultMessage: 'Yes',
+    id: `${scope}.yesText`,
+    defaultMessage: `Yes`,
   },
   "templateSelection": {
-    id: 'app.containers.Templates.templateSelection',
-    defaultMessage: 'Template Selection',
+    id: `${scope}.templateSelection`,
+    defaultMessage: `Template Selection`,
   },
   "layoutSelection": {
-    id: 'app.containers.Templates.layoutSelection',
-    defaultMessage: 'Select Layout',
+    id: `${scope}.layoutSelection`,
+    defaultMessage: `Select Layout`,
   },
   "textTemplate": {
-    id: 'app.containers.Templates.textTemplate',
-    defaultMessage: 'Text',
+    id: `${scope}.textTemplate`,
+    defaultMessage: `Text`,
   },
   "imageTemplate": {
-    id: 'app.containers.Templates.imageTemplate',
-    defaultMessage: 'Image',
+    id: `${scope}.imageTemplate`,
+    defaultMessage: `Image`,
   },
   "selectDefaultButton": {
-    id: 'app.containers.Templates.selectDefaultButton',
-    defaultMessage: 'Select',
+    id: `${scope}.selectDefaultButton`,
+    defaultMessage: `Select`,
   },
   "previewGenerateText": {
-    id: 'app.containers.Templates.previewGenerateText',
-    defaultMessage: 'Preview is being generated...',
+    id: `${scope}.previewGenerateText`,
+    defaultMessage: `Preview is being generated...`,
   },
   "createNewActionButton": {
-    id: 'app.containers.Templates.createNewActionButton',
-    defaultMessage: 'Create new',
+    id: `${scope}.createNewActionButton`,
+    defaultMessage: `Create new`,
+  },
+  "creativeTemplates": {
+    id: `${scope}.creativeTemplates`,
+    defaultMessage: `Creative templates`,
+  },
+  "editMessageContent": {
+    id: `${scope}.editMessageContent`,
+    defaultMessage: `Edit message Content`,
+  },
+  "createMessageContent": {
+    id: `${scope}.editMessageContent`,
+    defaultMessage: `New message`,
+  },
+  "creativeTemplatesDesc": {
+    id: `${scope}.creativeTemplatesDesc`,
+    defaultMessage: `(Select only one creative)`,
+  },
+  "creativesTemplatesSave": {
+    id: `${scope}.creativesTemplatesSave`,
+    defaultMessage: `Done`,
+  },
+  "creativesTemplatesEdit": {
+    id: `${scope}.creativesTemplatesSave`,
+    defaultMessage: `Edit`,
   },
 });

package/containers/TemplatesV2/index.js

@@ -23,17 +23,25 @@ const {CapCustomCardList} = CapCustomCard;
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
+    const defaultChannel = this.props.channel || 'sms';
+    const deafaultPanes = [
+      {content: <div></div>, tab: 'Sms', key: 'sms'},
+      {content: <div></div>, tab: 'Email', key: 'email'},
+      // {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
+      // {content: this.getTemplatesComponent('mobilepush'), tab: 'Mpush', key: 'mobilepush'},
+    ];
+    const panes = this.setChannelContent(defaultChannel, deafaultPanes);
     this.state = {
-      selectedChannel: this.props.channel || 'sms',
-      panes: [
-        {content: this.getTemplatesComponent('sms'), tab: 'Sms', key: 'sms'},
-        {content: this.getTemplatesComponent('email'), tab: 'Email', key: 'email'},
-        {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat'},
-        {content: this.getTemplatesComponent('mobilepush'), tab: 'Mpush', key: 'mobilepush'},
-      ],
+      selectedChannel: defaultChannel,
+      panes,
     };
   }
-
+  componentWillReceiveProps(nextProps) {
+    if (this.props.channel !== nextProps.channel) {
+      const panes = this.setChannelContent(nextProps.channel, this.state.panes);
+      this.setState({selectedChannel: nextProps.channel, panes });
+    }
+  }
   getTemplateDataForGrid = ({templates, handlers, filterContent}) => {
     const cardDataList = templates.map((template) => (
       {
@@ -44,7 +52,9 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       }));
     return (<div>
       {filterContent}
-      <CapCustomCardList cardList={cardDataList} type="SMS" />
+      <div className="pagination-container">
+        <CapCustomCardList cardList={cardDataList} type="SMS" />
+      </div>
     </div>);
   }
   getTemplatesComponent(channel) {
@@ -58,32 +68,43 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       location={{pathname: `/${channel}`, search: '', query}}
       route={{name: channel}}
       router={this.props.router}
-      isComponent={!this.props.isFullMode}
+      isFullMode={this.props.isFullMode}
       createNew={this.props.createNew}
       onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
       renderNewCardGrid={this.getTemplateDataForGrid}
     />);
   }
-  selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
 
-  channelChange = (selectedChannel) => {
-    const panes = this.state.panes.map((p) => {
+  setChannelContent = (selectedChannel, argsPanes) => {
+    const panes = argsPanes.map((p) => {
       const pane = p;
       if (pane.key === selectedChannel) {
         pane.content = this.getTemplatesComponent(pane.tab.toLowerCase());
         return pane;
       }
-      return pane;
+      return {...pane, content: <div></div>};
     });
-    this.setState({panes, selectedChannel});
+    return panes;
   }
+  channelChange = (selectedChannel) => {
+    const panes = this.setChannelContent(selectedChannel, this.state.panes);
+    this.setState({panes, selectedChannel}, () => { this.props.onChannelChange(selectedChannel); });
+  }
+  selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
+
   isLoading() {
     return this.props.Templates.loadingTemplates;
   }
   render() {
     return (
       <div>
-        <CapTab panes={this.state.panes} onChange={this.channelChange} activeKey={this.state.selectedChannel} defaultActiveKey={this.state.selectedChannel}/>
+        <CapTab
+          panes={this.state.panes}
+          onChange={this.channelChange}
+          activeKey={this.state.selectedChannel}
+          defaultActiveKey={this.state.selectedChannel}/>
+
+
       </div>
 
     );
@@ -100,6 +121,7 @@ TemplatesV2.propTypes = {
   TemplatesList: PropTypes.arrayOf(PropTypes.object),
   handlePeviewTemplate: PropTypes.func,
   intl: intlShape,
+  onChannelChange: PropTypes.func,
 };
 
 TemplatesV2.defaultProps = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.14",
+  "version": "2.0.16",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -61,7 +61,7 @@
     "sanitize.css": "4.1.0",
     "semantic-ui-react": "0.68.3",
     "source-map-loader": "^0.2.4",
-    "styled-components": "1.1.2",
+    "styled-components": "2",
     "warning": "3.0.0",
     "whatwg-fetch": "2.0.1"
   }