@capillarytech/creatives-library 0.0.4 → 0.0.6

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();
       });
@@ -453,7 +504,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           androidData[data] = this.state.formData[0][data];
         }
       }
-      if(_.isEmpty(androidData) && this.state.currentTab === 2){
+      if(_.isEmpty(androidData)){
         isOnlyIos = true;
       }
       const iosData = {};
@@ -462,7 +513,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           iosData[data] = this.state.formData[1][data];
         }
       }
-      if(_.isEmpty(iosData) && this.state.currentTab === 1){
+      if(_.isEmpty(iosData)){
         isOnlyAndroid = true;
       }
       _.forEach(this.state.formData, (tab, index) => {
@@ -688,31 +739,92 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
     }
 
+    // Form Data Validation for Email Channel
     if (this.props.schema && this.props.schema.channel && this.props.schema.channel.toUpperCase() === "EMAIL") {
-      for (let count = 0; count < this.state.tabCount; count += 1) {
-        const index = count + 1;
-        // const content = this.state.formData[count][`template-content${index > 1 ? index : ''}`];
-        // const tagValidationResponse = this.validateTags(content, tags, injectedTags);
-        // console.log('tag valid response', tagValidationResponse);
-        // if (tagValidationResponse.valid) {
-        //   errorData[count][`template-content${index > 1 ? index : ''}`] = false;
-        // } else {
-        //   errorData[count][`template-content${index > 1 ? index : ''}`] = true;
-        //   isValid = false;
-        // }
-      }
-      if (type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' ||  currentModule.toLowerCase() === 'subscription')) {
-        if (this.state.formData['template-subject']  && this.state.formData['template-subject'].trim() === '') {
-          errorData['template-subject'] = true;
+      // Validating Email By iterating all elements of FormBuilder
+      _.forEach(this.state.formData, (data, index) => {
+        console.log("Form Iteration Data ", data, index);
+        if (!this.state.formData["template-subject"]) {
+          errorData["template-subject"] = true;
           isValid = false;
         }
-      }
-      if(type !== 'embedded' && (!this.state.formData['template-name'] || this.state.formData['template-name'] === '')) {
-        errorData['template-name'] = true;
-        isValid = false;
-      } else {
-        errorData['template-name'] = false;
-      }
+        // 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')) {
+          if (data.trim() === '') {
+            errorData[index] = true;
+            isValid = false;
+          } else {
+            errorData[index] = false;
+          }
+        }
+
+        // Check if Template name present in full mode
+        if(type !== 'embedded' && index === 'template-name' && data === '') {
+          errorData[index] = true;
+          isValid = false;
+        } else if(type !== 'embedded' && index === 'template-name' && data !== '') {
+          errorData[index] = false;
+        }
+
+        // Check formData if selected version present or not
+        if(index === 'template-version' && data === '') {
+          errorData[index] = true;
+          isValid = false;
+        } else if(index === 'template-version' && data !== '') {
+          errorData[index] = false;
+        }
+
+        // Check error for the versions
+        if (!isNaN(index) || index === 'base') {
+          if (errorData[index] === undefined) {
+            errorData[index] = {};
+          }
+          for (var i = 0; i < data.selectedLanguages.length; i+= 1) {
+            const currentLang = data.selectedLanguages[i];
+            const content = data[currentLang]['template-content'];
+            const tagValidationResponse = this.validateTags(content, tags, injectedTags);
+            if (errorData[index][currentLang] === undefined) {
+              errorData[index][currentLang] = {};
+            }
+            console.log('tag valid response', tagValidationResponse);
+            if (tagValidationResponse.valid) {
+              errorData[index][currentLang]['template-content'] = false;
+            } else {
+              errorData[index][currentLang]['template-content'] = true;
+              isValid = false;
+            }
+          }
+          _.forEach(errorData[index], (versionData, key) => {
+            if (data.selectedLanguages.indexOf(key) === -1) {
+              delete errorData[index][key];
+            }
+          });
+        }
+      });
+      // for (let count = 0; count < this.state.tabCount; count += 1) {
+      //   const index = count + 1;
+      //   // const content = this.state.formData[count][`template-content${index > 1 ? index : ''}`];
+      //   // const tagValidationResponse = this.validateTags(content, tags, injectedTags);
+      //   // console.log('tag valid response', tagValidationResponse);
+      //   // if (tagValidationResponse.valid) {
+      //   //   errorData[count][`template-content${index > 1 ? index : ''}`] = false;
+      //   // } else {
+      //   //   errorData[count][`template-content${index > 1 ? index : ''}`] = true;
+      //   //   isValid = false;
+      //   // }
+      // }
+      // if (type.toLowerCase() === 'embedded' && (currentModule.toLowerCase() === 'loyalty' || currentModule.toLowerCase() === 'dvs' || currentModule.toLowerCase() === 'timeline')) {
+      //   if (this.state.formData['template-subject']  && this.state.formData['template-subject'].trim() === '') {
+      //     errorData['template-subject'] = true;
+      //     isValid = false;
+      //   }
+      // }
+      // if(type !== 'embedded' && (!this.state.formData['template-name'] || this.state.formData['template-name'] === '')) {
+      //   errorData['template-name'] = true;
+      //   isValid = false;
+      // } else {
+      //   errorData['template-name'] = false;
+      // }
     }
     this.setState({isFormValid : isValid, errorData});
     console.log('final validity', this.state.formData, this.state, isValid);
@@ -857,10 +969,22 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         if (!errorData[idx]) {
           errorData[idx] = {};
         }
-        if (key === 'tabKey' || key === 'base') {
+        if (key === 'tabKey' || key === 'base' || key === 'selectedLanguages') {
           return true;
         }
-        errorData[idx][key] = false;
+        if (this.props.isNewVersionFlow && formData[0].selectedLanguages.indexOf(key) > -1) {
+          _.forEach(formData[0].selectedLanguages, (lang) => {
+            if (errorData[idx] === undefined) {
+              errorData[idx] = {};
+            }
+            if (errorData[idx][lang] === undefined) {
+              errorData[idx][lang] = {};
+            }
+            errorData[idx][lang]['template-content'] = false;
+          });
+        } else {
+          errorData[idx][key] = false;
+        }
         return true;
       });
     }
