@capillarytech/creatives-library 0.0.4 → 0.0.6

package/containers/Email/messages.js

@@ -218,4 +218,16 @@ export default defineMessages({
     id: 'app.containers.Email.deleteVersionConfirm',
     defaultMessage: 'Do you really want to delete this version?',
   },
+  uploadingImage: {
+    id: 'app.containers.Email.uploadingImage',
+    defaultMessage: 'Uploading Image...',
+  },
+  uploadSizeError: {
+    id: 'app.containers.Email.uploadSizeError',
+    defaultMessage: 'File Size Too large to upload. Please upload file upto 5 MB',
+  },
+  assetUploadFailed: {
+    id: 'app.containers.Email.assetUploadFailed',
+    defaultMessage: 'Image uploaded failed',
+  },
 });

package/containers/Email/reducer.js

@@ -8,7 +8,10 @@ import { fromJS } from 'immutable';
 import * as types from './constants';
 
 
-const initialState = fromJS({});
+const initialState = fromJS({
+  createTemplateInProgress: false,
+  createResponse: {},
+});
 
 function emailReducer(state = initialState, action) {
   switch (action.type) {

package/containers/Email/selectors.js

@@ -19,7 +19,13 @@ const makeSelectEmail = () => createSelector(
   (substate) => substate.toJS()
 );
 
+const makeSelectCreateResponse = () => createSelector(
+  selectEmailDomain(), (dimensionState) => dimensionState.get('createResponse')
+);
+
+
 export default makeSelectEmail;
 export {
-  selectEmailDomain,
+  makeSelectEmail,
+  makeSelectCreateResponse,
 };

package/containers/Sms/Create/index.js

@@ -117,7 +117,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
   componentWillReceiveProps(nextProps) {
     console.log('recieved props ', nextProps, nextProps.Create, this.props.Create);
-    if (nextProps.location.query.module === 'subscription' && nextProps.isGetFormData) {
+    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
       nextProps.getFormSubscriptionData(this.getFormData());
     }
     if (nextProps.createResponse && nextProps.createResponse.templateId) {
@@ -141,7 +141,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
       console.log('final schema is**', nextProps.metaEntities.layouts[0].definition);
       this.injectEvents(nextProps.metaEntities.layouts[0].definition);
-      if (this.props.location.query.module !== 'subscription') {
+      if (this.props.location.query.module !== 'library') {
         const query = {
           layout: 'SMS',
           type: 'TAG',
@@ -1397,7 +1397,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const schema = this.state.schema;
     const spinning = this.state.loading || (this.props.Create && "createTemplateInProgress" in this.props.Create && this.props.Create.createTemplateInProgress);
     let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
-    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'subscription') {
+    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'library') {
       tags = this.props.supportedTags;
     }
     return (

package/containers/Templates/actions.js

@@ -93,3 +93,16 @@
      type: types.RESET_TEMPLATE_DATA,
    };
  }
+
+ export function resetUploadData() {
+   console.log('clearing upload data');
+   return {
+     type: types.RESET_UPLOAD_DATA,
+   };
+ }
+
+ export function resetTemplateStoreData() {
+   return {
+     type: types.CLEAR_TEMPLATE_STORE_DATA,
+   };
+ }

package/containers/Templates/constants.js

@@ -41,4 +41,5 @@ export const SET_EDM_TEMPLATE = "app/containers/Templates/SET_EDM_TEMPLATE";
 export const RESET_ACCOUNT = "app/containers/Templates/RESET_ACCOUNT";
 export const RESET_TEMPLATE = "app/containers/Templates/RESET_TEMPLATE";
 export const RESET_TEMPLATE_DATA = "app/containers/Templates/RESET_TEMPLATE_DATA";
-
+export const RESET_UPLOAD_DATA = "app/containers/Templates/RESET_UPLOAD_DATA";
+export const CLEAR_TEMPLATE_STORE_DATA = "app/containers/Templates/CLEAR_TEMPLATE_STORE_DATA";

package/containers/Templates/index.js

@@ -17,7 +17,8 @@ import { CapInput, CapButton, CapPopover, CapSelect } from '@capillarytech/cap-r
 import { makeSelectTemplates, makeSelectTemplatesResponse } from './selectors';
 import { makeSelectCreate as makeSelectCreateSms} from '../Sms/Create/selectors';
 import { makeSelectCreate as makeSelectCreateMobilePush } from '../MobilePush/Create/selectors';
-// import { makeSelectEbill as makeSelectCreateEbill } from '../Ebill/selectors';
+import { makeSelectEbill as makeSelectCreateEbill } from '../Ebill/selectors';
+import { makeSelectEmail as makeSelectCreateEmail } from '../Email/selectors';
 import { makeSelectEdit } from '../Sms/Edit/selectors';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import messages from './messages';
@@ -26,6 +27,8 @@ import * as actions from './actions';
 import * as smsActions from '../Sms/Create/actions';
 import * as mobilepushActions from '../MobilePush/Create/actions';
 import * as smsEditActions from '../Sms/Edit/actions';
+import * as ebillActions from '../Ebill/actions';
+import * as emailActions from '../Email/actions';
 import CardGrid from '../../components/CardGrid';
 import PreviewSideBar from '../../components/PreviewSideBar';
 import './_templates.scss';
@@ -113,7 +116,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   componentDidMount() {
     if (this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && !_.isEmpty(this.props.Templates.selectedWeChatAccount))) {
-      console.log('getting templates 1');
       const queryParams = {
         name: this.state.searchText,
         sortBy: this.state.sortBy,
@@ -125,7 +127,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
       const channel = this.state.channel;
-      console.log('getting templates 9');
       this.props.actions.getAllTemplates(channel, queryParams);
       //this.getAllTemplates({});
       // if (this.state.channel.toLowerCase() === "email") {
@@ -172,7 +173,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.accountId = nextProps.Templates.selectedWeChatAccount.id;
           }
-          console.log('getting templates 2');
           this.getAllTemplates({params}, true);
         }
       });
@@ -201,7 +201,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           params.wecrmId = selectedAccount.configs.wecrm_app_id;
           params.wecrmToken = selectedAccount.configs.wecrm_token;
           nextProps.actions.setWeChatAccount(selectedAccount);
-          console.log('getting templates 3');
           this.getAllTemplates({params});
         });
       } else if (this.state.channel.toLowerCase() === 'mobilepush' && nextProps.location.query.account_id) {
@@ -212,31 +211,34 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         });
         this.props.actions.setWeChatAccount(selectedAccount);
         params.accountId = Number(nextProps.location.query.account_id);
