@capillarytech/creatives-library 1.0.2 → 2.0.0

package/containers/MobilePush/Edit/index.js

@@ -0,0 +1,2569 @@
+
+/*
+ *
+ * Create
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import {bindActionCreators} from "redux";
+import { connect } from 'react-redux';
+import { Row, Col, Spin, Breadcrumb, notification } from 'antd';
+import { createStructuredSelector } from 'reselect';
+import { injectIntl, intlShape } from 'react-intl';
+import _ from 'lodash';
+import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse} from "../../MobilePush/Edit/selectors";
+import {makeSelectMetaEntities} from "../../Cap/selectors";
+import {getMessageObject} from "../../../utils/messageUtils";
+import FormBuilder from '../../../components/FormBuilder';
+import * as globalActions from "../../Cap/actions";
+import * as actions from "../../MobilePush/Edit/actions";
+import * as templatesActions from "../../Templates/actions";
+import {makeSelectTemplates} from "../../Templates/selectors";
+import messages from './messages';
+import './_mobilePushCreate.scss';
+import {makeSelectCreate} from "../Create/selectors";
+const BreadcrumbItem = Breadcrumb.Item;
+
+export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    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-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-1-select2": {
+        "onSelect": this.showCtaKeys,
+      },
+      "cta-deeplink-secondary-cta-0-select": {
+        "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,
+      },
+      "mobilepush-template": {
+        "onSelect": this.onTemplateChange,
+      },
+    };
+    this.state = {
+      formData: {},
+      tabCount: 1,
+      schema: {},
+      currentTab: 1,
+      editData: {},
+      loading: false,
+      isFormValid: true,
+      injectedTags: {},
+      showModal: false,
+      eventsMap: map,
+      modalContent: {title: "Alert", body: this.props.intl.formatMessage(messages['template not configured,']), type: 'confirm'},
+    };
+  }
+  componentWillMount() {
+    console.log('edit mounting');
+    this.props.actions.getWeCrmAccounts("mobilepush");
+    if (!this.props.Templates.selectedWeChatAccount && this.props.location.query.type !== 'embedded') {
+      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},
+      });
+    } else {
+      const query = {
+        layout: 'MOBILEPUSH',
+        type: 'LAYOUT',
+      };
+      this.props.globalActions.fetchSchemaForEntity(query);
+      console.log(this.props.params);
+    }
+  }
+  componentDidMount() {
+    window.addEventListener("message", this.handleFrameTasks);
+    if (!_.isEmpty(this.state.schema)) {
+      this.injectEvents(this.state.schema);
+    }
+    if (this.props.location.query && typeof this.props.location.query.module === 'undefined') { // when this containers is imported from creatives library
+      if (this.props.params.id) {
+        this.props.actions.getTemplateDetails(this.props.params.id);
+      } else {
+        this.props.actions.setTemplateDetails(this.props.templateData);
+      }
+    }
+  }
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.isGetFormData) {
+      nextProps.getFormLibraryData(this.getFormData());
+    }
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    if (this.props.location.query.type === 'embedded' && !nextProps.Edit.fetchingWeCrmAccounts && !_.isEqual(this.props.Edit.weCrmAccounts, nextProps.Edit.weCrmAccounts) && (!selectedWeChatAccount || _.isEmpty(selectedWeChatAccount))) {
+      console.log('got new accounts setting account again', nextProps.Edit.weCrmAccounts);
+      this.setMobilePushAccountOptions(nextProps.Edit.weCrmAccounts);
+    }
+    if (!_.isEmpty(nextProps.Edit.selectedWeChatAccount) && !_.isEqual(this.props.Edit.selectedWeChatAccount, nextProps.Edit.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && this.props.location.query.module === "loyalty") {
+      const params = {
+        name: '',
+        sortBy: 'Most Recent',
+        accountId: nextProps.Edit.selectedWeChatAccount.id,
+      };
+      this.props.actions.getMobilepushTemplatesList('mobilepush', params);
+    }
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema)) {
+      this.setState({fullSchema: nextProps.metaEntities.layouts[0].definition, schema: (nextProps.location.query.module === 'loyalty') ? nextProps.metaEntities.layouts[0].definition.textSchema : {}}, () => {
+        if (nextProps.location.query.module !== 'loyalty' && this.props.params.id !== 'temp') {
+          this.props.actions.getTemplateDetails(this.props.params.id);
+        }
+        const type = this.props.location.query.type;
+        if (type === 'embedded' && this.props.params.id === 'temp' && _.isEmpty(this.state.formData)) { // when his.props.params.id is temp that means mobile push template content will be passed from post message from parent with startTemplateCreation action
+          const response = {
+            action: 'startTemplateCreation',
+          };
+          parent.postMessage(JSON.stringify(response), '*');
+          this.getTags();
+        }
+      });
+      if (this.props.location.query.type === 'embedded') {
+        this.showNext();
+      }
+    }
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && nextProps.Edit.mobilepushTemplates && !_.isEqual(nextProps.Edit.mobilepushTemplates, this.props.Edit.mobilepushTemplates)) { //used inloyalty
+      if (nextProps.location.query.type === 'embedded' && nextProps.location.query.module === 'loyalty') {
+        this.setTemplateOptions(nextProps.Edit.mobilepushTemplates);
+      }
+    }
+    if (nextProps.templateDetails && nextProps.templateDetails.name && _.isEmpty(this.state.editData) && (this.props.location.query.type !== 'embedded' || (!_.isEmpty(this.state.fullSchema) && selectedWeChatAccount))) {
+      this.props = nextProps;
+      const mode = nextProps.templateDetails.definition ? nextProps.templateDetails.definition.mode : nextProps.templateDetails.mode;
+      const schema = mode === "text" ? this.state.fullSchema.textSchema : this.state.fullSchema.imageSchema;
+      this.setEditState(nextProps.templateDetails, schema);
+      this.getTags();
+    }
+    if (nextProps.Edit.uploadedAssetData) {
+      const formData = _.cloneDeep(this.state.formData);
+      formData[this.state.currentTab - 1].image = nextProps.Edit.uploadedAssetData.metaInfo.public_url;
+      this.setState({formData});
+      this.props.actions.clearAsset();
+    }
+    if (nextProps.Edit.iosCtasData) {
+      this.setState({iosCtasData: nextProps.Edit.iosCtasData});
+    }
+    if (nextProps.Edit.editResponse && nextProps.Edit.editResponse.templateId) {
+      console.log('reseting schema');
+      this.resetSchema();
+      this.setState({
+        formData: {},
+        tabCount: 1,
+        currentTab: 1,
+        editData: {},
+      });
+      const message = getMessageObject('success', this.props.intl.formatMessage(messages['MOBILEPUSH Template Edited Successfully']), true);
+      this.props.globalActions.addMessageToQueue(message);
+      this.props.actions.clearEditResponse();
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      const type = this.props.location.query.type;
+      this.props.router.push({
+        pathname: `/mobilepush/`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
+    }
+
+    if (nextProps.Edit.editTemplateError && !_.isEqual(nextProps.Edit.editTemplateError, this.props.Edit.editTemplateError)) {
+      const message = getMessageObject('error', (nextProps.Edit.editTemplateErrorMessage && nextProps.Edit.editTemplateErrorMessage !== '') ? nextProps.Edit.editTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
+      this.props.globalActions.addMessageToQueue(message);
+    }
+    // if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && this.props.metaEntities.tags !== nextProps.metaEntities.tags) {
+    //   let injectedTags = _.cloneDeep(this.state.injectedTags);
+    //   injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
+    //   this.setState({injectedTags});
+    // }
+    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() {
+    this.props.actions.clearData();
+    window.removeEventListener("message", this.handleFrameTasks);
+  }
+  onTemplateChange = (isEvent, formData) => {
+    _.forEach(this.props.Edit.mobilepushTemplates, (template) => {
+      if (template._id === formData['mobilepush-template']) {
+        this.setState({editData: {}, formData: {}}, () => {
+          this.props.actions.setSelectedTemplate(template);
+        });
+      }
+    });
+  };
+  onFormDataChange = (formData, tabCount, currentTab) => {
+    console.log('Form data changed is ', formData, tabCount, currentTab);
+    const newFormData = _.cloneDeep(formData);
+    if (newFormData[this.state.currentTab - 1] && 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 (newFormData["mobilepush-accounts"] !== this.state.formData["mobilepush-accounts"]) {
+      this.setMobilePushAccountOptions(this.props.Edit.weCrmAccounts, newFormData["mobilepush-accounts"]);
+      delete newFormData['mobilepush-template'];
+      delete newFormData['template-name'];
+      if (!_.isEmpty(newFormData[0])) {
+        delete newFormData[0];
+      }
+      if (!_.isEmpty(newFormData[1])) {
+        delete newFormData[1];
+      }
+    }
+    if (this.state.isSchemaChanged) {
+      this.setState({isSchemaChanged: false});
+    }
+    this.setState({formData: newFormData, tabCount});
+    if (currentTab) {
+      this.setState({currentTab});
+    }
+  };
+
+  onLinkTypeChange = (eventTriggered, formData, field, tabIndex, inputSchema) => {
+    const currentTab = tabIndex || this.state.currentTab;
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const schema = inputSchema ? _.cloneDeep(inputSchema) : _.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 && currentTab === paneIndex + 1) {
+                        console.log(child, fieldIndex, this.state.formData);
+                        const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+                        const deepLinkOptions = _.map(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (link) => ({label: link.name, value: link.link, title: link.link }) );
+                        const deeplinkValue = formData[currentTab - 1][field.id];
+                        const componentIndex = fieldIndex + 1;
+                        let inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${col.id}-select` : `${col.id}-text`;
+                        if (field.id === "cta-deeplink-secondary-cta-1" && (tabIndex > 1 || this.state.currentTab > 1)) {
+                          inputId = `${inputId}${tabIndex || this.state.currentTab}`;
+                        }
+                        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,
+                                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,
+                                disabled: this.props.location.query.type === 'embedded' && this.props.location.query.module !== "dvs",
+                                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,
+                                disabled: this.props.location.query.type === 'embedded' && this.props.location.query.module !== "dvs",
+                                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") {
+                              const dataIndex = tabIndex || this.state.currentTab;
+                              let selector = `${col.id}-select`;
+                              if (field.id === "cta-deeplink-secondary-cta-1" && (tabIndex > 1 || this.state.currentTab > 1)) {
+                                selector = `${selector}${tabIndex || this.state.currentTab}`;
+                              }
+                              let configkeys = _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === formData[dataIndex - 1][selector]);
+                              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);
+                          }
+                        }
+                      }
+                    });
+                  }
+                });
+              }
+            });
+          });
+        });
+      });
+    });
+    if (tabIndex) {
+      return schema;
+    }
+    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
+    this.injectEvents(schema);
+    return schema;
+  };
+
+  onTabChange = (data) => {
+    console.log('inside parent ontabchange', data, this.state);
+    this.setState({currentTab: data});
+  };
+
+  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();
+  };
+  onModalCancel = () => {
+    if (this.state.modalContent && this.state.modalContent.show) {
+      this.setState({modalContent: {...this.state.modalContent, show: false}});
+    }
+  };
+  getTags = () => {
+    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',
+    };
+    if (this.props.getDefaultTags) {
+      query.context = this.props.getDefaultTags;
+    }
+    this.props.globalActions.fetchSchemaForEntity(query);
+  }
+  setTemplateOptions = (mobilepushTemplates) => {
+    const templateOptions = [];
+    let selectedTemplate = {};
+    if (!_.isEmpty(mobilepushTemplates)) {
+      _.forEach(mobilepushTemplates, (template) => {
+        templateOptions.push({
+          key: template._id,
+          label: template.name,
+          value: template._id,
+        });
+        if (this.state.formData['mobilepush-template'] && template._id === this.state.formData['mobilepush-template']) {
+          selectedTemplate = template;
+        }
+      });
+    }
+    this.setState({templateOptions}, () => {
+      if (!_.isEmpty(selectedTemplate)) {
+        this.props.actions.setSelectedTemplate(selectedTemplate);
+      }
+      if (!_.isEmpty(this.state.schema)) {
+        this.injectEvents(this.state.schema);
+      }
+    });
+  };
+  setMobilePushAccountOptions = (accounts, newAccountId) => {
+    let accId = newAccountId || this.props.location.query.account_id;
+    if (this.props.location.query.module !== "loyalty" && this.props.location.query.module !== "dvs") {
+      accId = Number(accId);
+    }
+    const formData = _.cloneDeep(this.state.formData);
+    let selectedAccount = {};
+    if (accId) {
+      _.forEach(accounts, (account) => {
+        let acccountId = account.id;
+        if ((this.props.location.query.module === "loyalty" || this.props.location.query.module === "dvs") && typeof accId === 'string') {
+          acccountId = account.sourceAccountIdentifier;
+        }
+        if (acccountId === accId) {
+          this.props.templatesActions.setWeChatAccount(account);
+          selectedAccount = account;
+          formData['mobilepush-accounts'] = account.id;
+          if (this.props.location.query.account_id) {
+            formData['mobilepush-template'] = this.props.params.id;
+          }
+        }
+      });
+    } else {
+      selectedAccount = accounts[0];
+      formData['mobilepush-accounts'] = accounts[0].id;
+    }
+    this.props.actions.setWeChatAccount(selectedAccount);
+    this.setState({formData, accountsOptions: accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id}))});
+  };
+
+  getTransformedData = (formData) => {
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const obj = _.cloneDeep(this.state.editData);
+    obj.versions = {
+      base: {},
+    };
+    obj.type = 'MOBILEPUSH';
+    obj.name = formData['template-name'];
+    obj.definition = {
+      accountId: selectedWeChatAccount.id,
+      licenseCode: selectedWeChatAccount.sourceAccountIdentifier,
+    };
+    if (this.props.location.query && this.props.location.query.module !== 'dvs') {
+      obj.definition.mode = this.props.Edit.templateDetails.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;
+      }
+    }
+    const imageLink = android.image;
+    if (imageLink) {
+      obj.versions.base.ANDROID.expandableDetails.image = imageLink;
+      obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
+    }
+    if (obj.versions.base.ANDROID && obj.versions.base.ANDROID.cta) {
+      if (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'];
+    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) {
+        obj.versions.base.ANDROID.expandableDetails.ctas.push({
+          "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 (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('&')}`;
+          }
+        }
+      }
+    }
+    const imageLinkIos = ios.image;
+    if (imageLinkIos) {
+      obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
+      obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
+    }
+    if (obj.versions.base.IOS && obj.versions.base.IOS.cta) {
+      if (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 secondaryCtaIos = !!ios['cta-deeplink-secondary-cta-1-select'] || !!ios['secondary-cta-1-label'];
+
+    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-text2']),
+        "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;
+  };
+
+  getLinkName = (link) => {
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+    const deepLinkOptions = _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (l) => l.link === link);
+    if (deepLinkOptions[0]) {
+      return deepLinkOptions[0].name;
+    }
+    return undefined;
+  };
+
+  setFormValidity = (isFormValid) => {
+    this.setState({isFormValid});
+  };
+
+  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) => {
+    console.log('in sms create', 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,
+    };
+    console.log('GetForm Data ', response);
+    this.setState({checkValidation: true});
+    if (e) {
+      e.source.postMessage(JSON.stringify(response), e.origin);
+    }
+    return response;
+  };
+
+
+  setEditState(data, schema) {
+    console.log('Test 1234', data, schema);
+    const tabCount = Object.keys(data.versions.base).length;
+    const formData = {};
+    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === "loyalty") {
+      formData["mobilepush-accounts"] = this.state.formData["mobilepush-accounts"];
+      formData['mobilepush-template'] = this.state.formData['mobilepush-template'];
+    }
+    formData['template-name'] = data.name;
+    const androidData = data.versions.base.ANDROID;
+    const iosData = data.versions.base.IOS;
+    const android = {};
+    android[`message-title`] = androidData ? androidData.title : '';
+    android['message-editor'] = androidData ? androidData.message : '';
+    if (data.mode === "image") {
+      android.image = "";
+    }
+    if (androidData) {
+      if (androidData.cta) {
+        android['cta-deeplink'] = androidData.cta.type === "DEEP_LINK" ? "Deeplink" : "External Link";
+        if ( androidData.cta.type === "DEEP_LINK") {
+          android['cta-deeplink-select'] = androidData ? androidData.cta.actionLink : '';
+        } else {
+          android['cta-deeplink-text'] = androidData ? androidData.cta.actionLink : '';
+        }
+        if (androidData.cta.type === "DEEP_LINK" ) {
+          const link = android['cta-deeplink-select'].split('?')[0];
+          const params = android['cta-deeplink-select'].split('?')[1] && android['cta-deeplink-select'].split('?')[1].split('&');
+          android['cta-deeplink-select'] = link;
+          _.forEach(params, (param) => {
+            android[`custom-value-${param.split('=')[0]}-cta-deeplink-select`] = param.split('=')[1];
+          });
+        }
+      }
+      if (androidData.expandableDetails && androidData.expandableDetails.image) {
+        android.image = androidData.expandableDetails.image;
+      }
+      if (androidData.expandableDetails && androidData.expandableDetails.ctas && androidData.expandableDetails.ctas.length) {
+        android['cta-deeplink-secondary-cta-0'] = androidData.expandableDetails.ctas[0].type === "DEEP_LINK" ? "Deeplink" : "External Link";
+        if ( androidData.expandableDetails.ctas[0].type === "DEEP_LINK") {
+          android['cta-deeplink-secondary-cta-0-select'] = androidData.expandableDetails.ctas[0].actionLink;
+        } else {
+          android['cta-deeplink-secondary-cta-0-text'] = androidData.expandableDetails.ctas[0].actionLink;
+        }
+        android['secondary-cta-0-label'] = androidData.expandableDetails.ctas[0].actionText;
+        if (androidData.expandableDetails.ctas[0].type === "DEEP_LINK") {
+          const link = android['cta-deeplink-secondary-cta-0-select'].split('?')[0];
+          const params = android['cta-deeplink-secondary-cta-0-select'].split('?')[1] && android['cta-deeplink-secondary-cta-0-select'].split('?')[1].split('&');
+          android['cta-deeplink-secondary-cta-0-select'] = link;
+          _.forEach(params, (param) => {
+            android[`custom-value-${param.split('=')[0]}-cta-deeplink-secondary-cta-0-select`] = param.split('=')[1];
+          });
+        }
+      }
+      if (androidData.expandableDetails && androidData.expandableDetails.ctas && androidData.expandableDetails.ctas.length > 1) {
+        android['cta-deeplink-secondary-cta-1'] = androidData.expandableDetails.ctas[1].type === "DEEP_LINK" ? "Deeplink" : "External Link";
+        if (androidData.expandableDetails.ctas[1].type === "DEEP_LINK") {
+          android['cta-deeplink-secondary-cta-1-select'] = androidData.expandableDetails.ctas[1].actionLink;
+        } else {
+          android['cta-deeplink-secondary-cta-1-text'] = androidData.expandableDetails.ctas[1].actionLink;
+        }
+        android['secondary-cta-1-label'] = androidData.expandableDetails.ctas[1].actionText;
+        if (androidData.expandableDetails.ctas[1].type === "DEEP_LINK" && android['cta-deeplink-secondary-cta-1-select']) {
+          const link = android['cta-deeplink-secondary-cta-1-select'].split('?')[0];
+          const params = android['cta-deeplink-secondary-cta-1-select'].split('?')[1] && android['cta-deeplink-secondary-cta-1-select'].split('?')[1].split('&');
+          android['cta-deeplink-secondary-cta-1-select'] = link;
+          _.forEach(params, (param) => {
+            android[`custom-value-${param.split('=')[0]}-cta-deeplink-secondary-cta-1-select`] = param.split('=')[1];
+          });
+        }
+      }
+    }
+    formData[0] = android;
+    const ios = {};
+    ios[`message-title2`] = iosData ? iosData.title : '';
+    ios['message-editor2'] = iosData ? iosData.message : '';
+    if (data.mode === "image") {
+      ios.image = "";
+    }
+    if (iosData) {
+      if (iosData.cta) {
+        ios['cta-deeplink2'] = iosData.cta.type === "DEEP_LINK" ? "Deeplink" : "External Link";
+        if (iosData.cta.type === "DEEP_LINK") {
+          ios['cta-deeplink2-select'] = iosData ? iosData.cta.actionLink : '';
+        } else {
+          ios['cta-deeplink2-text'] = iosData ? iosData.cta.actionLink : '';
+        }
+        if (iosData.cta.type === "DEEP_LINK") {
+          const link = ios['cta-deeplink2-select'].split('?')[0];
+          let params = ios['cta-deeplink2-select'].split('?');
+          if (params[1]) {
+            params = params[1].split('&');
+            _.forEach(params, (param) => {
+              ios[`custom-value-${param.split('=')[0]}-cta-deeplink2-select`] = param.split('=')[1];
+            });
+          }
+          ios['cta-deeplink2-select'] = link;
+        }
+      }
+      if (iosData.expandableDetails && iosData.expandableDetails.image) {
+        ios.image = iosData.expandableDetails.image;
+      }
+      if (iosData.expandableDetails && iosData.expandableDetails.ctas && iosData.expandableDetails.ctas.length) {
+        if (iosData.expandableDetails.ctas[0].type) {
+          ios['cta-deeplink-secondary-cta-1'] = iosData.expandableDetails.ctas[0].type === "DEEP_LINK" ? "Deeplink" : "External Link";
+        }
+        if (iosData.expandableDetails.ctas[0].type === "DEEP_LINK") {
+          ios['cta-deeplink-secondary-cta-1-select2'] = iosData.expandableDetails.ctas[0].actionLink;
+        } else {
+          ios['cta-deeplink-secondary-cta-1-text2'] = iosData.expandableDetails.ctas[0].actionLink;
+        }
+        ios['secondary-cta-1-label'] = iosData.expandableDetails.ctas[0].actionText;
+        if (iosData.expandableDetails.ctas[0].type === "DEEP_LINK" && ios['cta-deeplink-secondary-cta-1-select2']) {
+          const link = ios['cta-deeplink-secondary-cta-1-select2'].split('?')[0];
+          const paramsIos = ios['cta-deeplink-secondary-cta-1-select2'].split('?')[1] && ios['cta-deeplink-secondary-cta-1-select2'].split('?')[1].split('&');
+          ios['cta-deeplink-secondary-cta-1-select2'] = link;
+          _.forEach(paramsIos, (param) => {
+            ios[`custom-value-${param.split('=')[0]}-cta-deeplink-secondary-cta-1-select2`] = param.split('=')[1];
+          });
+        }
+        ios['secondary-cta-1-action'] = iosData.expandableDetails.ctas[0].actionLabel;
+        if (iosData.expandableDetails.ctas[0].actionLabel2) {
+          ios['secondary-cta-1-action2'] = iosData.expandableDetails.ctas[0].actionLabel2;
+        }
+      }
+    }
+    formData[1] = ios;
+    formData.base = formData[0];
+    formData[0].base = true;
+    // formData[0].tabKey = '1';
+    // formData[1].tabKey = '2';
+    console.log('form data after discarding ', formData);
+    this.getSchemaForFormData(formData, schema);
+    this.setState({tabCount, formData, editData: data, currentTab: 1});
+  }
+
+  getSchemaForFormData = (formData, inputSchema) => {
+    let schema = inputSchema;
+    if (!_.isEmpty(formData[0])) {
+      if (formData[0]['cta-deeplink']) {
+        schema = this.addPrimaryCta(null, {id: 'add-pri-cta'}, schema, 1);
+        schema = this.onLinkTypeChange(true, formData, {id: 'cta-deeplink'}, 1, schema);
+        schema = this.showCtaKeys(true, formData, {id: 'cta-deeplink-select'}, 1, schema);
+      }
+      if (formData[0]['cta-deeplink-secondary-cta-0']) {
+        schema = this.addSecondoryCta(null, {id: 'add-sec-cta'}, schema);
+        schema = this.onLinkTypeChange(true, formData, {id: 'cta-deeplink-secondary-cta-0'}, 1, schema);
+        schema = this.showCtaKeys(true, formData, {id: 'cta-deeplink-secondary-cta-0-select'}, 1, schema);
+      }
+      if (formData[0]['cta-deeplink-secondary-cta-1']) {
+        schema = this.addSecondoryCta(null, {id: 'add-sec-cta'}, schema);
+        schema = this.onLinkTypeChange(true, formData, {id: 'cta-deeplink-secondary-cta-1'}, 1, schema);
+        schema = this.showCtaKeys(true, formData, {id: 'cta-deeplink-secondary-cta-1-select'}, 1, schema);
+      }
+    }
+    if (!_.isEmpty(formData[1])) {
+      if (formData[1]['cta-deeplink2']) {
+        schema = this.addPrimaryCta(null, {id: 'add-pri-cta-ios'}, schema, 2);
+        schema = this.onLinkTypeChange(true, formData, {id: 'cta-deeplink2'}, 2, schema);
+        schema = this.showCtaKeys(true, formData, {id: 'cta-deeplink2-select'}, 2, schema);
+      }
+      if (formData[1]['secondary-cta-1-action']) {
+        schema = this.showSelectedIosCta(schema, {id: 'add-sec-cta-ios'}, 2, undefined, formData[1]['cta-deeplink-secondary-cta-1']);
+        schema = this.onLinkTypeChange(true, formData, {id: 'cta-deeplink-secondary-cta-1'}, 2, schema);
+        schema = this.showCtaKeys(true, formData, {id: 'cta-deeplink-secondary-cta-1-select2'}, 2, schema);
+      }
+    }
+    this.setState({schema, isSchemaChanged: true});
+    this.injectEvents(schema);
+  };
+
+  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});
+  };
+
+  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);
+  };
+
+  selectCtaIos = (selectedConfig) => {
+    this.showSelectedIosCta(null, null, null, selectedConfig);
+  };
+
+  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);
+    }
+  };
+
+  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.");
+    }
+  };
+
+  showSelectedIosCta = (inputSchema, field, tab, selectedConfig, showDeeplink) => {
+    const currentTab = tab || this.state.currentTab;
+    const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+    const deepLinkOptions = _.map(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (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 || (field && field.id === col.id)) {
+                      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: 18,
+                            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: 1,
+                            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,
+                            colStyle: {
+                              flex: 1,
+                            },
+                          },
+                          {
+                            id: `${inputId}-action`,
+                            metaType: "label",
+                            value: "",
+                            primitive: true,
+                            dynamicTab: false,
+                            type: "div",
+                            width: 16,
+                            offset: 0,
+                          },
+                          {
+                            id: `${inputId}-action2`,
+                            metaType: "label",
+                            value: "",
+                            primitive: true,
+                            dynamicTab: false,
+                            type: "div",
+                            width: 8,
+                            offset: 0,
+                            style: {display: 'none'},
+                          },
+                        ],
+                      };
+                      let showDeeplinkOption = selectedConfig ? (selectedConfig.id !== "16589g0g" && selectedConfig.id !== "17543720" && selectedConfig.id !== "1a491g56") : true;
+                      if (!selectedConfig) {
+                        showDeeplinkOption = showDeeplink;
+                      }
+                      if (showDeeplinkOption) {
+                        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,
+                              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,
+                              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',
+                              ],
+                            },
+                          ],
+                        };
+                      }
+                    }
+                  });
+                });
+              }
+            });
+          });
+        });
+      });
+    });
+    if (!inputSchema) {
+      this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
+      this.injectEvents(schema);
+    }
+    return schema;
+  };
+
+  deletePrimaryCTA = (event) => {
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    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);
+                          delete formData[self.state.currentTab - 1][`${id.replace('delete', 'text')}`];
+                          delete formData[self.state.currentTab - 1][`${id.replace('-delete', '')}`];
+                        }
+                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
+                          const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+                          const configkeys = selectedWeChatAccount ? _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
+                          if (configkeys.length) {
+                            const options = configkeys[0].keys;
+                            _.forEach(options, (opt) => {
+                              delete formData[this.state.currentTab - 1][`custom-value-${opt}-${id.replace('delete', 'select')}`];
+                            });
+                            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);
+  };
+
+  deleteSecondaryCtaIos = (event) => {
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    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) {
+                        if (device === 'ios') {
+                          child.inputFields.splice(fieldIndex, 3);
+                          delete formData[self.state.currentTab - 1][`secondary-cta-1-action`];
+                          delete formData[self.state.currentTab - 1][`secondary-cta-1-action2`];
+                          delete formData[self.state.currentTab - 1][`secondary-cta-1-label`];
+                          delete formData[self.state.currentTab - 1][`cta-deeplink-secondary-cta-1`];
+                        }
+                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-external-link") {
+                          child.inputFields.splice(fieldIndex, 1);
+                          delete formData[self.state.currentTab - 1][`cta-deeplink-secondary-cta-1-text2`];
+                        }
+                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
+                          const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+                          const configkeys = selectedWeChatAccount ? _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
+                          if (configkeys.length) {
+                            const options = configkeys[0].keys;
+                            _.forEach(options, (opt) => {
+                              delete formData[this.state.currentTab - 1][`custom-value-${opt}2-cta-deeplink-${id.replace('delete-ios', 'select2')}`];
+                              delete formData[this.state.currentTab - 1][`custom-value-${opt}-cta-deeplink-${id.replace('delete-ios', 'select2')}`];
+                            });
+                            child.inputFields = child.inputFields.slice(0, fieldIndex).concat(child.inputFields.slice( fieldIndex + options.length + 1, child.inputFields.length));
+
+                            delete formData[this.state.currentTab - 1][`cta-deeplink-${id.replace('delete-ios', 'select2')}`];
+                          } 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"],
+                              },
+                            ],
+                          };
+                        }
+                      }
+                    });
+                  }
+                });
+              }
+            });
+          });
+        });
+      });
+    });
+
+    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, formData, isSchemaChanged: true});
+    this.injectEvents(schema);
+  };
+
+  deleteSecondaryCTA = (event) => {
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    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: "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 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) {
+                        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);
+                          delete formData[self.state.currentTab - 1][`cta-deeplink-${id.replace('delete', 'text')}`];
+                        }
+                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
+                          const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+                          const configkeys = selectedWeChatAccount ? _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === selectedDeeplink) : [];
+
+                          if (configkeys.length) {
+                            const options = configkeys[0].keys;
+                            _.forEach(options, (opt) => {
+                              delete formData[this.state.currentTab - 1][`custom-value-${opt}-cta-deeplink-${id.replace('delete', 'select')}`];
+                            });
+                            child.inputFields = child.inputFields.slice(0, fieldIndex).concat(child.inputFields.slice( fieldIndex + options.length + 1, child.inputFields.length));
+                            delete formData[this.state.currentTab - 1][`cta-deeplink-${id.replace('delete', 'select')}`];
+                          } else {
+                            child.inputFields.splice(fieldIndex, 1);
+                          }
+                        }
+                        delete formData[this.state.currentTab - 1][`${id.replace('delete', 'label')}`];
+                        delete formData[this.state.currentTab - 1][`cta-deeplink-${id.replace('-delete', '')}`];
+                        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',
+                                    marginTop: '16px',
+                                    fontWeight: '600',
+                                    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);
+  };
+
+
+  startTemplateCreation = (data) => {
+    console.log('startTemplateCreation', data);
+    if (!this.state.isContentEditLoaded && this.state.fullSchema && this.props.Edit.weCrmAccounts) {
+      const schema = JSON.stringify(data).indexOf("BIG_PICTURE") > -1 ? this.state.fullSchema.imageSchema : this.state.fullSchema.textSchema;
+      this.setMobilePushAccountOptions(this.props.Edit.weCrmAccounts, data.content.accId);
+      this.setState({schema, isContentEditLoaded: true, loadingContentEdit: true}, () => {
+        this.injectEvents(this.state.schema);
+        let editData = data.content;
+        editData = editData.versions && editData.versions.base ? editData : {versions: {base: editData}};
+        this.setEditState(editData, this.state.schema);
+      });
+    }
+  };
+  discardValues = () => {
+    console.log('discarding', this.props.Edit);
+    this.resetSchema();
+    this.setState({
+      formData: {},
+      tabCount: 1,
+      currentTab: 1,
+      editData: {},
+    }, () => {
+      const schema = this.props.Edit.templateDetails.mode === "image" ? this.state.fullSchema.imageSchema : this.state.fullSchema.textSchema;
+      this.setEditState(this.props.Edit.templateDetails, schema);
+    });
+  };
+  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 = () => {
+
+  };
+  moveToTemplates = () => {
+    console.log('in move to Templates');
+    const modalContent = {
+      title: "Alert",
+      body: "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});
+  };
+  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;
+  };
+  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;
+        }
+        temp.injectedEvents = {};
+        temp.className = temp.className ? temp.className : '';
+        if (this.props.location.query.type === 'embedded' && ((temp.type === "tag-list" || temp.type === "div" || temp.type === "icon") && this.props.location.query.module !== "dvs") && (temp.supportedEvents)) {
+          temp.className = `${temp.className} hide`;
+        }
+        if (this.props.location.query.type === 'embedded' && (temp.type === "input" || temp.type === "textarea" || temp.type === "radioGroup") && this.props.location.query.module !== "dvs") {
+          temp.className = `${temp.className} disabled`;
+          temp.disabled = true;
+        }
+        if (this.props.location.query.type === 'embedded' && temp.id === "mobilepush-template" ) {
+          temp.options = this.state.templateOptions ? this.state.templateOptions : [];
+        }
+        if (this.props.location.query.type === 'embedded' && temp.id === "mobilepush-accounts" ) {
+          temp.options = this.state.templateOptions ? this.state.accountsOptions : [];
+        }
+        if (temp.id === "mobile-push-preview" && this.props.Templates.selectedWeChatAccount && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
+          temp.content.appName = this.props.Templates.selectedWeChatAccount.name;
+        }
+        _.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;
+        temp.disabled = this.props.location.query.type === 'embedded' && this.props.location.query.module !== "dvs";
+        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;
+  };
+
+  saveFormData = (formData) => {
+    console.log('Saving form data', formData, this.state.tabCount);
+    const obj = this.getTransformedData(formData);
+    console.log('obj', obj);
+    this.props.actions.editTemplate(obj);
+  };
+  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;
+      }
+    }
+  };
+
+  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},
+    });
+  };
+
+  showCtaKeys = (eventTriggered, formData, field, tabIndex, schemaInput) => {
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const currentTab = tabIndex || this.state.currentTab;
+    const schema = _.cloneDeep(schemaInput || 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 ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+                      let keys = selectedWeChatAccount ? _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === formData[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('_', " ")}.`,
+                              fluid: true,
+                              styling: "semantic",
+                              order: 1,
+                              disabled: this.props.location.query.type === 'embedded' && this.props.location.query.module !== "dvs",
+                              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);
+                      if (!tabIndex) { // removes the existing selected options keys so that newly selected options keys can be added.
+                        const configkeys = _.filter(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (dl) => dl.link === this.state.formData[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;
+                      }
+                    }
+                  });
+                });
+              }
+            });
+          });
+        });
+      });
+    });
+    if (tabIndex) {
+      return schema;
+    }
+    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, eventsMap, isSchemaChanged: true});
+    this.injectEvents(schema);
+    return schema;
+  };
+  addPrimaryCta = (ev, field, inputSchema) => {
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const id = field ? field.id : ev.target.id;
+    const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
+    const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+    const deepLinkOptions = selectedWeChatAccount ? _.map(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (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${id === 'add-pri-cta' ? '' : 2}`,
+                            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,
+                            disabled: this.props.location.query.type === 'embedded' && this.props.location.query.module !== "dvs",
+                            supportedEvents: ["onChange"],
+                          },
+                          {
+                            id: `cta-deeplink${id === 'add-pri-cta' ? '' : 2}-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${id === 'add-pri-cta' ? '' : 2}-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,
+                            disabled: this.props.location.query.type === 'embedded' && this.props.location.query.module !== "dvs",
+                            customComponent: false,
+                            supportedEvents: [
+                              'onSelect',
+                            ],
+                          },
+                        ],
+                      });
+                    }
+                  });
+                });
+              }
+            });
+          });
+        });
+      });
+    });
+    if (inputSchema) {
+      return schema;
+    }
+    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
+    this.injectEvents(schema);
+    return schema;
+  };
+
+  addSecondoryCta = (ev, field, inputSchema) => {
+    const id = field ? field.id : ev.target.id;
+    const schema = inputSchema ? _.cloneDeep(inputSchema) : _.cloneDeep(this.state.schema);
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    const ck = selectedWeChatAccount.configs ? !!selectedWeChatAccount.configs.deeplink : false;
+    const deepLinkOptions = selectedWeChatAccount ? _.map(JSON.parse(ck ? selectedWeChatAccount.configs.deeplink : '[]'), (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,
+                              fluid: true,
+                              styling: "semantic",
+                              order: 1,
+                              style: {
+                                lineHeight: '24px',
+                                fontSize: '14px',
+                              },
+                              disabled: this.props.location.query.type === 'embedded' && this.props.location.query.module !== "dvs",
+                              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,
+                              disabled: this.props.location.query.type === 'embedded' && this.props.location.query.module !== "dvs",
+                              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};
+                      }
+                    }
+                  });
+                });
+              }
+            });
+          });
+        });
+      });
+    });
+    if (inputSchema) {
+      return schema;
+    }
+    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
+    this.injectEvents(schema);
+    return schema;
+  };
+
+  addSecondoryCtaIos = (ev) => {
+    const id = ev.target.id;
+    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
+    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] && 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(selectedWeChatAccount.sourceAccountIdentifier);//TODO: need to get license code of accoutn and send as arg
+  };
+
+  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;
+  };
+
+  injectEvents = (schema) => {
+    const temp = schema;
+    if (this.injectSections && 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, loadingContentEdit: false}, () => {
+      this.removeStandAlone();
+    });
+    return schema;
+  };
+  removeStandAlone = () => {
+    const schema = _.cloneDeep(this.state.schema);
+    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
+      if (schema.standalone.sections.length === 2) {
+        schema.standalone.sections.splice(0, 1);
+      }
+    } else if (this.props.location.query.type === 'embedded' && typeof this.props.location.query.module !== 'undefined') {
+      delete schema.standalone;
+    } else {
+      schema.standalone.sections.splice(1, 1);
+    }
+    this.setState({ 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() {
+    const schema = this.state.schema;
+    let tipText = this.props.Edit && ("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) ? 'Getting template details...' : '';
+    tipText = this.props.Edit && ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress) ? 'Saving Template...' : '';
+    const loadingContentEdit = this.state.loadingContentEdit || (this.props.location.query.module === 'dvs' && _.isEmpty(this.state.schema));
+    const spinning = loadingContentEdit || this.props.Edit.fetchingDefaultTemplates || this.props.Edit.assetUploading || this.state.loading || (this.props.Edit && (("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) || ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress)));
+    let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
+    if (this.props.supportedTags) {
+      tags = this.props.supportedTags;
+    }
+    return (
+      <div>
+        <Spin tip={tipText} spinning={spinning}>
+          {<Row style={{marginBottom: '16px', marginLeft: '-40px'}}>
+            <Col offset={1}>
+              { this.props.location.query.type !== "embedded" &&
+                <Breadcrumb>
+                  <BreadcrumbItem>Campaigns</BreadcrumbItem>
+                  <BreadcrumbItem>Creatives</BreadcrumbItem>
+                  <BreadcrumbItem>Mobile Push</BreadcrumbItem>
+                </Breadcrumb>
+              }
+            </Col>
+          </Row>}
+          <Row>
+            <Col>
+              <FormBuilder
+                schema={schema}
+                onSubmit={this.saveFormData}
+                onChange={this.onFormDataChange}
+                formData={_.cloneDeep(this.state.formData)}
+                currentTab={this.state.currentTab}
+                parent={this}
+                location={this.props.location}
+                isEdit
+                tabCount={2}
+                iosCtasData={this.state.iosCtasData}
+                tags={tags}
+                injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
+                onFormValidityChange={this.setFormValidity}
+                usingTabContainer
+                checkValidation={this.state.checkValidation}
+                onContextChange={this.handleOnTagsContextChange}
+                showModal={this.state.showModal}
+                iframeParent={parent}
+                router={this.props.router}
+                isSchemaChanged={this.state.isSchemaChanged}
+                handleCancelModal={this.handleCancelModal}
+                modal={this.state.modalContent}
+                setModalContent={this.setModalContent}
+              />
+            </Col>
+          </Row>
+        </Spin>
+      </div>
+    );
+  }
+}
+
+Edit.propTypes = {
+  actions: PropTypes.object.isRequired,
+  Edit: PropTypes.object,
+  params: PropTypes.object,
+  router: PropTypes.object,
+  location: PropTypes.object,
+  globalActions: PropTypes.object,
+  templatesActions: PropTypes.object,
+  Templates: PropTypes.object,
+  metaEntities: PropTypes.object,
+  templateDetails: PropTypes.object,
+  intl: intlShape.isRequired,
+  supportedTags: PropTypes.array,
+  getDefaultTags: PropTypes.string,
+  templateData: PropTypes.object,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Edit: makeSelectEdit(),
+  Create: makeSelectCreate(),
+  editResponse: makeSelectEditResponse(),
+  templateDetails: makeSelectTemplateDetailsResponse(),
+  metaEntities: makeSelectMetaEntities(),
+  Templates: makeSelectTemplates(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+    templatesActions: bindActionCreators(templatesActions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Edit));