@capillarytech/creatives-library 2.0.44 → 2.0.45

package/components/FormBuilder/index.js

@@ -10,8 +10,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Label } from 'semantic-ui-react';
 import _ from 'lodash';
-import { Tabs, Row, Col, Table, Modal} from 'antd';
-import { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapColumn, CapNotification} from '@capillarytech/cap-ui-library';
+import { Tabs, Table, Modal} from 'antd';
+import { CapButton, CapInput, CapPopover, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification} from '@capillarytech/cap-ui-library';
 import TemplatePreview from '../../components/TemplatePreview';
 import TagList from '../../containers/TagList';
 import SmsEditor from '../SmsEditor';
@@ -79,6 +79,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.initializeEditErrorData = this.initializeEditErrorData.bind(this);
     this.checkIfSupportedTag = this.checkIfSupportedTag.bind(this);
     this.transformInjectedTags = this.transformInjectedTags.bind(this);
+    this.handleSetRadioValue = this.handleSetRadioValue.bind(this);
     this.formElements = [];
   }
 
@@ -298,8 +299,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return modal;
   };
 
-  openNotificationWithIcon = (type, message) => {
+  openNotificationWithIcon = (type, message, key) => {
     CapNotification.error({
+      key: key || type + message,
       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.',
     });
@@ -848,7 +850,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
           if (errorString !== "") {
-            this.openNotificationWithIcon('error', errorString);
+            this.openNotificationWithIcon('error', errorString, "email-validation-error");
           }
           _.forEach(errorData[index], (versionData, key) => {
             if (data.selectedLanguages.indexOf(key) === -1) {
@@ -947,7 +949,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   skipTags(tag) {
-    const regexGroups = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d","Link_to_[a-zA-z]"];
+    const regexGroups = ["dynamic_expiry_date_after_\\d+_days.FORMAT_\\d", "unsubscribe\\(#[a-zA-Z\\d]{6}\\)","Link_to_[a-zA-z]","SURVEY.*.TOKEN"];
 
     //const regexGroups = [];
     let skipped = false;
@@ -1580,9 +1582,10 @@ 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 {
+    // } else {
+    if (this.state.formData[`${this.state.currentTab - 1}`].activeTab !== this.props.baseLanguage) {
       const formData = _.cloneDeep(this.state.formData);
       const currentTab = `${this.state.currentTab - 1}`;
       const currentLang = formData[`${this.state.currentTab - 1}`].activeTab;
@@ -1953,10 +1956,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       // }
       return;
     }
-
     val.injectedEvents[event].call(this.props.parent, data);
   }
   openFileDialog = () => {
+    console.log("filedialog: ");
     document.getElementById("fileName").click();
   };
   handleOk = (ev) => {
@@ -2011,7 +2014,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.setState({showModal: true});
   };
 
+  handleSetRadioValue = (formData, currentTab, val) => {
+    if (formData[currentTab - 1] && formData[currentTab - 1][val.id] && formData[currentTab - 1][val.id] !== "") {
+      return formData[currentTab - 1][val.id];
+    } else if (formData[val.id]) {
+      return formData[val.id];
+    }
+    return val.value;
+  }
   uploadImages = (e, {files}, val) => {
+    console.log("uploadImages: ", e, {files}, val);
     e.preventDefault();
     const _URL = window.URL || window.webkitURL;
     const file = files[0];
@@ -2066,7 +2078,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 = (
@@ -2120,9 +2132,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
       //
       columns.push(
-        <Col key="label" span={4}>
+        <CapColumn key="label" span={4}>
           <Label style={val.labelStyle ? val.labelStyle : {}}>{val.label}</Label>
-        </Col>
+        </CapColumn>
       );
       let ifError = false;
       const isVersionEnable = (this.state.usingTabContainer && !val.standalone);
@@ -2134,19 +2146,21 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         }
         columns.push(
-          <Col key={val.id} span={val.width}>
+          <CapColumn key={val.id} span={val.width}>
             {this.renderPrimitiveElement(val, childIndex)}
-          </Col>
+          </CapColumn>
         );
         return true;
       }
+      let content = "";
+      let charList = {};
       switch (type) {
         case "input":
           if (styling === 'semantic') {
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
 
             columns.push(
-              <Col key={val.id} span={val.width}>
+              <CapColumn key={val.id} span={val.width}>
                 <CapInput
                   id={val.id}
                   errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
@@ -2159,26 +2173,26 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   value={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                   disabled={val.disabled}
                 />
-              </Col>
+              </CapColumn>
             );
           }
           break;
         case "SmsEditor":
           columns.push(
-            <Col span={5} key="input">
+            <CapColumn span={5} key="input">
               <SmsEditor
                 id={val.id}
                 content={this.state.formData[val.id]}
                 onDataChange={(data) => this.updateFormData(data.value, val)}
               />
-            </Col>
+            </CapColumn>
           );
           break;
         case "textarea":
           ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
           if (styling === 'semantic') {
             columns.push(
-              <Col key="input" span={val.width}>
+              <CapColumn key="input" span={val.width}>
                 <TextArea
                   id={val.id}
                   className={`${ifError ? 'error' : ''}`}
@@ -2192,13 +2206,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   disabled={val.disabled}
                   cols={20}
                 />
-              </Col>
+              </CapColumn>
             );
           }
           break;
         case "contentPreview":
-          const content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
-          const charList = updateCharCount(content).char_list;
+          content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
+          charList = updateCharCount(content).char_list;
           columns.push(<CapColumn id={val.id} className={"preview-chars"} span={val.width}>
             {charList.map((char) => char)}
           </CapColumn>);
@@ -2207,7 +2221,7 @@ 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(
-              <Col key="input" span={val.width} offset={val.offset}>
+              <CapColumn key="input" span={val.width} offset={val.offset}>
                 <CapCheckbox
                   className={`${ifError ? 'error' : ''}`}
                   errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
@@ -2217,13 +2231,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   defaultChecked={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                   disabled={val.disabled}
                 />
-              </Col>
+              </CapColumn>
             );
           }
           break;
         case "tag-list":
           columns.push(
-            <Col key={`input-${val.id}`} span={10} offset={val.offset}>
+            <CapColumn 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'}
@@ -2237,27 +2251,26 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 id={val.id}
                 userLocale={this.props.userLocale}
               />
-            </Col>
+            </CapColumn>
           );
           break;
         case "tabs":
           columns.push(
-            <Col key="input" span={10}>
+            <CapColumn key="input" span={10}>
               <TagList
                 onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
               />
-            </Col>
+            </CapColumn>
           );
           break;
         case "sms-preview": {
-          let content = "";
           if (this.state.usingTabContainer && !this.state.formData[`${this.state.currentTab - 1}`]) {
             return true;
           }
           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(
-            <Col key="input" span={10}>
+            <CapColumn key="input" span={10}>
               <TemplatePreview
                 channel={val.channel ? val.channel : 'SMS'}
                 content={content}
@@ -2265,7 +2278,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 unicodeEnabled={unicodeEnabled}
               >
               </TemplatePreview>
-            </Col>
+            </CapColumn>
           );
           break;
         }
@@ -2293,7 +2306,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(
-            <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+            <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
               <CapSelect
                 id={val.id}
                 placeholder={val.placeholder ? val.placeholder : ''}
@@ -2303,14 +2316,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}
               />
-            </Col>
+            </CapColumn>
           );
         }
           break;
         case "ckeditor":
 
           columns.push(
-            <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+            <CapColumn 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] : '')}
@@ -2319,7 +2332,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 // this.callChildEvent(data, val, 'addVersion', event);
                 handleContentChange={(event) => this.callChildEvent(event, val, 'onContentChange')}
               />
-            </Col>
+            </CapColumn>
           );
           break;
         case "edmeditor": {
@@ -2339,13 +2352,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
 
           columns.push(
-            <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+            <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
               <EDMEditor
                 id={val.id}
                 getEditorInstanse={this.getEditorInstanse}
                 edmSrc={edmSrc}
               />
-            </Col>
+            </CapColumn>
           );
         }
           break;
@@ -2353,7 +2366,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           break;
       }
       row.push(
-        <Row>
+        <CapRow>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -2362,7 +2375,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return value;
             })
           }
