@capillarytech/creatives-library 2.0.36 → 2.0.38

package/components/FormBuilder/index.js

@@ -10,8 +10,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Label } from 'semantic-ui-react';
 import _ from 'lodash';
-import { Tabs, Row, Col, Table, Modal, notification} from 'antd';
-import { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapColumn} from '@capillarytech/cap-ui-library';
+import { Tabs, Row, Col, Table, Modal} from 'antd';
+import { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapColumn, CapNotification} from '@capillarytech/cap-ui-library';
 import TemplatePreview from '../../components/TemplatePreview';
 import TagList from '../../containers/TagList';
 import SmsEditor from '../SmsEditor';
@@ -85,20 +85,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   componentWillMount() {
     this.setState({usingTabContainer: this.props.usingTabContainer ? this.props.usingTabContainer : false});
     if (this.props.formData && (this.props.isEdit || (!this.props.isEdit && !_.isEmpty(this.props.formData)))) {
-      
       this.setState({formData: this.props.formData}, () => {
         // if (!this.props.isNewVersionFlow) {
         this.initialiseForm(this.props.schema, false, true);
         // }
       });
     } else {
-      
       this.initialiseForm(this.props.schema, true);
     }
   }
 
   componentWillReceiveProps(nextProps) {
-    
     const type = this.props.location.query.type;
     if (this.state.usingTabContainer && nextProps.tabCount !== this.props.tabCount) {
       this.setState({tabCount: nextProps.tabCount});
@@ -106,7 +103,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (nextProps.startValidation && nextProps.startValidation !== false && this.props.startValidation !== nextProps.startValidation) {
       this.setState({checkValidation: true});
       const ifValid = this.validateForm(null, null, null, true);
-      
+
       if (ifValid) {
         this.saveForm(true);
       } else {
@@ -117,9 +114,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     //   this.saveForm(saveForm);
     // }
     if (nextProps.isEdit) {
-      
       if (!_.isEqual(nextProps.formData, this.state.formData) && !_.isEmpty(nextProps.formData)) {
-        
         if (type === 'embedded') { //TODO: has to be checked and changed.
           this.setState({checkValidation: true, formData: nextProps.formData}, () => {
             this.validateForm();
@@ -137,11 +132,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         } else if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'EMAIL') {
           this.setState({formData: nextProps.formData});
         }
-        
+
         if (this.state.usingTabContainer && this.state.tabKey === '') {
           //this.setState({formData: nextProps.formData});
           if (nextProps.isNewVersionFlow && !_.isEqual(this.state.tabKey, nextProps.tabKey)) {
-            
             this.setState({tabKey: nextProps.tabKey});
           } else if (!nextProps.isNewVersionFlow) {
             this.resetTabKeys(nextProps.formData, nextProps.tabCount);
@@ -150,18 +144,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       }
       if (_.isEmpty(this.props.formData) && !_.isEmpty(nextProps.formData)) {
-        
         if (this.state.usingTabContainer) {
           this.resetTabKeys(nextProps.formData, nextProps.tabCount);
         }
         this.initializeEditErrorData(nextProps.formData, nextProps.tabCount);
       }
       if (!_.isEmpty(this.props.formData) && this.props.formData !== this.state.formData && _.isEmpty(this.state.formData) && this.state.usingTabContainer) {
-        
         this.resetTabKeys(this.props.formData, nextProps.tabCount);
       }
       if ( this.state.usingTabContainer && nextProps.formData && !_.isEmpty(nextProps.formData) && _.isEmpty(this.props.formData) && nextProps.tabCount && this.state.tabCount !== nextProps.tabCount) {
-        
         this.setState({ formData: nextProps.formData, tabCount: nextProps.tabCount }, () => {
           this.initializeEditErrorData(nextProps.formData, nextProps.tabCount);
           if (this.state.usingTabContainer) {
@@ -179,16 +170,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       ( !this.state.usingTabContainer || (this.state.usingTabContainer && nextProps.tabKey !== ''))
       && !_.isEqual(nextProps.formData, this.state.formData) &&
       !_.isEqual(nextProps.formData, this.props.formData)) {
-      
       this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey}, () => {
         this.validateForm();
       });
       //this.resetTabKeys(nextProps.formData, nextProps.tabCount);
     } else if ((_.isEmpty(this.props.formData) || !this.props.formData) && _.isEmpty(this.state.formData)) {
-      
       this.initialiseForm(nextProps.schema, true);
     } else if (_.isEmpty(this.props.formData) && !_.isEmpty(nextProps.formData)) {
-      
       this.setState({formData: nextProps.formData});
     }
 
@@ -202,16 +190,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData)) {
-      
       if (nextProps.isNewVersionFlow) {
-        
         const tabKey = (this.state.tabKey !== nextProps.formData[nextProps.currentTab - 1].tabKey) ? nextProps.formData[nextProps.currentTab - 1].tabKey : this.state.tabKey;
-        
+
         this.setState({tabKey});
       }
       this.setState({formData: nextProps.formData, currentLangTab}, () => {
         if (nextProps.isNewVersionFlow && !this.state.formData[this.state.currentTab - 1][this.state.formData[this.state.currentTab - 1].activeTab].tabKey) {
-          
           this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
         }
         if (type === 'embedded' || this.props.schema.channel.toUpperCase() === 'EMAIL') {
@@ -223,29 +208,24 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       });
     }
 
-    
+
     if (!_.isEqual(nextProps.schema, this.props.schema)) {
-      
       this.setState({ isFormValid: (this.props.isEdit ? this.props.isEdit : true) }, () => {
-        
         if (!this.props.isEdit || (this.props.isEdit && !_.isEmpty(nextProps.formData))) {
-          
           let resetTabKeys = (this.state.formData.tabKey === undefined);
           if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
             resetTabKeys = false;
-            
           }
           if (this.props.isNewVersionFlow) {
             resetTabKeys = false;
           }
-          
+
           this.initialiseForm(nextProps.schema, false, resetTabKeys);
           this.validateForm();
         }
       });
     }
     if (!_.isEqual(nextProps.checkValidation, this.props.checkValidation)) {
-      
       this.setState({ checkValidation: nextProps.checkValidation });
     }
 
@@ -254,32 +234,27 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!_.isEmpty(nextProps.injectedTags) && !_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
-      
       this.validateForm(nextProps.tags, nextProps.injectedTags);
     }
     if (!_.isEmpty(nextProps.tags) && !_.isEqual(nextProps.tags, this.props.tags)) {
-      
       this.validateForm(nextProps.tags, nextProps.injectedTags);
     }
     if (!_.isEqual(nextProps.showModal, this.props.showModal)) {
-      
       this.setState({showModal: nextProps.showModal});
     }
     if (nextProps.modal && (!_.isEqual(nextProps.modal, this.props.modal) || _.isEmpty(this.state.modal))) {
-      
       this.setState({modal: nextProps.modal});
     }
   }
 
-  onEdit(data, e) {
-    
+  onEdit() {
+
   }
 
   getModal = () => {
     let modal;
     if (this.state.modal) {
       if (this.state.modal.type === 'confirm') {
-        
         modal = (<Modal
           visible={this.state.showModal}
           title={this.state.modal.title}
@@ -324,16 +299,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   };
 
   openNotificationWithIcon = (type, message) => {
-    const dur = (type === 'error' || type === 'warning') ? null : 5;
-    notification[type]({
+    CapNotification.error({
       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) => {
-    
+  handleCloseModal = (data) => {
     const event = this.state.currentEvent;
     if (!_.isEmpty(this.state.currentEvent)) {
       switch (event) {
@@ -356,8 +328,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   resetTabKeys(form, count, changeDefaultTab, setFormTabKey) {
     const tabCount = count || this.state.tabCount;
-    
-    
+
+
     const formData = _.cloneDeep(form);
     let baseIndex = 0;
     for (let idx = 0; idx < tabCount; idx += 1) {
@@ -376,64 +348,53 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (setFormTabKey) {
           if (!formData[idx].activeTab) {
             const baseLanguage = this.props.baseLanguage;
-            
+
             formData[idx].tabKey = formData[idx][baseLanguage].tabKey;
           } else {
-            
             formData[idx].tabKey = formData[idx][formData[idx].activeTab].tabKey;
           }
           if (formData[idx].base) {
             if (!formData.base.activeTab) {
-              
               const baseLanguage = this.props.baseLanguage;
               formData.base.tabKey = formData.base[baseLanguage].tabKey;
             } else {
-              
               formData.base.tabKey = formData.base[formData[idx].activeTab].tabKey;
             }
           }
         }
-        
+
         if (formData[idx].base && formData.base.activeTab) {
-          
         //  if (!formData.base.tabKey) {
-          
+
           formData.base.tabKey = formData[idx][formData[idx].activeTab].tabKey;
           //}
           baseIndex = idx;
         }
-      } else {
-        
-        if (formData[idx]) {
-          if (!formData[idx].tabKey) {
-            formData[idx].tabKey = _.uniqueId();
-          }
-          if (formData[idx].base) {
-            formData.base = formData[idx];
-            baseIndex = idx;
-          }
+      } else if (formData[idx]) {
+        if (!formData[idx].tabKey) {
+          formData[idx].tabKey = _.uniqueId();
+        }
+        if (formData[idx].base) {
+          formData.base = formData[idx];
+          baseIndex = idx;
         }
       }
     }
-    
+
     if ((formData.base && formData.base.tabKey && formData.base.tabKey !== '' && !changeDefaultTab) || (formData.base && this.state.tabKey !== formData.base.tabKey)) {
-      
       if (this.state.currentTab === 1 && !this.props.isNewVersionFlow) {
         this.setState({tabKey: formData.base.tabKey});
       } else if (this.props.isNewVersionFlow && this.state.tabKey !== formData[this.state.currentTab - 1].tabKey) {
-        
         this.setState({tabKey: formData[this.state.currentTab - 1].tabKey});
       }
     }
     if (setFormTabKey) {
-      
       this.setState({tabKey: formData.base.tabKey});
     }
-    
-    
+
+
     if (changeDefaultTab) {
       this.setState({formData}, () => {
-        
         this.props.onChange(formData, this.state.tabCount);
         this.validateForm();
       });
@@ -1105,15 +1066,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.setState({errorData});
   }
 
-  initializeMultiColSection(section, formDataObj, isContainer, index, ifError, paneIndex) {
-    
+  initializeMultiColSection(section, formDataObj, isContainer, index, ifError) {
     const formData = _.cloneDeep(formDataObj);
     const newFormData = {};
     newFormData[index] = {};
     _.forEach(section.inputFields, (inputField) => {
-      
       _.forEach(inputField.cols, (col) => {
-        
         if (isContainer && !formData[index]) {
           formData[index] = {};
         }
@@ -1153,24 +1111,20 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             } else if (!isContainer && !ifError && formData[col.id] === undefined) {
               formData[col.id] = '';
             }
-          } else {
-            
-            if (!(col.id.indexOf('template-content') > -1 && col.id !== 'template-content')) {
-              if (isContainer && formData[index] && formData[index][this.props.baseLanguage] && formData[index][this.props.baseLanguage][col.id] === undefined) {
-                if (ifError) {
-                  formData[index][this.props.baseLanguage][col.id] = false;
-                } else if (isContainer && formData[index][this.props.baseLanguage][col.id] === undefined && col.value) {
-                  formData[index][this.props.baseLanguage][col.id] = col.value;
-                } else {
-                  formData[index][this.props.baseLanguage][col.id] = '';
-                }
-              } else if (!isContainer && ifError && formData[col.id] === undefined) {
-                formData[col.id] = false;
-              } else if (!isContainer && !ifError && formData[col.id] === undefined) {
-                formData[col.id] = '';
+          } else if (!(col.id.indexOf('template-content') > -1 && col.id !== 'template-content')) {
+            if (isContainer && formData[index] && formData[index][this.props.baseLanguage] && formData[index][this.props.baseLanguage][col.id] === undefined) {
+              if (ifError) {
+                formData[index][this.props.baseLanguage][col.id] = false;
+              } else if (isContainer && formData[index][this.props.baseLanguage][col.id] === undefined && col.value) {
+                formData[index][this.props.baseLanguage][col.id] = col.value;
+              } else {
+                formData[index][this.props.baseLanguage][col.id] = '';
               }
+            } else if (!isContainer && ifError && formData[col.id] === undefined) {
+              formData[col.id] = false;
+            } else if (!isContainer && !ifError && formData[col.id] === undefined) {
+              formData[col.id] = '';
             }
-            
           }
         }
         if (col.type === 'checkbox') {
@@ -1247,12 +1201,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.isNewVersionFlow) {
       _.forEach(schema.containers, (val, index) => {
         if (val.type === 'tabs') {
-          
           this.setState({usingTabContainer: true});
           _.forEach(val.panes, (pane, paneIndex) => {
             _.forEach(pane.sections, (section) => {
               if (section.type === 'multicols') {
-                
                 formData = this.initializeMultiColSection(section, formData, true, index, ifError, paneIndex);
               } else if (section.type === 'col-label') {
                 formData = this.initializeColLabelSection(section, formData, true, index, ifError);
@@ -1273,12 +1225,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     } else {
       _.forEach(schema.containers, (val) => {
         if (val.type === 'tabs') {
-          
           this.setState({usingTabContainer: true});
           _.forEach(val.panes, (pane, index) => {
             _.forEach(pane.sections, (section) => {
               if (section.type === 'multicols') {
-                
                 formData = this.initializeMultiColSection(section, formData, true, index, ifError);
               } else if (section.type === 'col-label') {
                 formData = this.initializeColLabelSection(section, formData, true, index, ifError);
@@ -1301,8 +1251,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   initialiseForm(schema, makeFormEmpty, resetTabKeys) {
-    
-    
     let formData = makeFormEmpty ? {} : _.cloneDeep(this.state.formData);
     let errorData = {};
     this.formElements = [];
@@ -1314,7 +1262,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     formData = this.initializeContainers(schema, formData);
     errorData = this.initializeContainers(schema, errorData, true);
 
-    
+
     if (!this.props.isEdit) {
       if (!formData[0]) {
         formData[0] = {};
@@ -1354,7 +1302,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   cloneVersionData(ifError) {
-    
     if (this.state.tabCount === 0) {
       this.initialiseForm(this.props.schema, true);
       return;
@@ -1372,10 +1319,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       newTabIndex = this.state.tabCount;
     }
     formData[newTabIndex] = {};
-    
+
     const newTabCount = newTabIndex + 1;
     _.forEach(formData[0], (val, key) => {
-      
       if (key === 'base') {
         return true;
       }
@@ -1385,17 +1331,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       if (typeof val === 'string') {
         if (ifError) {
           formData[newTabIndex][`${key}${newTabCount}`] = false;
-        } else {
-          
-          if (this.props.isNewVersionFlow) {
-            if (key.indexOf('activeTab') > -1) {
-              formData[newTabIndex][`${key}`] = this.props.baseLanguage;
-            } else {
-              formData[newTabIndex][`${key}${newTabCount}`] = '';
-            }
+        } else if (this.props.isNewVersionFlow) {
+          if (key.indexOf('activeTab') > -1) {
+            formData[newTabIndex][`${key}`] = this.props.baseLanguage;
           } else {
             formData[newTabIndex][`${key}${newTabCount}`] = '';
           }
+        } else {
+          formData[newTabIndex][`${key}${newTabCount}`] = '';
         }
       } else if (typeof val === 'boolean') {
         formData[newTabIndex][`${key}${newTabCount}`] = false;
@@ -1403,31 +1346,26 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (this.props.isNewVersionFlow) {
           if (key.indexOf('selectedLanguages') > -1) {
             formData[newTabIndex][key] = [this.props.baseLanguage];
-          } else {
-            
-            if (key === this.props.baseLanguage) {
-              formData[newTabIndex][key] = {};
-              _.forEach(val, (subVal, index) => {
-                
+          } else if (key === this.props.baseLanguage) {
+            formData[newTabIndex][key] = {};
+            _.forEach(val, (subVal, index) => {
                 // if (subVal === 'is_drag_drop' || subVal === 'lang_id' || subVal === 'iso_code' === 'language') {
-                //   
+                //
                 //   formData[newTabIndex][key][index] = formData[0][this.props.baseLanguage][subVal];
                 // } else {
-                if (index === 'tabKey') {
-                  formData[newTabIndex][key][index] = _.uniqueId();
-                } else if (index === 'template-content') {
-                  formData[newTabIndex][key][index] = "";
-                } else {
-                  formData[newTabIndex][key][index] = _.cloneDeep(formData[0][key][index]);
-                }
+              if (index === 'tabKey') {
+                formData[newTabIndex][key][index] = _.uniqueId();
+              } else if (index === 'template-content') {
+                formData[newTabIndex][key][index] = "";
+              } else {
+                formData[newTabIndex][key][index] = _.cloneDeep(formData[0][key][index]);
+              }
                 // }
-              });
-            }
+            });
           }
         } else {
           formData[newTabIndex][key] = {};
           _.forEach(val, (subVal, index) => {
-            
             formData[newTabIndex][key][index] = '';
           });
         }
@@ -1435,7 +1373,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       return true;
     });
     let id = (this.props.isNewVersionFlow && formData[newTabIndex][this.props.baseLanguage].tabKey) ? formData[newTabIndex][this.props.baseLanguage].tabKey : _.uniqueId();
-    
+
     if (!ifError) {
       let validId = false;
       while (!validId) {
@@ -1454,12 +1392,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     // if (!this.props.isEdit) {
     if (ifError) {
-      
       this.setState({errorData: formData});
     } else {
-      
       this.props.onChange(formData, newTabCount, newTabIndex + 1);
-      
+
       this.setState({tabCount: newTabCount, formData, currentTab: newTabIndex + 1, tabKey: id}, () => {
         this.cloneVersionData(true);
       });
@@ -1477,7 +1413,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   markFinalTabVersion() {
     const formData = _.cloneDeep(this.state.formData);
     if (this.state.usingTabContainer) {
-      
       for (let count = 0; count < this.state.tabCount; count += 1) {
         if (parseInt(this.state.currentTab - 1, 10) !== count) {
           formData[count].base = false;
@@ -1502,7 +1437,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       tabKey: '',
     }, () => {
       if (!isEdit) {
-        
         this.initialiseForm(this.props.schema, true);
       }
     });
@@ -1578,9 +1512,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   deleteVersion(ifError, currentTab) {
-    
     if (!ifError && this.state.tabCount === 1) {
-      
       return;
     }
     let formData = {};
@@ -1600,7 +1532,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (tabCount > 1 && currentTab !== tabCount) {
       finalActiveTabKey = formData[currentTab].tabKey;
     }
-    
+
     if (tabCount > 1 && currentTab === tabCount) {
       finalActiveTabKey = formData[currentTab - 2].tabKey;
       finalCurrentTab = currentTab - 1;
@@ -1649,14 +1581,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   deleteLanguage = () => {
     if (this.state.formData[`${this.state.currentTab - 1}`].activeTab === this.props.baseLanguage) {
-      
+
     } else {
       const formData = _.cloneDeep(this.state.formData);
       const currentTab = `${this.state.currentTab - 1}`;
       const currentLang = formData[`${this.state.currentTab - 1}`].activeTab;
       const deleteLanguageIndex = formData[currentTab].selectedLanguages.indexOf(currentLang);
       const baseLangTabKey = formData[currentTab][this.props.baseLanguage].tabKey;
-      
+
       delete formData[currentTab][currentLang];
       formData[currentTab].activeTab = this.props.baseLanguage;
       formData[currentTab].selectedLanguages.splice(deleteLanguageIndex, 1);
@@ -1667,7 +1599,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         formData.base.tabKey = baseLangTabKey;
         formData.base.activeTab = this.props.baseLanguage;
       }
-      
+
       this.setState({formData, currentLangTab: this.props.baseLanguage, tabKey: baseLangTabKey}, () => {
         this.state.currentEvent.call(this.props.parent, formData, deleteLanguageIndex);
         this.setState({currentEvent: {}, currentEventData: {}});
@@ -1676,18 +1608,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   };
 
   renameVersion(currentTab) {
-    
     document.getElementById(`tab-header${currentTab > 1 ? currentTab : ''}`).contentEditable = "true";
     document.getElementById(`tab-header${currentTab > 1 ? currentTab : ''}`).focus();
   }
 
   updateFormData(data, val, event) {
-    
     const formData = _.cloneDeep(this.state.formData);
-    
+
     const tabIndex = this.state.currentTab - 1;
     let currentTab = _.cloneDeep(this.state.currentTab);
-    
+
     if (this.state.usingTabContainer && !val.standalone) {
       const data1 = data;
       if (event === "addLanguage") {
@@ -1702,7 +1632,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         switch (addLanguageType) {
           case "upload":
             baseTab = _.cloneDeep(formData[tabIndex][currentLang]);
-            
+
             baseTab.iso_code = data.iso_code;
             baseTab.lang_id = data.lang_id;
             baseTab.language = data.language;
@@ -1712,7 +1642,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 if (!formData[tabIndex]) {
                   continue;
                 }
-                
+
                 if (id === formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey) {
                   validId = false;
                 }
@@ -1725,14 +1655,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             baseTab.tabKey = id;
             //formData[tabIndex].selectedLanguages.push(data.iso_code);
             formData[tabIndex][data.iso_code] = baseTab;
-            
+
             formData[tabIndex].activeTab = data.iso_code;
             formData[tabIndex].tabKey = baseTab.tabKey;
             break;
           case "copyPrimaryLanguage":
           case "useEditor":
             baseTab = _.cloneDeep(formData[tabIndex][this.props.baseLanguage]);
-            
+
             //baseTab['template-content'] = '';
             baseTab.iso_code = data.iso_code;
             baseTab.lang_id = data.lang_id;
@@ -1756,7 +1686,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             baseTab.tabKey = id;
             formData[tabIndex].selectedLanguages.push(data.iso_code);
             formData[tabIndex][data.iso_code] = baseTab;
-            
+
             formData[tabIndex].activeTab = data.iso_code;
             formData[tabIndex].tabKey = baseTab.tabKey;
             break;
@@ -1770,13 +1700,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           that.setState({tabKey: baseTab.tabKey});
         }, 0);
       }
-      
+
       if (!this.props.isNewVersionFlow) {
         formData[tabIndex][val.id] = data1;
       } else if (this.props.isNewVersionFlow && event !== "addLanguage" && event !== "onContentChange") {
         formData[tabIndex][this.props.baseLanguage][val.id] = data1;
       }
-      
+
       if (formData[tabIndex].base) {
         if (!this.props.isNewVersionFlow) {
           formData.base[val.id] = data1;
@@ -1787,35 +1717,30 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           formData.base.selectedLanguages = formData[tabIndex].selectedLanguages;
         }
       }
-      
     } else {
       formData[val.id] = data;
     }
-    
+
     if (this.props.isNewVersionFlow) {
-      
       if (event === 'onSelect' && data === 'New Version') {
         this.callChildEvent(data, val, 'addVersion', event);
       } else if (event === 'onSelect' && data !== 'New Version') {
-        
-        
         currentTab = _.findIndex(this.state.formData['template-version-options'], { key: data}) + 1;
         this.setState({currentTab, tabKey: formData[`${currentTab - 1}`].tabKey}, () => {
-          
           val.injectedEvents[event].call(this, this.state.formData['template-version-options'][currentTab - 1].key, formData, val);
         });
       }
-      
+
       if (event === 'onContentChange') {
-        
+
       //  formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = data.editor.getData();
       //  if (formData[`${this.state.currentTab - 1}`].tabKey === formData.base.tabKey) {
         //  formData.base[formData[`${this.state.currentTab - 1}`].activeTab][`template-content`] = data.editor.getData();
       //}
       }
     }
-    
-    
+
+
     this.setState({formData}, () => {
       this.validateForm();
     });
@@ -1830,7 +1755,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           val.injectedEvents[event].call(this, true, formData, val);
         }
       } else if (!this.props.isNewVersionFlow) {
-        
         val.injectedEvents[event].call(this, true, formData, val);
       }
     } else if (val.injectedEvents && val.injectedEvents.onChange) {
@@ -1838,7 +1762,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!((event === 'onSelect' && data === 'New Version') || event === 'onContentChange')) {
-      
       this.props.onChange(formData, this.state.tabCount, currentTab);
     }
   }
@@ -1877,15 +1800,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     return true;
   };
-  callChildEvent(data, val, event, e) {
-    
-    
-    
+  callChildEvent(data, val, event) {
     if (!event) {
-      
       return;
     }
-    
+
     const tab = this.state.tabCount;
     // const parent = this._reactInternalInstance._currentElement._owner._instance;
     if (event === 'onTabChange') {
@@ -1896,35 +1815,33 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           const formData = _.cloneDeep(this.state.formData);
           let activeTabIndex = '1';
           const elems = document.getElementsByClassName("ant-tabs-tab");
-          
+
           for (let i = 0; i < elems.length; i += 1) {
-            
             if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
               activeTabIndex = i + 1;
             }
           }
-          
+
           formData[(this.state.currentTab - 1)].activeTab = formData[(this.state.currentTab - 1)].selectedLanguages[activeTabIndex - 1];
           formData[(this.state.currentTab - 1)].tabKey = `${data}`;
           if (formData[(this.state.currentTab - 1)].base) {
             formData.base.activeTab = formData[(this.state.currentTab - 1)].selectedLanguages[activeTabIndex - 1];
             formData.base.tabKey = `${data}`;
           }
-          
+
           that.setState({formData, currentLangTab: formData[(this.state.currentTab - 1)].activeTab, tabKey: formData[(this.state.currentTab - 1)][formData[(this.state.currentTab - 1)].activeTab].tabKey}, () => {
             val.injectedEvents[event].call(that.props.parent, this.state.currentTab, formData);
           });
         } else {
           let activeTabIndex = '1';
           const elems = document.getElementsByClassName("ant-tabs-tab");
-          
+
           for (let i = 0; i < elems.length; i += 1) {
-            
             if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
               activeTabIndex = i + 1;
             }
           }
-          
+
           that.setState({currentTab: activeTabIndex});
           val.injectedEvents[event].call(that.props.parent, activeTabIndex);
         }
@@ -1935,7 +1852,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       this.setState({ popoverVisible: false });
       const that = this;
       setTimeout(() => {
-        
         val.injectedEvents[event].call(that.props.parent, tab);
       }, 0);
       return;
@@ -1961,14 +1877,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           _.forEach(formData[this.state.tabCount].selectedLanguages, (lang) => {
             const tmptabData = formData[this.state.tabCount][lang];
             _.forEach(formData[this.state.tabCount][lang], (tabData, index) => {
-              
               if (index === 'tabKey') {
                 tmptabData.tabKey = _.uniqueId();
               }
             });
           });
           formData[this.state.tabCount].tabKey = formData[this.state.tabCount][formData[this.state.tabCount].activeTab].tabKey;
-          
+
           this.setState({formData, tabKey: formData[this.state.tabCount].tabKey}, () => {
             val.injectedEvents[event].call(this.props.parent, formData, this.state.currentTab);
           });
@@ -2021,24 +1936,24 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       // };
       // debugger;
       // if (this.state.formData[`${this.state.currentTab - 1}`].activeTab === this.props.baseLanguage) {
-      //   
+      //
       // } else {
       //   const formData = _.cloneDeep(this.state.formData);
       //   const currentTab = `${this.state.currentTab - 1}`;
       //   const currentLang = formData[`${this.state.currentTab - 1}`].activeTab;
       //   const deleteLanguageIndex = formData[currentTab].selectedLanguages.indexOf(currentLang);
-      //   
+      //
       //   delete formData[currentTab][currentLang];
       //   formData[currentTab].activeTab = this.props.baseLanguage;
       //   formData[currentTab].selectedLanguages.splice(deleteLanguageIndex, 1);
-      //   
+      //
       //   this.setState({formData, currentLangTab: this.props.baseLanguage}, () => {
       //     val.injectedEvents[event].call(this.props.parent, formData, deleteLanguageIndex);
       //   });
       // }
       return;
     }
-    
+
     val.injectedEvents[event].call(this.props.parent, data);
   }
   openFileDialog = () => {
@@ -2046,14 +1961,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   };
   handleOk = (ev) => {
     const id = ev.target.id;
-    
+
     this.setState({showModal: false});
     if (id === "android" && this.state.androidValid) {
       this.props.onSubmit(this.state.formData);
     } else if (id === "ios" && this.state.iosValid) {
       this.props.onSubmit(this.state.formData);
     } else if (id === "sms-version-modal") {
-      
       this.state.currentEvent.call(this.props.parent, this.state.currentEventData, this.state.currentTab);
       this.setState({currentEvent: {}, currentEventData: {}});
       this.deleteVersion(false, this.state.currentTab);
@@ -2072,7 +1986,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport},
       });
     } else if (id === "email-language-delete-modal") {
-      
       this.deleteLanguage();
       this.props.handleCancelModal();
       // this.setState({currentEvent: {}, currentEventData: {}});
@@ -2095,7 +2008,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
   };
   handleConfirmations = () => {
-    
     this.setState({showModal: true});
   };
 
@@ -2126,7 +2038,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         baseTab = i;
       }
     }
-    
+
     return baseTab;
   };
 
@@ -2148,15 +2060,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     const items = [];
     data.map( (template) => {
-      // 
+      //
       const temp = {};
       temp.id = template._id;
       if (this.props.schema.channel.toLowerCase() === 'email') {
-        // 
+        //
         const imgSrc = template && template.versions && template.versions.base ? template.versions.base.preview_http_url : '';
         const ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
         const content = <img src={imgSrc || ''} alt="" />;
-        
+
         temp.content = (
           <div
             className="sms-template-content">
@@ -2206,7 +2118,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       if (!val.onlyDisplay && !val.standalone && (!this.state.errorData[`${this.state.currentTab - 1}`] || (!this.state.errorData[`${this.state.currentTab - 1}`][val.id] && this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null))) {
         return true;
       }
-      // 
+      //
       columns.push(
         <Col key="label" span={4}>
           <Label style={val.labelStyle ? val.labelStyle : {}}>{val.label}</Label>
@@ -2232,12 +2144,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         case "input":
           if (styling === 'semantic') {
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-            
+
             columns.push(
               <Col key={val.id} span={val.width}>
                 <CapInput
                   id={val.id}
-                  errorMessage={val.errorMessage ? val.errorMessage : ''}
+                  errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                   className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
                   // fluid={val.fluid}
                   style={val.style ? val.style : {}}
@@ -2270,7 +2182,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <TextArea
                   id={val.id}
                   className={`${ifError ? 'error' : ''}`}
-                  errorMessage={val.errorMessage ? val.errorMessage : ''}
+                  errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                   autosize={val.autosize ? val.autosizeParams : false}
                   onChange={(e) => this.updateFormData(e.target.value, val)}
                   style={val.style ? val.style : {}}
@@ -2298,7 +2210,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               <Col key="input" span={val.width} offset={val.offset}>
                 <CapCheckbox
                   className={`${ifError ? 'error' : ''}`}
-                  errorMessage={val.errorMessage ? val.errorMessage : ''}
+                  errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                   style={val.style ? val.style : {}}
                   onChange={(e) => this.updateFormData(e, val)}
                   checked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
@@ -2396,7 +2308,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
           break;
         case "ckeditor":
-          
+
           columns.push(
             <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
               <CKEditor
@@ -2421,11 +2333,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
           const edmSrc = this.state.formData[`${this.state.currentTab - 1}`][this.state.currentLangTab][`edmeditor${langTab > 1 ? langTab : ''}src`];
-          
+
           if (!edmSrc) {
             return false;
           }
-          
+
           columns.push(
             <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
               <EDMEditor
@@ -2551,11 +2463,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         const type = val.type;
         const styling = val.styling;
         const isVersionEnable = (this.state.usingTabContainer && !val.standalone);
-        if (val.id.match(/edmeditor/g)) {
-          
-        }
-        
-        
+
+
         if (!this.props.isNewVersionFlow && !val.standalone && !val.onlyDisplay && isVersionEnable && !this.state.formData[`${this.state.currentTab - 1}`]) {
           return true;
         }
@@ -2573,7 +2482,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)))) {
           return true;
         }
-        
+
         let ifError = false;
         if (val.primitive) {
           if (val.id === "mark-final-version-label") {
@@ -2589,17 +2498,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           );
           return true;
         }
-        
+
         switch (type) {
           case "input":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-            
+
             if (styling === 'semantic') {
               columns.push(
                 <Col key={val.id} span={val.width}>
                   <CapInput
                     id={val.id}
-                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                     className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
                     // fluid={val.fluid}
                     style={val.style ? val.style : {}}
@@ -2634,7 +2543,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     placeholder={val.placeholder ? val.placeholder : ''}
                     disabled={val.disabled}
                     className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                     autosize={val.autosize ? val.autosizeParams : false}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
                     style={val.style ? val.style : {}}
@@ -2654,7 +2563,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <Col key="input" span={val.width} offset={val.offset}>
                   <CapCheckbox
                     className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                     onChange={(e) => this.updateFormData(e.target.checked, val)}
                     checked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     defaultChecked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
@@ -2674,7 +2583,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <Col key={`input-${val.id}`} span={val.width} offset={val.offset}>
                   <CapRadio
                     className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                     onChange={(e) => this.updateFormData(e.target.checked, val)}
                     checked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     defaultChecked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
@@ -2694,7 +2603,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   <CapRadioGroup
                     key={`${val.id}-radio-group`}
                     className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage ? val.errorMessage : ''}
+                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
                     style={val.style ? val.style : {}}
                     value={this.state.formData[`${self.state.currentTab - 1}`] && this.state.formData[`${self.state.currentTab - 1}`][val.id] !== "" ? this.state.formData[`${self.state.currentTab - 1}`][val.id] : val.value}
@@ -2806,7 +2715,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
             break;
           case "line-preview": {
-            
             const content = {
               bodyText: isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`message-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData[val.id],
               bodyImage: this.state.formData[`${this.state.currentTab - 1}`].imagePreview,
@@ -2814,7 +2722,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (!this.state.formData[`${this.state.currentTab - 1}`]) {
               return true;
             }
-            
+
             columns.push(
               <Col key="input" span={23} offset={1}>
                 <TemplatePreview
@@ -2942,10 +2850,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (val.id.indexOf('template-content') > -1 && val.id !== 'template-content') {
               langIndex = parseInt(val.id.replace('template-content', ''), 10) - 1;
             }
-            
+
             const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
             const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] ? this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] : '');
-            
+
             if (this.state.formData[`${this.state.currentTab - 1}`][currentLang].is_drag_drop) {
               // content = "";
             }
@@ -2968,9 +2876,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             // }
             let langTab = 1;
             if (val.id.match(/edmeditor/g)) {
-              
               if (val.id.length > 9 && val.id.charAt(9)) {
-                
                 langTab = val.id.charAt(9);
               }
             }
@@ -2983,13 +2889,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             // const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
             const currentLang = supportedLanguages[langTab - 1];
             const edmSrc = this.state.formData[`${this.state.currentTab - 1}`][currentLang] && this.state.formData[`${this.state.currentTab - 1}`][currentLang][`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}src`];
-            
-            
+
+
             if (!edmSrc) {
               return false;
             }
-            
-            
+
+
             columns.push(
               <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
                 <EDMEditor
@@ -3101,7 +3007,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             result = this.renderSection(section, paneIndex);
             return result;
           });
-          
+
           const sectionHeadeers = pane.sectionsHeaders ? pane.sectionsHeaders : container.tabContent && container.tabContent.sections;
           renderedContentSections = sectionHeadeers.map( (tabContentSection) => {
             result = this.renderSection(tabContentSection, paneIndex);
@@ -3120,7 +3026,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             const currentLang = this.state.formData[this.state.currentTab - 1].selectedLanguages[index];
             paneTabKey = this.state.formData[this.state.currentTab - 1] && this.state.formData[this.state.currentTab - 1][currentLang] && this.state.formData[this.state.currentTab - 1][currentLang].tabKey;
           }
-          
+
           renderedPanes.push(
             <TabPane
               forceRender
@@ -3209,9 +3115,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
         return null;
       });
-      
+
       allElements.push(renderedContainers);
-      
+
       const modal = this.getModal();
       allElements.push(modal);
     }
@@ -3231,7 +3137,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       </CardGrid>
     );
 
-    
+
     return (
       <Row>
         {