@capillarytech/creatives-library 2.0.36 → 2.0.37

package/containers/Sms/Create/index.js

@@ -192,15 +192,15 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     window.removeEventListener("message", this.handleFrameTasks);
   }
 
-  onTemplateNameChange(name) {
+  onTemplateNameChange() {
 
   }
 
-  onTemplateContentChange(content) {
+  onTemplateContentChange() {
 
   }
 
-  onVersionNameChange(data, versionIndex) {
+  onVersionNameChange( ) {
 
   }
 
@@ -616,7 +616,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     return _.cloneDeep(parentsect);
   }
 
-  deleteVersion(data, currentTab) {
+  deleteVersion() {
     if (this.state.tabCount === 1) {
       return;
     }
@@ -626,16 +626,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.setState({schema, tabCount: this.state.tabCount - 1});
   }
 
-  renameVersion(data, currentTab) {
+  renameVersion() {
 
   }
 
-  markFinalVersion(data, currentTab) {
+  markFinalVersion() {
     const message = getMessageObject('success', 'Template Marked as Final Successfully', true);
     this.props.globalActions.addMessageToQueue(message);
   }
 
-  duplicateVersion(data, currentTab) {
+  duplicateVersion() {
     this.addVersion(this.state.tabCount);
   }
 
@@ -746,7 +746,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
   startTemplateCreation(data) {
     if (data.edit) {
-      const ifUnicode = checkUnicode(data.content ? data.content : '');
+      // const ifUnicode = checkUnicode(data.content ? data.content : '');
 
       const content = data.content;
       const id = _.uniqueId();
@@ -911,7 +911,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 2;
     }
-    if (isLoading) {
+    if (isLoading && this.state.loadingStatus >= 2) {
       this.props.creativesContainerActions.hideCreativesContanerLoader();
     }
     return isLoading;

package/containers/Sms/Edit/index.js

@@ -194,11 +194,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     window.removeEventListener("message", this.handleFrameTasks);
   }
 
-  onTemplateNameChange(name) {
+  onTemplateNameChange() {
 
   }
 
-  onTemplateContentChange(content) {
+  onTemplateContentChange() {
 
   }
 
@@ -209,7 +209,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
   }
 
-  onVersionNameChange(data, versionIndex) {
+  onVersionNameChange() {
 
   }
 
@@ -659,16 +659,16 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({schema, tabCount: this.state.tabCount - 1});
   }
 
-  renameVersion(data, currentTab) {
+  renameVersion() {
 
   }
 
-  markFinalVersion(data, currentTab) {
+  markFinalVersion() {
     const message = getMessageObject('success', 'Template Marked as Final Successfully', true);
     this.props.globalActions.addMessageToQueue(message);
   }
 
-  duplicateVersion(data, currentTab) {
+  duplicateVersion() {
     this.addVersion(this.state.tabCount);
   }
 
@@ -896,7 +896,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (!isLoading) {
       isLoading = this.state.loadingStatus < 3;
     }
-    if (isLoading) {
+    if (isLoading && this.state.loadingStatus >= 3) {
       this.props.creativesContainerActions.hideCreativesContanerLoader();
     }
     return isLoading;

package/containers/Templates/index.js

@@ -13,7 +13,7 @@ import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
-import { Row, Select, Spin, Dropdown, Menu, Modal} from 'antd';
+import { Row, Select, Dropdown, Menu, Modal} from 'antd';
 import {CapButton, CapInput, CapIcon, CapSelect, CapPopover} from '@capillarytech/cap-ui-library';
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
@@ -486,7 +486,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({loading: true, routeParams});
   }
 
-  handleMenuAction = (item, key) => {
+  handleMenuAction = (item) => {
     if (item.key.toLowerCase() === 'uploadfile') {
       document.getElementById('filename').click();
     } else if (item.key.toLowerCase() === 'useeditor') {
@@ -1018,7 +1018,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         //
 
         const imgSrc = template && template.versions && template.versions.base ? template.versions.base.preview_http_url : '';
-        const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
+        // const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
         content = <img src={imgSrc || ''} alt={this.props.intl.formatMessage(messages.previewGenerateText)} width="100%" height="100%"/>;
 
         temp.content = (
@@ -1188,26 +1188,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   render() {
-    const filterContent = (
-      <div className="action-container">
-        <CapInput
-          className="search-text"
-          style={{width: '210px'}}
-          placeholder={this.props.intl.formatMessage(messages.searchText)}
-          prefix={<CapIcon type="search" size="s"/>}
-          value={this.state.searchText}
-          onChange={(e) => this.searchTemplate(e.target.value)}
-        />
-        <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>
-    );
     const accountOptions = [];
     if ((this.state.channel.toUpperCase() === 'WECHAT' || this.state.channel.toUpperCase() === "MOBILEPUSH") && !_.isEmpty(this.props.Templates.weCrmAccounts)) {
       _.forEach(this.props.Templates.weCrmAccounts, (account) => {
@@ -1358,7 +1338,27 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       >
       </CardGrid>
     );
+    const filterContent = (
+      <div className="action-container">
+        <CapInput
+          className="search-text"
+          style={{width: '210px'}}
+          placeholder={this.props.intl.formatMessage(messages.searchText)}
+          prefix={<CapIcon type="search" size="s"/>}
+          value={this.state.searchText}
+          onChange={(e) => this.searchTemplate(e.target.value)}
+        />
+        <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
+          <CapButton
+            type={this.props.isFullMode ? "primary" : "secondary"}
+            disabled={isLoading}
+            onClick={(ev) => this.props.isFullMode ? this.createTemplate(ev) : this.handleBlankTemplateAction()} >
+            { this.props.intl.formatMessage(messages.createNewActionButton) }
+          </CapButton>
+        </div>
 
+      </div>
+    );
     let htmlPreviewContent = "";
     if (this.state.channel.toLowerCase() === 'ebill') {
       htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base['ebill-editor'];
@@ -1371,24 +1371,23 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isSearch = this.props.Templates.isSearch;
     const creativesMode = this.getCreativesMode();
     const {isFullMode, 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 (
       <div>
-        <Spin
-          tip={(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)}
-          spinning={isLoading}
-        >
-          <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
-
-          <Row className="template-header-container">
-            <div className="template-header">{(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}</div>
-          </Row>
-          <Row>
-            {this.props.renderNewCardGrid && templateList && templateList.length > 0 &&
-              <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
-                  {this.props.renderNewCardGrid({channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
-              </Pagination>
+        <Row className="template-header-container">
+          <div className="template-header">{(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}</div>
+        </Row>
+
+        <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.handleFileUpload(event, {files: event.target.files})} />
+
+
+        <Row>
+          {this.props.renderNewCardGrid && templateList && templateList.length > 0 &&
+          <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
+            {this.props.renderNewCardGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
+          </Pagination>
             }
-            {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) &&
+          {!this.props.renderNewCardGrid && ((templateList && templateList.length > 0) || isSearch) &&
             <Pagination onPageChange={this.onPaginationChange} paginationSelector="pagination-container">
               <CardGrid
                 className={this.state.channel.toLowerCase() === "mobilepush" ? "mobilepush-templates" : ""}
@@ -1397,58 +1396,60 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 onHoverItem={this.handleOnHoverItem}
                 onItemClick={this.handleOnItemClick}
                 enablePagination
+                isLoading={isLoading}
+                loadingTip={loadingTip}
               >
               </CardGrid>
             </Pagination>}
-            {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-              <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noAccountMessage)}</span>
+          {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+            <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noAccountMessage)}</span>
             </div>}
-            {(((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 && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-              <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noTemplatesMessage)}</span>
+          {(((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 && <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+            <span style={{ fontFamily: 'open-sans', fontSize: '24px', color: '#B5B5B5'}}>{this.props.intl.formatMessage(messages.noTemplatesMessage)}</span>
             </div>}
-          </Row>
-          <Row>
-            {!_.isEmpty(creativesMode) && isFullMode &&
-              <CreativesContainer
-                messageDetails={{type: "default"}}
-                creativesMode={creativesMode}
-                messages={messages}
-                isFullMode={isFullMode}
-                channel={route.name.toUpperCase()}/>
+        </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}
-              channel={this.state.channel}
-              handleClose={this.togglePreview}
-              onEditClick={this.handleEditClick}
-              embedded={this.props.location.query.type === 'embedded'}
-              onDuplicateClick={this.duplicateTemplate}
-              location={this.props.location}
+          <PreviewSideBar
+            showPreview={this.state.previewOpen}
+            templateData={this.state.previewTemplate}
+            channel={this.state.channel}
+            handleClose={this.togglePreview}
+            onEditClick={this.handleEditClick}
+            embedded={this.props.location.query.type === 'embedded'}
+            onDuplicateClick={this.duplicateTemplate}
+            location={this.props.location}
             >
-            </PreviewSideBar>
-            {(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}
-              lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
-              updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
+          </PreviewSideBar>
+          {(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}
+            lastModified={this.state.previewTemplate ? this.state.previewTemplate.updatedAt : ''}
+            updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
             />}
-            <SlideBox
-              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}
+          <SlideBox
+            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()}
-          </Row>
-        </Spin>
+          {this.renderDeleteConfirmationModal()}
+        </Row>
+
       </div>
     );
   }

package/containers/TemplatesV2/index.js

@@ -12,7 +12,7 @@ import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
-import { CapTab, CapCustomCard, CapIcons, CapButton, CapHeader } from '@capillarytech/cap-ui-library';
+import { CapTab, CapCustomCard, CapIcons, CapButton, CapHeader, CapSpin } from '@capillarytech/cap-ui-library';
 import { find } from 'lodash';
 import Helmet from 'react-helmet';
 
@@ -28,16 +28,21 @@ const { View } = CapIcons;
 const {CapCustomCardList} = CapCustomCard;
 
 const ComponentWrapper = styled.div`
-  max-width: 1140px;
-  margin: 0 auto;
-  width: 100%;
-  padding: ${CAP_SPACE_24} 0;
-  .ant-tabs-content{
-    margin-top: ${CAP_SPACE_16}
-  }
+${(props) => props.isFullMode ? `
+max-width: 1140px;
+margin: 0 auto;
+width: 100%;
+padding: ${CAP_SPACE_24} 0;
+.ant-tabs-content{
+  margin-top: ${CAP_SPACE_16}
+}
+  ` : ` `}
+  
+ 
 `;
 const MarginTop = styled.div`
-  margin-top: ${CAP_SPACE_24}
+  ${(props) => props.isFullMode ? `margin-top: ${CAP_SPACE_24}` : ``
+}
 `;
 export class TemplatesV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -61,7 +66,7 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       this.setState({selectedChannel: nextProps.channel, panes });
     }
   }
-  getTemplateDataForGrid = ({templates, handlers, filterContent, channel}) => {
+  getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
     const cardDataList = templates.map((template) => {
       const templateData =
@@ -80,9 +85,12 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
     });
     return (<div>
       {filterContent}
-      <div className="pagination-container">
-        <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
-      </div>
+      <CapSpin spinning={isLoading} tip={loadingTip}>
+        <div className="pagination-container">
+          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
+        </div>
+      </CapSpin>
+
     </div>);
   }
   getTemplatesComponent(channel) {
@@ -133,10 +141,10 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
             { name: 'description', content: this.props.intl.formatMessage(messages.creativesDesc) },
           ]}
         />}
-        <ComponentWrapper>
+        <ComponentWrapper isFullMode={isFullMode}>
 
-          <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>
-          <MarginTop>
+          {isFullMode && <CapHeader title={<FormattedMessage {...messages.creatives}/>} description={<FormattedMessage {...messages.creativesDesc}/>}/>}
+          <MarginTop isFullMode={isFullMode}>
             <CapTab
               panes={this.state.panes}
               onChange={this.channelChange}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "2.0.36",
+  "version": "2.0.37",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",