-        </Row>
+        </CapRow>
       );
 
       fields.push(row);
@@ -2377,12 +2390,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         case "button":
           if (styling === 'semantic' && val.metaType === 'submit-button') {
             columns.push(
-              <Col>
+              <CapColumn>
                 <CapButton
                   onClick={(data) => val.id === 'save-button' ? this.saveForm() : this.callChildEvent(data, val, val.submitAction)}>
                   {val.value}
                 </CapButton>
-              </Col>
+              </CapColumn>
             );
           }
           break;
@@ -2399,10 +2412,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(<Col style={childSection.colStyle ? childSection.colStyle : {}}offset={childSection.offset} span={childSection.width}>{renderedChildSection}</Col>);
+      cols.push(<CapColumn style={childSection.colStyle ? childSection.colStyle : {}}offset={childSection.offset} span={childSection.width}>{renderedChildSection}</CapColumn>);
       return true;
     });
-    const row = (<Row style={section.rowStyle ? section.rowStyle : {}}>
+    const row = (<CapRow style={section.rowStyle ? section.rowStyle : {}}>
       {
         _.forEach(cols, (value) => {
           if (value) {
@@ -2411,7 +2424,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           return value;
         })
       }
-    </Row>);
+    </CapRow>);
     return row;
   }
 