-        console.log('getting templates 4');
         this.getAllTemplates({params});
       }
     }
     if (this.state.channel.toLowerCase() === "sms" && nextProps.Create && nextProps.Create.response && nextProps.Create.response.templateId && nextProps.Create.response.templateId !== '') {
-      const message = getMessageObject('success', this.props.intl.formatMessage(messages.templateDuplicateSuccess), true);
+      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
       this.props.globalActions.addMessageToQueue(message);
-      console.log('getting templates 5');
       this.getAllTemplates({params});
       this.props.smsActions.clearCreateResponse();
     }
     if (this.state.channel.toLowerCase() === "mobilepush" && nextProps.CreateMobilePush && nextProps.CreateMobilePush.response && nextProps.CreateMobilePush.response.templateId && nextProps.CreateMobilePush.response.templateId !== '') {
-      const message = getMessageObject('success', this.props.intl.formatMessage(messages.templateDuplicateSuccess), true);
+      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
       this.props.globalActions.addMessageToQueue(message);
-      console.log('getting templates 6');
       this.getAllTemplates({params});
       this.props.mobilepushActions.clearCreateResponse();
     }
 
-    if (this.state.channel.toLowerCase() === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.response && nextProps.CreateEbill.response.templateId && nextProps.CreateEbill.response.templateId !== '') {
-      const message = getMessageObject('success', this.props.intl.formatMessage(messages.templateDuplicateSuccess), true);
+    if (this.state.channel.toLowerCase() === "ebill" && nextProps.CreateEbill && nextProps.CreateEbill.createResponse && nextProps.CreateEbill.createResponse.templateId && nextProps.CreateEbill.createResponse.templateId !== '') {
+      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
       this.props.globalActions.addMessageToQueue(message);
-      console.log('getting templates 5');
       this.getAllTemplates({params});
-      this.props.ebillActions.clearCreateResponse();
+      this.props.ebillActions.clearCRUDResponse();
+    }
+
+    if (this.state.channel.toLowerCase() === "email" && nextProps.EmailCreate && nextProps.EmailCreate.createResponse && nextProps.EmailCreate.createResponse.templateId && nextProps.EmailCreate.createResponse.templateId !== '') {
+      const message = getMessageObject('success', `${this.state.channel} ${this.props.intl.formatMessage(messages.templateDuplicateSuccess)}`, true);
+      this.props.globalActions.addMessageToQueue(message);
+      this.getAllTemplates({params});
+      this.props.emailActions.clearStoreValues();
     }
 
     if (nextProps.Create && this.props.Create && nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
@@ -259,7 +261,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       console.log("delete");
       const message = getMessageObject('success', `${this.state.channel.toUpperCase()} ${this.props.intl.formatMessage(messages['Template deleted successfully'])}`, true);
       nextProps.globalActions.addMessageToQueue(message);
-      console.log('getting templates 7');
       this.getAllTemplates({params, resetPage: true});
     }
 
@@ -292,6 +293,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   componentWillUnmount() {
     console.log('removed listener templates');
     window.removeEventListener("message", this.handleFrameTasks);
+    this.props.actions.resetTemplateStoreData();
   }
 
   onAccountSelect(value, option) {
@@ -309,7 +311,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.props.actions.setWeChatAccount(this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})]);
         params.accountId = this.props.Templates.weCrmAccounts[_.findIndex(this.props.Templates.weCrmAccounts, { name: value})].id;
       }
