@capillarytech/creatives-library 0.0.3 → 0.0.5

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/Templates/actions.js

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

package/containers/Templates/constants.js

@@ -41,4 +41,4 @@ 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";

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});
     }
 
@@ -309,7 +310,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 +325,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 +355,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 +374,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 +442,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 +636,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 +665,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 +682,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 +697,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 +736,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);
     }
   }
 
@@ -770,7 +770,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } else {
         getQuery = (type === 'embedded') ? {type: 'embedded', module} : {module};
       }
-      if (type === 'embedded' && module === "subscription") {
+      if (type === 'embedded' && module === "library") {
         this.props.createNew();
         return;
       }
@@ -785,7 +785,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 +799,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 +807,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') {
@@ -1270,6 +1270,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 +1298,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 +1361,7 @@ Templates.propTypes = {
   mobilepushActions: PropTypes.object,
   smsEditActions: PropTypes.object,
   ebillActions: PropTypes.object,
+  emailActions: PropTypes.object,
   TemplatesList: PropTypes.array,
   Templates: PropTypes.object,
   route: PropTypes.object,
@@ -1375,8 +1371,6 @@ Templates.propTypes = {
   globalActions: PropTypes.object,
   intl: intlShape.isRequired,
   Global: PropTypes.object,
-  createNew: PropTypes.func,
-  onSelectTemplate: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -1384,8 +1378,9 @@ const mapStateToProps = createStructuredSelector({
   TemplatesList: makeSelectTemplatesResponse(),
   Create: makeSelectCreateSms(),
   CreateMobilePush: makeSelectCreateMobilePush(),
-  // CreateEbill: makeSelectCreateEbill(),
+  CreateEbill: makeSelectCreateEbill(),
   Edit: makeSelectEdit(),
+  EmailCreate: makeSelectCreateEmail(),
   Global: makeSelectAuthenticated(),
 });
 
@@ -1395,6 +1390,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

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.3",
+  "version": "0.0.5",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

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);
         });