@@ -2492,9 +2505,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
           columns.push(
-            <Col style={val.colStyle ? val.colStyle : {}} offset={val.offset} key={val.id} span={val.width}>
+            <CapColumn style={val.colStyle ? val.colStyle : {}} offset={val.offset} key={val.id} span={val.width}>
               {this.renderPrimitiveElement(val, childIndex)}
-            </Col>
+            </CapColumn>
           );
           return true;
         }
@@ -2505,7 +2518,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
             if (styling === 'semantic') {
               columns.push(
-                <Col key={val.id} span={val.width}>
+                <CapColumn key={val.id} span={val.width}>
                   <CapInput
                     id={val.id}
                     errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
@@ -2518,26 +2531,26 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
                     disabled={val.disabled}
                   />
-                </Col>
+                </CapColumn>
               );
             }
             break;
           case "SmsEditor":
             columns.push(
-              <Col span={5} key="input">
+              <CapColumn span={5} key="input">
                 <SmsEditor
                   id={val.id}
                   content={this.state.formData[val.id]}
                   onDataChange={(data) => this.updateFormData(data.value, val)}
                 />
-              </Col>
+              </CapColumn>
             );
             break;
           case "textarea":
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             if (styling === 'semantic') {
               columns.push(
-                <Col key="input" span={val.width} offset={val.offset}>
+                <CapColumn key="input" span={val.width} offset={val.offset}>
                   <TextArea
                     id={val.id}
                     placeholder={val.placeholder ? val.placeholder : ''}
@@ -2552,7 +2565,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     rows={10}
                     cols={2}
                   />
-                </Col>
+                </CapColumn>
               );
             }
             break;
@@ -2560,7 +2573,7 @@ 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(
-                <Col key="input" span={val.width} offset={val.offset}>
+                <CapColumn key="input" span={val.width} offset={val.offset}>
                   <CapCheckbox
                     className={`${ifError ? 'error' : ''}`}
                     errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
@@ -2572,7 +2585,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   >
                     {val.label}
                   </CapCheckbox>
-                </Col>
+                </CapColumn>
               );
             }
             break;
