@capillarytech/creatives-library 2.0.5 → 2.0.7

package/components/CapTagList/index.js

@@ -164,14 +164,17 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       {
         value: "All",
         label: "All",
+        key: 'all',
       },
       {
         value: "Outbound",
         label: "Outbound",
+        key: 'outbound',
       },
       {
         value: "Loyalty",
         label: "Loyalty",
+        key: 'loyalty',
       },
     ];
     return (
@@ -185,7 +188,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
               {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue="All" options={options}>
               </CapSelect> : ''}
               <CapTree
-                styling={{'height': '350px', 'overflow': 'auto'}}
+                styling={{height: '350px', overflow: 'auto'}}
                 onSelect={this.handleOnSelect}
                 selectedKeys={this.state.tagValue}
                 expandedKeys={this.state.expandedKeys}

package/containers/Cap/index.js

@@ -10,11 +10,11 @@ import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
+import isEqual from 'lodash/isEqual';
 import { injectIntl, intlShape } from 'react-intl';
 import TopBar from '../../components/TopBar';
 // import 'moment/locale/en-us';
 import Sidebar from '../../components/Sidebar';
-import isEqual from 'lodash/isEqual';
 import { makeSelectAuthenticated, makeSelectUser } from './selectors';
 import * as actions from './actions';
 import * as locationActions from '../LanguageProvider/actions';
@@ -314,7 +314,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
               logout={this.logout}
             /> : ''}
           <div className="main">
