@capillarytech/creatives-library 3.0.3 → 3.0.4

package/components/SmsPreviewV2/index.js

@@ -0,0 +1,69 @@
+/**
+*
+* SmsPreviewV2
+*
+*/
+
+import React from 'react';
+// import styled from 'styled-components';
+
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+import {CapColumn, CapRow, CapHeading} from '@capillarytech/cap-ui-library';
+import androidPhoneImage from '../../assets/android-message-gui-2.svg';
+
+class SmsPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  render() {
+    let content = [this.props.content];
+    const channel = this.props.channel;
+    let smsDetails = {};
+    if (this.props.content && this.props.charCounterEnabled) {
+      smsDetails = updateCharCount(this.props.content, this.props.unicodeEnabled);
+      content = [];
+      for (let i = 0, limit = 0; i < smsDetails.parts; i += 1, limit += smsDetails.chars_sms) {
+        content.push(smsDetails.char_list.slice(limit, smsDetails.chars_sms * (i + 1)));
+      }
+      if (document.getElementById("msg_count") && this.props.showCount) {
+        document.getElementById("msg_count").val = smsDetails.parts;
+      }
+    }
+    const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
+    return (
+      <CapRow>
+        {this.props.showCount && <CapColumn span={16}>
+          {channel && channel.toLowerCase() === 'sms' && <CapHeading type="h3">
+            <FormattedMessage {...messages.charactersTotal} values={{smsCount: smsDetails.parts, charCount: smsDetails.chars_used}}/>
+            {smsDetails.unicode &&
+              <FormattedMessage {...messages.smsFormatType}/>
+            }
+          </CapHeading>}
+        </CapColumn>}
+        <CapColumn span={this.props.showCount ? 8 : 24}>
+          <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
+            { channel && channel.toLowerCase() === 'sms' &&
+              <div className="shell align-center" id="sms-preview">
+                <img className="preview-image sms" src={smsBody} alt="Preview is being generated"/>
+                <div className="msgContainer sms">
+                  <img className="sms-icon" src={smsIcon} alt="Sms icon" />
+                  <div className={"message-pop sms"}>
+                    {content && content.length && content.map((msg, index) =>
+                      <CapColumn key={`"message-pop-content-${index}`} className="message-pop-item align-left" style={{ background: '#3F51B5', color: '#ffffff'}}>
+                        {msg}
+                      </CapColumn>)
+                }
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+        </CapColumn>
+      </CapRow>
+    );
+  }
+}
+
+SmsPreviewV2.propTypes = {
+
+};
+
+export default SmsPreviewV2;

package/components/SmsPreviewV2/messages.js

