@capillarytech/creatives-library 2.0.70 → 2.0.72

package/containers/MobilePush/Edit/index.js

@@ -12,12 +12,10 @@ import {bindActionCreators} from "redux";
 import { connect } from 'react-redux';
 import { Row, Col, Spin, Breadcrumb, notification } from 'antd';
 import { createStructuredSelector } from 'reselect';
-import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
-import _, {get, findIndex, set, forEach, cloneDeep} from 'lodash';
-import { CapSlideBox, CapHeader, CapTable, CapLink, CapRow, CapColumn, CapIcons} from '@capillarytech/cap-ui-library';
-import styled from 'styled-components';
-import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse, makeSelectIosCta} from "./selectors";
-import {makeSelectMetaEntities, setInjectedTags, isLoadingMetaEntities} from "../../Cap/selectors";
+import { injectIntl, intlShape } from 'react-intl';
+import _ from 'lodash';
+import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse} from "../../MobilePush/Edit/selectors";
+import {makeSelectMetaEntities, setInjectedTags} from "../../Cap/selectors";
 import {getMessageObject} from "../../../utils/messageUtils";
 import FormBuilder from '../../../components/FormBuilder';
 import * as globalActions from "../../Cap/actions";
@@ -26,20 +24,128 @@ import * as templatesActions from "../../Templates/actions";
 import {makeSelectTemplates} from "../../Templates/selectors";
 import messages from './messages';
 import './_mobilePushCreate.scss';
-import callNativeEvent from '../../../utils/callNativeEvent';
 import {makeSelectCreate} from "../Create/selectors";
-
-import getEventsMap from '../eventsMap';
-import {getPrimaryCtaFields, getSecondaryCtaFields, getLinkTypeFields} from '../commonMethods';
 const BreadcrumbItem = Breadcrumb.Item;
 
-const PrefixWrapper = styled.div`
-  margin-right: 16px;
-`;
 export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
-    const eventsMap = getEventsMap(this);
+    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,
@@ -50,12 +156,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       isFormValid: true,
       injectedTags: {},
       showModal: false,
-      eventsMap,
+      eventsMap: map,
       modalContent: {title: "Alert", body: this.props.intl.formatMessage(messages['template not configured,']), type: 'confirm'},
     };
-    this.getPrimaryCtaFields = getPrimaryCtaFields.bind(this);
-    this.getSecondaryCtaFields = getSecondaryCtaFields.bind(this);
-    this.getLinkTypeFields = getLinkTypeFields.bind(this);
   }
   componentWillMount() {
     console.log('edit mounting');
@@ -71,7 +174,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       const query = {
         layout: 'MOBILEPUSH',
         type: 'LAYOUT',
-        version: "v2",
       };
       this.props.globalActions.fetchSchemaForEntity(query);
       console.log(this.props.params);
@@ -82,14 +184,20 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     if (!_.isEmpty(this.state.schema)) {
       this.injectEvents(this.state.schema);
     }
-    if (this.props.location.query && (typeof this.props.location.query.module === 'undefined' || this.props.isFullMode === false)) { // when this containers is imported from creatives library
-      const templateId = get(this, "props.params.id");
-      if (templateId) {
-        this.props.actions.getTemplateDetails(templateId);
+    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);
       }
     }
+    const type = this.props.location.query.type;
+    if (type === 'embedded') {
+      const response = {
+        action: 'startTemplateCreation',
+      };
+      parent.postMessage(JSON.stringify(response), '*');
+    }
   }
   componentWillReceiveProps(nextProps) {
     if (nextProps.isGetFormData) {
@@ -110,12 +218,11 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     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 : {}}, () => {
-        const templateId = get(this, "props.params.id");
-        if (nextProps.location.query.module !== 'loyalty' && templateId && templateId !== 'temp') {
-          this.props.actions.getTemplateDetails(templateId);
+        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' && templateId === '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
+        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',
           };
@@ -132,24 +239,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         this.setTemplateOptions(nextProps.Edit.mobilepushTemplates);
       }
     }
