@capillarytech/creatives-library 2.0.81 → 2.0.83

package/components/FormBuilder/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-case-declarations */
 
 /**
 *
@@ -11,10 +10,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Label } from 'semantic-ui-react';
 import _ from 'lodash';
-import { Tabs, Table, Modal} from 'antd';
-import { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification} from '@capillarytech/cap-ui-library';
-import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+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 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';
@@ -26,17 +25,11 @@ 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';
 // import messages from './messages';
-const isUrl = (str) => {
-  // eslint-disable-next-line no-useless-escape
-  const res = str.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
-  return res;
-};
+
 class FormBuilder extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -104,7 +97,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
   componentWillReceiveProps(nextProps) {
     const type = this.props.location.query.type;
-    const isLibraryModule = this.props.location.query.module === "library";
     if (this.state.usingTabContainer && nextProps.tabCount !== this.props.tabCount) {
       this.setState({tabCount: nextProps.tabCount});
     }
@@ -123,7 +115,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     // }
     if (nextProps.isEdit) {
       if (!_.isEqual(nextProps.formData, this.state.formData) && !_.isEmpty(nextProps.formData)) {
-        if (type === 'embedded' && !isLibraryModule) { //TODO: has to be checked and changed.
+        if (type === 'embedded') { //TODO: has to be checked and changed.
           this.setState({checkValidation: true, formData: nextProps.formData}, () => {
             this.validateForm();
           });
@@ -255,7 +247,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
   }
 
-  onEdit() {
+  onEdit(data, e) {
 
   }
 
@@ -306,15 +298,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return modal;
   };
 
-  openNotificationWithIcon = (type, message, key) => {
-    CapNotification.error({
-      key: key || type + message,
+  openNotificationWithIcon = (type, message) => {
+    const dur = (type === 'error' || type === 'warning') ? null : 5;
+    notification[type]({
       message: (`${type.toUpperCase()} ! ! ! `),
       description: message, //'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+      duration: dur,
     });
   }
 
-  handleCloseModal = () => {
+  handleCloseModal = (data, e) => {
     const event = this.state.currentEvent;
     if (!_.isEmpty(this.state.currentEvent)) {
       switch (event) {
@@ -414,13 +407,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       });
     }
   }
-  isValidExternalLink = ({obj, key}) => {
-    if (key in obj) {
-      const url = _.get(obj, key);
-      return (url && url !== "" && isUrl(url));
-    }
-    return true;
-  }
+
   /* eslint-disable */
   validateForm(tags, injectedTags, isSave, showMessages) {
     
@@ -443,10 +430,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         const unicodeCheck = this.state.formData[count][`unicode-validity${index > 1 ? index : ''}`];
         const ifUnicode = content && content !== '' ? checkUnicode(content) : false;
         
-        let tagValidationResponse = false;
-        if (content) {
-          tagValidationResponse = this.validateTags(content, tags, injectedTags);
-        }
+        const tagValidationResponse = this.validateTags(content, tags, injectedTags);
         
         if (tagValidationResponse.valid) {
           errorData[count][`sms-editor${index > 1 ? index : ''}`] = false;
@@ -571,66 +555,50 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       _.forEach(this.state.formData, (tab, index) => {
         let isCurrentTabValid = true;
         let skipValidation = false;
-        if (type.toLowerCase() === 'embedded' && ((isOnlyAndroid && parseInt(index) === 1) || (isOnlyIos && parseInt(index) === 0)) && isOnlyAndroid !== isOnlyIos) { 
-          // skip validation of the tab which is not open in embedded mode
+        if (type.toLowerCase() === 'embedded' && ((isOnlyAndroid && parseInt(index) === 1) || (isOnlyIos && parseInt(index) === 0))) {
           skipValidation = true;
         }
         if (!isNaN(index) && tab && !skipValidation) {
           const selector = index > 0 ? `${Number(index) + 1}` : '';
           let message = tab[`message-editor${selector}`];
 
-          if (errorData[parseInt(index)]) {
-            if (message) {
-              message = message.trim();
-
-              if (message === "") {
-                errorData[parseInt(index)][`message-editor${selector}`] = true;
-                isValid = false;
-                isCurrentTabValid = false;
-              } else {
-                errorData[parseInt(index)][`message-editor${selector}`] = false;
-                const tagValidationResponse = this.validateTags(message, tags, injectedTags);
-                
-                if (tagValidationResponse.valid) {
-                  errorData[parseInt(index)][`message-editor${selector}`] = false;
-                } else {
-                  errorData[parseInt(index)][`message-editor${selector}`] = true;
-                  errorData[parseInt(index)]['invalid-tags'] = tagValidationResponse.unsupportedTags;
-                  isValid = false;
-                }
-              }
+          message = message.trim();
 
+          if (errorData[parseInt(index)]) {
+            if (message === "") {
+              errorData[parseInt(index)][`message-editor${selector}`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
             } else {
+              errorData[parseInt(index)][`message-editor${selector}`] = false;
+              const tagValidationResponse = this.validateTags(message, tags, injectedTags);
+              
+              if (tagValidationResponse.valid) {
+                errorData[parseInt(index)][`message-editor${selector}`] = false;
+              } else {
                 errorData[parseInt(index)][`message-editor${selector}`] = true;
                 isValid = false;
-                isCurrentTabValid = false;
+              }
             }
-            
-            
 
-            let title = tab[`message-title${selector}`]
-            if(title){
-              title = title.trim();
-              if (title === "") {
-                errorData[parseInt(index)][`message-title${selector}`] = true;
-                isValid = false;
-                isCurrentTabValid = false;
-              } else {
-                errorData[parseInt(index)][`message-title${selector}`] = false;
-                const tagValidationResponse = this.validateTags(title, tags, injectedTags);
-                
-                if (tagValidationResponse.valid) {
-                  errorData[parseInt(index)][`message-title${selector}`] = false;
-                } else {
-                  errorData[parseInt(index)][`message-title${selector}`] = true;
-                  isValid = false;
-                }
-              }
-            } else {
+
+            const title = tab[`message-title${selector}`].trim();
+            if (title === "") {
               errorData[parseInt(index)][`message-title${selector}`] = true;
               isValid = false;
               isCurrentTabValid = false;
+            } else {
+              errorData[parseInt(index)][`message-title${selector}`] = false;
+              const tagValidationResponse = this.validateTags(title, tags, injectedTags);
+              
+              if (tagValidationResponse.valid) {
+                errorData[parseInt(index)][`message-title${selector}`] = false;
+              } else {
+                errorData[parseInt(index)][`message-title${selector}`] = true;
+                isValid = false;
+              }
             }
+
             // if(tab['primary-cta-link'].trim() === ""){
             //   errorData[parseInt(index)][`primary-cta-link`] = true;
             //   isValid = false;
@@ -652,15 +620,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               errorData[parseInt(index)]['cta-deeplink2-select'] = false;
             }
             // }
-            if(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink-text'})){
+            if(tab[`cta-deeplink-text`] === ""){
               errorData[parseInt(index)][`cta-deeplink-text`] = true;
               isValid = false;
               isCurrentTabValid = false;
             }else {
               errorData[parseInt(index)]['cta-deeplink-text'] = false;
             }
-            
-            if(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink2-text'})){
+
+            if(tab['cta-deeplink2-text'] === ""){
               errorData[parseInt(index)][`cta-deeplink2-text`] = true;
               isValid = false;
               isCurrentTabValid = false;
@@ -683,9 +651,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }else {
               errorData[parseInt(index)]['secondary-cta-0-label'] = false;
             }
-
-            
-            if(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink-secondary-cta-0-text'})){
+            if(tab['cta-deeplink-secondary-cta-0-text'] === ""){
               errorData[parseInt(index)][`cta-deeplink-secondary-cta-0-text`] = true;
               isValid = false;
               isCurrentTabValid = false;
@@ -706,8 +672,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }else {
               errorData[parseInt(index)]['secondary-cta-1-label'] = false;
             }
-            
-            if(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink-secondary-cta-1-text'})){
+            if(tab['cta-deeplink-secondary-cta-1-text'] === ""){
               errorData[parseInt(index)][`cta-deeplink-secondary-cta-1-text`] = true;
               isValid = false;
               isCurrentTabValid = false;
@@ -721,8 +686,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }else {
               errorData[parseInt(index)]['cta-deeplink-secondary-cta-1-select'] = false;
             }
-            
-            if(!this.isValidExternalLink({obj: tab, key: 'cta-deeplink-secondary-cta-1-text2'})){
+            if(tab['cta-deeplink-secondary-cta-1-text2'] === ""){
               errorData[parseInt(index)][`cta-deeplink-secondary-cta-1-text2`] = true;
               isValid = false;
               isCurrentTabValid = false;
@@ -829,7 +793,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
         // Check if template subject present in form data from Loyalty, DVS, Timeline
         if (index === 'template-subject' && type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline' || currentModule.toLowerCase() === 'library')) {
-          if (data && data.trim() === '') {
+          if (data.trim() === '') {
             errorData[index] = true;
             isValid = false;
           } else {
@@ -886,7 +850,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
           if (errorString !== "") {
-            this.openNotificationWithIcon('error', errorString, "email-validation-error");
+            this.openNotificationWithIcon('error', errorString);
           }
           _.forEach(errorData[index], (versionData, key) => {
             if (data.selectedLanguages.indexOf(key) === -1) {
@@ -922,7 +886,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     this.setState({isFormValid : isValid, errorData});
     
-    this.props.onFormValidityChange(isValid, errorData);
+    this.props.onFormValidityChange(isValid);
     return isValid;
   }
 
@@ -1104,7 +1068,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.setState({errorData});
   }
 
-  initializeMultiColSection(section, formDataObj, isContainer, index, ifError) {
+  initializeMultiColSection(section, formDataObj, isContainer, index, ifError, paneIndex) {
     const formData = _.cloneDeep(formDataObj);
     const newFormData = {};
     newFormData[index] = {};
@@ -1166,7 +1130,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         if (col.type === 'checkbox') {
-          if (isContainer && !formData[index][col.id]) {
+          if (isContainer) {
             formData[index][col.id] = false;
           } else if (!isContainer && formData[col.id] === undefined) {
             formData[col.id] = false;
@@ -1618,10 +1582,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   deleteLanguage = () => {
-    // if (this.state.formData[`${this.state.currentTab - 1}`].activeTab === this.props.baseLanguage) {
+    if (this.state.formData[`${this.state.currentTab - 1}`].activeTab === this.props.baseLanguage) {
 
-    // } else {
-    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;
@@ -1781,9 +1744,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
     this.setState({formData}, () => {
-      if (this.props.startValidation) {
-        this.validateForm();
-      }
+      this.validateForm();
     });
     if (event && val.injectedEvents[event]) {
       if (event === "onRowClick") {
@@ -1841,11 +1802,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
     return true;
   };
-  callChildEvent(data, val, event) {
+  callChildEvent(data, val, event, e) {
     if (!event) {
       return;
     }
-
     const tab = this.state.tabCount;
     // const parent = this._reactInternalInstance._currentElement._owner._instance;
     if (event === 'onTabChange') {
@@ -1994,12 +1954,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       // }
       return;
     }
-    console.log('Call Event ', event, data, this.props.parent);
+
     // val.injectedEvents[event].call(this.props.parent, data);
     val.injectedEvents[event].call(this.props.parent, data, val.id);
   }
   openFileDialog = (e, parentID) => {
-    console.log("filedialog: ");
     document.querySelector(`#${parentID} #fileName`).click();
   };
   handleOk = (ev) => {
@@ -2080,7 +2039,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       const fileParams = {
         width: this.width,
         height: this.height,
-        error: file.size / (1e+6) > 3,
+        error: file.size / (1e+6) > 5,
       };
       this.callChildEvent({file, type: 'image', fileParams}, val, val.submitAction);
     };
@@ -2125,7 +2084,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       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 ifPreviewGenerated = template && template.versions && template.versions.base ? template.versions.base.isPreviewGenerated : 0;
         const content = <img src={imgSrc || ''} alt="" />;
 
         temp.content = (
@@ -2179,9 +2138,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
       //
       columns.push(
-        <CapColumn key="label" span={4}>
+        <Col key="label" span={4}>
           <Label style={val.labelStyle ? val.labelStyle : {}}>{val.label}</Label>
-        </CapColumn>
+        </Col>
       );
       let ifError = false;
       const isVersionEnable = (this.state.usingTabContainer && !val.standalone);
@@ -2193,9 +2152,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         columns.push(
-          <CapColumn key={val.id} span={val.width}>
+          <Col key={val.id} span={val.width}>
             {this.renderPrimitiveElement(val, childIndex)}
-          </CapColumn>
+          </Col>
         );
         return true;
       }
@@ -2205,57 +2164,55 @@ 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]);
-            const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+
             columns.push(
-              <CapColumn key={val.id} span={val.width} offset={val.offset}>
+              <Col key={val.id} span={val.width}>
                 <CapInput
                   id={val.id}
-                  errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                  errorMessage={val.errorMessage ? val.errorMessage : ''}
                   className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
                   // fluid={val.fluid}
                   style={val.style ? val.style : {}}
                   placeholder={val.placeholder}
                   onChange={(e) => this.updateFormData(e.target.value, val)}
                   defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                  value={value || ""}
+                  value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                   disabled={val.disabled}
                 />
-              </CapColumn>
+              </Col>
             );
           }
           break;
         case "SmsEditor":
           columns.push(
-            <CapColumn span={5} key="input">
+            <Col span={5} key="input">
               <SmsEditor
                 id={val.id}
                 content={this.state.formData[val.id]}
                 onDataChange={(data) => this.updateFormData(data.value, val)}
               />
-            </CapColumn>
+            </Col>
           );
           break;
         case "textarea":
           ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-          const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
           if (styling === 'semantic') {
             columns.push(
-              <CapColumn key="input" span={val.width}>
-                <TextArea
+              <Col key="input" span={val.width}>
+                <CapTextArea
                   id={val.id}
                   className={`${ifError ? 'error' : ''}`}
-                  errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
-                  label={val.label}
+                  errorMessage={val.errorMessage ? val.errorMessage : ''}
                   autosize={val.autosize ? val.autosizeParams : false}
                   onChange={(e) => this.updateFormData(e.target.value, val)}
                   style={val.style ? val.style : {}}
                   defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                  value={value || ""}
+                  value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                   rows={20}
                   disabled={val.disabled}
                   cols={20}
                 />
-              </CapColumn>
+              </Col>
             );
           }
           break;
@@ -2270,23 +2227,23 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
           if (styling === 'semantic') {
             columns.push(
-              <CapColumn key="input" span={val.width} offset={val.offset}>
+              <Col key="input" span={val.width} offset={val.offset}>
                 <CapCheckbox
                   className={`${ifError ? 'error' : ''}`}
-                  errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                  errorMessage={val.errorMessage ? 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]}
                   defaultChecked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                   disabled={val.disabled}
                 />
-              </CapColumn>
+              </Col>
             );
           }
           break;
         case "tag-list":
           columns.push(
-            <CapColumn key={`input-${val.id}`} span={10} offset={val.offset}>
+            <Col key={`input-${val.id}`} span={10} offset={val.offset}>
               <TagList
                 key={`input-${val.id}`}
                 moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
@@ -2300,16 +2257,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 id={val.id}
                 userLocale={this.props.userLocale}
               />
-            </CapColumn>
+            </Col>
           );
           break;
         case "tabs":
           columns.push(
-            <CapColumn key="input" span={10}>
+            <Col key="input" span={10}>
               <TagList
                 onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
               />
-            </CapColumn>
+            </Col>
           );
           break;
         case "sms-preview": {
@@ -2319,7 +2276,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           content = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`sms-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData[val.id];
           const unicodeEnabled = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`unicode-validity${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData['unicode-validity'];
           columns.push(
-            <CapColumn key="input" span={10}>
+            <Col key="input" span={10}>
               <TemplatePreview
                 channel={val.channel ? val.channel : 'SMS'}
                 content={content}
@@ -2327,7 +2284,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 unicodeEnabled={unicodeEnabled}
               >
               </TemplatePreview>
-            </CapColumn>
+            </Col>
           );
           break;
         }
@@ -2355,7 +2312,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         case "select": {
           const options = (this.state.formData[`${val.id}-options`]) ? (this.state.formData[`${val.id}-options`]) : val.options;
           columns.push(
-            <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+            <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
               <CapSelect
                 id={val.id}
                 placeholder={val.placeholder ? val.placeholder : ''}
@@ -2365,14 +2322,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 value={(this.state.formData[val.id] && this.state.formData[val.id] !== '' ? this.state.formData[val.id] : undefined)}
                 disabled={val.disabled}
               />
-            </CapColumn>
+            </Col>
           );
         }
           break;
         case "ckeditor":
 
           columns.push(
-            <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+            <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
               <CKEditor
                 id={val.id}
                 content={(this.state.formData[`${this.state.currentTab - 1}`][val.id] ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : '')}
@@ -2381,7 +2338,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 // this.callChildEvent(data, val, 'addVersion', event);
                 handleContentChange={(event) => this.callChildEvent(event, val, 'onContentChange')}
               />
-            </CapColumn>
+            </Col>
           );
           break;
         case "edmeditor": {
@@ -2401,13 +2358,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
 
           columns.push(
-            <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+            <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
               <EDMEditor
                 id={val.id}
                 getEditorInstanse={this.getEditorInstanse}
                 edmSrc={edmSrc}
               />
-            </CapColumn>
+            </Col>
           );
         }
           break;
@@ -2415,7 +2372,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           break;
       }
       row.push(
-        <CapRow>
+        <Row>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -2424,7 +2381,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return value;
             })
           }
-        </CapRow>
+        </Row>
       );
 
       fields.push(row);
@@ -2439,12 +2396,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         case "button":
           if (styling === 'semantic' && val.metaType === 'submit-button') {
             columns.push(
-              <CapColumn>
+              <Col>
                 <CapButton
-                  onClick={(data) => this.callChildEvent(data, val, val.submitAction)}>
+                  onClick={(data) => val.id === 'save-button' ? this.saveForm() : this.callChildEvent(data, val, val.submitAction)}>
                   {val.value}
                 </CapButton>
-              </CapColumn>
+              </Col>
             );
           }
           break;
@@ -2461,10 +2418,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     const cols = [];
     section.childSections.map( (childSection) => {
       const renderedChildSection = this.renderSection(childSection, childIndex);
-      cols.push(<CapColumn style={childSection.colStyle ? childSection.colStyle : {}}offset={childSection.offset} span={childSection.width}>{renderedChildSection}</CapColumn>);
+      cols.push(<Col style={childSection.colStyle ? childSection.colStyle : {}}offset={childSection.offset} span={childSection.width}>{renderedChildSection}</Col>);
       return true;
     });
-    const row = (<CapRow style={section.rowStyle ? section.rowStyle : {}}>
+    const row = (<Row style={section.rowStyle ? section.rowStyle : {}}>
       {
         _.forEach(cols, (value) => {
           if (value) {
@@ -2473,7 +2430,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           return value;
         })
       }
-    </CapRow>);
+    </Row>);
     return row;
   }
 
@@ -2494,24 +2451,21 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   renderPrimitiveElement(val, childIndex) {
     const type = val.type;
     const tabName = this.state.formData[childIndex - 1] && this.state.formData[childIndex - 1].name ? this.state.formData[childIndex - 1].name : `${val.value} ${childIndex}`;
-    const value = val.dynamicTab ? tabName : val.value;
+    let value = val.dynamicTab ? tabName : val.value;
     switch (type) {
       case "span":
         return <span id={`${val.id}${childIndex > 1 ? childIndex : ''}`}>{val.dynamicTab ? tabName : val.value}</span>;
       case "div":
-        let children = _.get(this.state, `formData[${this.state.currentTab - 1}][${val.id}]`) || value;
-        if (_.isEmpty(value) && !_.isEmpty(val.value)) {
-          children = val.value;
+        if (this.state.formData[`${this.state.currentTab - 1}`] && this.state.formData[`${this.state.currentTab - 1}`][val.id] && this.state.formData[`${this.state.currentTab - 1}`][val.id].trim() !== "") {
+          value = this.state.formData[`${this.state.currentTab - 1}`][val.id];
         }
-        const ref = _.get(this, `props.refs[${val.id}]`);
         return (<div
-          ref={ref}
           className={val.className ? val.className : ''}
           id={`${val.id}${childIndex > 1 ? childIndex : ''}`}
           onClick={(data) => this.callChildEvent(data, val, val.submitAction)}
           style={val.style ? val.style : {}}
           onInput={(e) => { e.stopPropagation(); this.callChildEvent(e.target.textContent, val, 'onChange'); }}
-        >{children}</div>);
+        >{value}</div>);
       default:
         return '';
     }
@@ -2528,6 +2482,9 @@ 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}`]) {
@@ -2557,9 +2514,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
           columns.push(
-            <CapColumn style={val.colStyle ? val.colStyle : {}} offset={val.offset} key={val.id} span={val.width}>
+            <Col style={val.colStyle ? val.colStyle : {}} offset={val.offset} key={val.id} span={val.width}>
               {this.renderPrimitiveElement(val, childIndex)}
-            </CapColumn>
+            </Col>
           );
           return true;
         }
@@ -2567,60 +2524,57 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         switch (type) {
           case "input":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-            const value = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
+
             if (styling === 'semantic') {
               columns.push(
-                <CapColumn key={val.id} span={val.width} offset={val.offset}>
+                <Col key={val.id} span={val.width}>
                   <CapInput
                     id={val.id}
-                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
-                    label={val.label}
+                    errorMessage={val.errorMessage ? val.errorMessage : ''}
                     className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
                     // fluid={val.fluid}
                     style={val.style ? val.style : {}}
                     placeholder={val.placeholder}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
-                    value={value || ""}
+                    value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     disabled={val.disabled}
                   />
-                </CapColumn>
+                </Col>
               );
             }
             break;
           case "SmsEditor":
             columns.push(
-              <CapColumn span={5} key="input">
+              <Col span={5} key="input">
                 <SmsEditor
                   id={val.id}
                   content={this.state.formData[val.id]}
                   onDataChange={(data) => this.updateFormData(data.value, val)}
                 />
-              </CapColumn>
+              </Col>
             );
             break;
           case "textarea":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-            const textValue = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id];
             if (styling === 'semantic') {
               columns.push(
-                <CapColumn key="input" span={val.width} offset={val.offset}>
-                  <TextArea
+                <Col key="input" span={val.width} offset={val.offset}>
+                  <CapTextArea
                     id={val.id}
                     placeholder={val.placeholder ? val.placeholder : ''}
                     disabled={val.disabled}
                     className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
-                    label={val.label}
+                    errorMessage={val.errorMessage ? val.errorMessage : ''}
                     autosize={val.autosize ? val.autosizeParams : false}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
                     style={val.style ? val.style : {}}
                     defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                    value={textValue || ""}
+                    value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     rows={10}
                     cols={2}
                   />
-                </CapColumn>
+                </Col>
               );
             }
             break;
@@ -2628,21 +2582,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             if (styling === 'semantic') {
               columns.push(
-                <CapColumn key="input" span={val.width} offset={val.offset}>
+                <Col key="input" span={val.width} offset={val.offset}>
                   <CapCheckbox
-                    key={val.id}
                     className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
-                    onChange={(e) => this.updateFormData(e.target.checked, val, val.submitAction)}
+                    errorMessage={val.errorMessage ? 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]}
                     style={val.style ? val.style : {}}
                     disabled={val.disabled}
-                    inductiveText={val.inductiveText}
                   >
                     {val.label}
                   </CapCheckbox>
-                </CapColumn>
+                </Col>
               );
             }
             break;
@@ -2650,10 +2602,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             if (styling === 'semantic') {
               columns.push(
-                <CapColumn key={`input-${val.id}`} span={val.width} offset={val.offset}>
+                <Col key={`input-${val.id}`} span={val.width} offset={val.offset}>
                   <CapRadio
                     className={`${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    errorMessage={val.errorMessage ? 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]}
@@ -2661,7 +2613,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   >
                     {val.label}
                   </CapRadio>
-                </CapColumn>
+                </Col>
               );
             }
             break;
@@ -2669,33 +2621,32 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             if (styling === 'semantic') {
               columns.push(
-                <CapColumn key={`input-${val.id}`} span={val.width} offset={val.offset}>
+                <Col key={`input-${val.id}`} span={val.width} offset={val.offset}>
                   <CapRadioGroup
                     key={`${val.id}-radio-group`}
-                    className={`form-builder-radio-group ${ifError ? 'error' : ''}`}
-                    errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    className={`${ifError ? 'error' : ''}`}
+                    errorMessage={val.errorMessage ? val.errorMessage : ''}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
                     style={val.style ? val.style : {}}
                     value={this.handleSetRadioValue(this.state.formData, self.state.currentTab, val)}
                     name={val.name ? val.name : `${val.id}-name`}
+                    options={val.options}
                     disabled={val.disabled}
                   >
-                    {val.options.map((option, index) => <CapRadio value={option} inductiveText={val.inductiveText && val.inductiveText[index]}>{option}</CapRadio>) }
-
                   </CapRadioGroup>
                   {/*{ifError ?*/}
                   {/*<div className="error"> {val.errorMessage}</div>*/}
                   {/*:*/}
                   {/*""*/}
                   {/*}*/}
-                </CapColumn>
+                </Col>
               );
             }
             break;
           case 'image':
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             columns.push(
-              <CapColumn key={`input-${val.id}${self.state.currentTab - 1}`} style={val.style} span={val.width} offset={val.offset}>
+              <Col key={`input-${val.id}${self.state.currentTab - 1}`} style={val.style} span={val.width} offset={val.offset}>
                 <div>
                   <div className={`image-container ${ifError ? 'error' : ''}`}>
                     {self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image ?
@@ -2706,37 +2657,21 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   </div>
                   {ifError && <span className="error">{val.errorMessage}</span>}
                 </div>
-              </CapColumn>
+              </Col>
             );
             break;
           case 'upload':
-            ifError = (this.state.checkValidation || this.props.startValidation) && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
-            const ImageComponent = (props) => (
-              <div key={`${val.id}-${this.state.currentTab}`}>
-                <div className={`image-container ${props.ifError ? 'error' : ''}`}>
-                  {self.state && !!self.state.formData[`${self.state.currentTab - 1}`].image ?
-                    <img src={self.state.formData[`${self.state.currentTab - 1}`].image} alt={props.alt} style={props.style}/>
-                    :
-                    <div style={{width: "100%", textAlign: "center"}}><span className="image-placeholder">{props.placeholder}</span></div>
-                  }
-                </div>
-              </div>
-             );
-            const WithLabel = LabelHOC(ImageComponent);
-            const {errorMessage, ...rest} = val.previewProps || {};
             columns.push(
-              <CapColumn span={val.width} offset={val.offset} style={val.style}>
-                {val.showPreview && <WithLabel key={`${val.id}-with-label`} {...rest} errorMessage={ifError && errorMessage} ifError={ifError}/>}
+              <Col span={val.width} offset={val.offset} style={val.style}>
                 <form encType="multipart/form-data" id={val.id}>
                   <input key={val.id} style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files}, val)} accept={val.supportedExtensions ? val.supportedExtensions : "image/*"} />
                   <CapButton disabled={val.disabled ? val.disabled : false} type="secondary" onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right'}}>
                     {val.label}
                   </CapButton>
                 </form>
-              </CapColumn>
-              );
+              </Col>
+            );
             break;
-
           case "table":
             columns.push(
               <CapTable dataSource={self.props.iosCtasData} loading={self.props.iosCtasData ? !self.props.iosCtasData.length : true} onRowClick={(row) => this.updateFormData(row, val, "onRowClick" )} pagination={val.pagination}>
@@ -2746,7 +2681,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             break;
           case "tag-list":
             columns.push(
-              <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
+              <Col key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
                 <TagList
                   key={`input-${val.id}`}
                   moduleFilterEnabled={this.props.location && this.props.location.query && this.props.location.query.type !== 'embedded'}
@@ -2760,21 +2695,21 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   id={val.id}
                   userLocale={this.props.userLocale}
                 />
-              </CapColumn>
+              </Col>
             );
             break;
           case "button":
             if (styling === 'semantic' && val.metaType === 'submit-button') {
               columns.push(
-                <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
+                <Col style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
                   <CapButton
                     type={val.buttonType}
                     icon={val.icon}
                     disabled={val.disabled ? val.disabled : false}
-                    onClick={(data) => this.callChildEvent(data, val, val.submitAction)}>
+                    onClick={(data) => val.id === 'save-button' ? this.saveForm() : this.callChildEvent(data, val, val.submitAction)}>
                     {val.value}
                   </CapButton>
-                </CapColumn>
+                </Col>
               );
             }
             break;
@@ -2787,7 +2722,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             content = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`sms-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData[val.id];
             const unicodeEnabled = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`unicode-validity${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData['unicode-validity'];
             columns.push(
-              <CapColumn key="input" span={23} offset={1}>
+              <Col key="input" span={23} offset={1}>
                 <TemplatePreview
                   key={val.id}
                   style={val.customStyling ? val.customStyling : {}}
@@ -2797,7 +2732,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   unicodeEnabled={unicodeEnabled}
                 >
                 </TemplatePreview>
-              </CapColumn>
+              </Col>
             );
           }
             break;
@@ -2811,7 +2746,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
 
             columns.push(
-              <CapColumn key="input" span={23} offset={1}>
+              <Col key="input" span={23} offset={1}>
                 <TemplatePreview
                   key={val.id}
                   style={val.customStyling ? val.customStyling : {}}
@@ -2819,7 +2754,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   content={content}
                 >
                 </TemplatePreview>
-              </CapColumn>
+              </Col>
             );
           }
             break;
@@ -2828,7 +2763,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return true;
             }
             columns.push(
-              <CapColumn key="input" span={23} offset={1}>
+              <Col key="input" span={23} offset={1}>
                 <TemplatePreview
                   key={val.id}
                   device={val.device ? val.device : 'android'}
@@ -2846,7 +2781,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   }}
                 >
                 </TemplatePreview>
-              </CapColumn>
+              </Col>
             );
             break;
           case "popover":
@@ -2859,7 +2794,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return result;
             });
             columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
+              <Col style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
                 <CapPopover
                   trigger={val.trigger}
                   placement={val.placement}
@@ -2883,7 +2818,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     })
                   }
                 </CapPopover>
-              </CapColumn>
+              </Col>
             );
             break;
 
@@ -2895,7 +2830,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               }
             }
             columns.push(
-              <CapColumn
+              <Col
                 key={`icon-${val.id}`}
                 id={val.id}
                 offset={val.offset}
@@ -2905,14 +2840,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 style={val.colStyle ? val.colStyle : {}}
               >
                 <i style={val.style ? val.style : {}} className="material-icons">{val.value ? val.value : '&#xE313;'}</i>
-              </CapColumn>
+              </Col>
             );
             break;
           case "select": {
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             const options = (this.state.formData[`${val.id}-options`]) ? (this.state.formData[`${val.id}-options`]) : val.options;
             columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
+              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
                 <CapSelect
                   id={val.id}
                   options={options}
@@ -2925,7 +2860,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 {ifError && val.errorMessage &&
                   <span className={'error'}>{val.errorMessage}</span>
                 }
-              </CapColumn>
+              </Col>
             );
           }
             break;
@@ -2951,15 +2886,15 @@ 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 = "";
               }
               columns.push(
-                <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+                <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
                   <CKEditor
                     id={val.id}
                     content={content}
@@ -2967,7 +2902,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     getEditorInstanse={(evt, id) => val.injectedEvents.getEditorInstanse.call(this, evt, id)}
                     handleContentChange={(event) => this.callChildEvent(event, val, 'onContentChange')}
                   />
-                </CapColumn>
+                </Col>
               );
             }
           }
@@ -2999,13 +2934,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
             columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
                 <EDMEditor
                   id={val.id}
                   getEditorInstanse={this.getEditorInstanse}
                   edmSrc={edmSrc}
                 />
-              </CapColumn>
+              </Col>
             );
           }
             break;