@@ -0,0 +1,13 @@
+/*
+ * SmsPreviewV2 Messages
+ *
+ * This contains all the text for the SmsPreviewV2 component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'app.components.SmsPreviewV2.header',
+    defaultMessage: 'This is the SmsPreviewV2 component !',
+  },
+});

package/components/SmsPreviewV2/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import SmsPreviewV2 from '../index';
+
+describe('<SmsPreviewV2 />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/containers/Ebill/index.js

@@ -690,7 +690,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
   onTagSelect = (data, currentTab) => {
     console.log('parent data tag', data, currentTab);
     const editorId = currentTab > 1 ? `ebill-editor${currentTab}` : 'ebill-editor';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   };
 
@@ -864,7 +864,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
 
   };
 
-  insertAtCursor = (field, myValue) => {
+  insertAtCursor = (field, myValue, currentTab) => {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -882,8 +882,9 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
     } else {
       myField.value += myValue;
     }
-    const event = new Event('input', { bubbles: true });
-    myField.dispatchEvent(event);
+    const formData = _.cloneDeep(this.state.formData);
+    formData[currentTab - 1][field.id] = myField.value;
+    this.setState({formData});
   };
 
   injectMessages(elem) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/FormBuilder/index.js

@@ -1030,45 +1030,47 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     response.valid = true;
     response.missingTags = [];
     response.unsupportedTags = [];
-    _.forEach(tags, (tag) => {
-      _.forEach(tag.definition.supportedModules, (module) => {
-        if (module.mandatory && (currentModule === module.context)) {
-          if (content.indexOf(`{{${tag.definition.value}}}`) === -1) {
-            response.valid = false;
-            response.missingTags.push(tag.definition.value);
+    if(tags && tags.length) {
+      _.forEach(tags, (tag) => {
+        _.forEach(tag.definition.supportedModules, (module) => {
+          if (module.mandatory && (currentModule === module.context)) {
+            if (content.indexOf(`{{${tag.definition.value}}}`) === -1) {
+              response.valid = false;
+              response.missingTags.push(tag.definition.value);
+            }
           }
-        }
+        });
       });
-    });
-    const regex = /{{[(A-Z\w\(\)@!#$%^&*~.,/\\]+}}/g;
-    let match = regex.exec(content);
-    while (match !== null) {
-      const tagValue = match[0].substring(this.indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
-      match = regex.exec(content);
-      let ifSupported = false;
-      _.forEach(tags, (tag) => {
-        if (tag.definition.value === tagValue) {
+      const regex = /{{[(A-Z\w\(\)@!#$%^&*~.,/\\]+}}/g;
+      let match = regex.exec(content);
+      while (match !== null) {
+        const tagValue = match[0].substring(this.indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
+        match = regex.exec(content);
+        let ifSupported = false;
+        _.forEach(tags, (tag) => {
+          if (tag.definition.value === tagValue) {
+            ifSupported = true;
+          }
+        });
+        const ifSkipped = this.skipTags(tagValue);
+        if (ifSkipped) {
           ifSupported = true;
-        }
-      });
-      const ifSkipped = this.skipTags(tagValue);
-      if (ifSkipped) {
-        ifSupported = true;
-        let isUnsubscribeSkipped = tagValue.indexOf("unsubscribe") != -1 ;
-        if (isUnsubscribeSkipped) {
-          const missingTagIndex = response.missingTags.indexOf("unsubscribe");
-          if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
-            response.missingTags.splice(missingTagIndex, 1);
+          let isUnsubscribeSkipped = tagValue.indexOf("unsubscribe") != -1 ;
+          if (isUnsubscribeSkipped) {
+            const missingTagIndex = response.missingTags.indexOf("unsubscribe");
+            if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
+              response.missingTags.splice(missingTagIndex, 1);
+            }
           }
         }
-      }
-      ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
-      if (!ifSupported) {
-        response.unsupportedTags.push(tagValue);
-        response.valid = false;
-      }
-      if (response.unsupportedTags.length == 0 && response.missingTags.length == 0 ) {
-        response.valid = true;
+        ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
+        if (!ifSupported) {
+          response.unsupportedTags.push(tagValue);
+          response.valid = false;
+        }
+        if (response.unsupportedTags.length == 0 && response.missingTags.length == 0 ) {
+          response.valid = true;
+        }
       }
     }
     return response;
@@ -1088,6 +1090,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     return formData;
   }
 
+  // eslint-disable-next-line consistent-return
   initializeEditErrorData(formData, tabCount, isReturnErrorData) {
     const errorData = {};
     for (let idx = 0; idx < tabCount; idx += 1 ) {
@@ -2734,7 +2737,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 {val.showPreview && <WithLabel key={`${val.id}-with-label`} {...rest} errorMessage={ifError && errorMessage} ifError={ifError}/>}
                 <form encType="multipart/form-data" id={val.id}>
                   <input key={val.id} style={{ display: 'none'}} id="fileName" type="file" onChange={(e) => this.uploadImages(e, {files: e.target.files}, val)} accept={val.supportedExtensions ? val.supportedExtensions : "image/*"} />
-                  <CapButton disabled={val.disabled ? val.disabled : false} type="secondary" onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right'}}>
+                  <CapButton disabled={val.disabled ? val.disabled : false} type="secondary" onClick={(e) => this.openFileDialog(e, val.id)} style={{float: 'right', right: '-16px', top: '212px'}}>
                     {val.label}
                   </CapButton>
                 </form>

package/v2Components/NewCallTask/index.js

@@ -8,7 +8,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { CapRow, CapColumn, CapInput, CapButton, CapSpin } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
-import TagList from '../../containers/TagList';
+import TagList from '../../v2Containers/TagList';
 import CallTaskPreview from '../CallTaskPreview';
 import messages from './messages';
 import './_newCallTask.scss';

package/v2Components/NewCallTask/messages.js

@@ -24,6 +24,6 @@ export default defineMessages({
   },
   personalisationTags: {
     id: 'app.components.NewCallTask.personalisationTags',
-    defaultMessage: 'Personalisation tags',
+    defaultMessage: 'Add Labels',
   },
 });

package/v2Containers/Cap/index.js

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from 'moment';
-import 'moment/locale/zh-cn';
+// import 'moment/locale/zh-cn';
 import { injectIntl } from 'react-intl';
 import {CapNotification} from '@capillarytech/cap-ui-library';
 import { makeSelectAuthenticated, makeSelectUser } from './selectors';

package/v2Containers/Ebill/index.js

@@ -25,7 +25,6 @@ import makeSelectEbill from './selectors';
 import messages from './messages';
 import EmailPreview from '../../v2Components/EmailPreview';
 import './_ebill.scss';
-import callNativeEvent from '../../utils/callNativeEvent';
 const BreadcrumbItem = Breadcrumb.Item;
 
 export class Ebill extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -691,7 +690,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
   onTagSelect = (data, currentTab) => {
     console.log('parent data tag', data, currentTab);
     const editorId = currentTab > 1 ? `ebill-editor${currentTab}` : 'ebill-editor';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   };
 
@@ -865,7 +864,7 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
 
   };
 
-  insertAtCursor = (field, myValue) => {
+  insertAtCursor = (field, myValue, currentTab) => {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -883,8 +882,9 @@ export class Ebill extends React.Component { // eslint-disable-line react/prefer
     } else {
       myField.value += myValue;
     }
-    const event = new Event('input', { bubbles: true });
-    callNativeEvent({field, value: myField.value, event});
+    const formData = _.cloneDeep(this.state.formData);
+    formData[currentTab - 1][field.id] = myField.value;
+    this.setState({formData});
   };
 
   injectMessages(elem) {

package/v2Containers/Email/index.js

@@ -2429,6 +2429,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   openFileDialog() {
     document.getElementById("fileName").click();
   }
+  // eslint-disable-next-line react/sort-comp
   getTemplateDataForGrid = ({templates, handlers, filterContent, isLoading, loadingTip}) => {
     const currentChannel = 'gallery';
     const cardDataList = templates.length ? _.map(templates, (template) => {
@@ -2555,14 +2556,14 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           enablePagination
           isLoading={}
         /> */}
