@capillarytech/creatives-library 2.0.2 → 2.0.5

package/containers/Templates/index.js

@@ -15,7 +15,8 @@ import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { Row, Select, Spin, Dropdown, Col, Breadcrumb, Menu, Modal} from 'antd';
-import { CapInput, CapButton, CapPopover, CapSelect } from '@capillarytech/cap-react-ui-library';
+import { CapPopover, CapSelect } from '@capillarytech/cap-react-ui-library';
+import {CapButton, CapInput} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
@@ -1260,6 +1261,10 @@ 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.state.channel.toUpperCase() === 'SMS' ? this.props.intl.formatMessage(messages.createSmsActionButton) : 'Create SMS'}</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>
@@ -1273,7 +1278,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </CapSelect>
             </div>
           }
-        </div>
+        </div>}
       </div>
     );
     const accountOptions = [];
@@ -1316,7 +1321,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     const pageHeader = (
       <div>
-        {(this.props.location.query.type !== 'embedded') ? `${pageHeaderText}` : templateText}
+        {(this.props.location.query.type !== 'embedded') && `${pageHeaderText}`}
+        {!this.props.isComponent && 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}
@@ -1464,7 +1470,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.location.query.type !== "embedded" &&
+              {(!this.props.isComponent || this.props.location.query.type !== "embedded") &&
                 <Breadcrumb>
                   <BreadcrumbItem>{this.props.intl.formatMessage(messages.campaigns)}</BreadcrumbItem>
                   <BreadcrumbItem>{this.props.intl.formatMessage(messages.creatives)}</BreadcrumbItem>
@@ -1475,7 +1481,7 @@ 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>
-            {actionButton}
+            {!this.props.isComponent && actionButton}
           </Row>
           <Row>
             <Helmet
@@ -1485,7 +1491,7 @@ 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, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})
+              this.props.renderNewCardGrid({templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})
             }
             {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) && <Pagination onPageChange={() => { console.log('getting all templates pagination'); this.getAllTemplates({getNextPage: true}); }} paginationSelector="pagination-container">
               <CardGrid
@@ -1563,6 +1569,7 @@ Templates.propTypes = {
   createNew: PropTypes.func,
   onSelectTemplate: PropTypes.func,
   lineActions: PropTypes.object,
+  isComponent: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/TemplatesV2/index.js

@@ -8,21 +8,17 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { injectIntl } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import { CapTab, CapCustomCard, CapIcons, CapSpin, CapButton } from '@capillarytech/cap-ui-library';
+import { CapTab, CapCard, CapIcons, CapButton } from '@capillarytech/cap-ui-library';
 import { find } from 'lodash';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from '../Templates/selectors';
 import messages from './messages';
-import ChannelTemplates from '../ChannelTemplates';
 import * as actions from './actions';
-import * as commonUtil from '../../utils/common';
-import PreviewSideBar from '../../components/PreviewSideBar';
 import Templates from '../Templates';
-const { CapCustomCardGrid } = CapCustomCard;
-const { Message, View } = CapIcons;
+const { View } = CapIcons;
 
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -38,20 +34,20 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     };
   }
 
-
-  getTemplateDataForGrid = ({templates, handlers}) => {
+  getTemplateDataForGrid = ({templates, handlers, filterContent}) => {
     const cardDataList = templates.map((template) => (
       {
-        icon: <Message />,
         title: template.name,
         content: template.versions.base['sms-editor'],
-        options: <View onClick={() => { this.props.isFullMode ? handlers.handlePreviewClick(template) : this.props.handlePeviewTemplate(template); }} />,
+        extra: [<View onClick={() => { this.props.isFullMode ? handlers.handlePreviewClick(template) : 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 <CapCustomCardGrid cardDataList={cardDataList} />;
+    return (<div>
+      {filterContent}
+      <CapCard cardList={cardDataList} type="SMS" />
+    </div>);
   }
   getTemplatesComponent(channel) {
-    const notFoundMessage = `No ${channel} templates found`;
     // const templates = this.props.Templates[`${channel}Templates`];
     let query = {};
     if (!this.props.isFullMode) {
@@ -61,8 +57,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       location={{pathname: channel, search: '', query}}
       route={{name: channel}}
       router={this.props.router}
-      isComponent
-      createNew={this.createNew}
+      isComponent={!this.props.isFullMode}
+      createNew={this.props.createNew}
       onSelectTemplate={(id) => this.props.onSelectTemplate(this.selectTemplate(id))}
       renderNewCardGrid={this.getTemplateDataForGrid}
     />);
@@ -102,14 +98,14 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
 }
 
 TemplatesV2.propTypes = {
-  actions: PropTypes.object.isRequired,
-  location: PropTypes.object,
+  router: PropTypes.object,
   isFullMode: PropTypes.bool,
-  handlePreview: PropTypes.func,
   onSelectTemplate: PropTypes.func,
+  createNew: PropTypes.func,
   channel: PropTypes.string,
   Templates: PropTypes.object,
   TemplatesList: PropTypes.arrayOf(PropTypes.object),
+  handlePeviewTemplate: PropTypes.func,
 };
 
 TemplatesV2.defaultProps = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.2",
+  "version": "2.0.5",
   "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.29",
+    "@capillarytech/cap-ui-library": "^1.0.33",
     "antd": "^3.13.1",
     "axios": "^0.16.2",
     "babel-polyfill": "6.20.0",
@@ -65,4 +65,4 @@
     "warning": "3.0.0",
     "whatwg-fetch": "2.0.1"
   }
-}
+}