-      console.log('getting templates 8');
       this.getAllTemplates({params, resetPage: true});
     });
   }
@@ -325,7 +326,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
       const channel = this.state.channel;
-      console.log('getting templates 9');
       this.props.actions.getAllTemplates(channel, queryParams);
     } else if ((resetPage || (page === 1 && this.state.templatesCount === 0) || page <= (this.state.templatesCount / this.state.perPageLimit))) {
       if (getNextPage) {
@@ -356,7 +356,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         queryParams.page = page;
         queryParams.perPage = this.state.perPageLimit;
         const channel = this.state.channel;
-        console.log('getting templates 9');
         this.props.actions.getAllTemplates(channel, queryParams);
       });
     }
@@ -376,9 +375,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const type = this.props.location.query.type;
     const module = (type === 'embedded') ? this.props.location.query.module : 'default';
     if (this.state.channel.toLowerCase() === 'email') {
+      const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
       this.props.router.push({
-        pathname: `/email/create`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {},
+        pathname: `/email/view`,
+        query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {},
       });
     } else if (this.state.channel.toLowerCase() === 'sms') {
       this.props.router.push({
@@ -443,14 +443,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
       console.log('Zip Format got');
       this.props.actions.handleZipUpload(files[0]);
+      document.getElementById("filename").value = "";
     } else if (fileExtension === 'html' || fileExtension === 'htm') {
       console.log('html Format got');
       const reader = new FileReader();
       reader.onload = () => {
         const text = reader.result;
         this.props.actions.handleHtmlUpload(text);
+        document.getElementById("filename").value = "";
         const type = this.props.location.query.type;
-        if (type === 'embedded' && module === "subscription") {
+        if (type === 'embedded' && module === "library") {
           this.props.createNew();
           return;
         }
@@ -635,7 +637,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   createTemplate(ev) {
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-    if (this.props.location.query.module === 'subscription') {
+    if (this.props.location.query.module === 'library') {
       this.props.createNew();
     } else if (ev.key && (ev.key.toLowerCase() === "text" || ev.key.toLowerCase() === "image")) {
       this.props.router.push({
@@ -664,7 +666,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === "mobilepush") {
         params.accountId = this.props.Templates.selectedWeChatAccount.id;
       }
-      console.log('getting templates 10');
       this.getAllTemplates({params, resetPage: true});
     });
   }
@@ -682,7 +683,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === "mobilepush") {
         params.accountId = this.props.Templates.selectedWeChatAccount.id;
       }
-      console.log('getting templates 11');
       this.getAllTemplates({params, resetPage: true});
     });
   }
@@ -698,7 +698,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state.channel.toLowerCase() === 'mobilepush' && data.toLowerCase() !== "all") {
         params.mode = this.state.mode.toLowerCase();
       }
-      console.log('getting templates 12');
       this.getAllTemplates({params, resetPage: true});
     });
   };