-        {this.props.Email.assetList && this.props.Email.assetList.length && this.getTemplateDataForGrid({
+        {this.props.Email.assetList && this.props.Email.assetList.length ? this.getTemplateDataForGrid({
           isLoading: this.props.Email.fetchingAllAssets,
           loadingTip: <FormattedMessage {...messages.loadingImages}/>,
           channel: this.state.channel,
           templates: this.props.Email.assetList,
           filterContent: this.getFilterContent(),
           handlers: {onItemClick: this.handleOnItemClick}})
-        }
+         : ''}
 
       </Pagination>
     </div>

package/v2Containers/Line/Create/index.js

@@ -17,7 +17,6 @@ import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
 import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
 import './_lineCreate.scss';
-import callNativeEvent from '../../../utils/callNativeEvent';
 
 const BreadcrumbItem = Breadcrumb.Item;
 
@@ -228,14 +227,14 @@ export class Line extends Component {
   onTagSelect(data, currentTab) {
     console.log('parent data tag', data, currentTab);
     const editorId = 'message-editor';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   }
 
   onTagSelectTitle(data, currentTab) {
     console.log('parent data tag', data, currentTab);
     const editorId = 'message-title';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   }
 
@@ -521,7 +520,7 @@ export class Line extends Component {
     return section;
   };
 
-  insertAtCursor = (field, myValue) => {
+  insertAtCursor = (field, myValue, currentTab) => {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -539,8 +538,9 @@ export class Line extends Component {
     } else {
       myField.value += myValue;
     }
-    const event = new Event('input', { bubbles: true });
-    callNativeEvent({field, value: myField.value, event});
+    const formData = _.cloneDeep(this.state.formData);
+    formData[currentTab - 1][field.id] = myField.value;
+    this.setState({formData});
   };
 
   startTemplateCreation = (data) => {

package/v2Containers/Line/Edit/index.js

@@ -24,7 +24,6 @@ import * as templatesActions from "../../Templates/actions";
 import {makeSelectTemplates} from "../../Templates/selectors";
 import messages from './messages';
 import './_lineEdit.scss';
-import callNativeEvent from '../../../utils/callNativeEvent';
 
 const BreadcrumbItem = Breadcrumb.Item;
 
@@ -256,7 +255,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   onTagSelect = (data, currentTab, srcComp) => {
     console.log('parent data tag', data, currentTab);
     const editorId = srcComp.target;
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   };
   onModalCancel = () => {
@@ -687,7 +686,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({showModal: false});
   };
 
-  insertAtCursor = (field, myValue) => {
+  insertAtCursor = (field, myValue, currentTab) => {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -705,8 +704,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     } else {
       myField.value += myValue;
     }
-    const event = new Event('input', { bubbles: true });
-    callNativeEvent({field, value: myField.value, event});
+    const formData = _.cloneDeep(this.state.formData);
+    formData[currentTab - 1][field.id] = myField.value;
+    this.setState({formData});
   };
 
   selectCtaIos = (selectedConfig) => {

package/v2Containers/MobilePush/Create/index.js

@@ -25,7 +25,6 @@ import * as actions from './actions';
 import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
 import messages from './messages';
-import callNativeEvent from '../../../utils/callNativeEvent';
 import getEventsMap from '../eventsMap';
 
 const PrefixWrapper = styled.div`
@@ -201,7 +200,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
   onTagSelect = (data, currentTab, srcComp) => {
     const editorId = srcComp.target;
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   };
 
@@ -362,37 +361,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     return response;
   };
-  showError = () => {
-    const {intl} = this.props;
-    const {errorData} = this.state;
-    const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
-    if (!isEmpty(this.state.formData) && !this.state.isFormValid) {
-      let tab = this.state.currentTab;
-      const isAndroidInvalid = Object.values(errorData[0]).includes(true);
-      const isIosInvalid = Object.values(errorData[1]).includes(true);
-      let isTagErrorExist = false;
-      if (isAndroidInvalid) {
-        tab = 1;
-        errorMessage.description = intl.formatMessage(messages.invalidAndroidMessage);
-        const invalidTags = errorData[0]['invalid-tags'];
-        if (!isEmpty(invalidTags)) {
-          isTagErrorExist = true;
-          errorMessage.description = `${intl.formatMessage(messages.invalidAndroidMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
-        }
-      } else if (isIosInvalid) {
-        tab = 2;
-        errorMessage.description = intl.formatMessage(messages.invalidIosMessage);
-        const invalidTags = errorData[1]['invalid-tags'];
-        if (!isEmpty(invalidTags)) {
-          isTagErrorExist = true;
-          errorMessage.description = `${intl.formatMessage(messages.invalidIosMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
-        }
-      }
-      if (tab !== this.state.currentTab || isTagErrorExist) {
-        CapNotification.error(errorMessage);
-      }
-    }
-  }
   setFormValidity = (isFormValid, errorData) => {
     const newState = {isFormValid, errorData};
     this.setState(newState);
@@ -633,6 +601,37 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       this.setState({modalContent, showModal: true});
     }
   }
+  showError = () => {
+    const {intl} = this.props;
+    const {errorData} = this.state;
+    const errorMessage = {key: 'validation-error', message: intl.formatMessage(messages.validationError)};
+    if (!isEmpty(this.state.formData) && !this.state.isFormValid) {
+      let tab = this.state.currentTab;
+      const isAndroidInvalid = Object.values(errorData[0]).includes(true);
+      const isIosInvalid = Object.values(errorData[1]).includes(true);
+      let isTagErrorExist = false;
+      if (isAndroidInvalid) {
+        tab = 1;
+        errorMessage.description = intl.formatMessage(messages.invalidAndroidMessage);
+        const invalidTags = errorData[0]['invalid-tags'];
+        if (!isEmpty(invalidTags)) {
+          isTagErrorExist = true;
+          errorMessage.description = `${intl.formatMessage(messages.invalidAndroidMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+        }
+      } else if (isIosInvalid) {
+        tab = 2;
+        errorMessage.description = intl.formatMessage(messages.invalidIosMessage);
+        const invalidTags = errorData[1]['invalid-tags'];
+        if (!isEmpty(invalidTags)) {
+          isTagErrorExist = true;
+          errorMessage.description = `${intl.formatMessage(messages.invalidIosMessage)} ${intl.formatMessage(messages.invalidTags)}: ${invalidTags.join(',')} `;
+        }
+      }
+      if (tab !== this.state.currentTab || isTagErrorExist) {
+        CapNotification.error(errorMessage);
+      }
+    }
+  }
   stopValidation = () => {
     this.setState({startValidation: false});
   }
@@ -806,7 +805,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     });
     return section;
   };
-  insertAtCursor = (field, myValue) => {
+  insertAtCursor = (field, myValue, currentTab) => {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -824,8 +823,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     } else {
       myField.value += myValue;
     }
-    const event = new Event('input', { bubbles: true });
-    callNativeEvent({field, value: myField.value, event});
+    const formData = cloneDeep(this.state.formData);
+    formData[currentTab - 1][field.id] = myField.value;
+    this.setState({formData});
   };
 
   startTemplateCreation = (data) => {

package/v2Containers/MobilePush/Edit/index.js

@@ -26,7 +26,6 @@ import * as templatesActions from "../../Templates/actions";
 import {makeSelectTemplates} from "../../Templates/selectors";
 import messages from './messages';
 import './_mobilePushCreate.scss';
-import callNativeEvent from '../../../utils/callNativeEvent';
 import {makeSelectCreate} from "../Create/selectors";
 
 import getEventsMap from '../eventsMap';
@@ -263,7 +262,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   onTagSelect = (data, currentTab, srcComp) => {
     console.log('parent data tag', data, currentTab);
     const editorId = srcComp.target;
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   };
   onModalCancel = () => {
@@ -551,6 +550,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     return undefined;
   };
+  // eslint-disable-next-line react/sort-comp
   showError = () => {
     const {intl} = this.props;
     const {errorData} = this.state;
@@ -882,7 +882,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.setState({showModal: false});
   };
 
-  insertAtCursor = (field, myValue) => {
+  insertAtCursor = (field, myValue, currentTab) => {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -900,8 +900,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     } else {
       myField.value += myValue;
     }
-    const event = new Event('input', { bubbles: true });
-    callNativeEvent({field, value: myField.value, event});
+    const formData = _.cloneDeep(this.state.formData);
+    formData[currentTab - 1][field.id] = myField.value;
+    this.setState({formData});
   };
 
   selectCtaIos = (selectedConfig) => {

package/v2Containers/MobilePush/initialSchema.js

@@ -1230,6 +1230,9 @@ export const response = {
                                       fluid: true,
                                       styling: "semantic",
                                       order: 1,
+                                      style: {
+                                        display: 'flex',
+                                      },
                                       customComponent: true,
                                       offset: 0,
                                       submitAction: "onUpload",

package/v2Containers/Sms/Create/index.js

@@ -744,8 +744,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
     this.setState({formData});
-    // const event = new Event('input', { bubbles: true });
-    // callNativeEvent({field, value: myField.value, event});
   }
 
   startTemplateCreation(data) {

package/v2Containers/Sms/Edit/index.js

@@ -790,8 +790,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
     this.setState({formData});
-    // const event = new Event('input', { bubbles: true });
-    // callNativeEvent({field, value: myField.value, event});
   }
 
   handleFrameTasks = (e) => {

package/v2Containers/WeChat/MapTemplates/index.js

@@ -28,8 +28,6 @@ import * as templateActions from '../../Templates/actions';
 // import PageHeader from '../../v2Components/PageHeader';
 import './_mapTemplates.scss';
 
-import callNativeEvent from '../../../utils/callNativeEvent';
-
 // const Option = Select.Option;
 
 export class MapTemplates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -427,7 +425,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
 
   onTagSelect(data, currentTab, value) {
     const editorId = (value.id).replace('tagList', 'template');
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
     document.getElementById(editorId).focus();
   }
 
@@ -1020,7 +1018,7 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     parent.postMessage(JSON.stringify(response), '*');
   }
 
-  insertAtCursor(field, myValue) {
+  insertAtCursor(field, myValue, currentTab) {
     //IE support
     const myField = field;
     if (document.selection) {
@@ -1038,8 +1036,9 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
     } else {
       myField.value += myValue;
     }
-    const event = new Event('input', { bubbles: true });
-    callNativeEvent({field, value: myField.value, event});
+    const formData = _.cloneDeep(this.state.formData);
+    formData[currentTab - 1][field.id] = myField.value;
+    this.setState({formData});
   }
 
   internalUrlChecked() {