@@ -294,6 +296,26 @@ 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',
       getComponent(nextState, cb) {

package/translations/en.json

@@ -2,11 +2,14 @@
   "app.components.BreadCrumbs.header": "This is the BreadCrumbs component !",
   "app.components.CapTagList.Cancel": "Cancel",
   "app.components.CapTagList.Ok": "Ok",
+  "app.components.CapTagList.dynamic_days_before_expiry": "Dynamic Days before Expiry",
   "app.components.CapTagList.numberOfDaysBeforeExpiry": "Number of days before expiry",
   "app.components.Ckeditor.header": "This is the Ckeditor component !",
   "app.components.CustomPopOver.header": "This is the CustomPopOver component !",
   "app.components.DateRange.header": "This is the DateRange component !",
   "app.components.Edmeditor.header": "This is the Edmeditor component !",
+  "app.components.EmailPreview.lastModified": "Last Modified On",
+  "app.components.EmailPreview.uploadedBy": "Last Modified By",
   "app.components.Footer.header": "This is the Footer component !",
   "app.components.FormBuilder.header": "This is the FormBuilder component !",
   "app.components.ImagePreview.loadingImage": "Loading Images !!!!",
@@ -61,6 +64,7 @@
   "app.containers.Create.saveButton": "Save",
   "app.containers.Create.saveTemplateLoader": "Saving Template...",
   "app.containers.Create.smsEditorPlaceholder": "Please input sms template content.",
+  "app.containers.Create.somethingWentWrong": "Something Went Wrong!!",
   "app.containers.Create.tagsErrorMessage": "Template content has unsupported/missing tags!",
   "app.containers.Create.tagsLabel": "Tags",
   "app.containers.Create.templateNamePlaceHolder": "Enter template name",
@@ -97,6 +101,7 @@
   "app.containers.Edit.saveButton": "Save",
   "app.containers.Edit.saveTemplateLoader": "Saving Template...",
   "app.containers.Edit.smsEditorPlaceholder": "Please input sms template content.",
+  "app.containers.Edit.somethingWentWrong": "Something Went Wrong!!",
   "app.containers.Edit.tagsErrorMessage": "Template content has unsupported/missing tags!",
   "app.containers.Edit.tagsLabel": "Tags",
   "app.containers.Edit.templateNamePlaceHolder": "Enter template name",
@@ -112,6 +117,7 @@
   "app.containers.Email.Tags": "Tags",
   "app.containers.Email.alphabetically": "Alphabetically",
   "app.containers.Email.alphabeticallyOption": "Alphabetically",
+  "app.containers.Email.assetUploadFailed": "Image uploaded failed",
   "app.containers.Email.blankTemplate": "Blank Template",
   "app.containers.Email.cancel": "Cancel",
   "app.containers.Email.createHeading": "Create Email Template",
@@ -152,8 +158,10 @@
   "app.containers.Email.templateNameNotEmpty": "Template name cannot be empty.",
   "app.containers.Email.templateNamePlaceholder": "Enter template name",
   "app.containers.Email.upload": "Upload Image",
+  "app.containers.Email.uploadSizeError": "File Size Too large to upload. Please upload file upto 5 MB",
   "app.containers.Email.uploadedAt": "Modified",
   "app.containers.Email.uploadedBy": "Uploaded By",
+  "app.containers.Email.uploadingImage": "Uploading Image...",
   "app.containers.Email.yes": "Yes",
   "app.containers.Login.header": "This is Login container change !",
   "app.containers.Login.invalidCredential": "Invalid Username or Password",
@@ -278,6 +286,7 @@
   "app.containers.Templates.alphabeticallyOption": "Alphabetically",
   "app.containers.Templates.blankTemplate": "Blank Template",
   "app.containers.Templates.campaigns": "Campaigns",
+  "app.containers.Templates.cancelText": "Cancel",
   "app.containers.Templates.createEmailActionButton": "Create Email",
   "app.containers.Templates.createSmsActionButton": "Create SMS",
   "app.containers.Templates.creatives": "Creatives",
@@ -292,12 +301,15 @@
   "app.containers.Templates.emailPreview": "Email Preview",
   "app.containers.Templates.gettingAllTemplates": "Getting all templates...",
   "app.containers.Templates.header": "This is Templates container !",
+  "app.containers.Templates.imageTemplate": "Image",
+  "app.containers.Templates.invalidUploadFileError": "File cannot be uploaded. Please select another file with valid file format.",
   "app.containers.Templates.mapTemplate": "Map Template",
   "app.containers.Templates.mobilepushHeader": "Mobile Push",
   "app.containers.Templates.mostRecentOption": "Most Recent",
   "app.containers.Templates.newTemplate": "New Template",
   "app.containers.Templates.noAccountMessage": "Please select an account to proceed",
   "app.containers.Templates.noTemplatesMessage": "No Templates Available",
+  "app.containers.Templates.preview": "Preview",
   "app.containers.Templates.previewButton": "Preview",
   "app.containers.Templates.searchText": "Search",
   "app.containers.Templates.selectAccount": "Select Account",
@@ -308,8 +320,11 @@
   "app.containers.Templates.smsHeader": "SMS",
   "app.containers.Templates.somethingWentWrong": "Something Went Wrong!!",
   "app.containers.Templates.sortBy": "Sort by",
+  "app.containers.Templates.templateDeleteConfirm": "Are you sure you want to delete this Template?",
   "app.containers.Templates.templateDeleteSuccess": "SMS Template Deleted Successfully",
-  "app.containers.Templates.templateDuplicateSuccess": "SMS Template Duplicated Successfully",
+  "app.containers.Templates.templateDuplicateSuccess": "Template Duplicated Successfully",
+  "app.containers.Templates.templateSelection": "Template Selection",
+  "app.containers.Templates.textTemplate": "Text",
   "app.containers.Templates.unMapButton": "Unmap",
   "app.containers.Templates.uploadFile": "Upload File",
   "app.containers.Templates.uploadedAt": "Modified",
@@ -318,6 +333,7 @@
   "app.containers.Templates.useEditor": "Use Editor",
   "app.containers.Templates.wechatChannelTemplatesHeader": "WECHAT Templates",
   "app.containers.Templates.wechatHeader": "WECHAT",
+  "app.containers.Templates.yesText": "Yes",
   "app.containers.Templates.zipUploadFailed": "Failed to Upload zip file",
   "app.containers.Testv2.header": "This is Testv2 container !",
   "app.containers.WeChat.accountId": "Account Id",