@@ -738,6 +737,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.props.mobilepushActions.createTemplate(duplicateObj);
     } else if (this.state.channel.toLowerCase() === "ebill") {
       this.props.ebillActions.createTemplate(duplicateObj);
+    } else if (this.state.channel.toLowerCase() === "email") {
+      this.props.emailActions.createTemplate(duplicateObj);
     }
   }
 
@@ -765,12 +766,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       let getQuery = '';
       console.log('Selected EDM Data ', data);
       this.props.actions.setEdmTemplate(data);
-      if (type && type.toLowerCase() === 'email') {
+      if (this.state.channel && this.state.channel.toLowerCase() === 'email') {
         getQuery = (type === 'embedded') ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport};
       } else {
         getQuery = (type === 'embedded') ? {type: 'embedded', module} : {module};
       }
-      if (type === 'embedded' && module === "subscription") {
+      if (type === 'embedded' && module === "library") {
         this.props.createNew();
         return;
       }
@@ -785,7 +786,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     console.log('inside props****', this.props);
     const type = this.props.location.query.type;
     const module = this.props.location.query.module;
-    const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : true;
+    const isLanguageSupport = (this.props.location.query.isLanguageSupport) ? this.props.location.query.isLanguageSupport : false;
     const isEdmSupport = (this.props.location.query.isEdmSupport) ? this.props.location.query.isEdmSupport : true;
     let getQuery = "";
     console.log('type**** ', type);
@@ -799,7 +800,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.channel.toLowerCase() === 'email') {
       pathName = `/email/edit/${id}`;
     }
-    if (type && type.toLowerCase() === 'email') {
+    if (this.state.channel.toLowerCase() === 'email') {
       getQuery = type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module};
     } else {
       getQuery = type === 'embedded' ? {type: 'embedded', module, account_id: this.props.location.query.account_id} : {module};
@@ -807,7 +808,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.channel.toLowerCase() === 'ebill') {
       pathName = `/ebill/edit/${id}`;
     }
