@capillarytech/creatives-library 0.0.3 → 0.0.5

package/components/CardGrid/index.js

@@ -27,7 +27,7 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
     return (
       <div className={this.props.className}>
         <div style={{ marginBottom: '16px' }}>{this.props.filterContent}</div>
-        {this.props.listItem && this.props.listItem.length > 0 && <div className={this.props.enablePagination ? 'pagination-container' : ''}>
+        <div className={this.props.enablePagination ? 'pagination-container' : ''}>
           <Row gutter={this.props.gutterSize}>
             { this.props.listItem ? this.props.listItem.map( (item) => (
               <Col style={{ width: `${100 / this.props.colNumber}%`, paddingBottom: '16px'}} key={item.id} span={parseInt(24 / this.props.colNumber, 10)}>
@@ -35,7 +35,7 @@ class CardGrid extends React.Component { // eslint-disable-line react/prefer-sta
               </Col>
             )) : ''}
           </Row>
-        </div>}
+        </div>
       </div>
     );
   }

package/components/Ckeditor/index.js

@@ -77,6 +77,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
       },
       content: "",
       editorInstance: undefined,
+      setInitData: false,
     };
 
     this.delayTimer = 0;
@@ -86,10 +87,16 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
 
   componentWillMount() {
     let content = '';
+    this.id = this.props.id;
     if (this.props.content !== '') {
       content = this.props.content;
+      content = content.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, "\"");
     }
-    this.setState({content});
+    this.setState({content}, () => {
+      if (this.editorInstance) {
+        this.editorInstance.setData(content);
+      }
+    });
   }
 
   //load ckeditor script as soon as component mounts if not already loaded
@@ -98,22 +105,12 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
   }
 
   componentWillReceiveProps(nextProps) {
+    this.id = this.props.id;
     if (this.editorInstance && this.editorInstance.status === "ready") {
+      // setTimeout(() => {
+      //   this.editorInstance.name = this.id;
+      // }, 5000);
       console.log('nextProps CKEditor', nextProps, this.state.content, this.props.id);
-      // if (!_.isEqual(nextProps.content, this.state.content)) {
-      if (nextProps.content !== this.state.content) {
-        let html = nextProps.content;
-        if (html && html !== "") {
-          console.log('html ckeditor', html);
-          html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/\\&quot;/g, "\"");
-        }
-        console.log("New content", nextProps.content, this.state.content, html);
-        this.setState({content: html}, () => {
-          this.editorInstance.setData(html);
-          // this.editorInstance.insertHtml(html);
-          // this.editorInstance.content = html;
-        });
-      }
     }
   }
 
@@ -135,7 +132,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
 
     let html = this.props.content;
     html = html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"");
