@capillarytech/creatives-library 2.0.44 → 2.0.46

package/containers/EmailWrapper/index.js

@@ -20,6 +20,7 @@ import messages from './messages';
 export class EmailWrapper extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
+    this.emailUploader = React.createRef();
     this.state = {
       templateName: '',
       routeParams: {
@@ -37,6 +38,9 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
         title: <FormattedMessage {...messages.zipUpload}/>,
         content: <FormattedMessage {...messages.zipUploadDesc}/>,
         value: 'upload',
+        onClick: () => {
+          this.emailUploader.current.click();
+        },
       },
       {
         title: <FormattedMessage {...messages.useEditor}/>,
@@ -51,14 +55,16 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
    // 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();
+      //document.getElementById('upload-email-template').click();
     } else if (step === "templateSelection" && !this.state.selectedCreateMode) {
       if (emailCreateMode === "editor" && !CmsTemplates) {
         templatesActions.getEdmDefaultTemplates();
       }
-    } else if (step === "createTemplate" && !this.state.selectedCreateMode) {
-      if (emailCreateMode === 'upload' && !EmailLayout) {
-        this.handleFileUpload(modeContent.e, modeContent.files);
+    } else if (step === "createTemplateContent" && !this.state.selectedCreateMode) {
+      if (emailCreateMode === 'upload' && !_.isEmpty(EmailLayout)) {
+        this.setCreateMode('upload');
+
+        //this.handleFileUpload(modeContent.e, modeContent.files);
       } else if (emailCreateMode === "editor" && _.isEmpty(SelectedEdmDefaultTemplate)) {
         this.handleEdmDefaultTemplateSelection(modeContent.id);
       }
@@ -68,9 +74,10 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
 
   componentWillUnmount() {
     this.props.onResetStep();
+    this.props.templatesActions.resetTemplateData();
   }
   onTemplateNameChange = (ev) => {
-    this.setState({templateName: ev.target.vale});
+    this.setState({templateName: ev.target.value});
   }
   onChange = (e) => {
     this.props.onEmailModeChange( e.target.value );
@@ -79,26 +86,35 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
   setCreateMode = (emailCreateMode) => {
     this.setState({selectedCreateMode: emailCreateMode});
   }
+  handleZipUploadError = () => {
+    const message = {
+      key: "email-upload-error",
+      message: this.props.intl.formatMessage(messages.invalidUploadFileError2),
+      description: this.props.intl.formatMessage(messages.invalidUploadFileErrorDesc2),
+    };
+    CapNotification.error(message);
+  }
   handleFileUpload = (e, files) => {
-    const { templatesActions, intl } = this.props;
+    const { templatesActions, intl, showNextStep } = this.props;
     if (files.length === 0) {
       return;
     }
-    this.setCreateMode('upload');
+    //this.setCreateMode('upload');
     const fileExtension = files[0].name.split('.').pop();
     const supportedZipFormats = ['zip'];
     //TODO: has to be changed based on props.
 
 
     if (supportedZipFormats.indexOf(fileExtension.toLowerCase()) !== -1) {
-      templatesActions.handleZipUpload(files[0]);
-      document.getElementById("upload-email-template").value = "";
+      templatesActions.handleZipUpload(files[0], showNextStep, this.handleZipUploadError);
+      this.emailUploader.current.value = "";
     } else if (fileExtension === 'html' || fileExtension === 'htm') {
       const reader = new FileReader();
       reader.onload = () => {
         const text = reader.result;
         templatesActions.handleHtmlUpload(text);
-        document.getElementById("upload-email-template").value = "";
+        showNextStep();
+        this.emailUploader.current.value = "";
       };
       reader.readAsText(files[0]);
     } else {
@@ -119,12 +135,18 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       selectedCreateMode: 'editor'});
   };
   useFileUpload = (e, {files}) => {
-    this.setState({modeContent: {e, files}}, this.props.showNextStep);
+    this.handleFileUpload(e, files);
+    this.setState({modeContent: {e, files}});
   }
   useEditor = (id) => {
     this.setState({modeContent: {id}}, this.props.showNextStep);
   }
-
+  resetEmailOptions = (ev) => {
+    ev.preventDefault();
+    if (this.props.emailCreateMode === "upload" && _.isEmpty(this.state.modeContent.files)) {
+      this.props.onEmailModeChange( "" );
+    }
+  }
   isShowEmailCreate = () => !_.isEmpty(this.state.selectedCreateMode) && (!_.isEmpty(this.props.EmailLayout) || this.props.SelectedEdmDefaultTemplate)
   render() {
     const {emailCreateMode, isGetFormData, getFormdata, type, CmsTemplates, step, cap, isFullMode} = this.props;
@@ -132,7 +154,15 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
     const isShowEmailCreate = this.isShowEmailCreate();
     return (
       <div>
-        <input type="file" id="upload-email-template" style={{ display: 'none'}} accept=".zip, .html, .htm" onChange={(event) => this.useFileUpload(event, {files: event.target.files})} />
+        <input
+          type="file"
+          key="upload-email-template"
+          id="upload-email-template"
+          ref={this.emailUploader}
+          style={{ display: 'none'}}
+          accept=".zip, .html, .htm"
+          onChange={(event) => this.useFileUpload(event, {files: event.target.files})}
+          />
 
         {step === "modeSelection" || (step === "templateSelection" && emailCreateMode === "upload") ?
           <div>

package/containers/EmailWrapper/messages.js

@@ -42,4 +42,12 @@ export default defineMessages({
     id: `app.containers.EmailWrapper.invalidUploadFileDesc`,
     defaultMessage: `Please select another file with valid file format.`,
   },
+  invalidUploadFileError2: {
+    id: `app.containers.EmailWrapper.invalidUploadFileError`,
+    defaultMessage: `File upload failed`,
+  },
+  invalidUploadFileErrorDesc2: {
+    id: `app.containers.EmailWrapper.invalidUploadFileDesc`,
+    defaultMessage: `Please select another file with valid file contents`,
+  },
 });

package/containers/MobilePush/Create/index.js

@@ -840,7 +840,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         temp.injectedEvents = {};
 
         _.forEach(col.supportedEvents, (event) => {
-          console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
+          console.log('injected event for ', col, event);
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
         return true;

package/containers/Sms/Create/actions.js

@@ -6,15 +6,15 @@
 
 import * as types from './constants';
 
-export function createTemplate(template) {
-  console.log('action trigereed createtemplate');
+export function createTemplate(template, onCreateTemplateComplete) {
   return {
-    type: types.CREATE_TEMPLATE_REQUEST, template,
+    type: types.CREATE_TEMPLATE_REQUEST,
+    template,
+    onCreateTemplateComplete,
   };
 }
 
 export function clearCreateResponse() {
-  console.log('clearCreateResponse');
   return {
     type: types.CLEAR_CREATE_RESPONSE_REQUEST,
   };

package/containers/Sms/Create/index.js

@@ -128,19 +128,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
       nextProps.getFormSubscriptionData(this.getFormData());
     }
-    if (nextProps.createResponse && nextProps.createResponse.templateId) {
-      this.discardValues();
-      const message = getMessageObject('success', 'SMS Template Created Successfully', true);
-      this.props.globalActions.addMessageToQueue(message);
-      this.props.actions.clearCreateResponse();
-      const type = this.props.location.query.type;
-      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      this.props.router.push({
-        pathname: `/sms/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      });
-    }
-
     if (nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
       const message = getMessageObject('error', (nextProps.Create.createTemplateErrorMessage && nextProps.Create.createTemplateErrorMessage !== '') ? nextProps.Create.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
@@ -163,7 +150,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         }
       }
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags !== nextProps.metaEntities.tags) {
+    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags && this.props.metaEntities.tags.standard && (this.props.metaEntities.tags !== nextProps.metaEntities.tags)) {
       let injectedTags = _.cloneDeep(this.state.injectedTags);
       delete injectedTags["Registration custom fields"];
       delete injectedTags["Store custom fields"];
@@ -219,7 +206,29 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   onTabChange(data) {
     this.setState({currentTab: data});
   }
-
+  onCreateTemplateComplete = (editResponse) => {
+    if (editResponse.templateId) {
+      this.resetSchema();
+      this.setState({
+        formData: {},
+        tabCount: 1,
+        currentTab: 1,
+        editData: {},
+      });
+      const message = getMessageObject('success', 'SMS Template Created Successfully', true);
+      this.props.globalActions.addMessageToQueue(message);
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      const type = this.props.location.query.type;
+      if (this.props.isFullMode) {
+        this.props.getFormSubscriptionData({ value: editResponse.templateId, validity: true});
+      } else {
+        this.props.router.push({
+          pathname: `/sms/`,
+          query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        });
+      }
+    }
+  }
   getFormData(e, value) {
     const formData = _.cloneDeep(this.state.formData);
     let baseData = {};
@@ -902,7 +911,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     obj.name = formData['template-name'];
     obj.versions.base = formData.base;
 
-    this.props.actions.createTemplate(obj);
+    this.props.actions.createTemplate(obj, this.onCreateTemplateComplete);
   }
   isSmsLoading = () => {
     //let {isLoading} = this.props;
@@ -979,7 +988,9 @@ Create.propTypes = {
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
   isLoadingMetaEntities: PropTypes.bool,
-  creativesContainerActions: PropTypes.object,
+  // creativesContainerActions: PropTypes.object,
+  getFormSubscriptionData: PropTypes.func,
+  isFullMode: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/Sms/Create/sagas.js

@@ -9,7 +9,6 @@ import * as types from './constants';
 export function* createTemplate(template) {
   let errorMsg;
   try {
-    console.log('saga createTemplate sms', template);
     const result = yield call(Api.createTemplate, template);
     // const sidebar = result.response.sidebar;
     if (result.message || result.status.code === 500) {
@@ -17,6 +16,7 @@ export function* createTemplate(template) {
     }
 
     yield put({ type: types.CREATE_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+    yield template.onCreateTemplateComplete(result.response);
   } catch (error) {
     yield put({ type: types.CREATE_TEMPLATE_FAILURE, error, errorMsg });
   }
@@ -24,7 +24,6 @@ export function* createTemplate(template) {
 
 
 function* watchCreateTemplate() {
-  console.log('inside watch');
   const watcher = yield takeLatest(types.CREATE_TEMPLATE_REQUEST, createTemplate);
   yield take(LOCATION_CHANGE);
   yield cancel(watcher);

package/containers/Sms/Edit/actions.js

@@ -11,15 +11,15 @@ export function defaultAction() {
   };
 }
 
-export function editTemplate(template) {
-  console.log('action trigereed');
+export function editTemplate(template, onUpdateTemplateComplete) {
   return {
-    type: types.EDIT_TEMPLATE_REQUEST, template,
+    type: types.EDIT_TEMPLATE_REQUEST,
+    template,
+    onUpdateTemplateComplete,
   };
 }
 
 export function getTemplateDetails(id) {
-  console.log('getting template', id);
   return {
     type: types.GET_TEMPLATE_DETAILS_REQUEST, id,
   };
@@ -33,7 +33,6 @@ export function setTemplateDetails(templateDetails) {
 }
 
 export function clearEditResponse() {
-  console.log('clearEditResponse');
   return {
     type: types.CLEAR_EDIT_RESPONSE_REQUEST,
   };

package/containers/Sms/Edit/index.js

@@ -170,7 +170,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const message = getMessageObject('error', (nextProps.Edit.editTemplateErrorMessage && nextProps.Edit.editTemplateErrorMessage !== '') ? nextProps.Edit.editTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags !== nextProps.metaEntities.tags) {
+    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags && this.props.metaEntities.tags.standard && (this.props.metaEntities.tags !== nextProps.metaEntities.tags)) {
       let injectedTags = _.cloneDeep(this.state.injectedTags);
       delete injectedTags["Registration custom fields"];
       delete injectedTags["Store custom fields"];
@@ -222,7 +222,31 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   onTabChange(data) {
     this.setState({currentTab: data});
   }
-
+  onUpdateTemplateComplete = (editResponse) => {
+    if (editResponse.templateId) {
+      this.resetSchema();
+      this.setState({
+        formData: {},
+        tabCount: 1,
+        currentTab: 1,
+        editData: {},
+      });
+      const message = getMessageObject('success', 'SMS Template Edited Successfully', true);
+      this.props.globalActions.addMessageToQueue(message);
+      this.props.actions.clearEditResponse();
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      const type = this.props.location.query.type;
+      if (this.props.isFullMode) {
+        const {versions, ...rest} = editResponse.templateId;
+        this.props.getFormSubscriptionData({ value: versions, ...rest, validity: true});
+      } else {
+        this.props.router.push({
+          pathname: `/sms/`,
+          query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        });
+      }
+    }
+  }
   setEditState(data) {
     const that = this;
     const tabCount = data.versions.history.length;
@@ -888,14 +912,14 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     obj.name = formData['template-name'];
     obj.versions.base = formData.base;
 
-    this.props.actions.editTemplate(obj);
+    this.props.actions.editTemplate(obj, this.onUpdateTemplateComplete);
   }
   isSmsLoading = () => {
     //let {isLoading} = this.props;
     let isLoading = this.props.isLoadingMetaEntities || this.state.loading || (this.props.Edit && (("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) || ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress)));
 
     if (!isLoading) {
-      isLoading = this.state.loadingStatus < 3;
+      isLoading = this.props.isFullMode ? this.state.loadingStatus < 2 : this.state.loadingStatus < 3;
     }
     // if (isLoading && this.state.loadingStatus >= 3) {
     //   this.props.creativesContainerActions.hideCreativesContanerLoader();
@@ -969,7 +993,9 @@ Edit.propTypes = {
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
   isLoadingMetaEntities: PropTypes.bool,
-  creativesContainerActions: PropTypes.object,
+  // creativesContainerActions: PropTypes.object,
+  isFullMode: PropTypes.bool,
+  getFormSubscriptionData: PropTypes.func,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/Sms/Edit/sagas.js

@@ -8,15 +8,14 @@ import * as types from './constants';
 export function* editTemplate(template) {
   let errorMsg;
   try {
-    console.log('saga editTemplate', template);
     const result = yield call(Api.editTemplate, template);
-    console.log('saga editTemplate success', result);
     // const sidebar = result.response.sidebar;
     if (result.message || result.status.code === 500) {
       errorMsg = result.message;
     }
 
     yield put({ type: types.EDIT_TEMPLATE_SUCCESS, data: result.response, statusCode: result.status ? result.status.code : '', errorMsg });
+    yield template.onUpdateTemplateComplete(result.response);
   } catch (error) {
     yield put({ type: types.EDIT_TEMPLATE_FAILURE, error, errorMsg });
   }
@@ -24,7 +23,6 @@ export function* editTemplate(template) {
 
 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 });

package/containers/Templates/actions.js

@@ -59,10 +59,12 @@
    };
  }
 
- export function handleZipUpload(selectedFile) {
+ export function handleZipUpload(selectedFile, successHandler, errorHandler) {
    return {
      type: types.SEND_ZIPPED_FILE_REQUEST,
      selectedFile,
+     successHandler,
+     errorHandler,
    };
  }