@@ -2580,7 +2593,7 @@ 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(
-                <Col key={`input-${val.id}`} span={val.width} offset={val.offset}>
+                <CapColumn key={`input-${val.id}`} span={val.width} offset={val.offset}>
                   <CapRadio
                     className={`${ifError ? 'error' : ''}`}
                     errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
@@ -2591,7 +2604,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   >
                     {val.label}
                   </CapRadio>
-                </Col>
+                </CapColumn>
               );
             }
             break;
@@ -2599,14 +2612,14 @@ 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(
-                <Col key={`input-${val.id}`} span={val.width} offset={val.offset}>
+                <CapColumn key={`input-${val.id}`} span={val.width} offset={val.offset}>
                   <CapRadioGroup
                     key={`${val.id}-radio-group`}
                     className={`${ifError ? 'error' : ''}`}
                     errorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
                     onChange={(e) => this.updateFormData(e.target.value, val)}
                     style={val.style ? val.style : {}}
-                    value={this.state.formData[`${self.state.currentTab - 1}`] && this.state.formData[`${self.state.currentTab - 1}`][val.id] !== "" ? this.state.formData[`${self.state.currentTab - 1}`][val.id] : val.value}
+                    value={this.handleSetRadioValue(this.state.formData, self.state.currentTab, val)}
                     name={val.name ? val.name : `${val.id}-name`}
                     options={val.options}
                     disabled={val.disabled}
@@ -2617,14 +2630,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   {/*:*/}
                   {/*""*/}
                   {/*}*/}
-                </Col>
+                </CapColumn>
               );
             }
             break;
           case 'image':
             ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
             columns.push(
-              <Col key={`input-${val.id}${self.state.currentTab - 1}`} style={val.style} span={val.width} offset={val.offset}>
+              <CapColumn 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 ?
@@ -2635,19 +2648,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   </div>
                   {ifError && <span className="error">{val.errorMessage}</span>}
                 </div>
-              </Col>
+              </CapColumn>
             );
             break;
           case 'upload':
             columns.push(
-              <Col span={val.width} offset={val.offset} style={val.style}>
+              <CapColumn 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="image/*" />
-                  <CapButton type="secondary" onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+                  <CapButton disabled={val.disabled ? val.disabled : false} type="secondary" onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
                     {val.label}
                   </CapButton>
                 </form>
-              </Col>
+              </CapColumn>
             );
             break;
           case "table":
@@ -2659,7 +2672,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             break;
           case "tag-list":
             columns.push(
-              <Col key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
+              <CapColumn 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'}
@@ -2673,13 +2686,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   id={val.id}
                   userLocale={this.props.userLocale}
                 />
-              </Col>
+              </CapColumn>
             );
             break;
           case "button":
             if (styling === 'semantic' && val.metaType === 'submit-button') {
               columns.push(
-                <Col style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
+                <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
                   <CapButton
                     type={val.buttonType}
                     icon={val.icon}
@@ -2687,7 +2700,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>
-                </Col>
+                </CapColumn>
               );
             }
             break;
@@ -2700,7 +2713,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(
-              <Col key="input" span={23} offset={1}>
+              <CapColumn key="input" span={23} offset={1}>
                 <TemplatePreview
                   key={val.id}
                   style={val.customStyling ? val.customStyling : {}}
@@ -2710,7 +2723,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   unicodeEnabled={unicodeEnabled}
                 >
                 </TemplatePreview>
-              </Col>
+              </CapColumn>
             );
           }
             break;
@@ -2724,7 +2737,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
 
             columns.push(
-              <Col key="input" span={23} offset={1}>
+              <CapColumn key="input" span={23} offset={1}>
                 <TemplatePreview
                   key={val.id}
                   style={val.customStyling ? val.customStyling : {}}
@@ -2732,7 +2745,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   content={content}
                 >
                 </TemplatePreview>
-              </Col>
+              </CapColumn>
             );
           }
             break;
