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

package/containers/Line/Create/index.js

@@ -1,836 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import {connect} from 'react-redux';
-import { bindActionCreators, compose } from 'redux';
-import { injectIntl, intlShape } from 'react-intl';
-import { createStructuredSelector } from 'reselect';
-import { Row, Col, Spin, Breadcrumb } from 'antd';
-import _ from 'lodash';
-import messages from './messages';
-import * as actions from './actions';
-import FormBuilder from '../../../components/FormBuilder';
-import { UserIsAuthenticated } from '../../../utils/authWrapper';
-import * as globalActions from '../../../containers/Cap/actions';
-//import { makeSelectCreate, makeSelectCreateResponse, makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';
-import {makeSelectCreateLine} from './selectors';
-import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
-import {getMessageObject} from '../../../utils/messageUtils';
-import { makeSelectTemplates } from '../../Templates/selectors';
-import './_lineCreate.scss';
-import injectSaga from '../../../utils/injectSaga';
-import injectReducer from '../../../utils/injectReducer';
-import reducer from './reducer';
-import { lineCreateSaga } from './sagas';
-import { createQueryString } from '../../../utils/common';
-
-const BreadcrumbItem = Breadcrumb.Item;
-
-export class Line extends Component {
-
-  constructor(props) {
-    super(props);
-    const map = {
-      "save-button": {
-        saveFormData: this.saveFormData,
-      },
-      "template-name": {
-        onChange: this.onTemplateNameChange,
-      },
-      "discard-button": {
-        discardValues: this.discardValues,
-      },
-      "cancel-button": {
-        cancelTemplate: this.cancelTemplate,
-      },
-      "message-editor": {
-        onChange: this.onTemplateContentChange,
-      },
-      "message-editor2": {
-        onChange: this.onTemplateContentChange,
-      },
-      "message-tagList": {
-        onTagSelect: this.onTagSelect,
-      },
-      "title-tagList": {
-        onTagSelect: this.onTagSelectTitle,
-      },
-      "pane": {
-        onTabChange: this.onTabChange,
-      },
-      "line-template": {
-        onSelect: this.onTemplateChange,
-      },
-      "image-upload-line": {
-        onUpload: this.uploadImage,
-      },
-    };
-    this.state = {
-      schema: {},
-      isSchemaChanged: false,
-      formData: {0: {}},
-      tabCount: 1,
-      currentTab: 1,
-      loading: false,
-      isFormValid: true,
-      tabKey: '',
-      checkValidation: false,
-      eventsMap: map,
-      errorData: {},
-      displayProps: {},
-      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.templateNotConfigured), type: 'confirm'},
-      injectedTags: {},
-      isEdit: false,
-      isEdited: false,
-      editTemplateData: {},
-      isReady: false,
-      modeType: null,
-    };
-  }
-
-  componentWillMount() {
-    if (this.props.params.id) {
-      const editTemplateId = this.props.params.id;
-      this.props.actions.getTemplateDetails(editTemplateId, 'LINE');
-      this.setState({isEdit: true});
-    }
-  }
-
-  componentDidMount() {
-    const getSchemaQuery = {
-      layout: 'LINE',
-      type: 'LAYOUT',
-    };
-    this.props.globalActions.fetchSchemaForEntity(getSchemaQuery);
-    const type = this.props.location.query.type;
-    const name = this.props.route.name;
-    window.addEventListener("message", this.handleFrameTasks);
-    if (type === 'embedded') {
-      const response = {
-        action: 'startTemplateCreation',
-        window: name === 'view' ? 'view' : '',
-      };
-      parent.postMessage(JSON.stringify(response), '*');
-    }
-  }
-
-  componentWillReceiveProps(nextProps) {
-    
-
-    //// Create template logic ////
-
-    let modeType;
-    const {layouts, tags} = nextProps.metaEntities;
-    const isSchemaReady = (layouts !== undefined && layouts.length > 0);
-    const editModeType = nextProps.route.name;
-    if (nextProps.params.mode === 'text' || nextProps.route.name === 'edit_text') {
-      modeType = 'text';
-    } else {
-      modeType = 'image';
-    }
-    if (modeType) {
-      this.setState({modeType, schema: {}});
-      //
-    }
-    if (nextProps.isGetFormData) {
-      nextProps.getFormLibraryData(this.getFormData());
-    }
-    if (isSchemaReady) {
-      // set schema value as per mode type. Supported mode (text & image)
-      
-      const {textSchema, imageSchema} = layouts[0].definition;
-      const schema = (modeType === "text" || editModeType === 'edit_text') ? textSchema : imageSchema;
-      this.setState({schema}, () => {
-        // Once schema is ready and set, then inject the available events from the schema
-        if (!_.isEmpty(this.state.schema)) {
-          this.injectEvents(this.state.schema);
-        }
-        // Once schema is ready, then only get the tags.
-        const getTagsQuery = {
-          layout: 'LINE',
-          type: 'TAG',
-          context: 'outbound',
-          embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
-        };
-        if (this.props.getDefaultTags) {
-          getTagsQuery.context = this.props.getDefaultTags;
-        }
-        if (tags === undefined && modeType !== 'image') {
-          this.props.globalActions.fetchSchemaForEntity(getTagsQuery);
-        } else {
-          this.setState({isReady: true});
-        }
-        if (this.props.location.query.type === 'embedded') {
-          this.showNext();
-        }
-      });
-    }
-
-    if ( nextProps.Line && (nextProps.Line.response && nextProps.Line.response.templateId) ) {
-      
-      this.discardValues();
-      const message = getMessageObject('success', this.props.intl.formatMessage(messages["Line Template Created Successfully"]), true);
-      this.props.globalActions.addMessageToQueue(message);
-      this.props.actions.clearCreateResponse();
-      const type = this.props.location.query.type;
-      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
-      this.props.router.push({
-        pathname: `/line/`,
-        search :  createQueryString(type === 'embedded' ? {type: 'embedded', module} : {module})
-      });
-    }
-
-    if (nextProps.Line.createTemplateError && !_.isEqual(nextProps.Line.createTemplateError, this.props.Line.createTemplateError)) {
-      const message = getMessageObject('error', (nextProps.Line.createTemplateErrorMessage && nextProps.Line.createTemplateErrorMessage !== '') ? nextProps.Line.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
-      this.props.globalActions.addMessageToQueue(message);
-    }
-
-    //// Edit Template Logic ////
-
-    const isEdit = this.state.isEdit && this.props.params.id && (this.props.route.name === 'edit_text' || this.props.route.name === 'edit_image') && this.props.Line.templateDetails && this.props.Line.templateDetails.versions;
-    if (isEdit) {
-      const formData = this.getEditTransformedData(this.props.Line.templateDetails);
-      this.setState({formData, editTemplateData: this.props.Line.templateDetails});
-      this.props.actions.clearData();
-    }
-
-    const isEditSucceed = (this.state.isEdit && nextProps.Line && nextProps.Line.editResponse && nextProps.Line.editResponse.templateId);
-    if (isEditSucceed) {
-      this.setState({formData: {} });
-      const message = getMessageObject('success', this.props.intl.formatMessage(messages['Line 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.Line.editTemplateError && !_.isEqual(nextProps.Line.editTemplateError, this.props.Line.editTemplateError)) {
-      const message = getMessageObject('error', (nextProps.Line.editTemplateErrorMessage && nextProps.Line.editTemplateErrorMessage !== '') ? nextProps.Line.editTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
-      this.props.globalActions.addMessageToQueue(message);
-    }
-
-    if (nextProps.Line.uploadAssetSuccess && nextProps.Line.uploadedAssetData) {
-      const formData = _.cloneDeep(this.state.formData);
-      // TODO: if multiple image upload supports, change below accordingly.
-      formData[this.state.currentTab - 1].image = nextProps.Line.uploadedAssetData.metaInfo.secure_file_path;
-      formData[this.state.currentTab - 1].imagePreview = nextProps.Line.uploadedAssetData.metaInfo.secure_file_path_preview;
-      
-      this.setState({formData});
-      
-      this.props.actions.clearAsset();
-    }
-  }
-
-  componentWillUnmount() {
-    
-    window.removeEventListener("message", this.handleFrameTasks);
-  }
-
-  onTagSelect(data, currentTab) {
-    
-    const editorId = 'message-editor';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
-    document.getElementById(editorId).focus();
-  }
-
-  onTagSelectTitle(data, currentTab) {
-    
-    const editorId = 'message-title';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
-    document.getElementById(editorId).focus();
-  }
-
-  onFormDataChange = (formData, tabCount, currentTab) => {
-    
-    this.setState({formData, tabCount});
-    if (currentTab) {
-      this.setState({currentTab});
-    }
-  };
-
-  getTransformedData = (formData) => {
-    
-    const modeType = this.state.modeType;
-    const obj = {};
-    const msgData = {};
-    obj.versions = {
-      base: {
-        content: {
-          to: "{{line_id}}",
-          messages: [],
-        },
-      },
-    };
-    obj.type = 'LINE';
-    obj.name = formData['template-name'];
-    obj.definition = {
-      mode: modeType,
-    };
-    if ( modeType && modeType !== undefined) {
-      msgData.type = modeType;
-    }
-    if (modeType === 'text') {
-      if (this.state.isEdit) {
-        const editTemplateId = this.state.editTemplateData._id;
-        if (editTemplateId && editTemplateId !== undefined) {
-          obj._id = this.state.editTemplateData._id;
-          msgData.text = formData['0']['message-editor'];
-        }
-      } else {
-        msgData.text = formData.base['message-editor'];
-      }
-    } else if (modeType === 'image') {
-      if (formData['0'].image.length < 1) {
-        return 'IMAGE_ERROR';
-      }
-      if (this.state.isEdit) {
-        const editTemplateId = this.state.editTemplateData._id;
-        if (editTemplateId && editTemplateId !== undefined) {
-          obj._id = editTemplateId;
-          msgData.originalContentUrl = formData['0'].image;
-          msgData.previewImageUrl = formData['0'].imagePreview;
-        }
-      } else {
-        // const img = new Image();
-        // img.src = formData['0'].image;
-        // img.onload = () => {
-        //   
-        // };
-        // // Preview Image set to 240px max
-        // const prevImgSet = new Image(240, 240);
-        // prevImgSet.src = formData['0'].image;
-
-        msgData.originalContentUrl = formData['0'].image;
-        msgData.previewImageUrl = formData['0'].imagePreview;
-      }
-    }
-    obj.versions.base.content.messages.push(msgData);
-    return obj;
-  };
-
-  getEditTransformedData = ({name, versions}) => {
-    const modeType = this.state.modeType;
-    const obj = {};
-    obj['0'] = {};
-    obj.base = {
-      base: true,
-    };
-    obj['template-name'] = name;
-    if (modeType === 'text') {
-      obj.base['message-editor'] = versions.base.content.messages[0].text;
-      obj['0']['message-editor'] = versions.base.content.messages[0].text;
-    } else if (modeType === 'image') {
-      obj.base.image = versions.base.content.messages[0].originalContentUrl;
-      obj['0'].image = versions.base.content.messages[0].originalContentUrl;
-      obj['0'].imagePreview = versions.base.content.messages[0].previewImageUrl;
-      obj.base.imagePreview = versions.base.content.messages[0].previewImageUrl;
-    }
-
-    
-    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;
-  };
-
-  injectEvents = (schema) => {
-    const temp = schema;
-    if (temp.standalone) {
-      temp.standalone.sections = this.injectSections(temp.standalone.sections);
-    }
-    _.forEach(temp.containers, (container) => {
-      let tempContainer = container;
-      tempContainer = this.injectContainer(tempContainer);
-      return tempContainer;
-    });
-    
-    this.setState({schema, isSchemaChanged: true}, () => {
-      this.removeStandAlone();
-    });
-    
-    return schema;
-  };
-
-  saveFormData = (formData) => {
-    
-    
-    const obj = this.getTransformedData(formData);
-    
-    if (obj === 'IMAGE_ERROR') {
-      const message = getMessageObject('error', this.props.intl.formatMessage(messages['Please upload an image to proceed']), true);
-      this.props.globalActions.addMessageToQueue(message);
-      return;
-    }
-    if (obj !== 'IMAGE_ERROR' && obj.versions.base.content.messages[0].type === 'text') {
-      const charCount = obj.versions.base.content.messages[0].text.length;
-      if (charCount > 1600) {
-        const message = getMessageObject('error', this.props.intl.formatMessage(messages['Maximum characters length exceeds']), true);
-        this.props.globalActions.addMessageToQueue(message);
-        return;
-      }
-    }
-    if (this.state.isEdit) {
-      
-      this.props.actions.editTemplate(obj);
-    } else {
-      this.props.actions.createTemplate(obj);
-    }
-  };
-
-  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})
-    });
-  };
-
-  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;
-        }
-        if (temp.id === "discard-button") {
-          temp.colStyle = {...temp.colStyle, display: 'none'};
-        }
-        if (temp.id === "cancel-button") {
-          temp.offset = 11;
-        }
-        if (temp.id === "line-push-preview") {
-          temp.content.appName = this.props.Templates.selectedWeChatAccount.name;
-        }
-        temp.injectedEvents = {};
-
-        _.forEach(col.supportedEvents, (event) => {
-          console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
-          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
-        });
-        return true;
-      });
-    });
-    _.forEach(section.actionFields, (actionField) => {
-      _.forEach(actionField.cols, (col) => {
-        const temp = col;
-        if (temp.type === 'popover') {
-          temp.content.sections = this.injectSections(temp.content.sections);
-          temp.value.sections = this.injectSections(temp.value.sections);
-          return true;
-        }
-        temp.injectedEvents = {};
-        _.forEach(col.supportedEvents, (event) => {
-          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
-        });
-        return true;
-      });
-    });
-    return section;
-  };
-
-  injectColLabelSection = (section) => {
-    _.forEach(section.inputFields, (inputField) => {
-      const temp = inputField;
-      if (temp.type === 'popover') {
-        temp.content.sections = this.injectSections(temp.content.sections);
-        temp.value.sections = this.injectSections(temp.value.sections);
-        return true;
-      }
-      temp.injectedEvents = {};
-      _.forEach(inputField.supportedEvents, (event) => {
-        temp.injectedEvents[event] = this.getMappedEvent(inputField.id, event);
-      });
-      return true;
-    });
-    _.forEach(section.actionFields, (actionField) => {
-      const temp = actionField;
-      if (temp.type === 'popover') {
-        temp.content.sections = this.injectSections(temp.content.sections);
-        temp.value.sections = this.injectSections(temp.value.sections);
-        return true;
-      }
-      temp.injectedEvents = {};
-      _.forEach(actionField.supportedEvents, (event) => {
-        temp.injectedEvents[event] = this.getMappedEvent(actionField.id, event);
-      });
-      return true;
-    });
-    return section;
-  };
-
-  injectParentSection = (section) => {
-    _.forEach(section.childSections, (childSection) => {
-      let temp = childSection;
-      if (temp.type === 'col-label') {
-        temp = this.injectColLabelSection(temp);
-      } else if (section.type === 'multicols') {
-        temp = this.injectMultiColSection(temp);
-      } else if (section.type === 'parent') {
-        temp = this.injectParentSection(temp);
-      }
-    });
-    return section;
-  };
-
-  insertAtCursor = (field, myValue, 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});
-  };
-
-  startTemplateCreation = (data) => {
-    const getSchemaQuery = {
-      layout: 'LINE',
-      type: 'LAYOUT',
-    };
-    this.props.globalActions.fetchSchemaForEntity(getSchemaQuery);
-    
-    const content = data.content;
-    const obj = {};
-    obj['0'] = {};
-    obj.base = {
-      base: true,
-    };
-    if (data.type === 'text') {
-      obj.base['message-editor'] = content;
-      obj['0']['message-editor'] = content;
-    } else {
-      obj.base.image = content;
-      obj['0'].image = content;
-    }
-    this.setState({formData: obj, loading: false, injectedTags: data.tags});
-    this.props.globalActions.setInjectedTags(data.tags);
-  };
-
-  startLoading = (ifEdit) => {
-    
-    if (ifEdit) {
-      this.setState({loading: true});
-    }
-  };
-
-  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;
-  };
-
-  resetSchema = () => {
-    this.setState({ schema: this.state.initialState ? this.state.initialState : this.state.schema});
-  };
-
-  resetState = () => {
-    this.setState({
-      formData: {},
-      tabCount: 1,
-      currentTab: 1,
-    });
-  };
-
-  discardValues = () => {
-    this.resetSchema();
-    this.resetState();
-  };
-
-  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});
-  }
-
-  showNext() {
-    const response = {
-      action: "showNext",
-      value: true,
-    };
-    parent.postMessage(JSON.stringify(response), '*');
-  }
-
-  discardValues = () => {
-    this.resetSchema();
-    this.resetState();
-  };
-
-  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;
-      }
-    }
-  };
-
-  removeStandAlone = () => {
-    const schema = _.cloneDeep(this.state.schema);
-    
-    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
-      schema.standalone.sections.splice(0, 1);
-    } else if (this.props.location.query.type === 'embedded' && typeof this.props.location.query.module !== 'undefined') {
-      delete schema.standalone;
-    } else {
-      schema.standalone.sections.splice(1, 1);
-    }
-    this.setState({ schema });
-  };
-
-  validateContent = (e) => {
-    
-    const response = {
-      action: "validateContent",
-      value: this.state.isFormValid,
-    };
-    e.source.postMessage(JSON.stringify(response), e.origin);
-  };
-
-  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);
-  };
-
-  uploadImage = (pearmData) => {
-    
-    const data = pearmData;
-    if (data.file && data.file.size > 1000000) {
-      const message = getMessageObject('error', this.props.intl.formatMessage(messages['File size cannot be more than 1mb']), true);
-      this.props.globalActions.addMessageToQueue(message);
-    } else {
-      data.fileParams.isGeneratePreview = true;
-      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/jpeg'});
-      this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
-    }
-  };
-
-  render() {
-    if (this.state.formData && this.state.formData["0"] && this.state.formData["0"].image) {
-      
-    }
-    
-    let tipText = this.props.Line.createTemplateInProgress ? this.props.intl.formatMessage(messages.savingTemplate) : "";
-    let loading = this.props.Line.createTemplateInProgress ? this.props.Line.createTemplateInProgress : false;
-    if (this.props.Line.assetUploading) {
-      tipText = this.props.intl.formatMessage(messages.uploadingImage);
-      loading = true;
-    }
-    // if (!this.state.isReady) {
-    //   tipText = "Please wait..";
-    //   loading = true;
-    // }
-    let tags = this.props.metaEntities && this.props.metaEntities.tags ? this.props.metaEntities.tags.standard : [];
-    if (this.props.supportedTags) {
-      tags = this.props.supportedTags;
-    }
-    return (
-      <Spin tip={tipText} spinning={loading}>
-        <Row style={{marginLeft: '-48px'}}>
-          <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>
-            {!_.isEmpty(this.state.schema) && <FormBuilder
-              key={"form builder"}
-              schema={this.state.schema}
-              onSubmit={this.saveFormData}
-              onChange={this.onFormDataChange}
-              currentTab={this.state.currentTab}
-              parent={this}
-              formData={_.cloneDeep(this.state.formData)}
-              location={this.props.location}
-              tags={tags}
-              injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
-              onFormValidityChange={this.setFormValidity}
-              usingTabContainer
-              checkValidation={this.state.checkValidation}
-              tabKey={this.state.tabKey}
-              tabCount={2}
-              showModal={this.state.showModal}
-              isSchemaChanged={this.state.isSchemaChanged}
-              modal={this.state.modalContent}
-              handleCancelModal={this.handleCancelModal}
-              iframeParent={parent}
-              router={this.props.router}
-              onContextChange={this.handleOnTagsContextChange}
-              setModalContent={this.setModalContent}
-            /> }
-          </Col>
-        </Row>
-      </Spin>
-    );
-  }
-}
-
-Line.propTypes = {
-  actions: PropTypes.object.isRequired,
-  globalActions: PropTypes.object,
-  Templates: PropTypes.object,
-  location: PropTypes.object,
-  router: PropTypes.object,
-  params: PropTypes.object,
-  metaEntities: PropTypes.object,
-  intl: intlShape.isRequired,
-  route: PropTypes.object,
-  Line: PropTypes.object,
-  supportedTags: PropTypes.any,
-  getDefaultTags: PropTypes.string,
-  injectedTags: PropTypes.object,
-};
-
-const mapStateToProps = createStructuredSelector({
-  Line: makeSelectCreateLine(),
-  Templates: makeSelectTemplates(),
-  metaEntities: makeSelectMetaEntities(),
-  injectedTags: setInjectedTags(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-    globalActions: bindActionCreators(globalActions, dispatch),
-  };
-}
-
-const withConnect = connect(mapStateToProps, mapDispatchToProps);
-const withReducer = injectReducer({ key: 'line', reducer });
-const withSaga = injectSaga({ key: 'line', saga: lineCreateSaga});
-
-export default compose(
-  UserIsAuthenticated,
-  withReducer,
-  withSaga,
-  withConnect,
-)(injectIntl(Line));