@capillarytech/creatives-library 0.0.2 → 0.0.3

package/containers/Templates/index.js

@@ -26,7 +26,6 @@ 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 CardGrid from '../../components/CardGrid';
 import PreviewSideBar from '../../components/PreviewSideBar';
 import './_templates.scss';
@@ -411,6 +410,26 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
   };
 
+  handleBlankTemplateAction = (item) => {
+    const type = this.props.location.query.type;
+    const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+    if (item === "uploadFile") {
+      document.getElementById('filename').click();
+    } else if (item === "editor") {
+      this.toggleEdmEmailTemplateSelection();
+    } else if (item === 'textTemplate') {
+      this.props.router.push({
+        pathname: `/mobilepush/create/text`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
+    } else if (item === 'imageTemplate') {
+      this.props.router.push({
+        pathname: `/mobilepush/create/image`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
+    }
+  }
+
   handleFileUpload = (e, {files}) => {
     if (files.length === 0) {
       return;
@@ -431,6 +450,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const text = reader.result;
         this.props.actions.handleHtmlUpload(text);
         const type = this.props.location.query.type;
+        if (type === 'embedded' && module === "subscription") {
+          this.props.createNew();
+          return;
+        }
         this.props.router.push({
           pathname: `/${this.props.route.name.toLowerCase()}/create`,
           query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module},
@@ -438,8 +461,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       };
       reader.readAsText(files[0]);
     } else {
-      alert('Invalid file type added! Please Give a proper zip file');
-      console.log('Invalid file type added! Please Give a proper zip file');
+      const message = getMessageObject('error', this.props.intl.formatMessage(messages.invalidUploadFileError), true);
+      this.props.globalActions.addMessageToQueue(message);
     }
   };
 
@@ -747,6 +770,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } else {
         getQuery = (type === 'embedded') ? {type: 'embedded', module} : {module};
       }
+      if (type === 'embedded' && module === "subscription") {
+        this.props.createNew();
+        return;
+      }
       this.props.router.push({
         pathname: `/${this.state.channel.toLowerCase()}/create`,
         query: getQuery,
@@ -828,20 +855,53 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.setState({showModal: false});
   }
 
-  populateTemplatesList(data) {
+  populateTemplatesList = (data, blankTemplateRequired) => {
     if (!data) {
       return [];
     }
     const type = this.props.location.query.type;
     const items = [];
+    const channel = this.state.channel.toLowerCase();
 
-    if (type === 'embedded' && this.state.channel !== 'wechat' && this.state.channel.toLowerCase() !== "mobilepush") {
+    if (type === 'embedded' && channel !== 'wechat' && blankTemplateRequired) {
+      let content;
+      if (channel === 'sms') {
+        content = (<div className="sms-template-content" onClick={this.createTemplate}>
+          <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">{this.props.intl.formatMessage(messages.blankTemplate)}</div>
+        </div>);
+      } else if (channel === 'email') {
+        content = (<div className="sms-template-content">
+          <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">
+            <div>
+              <button type="button" className="ant-btn cap-button edit-button ant-btn-ghost" onClick={() => this.handleBlankTemplateAction('uploadFile')}><span>Upload File</span></button>
+              <button type="button" className="ant-btn cap-button preview-button ant-btn-danger" onClick={() => this.handleBlankTemplateAction('editor')}><span>Use Editor</span></button>
+            </div>
+          </div>
+        </div>);
+      } else if (channel === 'mobilepush') {
+        content = (<div className="sms-template-content">
+          <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">
+            <div>
+              <button
+                type="button"
+                className="ant-btn cap-button edit-button ant-btn-ghost"
+                onClick={() => this.handleBlankTemplateAction('textTemplate')}>
+                <span>{this.props.intl.formatMessage(messages.textTemplate)}</span>
+              </button>
+              <button
+                type="button"
+                className="ant-btn cap-button preview-button ant-btn-danger"
+                onClick={() => this.handleBlankTemplateAction('imageTemplate')}>
+                <span>{this.props.intl.formatMessage(messages.imageTemplate)}</span>
+              </button>
+            </div>
+          </div>
+        </div>);
+      }
       items.push(
         {
           id: 'blankTemplate',
-          content: <div className="sms-template-content" onClick={this.createTemplate}>
-            <div style={{textAlign: 'center', lineHeight: '260px'}} className="sms-text">{this.props.intl.formatMessage(messages.blankTemplate)}</div>
-          </div>,
+          content,
         }
       );
     } /*else if (type === 'embedded' && this.state.channel.toLowerCase() === "mobilepush") {
@@ -996,13 +1056,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       onOk={this.handleOk}
       onCancel={this.handleCancel}
       footer={[
-        <CapButton key="back" onClick={this.handleCancel}>Cancel</CapButton>,
+        <CapButton key="back" onClick={this.handleCancel}>{this.props.intl.formatMessage(messages.cancelText)}</CapButton>,
         <CapButton key="submit" type="primary" id="delete-version" onClick={this.handleOk}>
-          Yes
+          {this.props.intl.formatMessage(messages.yesText)}
         </CapButton>,
       ]}
     >
-    Are you sure you want to delete this Template?
+      {this.props.intl.formatMessage(messages.templateDeleteConfirm)}
     </Modal>);
     return modal;
   };
@@ -1151,10 +1211,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const createPushMenu = (
           <Menu onClick={this.createTemplate}>
             <MenuItem key="text">
-              Text
+              {this.props.intl.formatMessage(messages.textTemplate)}
             </MenuItem>
             <MenuItem key="image">
-              Image
+              {this.props.intl.formatMessage(messages.imageTemplate)}
             </MenuItem>
           </Menu>
         );
@@ -1194,7 +1254,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const cmsTemplateSelectionContent = (
       <CardGrid
         className={""}
-        listItem={this.populateTemplatesList(this.props.Templates.cmsTemplates)}
+        listItem={this.populateTemplatesList(this.props.Templates.cmsTemplates, false)}
         // filterContent={filterContent}
         onHoverItem={this.handleOnHoverItem}
         onItemClick={this.handleEdmDefaultTemplateSelection}
@@ -1240,22 +1300,28 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <Pagination onPageChange={() => { this.getAllTemplates({getNextPage: true}); }} paginationSelector="pagination-container">
               <CardGrid
                 className={this.state.channel.toLowerCase() === "mobilepush" ? "mobilepush-templates" : ""}
-                listItem={this.populateTemplatesList(this.props.TemplatesList)}
+                listItem={this.populateTemplatesList(this.props.TemplatesList, true)}
                 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'}}>
+            {/* {(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>} */}
             <PreviewSideBar
               showPreview={this.state.previewOpen}
               templateData={this.state.previewTemplate}
@@ -1267,7 +1333,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               location={this.props.location}
             >
             </PreviewSideBar>
-            {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && <EmailPreview
+            {(this.state.channel.toLowerCase() === 'ebill' || this.state.channel.toLowerCase() === 'email') && htmlPreviewContent && <EmailPreview
               header={previewHeader}
               content={htmlPreviewContent}
               show={this.state.showHtmlPreview}
@@ -1278,7 +1344,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               updatedByName={commonUtil.getUserNameById(parseInt(this.state.previewTemplate.updatedBy, 10), commonUtil.getMergedUserList(this.props.Templates.userList))}
             />}
             <SlideBox
-              header={(<h3>Template Selection</h3>)}
+              header={(<h3>{this.props.intl.formatMessage(messages.templateSelection)}</h3>)}
               width={60}
               content={cmsTemplateSelectionContent}
               show={this.state.showEdmEmailTemplates}

package/containers/Templates/messages.js

@@ -186,4 +186,32 @@ export default defineMessages({
     id: 'app.containers.Templates.preview',
     defaultMessage: 'Preview',
   },
+  invalidUploadFileError: {
+    id: 'app.containers.Templates.invalidUploadFileError',
+    defaultMessage: 'File cannot be uploaded. Please select another file with valid file format.',
+  },
+  templateDeleteConfirm: {
+    id: 'app.containers.Templates.templateDeleteConfirm',
+    defaultMessage: 'Are you sure you want to delete this Template?',
+  },
+  cancelText: {
+    id: 'app.containers.Templates.cancelText',
+    defaultMessage: 'Cancel',
+  },
+  yesText: {
+    id: 'app.containers.Templates.yesText',
+    defaultMessage: 'Yes',
+  },
+  templateSelection: {
+    id: 'app.containers.Templates.templateSelection',
+    defaultMessage: 'Template Selection',
+  },
+  textTemplate: {
+    id: 'app.containers.Templates.textTemplate',
+    defaultMessage: 'Text',
+  },
+  imageTemplate: {
+    id: 'app.containers.Templates.imageTemplate',
+    defaultMessage: 'Image',
+  },
 });

package/containers/Templates/reducer.js

@@ -78,12 +78,13 @@ function templatesReducer(state = initialState, action) {
         .set('templates', fromJS([]));
     case types.SET_SELECTED_LAYOUT:
       return state
-        .set('selectedEmailLayout', fromJS(action.selectedTemplate))
+        .set('selectedEmailLayout', action.selectedTemplate)
         .set('edmTemplate', fromJS({}));
     case types.SEND_ZIPPED_FILE_REQUEST:
       return state
         .set('sendingFile', true)
-        .set('errorSendingFile', false);
+        .set('errorSendingFile', false)
+        .set('selectedEmailLayout', "");
     case types.SEND_ZIPPED_FILE_SUCCESS:
       return state
         .set('sendingFile', false)

package/package.json

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