@capillarytech/creatives-library 2.0.70 → 2.0.71

package/v2Containers/Line/Create/index.js

@@ -0,0 +1,822 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import {connect} from 'react-redux';
+import { bindActionCreators } 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 callNativeEvent from '../../../utils/callNativeEvent';
+
+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: {},
+      tabCount: 1,
+      currentTab: 1,
+      loading: false,
+      isFormValid: true,
+      tabKey: '',
+      checkValidation: false,
+      eventsMap: map,
+      errorData: {},
+      displayProps: {},
+      modalContent: {title: "Alert", body: "template not configured,", 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) {
+    console.log("nextProps line @@@", 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: {}});
+      //console.log("ooo", this.state.schema);
+    }
+    if (nextProps.isGetFormData) {
+      nextProps.getFormLibraryData(this.getFormData());
+    }
+    if (isSchemaReady) {
+      // set schema value as per mode type. Supported mode (text & image)
+      console.log("modeType", this.state.modeType);
+      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) ) {
+      console.log('create response', nextProps.Line);
+      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/`,
+        query: 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/`,
+        query: 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;
+      console.log("before 2", formData[this.state.currentTab - 1].image);
+      this.setState({formData});
+      console.log("ooo", this.state.formData);
+      this.props.actions.clearAsset();
+    }
+  }
+
+  componentWillUnmount() {
+    console.log('removed listener templates');
+    window.removeEventListener("message", this.handleFrameTasks);
+  }
+
+  onTagSelect(data, currentTab) {
+    console.log('parent data tag', data, currentTab);
+    const editorId = 'message-editor';
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    document.getElementById(editorId).focus();
+  }
+
+  onTagSelectTitle(data, currentTab) {
+    console.log('parent data tag', data, currentTab);
+    const editorId = 'message-title';
+    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`);
+    document.getElementById(editorId).focus();
+  }
+
+  onFormDataChange = (formData, tabCount, currentTab) => {
+    console.log('Form data changed is ', formData, tabCount, currentTab);
+    this.setState({formData, tabCount});
+    if (currentTab) {
+      this.setState({currentTab});
+    }
+  };
+
+  getTransformedData = (formData) => {
+    console.log("formData before transform@@@", 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 = () => {
+        //   console.log(`Image aspect ratio details line@@@${img.width} and ${img.height}`);
+        // };
+        // // 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;
+    }
+
+    console.log("getEditTransformedData", obj);
+    return obj;
+  };
+
+  setFormValidity = (isFormValid) => {
+    this.setState({isFormValid});
+  };
+
+  getMappedEvent = (id, event) => {
+    const map = this.state.eventsMap;
+    if (!map[id] || !map[id][event]) {
+      console.log(`error map[id] ${map[id]}` );
+    }
+    return map[id][event];
+  };
+
+  getCurrentWindow(e) {
+    console.log('in Line create@@@', e);
+    const response = {
+      action: e.action,
+      value: 'edit',
+      direction: e.value,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+
+  getFormData = (e) => {
+    console.log('posting final result', this.state.formData);
+    const response = {
+      action: "getFormData",
+      value: this.getTransformedData(this.state.formData),
+      validity: this.state.isFormValid,
+    };
+    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;
+    });
+    console.log('final injected schema', schema);
+    this.setState({schema, isSchemaChanged: true}, () => {
+      this.removeStandAlone();
+    });
+    console.log('final returned schema', this.state.schema);
+    return schema;
+  };
+
+  saveFormData = (formData) => {
+    console.log("ccc", this.props);
+    console.log('Saving form data of LINE @@@', formData, this.state.tabCount);
+    const obj = this.getTransformedData(formData);
+    console.log('obj final@@@', obj);
+    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) {
+      console.log("Inside edit line template@@");
+      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/`,
+      query: 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) => {
+    //IE support
+    const myField = field;
+    if (document.selection) {
+      myField.focus();
+      const sel = document.selection.createRange();
+      sel.text = myValue;
+    } else if (myField.selectionStart || myField.selectionStart === '0') { //MOZILLA and others
+      const startPos = myField.selectionStart;
+      const endPos = myField.selectionEnd;
+      myField.value = myField.value.substring(0, startPos)
+        + myValue
+        + myField.value.substring(endPos, myField.value.length);
+      myField.selectionStart = startPos + myValue.length;
+      myField.selectionEnd = startPos + myValue.length;
+    } else {
+      myField.value += myValue;
+    }
+    const event = new Event('input', { bubbles: true });
+    callNativeEvent({field, value: myField.value, event});
+  };
+
+  startTemplateCreation = (data) => {
+    const getSchemaQuery = {
+      layout: 'LINE',
+      type: 'LAYOUT',
+    };
+    this.props.globalActions.fetchSchemaForEntity(getSchemaQuery);
+    console.log('startTemplateCreation');
+    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) => {
+    console.log('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() {
+    console.log('in move to Templates');
+    const modalContent = {
+      title: "Alert",
+      body: "Do you really want to go back? All your temporary changes will be lost!",
+      type: 'confirm',
+      id: 'template-back-confirm-modal',
+      show: true,
+    };
+    this.setState({modalContent, showModal: true});
+  }
+
+  showNext() {
+    const response = {
+      action: "showNext",
+      value: true,
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+
+  discardValues = () => {
+    this.resetSchema();
+    this.resetState();
+  };
+
+  handleFrameTasks = (e) => {
+    console.log('listened from cheetah@@@', e.data);
+    const type = e.data;
+    console.log('data type', typeof type);
+    if (typeof type === 'object') {
+      console.log('received something', type);
+      const action = type.action;
+      switch (action) {
+        case "startTemplateCreation":
+          this.startTemplateCreation(type.value);
+          break;
+        case "startLoading":
+          this.startLoading(type.edit);
+          break;
+        case "getCurrentWindow":
+          this.getCurrentWindow(type);
+          break;
+        default:
+          break;
+      }
+    } else {
+      switch (type) {
+        case "getFormData":
+          this.getFormData(e);
+          break;
+        case "startTemplateCreation":
+          console.log('Starting to create template');
+          //this.getFormData(e);
+          break;
+        case "moveToTemplates":
+          console.log('moving to templates');
+          this.moveToTemplates();
+          break;
+        case "validateContent":
+          console.log('validating Content');
+          this.validateContent(e);
+          break;
+        default:
+          break;
+      }
+    }
+  };
+
+  removeStandAlone = () => {
+    const schema = _.cloneDeep(this.state.schema);
+    console.log("schema line", 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.mode !== 'undefined') {
+      delete schema.standalone;
+    } else {
+      schema.standalone.sections.splice(1, 1);
+    }
+    this.setState({ schema });
+  };
+
+  validateContent = (e) => {
+    console.log('posting final validation result', this.state.isFormValid);
+    const response = {
+      action: "validateContent",
+      value: this.state.isFormValid,
+    };
+    e.source.postMessage(JSON.stringify(response), e.origin);
+  };
+
+  handleOnTagsContextChange = (data) => {
+    console.log('parent tags context', 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) => {
+    console.log("image data line@@@", pearmData);
+    const data = pearmData;
+    if (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([blob], `${name[0]}${Date.now()}.${name[1]}`, {type: 'image'});
+      this.props.actions.uploadAsset(newFile, data.type, data.fileParams);
+    }
+  };
+
+  render() {
+    if (this.state.formData && this.state.formData["0"] && this.state.formData["0"].image) {
+      console.log("before render@@@", this.state.formData["0"].image);
+    }
+    console.log("render state", this.state);
+    let tipText = this.props.Line.createTemplateInProgress ? "Saving Template..." : "";
+    let loading = this.props.Line.createTemplateInProgress ? this.props.Line.createTemplateInProgress : false;
+    if (this.props.Line.assetUploading) {
+      tipText = "Uploading Image...";
+      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>
+            <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),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(Line)));