@capillarytech/creatives-library 2.0.28 → 2.0.30

package/components/CmsTemplatesComponent/index.js

@@ -15,19 +15,18 @@ function CmsTemplatesComponent(props) {
   const cardDataList = props.cmsTemplates.map((template) => (
     {
       title: template.name,
-      content: template.versions.base.preview_http_url,
+      url: template.versions.base.preview_http_url,
       hoverOption: <CapButton onClick={() => props.handleEdmDefaultTemplateSelection(template._id)}><FormattedMessage {...messages.select}/></CapButton>,
     }));
   return (<div>
     <div className="pagination-container">
-      <CapCustomCardList cardList={cardDataList} type="SMS" />
+      <CapCustomCardList cardList={cardDataList} type="Email" />
     </div>
   </div>);
 }
 
 CmsTemplatesComponent.propTypes = {
   cmsTemplates: PropTypes.array,
-  handleEdmDefaultTemplateSelection: PropTypes.func,
 };
 
 export default CmsTemplatesComponent;

package/containers/CreativesContainer/SlideBoxContent.js

@@ -32,6 +32,7 @@ function SlideBoxContent(props) {
       onEmailModeChange,
       emailCreateMode,
       emailStep,
+      onEmailNextStep,
     } = props;
   const type = messageDetails.type.toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: 'embedded', module: 'library' };
@@ -110,9 +111,10 @@ function SlideBoxContent(props) {
         isGetFormData={isGetFormData}
         getFormdata={getFormData}
         templateData={templateData}
-        getFormSubscriptionData={getFormData}
-        getDefaultTags={type}
+        type={type}
         step={emailStep}
+        showNextStep={onEmailNextStep}
+        isFullMode={false}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -145,5 +147,9 @@ SlideBoxContent.propTypes = {
   onCreateNew: PropTypes.func,
   onChannelChange: PropTypes.func,
   currentChannel: PropTypes.string,
+  onEmailModeChange: PropTypes.func,
+  emailCreateMode: PropTypes.string,
+  emailStep: PropTypes.string,
+  onEmailNextStep: PropTypes.func,
 };
 export default SlideBoxContent;

package/containers/CreativesContainer/SlideBoxFooter.js

@@ -4,26 +4,28 @@ import { CapButton } from '@capillarytech/cap-ui-library';
 import PropTypes from 'prop-types';
 import * as constants from './constants';
 function SlideBoxFooter(props) {
-  const { slidBoxContent, onSave, messages, onEditTemplate, currentChannel, onEmailNextStep } = props;
-  const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL;
+  const { slidBoxContent, onSave, messages, onEditTemplate, currentChannel, onEmailNextStep, emailStep, emailCreateMode } = props;
+  const isEmailCreate = slidBoxContent === 'createTemplate' && currentChannel === constants.EMAIL && emailStep !== 'createTemplate';
   const isCreate = (slidBoxContent === 'editTemplate' || slidBoxContent === 'createTemplate') && !isEmailCreate;
   return (
     <div>
-      {(isCreate) && (
-      <CapButton onClick={onSave}>
-        <FormattedMessage {...messages.creativesTemplatesSave} />
-      </CapButton>
-        )}
-      {slidBoxContent &&
-        <CapButton onClick={onEmailNextStep}>
-          <FormattedMessage {...messages.continue} />
+      <div>
+        {(isCreate) && (
+        <CapButton onClick={onSave}>
+          <FormattedMessage {...messages.creativesTemplatesSave} />
         </CapButton>
-        }
-      {slidBoxContent === 'preview' && (
-        <CapButton onClick={onEditTemplate} type="secondary">
-          <FormattedMessage {...messages.creativesTemplatesEdit} />
-        </CapButton>
-        )}
+          )}
+        {isEmailCreate && emailCreateMode &&
+          <CapButton onClick={onEmailNextStep}>
+            <FormattedMessage {...messages.continue} />
+          </CapButton>
+          }
+        {slidBoxContent === 'preview' && (
+          <CapButton onClick={onEditTemplate} type="secondary">
+            <FormattedMessage {...messages.creativesTemplatesEdit} />
+          </CapButton>
+          )}
+      </div>
     </div>
   );
 }
@@ -34,5 +36,7 @@ SlideBoxFooter.propTypes = {
   onEditTemplate: PropTypes.func,
   currentChannel: PropTypes.string,
   onEmailNextStep: PropTypes.func,
+  emailStep: PropTypes.string,
+  emailCreateMode: PropTypes.string,
 };
 export default SlideBoxFooter;

package/containers/CreativesContainer/index.js

@@ -21,12 +21,17 @@ class Creatives extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      emailStep: 'modeSelection', //modeSelection: for selecting upload or editor, and createTemplate to create template create based on modeSelection
+      emailStep: 1, //modeSelection: for selecting upload or editor, and createTemplate to create template create based on modeSelection
       showSlideBox: true,
       slidBoxContent: this.getSlideBocContent({mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode}),
       templateData: this.getTemplateData(props.templateData),
       currentChannel: this.props.channel || 'sms',
     };
