@capillarytech/creatives-library 2.0.34 → 2.0.35

package/components/FormBuilder/index.js

@@ -11,14 +11,12 @@ 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, CapTextArea, CapCheckbox, CapRadio, CapRadioGroup, CapSelect, CapTable, CapColumn} from '@capillarytech/cap-react-ui-library';
+import { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapColumn} from '@capillarytech/cap-ui-library';
 import TemplatePreview from '../../components/TemplatePreview';
-// import { CapCheckbox } from '@capillarytech/cap-react-ui-library/basic/checkbox';
 import TagList from '../../containers/TagList';
 import SmsEditor from '../SmsEditor';
 import SlideBox from '../SlideBox';
 import CardGrid from '../CardGrid';
-import * as charCount from '../../utils/smsCharCount';
 import CKEditor from "../../components/Ckeditor/";
 import EDMEditor from "../../components/Edmeditor";
 import CustomPopOver from '../../components/CustomPopOver';
@@ -26,6 +24,8 @@ import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
+const {TextArea} = CapInput;
+const {CapRadioGroup} = CapRadio;
 // import styled from 'styled-components';
 
 // import { FormattedMessage } from 'react-intl';
@@ -83,23 +83,22 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillMount() {
-    console.log('FOrm builder Mounting ', this.props, this.state);
     this.setState({usingTabContainer: this.props.usingTabContainer ? this.props.usingTabContainer : false});
     if (this.props.formData && (this.props.isEdit || (!this.props.isEdit && !_.isEmpty(this.props.formData)))) {
-      console.log('mounted');
+      
       this.setState({formData: this.props.formData}, () => {
         // if (!this.props.isNewVersionFlow) {
         this.initialiseForm(this.props.schema, false, true);
         // }
       });
     } else {
-      console.log('initializing in edit');
+      
       this.initialiseForm(this.props.schema, true);
     }
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log('outgoing nextprops', nextProps, this.state.formData);
+    
     const type = this.props.location.query.type;
     if (this.state.usingTabContainer && nextProps.tabCount !== this.props.tabCount) {
       this.setState({tabCount: nextProps.tabCount});
@@ -107,7 +106,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);
-      console.log('validation final', ifValid);
+      
       if (ifValid) {
         this.saveForm(true);
       } else {
@@ -118,9 +117,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     //   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)) {
-        console.log('incoming props 1');
+        
         if (type === 'embedded') { //TODO: has to be checked and changed.
           this.setState({checkValidation: true, formData: nextProps.formData}, () => {
             this.validateForm();
@@ -138,11 +137,11 @@ 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});
         }
-        console.log("incoming props 1", this.state.usingTabContainer, this.state.tabKey);
+        
         if (this.state.usingTabContainer && this.state.tabKey === '') {
           //this.setState({formData: nextProps.formData});
           if (nextProps.isNewVersionFlow && !_.isEqual(this.state.tabKey, nextProps.tabKey)) {
-            console.log('Tab key condition', nextProps.tabKey);
+            
             this.setState({tabKey: nextProps.tabKey});
           } else if (!nextProps.isNewVersionFlow) {
             this.resetTabKeys(nextProps.formData, nextProps.tabCount);
@@ -151,18 +150,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       }
       if (_.isEmpty(this.props.formData) && !_.isEmpty(nextProps.formData)) {
-        console.log('incoming props 2');
+        
         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) {
-        console.log('incoming props 3');
+        
         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) {
-        console.log('incoming props 4', this.state, nextProps);
+        
         this.setState({ formData: nextProps.formData, tabCount: nextProps.tabCount }, () => {
           this.initializeEditErrorData(nextProps.formData, nextProps.tabCount);
           if (this.state.usingTabContainer) {
@@ -180,16 +179,16 @@ 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)) {
-      console.log('outgoing hahaha', nextProps.tabKey);
+      
       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)) {
-      console.log('outgoing init when empty');
+      
       this.initialiseForm(nextProps.schema, true);
     } else if (_.isEmpty(this.props.formData) && !_.isEmpty(nextProps.formData)) {
-      console.log('outgoing clean form data');
+      
       this.setState({formData: nextProps.formData});
     }
 
@@ -203,16 +202,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData)) {
-      console.log('outgoing always', nextProps.formData);
+      
       if (nextProps.isNewVersionFlow) {
-        console.log('outgoing new flow');
+        
         const tabKey = (this.state.tabKey !== nextProps.formData[nextProps.currentTab - 1].tabKey) ? nextProps.formData[nextProps.currentTab - 1].tabKey : this.state.tabKey;
-        console.log('outgoing tab key form builder', this.state.tabKey, nextProps.formData[nextProps.currentTab - 1].tabKey, nextProps.formData, this.state.formData);
+        
         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) {
-          console.log('outgoing have to reset tab keys');
+          
           this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
         }
         if (type === 'embedded' || this.props.schema.channel.toUpperCase() === 'EMAIL') {
@@ -224,29 +223,29 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       });
     }
 
-    console.log('outgoing Next prop schema ', nextProps.schema);
+    
     if (!_.isEqual(nextProps.schema, this.props.schema)) {
-      console.log('outgoing Reinitializing form ', nextProps.schema, this.props.schema);
+      
       this.setState({ isFormValid: (this.props.isEdit ? this.props.isEdit : true) }, () => {
-        console.log('outgoing set validity');
+        
         if (!this.props.isEdit || (this.props.isEdit && !_.isEmpty(nextProps.formData))) {
-          console.log('outgoing 1', this.state.formData, 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;
-            console.log('outgoing 2');
+            
           }
           if (this.props.isNewVersionFlow) {
             resetTabKeys = false;
           }
-          console.log('outgoing 3', resetTabKeys);
+          
           this.initialiseForm(nextProps.schema, false, resetTabKeys);
           this.validateForm();
         }
       });
     }
     if (!_.isEqual(nextProps.checkValidation, this.props.checkValidation)) {
-      console.log('setting validation ', nextProps.checkValidation, this.props.checkValidation);
+      
       this.setState({ checkValidation: nextProps.checkValidation });
     }
 
@@ -255,32 +254,32 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!_.isEmpty(nextProps.injectedTags) && !_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
-      console.log('Inside injected Tags', nextProps.injectedTags, this.props.injectedTags);
+      
       this.validateForm(nextProps.tags, nextProps.injectedTags);
     }
     if (!_.isEmpty(nextProps.tags) && !_.isEqual(nextProps.tags, this.props.tags)) {
-      console.log('Inside Tags', nextProps.tags, this.props.tags);
+      
       this.validateForm(nextProps.tags, nextProps.injectedTags);
     }
     if (!_.isEqual(nextProps.showModal, this.props.showModal)) {
-      console.log('Inside Modal change ', nextProps.showModal);
+      
       this.setState({showModal: nextProps.showModal});
     }
     if (nextProps.modal && (!_.isEqual(nextProps.modal, this.props.modal) || _.isEmpty(this.state.modal))) {
-      console.log('Inside Modal change ', nextProps.showModal);
+      
       this.setState({modal: nextProps.modal});
     }
   }
 
   onEdit(data, e) {
-    console.log('called on Edit', data, e);
+    
   }
 
   getModal = () => {
     let modal;
     if (this.state.modal) {
       if (this.state.modal.type === 'confirm') {
-        console.log('Adding modal to render');
+        
         modal = (<Modal
           visible={this.state.showModal}
           title={this.state.modal.title}
@@ -334,7 +333,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   handleCloseModal = (data, e) => {
-    console.log('handle close modal', data, e);
+    
     const event = this.state.currentEvent;
     if (!_.isEmpty(this.state.currentEvent)) {
       switch (event) {
@@ -357,8 +356,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   resetTabKeys(form, count, changeDefaultTab, setFormTabKey) {
     const tabCount = count || this.state.tabCount;
-    console.log('outgoing reset', form, count, changeDefaultTab);
-    console.log('incoming reset', form, tabCount);
+    
+    
     const formData = _.cloneDeep(form);
     let baseIndex = 0;
     for (let idx = 0; idx < tabCount; idx += 1) {
@@ -377,34 +376,34 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (setFormTabKey) {
           if (!formData[idx].activeTab) {
             const baseLanguage = this.props.baseLanguage;
-            console.log('outgoing reset do not have active tab');
+            
             formData[idx].tabKey = formData[idx][baseLanguage].tabKey;
           } else {
-            console.log('outgoing reset have active tab');
+            
             formData[idx].tabKey = formData[idx][formData[idx].activeTab].tabKey;
           }
           if (formData[idx].base) {
             if (!formData.base.activeTab) {
-              console.log('outgoing reset do not have active tab base');
+              
               const baseLanguage = this.props.baseLanguage;
               formData.base.tabKey = formData.base[baseLanguage].tabKey;
             } else {
-              console.log('outgoing reset have active tab base');
+              
               formData.base.tabKey = formData.base[formData[idx].activeTab].tabKey;
             }
           }
         }
-        console.log('debug bal 2', formData[idx], formData, idx);
+        
         if (formData[idx].base && formData.base.activeTab) {
-          console.log('debug bal', formData[idx][formData[idx].activeTab].tabKey, idx, formData[idx]);
+          
         //  if (!formData.base.tabKey) {
-          console.log('resetting base tak key');
+          
           formData.base.tabKey = formData[idx][formData[idx].activeTab].tabKey;
           //}
           baseIndex = idx;
         }
       } else {
-        console.log('Old Flow');
+        
         if (formData[idx]) {
           if (!formData[idx].tabKey) {
             formData[idx].tabKey = _.uniqueId();
@@ -416,25 +415,25 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       }
     }
-    console.log('Hello World ', formData, tabCount);
+    
     if ((formData.base && formData.base.tabKey && formData.base.tabKey !== '' && !changeDefaultTab) || (formData.base && this.state.tabKey !== formData.base.tabKey)) {
-      console.log('setting tab key', formData.base.tabKey, this.state.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) {
-        console.log('outgoing changing tab key');
+        
         this.setState({tabKey: formData[this.state.currentTab - 1].tabKey});
       }
     }
     if (setFormTabKey) {
-      console.log('outgoing reset form builder tab key', formData.base.tabKey, formData[0].tabKey, formData);
+      
       this.setState({tabKey: formData.base.tabKey});
     }
-    console.log('form data before adding key', formData);
-    console.log('outgoing reset final before set', formData, this.state.tabKey);
+    
+    
     if (changeDefaultTab) {
       this.setState({formData}, () => {
-        console.log('outgoing reset set data', formData);
+        
         this.props.onChange(formData, this.state.tabCount);
         this.validateForm();
       });
@@ -448,14 +447,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   /* eslint-disable */
   validateForm(tags, injectedTags, isSave, showMessages) {
-    console.log('validating form', this.state.formData);
-    console.log("mmm", this.props );
+    
+    
     let isValid = true;
     const type = (this.props.location && this.props.location.query.type) ? this.props.location.query.type : 'full';
     const currentModule = (this.props.location && this.props.location.query.module) ? this.props.location.query.module : 'default';
     const errorData = _.cloneDeep(this.state.errorData);
     if (this.props.schema.channel === 'SMS') {
-        console.log('sms error validation form data', this.state.formData);
+        
       for (let count = 0; count < this.state.tabCount; count += 1) {
         if (_.isEmpty(errorData[count])) {
           return;
@@ -467,13 +466,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         const content = this.state.formData[count][`sms-editor${index > 1 ? index : ''}`];
         const unicodeCheck = this.state.formData[count][`unicode-validity${index > 1 ? index : ''}`];
         const ifUnicode = content && content !== '' ? checkUnicode(content) : false;
-        console.log('characters are', ifUnicode, unicodeCheck);
+        
         const tagValidationResponse = this.validateTags(content, tags, injectedTags);
-        console.log('tag valid response', tagValidationResponse);
+        
         if (tagValidationResponse.valid) {
           errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
         } else {
-          console.log('sms error validation tags issue');
+          
           errorData[count][`sms-editor${index > 1 ? index : ''}`] = true;
           isValid = false;
         }
@@ -481,7 +480,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           errorData[count][`unicode-validity${index > 1 ? index : ''}`] = true;
           isValid = false;
         } else if (content === '') {
-          console.log('sms error validation content is empty');
+          
           errorData[count][`sms-editor${index > 1 ? index : ''}`] = true;
           isValid = false;
         } else {
@@ -498,21 +497,21 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
     //validation for LINE
     if (this.props.schema.channel === 'LINE') {
-      console.log('line error validation form data', this.state.formData);
+      
       if (this.state.formData['0']['message-editor'] !== undefined ) {
         const content = this.state.formData['0']['message-editor'];
-        console.log('tag valid response', content);
+        
         const tagValidationResponse = this.validateTags(content, tags, injectedTags);
-        console.log('tag valid response', tagValidationResponse);
+        
         if (tagValidationResponse.valid) {
           errorData['0']['message-editor'] = false;
         } else {
-          console.log('message error validation tags issue');
+          
           errorData['0']['message-editor'] = true;
           isValid = false;
         }
         if (content.trim() === '') {
-          console.log('line error validation content is empty');
+          
           errorData['0']['message-editor'] = true;
           isValid = false;
         }
@@ -522,7 +521,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         const imgContentLength = this.state.formData['0'].image.length;
         const imgContentLengthPreview = this.state.formData['0'].imagePreview.length;
         if ( (imgContentLength < 1) && (imgContentLengthPreview < 1) ) {
-          console.log('line error validation image content is empty');
+          
           errorData['0'].image = true;
           errorData['0'].imagePreview = true;
           isValid = false;
@@ -540,9 +539,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'WECHAT') {
-      console.log('Validating Form Now ', this.state.formData);
+      
       _.forEach(this.state.formData, (val, index) => {
-        console.log('Validation Index ', index);
+        
         if (index.indexOf('template') > -1 && this.state.formData[index] !== undefined) {
           const content = this.state.formData[index];
           if (content.trim() === '') {
@@ -550,7 +549,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             isValid = false;
           } else {
             const tagValidationResponse = this.validateTags(content, tags, injectedTags);
-            console.log('tag valid response', tagValidationResponse);
+            
             if (tagValidationResponse.valid) {
               errorData[index] = false;
             } else {
@@ -566,7 +565,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
       });
-      console.log('Validation ', this.state.formData, Object.keys(this.state.formData), errorData);
+      
     }
     if(this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === "MOBILEPUSH"){
       let androidValid = true, iosValid = true;
@@ -610,7 +609,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             } else {
               errorData[parseInt(index)][`message-editor${selector}`] = false;
               const tagValidationResponse = this.validateTags(message, tags, injectedTags);
-              console.log('tag valid response', tagValidationResponse);
+              
               if (tagValidationResponse.valid) {
                 errorData[parseInt(index)][`message-editor${selector}`] = false;
               } else {
@@ -628,7 +627,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             } else {
               errorData[parseInt(index)][`message-title${selector}`] = false;
               const tagValidationResponse = this.validateTags(title, tags, injectedTags);
-              console.log('tag valid response', tagValidationResponse);
+              
               if (tagValidationResponse.valid) {
                 errorData[parseInt(index)][`message-title${selector}`] = false;
               } else {
@@ -824,7 +823,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === "EMAIL") {
       // 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"] && type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline' || currentModule.toLowerCase() === 'library')) {
           errorData["template-subject"] = true;
           isValid = false;
@@ -868,7 +867,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (errorData[index][currentLang] === undefined) {
               errorData[index][currentLang] = {};
             }
-            console.log('tag valid response', tagValidationResponse);
+            
             if (tagValidationResponse.valid) {
               errorData[index][currentLang]['template-content'] = false;
             } else {
@@ -901,7 +900,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       //   const index = count + 1;
       //   // const content = this.state.formData[count][`template-content${index > 1 ? index : ''}`];
       //   // const tagValidationResponse = this.validateTags(content, tags, injectedTags);
-      //   // console.log('tag valid response', tagValidationResponse);
+      //   // 
       //   // if (tagValidationResponse.valid) {
       //   //   errorData[count][`template-content${index > 1 ? index : ''}`] = false;
       //   // } else {
@@ -923,7 +922,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;
   }
@@ -936,7 +935,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   };
   saveForm(saveForm) {
-    console.log('Is Form Valid ', this.state.isFormValid, saveForm);
+    
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
       return;
@@ -982,7 +981,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         result = true;
       }
     });
-    console.log('injected tags support result', checkingTag, injectedTags, result);
+    
     return result;
   }
 
@@ -1013,8 +1012,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     const tags = tagsParam ? tagsParam : this.props.tags;
     const injectedTags = this.transformInjectedTags(injectedTagsParams ? injectedTagsParams : this.props.injectedTags);
     const excludedTags = ['user_id_b64', 'outbox_id_b64'];
-    console.log('form builder injected tags', injectedTags);
-    console.log('validating tags', content, tags, type, module);
+    
+    
     const response = {};
     response.valid = true;
     response.missingTags = [];
@@ -1107,14 +1106,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   initializeMultiColSection(section, formDataObj, isContainer, index, ifError, paneIndex) {
-    console.log('initializeMultiColSection', section, formDataObj, isContainer, index, ifError, paneIndex);
+    
     const formData = _.cloneDeep(formDataObj);
     const newFormData = {};
     newFormData[index] = {};
     _.forEach(section.inputFields, (inputField) => {
-      console.log('Input field ', inputField);
+      
       _.forEach(inputField.cols, (col) => {
-        console.log('Multi col init ', col, formData[index], index);
+        
         if (isContainer && !formData[index]) {
           formData[index] = {};
         }
@@ -1155,7 +1154,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               formData[col.id] = '';
             }
           } else {
-            console.log('new flow ', col, this.props.supportedLanguages, this.props.baseLanguage, index);
+            
             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) {
@@ -1171,7 +1170,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 formData[col.id] = '';
               }
             }
-            console.log('New Form Data ', formData);
+            
           }
         }
         if (col.type === 'checkbox') {
@@ -1248,12 +1247,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (this.props.isNewVersionFlow) {
       _.forEach(schema.containers, (val, index) => {
         if (val.type === 'tabs') {
-          console.log('Initial COntainer ', val);
+          
           this.setState({usingTabContainer: true});
           _.forEach(val.panes, (pane, paneIndex) => {
             _.forEach(pane.sections, (section) => {
               if (section.type === 'multicols') {
-                console.log('initializeContainers', section, index);
+                
                 formData = this.initializeMultiColSection(section, formData, true, index, ifError, paneIndex);
               } else if (section.type === 'col-label') {
                 formData = this.initializeColLabelSection(section, formData, true, index, ifError);
@@ -1274,12 +1273,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     } else {
       _.forEach(schema.containers, (val) => {
         if (val.type === 'tabs') {
-          console.log('Initial COntainer ', val);
+          
           this.setState({usingTabContainer: true});
           _.forEach(val.panes, (pane, index) => {
             _.forEach(pane.sections, (section) => {
               if (section.type === 'multicols') {
-                console.log('initializeContainers', section, index);
+                
                 formData = this.initializeMultiColSection(section, formData, true, index, ifError);
               } else if (section.type === 'col-label') {
                 formData = this.initializeColLabelSection(section, formData, true, index, ifError);
@@ -1302,8 +1301,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   initialiseForm(schema, makeFormEmpty, resetTabKeys) {
-    console.log('outgoing init form xxx', schema, makeFormEmpty, this.state.formData, resetTabKeys);
-    console.log('init form xxx', schema, makeFormEmpty, this.state.formData, resetTabKeys);
+    
+    
     let formData = makeFormEmpty ? {} : _.cloneDeep(this.state.formData);
     let errorData = {};
     this.formElements = [];
@@ -1315,7 +1314,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     formData = this.initializeContainers(schema, formData);
     errorData = this.initializeContainers(schema, errorData, true);
 
-    console.log('After Init ', errorData, formData);
+    
     if (!this.props.isEdit) {
       if (!formData[0]) {
         formData[0] = {};
@@ -1355,7 +1354,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   cloneVersionData(ifError) {
-    console.log('cloning data', this.state.formData, this.state.tabCount, ifError);
+    
     if (this.state.tabCount === 0) {
       this.initialiseForm(this.props.schema, true);
       return;
@@ -1373,10 +1372,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       newTabIndex = this.state.tabCount;
     }
     formData[newTabIndex] = {};
-    console.log('Step 1', formData);
+    
     const newTabCount = newTabIndex + 1;
     _.forEach(formData[0], (val, key) => {
-      console.log('Step 1.1', val, key);
+      
       if (key === 'base') {
         return true;
       }
@@ -1387,7 +1386,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (ifError) {
           formData[newTabIndex][`${key}${newTabCount}`] = false;
         } else {
-          console.log('IsNewFlow ', this.props.isNewVersionFlow);
+          
           if (this.props.isNewVersionFlow) {
             if (key.indexOf('activeTab') > -1) {
               formData[newTabIndex][`${key}`] = this.props.baseLanguage;
@@ -1405,13 +1404,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           if (key.indexOf('selectedLanguages') > -1) {
             formData[newTabIndex][key] = [this.props.baseLanguage];
           } else {
-            console.log('log line ', val);
+            
             if (key === this.props.baseLanguage) {
               formData[newTabIndex][key] = {};
               _.forEach(val, (subVal, index) => {
-                console.log('Subvalue ', subVal, index);
+                
                 // if (subVal === 'is_drag_drop' || subVal === 'lang_id' || subVal === 'iso_code' === 'language') {
-                //   console.log('SubVal 1234567890- ', formData[0][this.props.baseLanguage]);
+                //   
                 //   formData[newTabIndex][key][index] = formData[0][this.props.baseLanguage][subVal];
                 // } else {
                 if (index === 'tabKey') {
@@ -1428,7 +1427,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         } else {
           formData[newTabIndex][key] = {};
           _.forEach(val, (subVal, index) => {
-            console.log('Subvalue ', subVal, index);
+            
             formData[newTabIndex][key][index] = '';
           });
         }
@@ -1436,7 +1435,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();
-    console.log('Step 2', formData);
+    
     if (!ifError) {
       let validId = false;
       while (!validId) {
@@ -1455,12 +1454,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     // if (!this.props.isEdit) {
     if (ifError) {
-      console.log('If error ', ifError);
+      
       this.setState({errorData: formData});
     } else {
-      console.log('formData after cloning', formData, newTabIndex + 1);
+      
       this.props.onChange(formData, newTabCount, newTabIndex + 1);
-      console.log('After OnChange');
+      
       this.setState({tabCount: newTabCount, formData, currentTab: newTabIndex + 1, tabKey: id}, () => {
         this.cloneVersionData(true);
       });
@@ -1478,7 +1477,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   markFinalTabVersion() {
     const formData = _.cloneDeep(this.state.formData);
     if (this.state.usingTabContainer) {
-      console.log('Tab Count ', this.state.tabCount);
+      
       for (let count = 0; count < this.state.tabCount; count += 1) {
         if (parseInt(this.state.currentTab - 1, 10) !== count) {
           formData[count].base = false;
@@ -1503,7 +1502,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       tabKey: '',
     }, () => {
       if (!isEdit) {
-        console.log('init from reset');
+        
         this.initialiseForm(this.props.schema, true);
       }
     });
@@ -1579,9 +1578,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   deleteVersion(ifError, currentTab) {
-    console.log('trying to delete version in form builder');
+    
     if (!ifError && this.state.tabCount === 1) {
-      console.log('cannot delete minimum 1 version');
+      
       return;
     }
     let formData = {};
@@ -1601,7 +1600,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     if (tabCount > 1 && currentTab !== tabCount) {
       finalActiveTabKey = formData[currentTab].tabKey;
     }
-    console.log('Tab Counts ', currentTab, tabCount);
+    
     if (tabCount > 1 && currentTab === tabCount) {
       finalActiveTabKey = formData[currentTab - 2].tabKey;
       finalCurrentTab = currentTab - 1;
@@ -1650,14 +1649,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   deleteLanguage = () => {
     if (this.state.formData[`${this.state.currentTab - 1}`].activeTab === this.props.baseLanguage) {
-      console.log('Base Language');
+      
     } 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;
-      console.log('deleting language', currentTab, currentLang);
+      
       delete formData[currentTab][currentLang];
       formData[currentTab].activeTab = this.props.baseLanguage;
       formData[currentTab].selectedLanguages.splice(deleteLanguageIndex, 1);
@@ -1668,7 +1667,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         formData.base.tabKey = baseLangTabKey;
         formData.base.activeTab = this.props.baseLanguage;
       }
-      console.log('After Deleting Form data ', formData);
+      
       this.setState({formData, currentLangTab: this.props.baseLanguage, tabKey: baseLangTabKey}, () => {
         this.state.currentEvent.call(this.props.parent, formData, deleteLanguageIndex);
         this.setState({currentEvent: {}, currentEventData: {}});
@@ -1677,18 +1676,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   };
 
   renameVersion(currentTab) {
-    console.log('form builder renaming', currentTab);
+    
     document.getElementById(`tab-header${currentTab > 1 ? currentTab : ''}`).contentEditable = "true";
     document.getElementById(`tab-header${currentTab > 1 ? currentTab : ''}`).focus();
   }
 
   updateFormData(data, val, event) {
-    console.log('updating data', data, val, event, this.props.addLanguageType);
+    
     const formData = _.cloneDeep(this.state.formData);
-    console.log('oform data before updating', JSON.stringify(formData));
+    
     const tabIndex = this.state.currentTab - 1;
     let currentTab = _.cloneDeep(this.state.currentTab);
-    console.log('setting form data1', JSON.stringify(formData));
+    
     if (this.state.usingTabContainer && !val.standalone) {
       const data1 = data;
       if (event === "addLanguage") {
@@ -1703,7 +1702,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         switch (addLanguageType) {
           case "upload":
             baseTab = _.cloneDeep(formData[tabIndex][currentLang]);
-            console.log('Add Language Event', JSON.stringify(formData), "\n", JSON.stringify(baseTab));
+            
             baseTab.iso_code = data.iso_code;
             baseTab.lang_id = data.lang_id;
             baseTab.language = data.language;
@@ -1713,7 +1712,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 if (!formData[tabIndex]) {
                   continue;
                 }
-                console.log('comparing tab keys', id, formData, formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey);
+                
                 if (id === formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey) {
                   validId = false;
                 }
@@ -1726,14 +1725,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;
-            console.log('Add Language Event After', formData);
+            
             formData[tabIndex].activeTab = data.iso_code;
             formData[tabIndex].tabKey = baseTab.tabKey;
             break;
           case "copyPrimaryLanguage":
           case "useEditor":
             baseTab = _.cloneDeep(formData[tabIndex][this.props.baseLanguage]);
-            console.log('Add Language Event', data, val, tabIndex, _.cloneDeep(baseTab));
+            
             //baseTab['template-content'] = '';
             baseTab.iso_code = data.iso_code;
             baseTab.lang_id = data.lang_id;
@@ -1757,7 +1756,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;
-            console.log('Add Language Event After', formData);
+            
             formData[tabIndex].activeTab = data.iso_code;
             formData[tabIndex].tabKey = baseTab.tabKey;
             break;
@@ -1771,13 +1770,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           that.setState({tabKey: baseTab.tabKey});
         }, 0);
       }
-      console.log('setting form data2', JSON.stringify(formData));
+      
       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;
       }
-      console.log('setting form data3', JSON.stringify(formData));
+      
       if (formData[tabIndex].base) {
         if (!this.props.isNewVersionFlow) {
           formData.base[val.id] = data1;
@@ -1788,35 +1787,35 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           formData.base.selectedLanguages = formData[tabIndex].selectedLanguages;
         }
       }
-      console.log('setting form data4', JSON.stringify(formData));
+      
     } else {
       formData[val.id] = data;
     }
-    console.log('setting form data5', JSON.stringify(formData));
+    
     if (this.props.isNewVersionFlow) {
-      console.log('Version Select ', data, val, event);
+      
       if (event === 'onSelect' && data === 'New Version') {
         this.callChildEvent(data, val, 'addVersion', event);
       } else if (event === 'onSelect' && data !== 'New Version') {
-        console.log('Heloo how are you', data, val);
-        console.log(_.findIndex(this.state.formData['template-version-options'], { key: data}));
+        
+        
         currentTab = _.findIndex(this.state.formData['template-version-options'], { key: data}) + 1;
         this.setState({currentTab, tabKey: formData[`${currentTab - 1}`].tabKey}, () => {
-          console.log('Current tab of state ', this.state.currentTab);
+          
           val.injectedEvents[event].call(this, this.state.formData['template-version-options'][currentTab - 1].key, formData, val);
         });
       }
-      console.log('setting form data6', JSON.stringify(formData));
+      
       if (event === 'onContentChange') {
-        console.log('onContentChange ', data, val, event, data.editor.getData());
+        
       //  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();
       //}
       }
     }
-    console.log('setting form data7', JSON.stringify(formData));
-    console.log('setting form data', formData);
+    
+    
     this.setState({formData}, () => {
       this.validateForm();
     });
@@ -1831,7 +1830,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           val.injectedEvents[event].call(this, true, formData, val);
         }
       } else if (!this.props.isNewVersionFlow) {
-        console.log('Event trigger ', event);
+        
         val.injectedEvents[event].call(this, true, formData, val);
       }
     } else if (val.injectedEvents && val.injectedEvents.onChange) {
@@ -1839,7 +1838,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!((event === 'onSelect' && data === 'New Version') || event === 'onContentChange')) {
-      console.log('Current tab ', this.state.currentLangTab, currentTab);
+      
       this.props.onChange(formData, this.state.tabCount, currentTab);
     }
   }
@@ -1879,14 +1878,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return true;
   };
   callChildEvent(data, val, event, e) {
-    console.log("lks 1", data);
-    console.log("lks 2", val);
-    console.log("lks 3", event);
+    
+    
+    
     if (!event) {
-      console.log('rogue event');
+      
       return;
     }
-    console.log('calling child', data, val, event, e);
+    
     const tab = this.state.tabCount;
     // const parent = this._reactInternalInstance._currentElement._owner._instance;
     if (event === 'onTabChange') {
@@ -1897,35 +1896,35 @@ 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");
-          console.log('elems', elems);
+          
           for (let i = 0; i < elems.length; i += 1) {
-            console.log('elems 2', elems.item(i));
+            
             if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
               activeTabIndex = i + 1;
             }
           }
-          console.log('current Tab ', JSON.stringify(activeTabIndex), formData, this.state.currentTab, this.state.currentLangTab);
+          
           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}`;
           }
-          console.log('New Form Data ', formData);
+          
           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");
-          console.log('elems', elems);
+          
           for (let i = 0; i < elems.length; i += 1) {
-            console.log('elems 2', elems.item(i));
+            
             if (elems.item(i).classList.contains("ant-tabs-tab-active")) {
               activeTabIndex = i + 1;
             }
           }
-          console.log('current Tab ', JSON.stringify(activeTabIndex));
+          
           that.setState({currentTab: activeTabIndex});
           val.injectedEvents[event].call(that.props.parent, activeTabIndex);
         }
@@ -1936,7 +1935,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       this.setState({ popoverVisible: false });
       const that = this;
       setTimeout(() => {
-        console.log('Add version ', data, tab, that.state.formData);
+        
         val.injectedEvents[event].call(that.props.parent, tab);
       }, 0);
       return;
@@ -1962,14 +1961,14 @@ 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) => {
-              console.log('tabData Data ', tabData, index);
+              
               if (index === 'tabKey') {
                 tmptabData.tabKey = _.uniqueId();
               }
             });
           });
           formData[this.state.tabCount].tabKey = formData[this.state.tabCount][formData[this.state.tabCount].activeTab].tabKey;
-          console.log('Duplicatte Version ', formData);
+          
           this.setState({formData, tabKey: formData[this.state.tabCount].tabKey}, () => {
             val.injectedEvents[event].call(this.props.parent, formData, this.state.currentTab);
           });
@@ -2022,24 +2021,24 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       // };
       // debugger;
       // if (this.state.formData[`${this.state.currentTab - 1}`].activeTab === this.props.baseLanguage) {
-      //   console.log('Base Language');
+      //   
       // } 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);
-      //   console.log('deleting language', currentTab, currentLang);
+      //   
       //   delete formData[currentTab][currentLang];
       //   formData[currentTab].activeTab = this.props.baseLanguage;
       //   formData[currentTab].selectedLanguages.splice(deleteLanguageIndex, 1);
-      //   console.log('After Deleting Form data ', formData);
+      //   
       //   this.setState({formData, currentLangTab: this.props.baseLanguage}, () => {
       //     val.injectedEvents[event].call(this.props.parent, formData, deleteLanguageIndex);
       //   });
       // }
       return;
     }
-    console.log('Call Event ', event, data);
+    
     val.injectedEvents[event].call(this.props.parent, data);
   }
   openFileDialog = () => {
@@ -2047,14 +2046,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   };
   handleOk = (ev) => {
     const id = ev.target.id;
-    console.log('Handle OK ', 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") {
-      console.log('Deleting version ', this.state.currentTab);
+      
       this.state.currentEvent.call(this.props.parent, this.state.currentEventData, this.state.currentTab);
       this.setState({currentEvent: {}, currentEventData: {}});
       this.deleteVersion(false, this.state.currentTab);
@@ -2073,7 +2072,7 @@ 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") {
-      console.log('Delete languages ');
+      
       this.deleteLanguage();
       this.props.handleCancelModal();
       // this.setState({currentEvent: {}, currentEventData: {}});
@@ -2096,7 +2095,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
   };
   handleConfirmations = () => {
-    console.log('handling confirmations');
+    
     this.setState({showModal: true});
   };
 
@@ -2127,7 +2126,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         baseTab = i;
       }
     }
-    console.log('base tab is ', baseTab);
+    
     return baseTab;
   };
 
@@ -2149,15 +2148,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     const items = [];
     data.map( (template) => {
-      // console.log("Templates ", template._id, " Data ", template);
+      // 
       const temp = {};
       temp.id = template._id;
       if (this.props.schema.channel.toLowerCase() === 'email') {
-        // console.log('Data Prepare');
+        // 
         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="" />;
-        console.log('qwerty template preview', imgSrc, template, ifPreviewGenerated, content);
+        
         temp.content = (
           <div
             className="sms-template-content">
@@ -2207,7 +2206,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;
       }
-      // console.log('rendering val', val, this.state.formData[`${this.state.currentTab - 1}`][val.id], this.state.usingTabContainer && !val.standalone);
+      // 
       columns.push(
         <Col key="label" span={4}>
           <Label style={val.labelStyle ? val.labelStyle : {}}>{val.label}</Label>
@@ -2233,7 +2232,7 @@ 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]);
-            console.log('input error', ifError);
+            
             columns.push(
               <Col key={val.id} span={val.width}>
                 <CapInput
@@ -2268,7 +2267,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           if (styling === 'semantic') {
             columns.push(
               <Col key="input" span={val.width}>
-                <CapTextArea
+                <TextArea
                   id={val.id}
                   className={`${ifError ? 'error' : ''}`}
                   errorMessage={val.errorMessage ? val.errorMessage : ''}
@@ -2291,6 +2290,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           columns.push(<CapColumn id={val.id} className={"preview-chars"} span={val.width}>
             {charList.map((char) => char)}
           </CapColumn>);
+          break;
         case "checkbox":
           ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
           if (styling === 'semantic') {
@@ -2396,7 +2396,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
           break;
         case "ckeditor":
-          console.log('CKEditor Data 1', this.state.formData, val.id, this.state.currentTab);
+          
           columns.push(
             <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
               <CKEditor
@@ -2421,11 +2421,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`];
-          console.log('Rendering EDM Editor collabel ', edmSrc, this.state.formData[`${this.state.currentTab - 1}`]);
+          
           if (!edmSrc) {
             return false;
           }
-          console.log('Rendering EDM Editor 2 collabel');
+          
           columns.push(
             <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
               <EDMEditor
@@ -2552,10 +2552,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         const styling = val.styling;
         const isVersionEnable = (this.state.usingTabContainer && !val.standalone);
         if (val.id.match(/edmeditor/g)) {
-          console.log('current language first', val.id);
+          
         }
-        console.log('Multi col Render 1', val.id, !val.standalone, !val.onlyDisplay, (!this.state.formData[`${this.state.currentTab - 1}`] || (!this.state.formData[`${this.state.currentTab - 1}`] && this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)), this.state.formData[`${this.state.currentTab - 1}`], this.state.currentTab);
-        console.log('Multi col render ', val, this.state.formData, this.state.errorData, this.state.currentTab);
+        
+        
         if (!this.props.isNewVersionFlow && !val.standalone && !val.onlyDisplay && isVersionEnable && !this.state.formData[`${this.state.currentTab - 1}`]) {
           return true;
         }
@@ -2573,7 +2573,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)))) {
           return true;
         }
-        console.log('Render 3');
+        
         let ifError = false;
         if (val.primitive) {
           if (val.id === "mark-final-version-label") {
@@ -2589,11 +2589,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           );
           return true;
         }
-        console.log('Render 4');
+        
         switch (type) {
           case "input":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-            console.log('input error', ifError);
+            
             if (styling === 'semantic') {
               columns.push(
                 <Col key={val.id} span={val.width}>
@@ -2629,7 +2629,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (styling === 'semantic') {
               columns.push(
                 <Col key="input" span={val.width} offset={val.offset}>
-                  <CapTextArea
+                  <TextArea
                     id={val.id}
                     placeholder={val.placeholder ? val.placeholder : ''}
                     disabled={val.disabled}
@@ -2806,7 +2806,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
             break;
           case "line-preview": {
-            console.log("lipak inside imagePreview@@@", this.state.formData['0'].imagePreview);
+            
             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 +2814,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (!this.state.formData[`${this.state.currentTab - 1}`]) {
               return true;
             }
-            console.log("lipak inside formdata@@@", content);
+            
             columns.push(
               <Col key="input" span={23} offset={1}>
                 <TemplatePreview
@@ -2942,10 +2942,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;
             }
-            console.log('CKEditor Data 2', this.state.formData, this.state.formData[`${this.state.currentTab - 1}`], val, this.state.currentTab, this.state.currentLangTab, langIndex);
+            
             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'] : '');
-            console.log('ckeditor current lang', currentLang, content);
+            
             if (this.state.formData[`${this.state.currentTab - 1}`][currentLang].is_drag_drop) {
               // content = "";
             }
@@ -2968,9 +2968,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             // }
             let langTab = 1;
             if (val.id.match(/edmeditor/g)) {
-              console.log('current language found match', val.id);
+              
               if (val.id.length > 9 && val.id.charAt(9)) {
-                console.log('current language in if');
+                
                 langTab = val.id.charAt(9);
               }
             }
@@ -2983,13 +2983,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`];
-            console.log('current language', langTab, supportedLanguages, currentLang, val.id, edmSrc);
-            console.log('Rendering EDM Editor multicol', edmSrc, this.state.formData[`${this.state.currentTab - 1}`]);
+            
+            
             if (!edmSrc) {
               return false;
             }
-            console.log('current language rendered', langTab, val.id);
-            console.log('Rendering EDM Editor 2 multicol');
+            
+            
             columns.push(
               <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
                 <EDMEditor
@@ -3101,7 +3101,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             result = this.renderSection(section, paneIndex);
             return result;
           });
-          console.log('tabs rendering', renderedSections);
+          
           const sectionHeadeers = pane.sectionsHeaders ? pane.sectionsHeaders : container.tabContent && container.tabContent.sections;
           renderedContentSections = sectionHeadeers.map( (tabContentSection) => {
             result = this.renderSection(tabContentSection, paneIndex);
@@ -3120,7 +3120,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;
           }
-          console.log('tabs rendering pushing pane', paneTabKey, renderedSections, index, pane);
+          
           renderedPanes.push(
             <TabPane
               forceRender
@@ -3209,9 +3209,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
         return null;
       });
-      console.log('tabs rendering result', renderedContainers);
+      
       allElements.push(renderedContainers);
-      console.log('tabs rendering all elements', allElements);
+      
       const modal = this.getModal();
       allElements.push(modal);
     }
@@ -3231,7 +3231,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       </CardGrid>
     );
 
-    console.log('form builder state ', this.state, this.props);
+    
     return (
       <Row>
         {