-    if (!_.isEmpty(nextProps.templateDetails) && _.isEmpty(this.state.editData) && !_.isEmpty(this.state.fullSchema) && selectedWeChatAccount && (this.props.location.query.type !== 'embedded' || this.props.isFullMode === false)) {
+    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;
-      const isAndroidSupported = get(this, "props.Templates.selectedWeChatAccount.configs.android") === '1';
-      const isIosSupported = get(this, "props.Templates.selectedWeChatAccount.configs.ios") === '1';
-      if (!isAndroidSupported) {
-        const androidField = get(schema, "containers[0].panes[0]");
-        androidField.isSupported = false;
-        this.setState({currentTab: 2});
-        set(schema, "containers[0].panes[0]", androidField);
-      }
-      if (!isIosSupported) {
-        const iosField = get(schema, "containers[0].panes[1]");
-        iosField.isSupported = false;
-
-        set(schema, "containers[0].panes[1]", iosField);
-      }
       this.setEditState(nextProps.templateDetails, schema);
       this.getTags();
     }
@@ -159,8 +252,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       this.setState({formData});
       this.props.actions.clearAsset();
     }
-    if (nextProps.iosCtasData) {
-      this.setState({showIosCtaTable: true});
+    if (nextProps.Edit.iosCtasData) {
+      this.setState({iosCtasData: nextProps.Edit.iosCtasData});
     }
     if (nextProps.Edit.editResponse && nextProps.Edit.editResponse.templateId) {
       console.log('reseting schema');
@@ -203,13 +296,12 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   onFormDataChange = (formData, tabCount, currentTab) => {
     console.log('Form data changed is ', formData, tabCount, currentTab);
     const newFormData = _.cloneDeep(formData);
-    const {templateCta} = this.state;
-    if (!_.isEmpty(templateCta) && this.state.currentTab === 2) {
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = templateCta.name;
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = templateCta.ctaTemplateDetails[0].buttonText;
+    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 (templateCta.ctaTemplateDetails[1]) {
-        newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = templateCta.ctaTemplateDetails[1].buttonText;
+      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"]) {
@@ -232,23 +324,157 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
   };
 
-  onLinkTypeChange = (eventTriggered, formData, field, currentTab, inputSchema) => {
+  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);
-    const tabIndex = currentTab || this.state.currentTab;
-    const inputFields = get(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`);
-    const id = field.id;
-    const fieldIndex = findIndex(inputFields, {identifier: id});
-    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 }) );
-    // let inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${id}-select` : `${id}-text`;
-    // if (field.id === "cta-deeplink-secondary-cta-1" && (tabIndex > 1 || this.state.currentTab > 1)) {
-    //   inputId = `${inputId}${tabIndex || this.state.currentTab}`;
-    // }
-    const newInputFields = this.getLinkTypeFields({inputFieldsArgs: inputFields, fieldIndex, deepLinkOptions, formData, field});
-    set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
-
-    if (currentTab) { // identifying where ist called from setEditData or by event handler
+    _.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});
@@ -351,7 +577,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       licenseCode: selectedWeChatAccount.sourceAccountIdentifier,
     };
     if (this.props.location.query && this.props.location.query.module !== 'dvs') {
-      obj.definition.mode = this.props.Edit.templateDetails.mode || get(this, 'props.Edit.templateDetails.definition.mode');
+      obj.definition.mode = this.props.Edit.templateDetails.mode;
     }
     const android = {};
     Object.keys(formData[0]).forEach((data) => {
@@ -524,8 +750,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
 
     if (secondaryCtaIos) {
       obj.versions.base.IOS.expandableDetails.ctas = [];
-      const templateCtaId = get(this.state, "templateCta.ctaTemplateDetails[0].id");
-
       const cta = {
         actionText: ios['secondary-cta-1-label'],
         actionLabel: ios['secondary-cta-1-action'],
@@ -533,7 +757,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         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,
+        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;
@@ -573,7 +797,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   getMappedEvent = (id, event) => {
     const map = this.state.eventsMap;
     if (!map[id] || !map[id][event]) {
-      console.log(`error map[id] ${map[id]} ${id} ${event}` );
+      console.log(`error map[id] ${map[id]}` );
     }
     return map[id][event];
   };
@@ -678,7 +902,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
     formData[0] = android;
     const ios = {};
-    const templateCta = {};
     ios[`message-title2`] = iosData ? iosData.title : '';
     ios['message-editor2'] = iosData ? iosData.message : '';
     if (data.mode === "image") {
@@ -725,12 +948,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
             ios[`custom-value-${param.split('=')[0]}-cta-deeplink-secondary-cta-1-select2`] = param.split('=')[1];
           });
         }
-        set(templateCta, "ctaTemplateDetails[0].buttonText", iosData.expandableDetails.ctas[0].actionLabel);
-        set(templateCta, "name", iosData.expandableDetails.ctas[0].actionText);
-        set(templateCta, "ctaTemplateDetails[0].id", iosData.expandableDetails.ctas[0].templateCtaId);
         ios['secondary-cta-1-action'] = iosData.expandableDetails.ctas[0].actionLabel;
         if (iosData.expandableDetails.ctas[0].actionLabel2) {
-          set(templateCta, "ctaTemplateDetails[1].buttonText", iosData.expandableDetails.ctas[0].actionLabel2);
           ios['secondary-cta-1-action2'] = iosData.expandableDetails.ctas[0].actionLabel2;
         }
       }
@@ -741,51 +960,42 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     // formData[0].tabKey = '1';
     // formData[1].tabKey = '2';
     console.log('form data after discarding ', formData);
-    this.setState({templateCta}, () => {
-      this.getSchemaForFormData(formData, schema);
-      this.setState({tabCount, formData, editData: data, currentTab: 1});
-    });
+    this.getSchemaForFormData(formData, schema);
+    this.setState({tabCount, formData, editData: data, currentTab: 1});
   }
 
-  getSchemaForFormData = (formdata, inputSchema) => {
+  getSchemaForFormData = (formData, inputSchema) => {
     let schema = inputSchema;
-    const formData = _.cloneDeep(formdata);
     if (!_.isEmpty(formData[0])) {
       if (formData[0]['cta-deeplink']) {
-        formData[0]['add-pri-cta'] = true;
-        schema = this.addPrimaryCta(null, formData, {id: 'add-pri-cta'}, schema, 1);
+        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']) {
-        formData[0]['add-sec-cta'] = true;
-        schema = this.addSecondoryCta(null, formData, {id: 'add-sec-cta'}, schema, 1);
+        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']) {
-        formData[0]['add-sec-cta-2'] = true;
-        schema = this.addSecondoryCta(null, formData, {id: 'add-sec-cta-2'}, schema, 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']) {
-        formData[1]['add-pri-cta-ios'] = true;
-        schema = this.addPrimaryCta(null, formData, {id: 'add-pri-cta-ios'}, schema, 2);
+        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']) {
-        formData[1]['add-sec-cta-ios'] = true;
-
         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, formData});
+    this.setState({schema, isSchemaChanged: true});
     this.injectEvents(schema);
   };
 
@@ -841,7 +1051,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
       myField.value += myValue;
     }
     const event = new Event('input', { bubbles: true });
-    callNativeEvent({field, value: myField.value, event});
+    myField.dispatchEvent(event);
   };
 
   selectCtaIos = (selectedConfig) => {
@@ -881,128 +1091,218 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     }
   };
 
-  showSelectedIosCta = (inputSchema, field, tab, selectedConfig) => {
+  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 }) );
 
