@capillarytech/creatives-library 8.0.136 → 8.0.137-alpha.1

package/containers/Line/Edit/index.js

@@ -1,1050 +0,0 @@
-
-/*
- *
- * Create
- *
- */
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-import {bindActionCreators} from "redux";
-import { connect } from 'react-redux';
-import { Row, Col, Spin, Breadcrumb, notification } from 'antd';
-import { createStructuredSelector } from 'reselect';
-import { injectIntl, intlShape } from 'react-intl';
-import _ from 'lodash';
-import {makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse} from "../../MobilePush/Edit/selectors";
-import {makeSelectMetaEntities, setInjectedTags} from "../../Cap/selectors";
-import {getMessageObject} from "../../../utils/messageUtils";
-import FormBuilder from '../../../components/FormBuilder';
-import * as globalActions from "../../Cap/actions";
-import * as actions from "../../MobilePush/Edit/actions";
-import * as templatesActions from "../../Templates/actions";
-import {makeSelectTemplates} from "../../Templates/selectors";
-import messages from './messages';
-import './_lineEdit.scss';
-import { createQueryString } from '../../../utils/common';
-const BreadcrumbItem = Breadcrumb.Item;
-
-export class Edit extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    const map = {
-      "template-name": {
-        onChange: this.onTemplateNameChange,
-      },
-      "discard-button": {
-        discardValues: this.discardValues,
-      },
-      "cancel-button": {
-        cancelTemplate: this.cancelTemplate,
-      },
-      "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,
-      },
-      "image-upload": {
-        onUpload: this.uploadImage,
-      },
-      "line-template": {
-        onSelect: this.onTemplateChange,
-      },
-    };
-    this.state = {
-      formData: {},
-      tabCount: 1,
-      schema: {},
-      currentTab: 1,
-      editData: {},
-      loading: false,
-      isFormValid: true,
-      injectedTags: {},
-      showModal: false,
-      eventsMap: map,
-      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages['template not configured,']), type: 'confirm'},
-    };
-  }
-  componentWillMount() {
-    
-    if (this.props.location.query.type !== 'embedded') {
-      const type = this.props.location.query.type;
-      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      this.props.router.push({
-        pathname: `/line/`,
-        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
-      });
-    } else {
-      const query = {
-        layout: 'LINE',
-        type: 'LAYOUT',
-      };
-      this.props.globalActions.fetchSchemaForEntity(query);
-    }
-  }
-
-  componentDidMount() {
-    window.addEventListener("message", this.handleFrameTasks);
-    const type = this.props.location.query.type;
-    if (type === 'embedded') {
-      const response = {
-        action: 'startTemplateCreation',
-      };
-      parent.postMessage(JSON.stringify(response), '*');
-    }
-    if (!_.isEmpty(this.state.schema)) {
-      this.injectEvents(this.state.schema);
-    }
-    if (this.props.location.query && typeof this.props.location.query.module === 'undefined') { // when this containers is imported from creatives library
-      if (this.props.params.id) {
-        this.props.actions.getTemplateDetails(this.props.params.id);
-      } else {
-        this.props.actions.setTemplateDetails(this.props.templateData);
-      }
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isGetFormData) {
-      nextProps.getFormLibraryData(this.getFormData());
-    }
-    const params = {
-      name: '',
-      sortBy: 'Most Recent',
-    };
-    this.props.actions.getLineTemplatesList('line', params);
-
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.fullSchema)) {
-      this.setState({fullSchema: nextProps.metaEntities.layouts[0].definition, schema: nextProps.location.query.module === 'loyalty' ? nextProps.metaEntities.layouts[0].definition.textSchema : {}}, () => {
-        if (nextProps.location.query.module !== 'loyalty') {
-          this.props.actions.getTemplateDetails(this.props.params.id);
-        }
-      });
-      if (this.props.location.query.type === 'embedded') {
-        this.showNext();
-      }
-    }
-
-    if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && nextProps.Edit.lineTemplates && !_.isEqual(nextProps.Edit.lineTemplates, this.props.Edit.lineTemplates)) { //used inloyalty
-      if (nextProps.location.query.type === 'embedded' && nextProps.location.query.module === 'loyalty') {
-        this.setTemplateOptions(nextProps.Edit.lineTemplates);
-      }
-    }
-    if (nextProps.templateDetails && nextProps.templateDetails.name && _.isEmpty(this.state.editData) && (this.props.location.query.type !== 'embedded' || (!_.isEmpty(this.state.fullSchema)))) {
-      this.props = nextProps;
-      const mode = nextProps.templateDetails.definition ? nextProps.templateDetails.definition.mode : nextProps.templateDetails.mode;
-      const schema = mode === "text" ? this.state.fullSchema?.textSchema : this.state.fullSchema?.imageSchema;
-      this.setEditState(nextProps.templateDetails, schema);
-      const query = {
-        layout: 'line',
-        type: 'TAG',
-        context: this.props.location.query.type === 'embedded' ? this.props.location.query.module : 'default',
-        embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
-      };
-      if (this.props.getDefaultTags) {
-        query.context = this.props.getDefaultTags;
-      }
-      this.props.globalActions.fetchSchemaForEntity(query);
-    }
-    if (nextProps.Edit.uploadedAssetData) {
-      const formData = _.cloneDeep(this.state.formData);
-      formData[this.state.currentTab - 1].image = nextProps.Edit.uploadedAssetData.metaInfo.public_url;
-      this.setState({formData});
-      this.props.actions.clearAsset();
-    }
-    if (nextProps.Edit.iosCtasData) {
-      this.setState({iosCtasData: nextProps.Edit.iosCtasData});
-    }
-    if (nextProps.Edit.editResponse && nextProps.Edit.editResponse.templateId) {
-      
-      this.resetSchema();
-      this.setState({
-        formData: {},
-        tabCount: 1,
-        currentTab: 1,
-        editData: {},
-      });
-      const message = getMessageObject('success', this.props.intl.formatMessage(messages['MOBILEPUSH Template Edited Successfully']), true);
-      this.props.globalActions.addMessageToQueue(message);
-      this.props.actions.clearEditResponse();
-      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      const type = this.props.location.query.type;
-      this.props.router.push({
-        pathname: `/line/`,
-        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
-      });
-    }
-
-    if (nextProps.Edit.editTemplateError && !_.isEqual(nextProps.Edit.editTemplateError, this.props.Edit.editTemplateError)) {
-      const message = getMessageObject('error', (nextProps.Edit.editTemplateErrorMessage && nextProps.Edit.editTemplateErrorMessage !== '') ? nextProps.Edit.editTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
-      this.props.globalActions.addMessageToQueue(message);
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.actions.clearData();
-    window.removeEventListener("message", this.handleFrameTasks);
-  }
-
-  onTemplateChange = (isEvent, formData) => {
-    _.forEach(this.props.Edit.lineTemplates, (template) => {
-      if (template._id === formData['line-template']) {
-        this.setState({editData: {}, formData: {}}, () => {
-          this.props.actions.setSelectedTemplate(template);
-        });
-      }
-    });
-  };
-
-  onFormDataChange = (formData, tabCount, currentTab) => {
-    
-    const newFormData = _.cloneDeep(formData);
-    if (newFormData[this.state.currentTab - 1] && newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`]) {
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-label`] = newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].name;
-      newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action`] = newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].ctaTemplateDetails[0].buttonText;
-      delete newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`];
-      if (newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].ctaTemplateDetails[1]) {
-        newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-action2`] = newFormData[this.state.currentTab - 1][`secondary-cta-${this.state.currentTab - 1}-table`].ctaTemplateDetails[1].buttonText;
-      }
-    }
-    if (newFormData["line-accounts"] !== this.state.formData["line-accounts"]) {
-      this.setMobilePushAccountOptions(this.props.Edit.weCrmAccounts, newFormData["line-accounts"]);
-      delete newFormData['line-template'];
-      delete newFormData['template-name'];
-      if (!_.isEmpty(newFormData[0])) {
-        delete newFormData[0];
-      }
-      if (!_.isEmpty(newFormData[1])) {
-        delete newFormData[1];
-      }
-    }
-    if (this.state.isSchemaChanged) {
-      this.setState({isSchemaChanged: false});
-    }
-    this.setState({formData: newFormData, tabCount});
-    if (currentTab) {
-      this.setState({currentTab});
-    }
-  };
-
-  onTabChange = (data) => {
-    
-    this.setState({currentTab: data});
-  };
-
-  onTagSelect = (data, currentTab, srcComp) => {
-    
-    const editorId = srcComp.target;
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
-    document.getElementById(editorId).focus();
-  };
-  onModalCancel = () => {
-    if (this.state.modalContent && this.state.modalContent.show) {
-      this.setState({modalContent: {...this.state.modalContent, show: false}});
-    }
-  };
-  setTemplateOptions = (lineTemplates) => {
-    const templateOptions = [];
-    let selectedTemplate = {};
-    if (!_.isEmpty(lineTemplates)) {
-      _.forEach(lineTemplates, (template) => {
-        templateOptions.push({
-          key: template._id,
-          label: template.name,
-          value: template._id,
-        });
-        if (this.state.formData['line-template'] && template._id === this.state.formData['line-template']) {
-          selectedTemplate = template;
-        }
-      });
-    }
-    this.setState({templateOptions}, () => {
-      if (!_.isEmpty(selectedTemplate)) {
-        this.props.actions.setSelectedTemplate(selectedTemplate);
-      }
-      if (!_.isEmpty(this.state.schema)) {
-        this.injectEvents(this.state.schema);
-      }
-    });
-  };
-  setMobilePushAccountOptions = (accounts, newAccountId) => {
-    let accId = newAccountId || this.props.location.query.account_id;
-    if (this.props.location.query.module !== "loyalty") {
-      accId = Number(accId);
-    }
-    const formData = _.cloneDeep(this.state.formData);
-    let selectedAccount = {};
-    if (accId) {
-      _.forEach(accounts, (account) => {
-        let acccountId = account.id;
-        if (this.props.location.query.module === "loyalty" && typeof accId === 'string') {
-          acccountId = account.sourceAccountIdentifier;
-        }
-        if (acccountId === accId) {
-          this.props.templatesActions.setWeChatAccount(account);
-          selectedAccount = account;
-          formData['line-accounts'] = account.id;
-          if (this.props.location.query.account_id) {
-            formData['line-template'] = this.props.params.id;
-          }
-        }
-      });
-    } else {
-      selectedAccount = accounts[0];
-      formData['line-accounts'] = accounts[0].id;
-    }
-    this.props.actions.setWeChatAccount(selectedAccount);
-    this.setState({formData, accountsOptions: accounts.map((acc) => ({key: acc.id, label: acc.name, value: acc.id}))});
-  };
-
-  getTransformedData = (formData) => {
-    const selectedWeChatAccount = (!_.isEmpty(this.props.Templates.selectedWeChatAccount) ? this.props.Templates.selectedWeChatAccount : this.props.Edit.selectedWeChatAccount);
-    const obj = _.cloneDeep(this.state.editData);
-    obj.versions = {
-      base: {},
-    };
-    obj.name = formData['template-name'];
-    obj.definition = {
-      accountId: selectedWeChatAccount.id,
-      licenseCode: selectedWeChatAccount.sourceAccountIdentifier,
-      mode: this.props.Edit.templateDetails.mode,
-    };
-    const android = {};
-    Object.keys(formData[0]).forEach((data) => {
-      if (!!formData[0][data] && data !== "tabKey") {
-        android[data] = formData[0][data];
-      }
-    });
-    const ios = {};
-    Object.keys(formData[1]).forEach((data) => {
-      if (!!formData[1][data] && data !== "tabKey") {
-        ios[data] = formData[1][data];
-      }
-    });
-    obj.versions.base = {};
-    delete android.base;
-    if (!_.isEmpty(android)) {
-      obj.versions.base.ANDROID = {
-        luid: "{{luid}}",
-        cuid: "{{cuid}}",
-        communicationId: "{{communicationId}}",
-        title: android['message-title'],
-        message: android['message-editor'],
-        expandableDetails: {
-          style: "BIG_TEXT",
-          message: android['message-editor'],
-        },
-        custom: _.map(android, (field, key) => {
-          if (key.indexOf('custom-value') > -1) {
-            return field !== "" ? {key: key.replace('custom-value-', "").replace('-cta-deeplink-select', '').replace('-cta-deeplink-secondary-cta-0-select', '').replace('-cta-deeplink-secondary-cta-1-select', ''), value: field} : undefined;
-          }
-          return undefined;
-        }).filter((custom) => custom),
-      };
-    }
-    if (android['cta-deeplink'] && android['cta-deeplink'] !== "") {
-      obj.versions.base.ANDROID.cta = {
-        type: android['cta-deeplink'] && android['cta-deeplink'].toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL",
-        actionLink: android['cta-deeplink'] && android['cta-deeplink'].toLowerCase() === "deeplink" ? android['cta-deeplink-select'] : android['cta-deeplink-text'],
-        deepLinkName: android['cta-deeplink'] && android['cta-deeplink'].toLowerCase() === "deeplink" ? this.getLinkName(android['cta-deeplink-select']) : undefined,
-      };
-      if (this.props.location.query.type === 'embedded') {
-        delete obj.versions.base.ANDROID.cta.deepLinkName;
-      }
-    }
-    if (!_.isEmpty(ios)) {
-      obj.versions.base.IOS = {
-        luid: "{{luid}}",
-        cuid: "{{cuid}}",
-        communicationId: "{{communicationId}}",
-        title: ios['message-title2'],
-        message: ios['message-editor2'],
-        expandableDetails: {
-          style: "BIG_TEXT",
-          message: ios['message-title2'],
-          ctas: [
-
-          ],
-          categoryId: ios['secondary-cta-1-table'] ? ios['secondary-cta-1-table'].id : undefined,
-        },
-        custom: _.map(ios, (field, key) => {
-          if (key.indexOf('custom-value') > -1) {
-            return field !== "" ? {key: key.replace('custom-value-', "").replace('-cta-deeplink2-select', '').replace('-cta-deeplink-secondary-cta-0-select', '').replace('-cta-deeplink-secondary-cta-1-select2', ''), value: field} : undefined;
-          }
-          return undefined;
-        }).filter((custom) => custom),
-      };
-    }
-    if (ios['cta-deeplink2'] && ios['cta-deeplink2'] !== "") {
-      obj.versions.base.IOS.cta = {
-        type: ios['cta-deeplink2'] && ios['cta-deeplink2'].toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL",
-        actionLink: ios['cta-deeplink2'] && ios['cta-deeplink2'].toLowerCase() === "deeplink" ? ios['cta-deeplink2-select'] : ios['cta-deeplink2-text'],
-        deepLinkName: ios['cta-deeplink2'] && ios['cta-deeplink2'].toLowerCase() === "deeplink" ? this.getLinkName(ios['cta-deeplink2-select']) : undefined,
-      };
-      if (this.props.location.query.type === 'embedded') {
-        delete obj.versions.base.IOS.cta.deepLinkName;
-      }
-    }
-    const imageLink = android.image;
-    if (imageLink) {
-      obj.versions.base.ANDROID.expandableDetails.image = imageLink;
-      obj.versions.base.ANDROID.expandableDetails.style = "BIG_PICTURE";
-    }
-    if (obj.versions.base.ANDROID && obj.versions.base.ANDROID.cta) {
-      if (obj.versions.base.ANDROID.cta.type === "DEEP_LINK") {
-        const params = _.map(android, (field, key) => {
-          let actionLink;
-          if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-select') > -1) {
-            const param = key.replace('custom-value-', "").replace('-cta-deeplink-select', '');
-            actionLink = field !== "" ? `${param}=${field}` : undefined;
-          }
-          return actionLink;
-        }).filter((actionLink) => actionLink);
-        if (params.length) {
-          obj.versions.base.ANDROID.cta.actionLink = `${obj.versions.base.ANDROID.cta.actionLink}?${params.join('&')}`;
-        }
-      }
-    }
-    const secondaryCta1 = !!android["cta-deeplink-secondary-cta-0-select"] || !!android['secondary-cta-0-label'];
-    const secondaryCta2 = !!android['cta-deeplink-secondary-cta-1-select'] || !!android['secondary-cta-1-label'];
-    if (secondaryCta1 || secondaryCta2 ) {
-      obj.versions.base.ANDROID.expandableDetails.ctas = [];
-      if (secondaryCta1) {
-        const cta = {
-          actionText: android['secondary-cta-0-label'],
-          type: (android['cta-deeplink-secondary-cta-0'] || '').toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL",
-          actionLink: (android['cta-deeplink-secondary-cta-0'] || '').toLowerCase() === "deeplink" ? android['cta-deeplink-secondary-cta-0-select'] : android['cta-deeplink-secondary-cta-0-text'],
-          seccdeepLinkName: this.getLinkName(android['cta-deeplink-secondary-cta-0-select']),
-        };
-        if (this.props.location.query.type === 'embedded') {
-          delete cta.seccdeepLinkName;
-        }
-        obj.versions.base.ANDROID.expandableDetails.ctas.push(cta);
-        if (obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].type === "DEEP_LINK") {
-          const params = _.map(android, (field, key) => {
-            let actionLink;
-            if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-secondary-cta-0-select') > -1) {
-              const param = key.replace('custom-value-', "").replace('-cta-deeplink-secondary-cta-0-select', '');
-              actionLink = field !== "" ? `${param}=${field}` : undefined;
-            }
-            return actionLink;
-          }).filter((actionLink) => actionLink);
-          if (params.length) {
-            obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].actionLink = `${obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].actionLink}?${params.join('&')}`;
-          }
-        }
-      }
-      if (secondaryCta2) {
-        obj.versions.base.ANDROID.expandableDetails.ctas.push({
-          actionText: android['secondary-cta-1-label'],
-          type: (android['cta-deeplink-secondary-cta-1'] || '').toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL",
-          actionLink: (android['cta-deeplink-secondary-cta-1'] || '').toLowerCase() === "deeplink" ? android['cta-deeplink-secondary-cta-1-select'] : android['cta-deeplink-secondary-cta-1-text'],
-          seccdeepLinkName: this.getLinkName(android['cta-deeplink-secondary-cta-1-select']),
-        });
-        if (obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].type === "DEEP_LINK") {
-          const params = _.map(android, (field, key) => {
-            let actionLink;
-            if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-secondary-cta-1-select') > -1) {
-              const param = key.replace('custom-value-', "").replace('-cta-deeplink-secondary-cta-1-select', '');
-              actionLink = field !== "" ? `${param}=${field}` : undefined;
-            }
-            return actionLink;
-          }).filter((actionLink) => actionLink);
-          if (params.length) {
-            obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].actionLink = `${obj.versions.base.ANDROID.expandableDetails.ctas[obj.versions.base.ANDROID.expandableDetails.ctas.length - 1].actionLink}?${params.join('&')}`;
-          }
-        }
-      }
-    }
-    const imageLinkIos = ios.image;
-    if (imageLinkIos) {
-      obj.versions.base.IOS.expandableDetails.image = imageLinkIos;
-      obj.versions.base.IOS.expandableDetails.style = "BIG_PICTURE";
-    }
-    if (obj.versions.base.IOS && obj.versions.base.IOS.cta) {
-      if (obj.versions.base.IOS.cta.type === "DEEP_LINK") {
-        const params = _.map(ios, (field, key) => {
-          let actionLink;
-          if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink2-select') > -1) {
-            const param = key.replace('custom-value-', "").replace('-cta-deeplink2-select', '');
-            actionLink = field !== "" ? `${param}=${field}` : undefined;
-          }
-          return actionLink;
-        }).filter((actionLink) => actionLink);
-        if (params.length) {
-          obj.versions.base.IOS.cta.actionLink = `${obj.versions.base.IOS.cta.actionLink}?${params.join('&')}`;
-        }
-      }
-    }
-    const secondaryCtaIos = !!ios['cta-deeplink-secondary-cta-1-select'] || !!ios['secondary-cta-1-label'];
-
-    if (secondaryCtaIos) {
-      obj.versions.base.IOS.expandableDetails.ctas = [];
-      const cta = {
-        actionText: ios['secondary-cta-1-label'],
-        actionLabel: ios['secondary-cta-1-action'],
-        actionLabel2: ios['secondary-cta-1-action2'],
-        type: (ios['cta-deeplink-secondary-cta-1'] || '').toLowerCase() === "deeplink" ? "DEEP_LINK" : "EXTERNAL_URL",
-        actionLink: (ios['cta-deeplink-secondary-cta-1'] || '').toLowerCase() === "deeplink" ? ios['cta-deeplink-secondary-cta-1-select2'] : ios['cta-deeplink-secondary-cta-1-text2'],
-        ioscdeepLinkName: this.getLinkName(ios['cta-deeplink-secondary-cta-1-select']),
-        templateCtaId: ios['secondary-cta-1-table'] ? ios['secondary-cta-1-table'].ctaTemplateDetails[0].id : undefined,
-      };
-      if (this.props.location.query.type === 'embedded') {
-        delete cta.ioscdeepLinkName;
-      }
-      obj.versions.base.IOS.expandableDetails.ctas.push(cta);
-      if (obj.versions.base.IOS.expandableDetails.ctas[obj.versions.base.IOS.expandableDetails.ctas.length - 1].type === "DEEP_LINK") {
-        const params = _.map(ios, (field, key) => {
-          let actionLink;
-          if (key.indexOf('custom-value') > -1 && key.indexOf('cta-deeplink-secondary-cta-1-select') > -1) {
-            const param = key.replace('custom-value-', "").replace('-cta-deeplink-secondary-cta-1-select2', '');
-            actionLink = field !== "" ? `${param}=${field}` : undefined;
-          }
-          return actionLink;
-        }).filter((actionLink) => actionLink);
-        if (params.length) {
-          obj.versions.base.IOS.expandableDetails.ctas[obj.versions.base.IOS.expandableDetails.ctas.length - 1].actionLink = `${obj.versions.base.IOS.expandableDetails.ctas[obj.versions.base.IOS.expandableDetails.ctas.length - 1].actionLink}?${params.join('&')}`;
-        }
-      }
-    }
-    return obj;
-  };
-
-  setFormValidity = (isFormValid) => {
-    this.setState({isFormValid});
-  };
-
-  getMappedEvent = (id, event) => {
-    const map = this.state.eventsMap;
-    if (!map[id] || !map[id][event]) {
-      
-    }
-    return map[id][event];
-  };
-
-  getCurrentWindow = (e) => {
-    
-    const response = {
-      action: e.action,
-      value: 'edit',
-      direction: e.value,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  };
-
-  getFormData = (e) => {
-    
-    const response = {
-      action: "getFormData",
-      value: this.getTransformedData(this.state.formData),
-      validity: this.state.isFormValid,
-    };
-    
-    this.setState({checkValidation: true});
-    if (e) {
-      e.source.postMessage(JSON.stringify(response), e.origin);
-    }
-    return response;
-  };
-
-
-  setEditState(data, schema) {
-    
-    const tabCount = Object.keys(data.versions.base).length;
-    const formData = {};
-    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === "loyalty") {
-      formData["line-accounts"] = this.state.formData["line-accounts"];
-      formData['line-template'] = this.state.formData['line-template'];
-    }
-    formData['template-name'] = data.name;
-    const androidData = data.versions.base.ANDROID;
-    const iosData = data.versions.base.IOS;
-    const android = {};
-    android[`message-title`] = androidData ? androidData.title : '';
-    android['message-editor'] = androidData ? androidData.message : '';
-    if (data.mode === "image") {
-      android.image = "";
-    }
-    formData[0] = android;
-    const ios = {};
-    ios[`message-title2`] = iosData ? iosData.title : '';
-    ios['message-editor2'] = iosData ? iosData.message : '';
-    if (data.mode === "image") {
-      ios.image = "";
-    }
-    if (iosData) {
-      if (iosData.cta) {
-        ios['cta-deeplink2'] = iosData.cta.type === "DEEP_LINK" ? "Deeplink" : "External Link";
-        if (iosData.cta.type === "DEEP_LINK") {
-          ios['cta-deeplink2-select'] = iosData ? iosData.cta.actionLink : '';
-        } else {
-          ios['cta-deeplink2-text'] = iosData ? iosData.cta.actionLink : '';
-        }
-        if (iosData.cta.type === "DEEP_LINK") {
-          const link = ios['cta-deeplink2-select'].split('?')[0];
-          let params = ios['cta-deeplink2-select'].split('?');
-          if (params[1]) {
-            params = params[1].split('&');
-            _.forEach(params, (param) => {
-              ios[`custom-value-${param.split('=')[0]}-cta-deeplink2-select`] = param.split('=')[1];
-            });
-          }
-          ios['cta-deeplink2-select'] = link;
-        }
-      }
-      if (iosData.expandableDetails && iosData.expandableDetails.image) {
-        ios.image = iosData.expandableDetails.image;
-      }
-      if (iosData.expandableDetails && iosData.expandableDetails.ctas && iosData.expandableDetails.ctas.length) {
-        if (iosData.expandableDetails.ctas[0].type) {
-          ios['cta-deeplink-secondary-cta-1'] = iosData.expandableDetails.ctas[0].type === "DEEP_LINK" ? "Deeplink" : "External Link";
-        }
-        if (iosData.expandableDetails.ctas[0].type === "DEEP_LINK") {
-          ios['cta-deeplink-secondary-cta-1-select2'] = iosData.expandableDetails.ctas[0].actionLink;
-        } else {
-          ios['cta-deeplink-secondary-cta-1-text2'] = iosData.expandableDetails.ctas[0].actionLink;
-        }
-        ios['secondary-cta-1-label'] = iosData.expandableDetails.ctas[0].actionText;
-        if (iosData.expandableDetails.ctas[0].type === "DEEP_LINK" && ios['cta-deeplink-secondary-cta-1-select2']) {
-          const link = ios['cta-deeplink-secondary-cta-1-select2'].split('?')[0];
-          const paramsIos = ios['cta-deeplink-secondary-cta-1-select2'].split('?')[1] && ios['cta-deeplink-secondary-cta-1-select2'].split('?')[1].split('&');
-          ios['cta-deeplink-secondary-cta-1-select2'] = link;
-          _.forEach(paramsIos, (param) => {
-            ios[`custom-value-${param.split('=')[0]}-cta-deeplink-secondary-cta-1-select2`] = param.split('=')[1];
-          });
-        }
-        ios['secondary-cta-1-action'] = iosData.expandableDetails.ctas[0].actionLabel;
-        if (iosData.expandableDetails.ctas[0].actionLabel2) {
-          ios['secondary-cta-1-action2'] = iosData.expandableDetails.ctas[0].actionLabel2;
-        }
-      }
-    }
-    formData[1] = ios;
-    formData.base = formData[0];
-    formData[0].base = true;
-    
-    this.getSchemaForFormData(formData, schema);
-    this.setState({tabCount, formData, editData: data, currentTab: 1});
-  }
-
-  getSchemaForFormData = (formData, inputSchema) => {
-    const schema = inputSchema;
-    this.setState({schema, isSchemaChanged: true});
-    this.injectEvents(schema);
-  };
-
-  setModalContent = (type) => {
-    if (type === 'ios') {
-      const modalContent = {
-        title: this.props.intl.formatMessage(messages.alertMessage),
-        body: this.props.intl.formatMessage(messages.androidNotConfigured),
-        type: 'confirm',
-        id: 'ios',
-      };
-      this.setState({modalContent, showModal: true});
-    } else if (type === 'android') {
-      const modalContent = {
-        title: this.props.intl.formatMessage(messages.alertMessage),
-        body: this.props.intl.formatMessage(messages.iosNotConfigured),
-        type: 'confirm',
-        id: 'android',
-      };
-      this.setState({modalContent, showModal: true});
-    }
-  };
-
-  openNotificationWithIcon = (type, message) => {
-    const dur = (type === 'error' || type === 'warning') ? null : 5;
-    notification[type]({
-      message: (`${type.toUpperCase()} ! ! ! `),
-      description: message, //'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
-      duration: dur,
-    });
-  };
-
-  handleCancelModal = () => {
-    this.setState({showModal: false});
-  };
-
-  insertAtCursor = (field, myValue, currentTab) => {
-    //IE support
-    const myField = field;
-    if (document.selection) {
-      myField.focus();
-      const sel = document.selection.createRange();
-      sel.text = myValue;
-    } else if (myField.selectionStart || myField.selectionStart === '0') { //MOZILLA and others
-      const startPos = myField.selectionStart;
-      const endPos = myField.selectionEnd;
-      myField.value = myField.value.substring(0, startPos)
-        + myValue
-        + myField.value.substring(endPos, myField.value.length);
-      myField.selectionStart = startPos + myValue.length;
-      myField.selectionEnd = startPos + myValue.length;
-    } else {
-      myField.value += myValue;
-    }
-    const formData = _.cloneDeep(this.state.formData);
-    formData[currentTab - 1][field.id] = myField.value;
-    this.setState({formData});
-  };
-
-  selectCtaIos = (selectedConfig) => {
-    this.showSelectedIosCta(null, null, null, selectedConfig);
-  };
-
-  uploadImage = (data) => {
-    if (data.fileParams.error) {
-      const message = getMessageObject('error', this.props.intl.formatMessage(messages['File size cannot be more than 5mb']), true);
-      this.props.globalActions.addMessageToQueue(message);
-    } else {
-      const name = data.file.name.split('.');
-      // const blob = data.file.slice(0, -1, 'image');
-      const newFile = new File([data.file], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
-      this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
-    }
-  };
-
-  startTemplateCreation = (data) => {
-    
-    if (!data.edit) {
-      this.setState({injectedTags: data.tags});
-      this.props.globalActions.setInjectedTags(data.tags);
-    }
-  };
-
-  discardValues = () => {
-    
-    this.resetSchema();
-    this.setState({
-      formData: {},
-      tabCount: 1,
-      currentTab: 1,
-      editData: {},
-    }, () => {
-      const schema = this.props.Edit.templateDetails.mode === "image" ? this.state.fullSchema.imageSchema : this.state.fullSchema.textSchema;
-      this.setEditState(this.props.Edit.templateDetails, schema);
-    });
-  };
-
-  resetSchema = () => {
-    this.setState({ schema: this.state.initialState ? this.state.initialState : this.state.schema});
-  };
-
-  showNext = () => {
-    const response = {
-      action: "showNext",
-      value: true,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  };
-
-  moveToTemplates = () => {
-    
-    const modalContent = {
-      title: this.props.intl.formatMessage(messages.alertMessage),
-      body: this.props.intl.formatMessage(messages.goBackConfirmation),
-      type: 'confirm',
-      id: 'template-back-confirm-modal',
-      show: true,
-    };
-    this.setState({modalContent, showModal: true});
-  };
-
-  injectSections = (sections) => {
-    _.forEach(sections, (section) => {
-      let temp = section;
-      if (temp.type === 'col-label') {
-        temp = this.injectColLabelSection(temp);
-      } else if (section.type === 'multicols') {
-        temp = this.injectMultiColSection(temp);
-      } else if (section.type === 'parent') {
-        temp = this.injectSections(temp.childSections);
-      }
-    });
-    return sections;
-  };
-  injectMultiColSection = (section) => {
-    _.forEach(section.inputFields, (inputField) => {
-      _.forEach(inputField.cols, (col) => {
-        const temp = col;
-        if (temp.type === 'popover') {
-          temp.content.sections = this.injectSections(temp.content.sections);
-          temp.value.sections = this.injectSections(temp.value.sections);
-          return true;
-        }
-        temp.injectedEvents = {};
-        temp.className = temp.className ? temp.className : '';
-        if (this.props.location.query.type === 'embedded' && (temp.type === "div" || temp.type === "icon" || temp.type === "tag-list") && (temp.supportedEvents)) {
-          temp.className = `${temp.className} hide`;
-        }
-        if (this.props.location.query.type === 'embedded' && (temp.type === "input" || temp.type === "textarea" || temp.type === "radioGroup")) {
-          temp.className = `${temp.className} disabled`;
-          temp.disabled = true;
-        }
-        if (this.props.location.query.type === 'embedded' && temp.id === "line-template" ) {
-          temp.options = this.state.templateOptions ? this.state.templateOptions : [];
-        }
-        if (this.props.location.query.type === 'embedded' && temp.id === "line-accounts" ) {
-          temp.options = this.state.templateOptions ? this.state.accountsOptions : [];
-        }
-        if (temp.id === "mobile-push-preview" && this.props.Templates.selectedWeChatAccount && !_.isEmpty(this.props.Templates.selectedWeChatAccount)) {
-          temp.content.appName = this.props.Templates.selectedWeChatAccount.name;
-        }
-        _.forEach(col.supportedEvents, (event) => {
-          console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
-          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
-        });
-        return true;
-      });
-    });
-    _.forEach(section.actionFields, (actionField) => {
-      _.forEach(actionField.cols, (col) => {
-        const temp = col;
-        temp.disabled = this.props.location.query.type === 'embedded';
-        if (temp.type === 'popover') {
-          temp.content.sections = this.injectSections(temp.content.sections);
-          temp.value.sections = this.injectSections(temp.value.sections);
-          return true;
-        }
-        temp.injectedEvents = {};
-        _.forEach(col.supportedEvents, (event) => {
-          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
-        });
-        return true;
-      });
-    });
-    return section;
-  };
-
-  saveFormData = (formData) => {
-    
-    const obj = this.getTransformedData(formData);
-    
-    this.props.actions.editTemplate(obj);
-  };
-
-  handleFrameTasks = (e) => {
-    // 
-    const type = e.data;
-    
-    if (typeof type === 'object') {
-      // 
-      const action = type.action;
-      switch (action) {
-        case "startTemplateCreation":
-          this.startTemplateCreation(type.value);
-          break;
-        case "startLoading":
-          this.startLoading(type.edit);
-          break;
-        case "getCurrentWindow":
-          this.getCurrentWindow(type);
-          break;
-        default:
-          break;
-      }
-    } else {
-      switch (type) {
-        case "getFormData":
-          this.getFormData(e);
-          break;
-        case "startTemplateCreation":
-          
-          //this.getFormData(e);
-          break;
-        case "moveToTemplates":
-          
-          this.moveToTemplates();
-          break;
-        case "validateContent":
-          
-          this.validateContent(e);
-          break;
-        default:
-          break;
-      }
-    }
-  };
-
-  cancelTemplate = () => {
-    const type = this.props.location.query.type;
-    const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-    this.props.router.push({
-      pathname: `/line/`,
-      search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
-    });
-  };
-
-  injectContainer = (container) => {
-    const temp = container;
-    if (temp.type === 'tabs') {
-      temp.injectedEvents = {};
-      _.forEach(temp.supportedEvents, (event) => {
-        temp.injectedEvents[event] = this.getMappedEvent(temp.id, event);
-      });
-      _.forEach(temp.panes, (pane) => {
-        const tempPane = pane;
-        tempPane.sectionsHeaders = this.injectSections(tempPane.sectionsHeaders);
-        tempPane.sections = this.injectSections(tempPane.sections);
-      });
-    }
-    return temp;
-  };
-
-  injectEvents = (schema) => {
-    const temp = schema;
-    if (this.injectSections) {
-      temp.standalone.sections = this.injectSections(temp.standalone.sections);
-    }
-    _.forEach(temp.containers, (container) => {
-      let tempContainer = container;
-      tempContainer = this.injectContainer(tempContainer);
-      return tempContainer;
-    });
-    
-    this.setState({schema}, () => {
-      this.removeStandAlone();
-    });
-    return schema;
-  };
-
-  removeStandAlone = () => {
-    const schema = _.cloneDeep(this.state.schema);
-    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
-      if (schema.standalone.sections.length === 2) {
-        schema.standalone.sections.splice(0, 1);
-      }
-    } else if (this.props.location.query.type === 'embedded' && typeof this.props.location.query.module !== 'undefined') {
-      delete schema.standalone;
-    } else {
-      schema.standalone.sections.splice(1, 1);
-    }
-    this.setState({ schema });
-  };
-
-  handleOnTagsContextChange = (data) => {
-    
-    const query = {
-      layout: 'line',
-      type: 'TAG',
-      context: (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
-      embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
-    };
-    this.props.globalActions.fetchSchemaForEntity(query);
-  };
-
-  render() {
-    const schema = this.state.schema;
-    let tipText = this.props.Edit && ("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) ? this.props.intl.formatMessage(messages.gettingTemplate) : '';
-    tipText = this.props.Edit && ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress) ? this.props.intl.formatMessage(messages.savingTemplate) : '';
-    const spinning = this.props.Edit.fetchingDefaultTemplates || this.props.Edit.assetUploading || this.state.loading || (this.props.Edit && (("getTemplateDetailsInProgress" in this.props.Edit && this.props.Edit.getTemplateDetailsInProgress) || ("editTemplateInProgress" in this.props.Edit && this.props.Edit.editTemplateInProgress)));
-    let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
-    if (this.props.supportedTags) {
-      tags = this.props.supportedTags;
-    }
-    return (
-      <div>
-        <Spin tip={tipText} spinning={spinning}>
-          {<Row style={{marginBottom: '16px', marginLeft: '-40px'}}>
-            <Col offset={1}>
-              {this.props.location.query.type !== "embedded" &&
-                <Breadcrumb>
-                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.Campaigns)}</BreadcrumbItem>
-                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.Creatives)}</BreadcrumbItem>
-                  <BreadcrumbItem>{this.props.intl.formatMessage(messages.Line)}</BreadcrumbItem>
-                </Breadcrumb>
-              }
-            </Col>
-          </Row>}
-          <Row>
-            <Col>
-              <FormBuilder
-                schema={schema}
-                onSubmit={this.saveFormData}
-                onChange={this.onFormDataChange}
-                formData={_.cloneDeep(this.state.formData)}
-                currentTab={this.state.currentTab}
-                parent={this}
-                location={this.props.location}
-                isEdit
-                tabCount={2}
-                iosCtasData={this.state.iosCtasData}
-                tags={tags}
-                injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
-                onFormValidityChange={this.setFormValidity}
-                usingTabContainer
-                checkValidation={this.state.checkValidation}
-                onContextChange={this.handleOnTagsContextChange}
-                showModal={this.state.showModal}
-                iframeParent={parent}
-                router={this.props.router}
-                isSchemaChanged={this.state.isSchemaChanged}
-                handleCancelModal={this.handleCancelModal}
-                modal={this.state.modalContent}
-                setModalContent={this.setModalContent}
-              />
-            </Col>
-          </Row>
-        </Spin>
-      </div>
-    );
-  }
-}
-
-Edit.propTypes = {
-  actions: PropTypes.object.isRequired,
-  Edit: PropTypes.object,
-  params: PropTypes.object,
-  router: PropTypes.object,
-  location: PropTypes.object,
-  globalActions: PropTypes.object,
-  templatesActions: PropTypes.object,
-  Templates: PropTypes.object,
-  metaEntities: PropTypes.object,
-  templateDetails: PropTypes.object,
-  intl: intlShape.isRequired,
-  templateData: PropTypes.object,
-  getDefaultTags: PropTypes.string,
-  supportedTags: PropTypes.array,
-  injectedTags: PropTypes.object,
-};
-
-const mapStateToProps = createStructuredSelector({
-  Edit: makeSelectEdit(),
-  editResponse: makeSelectEditResponse(),
-  templateDetails: makeSelectTemplateDetailsResponse(),
-  metaEntities: makeSelectMetaEntities(),
-  Templates: makeSelectTemplates(),
-  injectedTags: setInjectedTags(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
-    templatesActions: bindActionCreators(templatesActions, dispatch),
-  };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Edit));