@@ -3014,7 +2949,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return true;
             }
             columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
                 <CustomPopOver
                   id={val.id}
                   popOverList={this.props.supportedLanguages}
@@ -3023,7 +2958,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   visible={this.state.customPopoverVisible}
                   onVisibleChange={this.handleCustomPopoverVisibleChange}
                 />
-              </CapColumn>
+              </Col>
             );
           }
             break;
@@ -3033,7 +2968,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         return true;
       });
       const row = (
-        <CapRow style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
+        <Row style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -3042,7 +2977,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return value;
             })
           }
-        </CapRow>
+        </Row>
       );
       fields.push(row);
     });
@@ -3056,7 +2991,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           case "button":
             if (styling === 'semantic' && val.metaType === 'submit-button') {
               columns.push(
-                <CapColumn span={3}>
+                <Col span={3}>
                   <CapButton
                     type={val.buttonType}
                     icon={val.icon}
@@ -3064,7 +2999,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     onClick={(data) => val.id === 'save-button' ? this.saveForm() : this.callChildEvent(data, val, val.submitAction)}>
                     {val.value}
                   </CapButton>
-                </CapColumn>
+                </Col>
               );
             }
             break;
@@ -3073,7 +3008,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       });
       const row = (
-        <CapRow>
+        <Row>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -3082,7 +3017,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return value;
             })
           }