-    const inputFields = get(schema, `containers[0].panes[${currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`);
-    forEach(inputFields, (inputField, fieldIndex) => {
-      forEach(inputField.cols, (col) => {
-        if (col.id === "add-sec-cta-ios") {
-          const inputId = `secondary-cta-${currentTab - 1}`;
-          inputFields.splice(fieldIndex + 1, 0, {
-            rowClassName: 'mobile-push-row',
-            cols: [
-              {
-                id: `${inputId}-action-display`,
-                metaType: "label",
-                value: <CapRow>
-                  <CapColumn span={18}>
-                    <CapHeader
-                      title={this.state.templateCta.name}
-                      description={get(this.state, "templateCta.ctaTemplateDetails[0].buttonText")}
-                      size={"label"}/>
-                  </CapColumn>
-                  <CapColumn span={6}>
-                    <CapLink title="change" onClick={() => this.addSecondoryCtaIos(true, this.state.formData, {id: "add-sec-cta-ios"})}/>
-                  </CapColumn>
-                </CapRow>,
-                primitive: true,
-                dynamicTab: false,
-                type: "div",
-                width: 18,
-                offset: 1,
-              },
-              {
-                id: `${inputId}-action`,
-                metaType: "label",
-                value: "",
-                primitive: true,
-                dynamicTab: false,
-                type: "div",
-                width: 8,
-                offset: 0,
-                style: {
-                  display: 'none',
-                },
-              },
-              {
-                id: `${inputId}-action2`,
-                metaType: "label",
-                value: "",
-                primitive: true,
-                dynamicTab: false,
-                type: "div",
-                width: 8,
-                offset: 0,
-                style: {display: 'none'},
-              },
-
-            ],
-          });
-          if (selectedConfig && (selectedConfig.id !== "16589g0g" && selectedConfig.id !== "17543720" && selectedConfig.id !== "1a491g56")) {
-            inputFields.splice(fieldIndex + 2, 0, {
-              rowClassName: "mobile-push-row",
-              identifier: `cta-deeplink-${inputId}`,
-              cols: [
-
-                {
-                  id: `cta-deeplink-${inputId}`,
-                  type: "radioGroup",  //Resembles component to be used
-                  metaType: "text",
-                  datatype: "string",
-                  options: ["Deeplink", "External Link"],
-                  inductiveText: ["A page within mobile app", "An external web page"],
-                  value: "Deeplink",
-                  required: true,
-                  width: 18,
-                  offset: 1,
-                  errorMessage: "Please select link type",
-                  fluid: true,
-
-                  styling: "semantic",
-                  order: 1,
-                  supportedEvents: ["onChange"],
-                  customComponent: false,
-                },
-              ],
-            });
-            inputFields.splice(fieldIndex + 3, 0, {
-              rowClassName: 'mobile-push-row',
-              id: 'cta-deeplink-select-section',
-              identifier: `cta-deeplink-${inputId}-select2`,
-              cols: [
+    _.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}`;
 
-                {
-                  id: `cta-deeplink-${inputId}-select2`,
-                  placeholder: "Select DeepLink",
-                  type: "select",  //Resembles component to be used
-                  options: deepLinkOptions,
-                  metaType: "text",
-                  datatype: "string",
-                  errorMessage: "Select a deeplink",
-                  required: true,
-                  fluid: true,
-                  width: 18,
-                  offset: 1,
-                  style: {
-                    width: '100%',
-                    marginBottom: '16px',
-                  },
-                  styling: "semantic",
-                  order: 1,
-                  customComponent: false,
-                  supportedEvents: [
-                    'onSelect',
-                  ],
-                },
-              ],
+                      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) {
@@ -1096,19 +1396,98 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.injectEvents(schema);
   };
 
-  deleteSecondaryCtaIos = (callback) => {
-    const schema = cloneDeep(this.state.schema);
-    const inputFields = get(schema, `containers[0].panes[${this.state.currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`);
-    forEach(inputFields, (inputField, fieldIndex) => {
-      if (inputField) {
-        forEach(inputField.cols, (col) => {
-          if (col.id === "add-sec-cta-ios") {
-            inputFields.splice(fieldIndex + 1, inputFields.length);
-          }
+  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, isSchemaChanged: true}, callback);
+
+    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, formData, isSchemaChanged: true});
     this.injectEvents(schema);
   };
 
@@ -1300,6 +1679,9 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         this.setEditState(editData, this.state.schema);
       });
     }
+    if (data.tags) {
+      this.props.globalActions.setInjectedTags(data.tags);
+    }
   };
   discardValues = () => {
     console.log('discarding', this.props.Edit);
@@ -1365,10 +1747,10 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
         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.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 : [];
         }
@@ -1388,7 +1770,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     _.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";
+        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);
@@ -1467,49 +1849,114 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     const currentTab = tabIndex || this.state.currentTab;
     const schema = _.cloneDeep(schemaInput || this.state.schema);
     const eventsMap = _.cloneDeep(this.state.eventsMap);
-    let inputFields = get(schema, `containers[0].panes[${currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`);
-    const {id} = field;
-    const fieldIndex = findIndex(inputFields, {identifier: id});
-    const formDataKey = 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;
-    }
-    _.map(keys, (key, index) => {
-      const row = {
-        rowClassName: 'mobile-push-row',
-        id: 'cta-deeplink-keys',
-        cols: [
-          {
-            id: `custom-value-${key}-${id}`,
-            label: key.replace('_', " "),
-            type: "input",  //Resembles component to be used
-            metaType: "text",
-            datatype: "string",
-            required: true,
-            width: 18,
-            offset: 1,
-            placeholder: `Please input ${key.replace('_', " ")}.`,
-            fluid: true,
-            styling: "semantic",
-            order: 1,
-            customComponent: false,
-            errorMessage: "value cannot be empty.",
-          },
-        ],
-      };
-      inputFields.splice(fieldIndex + index + 1, 0, row);
+    _.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) { // 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;
-        inputFields = inputFields.slice(0, fieldIndex + 1).concat(inputFields.slice(fieldIndex + options.length + 1, 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 (tabIndex) {
       return schema;
     }
@@ -1517,26 +1964,131 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     this.injectEvents(schema);
     return schema;
   };
-  addPrimaryCta = (flag, formData, field, inputSchema, currentTab) => {
+  addPrimaryCta = (ev, field, inputSchema) => {
     const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
-    const id = field.id;
+    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);
-    const tabIndex = currentTab || this.state.currentTab;
-    const inputFields = get(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`);
-    const fieldIndex = findIndex(inputFields, {identifier: id});
-    let newInputFields;
-    if (formData[tabIndex - 1][id]) {
-      newInputFields = this.getPrimaryCtaFields({inputFields, fieldIndex, deepLinkOptions});
-    } else {
-      const identifier = (tabIndex - 1) ? 'add-sec-cta-ios' : 'add-sec-cta';
-      const indexOfNextField = findIndex(inputFields, {identifier});
-      const deleteCount = indexOfNextField - fieldIndex;
-      newInputFields = [...inputFields.slice(0, fieldIndex + 1), ...inputFields.slice(fieldIndex + deleteCount, inputFields.length)];
-    }
-    set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
+    _.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;
     }
@@ -1545,25 +2097,191 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     return schema;
   };
 
-  addSecondoryCta = (flag, formData, field, inputSchema, currentTab) => {
-    const id = field.id;
-    const tabIndex = currentTab || this.state.currentTab;
+  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 inputFields = get(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`);
-    const fieldIndex = findIndex(inputFields, {identifier: id});
-    let newInputFields;
-    if (formData[tabIndex - 1][id]) {
-      newInputFields = this.getSecondaryCtaFields({inputFields, fieldIndex, deepLinkOptions});
-    } else {
-      const identifier = id === "add-sec-cta" ? 'add-sec-cta-2' : null;
-      const indexOfNextField = identifier ? findIndex(inputFields, {identifier}) : inputFields.length;
-      const deleteCount = indexOfNextField - fieldIndex;
-      newInputFields = [...inputFields.slice(0, fieldIndex + 1), ...inputFields.slice(fieldIndex + deleteCount, inputFields.length)];
-    }
-    set(schema, `containers[0].panes[${tabIndex - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
+
+    // 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;
     }
@@ -1572,41 +2290,120 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     return schema;
   };
 
-  addSecondoryCtaIos = (flag, formData, schemaField) => {
-    const id = schemaField.id;
-    if (formData[this.state.currentTab - 1][id]) {
-      const actionText = formData[this.state.currentTab - 1]['secondary-cta-1-action'];
-      if (!this.props.iosCtasData) {
-        if (!_.isEmpty(actionText)) {
-          this.deleteSecondaryCtaIos();
-        }
-        this.props.actions.getIosCtas(this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier);//TODO: need to get license code of accoutn and send as arg
-      } else {
-        this.deleteSecondaryCtaIos(() => { // oncick of change
-          this.setState({showIosCtaTable: true});
-        });
-      }
-    } else {
-      const schema = cloneDeep(this.state.schema);
-      const inputFields = get(schema, `containers[0].panes[${this.state.currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`);
-      forEach(inputFields, (inputField, fieldIndex) => {
-        forEach(inputField.cols, (col) => {
-          if (col.id === id) {
-            const indexOfNextField = inputFields.length;
-            const deleteCount = indexOfNextField - fieldIndex;
-            const newInputFields = [...inputFields.slice(0, fieldIndex + 1), ...inputFields.slice(fieldIndex + deleteCount, inputField.length)];
-            set(schema, `containers[0].panes[${this.state.currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
-            this.setState({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
   };
-  handleClose = () => {
-    const formData = cloneDeep(this.state.formData);
-    formData[this.state.currentTab - 1]['add-sec-cta-ios'] = false;
-    this.setState({showIosCtaTable: false, formData});
-  }
+
   injectContainer = (container) => {
     const temp = container;
     if (temp.type === 'tabs') {
@@ -1668,7 +2465,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
     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 = this.props.isLoadingMetaEntities || 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)));
+    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;
@@ -1689,7 +2486,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
           </Row>}
           <Row>
             <Col>
-              {!this.props.isLoadingMetaEntities && <FormBuilder
+              <FormBuilder
                 schema={schema}
                 onSubmit={this.saveFormData}
                 onChange={this.onFormDataChange}
@@ -1713,66 +2510,8 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 handleCancelModal={this.handleCancelModal}
                 modal={this.state.modalContent}
                 setModalContent={this.setModalContent}
-              />}
-            </Col>
-            {this.props.iosCtasData && this.state.showIosCtaTable &&
-              <CapSlideBox
-                size="size-l"
-                header={<CapHeader
-                  title={<FormattedMessage {...messages.selectActionButton} />}
-                  prefix={
-                    <PrefixWrapper>
-                      <CapIcons.backIcon onClick={this.handleClose} />
-                    </PrefixWrapper>
-                      }
-
-                    />}
-                content={<CapTable
-                  rowSelection={{
-                    type: 'radio',
-                    onSelect: (record) => {
-                      this.setState({templateCta: record, showIosCtaTable: false}, () => this.selectCtaIos(record));
-                    },
-                  }}
-                  dataSource={this.props.iosCtasData} 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>
-                    ),
-                    },
-                  ]}
-                />}
-                show={this.state.showIosCtaTable}
-                handleClose={this.handleClose}
               />
-            }
+            </Col>
           </Row>
         </Spin>
       </div>
@@ -1795,9 +2534,6 @@ Edit.propTypes = {
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
   templateData: PropTypes.object,
-  isFullMode: PropTypes.bool,
-  iosCtasData: PropTypes.array,
-  isLoadingMetaEntities: PropTypes.bool,
   injectedTags: PropTypes.object,
 };
 
@@ -1808,8 +2544,6 @@ const mapStateToProps = createStructuredSelector({
   templateDetails: makeSelectTemplateDetailsResponse(),
   metaEntities: makeSelectMetaEntities(),
   Templates: makeSelectTemplates(),
-  iosCtasData: makeSelectIosCta(),
-  isLoadingMetaEntities: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
 });