-    console.log("ckeditor loading 1", this.node);
+    console.log("ckeditor loading 1", this.node, html);
     this.editorInstance = window.CKEDITOR.appendTo(
       this.node,
       this.state.config,
@@ -144,8 +141,9 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
     console.log('2');
 
     if (this.props.getEditorInstanse) {
-      this.props.getEditorInstanse(this.editorInstance);
+      this.props.getEditorInstanse(this.editorInstance, this.props.id);
     }
+    //this.editorInstance.name = this.id;
 
     //Register listener for custom events if any
     this.editorInstance.on('change', this.handleContentChange);
@@ -160,6 +158,10 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
   }
 
   handleContentChange = (evt) => {
+    // this.setState({content: this.editorInstance.getData()}, () => {
+    //   this.props.handleContentChange(evt);
+    //   // evt.setData(this.editorInstance.getData());
+    // });
     this.delay(() => {
       this.setState({content: this.editorInstance.getData()}, () => {
         this.props.handleContentChange(evt);
@@ -168,6 +170,7 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
   };
 
   render() {
+    console.log('ckeditor loading render', this.props);
     return (
       <div id={this.props.id} style={{borderRight: "1px solid #000 !important"}}>
         <div className={this.props.activeClass} ref={(node) => (this.node = node)}/>

package/components/CustomPopOver/index.js

@@ -35,7 +35,6 @@ class CustomPopOver extends React.Component { // eslint-disable-line react/prefe
   }
 
   render() {
-    console.log('Test Custom popover', this.props.popOverList.length, this.props.excludeList.length);
     return (
       <div>
         <CapPopover
@@ -43,6 +42,8 @@ class CustomPopOver extends React.Component { // eslint-disable-line react/prefe
           className={this.props.className}
           trigger={this.props.trigger}
           placement={this.props.placement}
+          visible={this.props.visible}
+          onVisibleChange={this.props.onVisibleChange}
           style={{height: '100%'}}
           content={
             this.renderPopoverContent()
@@ -71,6 +72,8 @@ CustomPopOver.propTypes = {
   excludeList: PropTypes.array,
   trigger: PropTypes.string,
   placement: PropTypes.string,
+  visible: PropTypes.bool,
+  onVisibleChange: PropTypes.func,
   handlePopOverClick: PropTypes.func,
 };
 

package/components/FormBuilder/index.js

@@ -46,6 +46,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       currentEvent: {},
       currentEventData: {},
       popoverVisible: false,
+      customPopoverVisible: false,
     };
     this.renderForm = this.renderForm.bind(this);
     this.updateFormData = this.updateFormData.bind(this);
@@ -95,7 +96,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log('nextprops', nextProps, this.state.formData);
+    console.log('outgoing nextprops', nextProps, this.state.formData);
     const type = this.props.location.query.type;
     if (this.state.usingTabContainer && nextProps.tabCount !== this.props.tabCount) {
       this.setState({tabCount: nextProps.tabCount});
@@ -163,16 +164,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       ( !this.state.usingTabContainer || (this.state.usingTabContainer && nextProps.tabKey !== ''))
       && !_.isEqual(nextProps.formData, this.state.formData) &&
       !_.isEqual(nextProps.formData, this.props.formData)) {
-      console.log('hahaha', nextProps.tabKey);
+      console.log('outgoing hahaha', nextProps.tabKey);
       this.setState({formData: nextProps.formData, tabKey: nextProps.tabKey}, () => {
         this.validateForm();
       });
       //this.resetTabKeys(nextProps.formData, nextProps.tabCount);
     } else if ((_.isEmpty(this.props.formData) || !this.props.formData) && _.isEmpty(this.state.formData)) {
-      console.log('init when empty');
+      console.log('outgoing init when empty');
       this.initialiseForm(nextProps.schema, true);
     } else if (_.isEmpty(this.props.formData) && !_.isEmpty(nextProps.formData)) {
-      console.log('clean form data');
+      console.log('outgoing clean form data');
       this.setState({formData: nextProps.formData});
     }
 
@@ -186,12 +187,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     }
 
     if (!_.isEmpty(nextProps.formData) && !_.isEqual(this.state.formData, nextProps.formData)) {
+      console.log('outgoing always', nextProps.formData);
       if (nextProps.isNewVersionFlow) {
+        console.log('outgoing new flow');
         const tabKey = (this.state.tabKey !== nextProps.formData[nextProps.currentTab - 1].tabKey) ? nextProps.formData[nextProps.currentTab - 1].tabKey : this.state.tabKey;
-        console.log('tab key form builder', this.state.tabKey, nextProps.formData[nextProps.currentTab - 1].tabKey, nextProps.formData, this.state.formData);
+        console.log('outgoing tab key form builder', this.state.tabKey, nextProps.formData[nextProps.currentTab - 1].tabKey, nextProps.formData, this.state.formData);
         this.setState({tabKey});
       }
       this.setState({formData: nextProps.formData, currentLangTab}, () => {
+        if (nextProps.isNewVersionFlow && !this.state.formData[this.state.currentTab - 1][this.state.formData[this.state.currentTab - 1].activeTab].tabKey) {
+          console.log('outgoing have to reset tab keys');
+          this.resetTabKeys(nextProps.formData, nextProps.tabCount, false, true);
+        }
         if (type === 'embedded') {
           this.validateForm();
         }
@@ -201,15 +208,22 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       });
     }
 
-    console.log('Next prop schema ', nextProps.schema);
+    console.log('outgoing Next prop schema ', nextProps.schema);
     if (!_.isEqual(nextProps.schema, this.props.schema)) {
-      console.log('Reinitializing form ', nextProps.schema, this.props.schema);
+      console.log('outgoing Reinitializing form ', nextProps.schema, this.props.schema);
       this.setState({ isFormValid: (this.props.isEdit ? this.props.isEdit : true) }, () => {
+        console.log('outgoing set validity');
         if (!this.props.isEdit || (this.props.isEdit && !_.isEmpty(nextProps.formData))) {
+          console.log('outgoing 1', this.state.formData, nextProps.formData);
           let resetTabKeys = (this.state.formData.tabKey === undefined);
           if ((this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === 'MOBILEPUSH')) {
             resetTabKeys = false;
+            console.log('outgoing 2');
           }
+          if (this.props.isNewVersionFlow) {
+            resetTabKeys = false;
+          }
+          console.log('outgoing 3', resetTabKeys);
           this.initialiseForm(nextProps.schema, false, resetTabKeys);
           this.validateForm();
         }
@@ -312,17 +326,46 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.setState({ popoverVisible });
   };
 
-  resetTabKeys(form, count, changeDefaultTab) {
+  handleCustomPopoverVisibleChange = (customPopoverVisible) => {
+    this.setState({ customPopoverVisible });
+  };
+
+  resetTabKeys(form, count, changeDefaultTab, setFormTabKey) {
     const tabCount = count || this.state.tabCount;
+    console.log('outgoing reset', form, count, changeDefaultTab);
     console.log('incoming reset', form, tabCount);
     const formData = _.cloneDeep(form);
     let baseIndex = 0;
     for (let idx = 0; idx < tabCount; idx += 1) {
       if (this.props.isNewVersionFlow && formData[idx].selectedLanguages.length > 0) {
         for (let langIndex = 0; langIndex < formData[idx].selectedLanguages.length; langIndex += 1 ) {
+          const id = _.uniqueId();
           if (formData[idx][formData[idx].selectedLanguages[langIndex]]) {
             if (!formData[idx][formData[idx].selectedLanguages[langIndex]].tabKey) {
-              formData[idx][formData[idx].selectedLanguages[langIndex]].tabKey = _.uniqueId();
+              formData[idx][formData[idx].selectedLanguages[langIndex]].tabKey = id;
+            }
+            if (formData[idx].base) {
+              formData.base[formData.base.selectedLanguages[langIndex]].tabKey = id;
+            }
+          }
+        }
+        if (setFormTabKey) {
+          if (!formData[idx].activeTab) {
+            const baseLanguage = this.props.baseLanguage;
+            console.log('outgoing reset do not have active tab');
+            formData[idx].tabKey = formData[idx][baseLanguage].tabKey;
+          } else {
+            console.log('outgoing reset have active tab');
+            formData[idx].tabKey = formData[idx][formData[idx].activeTab].tabKey;
+          }
+          if (formData[idx].base) {
+            if (!formData.base.activeTab) {
+              console.log('outgoing reset do not have active tab base');
+              const baseLanguage = this.props.baseLanguage;
+              formData.base.tabKey = formData.base[baseLanguage].tabKey;
+            } else {
+              console.log('outgoing reset have active tab base');
+              formData.base.tabKey = formData.base[formData[idx].activeTab].tabKey;
             }
           }
         }
@@ -353,11 +396,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       console.log('setting tab key', formData.base.tabKey, this.state.tabKey);
       if (this.state.currentTab === 1 && !this.props.isNewVersionFlow) {
         this.setState({tabKey: formData.base.tabKey});
+      } else if (this.props.isNewVersionFlow && this.state.tabKey !== formData[this.state.currentTab - 1].tabKey) {
+        this.setState({tabKey: formData[this.state.currentTab - 1].tabKey});
       }
     }
+    if (setFormTabKey) {
+      console.log('outgoing reset form builder tab key', formData.base.tabKey, formData[0].tabKey, formData);
+      this.setState({tabKey: formData.base.tabKey});
+    }
     console.log('form data before adding key', formData);
+    console.log('outgoing reset final before set', formData);
     if (changeDefaultTab) {
       this.setState({formData}, () => {
+        console.log('outgoing reset set data', formData);
         this.props.onChange(formData, this.state.tabCount);
         this.validateForm();
       });
@@ -701,7 +752,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         //   isValid = false;
         // }
       }
-      if (type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' ||  currentModule.toLowerCase() === 'subscription')) {
+      if (type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline' ||  currentModule.toLowerCase() === 'library')) {
         if (this.state.formData['template-subject']  && this.state.formData['template-subject'].trim() === '') {
           errorData['template-subject'] = true;
           isValid = false;
@@ -1056,6 +1107,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   initialiseForm(schema, makeFormEmpty, resetTabKeys) {
+    console.log('outgoing init form xxx', schema, makeFormEmpty, this.state.formData, resetTabKeys);
     console.log('init form xxx', schema, makeFormEmpty, this.state.formData, resetTabKeys);
     let formData = makeFormEmpty ? {} : _.cloneDeep(this.state.formData);
     let errorData = {};
@@ -1436,14 +1488,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   updateFormData(data, val, event) {
-    console.log('updating data', data, val, event);
+    console.log('updating data', data, val, event, this.props.addLanguageType);
     const formData = _.cloneDeep(this.state.formData);
+    console.log('oform data before updating', JSON.stringify(formData));
     const tabIndex = this.state.currentTab - 1;
     let currentTab = _.cloneDeep(this.state.currentTab);
+    console.log('setting form data1', JSON.stringify(formData));
     if (this.state.usingTabContainer && !val.standalone) {
       const data1 = data;
       if (event === "addLanguage") {
         const addLanguageType = this.props.addLanguageType;
+        if (addLanguageType === '') {
+          return;
+        }
         const currentLang = formData[tabIndex].activeTab;
         let baseTab = _.cloneDeep(formData[tabIndex][currentLang]);
         let id = _.uniqueId();
@@ -1458,10 +1515,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             while (!validId) {
               validId = true;
               for (let idx = 0; idx < formData[tabIndex].selectedLanguages.length; idx += 1) {
-                if (!formData[idx]) {
+                if (!formData[tabIndex]) {
                   continue;
                 }
-                if (id === formData[idx].tabKey) {
+                console.log('comparing tab keys', id, formData, formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey);
+                if (id === formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey) {
                   validId = false;
                 }
               }
@@ -1492,7 +1550,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 if (!formData[idx]) {
                   continue;
                 }
-                if (id === formData[idx].tabKey) {
+                if (id === formData[tabIndex][formData[tabIndex].selectedLanguages[idx]].tabKey) {
                   validId = false;
                 }
               }
@@ -1508,6 +1566,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             formData[tabIndex].activeTab = data.iso_code;
             formData[tabIndex].tabKey = baseTab.tabKey;
             break;
+          case '':
+            return;
           default:
             break;
         }
@@ -1516,11 +1576,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           that.setState({tabKey: baseTab.tabKey});
         }, 0);
       }
+      console.log('setting form data2', JSON.stringify(formData));
       if (!this.props.isNewVersionFlow) {
         formData[tabIndex][val.id] = data1;
-      } else if (event !== "addLanguage") {
+      } else if (this.props.isNewVersionFlow && event !== "addLanguage" && event !== "onContentChange") {
         formData[tabIndex][this.props.baseLanguage][val.id] = data1;
       }
+      console.log('setting form data3', JSON.stringify(formData));
       if (formData[tabIndex].base) {
         if (!this.props.isNewVersionFlow) {
           formData.base[val.id] = data1;
@@ -1531,9 +1593,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           formData.base.selectedLanguages = formData[tabIndex].selectedLanguages;
         }
       }
+      console.log('setting form data4', JSON.stringify(formData));
     } else {
       formData[val.id] = data;
     }
+    console.log('setting form data5', JSON.stringify(formData));
     if (this.props.isNewVersionFlow) {
       console.log('Version Select ', data, val, event);
       if (event === 'onSelect' && data === 'New Version') {
@@ -1547,6 +1611,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           val.injectedEvents[event].call(this, this.state.formData['template-version-options'][currentTab - 1].key, formData, val);
         });
       }
+      console.log('setting form data6', JSON.stringify(formData));
       if (event === 'onContentChange') {
         console.log('onContentChange ', data, val, event, data.editor.getData());
       //  formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = data.editor.getData();
@@ -1555,6 +1620,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       //}
       }
     }
+    console.log('setting form data7', JSON.stringify(formData));
     console.log('setting form data', formData);
     this.setState({formData}, () => {
       this.validateForm();
@@ -1742,6 +1808,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       if (!this.allowAddSecondaryCta(val)) {
         return;
       }
+    } else if (event === "onContentChange") {
+      val.injectedEvents[event].call(this.props.parent, data, val.id);
     } else if (event === 'deleteLanguage') {
       this.setState({currentEvent: val.injectedEvents[event], currentEventData: data }, () => {
         this.props.setModalContent('delete-language');
@@ -1797,14 +1865,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         value: 'ok',
       };
       this.props.iframeParent.postMessage(JSON.stringify(response), '*');
+      const isLanguageSupport = this.props.location.query.isLanguageSupport || false;
       const module = this.props.location.query.module ? this.props.location.query.module : 'default';
       this.props.router.push({
         pathname: `/${this.props.schema.channel.toLowerCase()}/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+        query: type === 'embedded' ? {type: 'embedded', module, isLanguageSupport} : {module, isLanguageSupport},
       });
     } else if (id === "email-language-delete-modal") {
       console.log('Delete languages ');
       this.deleteLanguage();
+      this.props.handleCancelModal();
       // this.setState({currentEvent: {}, currentEventData: {}});
     } else if (id === 'email-version-delete-modal') {
       this.deleteVersion(false, this.state.currentTab);
@@ -1866,11 +1936,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     } else {
       this.setState({hoveredItem: ''});
     }
-  };
+  }
 
   handleOnItemClick = (isClicked, id) => {
     this.setState({clickedItem: id});
-  };
+  }
 
   populateTemplatesList(data) {
     if (!data) {
@@ -1910,7 +1980,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   handleAddLanguageFlow(data, val, event) {
-    this.setState({currentEventData: data, currentEventVal: val, currentEvent: event}, () => {
+    this.setState({currentEventData: data, currentEventVal: val, currentEvent: event, customPopoverVisible: false}, () => {
       this.props.setModalContent('add-language', data);
     });
   }
@@ -2122,7 +2192,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 content={(this.state.formData[`${this.state.currentTab - 1}`][val.id] ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : '')}
                 events={val.events}
                 getEditorInstanse={val.getEditorInstanse}
-                handleContentChange={(event) => this.updateFormData(event, val, 'onContentChange')}
+                // this.callChildEvent(data, val, 'addVersion', event);
+                handleContentChange={(event) => this.callChildEvent(event, val, 'onContentChange')}
               />
             </Col>
           );
@@ -2271,25 +2342,25 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (val.id.match(/edmeditor/g)) {
           console.log('current language first', val.id);
         }
-        // console.log('Multi col Render 1', val.id, !val.standalone, !val.onlyDisplay, (!this.state.formData[`${this.state.currentTab - 1}`] || (!this.state.formData[`${this.state.currentTab - 1}`] && this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)), this.state.formData[`${this.state.currentTab - 1}`], this.state.currentTab);
-        // console.log('Multi col render ', val, this.state.formData, this.state.errorData, this.state.currentTab);
-        // if (!this.props.isNewVersionFlow && !val.standalone && !val.onlyDisplay && isVersionEnable && !this.state.formData[`${this.state.currentTab - 1}`]) {
-        //   return true;
-        // }
-        // if (!val.standalone && !val.onlyDisplay &&
-        //   (!this.state.formData[`${this.state.currentTab - 1}`] ||
-        //   (!this.props.isNewVersionFlow && !this.state.formData[`${this.state.currentTab - 1}`] &&
-        //   this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)) &&
-        //   (this.props.isNewVersionFlow && !this.state.formData[`${this.state.currentTab - 1}`] &&
-        //   this.state.errorData[`${this.state.currentTab - 1}`] && this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)) {
-        //   return true;
-        // }
-        // if (!val.onlyDisplay && !val.standalone &&
-        //   (!this.props.isNewVersionFlow && (!this.state.errorData[`${this.state.currentTab - 1}`] ||
-        //   (!this.state.errorData[`${this.state.currentTab - 1}`] &&
-        //   this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)))) {
-        //   return true;
-        // }
+        console.log('Multi col Render 1', val.id, !val.standalone, !val.onlyDisplay, (!this.state.formData[`${this.state.currentTab - 1}`] || (!this.state.formData[`${this.state.currentTab - 1}`] && this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)), this.state.formData[`${this.state.currentTab - 1}`], this.state.currentTab);
+        console.log('Multi col render ', val, this.state.formData, this.state.errorData, this.state.currentTab);
+        if (!this.props.isNewVersionFlow && !val.standalone && !val.onlyDisplay && isVersionEnable && !this.state.formData[`${this.state.currentTab - 1}`]) {
+          return true;
+        }
+        if (!val.standalone && !val.onlyDisplay &&
+          (!this.state.formData[`${this.state.currentTab - 1}`] ||
+          (!this.props.isNewVersionFlow && !this.state.formData[`${this.state.currentTab - 1}`] &&
+          this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)) &&
+          (this.props.isNewVersionFlow && !this.state.formData[`${this.state.currentTab - 1}`] &&
+          this.state.errorData[`${this.state.currentTab - 1}`] && this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)) {
+          return true;
+        }
+        if (!val.onlyDisplay && !val.standalone &&
+          (!this.props.isNewVersionFlow && (!this.state.errorData[`${this.state.currentTab - 1}`] ||
+          (!this.state.errorData[`${this.state.currentTab - 1}`] &&
+          this.state.errorData[`${this.state.currentTab - 1}`][val.id] === null)))) {
+          return true;
+        }
         console.log('Render 3');
         let ifError = false;
         if (val.primitive) {
@@ -2300,7 +2371,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
           columns.push(
-            <Col style={val.colStyle ? val.colStyle : {}} 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)}
             </Col>
           );
@@ -2647,8 +2718,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   id={val.id}
                   content={content}
                   events={val.events}
-                  getEditorInstanse={(evt) => val.injectedEvents.getEditorInstanse.call(this, evt)}
-                  handleContentChange={(event) => this.updateFormData(event, val, 'onContentChange')}
+                  getEditorInstanse={(evt, id) => val.injectedEvents.getEditorInstanse.call(this, evt, id)}
+                  handleContentChange={(event) => this.callChildEvent(event, val, 'onContentChange')}
                 />
               </Col>
             );
@@ -2704,6 +2775,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   popOverList={this.props.supportedLanguages}
                   excludeList={this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages}
                   handlePopOverClick={(data) => this.handleAddLanguageFlow(data, val, "addLanguage")}
+                  visible={this.state.customPopoverVisible}
+                  onVisibleChange={this.handleCustomPopoverVisibleChange}
                 />
               </Col>
             );
@@ -2961,14 +3034,14 @@ FormBuilder.propTypes = {
   onFormValidityChange: PropTypes.func,
   checkValidation: PropTypes.bool,
   onContextChange: PropTypes.func,
-  tabCount: PropTypes.Number,
+  tabCount: PropTypes.number,
   isSchemaChanged: PropTypes.bool,
   modal: PropTypes.object,
   isNewVersionFlow: PropTypes.bool,
   baseLanguage: PropTypes.string,
   supportedLanguages: PropTypes.array,
   router: PropTypes.object,
-  currentTab: PropTypes.Number,
+  currentTab: PropTypes.number,
   showModal: PropTypes.bool,
   handleCancelModal: PropTypes.func,
   cmsTemplates: PropTypes.func,

package/components/Toastr/index.js

@@ -13,7 +13,7 @@ const StyledMessageContainer = styled.div`
   font-family: open-sans,sans-serif;
   margin-top: 64px;
   margin-right: 32px;
-  z-index: 9999;
+  z-index: 10005;
 `;
 
 class Toastr extends React.Component { // eslint-disable-line react/prefer-stateless-function

package/containers/Cap/sagas.js

@@ -75,9 +75,22 @@ export function* fetchUserInfo() {
     const userData = result.user;
     // const orgId = yield select(makeSelectOrgId());
     // yield put({type: types.GET_ORG_DETAILS_REQUEST, orgId});
+    const currentOrgDetails = result.currentOrgDetails;
+    if (!(currentOrgDetails && currentOrgDetails.basic_details && currentOrgDetails.basic_details.base_language && (currentOrgDetails.basic_details.base_language !== "" || currentOrgDetails.basic_details.base_language === null))) {
+      currentOrgDetails.basic_details.base_language = 'en';
+    }
+    if (!(currentOrgDetails && currentOrgDetails.basic_details && currentOrgDetails.basic_details.supported_languages && currentOrgDetails.basic_details.supported_languages.length > 0)) {
+      currentOrgDetails.basic_details.supported_languages = [
+        {
+          lang_id: 69,
+          language: "English",
+          iso_code: "en",
+        },
+      ];
+    }
     yield call(LocalStorage.saveItem, 'orgID', result.currentOrgId);
     yield call(LocalStorage.saveItem, 'user', userData);
-    yield put({type: types.GET_USER_DATA_SUCCESS, userData, currentOrgId: result.currentOrgId, currentOrgDetails: result.currentOrgDetails});
+    yield put({type: types.GET_USER_DATA_SUCCESS, userData, currentOrgId: result.currentOrgId, currentOrgDetails});
   } catch (error) {
     yield call(LocalStorage.clearItem, 'user');
     yield put({

package/containers/Ebill/reducer.js

@@ -7,7 +7,10 @@
 import { fromJS } from 'immutable';
 import * as types from './constants';
 
-const initialState = fromJS({});
+const initialState = fromJS({
+  createTemplateInProgress: false,
+  createResponse: {},
+});
 
 function ebillReducer(state = initialState, action) {
   switch (action.type) {

package/containers/Ebill/selectors.js

@@ -21,5 +21,5 @@ const makeSelectEbill = () => createSelector(
 
 export default makeSelectEbill;
 export {
-  selectEbillDomain,
+  makeSelectEbill,
 };