-        </CapRow>
+        </Row>
       );
       fields.push(row);
     });
@@ -3128,35 +3063,33 @@ 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;
           }
-          const isPaneSupported = typeof pane.isSupported === "boolean" ? pane.isSupported : true; // pane.isSupported field exists only in mpush schema, in other channels it is not
-          if (isPaneSupported) {
-            renderedPanes.push(
-              <TabPane
-                forceRender
-                tab={
-                  <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
-                    {
-                    _.forEach(renderedContentSections, (value) => {
-                      if (value) {
-                        return value;
-                      }
-                      return value;
-                    })
-                    }
-                  </div>
-                }
-                key={paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index}>
-                {
-                  _.forEach(renderedSections, (value) => {
+
+          renderedPanes.push(
+            <TabPane
+              forceRender
+              tab={
+                <div className="form-tab-header" onInput={(e) => e.stopPropagation()}>
+                  {
+                  _.forEach(renderedContentSections, (value) => {
                     if (value) {
                       return value;
                     }
                     return value;
                   })
-                }
-              </TabPane>);
-            paneIndex += 1;
-          }
+                  }
+                </div>
+              }
+              key={paneTabKey && paneTabKey !== '' ? `${paneTabKey}` : index}>
+              {
+                _.forEach(renderedSections, (value) => {
+                  if (value) {
+                    return value;
+                  }
+                  return value;
+                })
+              }
+            </TabPane>);
+          paneIndex += 1;
         });
         extraActionSections = container.tabBarExtraContent && container.tabBarExtraContent.sections ? container.tabBarExtraContent.sections.map((section) => {
           result = this.renderSection(section);
@@ -3168,6 +3101,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
         return (
           <Tabs
+            className={`cap-tabs-${container.id}`}
             activeKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
             defaultActiveKey={activeTabKey && activeTabKey !== '' ? `${activeTabKey}` : '1'}
             onChange={(data, e) => { this.callChildEvent(data, container, 'onTabChange', e); }}
@@ -3242,7 +3176,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
     return (
-      <CapRow>
+      <Row>
         {
           this.props.schema ? this.renderForm() : ''
         }
@@ -3255,7 +3189,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           loadingText={"Loading EDM Templates"}
           isLoading={this.props.getCmsTemplatesInProgress}
         />
-      </CapRow>
+      </Row>
     );
   }
 }