@@ -2741,7 +2754,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return true;
             }
             columns.push(
-              <Col key="input" span={23} offset={1}>
+              <CapColumn key="input" span={23} offset={1}>
                 <TemplatePreview
                   key={val.id}
                   device={val.device ? val.device : 'android'}
@@ -2759,7 +2772,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   }}
                 >
                 </TemplatePreview>
-              </Col>
+              </CapColumn>
             );
             break;
           case "popover":
@@ -2772,7 +2785,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return result;
             });
             columns.push(
-              <Col style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} offset={val.offset}>
                 <CapPopover
                   trigger={val.trigger}
                   placement={val.placement}
@@ -2796,7 +2809,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     })
                   }
                 </CapPopover>
-              </Col>
+              </CapColumn>
             );
             break;
 
@@ -2808,7 +2821,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               }
             }
             columns.push(
-              <Col
+              <CapColumn
                 key={`icon-${val.id}`}
                 id={val.id}
                 offset={val.offset}
@@ -2818,14 +2831,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>
-              </Col>
+              </CapColumn>
             );
             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(
-              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
                 <CapSelect
                   id={val.id}
                   options={options}
@@ -2838,7 +2851,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 {ifError && val.errorMessage &&
                   <span className={'error'}>{val.errorMessage}</span>
                 }
-              </Col>
+              </CapColumn>
             );
           }
             break;
@@ -2858,7 +2871,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               // content = "";
             }
             columns.push(
-              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
                 <CKEditor
                   id={val.id}
                   content={content}
@@ -2866,7 +2879,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')}
                 />
-              </Col>
+              </CapColumn>
             );
           }
             break;
@@ -2897,13 +2910,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
             columns.push(
-              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
                 <EDMEditor
                   id={val.id}
                   getEditorInstanse={this.getEditorInstanse}
                   edmSrc={edmSrc}
                 />
-              </Col>
+              </CapColumn>
             );
           }
             break;
@@ -2912,7 +2925,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return true;
             }
             columns.push(
-              <Col style={val.colStyle ? val.colStyle : {}} span={val.width}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
                 <CustomPopOver
                   id={val.id}
                   popOverList={this.props.supportedLanguages}
@@ -2921,7 +2934,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   visible={this.state.customPopoverVisible}
                   onVisibleChange={this.handleCustomPopoverVisibleChange}
                 />
-              </Col>
+              </CapColumn>
             );
           }
             break;
@@ -2931,7 +2944,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         return true;
       });
       const row = (
-        <Row style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
+        <CapRow style={field.rowStyle ? field.rowStyle : {}} className={field.rowClassName ? field.rowClassName : ''}>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -2940,7 +2953,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return value;
             })
           }
-        </Row>
+        </CapRow>
       );
       fields.push(row);
     });
@@ -2954,7 +2967,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           case "button":
             if (styling === 'semantic' && val.metaType === 'submit-button') {
               columns.push(
-                <Col span={3}>
+                <CapColumn span={3}>
                   <CapButton
                     type={val.buttonType}
                     icon={val.icon}
@@ -2962,7 +2975,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>
-                </Col>
+                </CapColumn>
               );
             }
             break;
@@ -2971,7 +2984,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       });
       const row = (
-        <Row>
+        <CapRow>
           {
             _.forEach(columns, (value) => {
               if (value) {
@@ -2980,7 +2993,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return value;
             })
           }
-        </Row>
+        </CapRow>
       );
       fields.push(row);
     });
@@ -3139,7 +3152,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
 
     return (
-      <Row>
+      <CapRow>
         {
           this.props.schema ? this.renderForm() : ''
         }
@@ -3152,7 +3165,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           loadingText={"Loading EDM Templates"}
           isLoading={this.props.getCmsTemplatesInProgress}
         />
-      </Row>
+      </CapRow>
     );
   }
 }