@capillarytech/creatives-library 2.0.62 → 2.0.63

package/containers/MobilePush/Create/index.js

@@ -10,144 +10,33 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Row, Col, Spin, Breadcrumb, notification } from 'antd';
-import _ from 'lodash';
+import {get, set, filter, isEmpty, map, forEach, uniqueId, cloneDeep, isEqual, merge, has, findIndex} from 'lodash';
 import { createStructuredSelector } from 'reselect';
-import { injectIntl, intlShape } from 'react-intl';
-import { makeSelectCreate, makeSelectCreateResponse } from './selectors';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
+import { CapSlideBox, CapHeader, CapTable, CapLink, CapRow, CapColumn, CapIcons} from '@capillarytech/cap-ui-library';
+import { makeSelectCreate, makeSelectCreateResponse, makeSelectIosCta } from './selectors';
 import { makeSelectMetaEntities } from '../../Cap/selectors';
 import * as globalActions from '../../../containers/Cap/actions';
 import FormBuilder from '../../../components/FormBuilder';
 import './_mobilePushCreate.scss';
 import * as actions from './actions';
+
 import {getMessageObject} from '../../../utils/messageUtils';
 import { makeSelectTemplates } from '../../Templates/selectors';
 import messages from './messages';
 import callNativeEvent from '../../../utils/callNativeEvent';
-
+import getEventsMap from '../eventsMap';
 const BreadcrumbItem = Breadcrumb.Item;
+
+const PrefixWrapper = styled.div`
+  margin-right: 16px;
+`;
 export class Create extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