+    this.creativesEmailSteps = {
+      1: 'modeSelection',
+      2: 'templateSelection',
+      3: 'createTemplate',
+    };
   }
   componentWillUnmount() {
     console.log("unmounting creatives");
@@ -54,7 +59,14 @@ class Creatives extends React.Component {
   onChannelChange = (channel) => {
     this.setState({currentChannel: channel});
   }
-
+  onEmailNextStep = () => {
+    this.setState((prevState) => ({
+      emailStep: prevState.emailStep + 1,
+    }));
+  }
+  onEmailModeChange = (mode) => {
+    this.setState({ emailCreateMode: mode});
+  }
   getTemplateData = (templateData) => { //from consumers to creatives
     const {isFullMode} = this.props;
     if (!isFullMode && templateData) { // for component mode
@@ -113,12 +125,6 @@ class Creatives extends React.Component {
     }
     return creativesMode;
   }
-  onEmailModeChange = (mode) => {
-    this.setState({ emailCreateMode: mode});
-  }
-  onEmailNextStep = (step) => {
-    this.setState({emailStep: step });
-  }
   getFormData = (template) => {
     if (template.validity) {
       this.setState(
@@ -176,7 +182,8 @@ class Creatives extends React.Component {
               onChannelChange={this.onChannelChange}
               onEmailModeChange={this.onEmailModeChange}//used when create is clicked in email
               emailCreateMode={emailCreateMode}// upload zip || use editor are values
-              emailStep={emailStep}
+              emailStep={this.creativesEmailSteps[emailStep]}
+              onEmailNextStep={this.onEmailNextStep}
             />
           }
           footer={
@@ -187,6 +194,8 @@ class Creatives extends React.Component {
               slidBoxContent={slidBoxContent}
               onEmailNextStep={this.onEmailNextStep}
               currentChannel={currentChannel.toUpperCase()}
+              emailStep={this.creativesEmailSteps[emailStep]}
+              emailCreateMode={emailCreateMode}
             />
           }
           handleClose={this.toggleShowSlideBox}

package/containers/Email/index.js

@@ -10,7 +10,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Helmet from 'react-helmet';
-import { Row, Col, Spin, Breadcrumb, Popover, Modal, Select } from 'antd';
+import { Row, Col, Spin, Popover, Modal, Select } from 'antd';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { CapButton, CapInput } from '@capillarytech/cap-react-ui-library';
 import { createStructuredSelector } from 'reselect';
@@ -1123,11 +1123,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({currentTab: data, formData, schema});
   }
 
-  onTemplateNameChange = (name) => {
+  onTemplateNameChange = () => {
 
   }
 
-  onTagSelect = (data, currentTab, value) => {
+  onTagSelect = (data) => {
     const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
     const formData = _.cloneDeep(this.state.formData);
     const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
@@ -1148,7 +1148,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     }
   }
 
-  onImageSelect = (data) => {
+  onImageSelect = () => {
     this.setState({ showImageSelectionBox: true }, () => {
       const params = {
         name: this.state.searchText,
@@ -1234,8 +1234,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
     const formData = _.cloneDeep(this.state.formData);
 
-    const tabIndex = this.state.currentTab + 1;
-    const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone() : _.cloneDeep(this.state.schema);
+    const schema = (this.props.location.query.type === 'embedded') ? this.removeStandAlone(this.state.schema) : _.cloneDeep(this.state.schema);
     const containers = _.cloneDeep(schema.containers.slice());
     let tabKey = "";
     let currentTab = _.cloneDeep(this.state.currentTab);
@@ -1699,7 +1698,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({schema, formData, showModal: false});
   }
 
-  initFormData(props, fromMount) {
+  initFormData(props) {
     let newFormData = {};
     if (props.Global.currentOrgDetails && props.Global.currentOrgDetails.basic_details) {
       newFormData = {
@@ -1887,7 +1886,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({formData});
   }
 
-  handleOnHoverItem = (isHovering, id) => {
+  handleOnHoverItem = (isHovering) => {
     if (!isHovering) {
       // const data = _.find(this.props.Email.assetList, {_id: id});
       //
@@ -1944,7 +1943,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   showSubject = () => {
     const schema = _.cloneDeep(this.state.schema);
     if (schema.standalone) {
-      if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" || this.props.location.query.module === "coupon_expiry" ||
+      if ((this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "timeline" || this.props.location.query.module === "coupon_expiry" ||
       this.props.location.query.module === "library")) {
         schema.standalone.sections[0].inputFields[0].style.display = "";
         schema.standalone.sections[0].inputFields[0].labelStyle.display = "";
@@ -2018,7 +2017,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({ device });
   }
 
-  handleVersionSelect = (status, formData, val) => {
+  handleVersionSelect = (status, formData) => {
     const newFormData = _.cloneDeep(this.state.formData);
     const schema = _.cloneDeep(this.state.schema);
     const versionIndex = _.findIndex(formData['template-version-options'], {key: status});
@@ -2038,7 +2037,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({formData: newFormData, schema, currentTab: (versionIndex + 1), isSchemaChanged: true});
   }
 
-  afterPaste = (evt) => {
+  afterPaste = () => {
 
   }
 
@@ -2061,11 +2060,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({showConfirmationModal: true});
   }
 
-  renameVersion = (data, currentTab) => {
+  renameVersion = () => {
 
   }
 
-  markFinalVersion = (data, currentTab) => {
+  markFinalVersion = () => {
     const message = getMessageObject('success', this.props.intl.formatMessage(messages["Template Marked as Final Successfully"]), true);
     this.props.globalActions.addMessageToQueue(message);
   }
@@ -2399,7 +2398,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   injectEvents = (schema) => {
     const type = this.props.location.query.type;
 
-    const temp = schema;
+    let temp = _.cloneDeep(schema);
     temp.standalone.sections = this.injectSections(temp.standalone.sections);
     _.forEach(temp.containers, (container) => {
       let tempContainer = container;
@@ -2469,11 +2468,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       }
     });
     //}
-
-    this.setState({schema, isSchemaChanged: true}, () => {
-      if (type === 'embedded') {
-        this.removeStandAlone();
-      }
+    temp = type === 'embedded' ? this.removeStandAlone(temp) : temp;
+    this.setState({schema: temp, isSchemaChanged: true}, () => {
       if (type === 'embedded' && (this.props.route.name === 'EmailView' || (this.props.location.query.module && (this.props.location.query.module.toLowerCase() === 'loyalty' || this.props.location.query.module.toLowerCase() === 'dvs' || this.props.location.query.module.toLowerCase() === 'coupon_expiry' || this.props.location.query.module.toLowerCase() === 'timeline')))) {
         if ((this.props.route.name === "EmailEdit" || this.props.route.name === "EmailCreate") && (this.props.location.query.module === "dvs" || this.props.location.query.module.toLowerCase() === 'coupon_expiry')) {
           return;
@@ -2497,17 +2493,17 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.props.globalActions.fetchSchemaForEntity(query);
   }
 
-  removeStandAlone() {
-    const schema = _.cloneDeep(this.state.schema);
-    delete schema.standalone;
-    schema.standalone = {};
-    schema.standalone.sections = [];
+  removeStandAlone(schema) {
+    const newSchema = _.cloneDeep(schema);
+    delete newSchema.standalone;
+    newSchema.standalone = {};
+    newSchema.standalone.sections = [];
     if (this.props.location.query.type === 'embedded' && (this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs" || this.props.location.query.module === "coupon_expiry" || this.props.location.query.module === "timeline" ||
       this.props.location.query.module === "library")) {
-      schema.standalone.sections.push(_.cloneDeep(this.state.schema.standalone.sections[0]));
+      newSchema.standalone.sections.push(_.cloneDeep(schema.standalone.sections[0]));
     }
 
-    _.forEach(schema.containers, (container) => {
+    _.forEach(newSchema.containers, (container) => {
       const temp = container;
       if (temp.type === 'tabs') {
         // temp.tabBarExtraContent = {};
@@ -2543,8 +2539,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         temp.panes.push(basePane);
       }
     });
-    this.setState({ schema, isSchemaChanged: true });
-    return schema;
+    return newSchema;
   }
 
   startTemplateCreation(data) {
@@ -2561,7 +2556,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const formData = _.cloneDeep(this.state.formData);
       formData[0].selectedLanguages = [];
       let tabKey;
-      if (this.props.location.query.type === 'embedded' && (this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
+      if ((this.props.location.query.isLanguageSupport === undefined || this.props.location.query.isLanguageSupport === 'false')) {
         formData['template-subject'] = data.base.subject ? data.base.subject : '';
         const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
         let languageIndex = _.findIndex(this.supportedLanguages, {iso_code: baseLanguage});
@@ -2833,6 +2828,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         postAction: this.state.getFormDataValue || 'next',
         value: this.transformFormData(passedData),
         validity: this.state.isFormValid,
+        type: 'EMAIL',
       };
 
       this.setState({checkValidation: true});

package/containers/Email/sagas.js

@@ -7,7 +7,6 @@ import * as types from './constants';
 export function* createTemplate(template) {
   let errorMsg;
   try {
-    console.log('Template data ', template);
     const result = yield call(Api.createEmailTemplate, template);
     if (result.message || result.status.code === 500) {
       errorMsg = result.message;
@@ -21,7 +20,6 @@ export function* createTemplate(template) {
 export function* duplicateTemplate(id, channel) {
   let errorMsg;
   try {
-    console.log('Duplicate template ', id, channel);
     const result = yield call(Api.duplicateTemplate, id, channel );
     if (result.message || result.status.code === 500) {
       errorMsg = result.message;
@@ -34,7 +32,6 @@ export function* duplicateTemplate(id, channel) {
 
 export function* getTemplateDetails(id) {
   try {
-    console.log('saga get Template details', id);
     const result = yield call(Api.getTemplateDetails, id);
     // const sidebar = result.response.sidebar;
     yield put({ type: types.GET_TEMPLATE_DETAILS_SUCCESS, data: result.response });
@@ -54,9 +51,8 @@ export function* getAllAssets(assetType, queryParams) {
 
 export function* getCmsSetting({cmsType, projectId, cmsMode, langId, isEdmSupport}) {
   try {
-    console.log('cms sagas', langId);
     const result = yield call(Api.getCmsTemplateSettings, cmsType, projectId, cmsMode, langId, isEdmSupport);
-    console.log('CMS Setting ', result);
+
     yield put({ type: types.GET_CMS_EDITOR_DETAILS_SUCCESS, settings: result.data.response.cmsDetails });
   } catch (error) {
     yield put({ type: types.GET_CMS_EDITOR_DETAILS_FAILURE, error });
@@ -66,7 +62,7 @@ export function* getCmsSetting({cmsType, projectId, cmsMode, langId, isEdmSuppor
 export function* getCmsData({cmsType, projectId, langId}) {
   try {
     const result = yield call(Api.getCmsTemplateData, cmsType, projectId, langId);
-    console.log('CMS Data sagas', result);
+
     yield put({ type: types.GET_CMS_EDITOR_DATA_SUCCESS, data: result.data.response.data, langId: result.data.response.langId });
   } catch (error) {
     yield put({ type: types.GET_CMS_EDITOR_DATA_FAILURE, error });

package/containers/EmailWrapper/index.js

@@ -6,11 +6,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
 import _ from 'lodash';
-import {CapInput, CapRadioCard, CapHeader} from '@capillarytech/cap-ui-library';
+import { CapRadioCard, CapHeader, CapNotification} from '@capillarytech/cap-ui-library';
 import { UserIsAuthenticated } from '../../utils/authWrapper';
 import {selectEmailLayout, selectCmsTemplates, selectEdmEditor} from '../Templates/selectors';
 import * as templatesActionsCreators from '../Templates/actions';
@@ -21,13 +21,15 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
   constructor(props) {
     super(props);
     this.state = {
+      templateName: '',
       routeParams: {
         pathname: `/email/create`,
-        query: {},
+        query: { module: 'library', type: 'embedded', isEdmSupport: true, isLanguageSupport: true},
       },
       modeContent: {
 
       },
+      // selectedCreateMode: '',
 
     };
     this.modes = [
@@ -43,19 +45,21 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       },
     ];
   }
+
   componentDidUpdate() {
-    const {emailCreateMode, EmailLayout, CmsTemplates, step} = this.props;
-    if (step === "modeSelection") {
-      if (emailCreateMode === 'upload' && !EmailLayout) {
-        document.getElementById('filename').click();
-      } else if (emailCreateMode === "editor" && !CmsTemplates) {
-        this.props.templatesActions.getEdmDefaultTemplates();
+    const {modeContent} = this.state;
+   // const isValid = this.isValid();
+    const {emailCreateMode, EmailLayout, CmsTemplates, step, SelectedEdmDefaultTemplate, templatesActions} = this.props;
+    if (step === "modeSelection" && !this.state.selectedCreateMode && emailCreateMode === 'upload' && !EmailLayout) {
+      document.getElementById('upload-email-template').click();
+    } else if (step === "templateSelection" && !this.state.selectedCreateMode) {
+      if (emailCreateMode === "editor" && !CmsTemplates) {
+        templatesActions.getEdmDefaultTemplates();
       }
-    } else if (step === "createTemplate") {
-      const {modeContent} = this.state;
+    } else if (step === "createTemplate" && !this.state.selectedCreateMode) {
       if (emailCreateMode === 'upload' && !EmailLayout) {
         this.handleFileUpload(modeContent.e, modeContent.files);
-      } else if (emailCreateMode === "editor" && !CmsTemplates) {
+      } else if (emailCreateMode === "editor" && _.isEmpty(SelectedEdmDefaultTemplate)) {
         this.handleEdmDefaultTemplateSelection(modeContent.id);
       }
     }
@@ -63,72 +67,76 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
   onChange = (e) => {
     this.props.onEmailModeChange( e.target.value );
   };
+  onTemplateNameChange = (ev) => {
+    this.setState({templateName: ev.target.vale});
+  }
+  //isValid = () => !_.isEmpty(this.state.templateName)
+  setCreateMode = (emailCreateMode) => {
+    this.setState({selectedCreateMode: emailCreateMode});
+  }
   handleFileUpload = (e, files) => {
-    const {location, templatesActions } = this.props;
+    const { templatesActions, intl } = this.props;
     if (files.length === 0) {
       return;
     }
+    this.setCreateMode('upload');
     const fileExtension = files[0].name.split('.').pop();
     const supportedZipFormats = ['zip'];
-    const module = location.query.module || 'default';
-    const isLanguageSupport = location.query.isLanguageSupport || true;
-    const isEdmSupport = (location.query.isEdmSupport !== "false") || false;
+    //TODO: has to be changed based on props.
+
 
     if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
       templatesActions.handleZipUpload(files[0]);
-      document.getElementById("filename").value = "";
+      document.getElementById("upload-email-template").value = "";
     } else if (fileExtension === 'html' || fileExtension === 'htm') {
       const reader = new FileReader();
       reader.onload = () => {
         const text = reader.result;
         templatesActions.handleHtmlUpload(text);
-        document.getElementById("filename").value = "";
-        const type = location.query.type;
-        this.setState({routeParams: {
-          pathname: `/email/create`,
-          query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
-        }});
+        document.getElementById("upload-email-template").value = "";
       };
       reader.readAsText(files[0]);
     } else {
-      // const message = getMessageObject('error', this.props.intl.formatMessage(messages.invalidUploadFileError), true);
-      // this.props.globalActions.addMessageToQueue(message);
+      const message = {
+        message: intl.formatMessage(messages.invalidUploadFileError),
+        description: intl.formatMessage(messages.invalidUploadFileErrorDesc),
+      };
+      CapNotification.error(message);
     }
   };
 
   handleEdmDefaultTemplateSelection = (id) => {
     const {CmsTemplates, templatesActions } = this.props;
     const data = _.find(CmsTemplates, {_id: id});
-    const module = 'default'; //location.query.module || 'default';
-    const isLanguageSupport = true; //location.query.isLanguageSupport || true;
-    const isEdmSupport = true; //(location.query.isEdmSupport !== "false") || false;
 
     templatesActions.setEdmTemplate(data);
-    const getQuery = {module, isLanguageSupport, isEdmSupport};
-    this.setState({routeParams: {
-      pathname: `/email/create`,
-      query: getQuery,
-    }});
+    this.setState({
+      selectedCreateMode: 'editor'});
   };
   useFileUpload = (e, {files}) => {
-    this.setState({modeContent: {e, files}});
+    this.setState({modeContent: {e, files}}, this.props.showNextStep);
   }
   useEditor = (id) => {
-    this.setState({modeContent: {id}});
+    this.setState({modeContent: {id}}, this.props.showNextStep);
   }
+
+  isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
   render() {
-    const {emailCreateMode, isGetFormData, getFormData, type, EmailLayout, CmsTemplates, SelectedEdmDefaultTemplate} = this.props;
-    const isShowEmailCreate = (emailCreateMode === "upload" && EmailLayout !== null) || (emailCreateMode === "editor" && SelectedEdmDefaultTemplate);
+    const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step} = this.props;
+    const {templateName} = this.state;
+    const isShowEmailCreate = this.isShowEmailCreate();
     return (
       <div>
-        <input type="file" id="filename" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.useFileUpload(event, {files: event.target.files})} />
+        <input type="file" id="upload-email-template" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.useFileUpload(event, {files: event.target.files})} />
 
-        {!emailCreateMode ?
+        {step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload") ?
           <div>
-            <CapInput
+            {/* <CapInput
               label={<FormattedMessage {...messages.creativeName}/>}
-              labelPosition="top"/>
-            <CapHeader type="h4"><FormattedMessage {...messages.createMode}/></CapHeader>
+              onChange={this.onTemplateNameChange}
+              value={templateName}
+              labelPosition="top"/> */}
+            <CapHeader size="small" title={<FormattedMessage {...messages.createMode}/>}/>
             <CapRadioCard
               panes={this.modes}
               onChange={this.onChange}
@@ -143,9 +151,10 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
               route={{ name: 'email' }}
               params={{}}
               isGetFormData={isGetFormData}
-              getFormdata={getFormData}
-              getFormSubscriptionData={getFormData}
+              getFormdata={getFormdata}
+              getFormSubscriptionData={getFormdata}
               getDefaultTags={type}
+              defaultData={{templateName}}
           />}
             {CmsTemplates && !isShowEmailCreate && <CmsTemplatesComponent cmsTemplates={CmsTemplates} handleEdmDefaultTemplateSelection={this.useEditor}/>}
 
@@ -160,16 +169,16 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 EmailWrapper.propTypes = {
   onEmailModeChange: PropTypes.func.isRequired,
   isGetFormData: PropTypes.bool,
-  getFormData: PropTypes.func,
   type: PropTypes.string,
   emailCreateMode: PropTypes.string,
   EmailLayout: PropTypes.object,
-  location: PropTypes.object,
-  route: PropTypes.object,
   templatesActions: PropTypes.object,
   CmsTemplates: PropTypes.arrayOf(PropTypes.object),
   SelectedEdmDefaultTemplate: PropTypes.object,
   step: PropTypes.string,
+  showNextStep: PropTypes.func,
+  getFormdata: PropTypes.func,
+  intl: intlShape,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/EmailWrapper/messages.js

@@ -34,4 +34,12 @@ export default defineMessages({
     id: 'app.containers.EmailWrapper.createMode',
     defaultMessage: 'How do you want to create ?',
   },
+  invalidUploadFileError: {
+    id: `app.containers.EmailWrapper.invalidUploadFileError`,
+    defaultMessage: `File cannot be uploaded.`,
+  },
+  invalidUploadFileErrorDesc: {
+    id: `app.containers.EmailWrapper.invalidUploadFileDesc`,
+    defaultMessage: `Please select another file with valid file format.`,
+  },
 });

package/containers/Sms/Edit/index.js

@@ -297,6 +297,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       value: result,
       postAction: value || 'next',
       validity: this.state.isFormValid,
+      type: 'SMS',
     };
     this.setState({checkValidation: true});
     console.log('posting final result internal', response);

package/package.json

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

package/routes.js

@@ -557,13 +557,15 @@ export default function createRoutes(store) {
           import('containers/Templates/reducer'),
           import('containers/Templates/sagas'),
           import('containers/TemplatesV2'),
+          import('containers/Email/sagas'),
         ]);
 
         const renderRoute = loadModule(cb);
 
-        importModules.then(([reducer, sagas, component]) => {
+        importModules.then(([reducer, sagas, component, emailContainerSagas]) => {
           injectReducer('templates', reducer.default);
           injectSagas(sagas.default);
+          injectSagas(emailContainerSagas.default);
           renderRoute(component);
         });