-            {loggedIn && type !== 'embedded' ? <div id="cap-sidebar" className={'sidebar'}>
+            {loggedIn && type !== 'embedded' && this.props.location.pathname !== 'templates' ? <div id="cap-sidebar" className={'sidebar'}>
               <Sidebar
                 menuData={menuData}
                 productMenuData={productMenuData}

package/containers/CreativesContainer/SlideBoxContent.js

@@ -0,0 +1,129 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import TemplatesV2 from '../TemplatesV2';
+import TemplatePreview from '../../components/TemplatePreview';
+import SmsCreate from '../Sms/Create';
+import SmsEdit from '../Sms/Edit';
+import Email from '../Email';
+import * as constants from './constants';
+const CreativesWrapper = styled.div`
+  .ant-popover,
+  .ant-notification,
+  .ant-modal-wrap {
+    z-index: 10003;
+  }
+`;
+function SlideBoxContent(props) {
+  const {
+      slidBoxContent,
+      onSelectTemplate,
+      onPreviewTemplate,
+      templateData,
+      location,
+      isGetFormData,
+      getFormData,
+      messageDetails,
+      onCreateNew,
+    } = props;
+  const query = { type: 'embedded', module: 'library' };
+  const creativesLocationProps = {
+    pathname: `/sms/edit`,
+    query,
+    search: '',
+  };
+  let isCreateSms = false;
+  let isEditSms = false;
+  let isEditEmailWithId = false;
+  let isEmailEditWithContent = false;
+  if (templateData) {
+    const channel = templateData.type;
+    isEditSms = slidBoxContent === 'editTemplate' && channel === constants.SMS;
+    isCreateSms = slidBoxContent === 'createTemplate' && channel === constants.SMS;
+    isEditEmailWithId = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && templateData._id;
+    isEmailEditWithContent = slidBoxContent === 'editTemplate' && channel === constants.EMAIL && !templateData._id;
+  }
+
+  return (
+    <CreativesWrapper>
+      {slidBoxContent === 'templates' && (
+      <TemplatesV2
+        isFullMode={false}
+        onSelectTemplate={onSelectTemplate}
+        handlePeviewTemplate={onPreviewTemplate}
+        location={location}
+        createNew={onCreateNew}
+        />
+        )}
+      {slidBoxContent === 'preview' && (
+      <TemplatePreview
+        content={templateData.versions.base['sms-editor']}
+        channel={templateData.type.toLowerCase()}
+        charCounterEnabled
+      />
+        )}
+      {isEditSms && (
+      <SmsEdit
+        location={creativesLocationProps}
+        route={{ name: 'sms' }}
+        isGetFormData={isGetFormData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={messageDetails.type}
+        subscriptionTemplateDetails={templateData}
+          />
+        )}
+      {isCreateSms && (
+      <SmsCreate
+        location={creativesLocationProps}
+        route={{ name: 'sms' }}
+        isComponent
+        isGetFormData={isGetFormData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={messageDetails.type}
+          />
+        )}
+      {isEditEmailWithId && (
+      <Email
+        location={{
+          pathname: `/email`,
+          query,
+        }}
+        route={{ name: 'email' }}
+        isGetFormData={isGetFormData}
+        getFormdata={getFormData}
+        params={{ id: templateData._id }}
+        templateData={templateData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={messageDetails.type}
+          />
+        )}
+      {isEmailEditWithContent && (
+      <Email
+        location={{
+          pathname: `/email`,
+          query,
+        }}
+        route={{ name: 'email' }}
+        isGetFormData={isGetFormData}
+        getFormdata={getFormData}
+        params={{ id: templateData._id }}
+        templateData={templateData}
+        getFormSubscriptionData={getFormData}
+        getDefaultTags={messageDetails.type}
+      />
+        )}
+    </CreativesWrapper>
+  );
+}
+SlideBoxContent.propTypes = {
+  slidBoxContent: PropTypes.node,
+  onSelectTemplate: PropTypes.func,
+  onPreviewTemplate: PropTypes.func,
+  templateData: PropTypes.object,
+  location: PropTypes.object,
+  isGetFormData: PropTypes.bool,
+  getFormData: PropTypes.func,
+  messageDetails: PropTypes.object,
+  onCreateNew: PropTypes.func,
+};
+export default SlideBoxContent;

package/containers/CreativesContainer/SlideBoxFooter.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { CapButton } from '@capillarytech/cap-ui-library';
+import PropTypes from 'prop-types';
+
+function SlideBoxHeader(props) {
+  const { slidBoxContent, onSave, messages, onEditTemplate } = props;
+
+  return (
+    <div>
+      {(slidBoxContent === 'editTemplate' ||
+          slidBoxContent === 'createTemplate') && (
+          <CapButton onClick={onSave}>
+            <FormattedMessage {...messages.creativesTemplatesSave} />
+          </CapButton>
+        )}
+      {slidBoxContent === 'preview' && (
+        <CapButton onClick={onEditTemplate} type="secondary">
+          <FormattedMessage {...messages.creativesTemplatesEdit} />
+        </CapButton>
+        )}
+    </div>
+  );
+}
+SlideBoxHeader.propTypes = {
+  slidBoxContent: PropTypes.node,
+  onSave: PropTypes.func,
+  messages: PropTypes.object,
+  onEditTemplate: PropTypes.func,
+};
+export default SlideBoxHeader;

package/containers/CreativesContainer/SlideBoxHeader.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+import { CapHeader, CapIcons } from '@capillarytech/cap-ui-library';
+import PropTypes from 'prop-types';
+
+const PrefixWrapper = styled.div`
+  margin-right: 16px;
+`;
+function SlideBoxHeader(props) {
+  const { slidBoxContent, messages, templateData, onShowTemplates } = props;
+  return (
+    <div>
+      {slidBoxContent === 'templates' && (
+      <CapHeader
+        title={<FormattedMessage {...messages.creativeTemplates} />}
+        description={
+          <FormattedMessage {...messages.creativeTemplatesDesc} />
+            }
+        inline
+          />
+        )}
+      {slidBoxContent === 'preview' && (
+      <CapHeader
+        title={templateData.name}
+        prefix={
+          <PrefixWrapper>
+            <CapIcons.backIcon onClick={onShowTemplates} />
+          </PrefixWrapper>
+            }
+          />
+        )}
+      {slidBoxContent === 'editTemplate' && (
+      <CapHeader
+        title={<FormattedMessage {...messages.editMessageContent} />}
+        prefix={
+          <PrefixWrapper>
+            <CapIcons.backIcon onClick={onShowTemplates} />
+          </PrefixWrapper>
+            }
+          />
+        )}
+      {slidBoxContent === 'createTemplate' && (
+      <CapHeader
+        title={<FormattedMessage {...messages.createMessageContent} />}
+        prefix={
+          <PrefixWrapper>
+            <CapIcons.backIcon onClick={onShowTemplates} />
+          </PrefixWrapper>
+            }
+          />
+        )}
+    </div>
+  );
+}
+SlideBoxHeader.propTypes = {
+  slidBoxContent: PropTypes.node,
+  messages: PropTypes.object,
+  templateData: PropTypes.object,
+  onShowTemplates: PropTypes.func,
+};
+export default SlideBoxHeader;

package/containers/CreativesContainer/actions.js

@@ -0,0 +1,15 @@
+/*
+ *
+ * CreativesContainer actions
+ *
+ */
+
+import {
+  DEFAULT_ACTION,
+} from './constants';
+
+export function defaultAction() {
+  return {
+    type: DEFAULT_ACTION,
+  };
+}

package/containers/CreativesContainer/constants.js

@@ -0,0 +1,9 @@
+/*
+ *
+ * CreativesContainer constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/CreativesContainer/DEFAULT_ACTION';
+export const EMAIL = "EMAIL";
+export const SMS = "SMS";

package/containers/CreativesContainer/index.js

@@ -0,0 +1,178 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import {
+  CapSlideBox,
+} from '@capillarytech/cap-ui-library';
+import { injectIntl } from 'react-intl';
+import classnames from 'classnames';
+import {isEmpty} from 'lodash';
+import SlideBoxContent from './SlideBoxContent';
+import SlideBoxHeader from './SlideBoxHeader';
+import SlideBoxFooter from './SlideBoxFooter';
+import * as constants from './constants';
+import './index.scss';
+
+
+const classPrefix = 'add-creatives-section';
+class Creatives extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showSlideBox: true,
+      slidBoxContent: this.getSlideBocContent({mode: props.creativesMode, templateData: props.templateData}),
+      templateData: this.getTemplateData(props.templateData),
+    };
+  }
+  componentWillUnmount() {
+    console.log("unmounting creatives");
+  }
+
+
+  onSelectTemplate = (template) => {
+    this.setState({ slidBoxContent: 'editTemplate', templateData: template });
+  };
+  onPreviewTemplate = (template) => {
+    this.setState({ slidBoxContent: 'preview', templateData: template });
+  };
+  onEditTemplate = () => {
+    this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
+  };
+  onCreateNew = () => {
+    this.setState({ slidBoxContent: 'createTemplate', showSlideBox: true });
+  };
+
+  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;
+  }
+  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 {channel} = templateData;
+      let creativesTeplateData = {type: channel };
+      if (channel === constants.SMS) {
+        const formData = {
+          "sms-editor": templateData.messageBody,
+        };
+        creativesTeplateData = {
+          type: channel,
+          name: "Campaign message SMS content",
+          versions: {
+            base: formData,
+            history: [formData],
+          },
+        };
+      } else if (channel === constants.EMAIL) {
+        const formData = {
+          subject: templateData.emailSubject,
+          html_content: templateData.emailBody,
+          is_drag_drop: false,
+          lang_id: 411,
+          iso_code: "en",
+          language: "English",
+        };
+        creativesTeplateData = {
+          base: formData,
+          edit: true,
+          type: channel,
+        };
+      }
+      return creativesTeplateData;
+    }
+    return null;
+  }
+
+  getFormData = (template) => {
+    if (template.validity) {
+      this.setState(
+        {
+          isGetFormData: false,
+        },
+        () => {
+          const channel = this.state.templateData.type;
+          const creativesData = this.getCreativesData(channel, template);// convers data to consumer understandable format
+          this.props.getCreativesData(creativesData);// send data to consumer
+        },
+      );
+    }
+  };
+  toggleShowSlideBox = () => {
+    this.setState((prevState) => ({
+      ...prevState,
+      templateData: undefined,
+    }), this.props.handleCloseCreatives);
+  };
+  saveMessage = () => {
+    this.setState({ isGetFormData: true });
+  };
+  render() {
+    const {slidBoxContent, isGetFormData, showSlideBox} = this.state;
+    const { templateData } = this.state;
+    return (
+      <div className={classnames(`${classPrefix}`)}>
+        <CapSlideBox
+          header={
+            <SlideBoxHeader
+              messages={this.props.messages}
+              slidBoxContent={this.state.slidBoxContent}
+              templateData={templateData}
+              onShowTemplates={this.onShowTemplates}
+            />
+          }
+          content={
+            <SlideBoxContent
+              onSelectTemplate={this.onSelectTemplate}
+              onPreviewTemplate={this.onPreviewTemplate}
+              slidBoxContent={slidBoxContent}
+              templateData={templateData}
+              location={this.props.location}
+              messageDetails={this.props.messageDetails}
+              getFormData={this.getFormData}
+              onCreateNew={this.onCreateNew}
+              isGetFormData={isGetFormData}
+            />
+          }
+          footer={
+            <SlideBoxFooter
+              messages={this.props.messages}
+              onSave={this.saveMessage}
+              onEditTemplate={this.onEditTemplate}
+              slidBoxContent={slidBoxContent}
+            />
+          }
+          handleClose={this.toggleShowSlideBox}
+          show={showSlideBox}
+          size="size-l"
+        />
+      </div>
+    );
+  }
+}
+
+Creatives.propTypes = {
+  getCreativesData: PropTypes.func,
+  messages: PropTypes.object,
+  messageDetails: PropTypes.object,
+  creativesMode: PropTypes.string,
+  location: PropTypes.object,
+  handleCloseCreatives: PropTypes.func,
+  templateData: PropTypes.object,
+};
+export default injectIntl(Creatives);

package/containers/CreativesContainer/index.scss

@@ -0,0 +1,20 @@
+@import '../../../node_modules/@capillarytech/cap-ui-library/styles/_variables.scss';
+
+$classPrefix: add-creatives-section;
+
+.#{$classPrefix} {
+    .#{$classPrefix}-footer {
+        position: absolute;
+        bottom: 0;
+        left: 1px;
+        padding: 0 12px;
+        display: flex;
+        align-items: center;
+        height: 48px;
+        border-top: 1px solid $CAP_G07;
+
+        &.with-creative {
+            width: 100%;
+        }
+    }
+}

package/containers/CreativesContainer/reducer.js

@@ -0,0 +1,23 @@
+/*
+ *
+ * CreativesContainer reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import {
+  DEFAULT_ACTION,
+} from './constants';
+
+const initialState = fromJS({});
+
+function creativesContainerReducer(state = initialState, action) {
+  switch (action.type) {
+    case DEFAULT_ACTION:
+      return state;
+    default:
+      return state;
+  }
+}
+
+export default creativesContainerReducer;

package/containers/CreativesContainer/sagas.js

@@ -0,0 +1,11 @@
+// import { take, call, put, select } from 'redux-saga/effects';
+
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in containers/HomePage/sagas.js
+}
+
+// All sagas to be loaded
+export default [
+  defaultSaga,
+];

package/containers/CreativesContainer/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the creativesContainer state domain
+ */
+const selectCreativesContainerDomain = () => (state) => state.get('creativesContainer');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by CreativesContainer
+ */
+
+const makeSelectCreativesContainer = () => createSelector(
+  selectCreativesContainerDomain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectCreativesContainer;
+export {
+  selectCreativesContainerDomain,
+};

package/containers/CreativesContainer/tests/actions.test.js

@@ -0,0 +1,18 @@
+
+import {
+  defaultAction,
+} from '../actions';
+import {
+  DEFAULT_ACTION,
+} from '../constants';
+
+describe('CreativesContainer actions', () => {
+  describe('Default Action', () => {
+    it('has a type of DEFAULT_ACTION', () => {
+      const expected = {
+        type: DEFAULT_ACTION,
+      };
+      expect(defaultAction()).toEqual(expected);
+    });
+  });
+});

package/containers/CreativesContainer/tests/index.test.js

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

package/containers/CreativesContainer/tests/reducer.test.js

@@ -0,0 +1,9 @@
+
+import { fromJS } from 'immutable';
+import creativesContainerReducer from '../reducer';
+
+describe('creativesContainerReducer', () => {
+  it('returns the initial state', () => {
+    expect(creativesContainerReducer(undefined, {})).toEqual(fromJS({}));
+  });
+});

package/containers/CreativesContainer/tests/sagas.test.js

@@ -0,0 +1,15 @@
+/**
+ * Test  sagas
+ */
+
+/* eslint-disable redux-saga/yield-effects */
+// import { take, call, put, select } from 'redux-saga/effects';
+// import { defaultSaga } from '../sagas';
+
+// const generator = defaultSaga();
+
+describe('defaultSaga Saga', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

package/containers/CreativesContainer/tests/selectors.test.js

@@ -0,0 +1,10 @@
+// import { fromJS } from 'immutable';
+// import { makeSelectCreativesContainerDomain } from '../selectors';
+
+// const selector = makeSelectCreativesContainerDomain();
+
+describe('makeSelectCreativesContainerDomain', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(true);
+  });
+});

package/containers/Email/index.js

@@ -2007,12 +2007,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
   showSubject = () => {
     const schema = _.cloneDeep(this.state.schema);
-    if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" || this.props.location.query.module === "coupon_expiry" ||
+    if (schema.standalone) {
+      if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" || this.props.location.query.module === "coupon_expiry" ||
       this.props.location.query.module === "library")) {
-      schema.standalone.sections[0].inputFields[0].style.display = "";
-      schema.standalone.sections[0].inputFields[0].labelStyle.display = "";
+        schema.standalone.sections[0].inputFields[0].style.display = "";
+        schema.standalone.sections[0].inputFields[0].labelStyle.display = "";
+      }
+      this.setState({schema});
     }
-    this.setState({schema});
   }
 
   handleOnItemClick = (isSelected, id) => {

package/containers/Templates/index.js

@@ -1262,7 +1262,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           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.state.channel.toUpperCase() === 'SMS' ? this.props.intl.formatMessage(messages.createSmsActionButton) : 'Create SMS'}</CapButton>
+          <CapButton type="secondary" onClick={() => this.props.isComponent ? this.handleBlankTemplateAction() : this.createTemplate()}>{ this.props.intl.formatMessage(messages.createNewActionButton) }</CapButton>
         </div>
         :
         <div className="action-container">
@@ -1557,7 +1557,7 @@ Templates.propTypes = {
   smsEditActions: PropTypes.object,
   ebillActions: PropTypes.object,
   emailActions: PropTypes.object,
-  TemplatesList: PropTypes.object,
+  TemplatesList: PropTypes.array,
   Templates: PropTypes.object,
   route: PropTypes.object,
   router: PropTypes.object,
@@ -1570,6 +1570,7 @@ Templates.propTypes = {
   onSelectTemplate: PropTypes.func,
   lineActions: PropTypes.object,
   isComponent: PropTypes.bool,
+  renderNewCardGrid: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/Templates/messages.js

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

package/containers/TemplatesV2/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { injectIntl } from 'react-intl';
+import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import { CapTab, CapCard, CapIcons, CapButton } from '@capillarytech/cap-ui-library';
@@ -26,10 +26,10 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     this.state = {
       selectedChannel: this.props.channel || 'sms',
       panes: [
-        {content: this.getTemplatesComponent('sms'), tab: 'Sms', key: 'sms-templates'},
-        {content: this.getTemplatesComponent('email'), tab: 'Email', key: 'email-templates'},
-        {content: this.getTemplatesComponent('wechat'), tab: 'Wechat', key: 'wechat-templates'},
-        {content: this.getTemplatesComponent('mobilepush'), tab: 'Mpush', key: 'mpush-templates'},
+        {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'},
       ],
     };
   }
@@ -39,7 +39,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       {
         title: template.name,
         content: template.versions.base['sms-editor'],
-        extra: [<View onClick={() => { this.props.isFullMode ? handlers.handlePreviewClick(template) : this.props.handlePeviewTemplate(template); }} />],
+        extra: [<View onClick={() => { if (this.props.isFullMode) { handlers.handlePreviewClick(template); } else { this.props.handlePeviewTemplate(template); } }} />],
         hoverOption: <CapButton onClick={(e) => handlers.handleEditClick(e, template._id)}>{this.props.intl.formatMessage(this.props.isFullMode ? messages.edit : messages.select)}</CapButton>,
       }));
     return (<div>
@@ -54,7 +54,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       query = {type: 'embedded', module: 'library'};
     }
     return (<Templates
-      location={{pathname: channel, search: '', query}}
+      key={channel}
+      location={{pathname: `/${channel}`, search: '', query}}
       route={{name: channel}}
       router={this.props.router}
       isComponent={!this.props.isFullMode}
@@ -74,25 +75,17 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       }
       return pane;
     });
