@capillarytech/creatives-library 3.0.10 → 3.0.13

package/containers/Email/index.js

@@ -2537,15 +2537,13 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         });
       }
     });
-    if (temp.standalone.sections && temp.standalone.sections.length > 0) {
-      _.forEach(temp.standalone.sections[1].inputFields[0].cols, (inputField) => {
-        if (inputField.id === "template-version") {
-          const iF = inputField;
-          iF.colStyle = {};
-          iF.colStyle.display = "none";
-        }
-      });
-    }
+    _.forEach(temp.standalone.sections[1].inputFields[0].cols, (inputField) => {
+      if (inputField.id === "template-version") {
+        const iF = inputField;
+        iF.colStyle = {};
+        iF.colStyle.display = "none";
+      }
+    });
     //}
     temp = type === 'embedded' ? this.removeStandAlone(temp) : temp;
     this.setState({schema: temp, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1}, () => {

package/containers/MobilePush/Edit/index.js

@@ -803,6 +803,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   getCurrentWindow = (e) => {
+    console.log('in sms create', e);
     const response = {
       action: e.action,
       value: 'edit',

package/containers/Sms/Edit/index.js

@@ -216,7 +216,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     let ifBase = false;
     let currentTab = 1;
     for (let count = 0; count < tabCount; count += 1) {
-      formData[count] = _.cloneDeep(data.versions.history[count]);
+      formData[count] = _.cloneDeep(data.versions.base);
       if (data.versions && data.versions.history && data.versions.history[count] && data.versions.history[count].base) {
         if (!formData[count]) {
           formData[count] = {};
@@ -1239,6 +1239,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
+    formData.base[field.id] = myField.value;
     this.setState({formData});
   }
 

package/containers/Templates/index.js

@@ -1128,7 +1128,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
             {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>);
-      } else if (this.state.channel.toLowerCase() === 'line' && template.type.toLowerCase() === 'line') {
+      } else if (this.state.channel.toLowerCase() === 'line') {
         //content = template.versions.base.messages[0].Text;
         content = {
           bodyText: template.versions.base.content.messages[0].text ? template.versions.base.content.messages[0].text : '',

package/package.json

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

package/v2Components/EmailMobilePreview/index.js

@@ -30,14 +30,6 @@ const deviceAspectRatio = {
 };
 
 class EmailMobilePreview extends React.Component {
-  static getDerivedStateFromProps(props) {
-    if (props.showAllDevices) {
-      return {
-        showAllDevices: true,
-      };
-    }
-    return null;
-  }
   constructor() {
     super();
     this.state = {
@@ -123,7 +115,6 @@ EmailMobilePreview.propTypes = {
 
 EmailMobilePreview.defaultProps = {
   showDeviceSelection: true,
-  showAllDevices: false,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({

package/v2Containers/Assets/Gallery/index.js

@@ -13,7 +13,7 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import moment from "moment";
 import _ from "lodash";
-import { CapHeader, CapInput, CapButton, CapSpin, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel, CapIllustration} from '@capillarytech/cap-ui-library';
+import { CapHeader, CapInput, CapButton, CapSpin, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel } from '@capillarytech/cap-ui-library';
 import { Popover } from 'antd';
 import makeSelectGallery from './selectors';
 import messages from './messages';
@@ -23,7 +23,7 @@ import * as globalActions from '../../Cap/actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 import * as commonUtil from '../../../utils/common';
 import Pagination from '../../../v2Components/Pagination';
-import imageGalleryIllustration from '../images/imageGalleryIllustration.svg';
+
 import './_gallery.scss';
 const {CapCustomCardList} = CapCustomCard;
 export class Gallery extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -240,12 +240,6 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
       };
     }
   }
-  getIllustrationProps={
-    buttonLabel: <FormattedMessage {...messages.upload} />,
-    onClick: (e) => this.openFileDialog(e),
-    illustrationImage: imageGalleryIllustration,
-    title: <FormattedMessage {...messages.addImages} />,
-  }
 
   prepareData() {
     const data = [];
@@ -332,12 +326,10 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     }) : [];
     return (<div>
       {filterContent}
-      <CapSpin spinning={isLoading} tip={loadingTip} style={{width: "100%"}}>
-        {!isLoading && <div>
-          {!_.isEmpty(templates) ? <div className="pagination-container">
-            <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
-          </div> : <CapIllustration {...this.getIllustrationProps} />}</div>
-        }
+      <CapSpin spinning={isLoading} tip={loadingTip}>
+        {!_.isEmpty(templates) && <div className="pagination-container">
+          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
+        </div>}
       </CapSpin>
 
     </div>);
@@ -391,8 +383,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     );
   }
   render() {
-    const assetList = this.props.Gallery.assetList;
-    const filterContent = !_.isEmpty(assetList) ? (
+    const filterContent = (
       <div className="action-container" style={{ display: 'inline-flex', width: '100%'}}>
         <div style={{ marginTop: '8px', width: '50%'}}>
           <CapInput.Search
@@ -413,10 +404,10 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
           </form>
         </div>
       </div>
-    ) : <input style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>;
+    );
     const isLoading = this.props.Gallery.assetUploading || this.props.Gallery.fetchingAllAssets;
     const loadingTip = "Loading gallery... ";
-
+    const assetList = this.props.Gallery.assetList;
     return (
       <div>
         {this.state.showEmbeddedPreview ?

package/v2Containers/Assets/Gallery/messages.js

@@ -22,10 +22,6 @@ export default defineMessages({
     id: 'app.containers.Assets.Gallery.upload',
     defaultMessage: 'Upload image',
   },
-  addImages: {
-    id: `app.containers.Assets.Gallery.addImages`,
-    defaultMessage: 'Add images',
-  },
   imagePreview: {
     id: 'app.containers.Assets.Gallery.imagePreview',
     defaultMessage: 'Image preview',

package/v2Containers/CallTask/index.js

@@ -9,10 +9,10 @@ import { bindActionCreators } from "redux";
 import { connect } from 'react-redux';
 import {
   //CapSlideBox,
+  CapButton,
   //CapIcon,
   //CapHeader,
   CapLabel,
-  CapIllustration,
 } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
@@ -23,7 +23,7 @@ import makeSelectCallTask from './selectors';
 import NewCallTask from '../../v2Components/NewCallTask';
 import messages from './messages';
 import './_callTask.scss';
-import calltaskIllustration from '../Assets/images/calltaskIllustration.svg';
+
 export class CallTask extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -57,18 +57,8 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
     });
   }
 
-  getIllustrationProps=() => {
-    const { intl, showContentInSlidebox, onCreateNew } = this.props;
-    const { formatMessage } = intl;
-    return {
-      buttonLabel: formatMessage(messages.newCallTaskTemplate),
-      onClick: showContentInSlidebox ? this.showNewCallTask : onCreateNew,
-      illustrationImage: calltaskIllustration,
-      title: formatMessage(messages.callTaskTitleIllustartion),
-    };
-  }
   render() {
-    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities } = this.props;
+    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities, showContentInSlidebox, onCreateNew } = this.props;
     const { formatMessage } = intl;
     const { mode } = this.state;
     return (
@@ -87,7 +77,9 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
                 {formatMessage(messages.callTaskInfo)}
               </CapLabel>
               <div className="call-task-action-button">
-                <CapIllustration {...this.getIllustrationProps()} />
+                <CapButton onClick={showContentInSlidebox ? this.showNewCallTask : onCreateNew}>
+                  {formatMessage(messages.addNewCallTask)}
+                </CapButton>
               </div>
               {/* {
               showCallTaskSlidebox && showContentInSlidebox &&

package/v2Containers/CallTask/messages.js

@@ -18,12 +18,4 @@ export default defineMessages({
     id: 'app.containers.CallTask.callTaskInfo',
     defaultMessage: 'Call Tasks are message sent to store staff. The messages are displayed on the Point of Sale (POS) machines for store staff to take action.',
   },
-  callTaskTitleIllustartion: {
-    id: `app.containers.CallTask.callTaskTitleIllustartion`,
-    defaultMessage: 'Create a Call Task template',
-  },
-  newCallTaskTemplate: {
-    id: `app.containers.CallTask.newCallTaskTemplate`,
-    defaultMessage: 'New Call Task template',
-  },
 });

package/v2Containers/Sms/Edit/index.js

@@ -253,7 +253,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     let ifBase = false;
     let currentTab = 1;
     for (let count = 0; count < tabCount; count += 1) {
-      formData[count] = _.cloneDeep(data.versions.history[count]);
+      formData[count] = _.cloneDeep(data.versions.base);
       if (data.versions && data.versions.history && data.versions.history[count] && data.versions.history[count].base) {
         if (!formData[count]) {
           formData[count] = {};
@@ -789,6 +789,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
+    formData.base[field.id] = myField.value;
     this.setState({formData});
   }
 

package/v2Containers/Templates/index.js

@@ -15,7 +15,7 @@ import moment from "moment";
 import _ from 'lodash';
 import { bindActionCreators } from 'redux';
 import { Modal} from 'antd';
-import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification, CapIllustration} from '@capillarytech/cap-ui-library';
+import {CapMenu, CapDropdown, CapButton, CapInput, CapIcon, CapSelect, CapPopover, CapSpin, CapCustomCard, CapRow, CapSlideBox, CapLink, CapHeading, CapNotification} 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';
@@ -44,11 +44,6 @@ import EmailPreview from '../../v2Components/EmailPreview';
 import CreativesContainer from '../CreativesContainer';
 import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
 import { MOBILE_PUSH, WECHAT, SMS, EMAIL, EBILL, LINE } from '../CreativesContainer/constants';
-import emailIllustration from '../Assets/images/emailIllustration.svg';
-import smsIllustration from '../Assets/images/smsIllustration.svg';
-import pushIllustration from '../Assets/images/pushIllustration.svg';
-
-
 const {CapCustomCardList} = CapCustomCard;
 const InlineDiv = styled.div`
   display: inline;
@@ -84,7 +79,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       modeType: null,
       routeParams: null,
     };
-
     this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
     this.handleOnItemClick = this.handleOnItemClick.bind(this);
     this.handleEditClick = this.handleEditClick.bind(this);
@@ -261,7 +255,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
     if (this.state.channel.toLowerCase() === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
-
+      
     }
 
     if (this.state.channel.toLowerCase() === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
@@ -383,8 +377,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           this.setState({selectedAccountError: true});
           this.props.actions.resetTemplate();
           return;
-        } else {
-          this.setState({selectedAccountError: false});
         }
       }
 
@@ -540,32 +532,24 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const accounts = _.get(this.props, 'Templates.weCrmAccounts');
     return (<div>
       {filterContent}
-      <CapSpin spinning={isLoading} tip={loadingTip} style={{width: '100%'}}>
-        {!isLoading && <div>
-          {!_.isEmpty(templates) ? <div className="pagination-container">
-            <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
-          </div> : ['sms', "email"].includes(this.state.channel.toLowerCase()) && <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
-          }
-
-          {(this.state.selectedAccount === '' && _.isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&
+      <CapSpin spinning={isLoading} tip={loadingTip}>
+        {!_.isEmpty(templates) && <div className="pagination-container">
+          <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={currentChannel} />
+        </div>}
+        {(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'}}>
+          <CapHeading type="h6">{accounts ? this.props.intl.formatMessage(messages.noAccountMessage) : this.props.intl.formatMessage(messages.noAccountsPresent)}</CapHeading>
+        </div>}
+        { !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === "mobilepush" && this.state.selectedAccountError &&
           <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-            <CapHeading type="h6">{accounts ? this.props.intl.formatMessage(messages.noAccountMessage) : this.props.intl.formatMessage(messages.noAccountsPresent)}</CapHeading>
+            <CapHeading type="h6" >
+              {this.props.intl.formatMessage(messages.accountConfigError)}
+              <InlineDiv>
+                <CapLink title="here" style={{display: 'inline'}} onClick={() => { window.open(config.production.accountConfig`${accountId}`); }}/>
+              </InlineDiv>
+            </CapHeading>
           </div>
-          }
-
-          { !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === "mobilepush" && this.state.selectedAccountError ?
-            <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
-              <CapHeading type="h6" >
-                {this.props.intl.formatMessage(messages.accountConfigError)}
-                <InlineDiv>
-                  <CapLink title="here" style={{display: 'inline'}} onClick={() => { window.open(config.production.accountConfig`${accountId}`); }}/>
-                </InlineDiv>
-              </CapHeading>
-            </div> : ["mobilepush"].includes(this.state.channel.toLowerCase()) && _.isEmpty(templates) && <CapIllustration {...this.getChannelTypeIllustrationInfo(currentChannel)} />
-          }
-        </div>
         }
-
       </CapSpin>
 
     </div>);
@@ -1371,33 +1355,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       (lineLoader !== undefined ? lineLoader : false);
     return isLoading;
   }
-  getChannelTypeIllustrationInfo = (type) => {
-    switch (type) {
-      case 'SMS':
-        return {
-          buttonLabel: <FormattedMessage {...messages.newSMSTemplate} />,
-          onClick: this.createTemplate,
-          illustrationImage: smsIllustration,
-          title: <FormattedMessage {...messages.smsTitleIllustartion} />,
-        };
-      case 'EMAIL':
-        return {
-          buttonLabel: <FormattedMessage {...messages.newEmailTemplate} />,
-          onClick: this.createTemplate,
-          illustrationImage: emailIllustration,
-          title: <FormattedMessage {...messages.emailTitleIllustartion} />,
-        };
-      case 'MOBILEPUSH':
-        return {
-          buttonLabel: <FormattedMessage {...messages.newNotificationTemplate} />,
-          onClick: this.createTemplate,
-          illustrationImage: pushIllustration,
-          title: <FormattedMessage {...messages.pushTitleIllustartion} />,
-        };
-      default:
-        return {};
-    }
-  }
   checkSearchDisabled = () => (this.props.route.name === "mobilepush" && !(this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier && this.props.Templates.selectedWeChatAccount.configs && (this.props.Templates.selectedWeChatAccount.configs.ios === '1' || this.props.Templates.selectedWeChatAccount.configs.android === '1')))
   renderEmailPreviewModal() {
     const slideboxContent = (
@@ -1434,7 +1391,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     </Modal>);
     return modal;
   };
-
   render() {
     const accountOptions = [];
     const isFullMode = this.isFullMode();
@@ -1609,28 +1565,30 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       >
       </CardGrid>
     );
-    const filterContent = ((!_.isEmpty(this.props.TemplatesList) || this.state.channel.toLowerCase() === 'mobilepush' ) && <div className="action-container">
-      {!_.isEmpty(this.props.TemplatesList) && <CapInput.Search
-        className="search-text"
-        style={{width: '210px'}}
-        placeholder={this.props.intl.formatMessage(messages.searchText)}
-        value={this.state.searchText}
-        onChange={(e) => this.searchTemplate(e.target.value)}
-        disabled={this.checkSearchDisabled()}
-        onClear={() => this.searchTemplate('')}
-        />}
-      <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-        {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
-        {!_.isEmpty(this.props.TemplatesList) && <CapButton
-          type={"primary"}
-          disabled={this.isCreateDisabled()}
-          style={{marginLeft: '8px'}}
-          onClick={this.createTemplate} >
-          { this.props.intl.formatMessage(messages.createNewActionButton) }
-        </CapButton>}
-      </div>
+    const filterContent = (
+      <div className="action-container">
+        <CapInput.Search
+          className="search-text"
+          style={{width: '210px'}}
+          placeholder={this.props.intl.formatMessage(messages.searchText)}
+          value={this.state.searchText}
+          onChange={(e) => this.searchTemplate(e.target.value)}
+          disabled={this.checkSearchDisabled()}
+          onClear={() => this.searchTemplate('')}
+        />
+        <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
+          {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}
+          <CapButton
+            type={"primary"}
+            disabled={this.isCreateDisabled()}
+            style={{marginLeft: '8px'}}
+            onClick={this.createTemplate} >
+            { this.props.intl.formatMessage(messages.createNewActionButton) }
+          </CapButton>
+        </div>
 
-    </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'];
@@ -1665,6 +1623,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               >
               </CardGrid>
             </Pagination>} */}
+          {(((this.state.selectedAccount !== '' && !_.isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && _.isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress &&
+            <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+              <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesMessage)}</CapHeading>
+            </div>}
         </CapRow>
         <CapRow>
           {!_.isEmpty(creativesParams.mode) && isFullMode && //creatives container for fullmode
@@ -1722,7 +1684,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       </div>
     );
   }
-
 }
 
 Templates.propTypes = {

package/v2Containers/Templates/messages.js

@@ -278,29 +278,5 @@ export default defineMessages({
     id: `${scope}.accountConfigError`,
     defaultMessage: 'This account is not configured properly. You can configure it ',
   },
-  "newSMSTemplate": {
-    id: `${scope}.newSMSTemplate`,
-    defaultMessage: 'New SMS template',
-  },
-  "newEmailTemplate": {
-    id: `${scope}.newEmailTemplate`,
-    defaultMessage: 'New email template',
-  },
-  "newNotificationTemplate": {
-    id: `${scope}.newNotificationTemplate`,
-    defaultMessage: 'New notification template',
-  },
-  "pushTitleIllustartion": {
-    id: `${scope}.pushTitleIllustartion`,
-    defaultMessage: 'Create a mobile push notification template',
-  },
-  "emailTitleIllustartion": {
-    id: `${scope}.emailTitleIllustartion`,
-    defaultMessage: 'Create an email template',
-  },
-  "smsTitleIllustartion": {
-    id: `${scope}.smsTitleIllustartion`,
-    defaultMessage: 'Create an SMS template',
-  },
 
 });