+    const eventsMap = getEventsMap(this);
     if (this.props.Templates.selectedWeChatAccount) {
-      const map = {
-        "template-name": {
-          onChange: this.onTemplateNameChange,
-        },
-        "cta-deeplink-secondary-cta-0": {
-          onChange: this.onLinkTypeChange,
-        },
-        "cta-deeplink-secondary-cta-1": {
-          onChange: this.onLinkTypeChange,
-        },
-        "cta-deeplink-secondary-cta-12": {
-          onChange: this.onLinkTypeChange,
-        },
-        "cta-deeplink-delete": {
-          onDelete: this.deletePrimaryCTA,
-        },
-        "cta-deeplink2-delete": {
-          onDelete: this.deletePrimaryCTA,
-        },
-        "secondary-cta-0-delete": {
-          onDelete: this.deleteSecondaryCTA,
-        },
-        "secondary-cta-1-delete": {
-          onDelete: this.deleteSecondaryCTA,
-        },
-        "secondary-cta-1-delete-ios": {
-          onDelete: this.deleteSecondaryCtaIos,
-        },
-        "discard-button": {
-          discardValues: this.discardValues,
-        },
-        "cancel-button": {
-          cancelTemplate: this.cancelTemplate,
-        },
-        "copy-android-content": {
-          onClick: this.copyAndroidContent,
-        },
-        "copy-iphone-content": {
-          onClick: this.copyIphoneContent,
-        },
-        "save-button": {
-          saveFormData: this.saveFormData,
-        },
-        "message-editor": {
-          onChange: this.onTemplateContentChange,
-        },
-        "message-editor2": {
-          onChange: this.onTemplateContentChange,
-        },
-        "message-tagList": {
-          onTagSelect: this.onTagSelect,
-        },
-        "message-tagList2": {
-          onTagSelect: this.onTagSelect,
-        },
-        "title-tagList": {
-          onTagSelect: this.onTagSelect,
-        },
-        "title-tagList2": {
-          onTagSelect: this.onTagSelect,
-        },
-        "pane": {
-          onTabChange: this.onTabChange,
-        },
-        "cta-deeplink": {
-          onChange: this.onLinkTypeChange,
-        },
-        "cta-deeplink2": {
-          onChange: this.onLinkTypeChange,
-        },
-        "cta-deeplink-secondary-cta-1-select": {
-          onSelect: this.showCtaKeys,
-        },
-        "cta-deeplink-secondary-cta-0-select": {
-          onSelect: this.showCtaKeys,
-        },
-        "cta-deeplink-secondary-cta-1-select2": {
-          onSelect: this.showCtaKeys,
-        },
-        "cta-deeplink-select": {
-          onSelect: this.showCtaKeys,
-        },
-        "cta-deeplink2-select": {
-          onSelect: this.showCtaKeys,
-        },
-        "add-pri-cta": {
-          addPrimaryCta: this.addPrimaryCta,
-        },
-        "add-pri-cta-ios": {
-          addPrimaryCta: this.addPrimaryCta,
-        },
-        "add-sec-cta": {
-          addSecondaryCta: this.addSecondoryCta,
-        },
-        "add-sec-cta-ios": {
-          addSecondaryCtaIos: this.addSecondoryCtaIos,
-        },
-        "image-upload-android": {
-          onUpload: this.uploadImage,
-        },
-        "image-upload-ios": {
-          onUpload: this.uploadImage,
-        },
-        "secondary-cta-1-table": {
-          onRowClick: this.selectCtaIos,
-        },
-        "cta-deeplink-select-show-keys": {
-          onShowCtaKeys: this.showCtaKeys,
-        },
-        "cta-deeplink-secondary-cta-0-select-show-keys": {
-          onShowCtaKeys: this.showCtaKeys,
-        },
-        "cta-deeplink-secondary-cta-1-select-show-keys": {
-          onShowCtaKeys: this.showCtaKeys,
-        },
-        "wechat-template": {
-          onSelect: this.onTemplateChange,
-        },
-      };
       this.state = {
         formData: {},
         tabCount: 1,
@@ -157,7 +46,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         tabKey: '',
         checkValidation: false,
         schema: {},
-        eventsMap: map,
+        eventsMap,
         errorData: {},
         displayProps: {},
         modalContent: {title: "Alert", body: "template not configured,", type: 'confirm'},
@@ -184,28 +73,26 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   componentDidMount = () => {
-    console.log('added listener create,', this.props);
     const query = {
       layout: 'MOBILEPUSH',
       type: 'LAYOUT',
+      version: "v2",
     };
     this.props.globalActions.fetchSchemaForEntity(query);
     window.addEventListener("message", this.handleFrameTasks);
   };
 
   componentWillReceiveProps = (nextProps) => {
-    console.log('recieved props ', nextProps, nextProps.Create, this.props.Create);
     if (nextProps.isGetFormData) {
       nextProps.getFormLibraryData(this.getFormData());
     }
     if (nextProps.Create.uploadedAssetData) {
-      const formData = _.cloneDeep(this.state.formData);
+      const formData = cloneDeep(this.state.formData);
       formData[this.state.currentTab - 1].image = nextProps.Create.uploadedAssetData.metaInfo.public_url;
       this.setState({formData});
       this.props.actions.clearAsset();
     }
     if (nextProps.createResponse && nextProps.createResponse.templateId) {
-      console.log('create response', nextProps.createResponse);
       this.discardValues();
       const message = getMessageObject('success', this.props.intl.formatMessage(messages["Mobile Push Template Created Successfully"]), true);
       this.props.globalActions.addMessageToQueue(message);
@@ -220,16 +107,29 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (nextProps.params.mode) {
       this.setState({mode: nextProps.params.mode});
     }
-    if (nextProps.Create.createTemplateError && !_.isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
+    if (nextProps.Create.createTemplateError && !isEqual(nextProps.Create.createTemplateError, this.props.Create.createTemplateError)) {
       const message = getMessageObject('error', (nextProps.Create.createTemplateErrorMessage && nextProps.Create.createTemplateErrorMessage !== '') ? nextProps.Create.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
     }
-    if (nextProps.Create.iosCtasData) {
-      this.setState({iosCtasData: nextProps.Create.iosCtasData});
+    if (nextProps.iosCtasData) {
+      this.setState({showIosCtaTable: true});
     }
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
-      console.log('final schema is**', nextProps.metaEntities.layouts[0].definition);
+    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && isEmpty(this.state.schema)) {
       const schema = this.props.params.mode === "text" ? nextProps.metaEntities.layouts[0].definition.textSchema : nextProps.metaEntities.layouts[0].definition.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);
+      }
       schema.standalone.sections.splice(1, 1);
       this.injectEvents(schema);
       const query = {
@@ -247,47 +147,45 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
       }
     }
 
-    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && !_.isEqual(this.props.metaEntities.tags, nextProps.metaEntities.tags)) {
-      let injectedTags = _.cloneDeep(this.state.injectedTags);
+    if (nextProps.metaEntities && nextProps.metaEntities.tags && nextProps.metaEntities.tags.custom && !isEqual(this.props.metaEntities.tags, nextProps.metaEntities.tags)) {
+      let injectedTags = cloneDeep(this.state.injectedTags);
       delete injectedTags["Registration custom fields"];
       delete injectedTags["Store custom fields"];
       delete injectedTags["Transaction custom fields"];
-      injectedTags = _.merge({}, injectedTags, nextProps.metaEntities.tags.custom);
-      console.log('new injected tags', nextProps.metaEntities.tags.custom);
-      if (!_.has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
+      injectedTags = merge({}, injectedTags, nextProps.metaEntities.tags.custom);
+
+      if (!has(nextProps.metaEntities.tags.custom, "Registration custom fields")) {
         delete injectedTags["Registration custom fields"];
       }
-      if (!_.has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
+      if (!has(nextProps.metaEntities.tags.custom, "Store custom fields")) {
         delete injectedTags["Store custom fields"];
       }
-      if (!_.has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
+      if (!has(nextProps.metaEntities.tags.custom, "Transaction custom fields")) {
         delete injectedTags["Transaction custom fields"];
       }
       this.setState({injectedTags});
     }
   };
   componentWillUnmount = () => {
-    console.log('removed listener create');
+    this.props.actions.resetStore();
     window.removeEventListener("message", this.handleFrameTasks);
   };
   onTemplateChange = () => {
 
   };
 
-  onFormDataChange = (formData, tabCount, currentTab) => {
-    console.log('Form data changed is ', formData, tabCount, currentTab);
-    const newFormData = _.cloneDeep(formData);
-    if (newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`]) {
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].name;
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].ctaTemplateDetails[0].buttonText;
+  onFormDataChange = (formData, tabCount) => {
+    const newFormData = cloneDeep(formData);
+    const {templateCta} = this.state;
+    if (templateCta) {
+      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;
       delete newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`];
-      if (newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].ctaTemplateDetails[1]) {
-        newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].ctaTemplateDetails[1].buttonText;
+      if (templateCta.ctaTemplateDetails[1]) {
+        newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = templateCta.ctaTemplateDetails[1].buttonText;
       }
     }
-    if (this.state.isSchemaChanged) {
-      this.setState({isSchemaChanged: false});
-    }
+
     // copy content code
     // if (newFormData[0]['copy-iphone-content'] === "") {
     //
@@ -309,18 +207,16 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     //     newFormData[1]['copy-android-content'] = "";
     //   }
     // }
-    this.setState({formData: newFormData, tabCount});
+    this.setState({formData: newFormData, tabCount, isSchemaChanged: !this.state.isSchemaChanged});
   };
 
   onTagSelect = (data, currentTab, srcComp) => {
-    console.log('parent data tag', data, currentTab);
     const editorId = srcComp.target;
     this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
     document.getElementById(editorId).focus();
   };
 
   onTabChange = (data) => {
-    console.log('inside parent ontabchange', data, this.state);
     this.setState({currentTab: data});
   };
   onTemplateNameChange = (name) => {
@@ -329,148 +225,113 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
 
 
   onLinkTypeChange = (eventTriggered, formData, field) => {
-    const schema = _.cloneDeep(this.state.schema);
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane, paneIndex) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              const formChaild = child;
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  if (inputField) {
-                    _.forEach(inputField.cols, (col) => {
-                      if (col.id === field.id && paneIndex === this.state.currentTab - 1) {
-                        console.log(child, fieldIndex, this.state.formData);
-                        const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-                        const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? _.map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
-                        const deeplinkValue = formData[this.state.currentTab - 1][field.id];
-                        const componentIndex = fieldIndex + 1;
-                        const inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${col.id}-select` : `${col.id}-text`;
-                        if ( deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" && (fieldIndex === child.inputFields.length - 1 || child.inputFields[componentIndex].id !== "cta-deeplink-select-section")) {
-                          const row = {
-                            rowClassName: 'mobile-push-row',
-                            id: 'cta-deeplink-select-section',
-                            cols: [
-                              {
-                                id: "cta-label",
-                                metaType: "label",
-                                value: "",
-                                primitive: true,
-                                dynamicTab: false,
-                                type: "div",
-                                width: 4,
-                                onlyDisplay: true,
-                                colStyle: {
-                                  flex: 1,
-                                },
-                              },
-                              {
-                                id: inputId,
-                                placeholder: "Select DeepLink",
-                                type: "select",  //Resembles component to be used
-                                options: deepLinkOptions,
-                                metaType: "text",
-                                datatype: "string",
-                                errorMessage: "Select a deeplink",
-                                required: true,
-                                fluid: true,
-                                width: 19,
-                                style: {
-                                  fontSize: '14px',
-                                  fontFamily: 'open-sans',
-                                  fontStyle: 'normal',
-                                  // fontWeight: 600,
-                                  marginBottom: '16px',
-                                },
-                                styling: "semantic",
-                                order: 1,
-                                customComponent: false,
-                                supportedEvents: [
-                                  'onSelect',
-                                ],
-                              },
-                            ],
-                          };
-                          if (!child.inputFields[fieldIndex + 1] || child.inputFields[componentIndex].id === "cta-external-link") {
-                            formChaild.inputFields[componentIndex] = row;
-                          } else {
-                            formChaild.inputFields.splice(componentIndex, 0, row);
-                          }
-                        } else if ( deeplinkValue && deeplinkValue.toLowerCase() === "external link") {
-                          const row = {
-                            rowClassName: 'mobile-push-row',
-                            id: 'cta-external-link',
-                            cols: [
-                              {
-                                id: "cta-label",
-                                metaType: "label",
-                                value: "",
-                                primitive: true,
-                                dynamicTab: false,
-                                type: "div",
-                                width: 4,
-                                offset: 0,
-                                onlyDisplay: true,
-                              },
-                              {
-                                id: inputId,
-                                placeholder: "External Link",
-                                type: "input",  //Resembles component to be used
-                                metaType: "text",
-                                datatype: "string",
-                                errorMessage: "External Link cannot be empty",
-                                required: true,
-                                fluid: true,
-                                width: 19,
-                                style: {
-                                  fontSize: '14px',
-                                  fontFamily: 'open-sans',
-                                  fontStyle: 'normal',
-                                  // fontWeight: 600,
-                                  marginBottom: '16px',
-                                },
-                                styling: "semantic",
-                                order: 1,
-                                offSet: 4,
-                                customComponent: false,
-                                standalone: false,
-                              },
-                            ],
-                          };
-                          if (!child.inputFields[fieldIndex + 1] || child.inputFields[componentIndex].id === "cta-deeplink-select-section") {
-                            formChaild.inputFields[componentIndex] = row;
-                            if (child.inputFields[componentIndex + 1] && child.inputFields[componentIndex + 1].id === "show-cta-deeplink-keys-label") {
-                              formChaild.inputFields.splice(componentIndex + 1, 1);
-                            }
-                            if (child.inputFields[componentIndex + 1] && child.inputFields[componentIndex + 1].id === "cta-deeplink-keys") {
-                              let configkeys = _.filter(JSON.parse(deeplinks), (dl) => dl.link === formData[this.state.currentTab - 1][`${col.id}-select`]);
-                              if (configkeys[0]) {
-                                configkeys = configkeys[0].keys;
-                              }
-                              if (configkeys.length) {
-                                formChaild.inputFields = formChaild.inputFields.slice(0, componentIndex + 1).concat(formChaild.inputFields.slice( componentIndex + 1 + configkeys.length, formChaild.inputFields.length));
-                              }
-                            }
-                          } else {
-                            formChaild.inputFields.splice(componentIndex, 0, row);
-                          }
-                        }
-                      }
-                    });
+    let 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 === field.id) {
+            const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
+            const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
+            const deeplinkValue = formData[this.state.currentTab - 1][field.id];
+            const componentIndex = fieldIndex + 1;
+            const inputId = deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" ? `${col.id}-select` : `${col.id}-text`;
+            if ( deeplinkValue && deeplinkValue.toLowerCase() === "deeplink" && (fieldIndex === inputFields.length - 1 || inputFields[componentIndex].id !== "cta-deeplink-select-section")) {
+              const row = {
+                rowClassName: 'mobile-push-row',
+                id: 'cta-deeplink-select-section',
+                cols: [
+
+                  {
+                    id: inputId,
+                    placeholder: "Select DeepLink",
+                    type: "select",  //Resembles component to be used
+                    options: deepLinkOptions,
+                    metaType: "text",
+                    datatype: "string",
+                    errorMessage: "Select a deeplink",
+                    required: true,
+                    fluid: true,
+                    width: 18,
+                    offset: 1,
+                    style: {
+                      width: '100%',
+
+                      marginBottom: '16px',
+                    },
+                    styling: "semantic",
+                    order: 1,
+                    customComponent: false,
+                    supportedEvents: [
+                      'onSelect',
+                    ],
+                  },
+                ],
+              };
+              if (!inputFields[fieldIndex + 1] || inputFields[componentIndex].id === "cta-external-link") {
+                inputFields[componentIndex] = row;
+              } else {
+                inputFields.splice(componentIndex, 0, row);
+              }
+            } else if ( deeplinkValue && deeplinkValue.toLowerCase() === "external link") {
+              const row = {
+                rowClassName: 'mobile-push-row',
+                id: 'cta-external-link',
+                cols: [
+
+                  {
+                    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: 18,
+                    offset: 1,
+                    style: {
+                      width: '100%',
+
+                      marginBottom: '16px',
+                    },
+                    styling: "semantic",
+                    order: 1,
+                    customComponent: false,
+                    standalone: false,
+                  },
+                ],
+              };
+              if (!inputFields[fieldIndex + 1] || inputFields[componentIndex].id === "cta-deeplink-select-section") {
+                inputFields[componentIndex] = row;
+                if (inputFields[componentIndex + 1] && inputFields[componentIndex + 1].id === "show-cta-deeplink-keys-label") {
+                  inputFields.splice(componentIndex + 1, 1);
+                }
+                if (inputFields[componentIndex + 1] && inputFields[componentIndex + 1].id === "cta-deeplink-keys") {
+                  let configkeys = filter(JSON.parse(deeplinks), (dl) => dl.link === formData[this.state.currentTab - 1][`${col.id}-select`]);
+                  if (configkeys[0]) {
+                    configkeys = configkeys[0].keys;
                   }
-                });
+                  if (configkeys.length) {
+                    //inputFields = inputFields.slice(0, componentIndex + 1).concat(inputFields.slice( componentIndex + 1 + configkeys.length, inputFields.length));
+
+                    inputFields.splice(componentIndex + 1, configkeys.length);
+                  }
+                }
+              } else {
+                inputFields.splice(componentIndex, 0, row);
               }
-            });
-          });
+            }
+          }
         });
-      });
+      }
     });
+    schema = set(schema, `containers[0].panes[${this.state.currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`, inputFields);
     this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
     this.injectEvents(schema);
   };
-  onTemplateContentChange = (content) => {
-    console.log('Template content changed to ', content);
+  onTemplateContentChange = () => {
+
   };
   onModalCancel = () => {
     if (this.state.modalContent && this.state.modalContent.show) {
@@ -480,7 +341,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   getLinkName = (link) => {
     const ck = this.props.Templates.selectedWeChatAccount.configs ? !!this.props.Templates.selectedWeChatAccount.configs.deeplink : false;
     const deeplinks = ck ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-    const deepLinkOptions = _.filter(JSON.parse(deeplinks), (l) => l.link === link);
+    const deepLinkOptions = filter(JSON.parse(deeplinks), (l) => l.link === link);
     if (deepLinkOptions[0]) {
       return deepLinkOptions[0].name;
     }
@@ -488,11 +349,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   getMappedEvent = (id, event) => {
-    const map = this.state.eventsMap;
-    if (!map[id] || !map[id][event]) {
-      console.log(`error map[id] ${map[id]}` );
-    }
-    return map[id][event];
+    const eventsMap = this.state.eventsMap;
+    return eventsMap[id][event];
   };
   getCurrentWindow = (e) => {
     const response = {
@@ -503,11 +361,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     parent.postMessage(JSON.stringify(response), '*');
   };
   getFormData = (e) => {
-    console.log('posting final result', this.state.formData);
+    const templateData = this.getTransformedData(this.state.formData);
     const response = {
       action: "getFormData",
-      value: this.getTransformedData(this.state.formData),
+      value: templateData,
       validity: this.state.isFormValid,
+      type: templateData.type,
     };
     this.setState({checkValidation: true});
     if (e) {
@@ -543,7 +402,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     });
     obj.versions.base = {};
     delete android.base;
-    if (!_.isEmpty(android)) {
+    if (!isEmpty(android)) {
       obj.versions.base.ANDROID = {
         luid: "{{luid}}",
         cuid: "{{cuid}}",
@@ -554,7 +413,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           style: "BIG_TEXT",
           message: android['message-editor'],
         },
-        custom: _.map(android, (field, key) => {
+        custom: map(android, (field, key) => {
           if (key.indexOf('custom-value') > -1) {
             return field !== "" ? {key: key.replace('custom-value-', "").replace('-cta-deeplink-select', '').replace('-cta-deeplink-secondary-cta-0-select', '').replace('-cta-deeplink-secondary-cta-1-select', ''), value: field} : undefined;
           }
@@ -572,7 +431,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         delete obj.versions.base.ANDROID.cta.deepLinkName;
       }
     }
-    if (!_.isEmpty(ios)) {
+    if (!isEmpty(ios)) {
       obj.versions.base.IOS = {
         luid: "{{luid}}",
         cuid: "{{cuid}}",
@@ -586,7 +445,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           ],
           categoryId: ios['secondary-cta-1-table'] ? ios['secondary-cta-1-table'].id : undefined,
         },
-        custom: _.map(ios, (field, key) => {
+        custom: map(ios, (field, key) => {
           if (key.indexOf('custom-value') > -1) {
             return field !== "" ? {key: key.replace('custom-value-', "").replace('-cta-deeplink2-select', '').replace('-cta-deeplink-secondary-cta-0-select', '').replace('-cta-deeplink-secondary-cta-1-select2', ''), value: field} : undefined;
           }
@@ -606,7 +465,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     if (obj.versions.base.ANDROID) {
       if (obj.versions.base.ANDROID.cta && obj.versions.base.ANDROID.cta.type === "DEEP_LINK") {
-        const params = _.map(android, (field, key) => {
+        const params = map(android, (field, key) => {
           let actionLink;
           if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-select') > -1) {
             const param = key.replace('custom-value-', "").replace('-cta-deeplink-select', '');
@@ -639,7 +498,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           }
           obj.versions.base.ANDROID.expandableDetails.ctas.push(cta);
           if (obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].type === "DEEP_LINK") {
-            const params = _.map(android, (field, key) => {
+            const params = map(android, (field, key) => {
               let actionLink;
               if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-secondary-cta-0-select') > -1) {
                 const param = key.replace('custom-value-', "").replace('-cta-deeplink-secondary-cta-0-select', '');
@@ -664,7 +523,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           }
           obj.versions.base.ANDROID.expandableDetails.ctas.push(cta);
           if (obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].type === "DEEP_LINK") {
-            const params = _.map(android, (field, key) => {
+            const params = map(android, (field, key) => {
               let actionLink;
               if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-secondary-cta-1-select') > -1) {
                 const param = key.replace('custom-value-', "").replace('-cta-deeplink-secondary-cta-1-select', '');
@@ -681,7 +540,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
     if (obj.versions.base.IOS) {
       if (obj.versions.base.IOS.cta && obj.versions.base.IOS.cta.type === "DEEP_LINK") {
-        const params = _.map(ios, (field, key) => {
+        const params = map(ios, (field, key) => {
           let actionLink;
           if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink2-select') > -1) {
             const param = key.replace('custom-value-', "").replace('-cta-deeplink2-select', '');
@@ -708,14 +567,14 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           type: ios['cta-deeplink-secondary-cta-1'] && (ios['cta-deeplink-secondary-cta-1'].toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL"),
           actionLink: ios['cta-deeplink-secondary-cta-1'] && (ios['cta-deeplink-secondary-cta-1'].toLowerCase() === "deeplink" ? (ios['cta-deeplink-secondary-cta-1-select2'] || ios['cta-deeplink-secondary-cta-1-select']) : ios['cta-deeplink-secondary-cta-1-text']),
           ioscdeepLinkName: this.getLinkName(ios['cta-deeplink-secondary-cta-1-select']),
-          templateCtaId: ios['secondary-cta-1-table'] ? ios['secondary-cta-1-table'].ctaTemplateDetails[0].id : undefined,
+          templateCtaId: get(this.state, "templateCta.ctaTemplateDetails[0].id"),
         };
         if (this.props.location.query.type === 'embedded') {
           delete cta.ioscdeepLinkName;
         }
         obj.versions.base.IOS.expandableDetails.ctas.push(cta);
         if (obj.versions.base.IOS.expandableDetails.ctas[obj.versions.base.IOS.expandableDetails.ctas.length - 1].type === "DEEP_LINK") {
-          const params = _.map(ios, (field, key) => {
+          const params = map(ios, (field, key) => {
             let actionLink;
             if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-secondary-cta-1-select') > -1) {
               const param = key.replace('custom-value-', "").replace('-cta-deeplink-secondary-cta-1-select2', '');
@@ -766,7 +625,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   moveToTemplates = () => {
-    console.log('in move to Templates');
     const modalContent = {
       title: "Alert",
       body: this.props.intl.formatMessage(messages["Do you really want to go back? All your temporary changes will be lost!"]),
@@ -791,12 +649,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     if (temp.standalone) {
       temp.standalone.sections = this.injectSections(temp.standalone.sections);
     }
-    _.forEach(temp.containers, (container) => {
+    forEach(temp.containers, (container) => {
       let tempContainer = container;
       tempContainer = this.injectContainer(tempContainer);
       return tempContainer;
     });
-    console.log('final injected schema', schema);
+
     this.setState({schema, isSchemaChanged: true}, () => {
       this.removeStandAlone();
     });
@@ -807,10 +665,10 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     const temp = container;
     if (temp.type === 'tabs') {
       temp.injectedEvents = {};
-      _.forEach(temp.supportedEvents, (event) => {
+      forEach(temp.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(temp.id, event);
       });
-      _.forEach(temp.panes, (pane) => {
+      forEach(temp.panes, (pane) => {
         const tempPane = pane;
         tempPane.sectionsHeaders = this.injectSections(tempPane.sectionsHeaders);
         tempPane.sections = this.injectSections(tempPane.sections);
@@ -820,8 +678,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   injectMultiColSection = (section) => {
-    _.forEach(section.inputFields, (inputField) => {
-      _.forEach(inputField.cols, (col) => {
+    forEach(section.inputFields, (inputField) => {
+      forEach(inputField.cols, (col) => {
         const temp = col;
         if (temp.type === 'popover') {
           temp.content.sections = this.injectSections(temp.content.sections);
@@ -839,15 +697,14 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         }
         temp.injectedEvents = {};
 
-        _.forEach(col.supportedEvents, (event) => {
-          console.log('injected event for ', col, event);
+        forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
         return true;
       });
     });
-    _.forEach(section.actionFields, (actionField) => {
-      _.forEach(actionField.cols, (col) => {
+    forEach(section.actionFields, (actionField) => {
+      forEach(actionField.cols, (col) => {
         const temp = col;
         if (temp.type === 'popover') {
           temp.content.sections = this.injectSections(temp.content.sections);
@@ -855,7 +712,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           return true;
         }
         temp.injectedEvents = {};
-        _.forEach(col.supportedEvents, (event) => {
+        forEach(col.supportedEvents, (event) => {
           temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
         return true;
@@ -865,7 +722,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   injectColLabelSection = (section) => {
-    _.forEach(section.inputFields, (inputField) => {
+    forEach(section.inputFields, (inputField) => {
       const temp = inputField;
       if (temp.type === 'popover') {
         temp.content.sections = this.injectSections(temp.content.sections);
@@ -873,12 +730,12 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         return true;
       }
       temp.injectedEvents = {};
-      _.forEach(inputField.supportedEvents, (event) => {
+      forEach(inputField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
       });
       return true;
     });
-    _.forEach(section.actionFields, (actionField) => {
+    forEach(section.actionFields, (actionField) => {
       const temp = actionField;
       if (temp.type === 'popover') {
         temp.content.sections = this.injectSections(temp.content.sections);
@@ -886,7 +743,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         return true;
       }
       temp.injectedEvents = {};
-      _.forEach(actionField.supportedEvents, (event) => {
+      forEach(actionField.supportedEvents, (event) => {
         temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
       });
       return true;
@@ -895,7 +752,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   injectSections = (sections) => {
-    _.forEach(sections, (section) => {
+    forEach(sections, (section) => {
       let temp = section;
       if (temp.type === 'col-label') {
         temp = this.injectColLabelSection(temp);
@@ -909,7 +766,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   injectParentSection = (section) => {
-    _.forEach(section.childSections, (childSection) => {
+    forEach(section.childSections, (childSection) => {
       let temp = childSection;
       if (temp.type === 'col-label') {
         temp = this.injectColLabelSection(temp);
@@ -944,9 +801,8 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   startTemplateCreation = (data) => {
-    console.log('startTemplateCreation');
     const content = data.content;
-    const id = _.uniqueId();
+    const id = uniqueId();
     const tempData = {
       'message-editor': content,
       'base': true,
@@ -959,18 +815,15 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   startLoading = (ifEdit) => {
-    console.log('startLoading', ifEdit);
     if (ifEdit) {
       this.setState({loading: true});
     }
   };
 
   handleFrameTasks = (e) => {
-    console.log('data listened to is', e.data);
     const type = e.data;
-    console.log('data type', typeof type);
+
     if (typeof type === 'object') {
-      console.log('received something', type);
       const action = type.action;
       switch (action) {
         case "startTemplateCreation":
@@ -991,15 +844,15 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
           this.getFormData(e);
           break;
         case "startTemplateCreation":
-          console.log('Starting to create template');
+
           //this.getFormData(e);
           break;
         case "moveToTemplates":
-          console.log('moving to templates');
+
           this.moveToTemplates();
           break;
         case "validateContent":
-          console.log('validating Content');
+
           this.validateContent(e);
           break;
         default:
@@ -1009,7 +862,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   removeStandAlone = () => {
-    const schema = _.cloneDeep(this.state.schema);
+    const schema = cloneDeep(this.state.schema);
     if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
       schema.standalone.sections.splice(0, 1);
     } else if (this.props.location.query.type === 'embedded' && typeof this.props.location.query.module !== 'undefined') {
@@ -1021,7 +874,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   validateContent = (e) => {
-    console.log('posting final validation result', this.state.isFormValid);
     const response = {
       action: "validateContent",
       value: this.state.isFormValid,
@@ -1054,643 +906,347 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   copyContent = () => {
 
   };
-  addSecondoryCtaIos = (ev) => {
-    const id = ev.target.id;
-    const schema = _.cloneDeep(this.state.schema);
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane, paneIndex) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  _.forEach(inputField.cols, (col) => {
-                    const colId = (paneIndex + 1) > 1 ? col.id + (paneIndex + 1) : col.id;
-                    if (colId === id) {
-                      const inputId = `secondary-cta-${paneIndex}`;
-                      console.log(child.inputFields, fieldIndex);
-                      child.inputFields.splice(fieldIndex, 1, {
-                        rowClassName: 'mobile-push-row',
-                        cols: [
-                          {
-                            id: `${inputId}-label`,
-                            metaType: "label",
-                            value: "Secondary CTA",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 4,
-                            style: {
-                              backgroundColor: 'white',
-                              textAlign: 'left',
-                              color: '#333333',
-                              lineHeight: '24px',
-                              fontSize: '14px',
-                              fontFamily: 'open-sans',
-                              fontStyle: 'normal',
-                              paddingTop: '8px',
-                            },
-                            offset: 0,
-                            onlyDisplay: true,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `${inputId}-table`,
-                            type: "table",  //Resembles component to be used
-                            metaType: "text",
-                            datatype: "string",
-                            pagination: false,
-                            columns: [
-                              {
-                                title: "Name and Description",
-                                dataIndex: "name",
-                                key: "name",
-                                width: 200,
-                                render: (text, record) => (
-                                  <div>
-                                    <div>{record.name}</div>
-                                    <div>{record.description}</div>
-                                  </div>),
-                              },
-                              {
-                                title: "Button 1",
-                                dataIndex: "description",
-                                key: "button1",
-                                width: 100,
-                                render: (text, record) => (
-                                  <div>
-                                    {record.ctaTemplateDetails[0] && 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();
-                      }
-                    }
-                  });
-                });
-              }
-            });
-          });
+  addSecondoryCtaIos = (flag, formData, schemaField) => {
+    const id = schemaField.id;
+    if (formData[this.state.currentTab - 1][id]) {
+      if (!this.props.iosCtasData) {
+        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});
+          }
         });
       });
-    });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
-    this.props.actions.getIosCtas(this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier);//TODO: need to get license code of accoutn and send as arg
+    }
   };
   showSelectedIosCta = (selectedConfig) => {
     const currentTab = this.state.currentTab;
-    const schema = _.cloneDeep(this.state.schema);
+    const schema = cloneDeep(this.state.schema);
     const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-    const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? _.map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane, paneIndex) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              const formChaild = child;
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  _.forEach(inputField.cols, (col) => {
-                    if (col.id.indexOf(`secondary-cta-${currentTab - 1}-table`) > -1) {
-                      console.log(child, fieldIndex, this.state.formData);
-                      const inputId = `secondary-cta-${paneIndex}`;
-
-                      formChaild.inputFields[fieldIndex] = {
-                        rowClassName: 'mobile-push-row',
-                        cols: [
-                          {
-                            id: `${inputId}-action-label`,
-                            metaType: "label",
-                            value: "Secondary CTA",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 4,
-                            style: {
-                              backgroundColor: 'white',
-                              textAlign: 'left',
-                              color: '#333333',
-                              lineHeight: '24px',
-                              fontSize: '14px',
-                              fontFamily: 'open-sans',
-                              fontStyle: 'normal',
-                              paddingTop: '8px',
-                            },
-                            offset: 0,
-                            onlyDisplay: true,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `${inputId}-label`,
-                            metaType: "label",
-                            value: "",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 16,
-                            style: {
-                              backgroundColor: 'white',
-                              textAlign: 'left',
-                              color: '#333333',
-                              lineHeight: '24px',
-                              fontSize: '14px',
-                              fontFamily: 'open-sans',
-                              fontStyle: 'normal',
-                              paddingTop: '8px',
-                            },
-                            offset: 0,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `${inputId}-delete-ios`,
-                            type: "icon",
-                            value: 'delete',
-                            width: 4,
-                            submitAction: "onDelete",
-                            supportedEvents: ["onDelete"],
-                          },
-                        ],
-                      };
-                      formChaild.inputFields[fieldIndex + 1] = {
-                        rowClassName: 'mobile-push-row',
-                        cols: [
-                          {
-                            id: `${inputId}-action-label-empty`,
-                            metaType: "label",
-                            value: "",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 4,
-                            onlyDisplay: true,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `${inputId}-action`,
-                            metaType: "label",
-                            value: "",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 8,
-                            offset: 0,
-                          },
-                          {
-                            id: `${inputId}-action2`,
-                            metaType: "label",
-                            value: "",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 8,
-                            offset: 0,
-                            style: {display: 'none'},
-                          },
-                        ],
-                      };
-                      if (selectedConfig && (selectedConfig.id !== "16589g0g" && selectedConfig.id !== "17543720" && selectedConfig.id !== "1a491g56")) {
-                        formChaild.inputFields[fieldIndex + 2] = {
-                          rowClassName: "mobile-push-row",
-                          cols: [
-                            {
-                              id: `${inputId}-action-label-empty`,
-                              metaType: "label",
-                              value: "",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              offset: 0,
-                              onlyDisplay: true,
-                            },
-                            {
-                              id: `cta-deeplink-${inputId}`,
-                              type: "radioGroup",  //Resembles component to be used
-                              metaType: "text",
-                              datatype: "string",
-                              options: ["Deeplink", "External Link"],
-                              value: "Deeplink",
-                              required: true,
-                              width: 16,
-                              offSet: 4,
-                              errorMessage: "Please select link type",
-                              fluid: true,
-                              style: {
-                                fontFamily: 'open-sans',
-                                fontSize: '14px',
-                                lineHeight: '24px',
-                              },
-                              styling: "semantic",
-                              order: 1,
-                              supportedEvents: ["onChange"],
-                              customComponent: false,
-                            },
-                          ],
-                        };
-                        formChaild.inputFields[fieldIndex + 3] = {
-                          rowClassName: 'mobile-push-row',
-                          id: 'cta-deeplink-select-section',
-                          cols: [
-                            {
-                              id: "cta-label",
-                              metaType: "label",
-                              value: "",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                            },
-                            {
-                              id: `cta-deeplink-${inputId}-select2`,
-                              placeholder: "Select DeepLink",
-                              type: "select",  //Resembles component to be used
-                              options: deepLinkOptions,
-                              metaType: "text",
-                              datatype: "string",
-                              errorMessage: "Select a deeplink",
-                              required: true,
-                              fluid: true,
-                              width: 19,
-                              style: {
-                                fontSize: '14px',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
-                                // fontWeight: 600,
-                                marginBottom: '16px',
-                              },
-                              styling: "semantic",
-                              order: 1,
-                              customComponent: false,
-                              supportedEvents: [
-                                'onSelect',
-                              ],
-                            },
-                          ],
-                        };
-                      }
-                    }
-                  });
-                });
-              }
-            });
+    const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
+    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 === "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",
+              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',
+              cols: [
+
+                {
+                  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',
+                  ],
+                },
+              ],
+            });
+          }
+        }
       });
     });
+    // set(schema, `containers[0].panes[${this.state.currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`, inputFields);
+
     this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
     this.injectEvents(schema);
   };
-  addPrimaryCta = (ev) => {
-    const id = ev.target.id;
-    const schema = _.cloneDeep(this.state.schema);
+  addPrimaryCta = (flag, formData, schemaField) => {
+    const id = schemaField.id;
+    const schema = cloneDeep(this.state.schema);
     const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-    const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? _.map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
-    // const eventsMap = _.cloneDeep(this.state.eventsMap);
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  _.forEach(inputField.cols, (col) => {
-                    const colId = `${col.id}${this.state.currentTab > 1 ? this.state.currentTab : ''}`;
-                    if (colId === id) {
-                      console.log(child.inputFields, fieldIndex);
-                      child.inputFields.splice(fieldIndex, 1, {
-                        rowClassName: 'mobile-push-row',
-                        cols: [
-                          {
-                            id: "cta-label",
-                            metaType: "label",
-                            value: "Primary CTA",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 4,
-                            style: {
-                              backgroundColor: 'white',
-                              textAlign: 'left',
-                              color: '#333333',
-                              lineHeight: '24px',
-                              fontSize: '14px',
-                              fontFamily: 'open-sans',
-                              fontStyle: 'normal',
-                            },
-                            offset: 0,
-                            onlyDisplay: true,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
-                            type: "radioGroup",  //Resembles component to be used
-                            metaType: "text",
-                            datatype: "string",
-                            options: ["Deeplink", "External Link"],
-                            value: "Deeplink",
-                            required: true,
-                            width: 18,
-                            errorMessage: "Please select link type",
-                            fluid: true,
-                            styling: "semantic",
-                            order: 1,
-                            customComponent: false,
-                            supportedEvents: ["onChange"],
-                          },
-                          {
-                            id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-delete`,
-                            type: "icon",
-                            value: 'delete',
-                            width: 1,
-                            submitAction: "onDelete",
-                            supportedEvents: ["onDelete"],
-                          },
-                        ],
-                      });
-                      child.inputFields.splice(fieldIndex + 1, 0, {
-                        rowClassName: 'mobile-push-row',
-                        id: 'cta-deeplink-select-section',
-                        cols: [
-                          {
-                            id: "cta-label",
-                            metaType: "label",
-                            value: "",
-                            primitive: true,
-                            dynamicTab: false,
-                            type: "div",
-                            width: 4,
-                            onlyDisplay: true,
-                            colStyle: {
-                              flex: 1,
-                            },
-                          },
-                          {
-                            id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
-                            placeholder: "Select DeepLink",
-                            type: "select",  //Resembles component to be used
-                            options: deepLinkOptions,
-                            metaType: "text",
-                            datatype: "string",
-                            required: true,
-                            errorMessage: "Select a deeplink",
-                            fluid: true,
-                            width: 19,
-                            style: {
-                              fontSize: '14px',
-                              fontFamily: 'open-sans',
-                              fontStyle: 'normal',
-                              // fontWeight: 600,
-                              marginBottom: '16px',
-                            },
-                            styling: "semantic",
-                            order: 1,
-                            customComponent: false,
-                            supportedEvents: [
-                              'onSelect',
-                            ],
-                          },
-                        ],
-                      });
-                    }
-                  });
-                });
-              }
+    const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
+    // const eventsMap = cloneDeep(this.state.eventsMap);
+    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) => {
+        const colId = col.id;
+        if (colId === id) {
+          if (formData[this.state.currentTab - 1][id]) { // add primary cta
+            inputFields.splice(fieldIndex + 1, 0, {
+              rowClassName: 'mobile-push-row',
+              cols: [
+                {
+                  id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}`,
+                  type: "radioGroup",  //Resembles component to be used
+                  metaType: "text",
+                  datatype: "string",
+                  options: ["Deeplink", "External Link"],
+                  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,
+                  customComponent: false,
+                  supportedEvents: ["onChange"],
+                },
+
+              ],
             });
-          });
-        });
+            inputFields.splice(fieldIndex + 2, 0, {
+              rowClassName: 'mobile-push-row',
+              id: 'cta-deeplink-select-section',
+              cols: [
+
+                {
+                  id: `cta-deeplink${this.state.currentTab > 1 ? this.state.currentTab : ''}-select`,
+                  placeholder: "Select DeepLink",
+                  type: "select",  //Resembles component to be used
+                  options: deepLinkOptions,
+                  metaType: "text",
+                  datatype: "string",
+                  required: true,
+                  errorMessage: "Select a deeplink",
+                  fluid: true,
+                  width: 18,
+                  offset: 1,
+                  style: {
+                    width: '100%',
+
+
+                    marginBottom: '16px',
+                  },
+                  styling: "semantic",
+                  order: 1,
+                  customComponent: false,
+                  supportedEvents: [
+                    'onSelect',
+                  ],
+                },
+              ],
+            });
+          } else { // remove existing primary cta cuz primary cta is unchecked
+            const identifier = (this.state.currentTab - 1) ? 'add-sec-cta-ios' : 'add-sec-cta';
+            const indexOfNextField = findIndex(inputFields, {identifier});
+            const deleteCount = indexOfNextField - fieldIndex;
+            const newInputFields = [...inputFields.slice(0, fieldIndex + 1), ...inputFields.slice(fieldIndex + deleteCount, inputFields.length)];
+            set(schema, `containers[0].panes[${this.state.currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
+          }
+        }
       });
     });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
-    this.injectEvents(schema);
+    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true, formData}, () => this.injectEvents(schema));
   };
-  addSecondoryCta = (ev) => {
-    const id = ev.target.id;
-    const schema = _.cloneDeep(this.state.schema);
+  addSecondoryCta = (flag, formData, schemaField) => {
+    const id = schemaField.id;
+    const schema = cloneDeep(this.state.schema);
     const ck = this.props.Templates.selectedWeChatAccount.configs ? !!this.props.Templates.selectedWeChatAccount.configs.deeplink : false;
     const deeplinks = ck ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-    const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? _.map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
-    // const eventsMap = _.cloneDeep(this.state.eventsMap);
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  _.forEach(inputField.cols, (col) => {
-                    if (col.id === id) {
-                      if (col.fieldsCount < col.fieldsLimit) {
-                        const inputId = `secondary-cta-${col.fieldsCount}`;
-                        console.log(child.inputFields, fieldIndex);
-                        child.inputFields.splice(fieldIndex, 0, {
-                          rowClassName: 'mobile-push-row',
-                          cols: [
-                            {
-                              id: `${inputId}-space`,
-                              metaType: "label",
-                              value: "Secondary CTA",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              style: {
-                                backgroundColor: 'white',
-                                textAlign: 'left',
-                                color: '#333333',
-                                lineHeight: '24px',
-                                fontSize: '14px',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
-                                paddingTop: '8px',
-                              },
-                              offset: 0,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                            },
-                            {
-                              id: `${inputId}-label`,
-                              label: "link",
-                              type: "input",  //Resembles component to be used
-                              metaType: "text",
-                              datatype: "string",
-                              required: true,
-                              width: 18,
-                              offset: 4,
-                              placeholder: "Enter CTA Label here",
-                              fluid: true,
-                              styling: "semantic",
-                              order: 1,
-                              customComponent: false,
-                              errorMessage: "CTA label cannot be empty.",
-                            },
-                            {
-                              id: `${inputId}-delete`,
-                              type: "icon",
-                              value: 'delete',
-                              width: 1,
-                              submitAction: "onDelete",
-                              supportedEvents: ["onDelete"],
-                            },
-                          ],
-                        });
-                        child.inputFields.splice(fieldIndex + 1, 0, {
-                          rowClassName: 'mobile-push-row',
-                          cols: [
-                            {
-                              id: `${inputId}-label-space`,
-                              metaType: "label",
-                              value: "",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              style: {
-                                backgroundColor: 'white',
-                                textAlign: 'left',
-                                color: '#333333',
-                                lineHeight: '24px',
-                                fontSize: '14px',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
-                                paddingTop: '8px',
-                              },
-                              offset: 0,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                            },
-                            {
-                              id: `cta-deeplink-${inputId}`,
-                              type: "radioGroup",  //Resembles component to be used
-                              metaType: "text",
-                              datatype: "string",
-                              options: ["Deeplink", "External Link"],
-                              value: "Deeplink",
-                              required: true,
-                              width: 16,
-                              errorMessage: "Please select link type",
-                              fluid: true,
-                              styling: "semantic",
-                              order: 1,
-                              style: {
-                                lineHeight: '24px',
-                                fontSize: '14px',
-                              },
-                              customComponent: false,
-                              supportedEvents: ["onChange"],
-                            },
-                          ],
-                        });
-                        child.inputFields.splice(fieldIndex + 2, 0, {
-                          rowClassName: 'mobile-push-row',
-                          id: 'cta-deeplink-select-section',
-                          cols: [
-                            {
-                              id: "cta-label",
-                              metaType: "label",
-                              value: "",
-                              primitive: true,
-                              dynamicTab: false,
-                              type: "div",
-                              width: 4,
-                              onlyDisplay: true,
-                              colStyle: {
-                                flex: 1,
-                              },
-                            },
-                            {
-                              id: `cta-deeplink-${inputId}-select`,
-                              placeholder: "Select DeepLink",
-                              type: "select",  //Resembles component to be used
-                              options: deepLinkOptions,
-                              errorMessage: "Select a deeplink",
-                              metaType: "text",
-                              datatype: "string",
-                              required: true,
-                              fluid: true,
-                              width: 19,
-                              style: {
-                                fontSize: '14px',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
-                                // fontWeight: 600,
-                                marginBottom: '16px',
-                              },
-                              styling: "semantic",
-                              order: 1,
-                              customComponent: false,
-                              supportedEvents: [
-                                'onSelect',
-                              ],
-                            },
-                          ],
-                        });
-                        const colField = col;
-                        colField.value = "Add Another CTA";
-                        colField.fieldsCount += 1;
-                        if (col.fieldsCount === col.fieldsLimit) {
-                          child.inputFields.pop();
-                        }
-                        // eventsMap[`cta-deeplink-${inputId}`] = {"onChange": this.onLinkTypeChange};
-                      }
-                    }
-                  });
-                });
-              }
+    const deepLinkOptions = this.props.Templates.selectedWeChatAccount ? map(JSON.parse(deeplinks), (link) => ({label: link.name, value: link.link, title: link.link }) ) : [];
+    // const eventsMap = cloneDeep(this.state.eventsMap);
+    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) {
+          if (formData[this.state.currentTab - 1][id]) {
+            const inputId = `secondary-cta-${col.fieldsCount}`;
+            inputFields.splice(fieldIndex + 1, 0, {
+              rowClassName: 'mobile-push-row',
+              cols: [
+
+                {
+                  id: `${inputId}-label`,
+                  label: "Button label",
+                  type: "input",  //Resembles component to be used
+                  metaType: "text",
+                  datatype: "string",
+                  required: true,
+                  width: 18,
+                  offset: 1,
+                  placeholder: "Enter CTA Label here",
+                  fluid: true,
+                  styling: "semantic",
+                  order: 1,
+                  customComponent: false,
+                  errorMessage: "CTA label cannot be empty.",
+                },
+
+              ],
             });
-          });
-        });
+            inputFields.splice(fieldIndex + 2, 0, {
+              rowClassName: 'mobile-push-row',
+              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,
+
+                  customComponent: false,
+                  supportedEvents: ["onChange"],
+                },
+              ],
+            });
+            inputFields.splice(fieldIndex + 3, 0, {
+              rowClassName: 'mobile-push-row',
+              id: 'cta-deeplink-select-section',
+              cols: [
+
+
+                {
+                  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: 18,
+                  offset: 1,
+                  style: {
+                    width: '100%',
+                    marginBottom: '16px',
+                  },
+                  styling: "semantic",
+                  order: 1,
+                  customComponent: false,
+                  supportedEvents: [
+                    'onSelect',
+                  ],
+                },
+              ],
+            });
+
+            // eventsMap[`cta-deeplink-${inputId}`] = {"onChange": this.onLinkTypeChange};
+          } else {
+            const identifier = id === "add-sec-cta" ? 'add-sec-cta-2' : null;
+            const indexOfNextField = identifier ? findIndex(inputFields, {identifier}) : inputFields.length;
+            const deleteCount = indexOfNextField - fieldIndex;
+            const newInputFields = [...inputFields.slice(0, fieldIndex + 1), ...inputFields.slice(fieldIndex + deleteCount, inputFields.length)];
+            set(schema, `containers[0].panes[${this.state.currentTab - 1}].sections[0].childSections[0].childSections[0].inputFields`, newInputFields);
+          }
+        }
       });
     });
     this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true});
     this.injectEvents(schema);
   };
   copyIphoneContent = () => {
-    const formData = _.cloneDeep(this.state.formData);
+    const formData = cloneDeep(this.state.formData);
     if (!!formData[1]['message-title2'] && !!formData[1]['message-editor2']) {
       formData[0]['message-title'] = formData[1]['message-title2'];
       formData[0]['message-editor'] = formData[1]['message-editor2'];
@@ -1700,7 +1256,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     }
   };
   copyAndroidContent = () => {
-    const formData = _.cloneDeep(this.state.formData);
+    const formData = cloneDeep(this.state.formData);
     if (!!formData[0]['message-title'] && !!formData[0]['message-editor']) {
       formData[1]['message-title2'] = formData[0]['message-title'];
       formData[1]['message-editor2'] = formData[0]['message-editor'];
@@ -1725,76 +1281,40 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   };
 
   showCtaKeys = (eventTriggered, formData, field) => {
-    console.log(this.props.Templates);
-    const schema = _.cloneDeep(this.state.schema);
-    const eventsMap = _.cloneDeep(this.state.eventsMap);
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (child) => {
+    const schema = cloneDeep(this.state.schema);
+    const eventsMap = cloneDeep(this.state.eventsMap);
+    forEach(schema.containers, (container) => {
+      forEach(container.panes, (pane) => {
+        forEach(pane.sections, (section) => {
+          forEach(section.childSections, (childeSection) => {
+            forEach(childeSection.childSections, (child) => {
               const formChaild = child;
               if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  _.forEach(inputField.cols, (col) => {
+                forEach(child.inputFields, (inputField, fieldIndex) => {
+                  forEach(inputField.cols, (col) => {
                     if (col.id === field.id) {
                       const formDataKey = col.id.replace("-show-keys", "");
                       const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-                      let keys = this.props.Templates.selectedWeChatAccount ? _.filter(JSON.parse(deeplinks), (dl) => dl.link === formData[this.state.currentTab - 1][formDataKey]) : [];
+                      let keys = this.props.Templates.selectedWeChatAccount ? filter(JSON.parse(deeplinks), (dl) => dl.link === formData[this.state.currentTab - 1][formDataKey]) : [];
                       if (keys[0]) {
                         keys = keys[0].keys;
                       }
-                      let rows = _.map(keys, (key) => {
+                      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",
+                              label: key.replace('_', " "),
                               type: "input",  //Resembles component to be used
                               metaType: "text",
                               datatype: "string",
                               required: true,
-                              width: 14,
+                              width: 18,
+                              offset: 1,
                               placeholder: `Please input ${key.replace('_', " ")} here .`,
                               fluid: true,
                               styling: "semantic",
@@ -1808,9 +1328,9 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                         return row;
                         // formChaild.inputFields[fieldIndex + index] = field;
                       });
-                      console.log(formChaild);
-                      console.log("this in getctakeys", this);
-                      const configkeys = _.filter(JSON.parse(deeplinks), (dl) => dl.link === this.state.formData[this.state.currentTab - 1][field.id]);
+
+
+                      const configkeys = filter(JSON.parse(deeplinks), (dl) => dl.link === this.state.formData[this.state.currentTab - 1][field.id]);
                       if (configkeys.length) {
                         const options = configkeys[0].keys;
                         formChaild.inputFields = formChaild.inputFields.slice(0, fieldIndex + 1).concat(formChaild.inputFields.slice( fieldIndex + options.length + 1, formChaild.inputFields.length));
@@ -1837,109 +1357,42 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.injectEvents(schema);
   };
   saveFormData = (formData) => {
-    console.log('Saving form data', formData, this.state.tabCount);
     const obj = this.getTransformedData(formData);
-    console.log('obj', obj);
+
     this.props.actions.createTemplate(obj);
   };
-  deleteSecondaryCtaIos = (event) => {
-    const id = event.currentTarget.id;
-    const schema = _.cloneDeep(this.state.schema);
-    // const eventsMap = _.cloneDeep(this.state.eventsMap);
-    const selectedDeeplink = this.state.formData[this.state.currentTab - 1][`cta-deeplink-${id.replace('delete-ios', 'select2')}`];
-    const formData = _.cloneDeep(this.state.formData);
-    const self = this;
-    const device = this.state.currentTab === 1 ? 'android' : 'ios';
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (formChild) => {
-              const child = formChild;
-              if (child.type === 'multicols') {
-                _.forEach(child.inputFields, (inputField, fieldIndex) => {
-                  if (inputField) {
-                    _.forEach(inputField.cols, (col) => {
-                      if (col.id === id) {
-                        child.inputFields.splice(fieldIndex, 3);
-                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-external-link") {
-                          child.inputFields.splice(fieldIndex, 1);
-                        }
-                        if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
-                          const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-                          const configkeys = this.props.Templates.selectedWeChatAccount ? _.filter(JSON.parse(deeplinks), (dl) => dl.link === selectedDeeplink) : [];
-                          if (configkeys.length) {
-                            const options = configkeys[0].keys;
-                            child.inputFields = child.inputFields.slice(0, fieldIndex).concat(child.inputFields.slice( fieldIndex + options.length + 1, child.inputFields.length));
-                            delete formData[self.state.currentTab - 1][`cta-deeplink-${id.replace('delete', 'select')}`];
-                            delete formData[self.state.currentTab - 1][`cta-deeplink-${id.replace('-delete', '')}`];
-                          } else {
-                            child.inputFields.splice(fieldIndex, 1);
-                          }
-                        }
-                        if (device === 'ios') {
-                          child.inputFields[fieldIndex] = {
-                            cols: [
-                              {
-                                id: "add-sec-cta-ios",
-                                metaType: "label",
-                                value: "Add Secondary CTA",
-                                primitive: true,
-                                dynamicTab: false,
-                                type: "div",
-                                style: {
-                                  backgroundColor: 'white',
-                                  textAlign: 'left',
-                                  color: '#2673D7',
-                                  lineHeight: '24px',
-                                  marginTop: '16px',
-                                  fontSize: '14px',
-                                  fontWeight: '600',
-                                  fontFamily: 'open-sans',
-                                  fontStyle: 'normal',
-                                  cursor: 'pointer',
-                                },
-                                offset: 0,
-                                onlyDisplay: true,
-                                colStyle: {
-                                  flex: 1,
-                                },
-                                submitAction: "addSecondaryCtaIos",
-                                supportedEvents: ["addSecondaryCtaIos"],
-                              },
-                            ],
-                          };
-                        }
-                      }
-                    });
-                  }
-                });
-              }
-            });
-          });
+  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);
+          }
         });
-      });
+      }
     });
-    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, formData, isSchemaChanged: true});
+    this.setState({schema, initialState: this.state.initialState ? this.state.initialState : this.state.schema, isSchemaChanged: true}, callback);
     this.injectEvents(schema);
   };
   deletePrimaryCTA = (event) => {
     const id = event.currentTarget.id;
-    const schema = _.cloneDeep(this.state.schema);
-    // const eventsMap = _.cloneDeep(this.state.eventsMap);
+    const schema = cloneDeep(this.state.schema);
+    // const eventsMap = cloneDeep(this.state.eventsMap);
     const selectedDeeplink = this.state.formData[this.state.currentTab - 1][`${id.replace('delete', 'select')}`];
-    const formData = _.cloneDeep(this.state.formData);
+    const formData = cloneDeep(this.state.formData);
     const self = this;
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (formChild) => {
+    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) => {
+                forEach(child.inputFields, (inputField, fieldIndex) => {
                   if (inputField) {
-                    _.forEach(inputField.cols, (col) => {
+                    forEach(inputField.cols, (col) => {
                       if (col.id === id) {
                         child.inputFields.splice(fieldIndex, 1);
                         if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-external-link") {
@@ -1947,7 +1400,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                         }
                         if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
                           const deeplinks = this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.configs && !!this.props.Templates.selectedWeChatAccount.configs.deeplink ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-                          const configkeys = this.props.Templates.selectedWeChatAccount ? _.filter(JSON.parse(deeplinks), (dl) => dl.link === selectedDeeplink) : [];
+                          const configkeys = this.props.Templates.selectedWeChatAccount ? filter(JSON.parse(deeplinks), (dl) => dl.link === selectedDeeplink) : [];
                           if (configkeys.length) {
                             const options = configkeys[0].keys;
                             child.inputFields = child.inputFields.slice(0, fieldIndex).concat(child.inputFields.slice( fieldIndex + options.length + 1, child.inputFields.length));
@@ -1970,11 +1423,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                                 backgroundColor: 'white',
                                 textAlign: 'left',
                                 color: '#2673D7',
-                                lineHeight: '24px',
-                                fontSize: '14px',
-                                fontWeight: '600',
-                                fontFamily: 'open-sans',
-                                fontStyle: 'normal',
+
                                 cursor: 'pointer',
                               },
                               offset: 0,
@@ -2011,21 +1460,21 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
         return;
       }
     }
-    const schema = _.cloneDeep(this.state.schema);
-    // const eventsMap = _.cloneDeep(this.state.eventsMap);
+    const schema = cloneDeep(this.state.schema);
+    // const eventsMap = cloneDeep(this.state.eventsMap);
     const selectedDeeplink = this.state.formData[this.state.currentTab - 1][`cta-deeplink-${id.replace('delete', 'select')}`];
-    const formData = _.cloneDeep(this.state.formData);
+    const formData = cloneDeep(this.state.formData);
     const device = this.state.currentTab === 1 ? 'android' : 'ios';
-    _.forEach(schema.containers, (container) => {
-      _.forEach(container.panes, (pane) => {
-        _.forEach(pane.sections, (section) => {
-          _.forEach(section.childSections, (childeSection) => {
-            _.forEach(childeSection.childSections, (formChild) => {
+    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) => {
+                forEach(child.inputFields, (inputField, fieldIndex) => {
                   if (inputField) {
-                    _.forEach(inputField.cols, (col) => {
+                    forEach(inputField.cols, (col) => {
                       if (col.id === id) {
                         if (device === 'ios') {
                           child.inputFields.splice(fieldIndex, 3);
@@ -2038,7 +1487,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                         if (child.inputFields[fieldIndex] && child.inputFields[fieldIndex].id === "cta-deeplink-select-section") {
                           const ck = this.props.Templates.selectedWeChatAccount.configs ? !!this.props.Templates.selectedWeChatAccount.configs.deeplink : false;
                           const deeplinks = ck ? this.props.Templates.selectedWeChatAccount.configs.deeplink : '[]';
-                          const configkeys = this.props.Templates.selectedWeChatAccount ? _.filter(JSON.parse(deeplinks), (dl) => dl.link === selectedDeeplink) : [];
+                          const configkeys = this.props.Templates.selectedWeChatAccount ? filter(JSON.parse(deeplinks), (dl) => dl.link === selectedDeeplink) : [];
                           if (configkeys.length) {
                             const options = configkeys[0].keys;
                             child.inputFields = child.inputFields.slice(0, fieldIndex).concat(child.inputFields.slice( fieldIndex + options.length + 1, child.inputFields.length));
@@ -2060,12 +1509,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                                   backgroundColor: 'white',
                                   textAlign: 'left',
                                   color: '#2673D7',
-                                  lineHeight: '24px',
-                                  fontSize: '14px',
-                                  marginTop: '16px',
-                                  fontWeight: '600',
-                                  fontFamily: 'open-sans',
-                                  fontStyle: 'normal',
+
                                   cursor: 'pointer',
                                 },
                                 offset: 0,
@@ -2093,12 +1537,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                                     backgroundColor: 'white',
                                     textAlign: 'left',
                                     color: '#2673D7',
-                                    lineHeight: '24px',
-                                    fontSize: '14px',
-                                    fontWeight: '600',
-                                    marginTop: '16px',
-                                    fontFamily: 'open-sans',
-                                    fontStyle: 'normal',
+
                                     cursor: 'pointer',
                                   },
                                   offset: 0,
@@ -2132,11 +1571,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                                     backgroundColor: 'white',
                                     textAlign: 'left',
                                     color: '#2673D7',
-                                    lineHeight: '24px',
-                                    fontSize: '14px',
-                                    fontWeight: '600',
-                                    fontFamily: 'open-sans',
-                                    fontStyle: 'normal',
+
                                     cursor: 'pointer',
                                   },
                                   offset: 0,
@@ -2167,7 +1602,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     this.injectEvents(schema);
   };
   handleOnTagsContextChange = (data) => {
-    console.log('parent tags context', data);
     const query = {
       layout: 'mobilepush',
       type: 'TAG',
@@ -2176,6 +1610,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
     };
     this.props.globalActions.fetchSchemaForEntity(query);
   };
+  handleClose = () => {
+    const formData = cloneDeep(this.state.formData);
+    formData[this.state.currentTab - 1]['add-sec-cta-ios'] = false;
+    this.setState({showIosCtaTable: false, formData});
+  }
   render() {
     let tipText = this.props.Create.createTemplateInProgress ? "Saving Template..." : "";
     let loading = this.props.Create.createTemplateInProgress ? this.props.Create.createTemplateInProgress : false;
@@ -2210,13 +1649,13 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 onChange={this.onFormDataChange}
                 currentTab={this.state.currentTab}
                 parent={this}
-                formData={_.cloneDeep(this.state.formData)}
+                formData={cloneDeep(this.state.formData)}
                 location={this.props.location}
                 tags={tags}
                 injectedTags={this.state.injectedTags ? this.state.injectedTags : {}}
                 onFormValidityChange={this.setFormValidity}
                 usingTabContainer
-                checkValidation={false}
+                checkValidation={this.state.checkValidation}
                 iosCtasData={this.state.iosCtasData}
                 tabKey={this.state.tabKey}
                 tabCount={2}
@@ -2230,6 +1669,65 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 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}
+              />
+            }
+
           </Row>
         </Spin>
       </div>
@@ -2250,6 +1748,7 @@ Create.propTypes = {
   intl: intlShape.isRequired,
   supportedTags: PropTypes.array,
   getDefaultTags: PropTypes.string,
+  iosCtasData: PropTypes.array,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -2257,6 +1756,7 @@ const mapStateToProps = createStructuredSelector({
   createResponse: makeSelectCreateResponse(),
   metaEntities: makeSelectMetaEntities(),
   Templates: makeSelectTemplates(),
+  iosCtasData: makeSelectIosCta(),
 });
 
 function mapDispatchToProps(dispatch) {