-    this.setState({panes});
+    this.setState({panes, selectedChannel});
   }
   isLoading() {
     return this.props.Templates.loadingTemplates;
   }
   render() {
     return (
-      // <CapSpin spinning={this.isLoading()}>
-      <CapTab panes={this.state.panes} onChange={this.channelChange}/>
-        // {this.state.previewTemplate && <PreviewSideBar
-        //   showPreview={this.state.previewOpen}
-        //   templateData={this.state.previewTemplate}
-        //   channel={this.state.selectedChannel}
-        //   handleClose={this.togglePreview}
-        //   onEditClick={this.handleEditClick}
-        //   onDuplicateClick={this.duplicateTemplate}
-        //   location={this.props.location}
-        // />}
-      // </CapSpin>
+      <div>
+        <CapTab panes={this.state.panes} onChange={this.channelChange} activeKey={this.state.selectedChannel} defaultActiveKey={this.state.selectedChannel}/>
+      </div>
+
     );
   }
 }
@@ -106,6 +99,7 @@ TemplatesV2.propTypes = {
   Templates: PropTypes.object,
   TemplatesList: PropTypes.arrayOf(PropTypes.object),
   handlePeviewTemplate: PropTypes.func,
+  intl: intlShape,
 };
 
 TemplatesV2.defaultProps = {

package/index.js

@@ -63,7 +63,7 @@ export {default as TagListSaga} from './containers/TagList/sagas';
 export {default as TagListReducer} from './containers/TagList/reducer';
 export {default as TemplatePreview} from './components/TemplatePreview';
 export {default as EmailPreview} from './components/EmailPreview';
-
+export {default as CreativesContainer} from './containers/CreativesContainer';
 
 export { CapContainer,
   TemplatesContainer,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -13,7 +13,7 @@
   "license": "LicenseRef-LICENSE",
   "dependencies": {
     "@capillarytech/cap-react-ui-library": "latest",
-    "@capillarytech/cap-ui-library": "^1.0.33",
+    "@capillarytech/cap-ui-library": "^1.0.42",
     "antd": "^3.13.1",
     "axios": "^0.16.2",
     "babel-polyfill": "6.20.0",

package/containers/TemplatesV2/reducer.js

@@ -1,34 +0,0 @@
-/*
- *
- * TemplatesV2 reducer
- *
- */
-
-import { fromJS } from 'immutable';
-import * as types from './constants';
-
-const initialState = fromJS({
-  loadingTemplates: true,
-  smsTemplates: [],
-  emailTemplates: [],
-  wechatTemplates: [],
-  mobilepushTemplates: [],
-});
-
-function templatesV2Reducer(state = initialState, action) {
-  const channelTemplates = `${action.channel}Templates`;
-  switch (action.type) {
-    case types.DEFAULT_ACTION:
-      return state;
-    case types.GET_TEMPLATES_REQUEST:
-      return state.set('loadingTemplates', true);
-    case types.GET_TEMPLATES_SUCESS:
-      return state.set('loadingTemplates', false).set(channelTemplates, action.templates);
-    case types.GET_TEMPLATES_FAILURE:
-      return state.set('loadingTemplates', false).set('error', action.error);
-    default:
-      return state;
-  }
-}
-
-export default templatesV2Reducer;

package/containers/TemplatesV2/sagas.js

@@ -1,32 +0,0 @@
-import { take, takeLatest, call, put, cancel } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'react-router-redux';
-import * as Api from '../../services/api';
-
-
-import * as types from './constants';
-// Individual exports for testing
-export function* defaultSaga() {
-  // See example in containers/HomePage/sagas.js
-}
-function* getTemplates(action) {
-  try {
-    const req = {
-      channel: action.channel,
-      queryParams: action.query,
-    };
-    const res = yield call(Api.getAllTemplates, req);
-    yield put({type: types.GET_TEMPLATES_SUCESS, templates: res.response.templates, channel: action.channel});
-  } catch (error) {
-    yield put({type: types.GET_TEMPLATES_FAILURE, error});
-  }
-}
-function* getTemplatesWatcher() {
-  const watcher = yield takeLatest(types.GET_TEMPLATES_REQUEST, getTemplates);
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
-}
-// All sagas to be loaded
-export default [
-  defaultSaga,
-  getTemplatesWatcher,
-];