@capillarytech/creatives-library 0.1.32 → 1.0.0

package/containers/MobilePush/Create/index.js

@@ -1,2248 +0,0 @@
-/*
- *
- * Create
- *
- */
-
-import React, { PropTypes } from 'react';
-import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
-import { Row, Col, Spin, Breadcrumb, notification } from 'antd';
-import _ from 'lodash';
-import { createStructuredSelector } from 'reselect';
-import { injectIntl, intlShape } from 'react-intl';
-import { makeSelectCreate, makeSelectCreateResponse } from './selectors';
-import { makeSelectMetaEntities } from '../../Cap/selectors';
-import * as globalActions from '../../../containers/Cap/actions';
-import FormBuilder from '../../../components/FormBuilder';
-import './_mobilePushCreate.scss';
-import * as actions from './actions';
-import {getMessageObject} from '../../../utils/messageUtils';
-import { makeSelectTemplates } from '../../Templates/selectors';
-import messages from './messages';
-const BreadcrumbItem = Breadcrumb.Item;
-export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    if (this.props.Templates.selectedWeChatAccount) {
-      const map = {
-        "template-name": {
-          "onChange": this.onTemplateNameChange,
-        },
-        "cta-deeplink-secondary-cta-0": {
-          "onChange": this.onLinkTypeChange,
-        },
-        "cta-deeplink-secondary-cta-1": {
-          "onChange": this.onLinkTypeChange,
-        },
-        "cta-deeplink-secondary-cta-12": {
-          "onChange": this.onLinkTypeChange,
-        },
-        "cta-deeplink-delete": {
-          "onDelete": this.deletePrimaryCTA,
-        },
-        "cta-deeplink2-delete": {
-          "onDelete": this.deletePrimaryCTA,
-        },
-        "secondary-cta-0-delete": {
-          "onDelete": this.deleteSecondaryCTA,
-        },
-        "secondary-cta-1-delete": {
-          "onDelete": this.deleteSecondaryCTA,
-        },
-        "secondary-cta-1-delete-ios": {
-          "onDelete": this.deleteSecondaryCtaIos,
-        },
-        "discard-button": {
-          "discardValues": this.discardValues,
-        },
-        "cancel-button": {
-          "cancelTemplate": this.cancelTemplate,
-        },
-        "copy-android-content": {
-          "onClick": this.copyAndroidContent,
-        },
-        "copy-iphone-content": {
-          "onClick": this.copyIphoneContent,
-        },
-        "save-button": {
-          saveFormData: this.saveFormData,
-        },
-        "message-editor": {
-          "onChange": this.onTemplateContentChange,
-        },
-        "message-editor2": {
-          "onChange": this.onTemplateContentChange,
-        },
-        "message-tagList": {
-          "onTagSelect": this.onTagSelect,
-        },
-        "message-tagList2": {
-          "onTagSelect": this.onTagSelect,
-        },
-        "title-tagList": {
-          "onTagSelect": this.onTagSelect,
-        },
-        "title-tagList2": {
-          "onTagSelect": this.onTagSelect,
-        },
-        "pane": {
-          onTabChange: this.onTabChange,
-        },
-        "cta-deeplink": {
-          "onChange": this.onLinkTypeChange,
-        },
-        "cta-deeplink2": {
-          "onChange": this.onLinkTypeChange,
-        },
-        "cta-deeplink-secondary-cta-1-select": {
-          "onSelect": this.showCtaKeys,
-        },
-        "cta-deeplink-secondary-cta-0-select": {
-          "onSelect": this.showCtaKeys,
-        },
-        "cta-deeplink-secondary-cta-1-select2": {
-          "onSelect": this.showCtaKeys,
-        },
-        "cta-deeplink-select": {
-          "onSelect": this.showCtaKeys,
-        },
-        "cta-deeplink2-select": {
-          "onSelect": this.showCtaKeys,
-        },
-        "add-pri-cta": {
-          "addPrimaryCta": this.addPrimaryCta,
-        },
-        "add-pri-cta-ios": {
-          "addPrimaryCta": this.addPrimaryCta,
-        },
-        "add-sec-cta": {
-          "addSecondaryCta": this.addSecondoryCta,
-        },
-        "add-sec-cta-ios": {
-          "addSecondaryCtaIos": this.addSecondoryCtaIos,
-        },
-        "image-upload-android": {
-          "onUpload": this.uploadImage,
-        },
-        "image-upload-ios": {
-          "onUpload": this.uploadImage,
-        },
-        "secondary-cta-1-table": {
-          "onRowClick": this.selectCtaIos,
-        },
-        "cta-deeplink-select-show-keys": {
-          "onShowCtaKeys": this.showCtaKeys,
-        },
-        "cta-deeplink-secondary-cta-0-select-show-keys": {
-          "onShowCtaKeys": this.showCtaKeys,
-        },
-        "cta-deeplink-secondary-cta-1-select-show-keys": {
-          "onShowCtaKeys": this.showCtaKeys,
-        },
-        "wechat-template": {
-          "onSelect": this.onTemplateChange,
-        },
-      };
-      this.state = {
-        formData: {},
-        tabCount: 1,
-        currentTab: 1,
-        loading: false,
-        isFormValid: true,
-        tabKey: '',
-        checkValidation: false,
-        schema: {},
-        eventsMap: map,
-        errorData: {},
-        displayProps: {},
-        modalContent: {title: "Alert", body: "template not configured,", type: 'confirm'},
-        injectedTags: {},
-      };
-    }
-  }
-  componentWillMount = () => {
-    if (this.props.route.name === 'view') {
-      this.setState({loading: false});
-      this.removeStandAlone();
-    }
-    if (this.props.params.mode) {
-      this.setState({mode: this.props.params.mode});
-    }
-    if (!this.props.Templates.selectedWeChatAccount) {
-      const type = this.props.location.query.type;
-      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      this.props.router.push({
-        pathname: `/MOBILEPUSH/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      });
-    }
-  };
-
-  componentDidMount = () => {
-    console.log('added listener create,', this.props);
-    const query = {
-      layout: 'MOBILEPUSH',
-      type: 'LAYOUT',
-    };
-    this.props.globalActions.fetchSchemaForEntity(query);
-    window.addEventListener("message", this.handleFrameTasks);
-  };
-
-  componentWillReceiveProps = (nextProps) => {
-    console.log('recieved props ', nextProps, nextProps.Create, this.props.Create);
-    if (nextProps.Create.uploadedAssetData) {
-      const formData = _.cloneDeep(this.state.formData);
-      formData[this.state.currentTab - 1].image = nextProps.Create.uploadedAssetData.metaInfo.public_url;
-      this.setState({formData});
-      this.props.actions.clearAsset();
-    }
-    if (nextProps.createResponse && nextProps.createResponse.templateId) {
-      console.log('create response', nextProps.createResponse);
-      this.discardValues();
-      const message = getMessageObject('success', this.props.intl.formatMessage(messages["Mobile Push Template Created Successfully"]), true);
-      this.props.globalActions.addMessageToQueue(message);
-      this.props.actions.clearCreateResponse();
-      const type = this.props.location.query.type;
-      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      this.props.router.push({
-        pathname: `/mobilepush/`,
-        query: type === 'embedded' ? {type: 'embedded', module} : {module},
-      });
-    }
-    if (nextProps.params.mode) {
-      this.setState({mode: nextProps.params.mode});
-    }
-    if (nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
-      const message = getMessageObject('error', (nextProps.Create.createTemplateErrorMessage && nextProps.Create.createTemplateErrorMessage !== '') ? nextProps.Create.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
-      this.props.globalActions.addMessageToQueue(message);
-    }
-    if (nextProps.Create.iosCtasData) {
-      this.setState({iosCtasData: nextProps.Create.iosCtasData});
-    }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
-      console.log('final schema is**', nextProps.metaEntities.layouts[0].definition);
-      const schema = this.props.params.mode === "text" ? nextProps.metaEntities.layouts[0].definition.textSchema : nextProps.metaEntities.layouts[0].definition.imageSchema;
-      schema.standalone.sections.splice(1, 1);
-      this.injectEvents(schema);
-      const query = {
-        layout: 'mobilepush',
-        type: 'TAG',
-        context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
-        embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
-      };
-      this.props.globalActions.fetchSchemaForEntity(query);
-      if (this.props.location.query.type === 'embedded') {
-        this.showNext();
-      }
-    }
-
-    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && !_.isEqual(this.props.metaEntities.tags, nextProps.metaEntities.tags)) {
-      let injectedTags = _.cloneDeep(this.state.injectedTags);
-      delete injectedTags["Registration custom fields"];
-      delete injectedTags["Store custom fields"];
-      delete injectedTags["Transaction custom fields"];
-      injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-      console.log('new injected tags', nextProps.metaEntities.tags.custom);
-      if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
-        delete injectedTags["Registration custom fields"];
-      }
-      if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
-        delete injectedTags["Store custom fields"];
-      }
-      if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
-        delete injectedTags["Transaction custom fields"];
-      }
-      this.setState({injectedTags});
-    }
-  };
-  componentWillUnmount = () => {
-    console.log('removed listener create');
-    window.removeEventListener("message", this.handleFrameTasks);
-  };
-  onTemplateChange = () => {
-
-  };
-
-  onFormDataChange = (formData, tabCount, currentTab) => {
-    console.log('Form data changed is ', formData, tabCount, currentTab);
-    const newFormData = _.cloneDeep(formData);
-    if (newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`]) {
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].name;
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].ctaTemplateDetails[0].buttonText;
-      delete newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`];
-      if (newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].ctaTemplateDetails[1]) {
-        newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].ctaTemplateDetails[1].buttonText;
-      }
-    }
-    if (this.state.isSchemaChanged) {
-      this.setState({isSchemaChanged: false});
-    }
-    // copy content code
-    // if (newFormData[0]['copy-iphone-content'] === "") {
-    //
-    //   if(!!formData[1]['message-editor2'] && !!formData[1]['message-title2']){
-    //     dispplayProps[0]['copy-iphone-content'] = true;
-    //   }
-    // } else {
-    //   if(formData[1]['message-editor2'] === "" || formData[1]['message-title2'] === ""){
-    //     newFormData[0]['copy-iphone-content'] = "";
-    //   }
-    // }
-    // if (newFormData[1]['copy-android-content'] === "") {
-    //
-    //   if(!!formData[0]['message-editor'] && !!formData[0]['message-title']){
-    //     newFormData[1]['copy-android-content'] = true;
-    //   }
-    // } else {
-    //   if(formData[0]['message-editor'] === "" || formData[0]['message-title'] === ""){
-    //     newFormData[1]['copy-android-content'] = "";
-    //   }
-    // }
-    this.setState({formData: newFormData, tabCount});
-  };
-
-  onTagSelect = (data, currentTab, srcComp) => {
-    console.log('parent data tag', data, currentTab);
-    const editorId = srcComp.target;
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
-    document.getElementById(editorId).focus();
-  };
-
-  onTabChange = (data) => {
-    console.log('inside parent ontabchange', data, this.state);
-    this.setState({currentTab: data});
-  };
-  onTemplateNameChange = (name) => {
-    console.log('Template name changed to ', name);
-  };
-
-
-  onLinkTypeChange = (eventTriggered, formData, field) => {
-    const schema = _.cloneDeep(this.state.schema);
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane, paneIndex) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              const formChaild = child;
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  if (inputField) {
-                    _.forEach(inputField.cols, (col) => {
-                      if (col.id === field.id && paneIndex === this.state.currentTab - 1) {
-                        console.log(child, fieldIndex, this.state.formData);
-                        const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-                        const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? _.map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
-                        const deeplinkValue = formData[this.state.currentTab - 1][field.id];
-                        const componentIndex = fieldIndex + 1;
-                        const inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${col.id}-select` : `${col.id}-text`;
-                        if ( deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" && (fieldIndex === child.inputFields.length - 1 || child.inputFields[componentIndex].id !== "cta-deeplink-select-section")) {
-                          const row = {
-                            rowClassName: 'mobile-push-row',
-                            id: 'cta-deeplink-select-section',
-                            cols: [
-                              {
-                                id: "cta-label",
-                                metaType: "label",
-                                value: "",
-                                primitive: true,
-                                dynamicTab: false,
-                                type: "div",
-                                width: 4,
-                                onlyDisplay: true,
-                                colStyle: {
-                                  flex: 1,
-                                },
-                              },
-                              {
-                                id: inputId,
-                                placeholder: "Select DeepLink",
-                                type: "select",  //Resembles component to be used
-                                options: deepLinkOptions,
-                                metaType: "text",
-                                datatype: "string",
-                                errorMessage: "Select a deeplink",
-                                required: true,
-                                fluid: true,
-                                width: 19,
-                                style: {
-                                  fontSize: '14px',
-                                  fontFamily: 'open-sans',
-                                  fontStyle: 'normal',
-                                  // fontWeight: 600,
-                                  marginBottom: '16px',
-                                },
-                                styling: "semantic",
-                                order: 1,
-                                customComponent: false,
-                                supportedEvents: [
-                                  'onSelect',
-                                ],
-                              },
-                            ],
-                          };
-                          if (!child.inputFields[fieldIndex + 1] || child.inputFields[componentIndex].id === "cta-external-link") {
-                            formChaild.inputFields[componentIndex] = row;
-                          } else {
-                            formChaild.inputFields.splice(componentIndex, 0, row);
-                          }
-                        } else if ( deeplinkValue && deeplinkValue.toLowerCase() === "external link") {
-                          const row = {
-                            rowClassName: 'mobile-push-row',
-                            id: 'cta-external-link',
-                            cols: [
-                              {
-                                id: "cta-label",
-                                metaType: "label",
-                                value: "",
-                                primitive: true,
-                                dynamicTab: false,
-                                type: "div",
-                                width: 4,
-                                offset: 0,
-                                onlyDisplay: true,
-                              },
-                              {
-                                id: inputId,
-                                placeholder: "External Link",
-                                type: "input",  //Resembles component to be used
-                                metaType: "text",
-                                datatype: "string",
-                                errorMessage: "External Link cannot be empty",
-                                required: true,
-                                fluid: true,
-                                width: 19,
-                                style: {
-                                  fontSize: '14px',
-                                  fontFamily: 'open-sans',
-                                  fontStyle: 'normal',
-                                  // fontWeight: 600,
-                                  marginBottom: '16px',
-                                },
-                                styling: "semantic",
-                                order: 1,
-                                offSet: 4,
-                                customComponent: false,
-                                standalone: false,
-                              },
-                            ],
-                          };
-                          if (!child.inputFields[fieldIndex + 1] || child.inputFields[componentIndex].id === "cta-deeplink-select-section") {
-                            formChaild.inputFields[componentIndex] = row;
-                            if (child.inputFields[componentIndex + 1] && child.inputFields[componentIndex + 1].id === "show-cta-deeplink-keys-label") {
-                              formChaild.inputFields.splice(componentIndex + 1, 1);
-                            }
-                            if (child.inputFields[componentIndex + 1] && child.inputFields[componentIndex + 1].id === "cta-deeplink-keys") {
-                              let configkeys = _.filter(JSON.parse(deeplinks), (dl) => dl.link === formData[this.state.currentTab - 1][`${col.id}-select`]);
-                              if (configkeys[0]) {
-                                configkeys = configkeys[0].keys;
-                              }
-                              if (configkeys.length) {
-                                formChaild.inputFields = formChaild.inputFields.slice(0, componentIndex + 1).concat(formChaild.inputFields.slice( componentIndex + 1 + configkeys.length, formChaild.inputFields.length));
-                              }
-                            }
-                          } else {
-                            formChaild.inputFields.splice(componentIndex, 0, row);
-                          }
-                        }
-                      }
-                    });
-                  }
-                });
-              }
-            });
-          });
-        });
-      });
-    });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
-  };
-  onTemplateContentChange = (content) => {
-    console.log('Template content changed to ', content);
-  };
-  onModalCancel = () => {
-    if (this.state.modalContent && this.state.modalContent.show) {
-      this.setState({modalContent: {...this.state.modalContent, show: false}});
-    }
-  };
-  getLinkName = (link) => {
-    const ck = this.props.Templates.selectedWeChatAccount.configs ? !!this.props.Templates.selectedWeChatAccount.configs.deeplink : false;
-    const deeplinks = ck ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-    const deepLinkOptions = _.filter(JSON.parse(deeplinks), (l) => l.link === link);
-    if (deepLinkOptions[0]) {
-      return deepLinkOptions[0].name;
-    }
-    return undefined;
-  };
-
-  getMappedEvent = (id, event) => {
-    const map = this.state.eventsMap;
-    if (!map[id] || !map[id][event]) {
-      console.log(`error map[id] ${map[id]}` );
-    }
-    return map[id][event];
-  };
-  getCurrentWindow = (e) => {
-    const response = {
-      action: e.action,
-      value: 'edit',
-      direction: e.value,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  };
-  getFormData = (e) => {
-    console.log('posting final result', this.state.formData);
-    const response = {
-      action: "getFormData",
-      value: this.getTransformedData(this.state.formData),
-      validity: this.state.isFormValid,
-    };
-    this.setState({checkValidation: true});
-    e.source.postMessage(JSON.stringify(response), e.origin);
-  };
-  setFormValidity = (isFormValid) => {
-    this.setState({isFormValid});
-  };
-  getTransformedData = (formData) => {
-    const obj = {};
-    obj.versions = {
-      base: {},
-    };
-    obj.type = 'MOBILEPUSH';
-    obj.name = formData['template-name'];
-    obj.definition = {
-      accountId: this.props.Templates.selectedWeChatAccount.id,
-      mode: this.props.params.mode,
-    };
-    const android = {};
-    Object.keys(formData[0]).forEach((data) => {
-      if (!!formData[0][data] && data !== "tabKey") {
-        android[data] = formData[0][data];
-      }
-    });
-    const ios = {};
-    Object.keys(formData[1]).forEach((data) => {
-      if (!!formData[1][data] && data !== "tabKey") {
-        ios[data] = formData[1][data];
-      }
-    });
-    obj.versions.base = {};
-    delete android.base;
-    if (!_.isEmpty(android)) {
-      obj.versions.base.ANDROID = {
-        "luid": "{{luid}}",
-        "cuid": "{{cuid}}",
-        "communicationId": "{{communicationId}}",
-        "title": android['message-title'],
-        "message": android['message-editor'],
-        expandableDetails: {
-          "style": "BIG_TEXT",
-          "message": android['message-editor'],
-        },
-        "custom": _.map(android, (field, key) => {
-          if (key.indexOf('custom-value') > -1) {
-            return field !== "" ? {key: key.replace('custom-value-', "").replace('-cta-deeplink-select', '').replace('-cta-deeplink-secondary-cta-0-select', '').replace('-cta-deeplink-secondary-cta-1-select', ''), value: field} : undefined;
-          }
-          return undefined;
-        }).filter((custom) => custom),
-      };
-    }
-    if (android['cta-deeplink'] && android['cta-deeplink'] !== "") {
-      obj.versions.base.ANDROID.cta = {
-        "type": android['cta-deeplink'] && android['cta-deeplink'].toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL",
-        "actionLink": android['cta-deeplink'] && android['cta-deeplink'].toLowerCase() === "deeplink" ? android['cta-deeplink-select'] : android['cta-deeplink-text'],
-        "deepLinkName": android['cta-deeplink'] && android['cta-deeplink'].toLowerCase() === "deeplink" ? this.getLinkName(android['cta-deeplink-select']) : undefined,
-      };
-      if (this.props.location.query.type === 'embedded') {
-        delete obj.versions.base.ANDROID.cta.deepLinkName;
-      }
-    }
-    if (!_.isEmpty(ios)) {
-      obj.versions.base.IOS = {
-        "luid": "{{luid}}",
-        "cuid": "{{cuid}}",
-        "communicationId": "{{communicationId}}",
-        "title": ios['message-title2'],
-        "message": ios['message-editor2'],
-        "expandableDetails": {
-          "style": "BIG_TEXT",
-          "message": ios['message-title2'],
-          "ctas": [
-          ],
-          "categoryId": ios['secondary-cta-1-table'] ? ios['secondary-cta-1-table'].id : undefined,
-        },
-        "custom": _.map(ios, (field, key) => {
-          if (key.indexOf('custom-value') > -1) {
-            return field !== "" ? {key: key.replace('custom-value-', "").replace('-cta-deeplink2-select', '').replace('-cta-deeplink-secondary-cta-0-select', '').replace('-cta-deeplink-secondary-cta-1-select2', ''), value: field} : undefined;
-          }
-          return undefined;
-        }).filter((custom) => custom),
-      };
-    }
-    if (ios['cta-deeplink2'] && ios['cta-deeplink2'] !== "") {
-      obj.versions.base.IOS.cta = {
-        "type": ios['cta-deeplink2'] && ios['cta-deeplink2'].toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL",
-        "actionLink": ios['cta-deeplink2'] && ios['cta-deeplink2'].toLowerCase() === "deeplink" ? ios['cta-deeplink2-select'] : ios['cta-deeplink2-text'],
-        "deepLinkName": ios['cta-deeplink2'] && ios['cta-deeplink2'].toLowerCase() === "deeplink" ? this.getLinkName(ios['cta-deeplink2-select']) : undefined,
-      };
-      if (this.props.location.query.type === 'embedded') {
-        delete obj.versions.base.IOS.cta.deepLinkName;
-      }
-    }
-    if (obj.versions.base.ANDROID) {
-      if (obj.versions.base.ANDROID.cta && obj.versions.base.ANDROID.cta.type === "DEEP_LINK") {
-        const params = _.map(android, (field, key) => {
-          let actionLink;
-          if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-select') > -1) {
-            const param = key.replace('custom-value-', "").replace('-cta-deeplink-select', '');
-            actionLink = field !== "" ? `${param}=${field}` : undefined;
-          }
-          return actionLink;
-        }).filter((actionLink) => actionLink);
-        if (params.length) {
-          obj.versions.base.ANDROID.cta.actionLink = `${obj.versions.base.ANDROID.cta.actionLink}?${params.join('&')}`;
-        }
-      }
-      const secondaryCta1 = !!android["cta-deeplink-secondary-cta-0-select"] || !!android['secondary-cta-0-label'];
-      const secondaryCta2 = !!android['cta-deeplink-secondary-cta-1-select'] || !!android['secondary-cta-1-label'];
-      const imageLink = android.image;
-      if (imageLink) {
-        obj.versions.base.ANDROID.expandableDetails.image = imageLink;
-        obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
-      }
-      if (secondaryCta1 || secondaryCta2 ) {
-        obj.versions.base.ANDROID.expandableDetails.ctas = [];
-        if (secondaryCta1) {
-          const cta = {
-            "actionText": android['secondary-cta-0-label'],
-            "type": android['cta-deeplink-secondary-cta-0'].toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL",
-            "actionLink": android['cta-deeplink-secondary-cta-0'].toLowerCase() === "deeplink" ? android['cta-deeplink-secondary-cta-0-select'] : android['cta-deeplink-secondary-cta-0-text'],
-            "seccdeepLinkName": this.getLinkName(android['cta-deeplink-secondary-cta-0-select']),
-          };
-          if (this.props.location.query.type === 'embedded') {
-            delete cta.seccdeepLinkName;
-          }
-          obj.versions.base.ANDROID.expandableDetails.ctas.push(cta);
-          if (obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].type === "DEEP_LINK") {
-            const params = _.map(android, (field, key) => {
-              let actionLink;
-              if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-secondary-cta-0-select') > -1) {
-                const param = key.replace('custom-value-', "").replace('-cta-deeplink-secondary-cta-0-select', '');
-                actionLink = field !== "" ? `${param}=${field}` : undefined;
-              }
-              return actionLink;
-            }).filter((actionLink) => actionLink);
-            if (params.length) {
-              obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].actionLink = `${obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].actionLink}?${params.join('&')}`;
-            }
-          }
-        }
-        if (secondaryCta2) {
-          const cta = {
-            "actionText": android['secondary-cta-1-label'],
-            "type": android['cta-deeplink-secondary-cta-1'].toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL",
-            "actionLink": android['cta-deeplink-secondary-cta-1'].toLowerCase() === "deeplink" ? android['cta-deeplink-secondary-cta-1-select'] : android['cta-deeplink-secondary-cta-1-text'],
-            "seccdeepLinkName": this.getLinkName(android['cta-deeplink-secondary-cta-1-select']),
-          };
-          if (this.props.location.query.type === 'embedded') {
-            delete cta.seccdeepLinkName;
-          }
-          obj.versions.base.ANDROID.expandableDetails.ctas.push(cta);
-          if (obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].type === "DEEP_LINK") {
-            const params = _.map(android, (field, key) => {
-              let actionLink;
-              if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-secondary-cta-1-select') > -1) {
-                const param = key.replace('custom-value-', "").replace('-cta-deeplink-secondary-cta-1-select', '');
-                actionLink = field !== "" ? `${param}=${field}` : undefined;
-              }
-              return actionLink;
-            }).filter((actionLink) => actionLink);
-            if (params.length) {
-              obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].actionLink = `${obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].actionLink}?${params.join('&')}`;
-            }
-          }
-        }
-      }
-    }
-    if (obj.versions.base.IOS) {
-      if (obj.versions.base.IOS.cta && obj.versions.base.IOS.cta.type === "DEEP_LINK") {
-        const params = _.map(ios, (field, key) => {
-          let actionLink;
-          if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink2-select') > -1) {
-            const param = key.replace('custom-value-', "").replace('-cta-deeplink2-select', '');
-            actionLink = field !== "" ? `${param}=${field}` : undefined;
-          }
-          return actionLink;
-        }).filter((actionLink) => actionLink);
-        if (params.length) {
-          obj.versions.base.IOS.cta.actionLink = `${obj.versions.base.IOS.cta.actionLink}?${params.join('&')}`;
-        }
-      }
-      const imageLinkIos = ios.image;
-      const secondaryCtaIos = !!ios['cta-deeplink-secondary-cta-1-select'] || !!ios['secondary-cta-1-label'];
-      if (imageLinkIos) {
-        obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
-        obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
-      }
-      if (secondaryCtaIos) {
-        obj.versions.base.IOS.expandableDetails.ctas = [];
-        const cta = {
-          "actionText": ios['secondary-cta-1-label'],
-          "actionLabel": ios['secondary-cta-1-action'],
-          "actionLabel2": ios['secondary-cta-1-action2'],
-          "type": ios['cta-deeplink-secondary-cta-1'] && (ios['cta-deeplink-secondary-cta-1'].toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL"),
-          "actionLink": ios['cta-deeplink-secondary-cta-1'] && (ios['cta-deeplink-secondary-cta-1'].toLowerCase() === "deeplink" ? (ios['cta-deeplink-secondary-cta-1-select2'] || ios['cta-deeplink-secondary-cta-1-select']) : ios['cta-deeplink-secondary-cta-1-text']),
-          "ioscdeepLinkName": this.getLinkName(ios['cta-deeplink-secondary-cta-1-select']),
-          'templateCtaId': ios['secondary-cta-1-table'] ? ios['secondary-cta-1-table'].ctaTemplateDetails[0].id : undefined,
-        };
-        if (this.props.location.query.type === 'embedded') {
-          delete cta.ioscdeepLinkName;
-        }
-        obj.versions.base.IOS.expandableDetails.ctas.push(cta);
-        if (obj.versions.base.IOS.expandableDetails.ctas[obj.versions.base.IOS.expandableDetails.ctas.length - 1].type === "DEEP_LINK") {
-          const params = _.map(ios, (field, key) => {
-            let actionLink;
-            if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-secondary-cta-1-select') > -1) {
-              const param = key.replace('custom-value-', "").replace('-cta-deeplink-secondary-cta-1-select2', '');
-              actionLink = field !== "" ? `${param}=${field}` : undefined;
-            }
-            return actionLink;
-          }).filter((actionLink) => actionLink);
-          if (params.length) {
-            obj.versions.base.IOS.expandableDetails.ctas[obj.versions.base.IOS.expandableDetails.ctas.length - 1].actionLink = `${obj.versions.base.IOS.expandableDetails.ctas[obj.versions.base.IOS.expandableDetails.ctas.length - 1].actionLink}?${params.join('&')}`;
-          }
-        }
-      }
-    }
-    return obj;
-  };
-
-  setModalContent = (type) => {
-    if (type === 'ios') {
-      const modalContent = {
-        title: "Alert",
-        body: "Android template is not configured. Save without Android template",
-        type: 'confirm',
-        id: 'ios',
-      };
-      this.setState({modalContent, showModal: true});
-    } else if (type === 'android') {
-      const modalContent = {
-        title: "Alert",
-        body: "IOS template is not configured, Save without IOS template",
-        type: 'confirm',
-        id: 'android',
-      };
-      this.setState({modalContent, showModal: true});
-    }
-  }
-
-  openNotificationWithIcon = (type, message) => {
-    const dur = (type === 'error' || type === 'warning') ? null : 5;
-    notification[type]({
-      message: (`${type.toUpperCase()} ! ! ! `),
-      description: message, //'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
-      duration: dur,
-    });
-  }
-
-  handleCancelModal = () => {
-    this.setState({showModal: false});
-  };
-
-  moveToTemplates = () => {
-    console.log('in move to Templates');
-    const modalContent = {
-      title: "Alert",
-      body: this.props.intl.formatMessage(messages["Do you really want to go back? All your temporary changes will be lost!"]),
-      type: 'confirm',
-      id: 'template-back-confirm-modal',
-      show: true,
-    };
-    this.setState({modalContent, showModal: true});
-  };
-
-  cancelTemplate = () => {
-    const type = this.props.location.query.type;
-    const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-    this.props.router.push({
-      pathname: `/MOBILEPUSH/`,
-      query: type === 'embedded' ? {type: 'embedded', module} : {module},
-    });
-  };
-
-  injectEvents = (schema) => {
-    const temp = schema;
-    if (temp.standalone) {
-      temp.standalone.sections = this.injectSections(temp.standalone.sections);
-    }
-    _.forEach(temp.containers, (container) => {
-      let tempContainer = container;
-      tempContainer = this.injectContainer(tempContainer);
-      return tempContainer;
-    });
-    console.log('final injected schema', schema);
-    this.setState({schema, isSchemaChanged: true}, () => {
-      this.removeStandAlone();
-    });
-    return schema;
-  };
-
-  injectContainer = (container) => {
-    const temp = container;
-    if (temp.type === 'tabs') {
-      temp.injectedEvents = {};
-      _.forEach(temp.supportedEvents, (event) => {
-        temp.injectedEvents[event] = this.getMappedEvent(temp.id, event);
-      });
-      _.forEach(temp.panes, (pane) => {
-        const tempPane = pane;
-        tempPane.sectionsHeaders = this.injectSections(tempPane.sectionsHeaders);
-        tempPane.sections = this.injectSections(tempPane.sections);
-      });
-    }
-    return temp;
-  };
-
-  injectMultiColSection = (section) => {
-    _.forEach(section.inputFields, (inputField) => {
-      _.forEach(inputField.cols, (col) => {
-        const temp = col;
-        if (temp.type === 'popover') {
-          temp.content.sections = this.injectSections(temp.content.sections);
-          temp.value.sections = this.injectSections(temp.value.sections);
-          return true;
-        }
-        if (temp.id === "discard-button") {
-          temp.colStyle = {...temp.colStyle, 'display': 'none'};
-        }
-        if (temp.id === "cancel-button") {
-          temp.offset = 11;
-        }
-        if (temp.id === "mobile-push-preview") {
-          temp.content.appName = this.props.Templates.selectedWeChatAccount.name;
-        }
-        temp.injectedEvents = {};
-
-        _.forEach(col.supportedEvents, (event) => {
-          console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
-          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
-        });
-        return true;
-      });
-    });
-    _.forEach(section.actionFields, (actionField) => {
-      _.forEach(actionField.cols, (col) => {
-        const temp = col;
-        if (temp.type === 'popover') {
-          temp.content.sections = this.injectSections(temp.content.sections);
-          temp.value.sections = this.injectSections(temp.value.sections);
-          return true;
-        }
-        temp.injectedEvents = {};
-        _.forEach(col.supportedEvents, (event) => {
-          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
-        });
-        return true;
-      });
-    });
-    return section;
-  };
-
-  injectColLabelSection = (section) => {
-    _.forEach(section.inputFields, (inputField) => {
-      const temp = inputField;
-      if (temp.type === 'popover') {
-        temp.content.sections = this.injectSections(temp.content.sections);
-        temp.value.sections = this.injectSections(temp.value.sections);
-        return true;
-      }
-      temp.injectedEvents = {};
-      _.forEach(inputField.supportedEvents, (event) => {
-        temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
-      });
-      return true;
-    });
-    _.forEach(section.actionFields, (actionField) => {
-      const temp = actionField;
-      if (temp.type === 'popover') {
-        temp.content.sections = this.injectSections(temp.content.sections);
-        temp.value.sections = this.injectSections(temp.value.sections);
-        return true;
-      }
-      temp.injectedEvents = {};
-      _.forEach(actionField.supportedEvents, (event) => {
-        temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
-      });
-      return true;
-    });
-    return section;
-  };
-
-  injectSections = (sections) => {
-    _.forEach(sections, (section) => {
-      let temp = section;
-      if (temp.type === 'col-label') {
-        temp = this.injectColLabelSection(temp);
-      } else if (section.type === 'multicols') {
-        temp = this.injectMultiColSection(temp);
-      } else if (section.type === 'parent') {
-        temp = this.injectSections(temp.childSections);
-      }
-    });
-    return sections;
-  };
-
-  injectParentSection = (section) => {
-    _.forEach(section.childSections, (childSection) => {
-      let temp = childSection;
-      if (temp.type === 'col-label') {
-        temp = this.injectColLabelSection(temp);
-      } else if (section.type === 'multicols') {
-        temp = this.injectMultiColSection(temp);
-      } else if (section.type === 'parent') {
-        temp = this.injectParentSection(temp);
-      }
-    });
-    return section;
-  };
-  insertAtCursor = (field, myValue) => {
-    //IE support
-    const myField = field;
-    if (document.selection) {
-      myField.focus();
-      const sel = document.selection.createRange();
-      sel.text = myValue;
-    } else if (myField.selectionStart || myField.selectionStart === '0') { //MOZILLA and others
-      const startPos = myField.selectionStart;
-      const endPos = myField.selectionEnd;
-      myField.value = myField.value.substring(0, startPos)
-        + myValue
-        + myField.value.substring(endPos, myField.value.length);
-      myField.selectionStart = startPos + myValue.length;
-      myField.selectionEnd = startPos + myValue.length;
-    } else {
-      myField.value += myValue;
-    }
-    const event = new Event('input', { bubbles: true });
-    myField.dispatchEvent(event);
-  };
-
-  startTemplateCreation = (data) => {
-    console.log('startTemplateCreation');
-    const content = data.content;
-    const id = _.uniqueId();
-    const tempData = {
-      'message-editor': content,
-      'base': true,
-      'tabKey': id,
-    };
-    const formData = {};
-    formData[0] = tempData;
-    formData.base = tempData;
-    this.setState({formData, loading: false});
-  };
-
-  startLoading = (ifEdit) => {
-    console.log('startLoading', ifEdit);
-    if (ifEdit) {
-      this.setState({loading: true});
-    }
-  };
-
-  handleFrameTasks = (e) => {
-    console.log('data listened to is', e.data);
-    const type = e.data;
-    console.log('data type', typeof type);
-    if (typeof type === 'object') {
-      console.log('received something', type);
-      const action = type.action;
-      switch (action) {
-        case "startTemplateCreation":
-          this.startTemplateCreation(type.value);
-          break;
-        case "startLoading":
-          this.startLoading(type.edit);
-          break;
-        case "getCurrentWindow":
-          this.getCurrentWindow(type);
-          break;
-        default:
-          break;
-      }
-    } else {
-      switch (type) {
-        case "getFormData":
-          this.getFormData(e);
-          break;
-        case "startTemplateCreation":
-          console.log('Starting to create template');
-          //this.getFormData(e);
-          break;
-        case "moveToTemplates":
-          console.log('moving to templates');
-          this.moveToTemplates();
-          break;
-        case "validateContent":
-          console.log('validating Content');
-          this.validateContent(e);
-          break;
-        default:
-          break;
-      }
-    }
-  };
-
-  removeStandAlone = () => {
-    const schema = _.cloneDeep(this.state.schema);
-    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
-      schema.standalone.sections.splice(0, 1);
-    } else if (this.props.location.query.type === 'embedded') {
-      delete schema.standalone;
-    } else {
-      schema.standalone.sections.splice(1, 1);
-    }
-    this.setState({ schema });
-  };
-
-  validateContent = (e) => {
-    console.log('posting final validation result', this.state.isFormValid);
-    const response = {
-      action: "validateContent",
-      value: this.state.isFormValid,
-    };
-    e.source.postMessage(JSON.stringify(response), e.origin);
-  };
-
-  discardValues = () => {
-    this.resetSchema();
-    this.resetState();
-  };
-
-  resetState = () => {
-    this.setState({
-      formData: {},
-      tabCount: 1,
-      currentTab: 1,
-    });
-  };
-  resetSchema = () => {
-    this.setState({ schema: this.state.initialState ? this.state.initialState : this.state.schema});
-  };
-  showNext = () => {
-    const response = {
-      action: "showNext",
-      value: true,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  };
-  copyContent = () => {
-
-  };
-  addSecondoryCtaIos = (ev) => {
-    const id = ev.target.id;
-    const schema = _.cloneDeep(this.state.schema);
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane, paneIndex) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  _.forEach(inputField.cols, (col) => {
-                    const colId = (paneIndex + 1) > 1 ? col.id + (paneIndex + 1) : col.id;
-                    if (colId === id) {
-                      const inputId = `secondary-cta-${paneIndex}`;
-                      console.log(child.inputFields, fieldIndex);
-                      child.inputFields.splice(fieldIndex, 1, {
-                        rowClassName: 'mobile-push-row',
-                        cols: [
-                          {
-                            id: `${inputId}-label`,
-                            metaType: "label",
-                            value: "Secondary CTA",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 4,
-                            style: {
-                              backgroundColor: 'white',
-                              textAlign: 'left',
-                              color: '#333333',
-                              lineHeight: '24px',
-                              fontSize: '14px',
-                              fontFamily: 'open-sans',
-                              fontStyle: 'normal',
-                              paddingTop: '8px',
-                            },
-                            offset: 0,
-                            onlyDisplay: true,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `${inputId}-table`,
-                            type: "table",  //Resembles component to be used
-                            metaType: "text",
-                            datatype: "string",
-                            pagination: false,
-                            columns: [
-                              {
-                                title: "Name and Description",
-                                dataIndex: "name",
-                                key: "name",
-                                width: 200,
-                                render: (text, record) => (
-                                  <div>
-                                    <div>{record.name}</div>
-                                    <div>{record.description}</div>
-                                  </div>),
-                              },
-                              {
-                                title: "Button 1",
-                                dataIndex: "description",
-                                key: "button1",
-                                width: 100,
-                                render: (text, record) => (
-                                  <div>
-                                    {record.ctaTemplateDetails[0].buttonText}
-                                  </div>),
-                              },
-                              {
-                                title: "Button 2",
-                                dataIndex: "description",
-                                key: "button2",
-                                width: 100,
-                                render: (text, record) => (
-                                  <div>
-                                    {record.ctaTemplateDetails[1] ? record.ctaTemplateDetails[1].buttonText : ''}
-                                  </div>
-                                ),
-                              },
-                            ],
-                            required: true,
-                            width: 16,
-                            fluid: true,
-                            styling: "semantic",
-                            order: 1,
-                            customComponent: false,
-                            supportedEvents: ["onRowClick"],
-                          },
-                        ],
-                      });
-
-                      const colField = col;
-                      colField.value = "Add Another CTA";
-                      colField.fieldsCount += 1;
-                      if (col.fieldsCount === col.fieldsLimit) {
-                        child.inputFields.pop();
-                      }
-                    }
-                  });
-                });
-              }
-            });
-          });
-        });
-      });
-    });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
-    this.props.actions.getIosCtas(this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier);//TODO: need to get license code of accoutn and send as arg
-  };
-  showSelectedIosCta = (selectedConfig) => {
-    const currentTab = this.state.currentTab;
-    const schema = _.cloneDeep(this.state.schema);
-    const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-    const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? _.map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane, paneIndex) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              const formChaild = child;
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  _.forEach(inputField.cols, (col) => {
-                    if (col.id.indexOf(`secondary-cta-${currentTab - 1}-table`) > -1) {
-                      console.log(child, fieldIndex, this.state.formData);
-                      const inputId = `secondary-cta-${paneIndex}`;
-
-                      formChaild.inputFields[fieldIndex] = {
-                        rowClassName: 'mobile-push-row',
-                        cols: [
-                          {
-                            id: `${inputId}-action-label`,
-                            metaType: "label",
-                            value: "Secondary CTA",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 4,
-                            style: {
-                              backgroundColor: 'white',
-                              textAlign: 'left',
-                              color: '#333333',
-                              lineHeight: '24px',
-                              fontSize: '14px',
-                              fontFamily: 'open-sans',
-                              fontStyle: 'normal',
-                              paddingTop: '8px',
-                            },
-                            offset: 0,
-                            onlyDisplay: true,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `${inputId}-label`,
-                            metaType: "label",
-                            value: "",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 16,
-                            style: {
-                              backgroundColor: 'white',
-                              textAlign: 'left',
-                              color: '#333333',
-                              lineHeight: '24px',
-                              fontSize: '14px',
-                              fontFamily: 'open-sans',
-                              fontStyle: 'normal',
-                              paddingTop: '8px',
-                            },
-                            offset: 0,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `${inputId}-delete-ios`,
-                            type: "icon",
-                            value: 'delete',
-                            width: 4,
-                            submitAction: "onDelete",
-                            supportedEvents: ["onDelete"],
-                          },
-                        ],
-                      };
-                      formChaild.inputFields[fieldIndex + 1] = {
-                        rowClassName: 'mobile-push-row',
-                        cols: [
-                          {
-                            id: `${inputId}-action-label-empty`,
-                            metaType: "label",
-                            value: "",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 4,
-                            onlyDisplay: true,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `${inputId}-action`,
-                            metaType: "label",
-                            value: "",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 8,
-                            offset: 0,
-                          },
-                          {
-                            id: `${inputId}-action2`,
-                            metaType: "label",
-                            value: "",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 8,
-                            offset: 0,
-                            style: {display: 'none'},
-                          },
-                        ],
-                      };
-                      if (selectedConfig && (selectedConfig.id !== "16589g0g" && selectedConfig.id !== "17543720" && selectedConfig.id !== "1a491g56")) {
-                        formChaild.inputFields[fieldIndex + 2] = {
-                          rowClassName: "mobile-push-row",
-                          cols: [
-                            {
-                              id: `${inputId}-action-label-empty`,
-                              metaType: "label",
-                              value: "",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              offset: 0,
-                              onlyDisplay: true,
-                            },
-                            {
-                              id: `cta-deeplink-${inputId}`,
-                              type: "radioGroup",  //Resembles component to be used
-                              metaType: "text",
-                              datatype: "string",
-                              options: ["Deeplink", "External Link"],
-                              value: "Deeplink",
-                              required: true,
-                              width: 16,
-                              offSet: 4,
-                              errorMessage: "Please select link type",
-                              fluid: true,
-                              style: {
-                                fontFamily: 'open-sans',
-                                fontSize: '14px',
-                                lineHeight: '24px',
-                              },
-                              styling: "semantic",
-                              order: 1,
-                              supportedEvents: ["onChange"],
-                              customComponent: false,
-                            },
-                          ],
-                        };
-                        formChaild.inputFields[fieldIndex + 3] = {
-                          rowClassName: 'mobile-push-row',
-                          id: 'cta-deeplink-select-section',
-                          cols: [
-                            {
-                              id: "cta-label",
-                              metaType: "label",
-                              value: "",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                            },
-                            {
-                              id: `cta-deeplink-${inputId}-select2`,
-                              placeholder: "Select DeepLink",
-                              type: "select",  //Resembles component to be used
-                              options: deepLinkOptions,
-                              metaType: "text",
-                              datatype: "string",
-                              errorMessage: "Select a deeplink",
-                              required: true,
-                              fluid: true,
-                              width: 19,
-                              style: {
-                                fontSize: '14px',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
-                                // fontWeight: 600,
-                                marginBottom: '16px',
-                              },
-                              styling: "semantic",
-                              order: 1,
-                              customComponent: false,
-                              supportedEvents: [
-                                'onSelect',
-                              ],
-                            },
-                          ],
-                        };
-                      }
-                    }
-                  });
-                });
-              }
-            });
-          });
-        });
-      });
-    });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
-  };
-  addPrimaryCta = (ev) => {
-    const id = ev.target.id;
-    const schema = _.cloneDeep(this.state.schema);
-    const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-    const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? _.map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
-    // const eventsMap = _.cloneDeep(this.state.eventsMap);
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  _.forEach(inputField.cols, (col) => {
-                    const colId = `${col.id}${this.state.currentTab > 1 ? this.state.currentTab : ''}`;
-                    if (colId === id) {
-                      console.log(child.inputFields, fieldIndex);
-                      child.inputFields.splice(fieldIndex, 1, {
-                        rowClassName: 'mobile-push-row',
-                        cols: [
-                          {
-                            id: "cta-label",
-                            metaType: "label",
-                            value: "Primary CTA",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 4,
-                            style: {
-                              backgroundColor: 'white',
-                              textAlign: 'left',
-                              color: '#333333',
-                              lineHeight: '24px',
-                              fontSize: '14px',
-                              fontFamily: 'open-sans',
-                              fontStyle: 'normal',
-                            },
-                            offset: 0,
-                            onlyDisplay: true,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
-                            type: "radioGroup",  //Resembles component to be used
-                            metaType: "text",
-                            datatype: "string",
-                            options: ["Deeplink", "External Link"],
-                            value: "Deeplink",
-                            required: true,
-                            width: 18,
-                            errorMessage: "Please select link type",
-                            fluid: true,
-                            styling: "semantic",
-                            order: 1,
-                            customComponent: false,
-                            supportedEvents: ["onChange"],
-                          },
-                          {
-                            id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-delete`,
-                            type: "icon",
-                            value: 'delete',
-                            width: 1,
-                            submitAction: "onDelete",
-                            supportedEvents: ["onDelete"],
-                          },
-                        ],
-                      });
-                      child.inputFields.splice(fieldIndex + 1, 0, {
-                        rowClassName: 'mobile-push-row',
-                        id: 'cta-deeplink-select-section',
-                        cols: [
-                          {
-                            id: "cta-label",
-                            metaType: "label",
-                            value: "",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 4,
-                            onlyDisplay: true,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
-                            placeholder: "Select DeepLink",
-                            type: "select",  //Resembles component to be used
-                            options: deepLinkOptions,
-                            metaType: "text",
-                            datatype: "string",
-                            required: true,
-                            errorMessage: "Select a deeplink",
-                            fluid: true,
-                            width: 19,
-                            style: {
-                              fontSize: '14px',
-                              fontFamily: 'open-sans',
-                              fontStyle: 'normal',
-                              // fontWeight: 600,
-                              marginBottom: '16px',
-                            },
-                            styling: "semantic",
-                            order: 1,
-                            customComponent: false,
-                            supportedEvents: [
-                              'onSelect',
-                            ],
-                          },
-                        ],
-                      });
-                    }
-                  });
-                });
-              }
-            });
-          });
-        });
-      });
-    });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
-  };
-  addSecondoryCta = (ev) => {
-    const id = ev.target.id;
-    const schema = _.cloneDeep(this.state.schema);
-    const ck = this.props.Templates.selectedWeChatAccount.configs ? !!this.props.Templates.selectedWeChatAccount.configs.deeplink : false;
-    const deeplinks = ck ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-    const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? _.map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
-    // const eventsMap = _.cloneDeep(this.state.eventsMap);
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  _.forEach(inputField.cols, (col) => {
-                    if (col.id === id) {
-                      if (col.fieldsCount < col.fieldsLimit) {
-                        const inputId = `secondary-cta-${col.fieldsCount}`;
-                        console.log(child.inputFields, fieldIndex);
-                        child.inputFields.splice(fieldIndex, 0, {
-                          rowClassName: 'mobile-push-row',
-                          cols: [
-                            {
-                              id: `${inputId}-space`,
-                              metaType: "label",
-                              value: "Secondary CTA",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              style: {
-                                backgroundColor: 'white',
-                                textAlign: 'left',
-                                color: '#333333',
-                                lineHeight: '24px',
-                                fontSize: '14px',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
-                                paddingTop: '8px',
-                              },
-                              offset: 0,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                            },
-                            {
-                              id: `${inputId}-label`,
-                              label: "link",
-                              type: "input",  //Resembles component to be used
-                              metaType: "text",
-                              datatype: "string",
-                              required: true,
-                              width: 18,
-                              offset: 4,
-                              placeholder: "Enter CTA Label here",
-                              fluid: true,
-                              styling: "semantic",
-                              order: 1,
-                              customComponent: false,
-                              errorMessage: "CTA label cannot be empty.",
-                            },
-                            {
-                              id: `${inputId}-delete`,
-                              type: "icon",
-                              value: 'delete',
-                              width: 1,
-                              submitAction: "onDelete",
-                              supportedEvents: ["onDelete"],
-                            },
-                          ],
-                        });
-                        child.inputFields.splice(fieldIndex + 1, 0, {
-                          rowClassName: 'mobile-push-row',
-                          cols: [
-                            {
-                              id: `${inputId}-label-space`,
-                              metaType: "label",
-                              value: "",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              style: {
-                                backgroundColor: 'white',
-                                textAlign: 'left',
-                                color: '#333333',
-                                lineHeight: '24px',
-                                fontSize: '14px',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
-                                paddingTop: '8px',
-                              },
-                              offset: 0,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                            },
-                            {
-                              id: `cta-deeplink-${inputId}`,
-                              type: "radioGroup",  //Resembles component to be used
-                              metaType: "text",
-                              datatype: "string",
-                              options: ["Deeplink", "External Link"],
-                              value: "Deeplink",
-                              required: true,
-                              width: 16,
-                              errorMessage: "Please select link type",
-                              fluid: true,
-                              styling: "semantic",
-                              order: 1,
-                              style: {
-                                lineHeight: '24px',
-                                fontSize: '14px',
-                              },
-                              customComponent: false,
-                              supportedEvents: ["onChange"],
-                            },
-                          ],
-                        });
-                        child.inputFields.splice(fieldIndex + 2, 0, {
-                          rowClassName: 'mobile-push-row',
-                          id: 'cta-deeplink-select-section',
-                          cols: [
-                            {
-                              id: "cta-label",
-                              metaType: "label",
-                              value: "",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                            },
-                            {
-                              id: `cta-deeplink-${inputId}-select`,
-                              placeholder: "Select DeepLink",
-                              type: "select",  //Resembles component to be used
-                              options: deepLinkOptions,
-                              errorMessage: "Select a deeplink",
-                              metaType: "text",
-                              datatype: "string",
-                              required: true,
-                              fluid: true,
-                              width: 19,
-                              style: {
-                                fontSize: '14px',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
-                                // fontWeight: 600,
-                                marginBottom: '16px',
-                              },
-                              styling: "semantic",
-                              order: 1,
-                              customComponent: false,
-                              supportedEvents: [
-                                'onSelect',
-                              ],
-                            },
-                          ],
-                        });
-                        const colField = col;
-                        colField.value = "Add Another CTA";
-                        colField.fieldsCount += 1;
-                        if (col.fieldsCount === col.fieldsLimit) {
-                          child.inputFields.pop();
-                        }
-                        // eventsMap[`cta-deeplink-${inputId}`] = {"onChange": this.onLinkTypeChange};
-                      }
-                    }
-                  });
-                });
-              }
-            });
-          });
-        });
-      });
-    });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
-  };
-  copyIphoneContent = () => {
-    const formData = _.cloneDeep(this.state.formData);
-    if (!!formData[1]['message-title2'] && !!formData[1]['message-editor2']) {
-      formData[0]['message-title'] = formData[1]['message-title2'];
-      formData[0]['message-editor'] = formData[1]['message-editor2'];
-      this.setState({formData});
-    } else {
-      this.openNotificationWithIcon('warning', "Cannot copy empty field values.");
-    }
-  };
-  copyAndroidContent = () => {
-    const formData = _.cloneDeep(this.state.formData);
-    if (!!formData[0]['message-title'] && !!formData[0]['message-editor']) {
-      formData[1]['message-title2'] = formData[0]['message-title'];
-      formData[1]['message-editor2'] = formData[0]['message-editor'];
-      this.setState({formData});
-    } else {
-      this.openNotificationWithIcon('warning', "Cannot copy empty field values.");
-    }
-  };
-  uploadImage = (data) => {
-    if (data.fileParams.error) {
-      const message = getMessageObject('error', this.props.intl.formatMessage(messages["File size cannot be more than 5mb"]), true);
-      this.props.globalActions.addMessageToQueue(message);
-    } else {
-      const name = data.file.name.split('.');
-      const blob = data.file.slice(0, -1, 'image');
-      const newFile = new File([blob], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
-      this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
-    }
-  };
-  selectCtaIos = (selectedConfig) => {
-    this.showSelectedIosCta(selectedConfig);
-  };
-
-  showCtaKeys = (eventTriggered, formData, field) => {
-    console.log(this.props.Templates);
-    const schema = _.cloneDeep(this.state.schema);
-    const eventsMap = _.cloneDeep(this.state.eventsMap);
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              const formChaild = child;
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  _.forEach(inputField.cols, (col) => {
-                    if (col.id === field.id) {
-                      const formDataKey = col.id.replace("-show-keys", "");
-                      const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-                      let keys = this.props.Templates.selectedWeChatAccount ? _.filter(JSON.parse(deeplinks), (dl) => dl.link === formData[this.state.currentTab - 1][formDataKey]) : [];
-                      if (keys[0]) {
-                        keys = keys[0].keys;
-                      }
-                      let rows = _.map(keys, (key) => {
-                        const row = {
-                          rowClassName: 'mobile-push-row',
-                          id: 'cta-deeplink-keys',
-                          cols: [
-                            {
-                              id: `${key}-space`,
-                              metaType: "label",
-                              value: "",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              offset: 0,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                            },
-                            {
-                              id: `${key}-label`,
-                              metaType: "label",
-                              value: key.replace('_', " "),
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 5,
-                              style: {
-                                backgroundColor: 'white',
-                                textAlign: 'left',
-                                lineHeight: '24px',
-                                fontSize: '14px',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
-                                cursor: 'pointer',
-                                paddingTop: '8px',
-                              },
-                              offset: 0,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                            },
-                            {
-                              id: `custom-value-${key}-${col.id}`,
-                              label: "value",
-                              type: "input",  //Resembles component to be used
-                              metaType: "text",
-                              datatype: "string",
-                              required: true,
-                              width: 14,
-                              placeholder: `Please input ${key.replace('_', " ")} here .`,
-                              fluid: true,
-                              styling: "semantic",
-                              order: 1,
-                              customComponent: false,
-                              errorMessage: "value cannot be empty.",
-                            },
-                          ],
-                        };
-                        //eventsMap[`custome-${key}`] = {"onChange": this.onMessageTitleChange};
-                        return row;
-                        // formChaild.inputFields[fieldIndex + index] = field;
-                      });
-                      console.log(formChaild);
-                      console.log("this in getctakeys", this);
-                      const configkeys = _.filter(JSON.parse(deeplinks), (dl) => dl.link === this.state.formData[this.state.currentTab - 1][field.id]);
-                      if (configkeys.length) {
-                        const options = configkeys[0].keys;
-                        formChaild.inputFields = formChaild.inputFields.slice(0, fieldIndex + 1).concat(formChaild.inputFields.slice( fieldIndex + options.length + 1, formChaild.inputFields.length));
-                        // delete formData[self.state.currentTab - 1][`cta-deeplink-${id.replace('delete', 'select')}`];
-                        // delete formData[self.state.currentTab - 1][`cta-deeplink-${id.replace('-delete', '')}`];
-                      }
-                      if (formChaild.inputFields[fieldIndex + 1] && formChaild.inputFields[fieldIndex + 1].id === "cta-deeplink-keys") {
-                        rows = formChaild.inputFields.slice(0, fieldIndex + 1).concat(rows).concat(formChaild.inputFields.slice(fieldIndex + 1, formChaild.inputFields.length));
-                        formChaild.inputFields = rows;
-                      } else {
-                        rows = formChaild.inputFields.slice(0, fieldIndex + 1).concat(rows).concat(formChaild.inputFields.slice(fieldIndex + 1, formChaild.inputFields.length));
-                        formChaild.inputFields = rows;
-                      }
-                    }
-                  });
-                });
-              }
-            });
-          });
-        });
-      });
-    });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, eventsMap, isSchemaChanged: true});
-    this.injectEvents(schema);
-  };
-  saveFormData = (formData) => {
-    console.log('Saving form data', formData, this.state.tabCount);
-    const obj = this.getTransformedData(formData);
-    console.log('obj', obj);
-    this.props.actions.createTemplate(obj);
-  };
-  deleteSecondaryCtaIos = (event) => {
-    const id = event.currentTarget.id;
-    const schema = _.cloneDeep(this.state.schema);
-    // const eventsMap = _.cloneDeep(this.state.eventsMap);
-    const selectedDeeplink = this.state.formData[this.state.currentTab - 1][`cta-deeplink-${id.replace('delete-ios', 'select2')}`];
-    const formData = _.cloneDeep(this.state.formData);
-    const self = this;
-    const device = this.state.currentTab === 1 ? 'android' : 'ios';
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (formChild) => {
-              const child = formChild;
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  if (inputField) {
-                    _.forEach(inputField.cols, (col) => {
-                      if (col.id === id) {
-                        child.inputFields.splice(fieldIndex, 3);
-                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-external-link") {
-                          child.inputFields.splice(fieldIndex, 1);
-                        }
-                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
-                          const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-                          const configkeys = this.props.Templates.selectedWeChatAccount ? _.filter(JSON.parse(deeplinks), (dl) => dl.link === selectedDeeplink) : [];
-                          if (configkeys.length) {
-                            const options = configkeys[0].keys;
-                            child.inputFields = child.inputFields.slice(0, fieldIndex).concat(child.inputFields.slice( fieldIndex + options.length + 1, child.inputFields.length));
-                            delete formData[self.state.currentTab - 1][`cta-deeplink-${id.replace('delete', 'select')}`];
-                            delete formData[self.state.currentTab - 1][`cta-deeplink-${id.replace('-delete', '')}`];
-                          } else {
-                            child.inputFields.splice(fieldIndex, 1);
-                          }
-                        }
-                        if (device === 'ios') {
-                          child.inputFields[fieldIndex] = {
-                            cols: [
-                              {
-                                id: "add-sec-cta-ios",
-                                metaType: "label",
-                                value: "Add Secondary CTA",
-                                primitive: true,
-                                dynamicTab: false,
-                                type: "div",
-                                style: {
-                                  backgroundColor: 'white',
-                                  textAlign: 'left',
-                                  color: '#2673D7',
-                                  lineHeight: '24px',
-                                  marginTop: '16px',
-                                  fontSize: '14px',
-                                  fontWeight: '600',
-                                  fontFamily: 'open-sans',
-                                  fontStyle: 'normal',
-                                  cursor: 'pointer',
-                                },
-                                offset: 0,
-                                onlyDisplay: true,
-                                colStyle: {
-                                  flex: 1,
-                                },
-                                submitAction: "addSecondaryCtaIos",
-                                supportedEvents: ["addSecondaryCtaIos"],
-                              },
-                            ],
-                          };
-                        }
-                      }
-                    });
-                  }
-                });
-              }
-            });
-          });
-        });
-      });
-    });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, formData, isSchemaChanged: true});
-    this.injectEvents(schema);
-  };
-  deletePrimaryCTA = (event) => {
-    const id = event.currentTarget.id;
-    const schema = _.cloneDeep(this.state.schema);
-    // const eventsMap = _.cloneDeep(this.state.eventsMap);
-    const selectedDeeplink = this.state.formData[this.state.currentTab - 1][`${id.replace('delete', 'select')}`];
-    const formData = _.cloneDeep(this.state.formData);
-    const self = this;
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (formChild) => {
-              const child = formChild;
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  if (inputField) {
-                    _.forEach(inputField.cols, (col) => {
-                      if (col.id === id) {
-                        child.inputFields.splice(fieldIndex, 1);
-                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-external-link") {
-                          child.inputFields.splice(fieldIndex, 1);
-                        }
-                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
-                          const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-                          const configkeys = this.props.Templates.selectedWeChatAccount ? _.filter(JSON.parse(deeplinks), (dl) => dl.link === selectedDeeplink) : [];
-                          if (configkeys.length) {
-                            const options = configkeys[0].keys;
-                            child.inputFields = child.inputFields.slice(0, fieldIndex).concat(child.inputFields.slice( fieldIndex + options.length + 1, child.inputFields.length));
-                            delete formData[self.state.currentTab - 1][`${id.replace('delete', 'select')}`];
-                            delete formData[self.state.currentTab - 1][`${id.replace('-delete', '')}`];
-                          } else {
-                            child.inputFields.splice(fieldIndex, 1);
-                          }
-                        }
-                        child.inputFields.splice(fieldIndex, 0, {
-                          cols: [
-                            {
-                              id: `${this.state.currentTab === 1 ? "add-pri-cta" : "add-pri-cta-ios"}`,
-                              metaType: "label",
-                              value: "Add Primary CTA",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              style: {
-                                backgroundColor: 'white',
-                                textAlign: 'left',
-                                color: '#2673D7',
-                                lineHeight: '24px',
-                                fontSize: '14px',
-                                fontWeight: '600',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
-                                cursor: 'pointer',
-                              },
-                              offset: 0,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                              submitAction: "addPrimaryCta",
-                              supportedEvents: ["addPrimaryCta"],
-                            },
-                          ],
-                        });
-                      }
-                    });
-                  }
-                });
-              }
-            });
-          });
-        });
-      });
-    });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, formData, isSchemaChanged: true});
-    this.injectEvents(schema);
-  };
-
-  deleteSecondaryCTA = (event) => {
-    const id = event.currentTarget.id;
-    if (id === "secondary-cta-0-delete") {
-      const secCta2 = document.getElementById("secondary-cta-1-delete");
-      if (secCta2) {
-        const modalContent = {title: "Alert", body: this.props.intl.formatMessage(messages["Please delete second Secondary cta First"]), type: 'info', show: true, onCancel: this.onModalCancel};
-        this.setState({modalContent, showModal: true});
-        return;
-      }
-    }
-    const schema = _.cloneDeep(this.state.schema);
-    // const eventsMap = _.cloneDeep(this.state.eventsMap);
-    const selectedDeeplink = this.state.formData[this.state.currentTab - 1][`cta-deeplink-${id.replace('delete', 'select')}`];
-    const formData = _.cloneDeep(this.state.formData);
-    const device = this.state.currentTab === 1 ? 'android' : 'ios';
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (formChild) => {
-              const child = formChild;
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  if (inputField) {
-                    _.forEach(inputField.cols, (col) => {
-                      if (col.id === id) {
-                        if (device === 'ios') {
-                          child.inputFields.splice(fieldIndex, 3);
-                        } else {
-                          child.inputFields.splice(fieldIndex, 2);
-                        }
-                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-external-link") {
-                          child.inputFields.splice(fieldIndex, 1);
-                        }
-                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
-                          const ck = this.props.Templates.selectedWeChatAccount.configs ? !!this.props.Templates.selectedWeChatAccount.configs.deeplink : false;
-                          const deeplinks = ck ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-                          const configkeys = this.props.Templates.selectedWeChatAccount ? _.filter(JSON.parse(deeplinks), (dl) => dl.link === selectedDeeplink) : [];
-                          if (configkeys.length) {
-                            const options = configkeys[0].keys;
-                            child.inputFields = child.inputFields.slice(0, fieldIndex).concat(child.inputFields.slice( fieldIndex + options.length + 1, child.inputFields.length));
-                          } else {
-                            child.inputFields.splice(fieldIndex, 1);
-                          }
-                        }
-                        if (device === 'ios') {
-                          child.inputFields[fieldIndex] = {
-                            cols: [
-                              {
-                                id: "add-sec-cta-ios",
-                                metaType: "label",
-                                value: "Add Secondary CTA",
-                                primitive: true,
-                                dynamicTab: false,
-                                type: "div",
-                                style: {
-                                  backgroundColor: 'white',
-                                  textAlign: 'left',
-                                  color: '#2673D7',
-                                  lineHeight: '24px',
-                                  fontSize: '14px',
-                                  marginTop: '16px',
-                                  fontWeight: '600',
-                                  fontFamily: 'open-sans',
-                                  fontStyle: 'normal',
-                                  cursor: 'pointer',
-                                },
-                                offset: 0,
-                                onlyDisplay: true,
-                                colStyle: {
-                                  flex: 1,
-                                },
-                                submitAction: "addSecondaryCtaIos",
-                                supportedEvents: ["addSecondaryCtaIos"],
-                              },
-                            ],
-                          };
-                        } else {
-                          if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].cols[0] && child.inputFields[fieldIndex].cols[0].id === "add-sec-cta") {
-                            child.inputFields[fieldIndex] = {
-                              cols: [
-                                {
-                                  id: "add-sec-cta",
-                                  metaType: "label",
-                                  value: "Add Secondary CTA",
-                                  primitive: true,
-                                  dynamicTab: false,
-                                  type: "div",
-                                  style: {
-                                    backgroundColor: 'white',
-                                    textAlign: 'left',
-                                    color: '#2673D7',
-                                    lineHeight: '24px',
-                                    fontSize: '14px',
-                                    fontWeight: '600',
-                                    marginTop: '16px',
-                                    fontFamily: 'open-sans',
-                                    fontStyle: 'normal',
-                                    cursor: 'pointer',
-                                  },
-                                  offset: 0,
-                                  onlyDisplay: true,
-                                  colStyle: {
-                                    flex: 1,
-                                  },
-                                  submitAction: "addSecondaryCta",
-                                  supportedEvents: ['addSecondaryCta'],
-                                  fieldsLimit: 2,
-                                  fieldsCount: 0,
-                                },
-                              ],
-                            };
-                          }
-                          if (id === "secondary-cta-1-delete" || child.inputFields[fieldIndex].cols[0].id === "cta-label" || child.inputFields[fieldIndex].cols[0].id === "secondary-cta-1-space") {
-                            let nextFieldIndex = fieldIndex;
-                            if (id === "secondary-cta-1-delete" || child.inputFields[fieldIndex].cols[0].id === "secondary-cta-1-space") {
-                              nextFieldIndex = child.inputFields.length;
-                            }
-                            child.inputFields[nextFieldIndex] = {
-                              cols: [
-                                {
-                                  id: "add-sec-cta",
-                                  metaType: "label",
-                                  value: "Add Another CTA",
-                                  primitive: true,
-                                  dynamicTab: false,
-                                  type: "div",
-                                  style: {
-                                    backgroundColor: 'white',
-                                    textAlign: 'left',
-                                    color: '#2673D7',
-                                    lineHeight: '24px',
-                                    fontSize: '14px',
-                                    fontWeight: '600',
-                                    fontFamily: 'open-sans',
-                                    fontStyle: 'normal',
-                                    cursor: 'pointer',
-                                  },
-                                  offset: 0,
-                                  onlyDisplay: true,
-                                  colStyle: {
-                                    flex: 1,
-                                  },
-                                  submitAction: "addSecondaryCta",
-                                  supportedEvents: ['addSecondaryCta'],
-                                  fieldsLimit: 2,
-                                  fieldsCount: 1,
-                                },
-                              ],
-                            };
-                          }
-                        }
-                      }
-                    });
-                  }
-                });
-              }
-            });
-          });
-        });
-      });
-    });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, formData, isSchemaChanged: true});
-    this.injectEvents(schema);
-  };
-  handleOnTagsContextChange = (data) => {
-    console.log('parent tags context', data);
-    const query = {
-      layout: 'mobilepush',
-      type: 'TAG',
-      context: data.toLowerCase() === 'all' ? 'default' : data.toLowerCase(),
-      embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
-    };
-    this.props.globalActions.fetchSchemaForEntity(query);
-  };
-  render() {
-    let tipText = this.props.Create.createTemplateInProgress ? "Saving Template..." : "";
-    let loading = this.props.Create.createTemplateInProgress ? this.props.Create.createTemplateInProgress : false;
-    if (this.props.Create.assetUploading) {
-      tipText = "Uploading Image...";
-      loading = true;
-    }
-    return (
-      <div>
-        <Spin tip={tipText} spinning={loading}>
-          <Row style={{marginLeft: '-48px'}}>
-            <Col offset={1}>
-              <Breadcrumb>
-                <BreadcrumbItem>{this.props.intl.formatMessage(messages.Campaigns)}</BreadcrumbItem>
-                <BreadcrumbItem>{this.props.intl.formatMessage(messages.Creatives)}</BreadcrumbItem>
-                <BreadcrumbItem>{this.props.intl.formatMessage(messages["Mobile Push"])}</BreadcrumbItem>
-              </Breadcrumb>
-            </Col>
-          </Row>
-          <Row>
-            <Col>
-              <FormBuilder
-                key={"form builder"}
-                schema={this.state.schema}
-                onSubmit={this.saveFormData}
-                onChange={this.onFormDataChange}
-                currentTab={this.state.currentTab}
-                parent={this}
-                formData={_.cloneDeep(this.state.formData)}
-                location={this.props.location}
-                tags={this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : []}
-                injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
-                onFormValidityChange={this.setFormValidity}
-                usingTabContainer
-                checkValidation={false}
-                iosCtasData={this.state.iosCtasData}
-                tabKey={this.state.tabKey}
-                tabCount={2}
-                showModal={this.state.showModal}
-                isSchemaChanged={this.state.isSchemaChanged}
-                modal={this.state.modalContent}
-                handleCancelModal={this.handleCancelModal}
-                iframeParent={parent}
-                router={this.props.router}
-                onContextChange={this.handleOnTagsContextChange}
-                setModalContent={this.setModalContent}
-              />
-            </Col>
-          </Row>
-        </Spin>
-      </div>
-    );
-  }
-}
-
-Create.propTypes = {
-  actions: PropTypes.object.isRequired,
-  Create: PropTypes.object,
-  router: PropTypes.object,
-  location: PropTypes.object,
-  route: PropTypes.object,
-  globalActions: PropTypes.object,
-  metaEntities: PropTypes.object,
-  params: PropTypes.object,
-  Templates: PropTypes.object,
-  intl: intlShape.isRequired,
-};
-
-const mapStateToProps = createStructuredSelector({
-  Create: makeSelectCreate(),
-  createResponse: makeSelectCreateResponse(),
-  metaEntities: makeSelectMetaEntities(),
-  Templates: makeSelectTemplates(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Create));