@capillarytech/creatives-library 0.0.6 → 0.0.8

package/components/FormBuilder/index.js

@@ -8,7 +8,7 @@
 import React, { PropTypes } from 'react';
 import { Label } from 'semantic-ui-react';
 import _ from 'lodash';
-import { Tabs, Row, Col, Table, Modal} from 'antd';
+import { Tabs, Row, Col, Table, Modal, notification} from 'antd';
 import { CapButton, CapInput, CapPopover, CapTextArea, CapCheckbox, CapRadio, CapRadioGroup, CapSelect, CapTable} from '@capillarytech/cap-react-ui-library';
 import TemplatePreview from '../../components/TemplatePreview';
 // import { CapCheckbox } from '@capillarytech/cap-react-ui-library/basic/checkbox';
@@ -101,6 +101,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (this.state.usingTabContainer && nextProps.tabCount !== this.props.tabCount) {
       this.setState({tabCount: nextProps.tabCount});
     }
+    if (nextProps.startValidation && nextProps.startValidation !== false && this.props.startValidation !== nextProps.startValidation) {
+      this.setState({checkValidation: true});
+      const ifValid = this.validateForm(null, null, null, true);
+      console.log('validation final', ifValid);
+      if (ifValid) {
+        this.saveForm(true);
+      } else {
+        this.props.stopValidation();
+      }
+    }
+    // if (nextProps.saveForm && this.props.saveForm !== nextProps.saveForm) {
+    //   this.saveForm(saveForm);
+    // }
     if (nextProps.isEdit) {
       console.log('Edit mode form data ', nextProps.formData, this.state.formData);
       if (!_.isEqual(nextProps.formData, this.state.formData) && !_.isEmpty(nextProps.formData)) {
@@ -199,7 +212,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           console.log('outgoing have to reset tab keys');
           this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
         }
-        if (type === 'embedded') {
+        if (type === 'embedded' || this.props.schema.channel.toUpperCase() === 'EMAIL') {
           this.validateForm();
         }
         if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
@@ -308,6 +321,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return modal;
   };
 
+  openNotificationWithIcon = (type, message) => {
+    const dur = (type === 'error' || type === 'warning') ? null : 5;
+    notification[type]({
+      message: (`${type.toUpperCase()} ! ! ! `),
+      description: message, //'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+      duration: dur,
+    });
+  }
+
   handleCloseModal = (data, e) => {
     console.log('handle close modal', data, e);
     const event = this.state.currentEvent;
@@ -421,7 +443,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   /* eslint-disable */
-  validateForm(tags, injectedTags, isSave) {
+  validateForm(tags, injectedTags, isSave, showMessages) {
     console.log('validating form', this.state.formData);
     let isValid = true;
     const type = (this.props.location && this.props.location.query.type) ? this.props.location.query.type : 'full';
@@ -737,6 +759,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       if (!androidValid || !iosValid) {
         this.setState({androidValid, iosValid});
       }
+      if (isOnlyAndroid && androidValid) {
+        isValid = true;
+      } else if (isOnlyIos && iosValid) {
+        isValid = true;
+      } else if (!isOnlyIos && !isOnlyAndroid && androidValid && iosValid) {
+        isValid = true;
+      }
     }
 
     // Form Data Validation for Email Channel
@@ -744,12 +773,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       // Validating Email By iterating all elements of FormBuilder
       _.forEach(this.state.formData, (data, index) => {
         console.log("Form Iteration Data ", data, index);
-        if (!this.state.formData["template-subject"]) {
+        if (!this.state.formData["template-subject"] && type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline' || currentModule.toLowerCase() === 'library')) {
           errorData["template-subject"] = true;
           isValid = false;
         }
         // Check if template subject present in form data from Loyalty, DVS, Timeline
-        if (index === 'template-subject' && type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline')) {
+        if (index === 'template-subject' && type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline' || currentModule.toLowerCase() === 'library')) {
           if (data.trim() === '') {
             errorData[index] = true;
             isValid = false;
@@ -779,6 +808,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           if (errorData[index] === undefined) {
             errorData[index] = {};
           }
+          let errorString = "";
           for (var i = 0; i < data.selectedLanguages.length; i+= 1) {
             const currentLang = data.selectedLanguages[i];
             const content = data[currentLang]['template-content'];
@@ -792,8 +822,22 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             } else {
               errorData[index][currentLang]['template-content'] = true;
               isValid = false;
+              if (showMessages && !isNaN(index)) {
+                if (tagValidationResponse.missingTags.length > 0 || tagValidationResponse.unsupportedTags.length > 0) {
+                  errorString += `Content is not valid for language: ${currentLang}\n`;
+                }
+                if (tagValidationResponse.missingTags.length > 0) {
+                  errorString += `Missing tags are: ${tagValidationResponse.missingTags.toString()}\n`;
+                }
+                if (tagValidationResponse.unsupportedTags.length > 0) {
+                  errorString += `Unsupported tags are: ${tagValidationResponse.unsupportedTags.toString()}\n`;
+                }
+              }
             }
           }
+          if (errorString !== "") {
+            this.openNotificationWithIcon('error', errorString);
+          }
           _.forEach(errorData[index], (versionData, key) => {
             if (data.selectedLanguages.indexOf(key) === -1) {
               delete errorData[index][key];
@@ -829,6 +873,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.setState({isFormValid : isValid, errorData});
     console.log('final validity', this.state.formData, this.state, isValid);
     this.props.onFormValidityChange(isValid);
+    return isValid;
   }
 
   indexOfEnd(targetString, string) {
@@ -838,8 +883,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   continueSaveForm = (id) => {
 
   };
-  saveForm() {
-    console.log('Is Form Valid ', this.state.isFormValid);
+  saveForm(saveForm) {
+    console.log('Is Form Valid ', this.state.isFormValid, saveForm);
+    if (this.props.isNewVersionFlow && !saveForm) {
+      this.props.getValidationData();
+      return;
+    }
     if (this.state.isFormValid) {
       this.props.onSubmit(this.state.formData);
     } else {
@@ -1891,6 +1940,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
     } else if (event === "onContentChange") {
       val.injectedEvents[event].call(this.props.parent, data, val.id);
+      return;
     } else if (event === 'deleteLanguage') {
       this.setState({currentEvent: val.injectedEvents[event], currentEventData: data }, () => {
         this.props.setModalContent('delete-language');
@@ -3133,6 +3183,10 @@ FormBuilder.propTypes = {
   userLocale: PropTypes.string,
   setModalContent: PropTypes.func,
   addLanguageType: PropTypes.string,
+  getValidationData: PropTypes.func,
+  startValidation: PropTypes.bool,
+  // saveForm: PropTypes.bool,
+  stopValidation: PropTypes.func,
 };
 
 export default FormBuilder;

package/containers/Email/actions.js

@@ -41,11 +41,12 @@ export function getCmsSetting(cmsType, projectId, cmsMode, langId) {
   };
 }
 
-export function getCmsData(cmsType, projectId) {
+export function getCmsData(cmsType, projectId, langId) {
   return {
     type: types.GET_CMS_EDITOR_DATA_REQUEST,
     cmsType,
     projectId,
+    langId,
   };
 }
 

package/containers/Email/index.js

@@ -587,6 +587,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       isFormValid: true,
       injectedTags: {},
       checkValidation: false,
+      saveEdmDataMode: 'save',
       tabKey: '',
       showEmailPreview: false,
       device: "desktop",
@@ -601,12 +602,15 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       totalCount: 0,
       searchText: '',
       saveCount: 0,
+      cmsDataCount: 0,
       targetSaveCount: 0,
       saveObj: {},
       showEdmEmailTemplates: false,
       editDataSet: false,
       languageDataSet: false,
       addLanguageType: '',
+      startValidation: false,
+      saveForm: false,
     };
 
     this.isTagLoaded = false;
@@ -757,19 +761,21 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const newSchema = this.injectEvents(nextProps.metaEntities.layouts[0].definition);
       console.log('Schema test 1 ', newSchema);
       this.setState({schema: newSchema});
-      const query = {
-        layout: 'EMAIL',
-        type: 'TAG',
-        context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
-        embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
-      };
+      if (this.props.location.query.module !== 'library') {
+        const query = {
+          layout: 'EMAIL',
+          type: 'TAG',
+          context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
+          embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+        };
+        this.props.globalActions.fetchSchemaForEntity(query);
+      }
       setTimeout(() => {
         this.showSubject();
       }, 0);
-      this.props.globalActions.fetchSchemaForEntity(query);
     }
     if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
-      nextProps.getFormSubscriptionData(this.getFormData());
+      this.getFormData();
     }
     if (nextProps.Global.currentOrgDetails && nextProps.Global.currentOrgDetails.basic_details && !_.isEmpty(nextProps.Global.currentOrgDetails.basic_details) && _.isEmpty(this.state.formData)) {
       const formData = this.initFormData(nextProps);
@@ -790,7 +796,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       //const that = this;
       this.setState({formData}, () => {
         // setTimeout(() => {
-        //     // this.getFormData();
+        //     this.getFormData();
         //   that.startTemplateCreation();
         // }, 15000);
       });
@@ -939,7 +945,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       }
       if (!nextProps.Email.fetchingCmsData && !_.isEqual(nextProps.Email.cmsData, this.props.Email.cmsData)) {
         const formData = _.cloneDeep(this.state.formData);
-        if (this.state.gettingPreviewData) {
+        if (nextProps.Email.langId) {
+          console.log('setting template content', nextProps.Email.cmsData, decodeURIComponent(nextProps.Email.cmsData));
+          const langId = nextProps.Email.langId;
+          formData[`${this.state.currentTab - 1}`][langId]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
+          if (formData[`${this.state.currentTab - 1}`].base) {
+            formData.base[langId]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
+          }
+        } else if (this.state.gettingPreviewData) {
           this.setState({gettingPreviewData: false});
           formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = decodeURIComponent(nextProps.Email.cmsData);
           if (formData[`${this.state.currentTab - 1}`].base) {
@@ -972,8 +985,12 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           }
           console.log('ckeditor trying to set ckeditor data');
         }
-
-        this.setState({ formData });
+        console.log('setting template content final', formData);
+        this.setState({ formData }, () => {
+          if (nextProps.Email.langId) {
+            this.shouldStartValidation();
+          }
+        });
       }
 
       if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && !_.isEqual(this.props.metaEntities.tags, nextProps.metaEntities.tags)) {
@@ -1064,19 +1081,19 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   onChange = (evt, id) => {
     const formData = _.cloneDeep(this.state.formData);
     console.log('oncontentchange onChange ', evt, evt.editor.getData());
-    if (evt.editor.name.indexOf('editor') === -1) {
-      _.forEach(window.CKEDITOR.instances, (winInstance) => {
-        const temp = winInstance;
-        if (winInstance.name === evt.editor.name) {
-          console.log('setting instance name after loading', winInstance, name);
-          // setTimeout(() => {
-          //   //temp.name = id;
-          // }, 1000);
-          temp.name = id;
-          console.log('setting instance name after loading 2', winInstance, name);
-        }
-      });
-    }
+    //if (evt.editor.name.indexOf('editor') === -1) {
+    _.forEach(window.CKEDITOR.instances, (winInstance) => {
+      const temp = winInstance;
+      if (winInstance.name === evt.editor.name) {
+        console.log('setting instance name after loading', winInstance, name);
+        // setTimeout(() => {
+        //   //temp.name = id;
+        // }, 1000);
+        temp.name = id;
+        console.log('setting instance name after loading 2', winInstance, name);
+      }
+    });
+    //}
     if (!formData[this.state.currentTab - 1][formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop) {
       formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = _.cloneDeep(evt.editor.getData());
       if (formData[`${this.state.currentTab - 1}`].tabKey === formData.base.tabKey) {
@@ -1149,6 +1166,22 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     });
   }
 
+  getValidationData = () => {
+    console.log('all data save getting validation data');
+    const that = this;
+    const formData = _.cloneDeep(this.state.formData);
+    _.forEach(formData, (val, index) => {
+      if (!isNaN(index)) {
+        _.forEach(val.selectedLanguages, (language) => {
+          console.log('all data save language', language, val[language]);
+          if (val[language].is_drag_drop) {
+            that.props.actions.getCmsData('edm', val[language].drag_drop_id, language);
+          }
+        });
+      }
+    });
+  }
+
   setNewLanguageContent = (data) => {
     const content = _.cloneDeep(data);
     const formData = _.cloneDeep(this.state.formData);
@@ -1184,19 +1217,22 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   getFormData = (e, value) => {
-    console.log('posting final result', this.state.formData);
-    const response = {
-      action: "getFormData",
-      postAction: value || 'next',
-      value: this.transformFormData(this.state.formData),
-      validity: this.state.isFormValid,
-    };
-    console.log('Get Data', response);
-    this.setState({checkValidation: true});
-    if (e) {
-      e.source.postMessage(JSON.stringify(response), e.origin);
-    }
-    return response;
+    this.setState({getFormDataValue: value, gettingFormData: true}, () => {
+      this.saveValidationData();
+    });
+    // console.log('posting final result', this.state.formData);
+    // const response = {
+    //   action: "getFormData",
+    //   postAction: value || 'next',
+    //   value: this.transformFormData(this.state.formData),
+    //   validity: this.state.isFormValid,
+    // };
+    // console.log('Get Data', response);
+    // this.setState({checkValidation: true});
+    // if (e) {
+    //   e.source.postMessage(JSON.stringify(response), e.origin);
+    // }
+    // return response;
   }
 
   setFormValidity = (isFormValid) => {
@@ -1415,6 +1451,49 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({ modalContent, showModal: true});
   };
 
+  shouldStartValidation = () => {
+    this.setState((prevState) => ({ cmsDataCount: prevState.cmsDataCount + 1}), () => {
+      console.log('all data save count validating', this.state.saveCount, this.state.cmsDataCount);
+      if (this.state.targetSaveCount === this.state.cmsDataCount) {
+        console.log('validation final starting edm validation');
+        this.setState({startValidation: true});
+      }
+    });
+  }
+
+  stopValidation = () => {
+    this.setState({startValidation: false});
+  }
+  saveValidationData = () => {
+    let saveCount = 0;
+    this.setState({saveEdmDataMode: 'validation', saveCount: 0, cmsDataCount: 0}, () => {
+      _.forEach(this.state.formData, (newdata, index) => {
+        if (!isNaN(index)) {
+          _.forEach(newdata.selectedLanguages, (language) => {
+            if (newdata[language].is_drag_drop && ((parseInt(index, 10) + 1) === this.state.currentTab)) {
+              console.log('all data 4');
+              saveCount += 1;
+            }
+          });
+        }
+      });
+      if (saveCount === 0) {
+        this.setState({startValidation: true});
+        return;
+      }
+      this.setState({targetSaveCount: saveCount, mode: "save", saveCount: 0, cmsDataCount: 0}, () => {
+        const data = this.state.formData[this.state.currentTab - 1];
+        _.forEach(data.selectedLanguages, (language, langIndex) => {
+          if (data[language].is_drag_drop) {
+            console.log('saving edm template', document.getElementById("edmeditor"), `edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
+            const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+            win.postMessage("saveProject", '*');
+          }
+        });
+      });
+    });
+  }
+
   resetStateValue = () => {
     this.setState({
       formData: {},
@@ -1805,7 +1884,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       this.setState((prevState) => ({ saveCount: prevState.saveCount + 1}), () => {
         console.log('all data save count', this.state.saveCount);
         if (this.state.targetSaveCount === this.state.saveCount) {
-          this.props.actions.createTemplate(this.state.saveObj);
+          if (this.state.saveEdmDataMode === 'validation') {
+            this.getValidationData();
+          } else if (this.state.saveEdmDataMode === 'save') {
+            this.props.actions.createTemplate(this.state.saveObj);
+          }
         }
       });
     } else if (this.state.mode === 'preview' || this.state.mode === 'switchEditor') {
@@ -2417,7 +2500,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.removeStandAlone();
       }
       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() === 'timeline')))) {
-        if (this.props.route.name === "EmailEdit" && this.props.location.query.module === "dvs") {
+        if ((this.props.route.name === "EmailEdit" || this.props.route.name === "EmailCreate") && this.props.location.query.module === "dvs") {
           return;
         }
         const response = {
@@ -2757,6 +2840,28 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     // if (!isValidated) {
     //   return;
     // }
+    //if (!this.state.startValidation) {
+    //  this.saveValidationData();
+    //  return;
+    //}
+    console.log('save form data', passedData, this.state.gettingFormData, this.state.startValidation, this.state);
+    if (this.state.gettingFormData) {
+      console.log('posting final result', passedData);
+      const response = {
+        action: "getFormData",
+        postAction: this.state.getFormDataValue || 'next',
+        value: this.transformFormData(passedData),
+        validity: this.state.isFormValid,
+      };
+      console.log('Get Data', response);
+      this.setState({checkValidation: true});
+      if (this.props.location.query.module === 'library' && this.props.isGetFormData) {
+        this.props.getFormSubscriptionData(response);
+      }
+      parent.postMessage(JSON.stringify(response), "*");
+      this.setState({gettingFormData: false, startValidation: false});
+      return;
+    }
     const formData = _.cloneDeep(passedData);
     console.log('Saving form data', JSON.stringify(formData), this.state.tabCount);
     const obj = {};
@@ -2770,7 +2875,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     obj.type = 'EMAIL';
     const baseLanguage = this.props.Global.currentOrgDetails.basic_details.base_language;
     let baseKey = -1;
-    let saveCount = 0;
+    //let saveCount = 0;
     console.log('all data', this.state.currentTab);
     _.forEach(formData, (data, index) => {
       const newdata = data;
@@ -2783,11 +2888,11 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           baseKey = baseLangTabKey;
         }
         _.forEach(newdata.selectedLanguages, (language) => {
-          console.log('all data 3', newdata[language], language, this.state.currentTab, index, (index + 1), (index + 1) === this.state.currentTab, newdata[language].is_drag_drop);
-          if (newdata[language].is_drag_drop && ((parseInt(index, 10) + 1) === this.state.currentTab)) {
-            console.log('all data 4');
-            saveCount += 1;
-          }
+          // console.log('all data 3', newdata[language], language, this.state.currentTab, index, (index + 1), (index + 1) === this.state.currentTab, newdata[language].is_drag_drop);
+          // if (newdata[language].is_drag_drop && ((parseInt(index, 10) + 1) === this.state.currentTab)) {
+          //   console.log('all data 4');
+          //   saveCount += 1;
+          // }
           if (newdata[language].is_drag_drop) {
             delete newdata[language].edmeditorsrc;
           }
@@ -2795,7 +2900,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         obj.versions.history.push(newdata);
       }
     });
-    const data = formData[`${this.state.currentTab - 1}`];
+    //const data = formData[`${this.state.currentTab - 1}`];
     obj.name = formData['template-name'];
     obj.versions.base = formData.base;
     obj.versions.base.tabKey = baseKey;
@@ -2806,20 +2911,20 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       }
     });
     console.log('obj', obj);
-    if (saveCount === 0) {
-      console.log('final save obj', obj);
-      this.props.actions.createTemplate(obj);
-    } else {
-      this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save"}, () => {
-        _.forEach(data.selectedLanguages, (language, langIndex) => {
-          if (data[language].is_drag_drop) {
-            console.log('saving edm template', document.getElementById("edmeditor"), `edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
-            const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-            win.postMessage("saveProject", '*');
-          }
-        });
-      });
-    }
+    // if (saveCount === 0) {
+    console.log('final save obj', obj);
+    this.props.actions.createTemplate(obj);
+    // } else {
+    //   this.setState({saveObj: obj, targetSaveCount: saveCount, mode: "save", saveEdmDataMode: 'save'}, () => {
+    //     _.forEach(data.selectedLanguages, (language, langIndex) => {
+    //       if (data[language].is_drag_drop) {
+    //         console.log('saving edm template', document.getElementById("edmeditor"), `edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`);
+    //         const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
+    //         win.postMessage("saveProject", '*');
+    //       }
+    //     });
+    //   });
+    // }
   }
 
   handleOk = () => {
@@ -2973,6 +3078,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (this.props.Email.assetUploading) {
       loaderText = this.props.intl.formatMessage(messages.uploadingImage);
     }
+    let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
+    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'library') {
+      tags = this.props.supportedTags;
+    }
     return (
       <div className="email-container">
         <Helmet
@@ -3018,7 +3127,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   formData={_.cloneDeep(this.state.formData)}
                   location={this.props.location}
                   tabKey={this.state.tabKey}
-                  tags={this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : []}
+                  tags={tags}
                   injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
                   onFormValidityChange={this.setFormValidity}
                   handleCancelModal={this.handleCancelModal}
@@ -3042,6 +3151,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   handleEdmDefaultTemplateSelection={this.handleEdmDefaultTemplateSelection}
                   setModalContent={this.setModalContent}
                   addLanguageType={this.state.addLanguageType}
+                  startValidation={this.state.startValidation}
+                  getValidationData={this.saveValidationData}
+                  saveForm={this.state.saveForm}
+                  stopValidation={this.stopValidation}
               /> : ''}
             </Col>
           </Row>
@@ -3081,6 +3194,9 @@ Email.propTypes = {
   templatesActions: PropTypes.object,
   route: PropTypes.object,
   templateData: PropTypes.object,
+  isGetFormData: PropTypes.bool,
+  getFormSubscriptionData: PropTypes.func,
+  supportedTags: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({

package/containers/Email/reducer.js

@@ -14,6 +14,7 @@ const initialState = fromJS({
 });
 
 function emailReducer(state = initialState, action) {
+  console.log('email reducer', action);
   switch (action.type) {
     case types.CREATE_TEMPLATE_REQUEST:
       return state
@@ -76,11 +77,13 @@ function emailReducer(state = initialState, action) {
       return state
         .set('fetchingCmsData', true)
         .set('cmsData', '')
+        .set('langId', undefined)
         .set('fetchingCmsDataFailed', false);
     case types.GET_CMS_EDITOR_DATA_SUCCESS:
       return state
         .set('fetchingCmsData', false)
-        .set('cmsData', action.data);
+        .set('cmsData', action.data)
+        .set('langId', action.langId);
     case types.GET_CMS_EDITOR_DATA_FAILURE:
       return state
         .set('fetchingCmsData', false)

package/containers/Email/sagas.js

@@ -49,11 +49,11 @@ export function* getCmsSetting({cmsType, projectId, cmsMode, langId}) {
   }
 }
 
-export function* getCmsData({cmsType, projectId}) {
+export function* getCmsData({cmsType, projectId, langId}) {
   try {
-    const result = yield call(Api.getCmsTemplateData, cmsType, projectId);
-    console.log('CMS Data ', result);
-    yield put({ type: types.GET_CMS_EDITOR_DATA_SUCCESS, data: result.data.response.data });
+    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 });
   }
@@ -93,7 +93,7 @@ function* watchGetCmsSetting() {
 }
 
 function* watchGetCmsData() {
-  const watcher = yield takeLatest(types.GET_CMS_EDITOR_DATA_REQUEST, getCmsData);
+  const watcher = yield takeEvery(types.GET_CMS_EDITOR_DATA_REQUEST, getCmsData);
   yield take(LOCATION_CHANGE);
   yield cancel(watcher);
 }

package/containers/Sms/Edit/index.js

@@ -88,7 +88,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.props.globalActions.fetchSchemaForEntity(query);
   }
   componentDidMount() {
-    if (this.props.location.query && this.props.location.query.module === 'subscription') {
+    if (this.props.location.query && this.props.location.query.module === 'library') {
       this.props.actions.setTemplateDetails(this.props.templateData);
     } else {
       this.props.actions.getTemplateDetails(this.props.params.id);
@@ -104,10 +104,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.location.query.module === 'subscription' && nextProps.isGetFormData) {
+    if (nextProps.location.query.module === 'library' && nextProps.isGetFormData) {
       nextProps.getFormSubscriptionData(this.getFormData());
     }
-    if ( nextProps.location.query.module === 'subscription' && nextProps.subscriptionTemplateDetails && nextProps.subscriptionTemplateDetails.name && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.schema)) {
+    if ( nextProps.location.query.module === 'library' && nextProps.subscriptionTemplateDetails && nextProps.subscriptionTemplateDetails.name && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.schema)) {
       this.setEditState(nextProps.subscriptionTemplateDetails);
     }
     if (nextProps.templateDetails && nextProps.templateDetails.name && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.schema)) {
@@ -117,7 +117,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.setState({schema: nextProps.metaEntities.layouts[0].definition}, () => {
         this.injectEvents(nextProps.metaEntities.layouts[0].definition);
       });
-      if (this.props.location.query.module !== 'subscription') {
+      if (this.props.location.query.module !== 'library') {
         const query = {
           layout: 'SMS',
           type: 'TAG',
@@ -1372,7 +1372,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     tipText = this.props.Edit && ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress) ? this.props.intl.formatMessage(messages.saveTemplateLoader) : '';
     const spinning = this.state.loading || (this.props.Edit && (("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) || ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress)));
     let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
-    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'subscription') {
+    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'library') {
       tags = this.props.supportedTags;
     }
     return (