-    if (module && module === 'subscription') {
+    if (module && module === 'library') {
       this.props.onSelectTemplate(id);
     } else {
       if (this.state.channel.toLowerCase() === 'ebill') {
@@ -923,7 +924,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     data.map( (template) => {
       // console.log("Templates ", template._id, " Data ", template);
       const temp = {};
-      console.log('template ', template);
+      // console.log('template ', template);
       const updateDateTime = (moment().format('DD-MM-YYYY') === moment(template.updatedAt).format('DD-MM-YYYY')) ? moment(template.updatedAt).format('hh:mma') : moment(template.updatedAt).format('DD MMM YYYY');
       let content = '';
       temp.id = template._id;
@@ -932,32 +933,32 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         temp.content = (
           <div
             className="sms-template-content">
-            <div className={`sms-text ${this.state.clickedItem === template._id ? 'sms-text-blurred' : ''}`}>
+            <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
               {content || ''}
             </div>
-            {template._id === this.state.clickedItem ? <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.clickedItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+            {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() === 'email') {
         // console.log('Data Prepare');
         temp.content = (
           <div
             className="sms-template-content">
-            <div className={`sms-text ${this.state.clickedItem === template._id ? 'sms-text-blurred' : ''}`}>
+            <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
 
             </div>
-            {template._id === this.state.clickedItem ? <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.clickedItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+            {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() === 'mobilepush') {
         content = this.prepareMobilePushPreviewData(template.versions.base);
         temp.content = (
           <div>
-            <div className={`mobilepush-message ${this.state.clickedItem === template._id ? 'sms-text-blurred' : ''}`}>
+            <div className={`mobilepush-message ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>
               {content || ''}
             </div>
-            {template._id === this.state.clickedItem ? <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.clickedItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+            {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 {
         content = template && template.versions && template.versions.base ? template.versions.base['sms-editor'] : '';
@@ -969,9 +970,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         temp.content = (
           <div
             className="sms-template-content">
-            <div className={`sms-text ${this.state.clickedItem === template._id ? 'sms-text-blurred' : ''}`}>{content || ''}</div>
-            {template._id === this.state.clickedItem ? <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.clickedItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
+            <div className={`sms-text ${this.state.hoveredItem === template._id ? 'sms-text-blurred' : ''}`}>{content || ''}</div>
+            {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>
         );
       }
@@ -1270,6 +1271,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base[this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en']['template-content'];
     }
 
+    const templateList = this.populateTemplatesList(this.props.TemplatesList, true);
     return (
       <div>
         <Spin
@@ -1297,31 +1299,25 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 { name: 'description', content: 'Description of Templates' },
               ]}
             />
-            <Pagination onPageChange={() => { this.getAllTemplates({getNextPage: true}); }} paginationSelector="pagination-container">
+            {templateList && templateList.length > 0 && <Pagination onPageChange={() => { this.getAllTemplates({getNextPage: true}); }} paginationSelector="pagination-container">
               <CardGrid
                 className={this.state.channel.toLowerCase() === "mobilepush" ? "mobilepush-templates" : ""}
-                listItem={this.populateTemplatesList(this.props.TemplatesList, true)}
+                listItem={templateList}
                 filterContent={filterContent}
                 onHoverItem={this.handleOnHoverItem}
                 onItemClick={this.handleOnItemClick}
                 enablePagination
               >
               </CardGrid>
-              {(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>
-              </div>}
-            </Pagination>
-          </Row>
-          <Row>
-            {/* {(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'}}>
+            </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>
             </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>
-            </div>} */}
+            </div>}
+          </Row>
+          <Row>
             <PreviewSideBar
               showPreview={this.state.previewOpen}
               templateData={this.state.previewTemplate}
@@ -1366,6 +1362,7 @@ Templates.propTypes = {
   mobilepushActions: PropTypes.object,
   smsEditActions: PropTypes.object,
   ebillActions: PropTypes.object,
+  emailActions: PropTypes.object,
   TemplatesList: PropTypes.array,
   Templates: PropTypes.object,
   route: PropTypes.object,
@@ -1384,8 +1381,9 @@ const mapStateToProps = createStructuredSelector({
   TemplatesList: makeSelectTemplatesResponse(),
   Create: makeSelectCreateSms(),
   CreateMobilePush: makeSelectCreateMobilePush(),
-  // CreateEbill: makeSelectCreateEbill(),
+  CreateEbill: makeSelectCreateEbill(),
   Edit: makeSelectEdit(),
+  EmailCreate: makeSelectCreateEmail(),
   Global: makeSelectAuthenticated(),
 });
 
@@ -1395,6 +1393,8 @@ function mapDispatchToProps(dispatch) {
     smsActions: bindActionCreators(smsActions, dispatch),
     mobilepushActions: bindActionCreators(mobilepushActions, dispatch),
     smsEditActions: bindActionCreators(smsEditActions, dispatch),
+    ebillActions: bindActionCreators(ebillActions, dispatch),
+    emailActions: bindActionCreators(emailActions, dispatch),
     globalActions: bindActionCreators(globalActions, dispatch),
   };
 }

package/containers/Templates/messages.js

@@ -132,7 +132,7 @@ export default defineMessages({
   },
   templateDuplicateSuccess: {
     id: 'app.containers.Templates.templateDuplicateSuccess',
-    defaultMessage: "SMS Template Duplicated Successfully",
+    defaultMessage: "Template Duplicated Successfully",
   },
   templateDeleteSuccess: {
     id: 'app.containers.Templates.templateDeleteSuccess',

package/containers/Templates/reducer.js

@@ -78,8 +78,11 @@ function templatesReducer(state = initialState, action) {
         .set('templates', fromJS([]));
     case types.SET_SELECTED_LAYOUT:
       return state
-        .set('selectedEmailLayout', action.selectedTemplate)
+        .set('selectedEmailLayout', fromJS(action.selectedTemplate))
         .set('edmTemplate', fromJS({}));
+    case types.RESET_UPLOAD_DATA:
+      return state
+        .set('selectedEmailLayout', "");
     case types.SEND_ZIPPED_FILE_REQUEST:
       return state
         .set('sendingFile', true)
@@ -88,7 +91,7 @@ function templatesReducer(state = initialState, action) {
     case types.SEND_ZIPPED_FILE_SUCCESS:
       return state
         .set('sendingFile', false)
-        .set('selectedEmailLayout', action.selectedTemplate)
+        .set('selectedEmailLayout', fromJS(action.selectedTemplate))
         .set('edmTemplate', fromJS({}));
     case types.SEND_ZIPPED_FILE_FAILURE:
       return state
@@ -124,6 +127,10 @@ function templatesReducer(state = initialState, action) {
       return state
         .set('getTemplateDetailsInProgress', false)
         .set('templateDetails', fromJS({}));
+    case types.CLEAR_TEMPLATE_STORE_DATA:
+      return state
+        .set('templates', fromJS({}))
+        .set('weCRMtemplates', fromJS({}));
     default:
       return state;
   }

package/initialState.js

@@ -28,5 +28,11 @@ export default {
   },
   templates: {
 
+  },
+  email: {
+
+  },
+  ebill: {
+
   },
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -25,6 +25,7 @@
     "express": "4.14.0",
     "fixed-data-table": "^0.6.4",
     "fontfaceobserver": "2.0.7",
+    "fs-extra": "^5.0.0",
     "immutable": "3.8.1",
     "intl": "1.2.5",
     "invariant": "2.2.2",

package/reducers.js

@@ -14,6 +14,8 @@ import createSmsReducer from 'containers/Sms/Create/reducer';
 import editSmsReducer from 'containers/Sms/Edit/reducer';
 import templateReducer from 'containers/Templates/reducer';
 import tagsReducer from 'containers/TagList/reducer';
+import emailReducer from 'containers/Email/reducer';
+import ebillReducer from 'containers/Ebill/reducer';
 
 /*
  * routeReducer
@@ -56,6 +58,8 @@ export default function createReducer(asyncReducers) {
     edit: editSmsReducer,
     templates: templateReducer,
     tagList: tagsReducer,
+    email: emailReducer,
+    ebill: ebillReducer,
     ...asyncReducers,
   });
 }

package/routes.js

@@ -8,6 +8,7 @@ import * as smsSagas from 'containers/Sms/Create/sagas';
 import * as smsEditSagas from 'containers/Sms/Edit/sagas';
 import * as mobilpushSagas from 'containers/MobilePush/Create/sagas';
 import * as ebillSagas from 'containers/Ebill/sagas';
+import * as emailSagas from 'containers/Email/sagas';
 import * as templateSagas from 'containers/Templates/sagas';
 const errorLoading = (err) => {
   console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
@@ -182,6 +183,7 @@ export default function createRoutes(store) {
         importModules.then(([reducer, sagas, component]) => {
           injectReducer('templates', reducer.default);
           injectSagas(sagas.default);
+          injectSagas(emailSagas.default);
           injectSagas(rootSaga.default);
           renderRoute(component);
         });
@@ -213,7 +215,7 @@ export default function createRoutes(store) {
     },
     {
       path: '/assets',
-      name: 'Assets',
+      name: 'GALLERY',
       getComponent(nextState, cb) {
         const importModules = Promise.all([
           import('containers/Assets/Gallery/reducer'),
@@ -294,8 +296,28 @@ export default function createRoutes(store) {
         importModules.catch(errorLoading);
       },
     }, {
+      path: '/email/view',
+      name: 'EmailView',
+      getComponent(nextState, cb) {
+        const importModules = Promise.all([
+          import('containers/Email/reducer'),
+          import('containers/Email/sagas'),
+          import('containers/Email'),
+        ]);
+        const renderRoute = loadModule(cb);
+
+        importModules.then(([reducer, sagas, component]) => {
+          injectReducer('email', reducer.default);
+          injectSagas(sagas.default);
+          injectSagas(rootSaga.default);
+          injectSagas(templateSagas.default);
+          renderRoute(component);
+        });
+        importModules.catch(errorLoading);
+      },
+    }, {
       path: '/email/edit/:id',
-      name: 'Email',
+      name: 'EmailEdit',
       getComponent(nextState, cb) {
         const importModules = Promise.all([
           import('containers/Email/reducer'),