@@ -880,8 +1004,15 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           formData[index] = {};
         }
         if (isContainer && this.props.isNewVersionFlow) {
+          // if (formData[index] && formData[index].selectedLanguages && formData[index].selectedLanguages.length > 0) {
+          //   for (let i = 0; i < formData[index].selectedLanguages.length; i += 1 ) {
+          //     formData[index][formData[index].selectedLanguages[i]] = {};
+          //   }
+          // } else {
+          //   formData[index][`${this.props.baseLanguage ? this.props.baseLanguage : 'en'}`] = {};
+          // }
           _.forEach(this.props.supportedLanguages, (language) => {
-            if (!formData[index][language.iso_code]) {
+            if (!formData[index][language.iso_code] && this.props.baseLanguage === language.iso_code) {
               formData[index][language.iso_code] = {};
             }
           });
@@ -1056,6 +1187,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 +1568,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 +1595,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 +1630,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 +1646,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 +1656,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 +1673,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 +1691,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 +1700,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();
@@ -1565,6 +1711,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       } else if (this.props.isNewVersionFlow && event !== 'onSelect') {
         if (event === 'addLanguage') {
           val.injectedEvents[event].call(this, data, formData, val);
+          this.setState({currentEventVal: {}, currentEvent: {}, currentEventData: {}});
         } else {
           val.injectedEvents[event].call(this, true, formData, val);
         }
@@ -1742,6 +1889,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 +1946,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 +2017,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 +2061,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 +2273,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 +2423,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 +2452,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 +2799,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 +2856,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,17 +3115,17 @@ 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,
+  cmsTemplates: PropTypes.array,
   getCmsTemplatesInProgress: PropTypes.bool,
   showEdmEmailTemplates: PropTypes.bool,
   toggleEdmEmailTemplateSelection: PropTypes.func,

package/components/TemplatePreview/index.js

@@ -27,6 +27,9 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
     // let smsText = '';
     if (this.props.content && this.props.charCounterEnabled) {
       smsDetails = charCount.updateCharCount(this.props.content);
+      if (document.getElementById("msg_count")) {
+        document.getElementById("msg_count").val = smsDetails.msgCount;
+      }
       //smsText = this.props.intl.formatMessage(messages.previewGenerationMessage);
       //console.log('message text', smsText);
     }

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,
 };