@capillarytech/creatives-library 6.13.3 → 6.13.5

package/v2Containers/Line/Create/index.js

@@ -1,1112 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import get from 'lodash/get';
-import set from 'lodash/set';
-import { bindActionCreators } from 'redux';
-import { intlShape } from 'react-intl';
-import { createStructuredSelector } from 'reselect';
-import _ from 'lodash';
-import { CapSpin, CapHeading, CapRow, CapColumn, CapNotification } from '@capillarytech/cap-ui-library';
-import messages from './messages';
-import * as actions from './actions';
-import Gallery from '../../Assets/Gallery';
-import FormBuilder from '../../../v2Components/FormBuilder';
-//import { makeSelectCreate, makeSelectCreateResponse, makeSelectEdit, makeSelectEditResponse, makeSelectTemplateDetailsResponse } from './selectors';
-import {makeSelectCreateLine, makeSelectLine} from './selectors';
-import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
-import {getMessageObject} from '../../../utils/messageUtils';
-import { makeSelectTemplates } from '../../Templates/selectors';
-import './_lineCreate.scss';
-import withCreatives from '../../../hoc/withCreatives';
-import {
-  LINE_IMG_HEIGHT,
-  LINE_IMG_WIDTH,
-  LINE_IMG_SIZE,
-} from './constants';
-
-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,
-      },
-      '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,
-      },
-      'tagList': {
-        onTagSelect: this.onTagSelect,
-      },
-      'line-editor': {
-        onChange: this.onTemplateContentChange,
-      },
-    };
-
-    this.state = {
-      schema: {},
-      isSchemaChanged: false,
-      formData: {},
-      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,
-      isDrawerRequired: false,
-      startValidation: false,
-    };
-  }
-
-  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',
-      version: 'v2',
-    };
-    this.props.globalActions.fetchSchemaForEntity(getSchemaQuery);
-  }
-
-  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: {} });
-    }
-    const {
-      isGetFormData,
-      templateData,
-    } = nextProps;
-    if (isGetFormData) {
-      const {
-        lineData,
-        getFormSubscriptionData,
-      } = nextProps;
-      let selectedAccount = {};
-      if (lineData) {
-        const {
-          weCrmAccounts = [],
-        } = lineData;
-        selectedAccount = weCrmAccounts.filter((account) => account === selectedAccount);
-      }
-      getFormSubscriptionData({ ...this.getFormData(), accountDetails: selectedAccount, type: 'LINE' });
-    }
-    if (templateData && templateData.edit) {
-      this.setEditState(templateData);
-    }
-    if (isSchemaReady) {
-      // set schema value as per mode type. Supported mode (text & image)
-      const { textSchema, imageSchema } = this.updateSchemaWithLabels(
-        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:
-            this.props.location.query.type === 'embedded'
-              ? 'outbound'
-              : 'default',
-          embedded:
-            this.props.location.query.type === 'embedded'
-              ? this.props.location.query.type
-              : 'full',
-        };
-        if (this.props.getDefaultTags) {
-          getTagsQuery.context = this.props.getDefaultTags;
-        }
-        if (!Object.keys(tags || {}).length && modeType !== 'image') {
-          this.props.globalActions.fetchSchemaForEntity(getTagsQuery);
-        } else {
-          this.setState({ isReady: true });
-        }
-      });
-    }
-
-    const lineTemplateId = get(nextProps, 'Line.response.templateId', '');
-    if (lineTemplateId) {
-      this.discardValues();
-      const message = getMessageObject(
-        'success',
-        this.props.intl.formatMessage(
-          messages.lineTemplateCreatedSuccessfully
-        ),
-        true
-      );
-      this.props.globalActions.addMessageToQueue(message);
-      this.props.actions.clearCreateResponse();
-    }
-
-    if (
-      nextProps.Line.createTemplateError &&
-      !_.isEqual(
-        nextProps.Line.createTemplateError,
-        this.props.Line.createTemplateError
-      )
-    ) {
-      const {
-        Line: {
-          createTemplateErrorMessage,
-        },
-      } = nextProps;
-      const message = getMessageObject(
-        'error',
-        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();
-    }
-
-    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();
-    }
-  }
-
-  setEditSuccessMessage = () => {
-    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();
-  }
-
-  setEditState = (data) => {
-    const { formData: previousFormData } = this.state;
-    const { text, originalContentUrl, imagePreview, image, previewImageUrl } = get(data, "versions.base.content.messages[0]", {});
-    const retrievedData = {
-      ...previousFormData[0],
-    };
-    if (text) {
-      retrievedData["message-editor"] = text;
-    }
-    const lineImage = originalContentUrl || image;
-    if (lineImage) {
-      retrievedData.image = lineImage;
-      retrievedData.imagePreview = imagePreview || previewImageUrl;
-    }
-    const formData = {
-      0: retrievedData,
-      base: retrievedData,
-    };
-    this.setState({ formData });
-  }
-
-  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: { ...formData } });
-    if (tabCount) {
-      this.setState({ 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') {
-      const formImage = formData['0'].image;
-      if (formImage && formImage.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 {
-        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') {
-      const {
-        base: {
-          content: {
-            messages: [{
-              originalContentUrl,
-              previewImageUrl,
-            }],
-          },
-        },
-      } = versions;
-      obj.base.image = originalContentUrl;
-      obj['0'].image = originalContentUrl;
-      obj['0'].imagePreview = previewImageUrl;
-      obj.base.imagePreview = previewImageUrl;
-    }
-    return obj;
-  };
-
-  setFormValidity = (isFormValid) => {
-    this.setState({ isFormValid });
-  };
-
-  getMappedEvent = (id, event) => {
-    const map = this.state.eventsMap;
-    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 = () => {
-    const obj = this.getTransformedData(this.state.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 text = obj.versions.base.content.messages[0].text;
-      const charCount = text ? text.length : 0;
-      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.startValidation) {
-      this.setState({
-        startValidation: true,
-      });
-    } else {
-      const {
-        isFullMode,
-        saveMessage,
-        actions,
-        onCreateComplete,
-      } = this.props;
-      const { text, originalContentUrl, image } = get(obj, "versions.base.content.messages[0]", {});
-      const { name } = obj || {};
-      if ((text || originalContentUrl || image) && (isFullMode ? name : true)) {
-        if (!isFullMode) {
-          saveMessage();
-        } else if (this.state.isEdit) {
-          actions.editTemplate(obj, () => {
-            this.setEditSuccessMessage();
-            onCreateComplete();
-          });
-        } else {
-          actions.createTemplate(
-            obj,
-            onCreateComplete
-          );
-        }
-      }
-    }
-  };
-
-  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) => {
-          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.goBackTemporaryLost),
-      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);
-    const {
-      location: {
-        query: {
-          type,
-          mode,
-          module,
-        },
-      },
-    } = this.props;
-    if (type === 'embedded' && module === 'loyalty') {
-      schema.standalone.sections.splice(0, 1);
-    } else if (type === 'embedded' && typeof mode !== 'undefined') {
-        delete schema.standalone;
-      } else if (!this.props.isFullMode) {
-        const childSections = get(schema, 'standalone.sections[0].childSections');
-        const fields = get(childSections, '[1].childSections[0].childSections');//removing template name section
-        fields.splice(0, 1);
-        set(childSections, '[1].childSections[0].childSections', fields);
-    } 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;
-    const {
-      file: {
-        size,
-      },
-      fileParams: {
-        height,
-        width,
-      },
-      type,
-    } = pearmData;
-    if (type === "wrong file" || size > LINE_IMG_SIZE || height > LINE_IMG_HEIGHT || width > LINE_IMG_WIDTH) {
-      CapNotification.error({
-        message: this.props.intl.formatMessage(
-          messages.lineImageIncorrectSize
-        ),
-      });
-    } else {
-      data.fileParams.isGeneratePreview = true;
-      this.props.actions.uploadAsset(
-        data.file,
-        data.type,
-        data.fileParams,
-      );
-    }
-  };
-
-  onGalleryImageSelect = (imageTemplate) => {
-    const { formData } = this.state;
-    const image = get(imageTemplate, 'metaInfo.secure_file_path');
-    const imagePreview = get(imageTemplate, 'metaInfo.secure_file_path_preview');
-    this.setState({
-      isDrawerRequired: false,
-      formData: {
-        ...formData,
-        0: {
-          ...formData[0],
-          image,
-          imagePreview,
-        },
-        base: {
-          ...formData.base,
-          image,
-          imagePreview,
-        },
-      },
-    });
-  }
-
-  getGalleryDrawerContent = () => {
-    const location = {
-      pathname: `/assets`,
-      search: '',
-      query: !this.props.isFullMode ? {type: 'embedded', module: 'library'} : {},
-    };
-    const content = (
-      <Gallery
-        location={location}
-        isFullMode={this.props.isFullMode}
-        isLineAsset
-        onGalleryImageSelect={this.onGalleryImageSelect}
-      />);
-    return (
-      <>
-        <CapHeading type="h3">
-          {this.props.intl.formatMessage(messages.imageGallery)}
-        </CapHeading>
-        {content}
-      </>
-    );
-  };
-
-  updateSchemaWithLabels = (schema) => {
-    /* eslint-disable no-param-reassign */
-    schema.textSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].cols[0].placeholder = this.props.intl.formatMessage(
-      messages.templatePlaceholder
-    );
-    schema.textSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].cols[0].errorMessage = this.props.intl.formatMessage(
-      messages.templateNameErrorPlaceholder
-    );
-    schema.textSchema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields[0].cols[0].label = this.props.intl.formatMessage(
-      messages.templateAddTag
-    );
-    schema.textSchema.standalone.sections[0].childSections[1].childSections[0].childSections[2].inputFields[0].cols[0].placeholder = this.props.intl.formatMessage(
-      messages.templateMessagePlaceholder
-    );
-    schema.textSchema.standalone.sections[0].childSections[1].childSections[0].childSections[2].inputFields[0].cols[0].errorMessage = this.props.intl.formatMessage(
-      messages.templateMessageError
-    );
-    schema.imageSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].cols[0].placeholder = this.props.intl.formatMessage(
-      messages.templatePlaceholder
-    );
-    schema.imageSchema.standalone.sections[0].childSections[1].childSections[0].childSections[0].inputFields[0].cols[0].errorMessage = this.props.intl.formatMessage(
-      messages.templateNameErrorPlaceholder
-    );
-    schema.imageSchema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields[0].cols[0].previewProps.label = this.props.intl.formatMessage(
-      messages.templateMessagePreviewPropsLabel
-    );
-    schema.imageSchema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields[0].cols[0].previewProps.inductiveText = this.props.intl.formatMessage(
-      messages.templateMessagePreviewPropsInductiveText
-    );
-    schema.imageSchema.standalone.sections[0].childSections[1].childSections[0].childSections[1].inputFields[0].cols[0].previewProps.errorMessage = this.props.intl.formatMessage(
-      messages.templateMessagePreviewPropsError
-    );
-    return schema;
-  };
-
-  stopValidation = () => {
-    this.setState({
-      startValidation: false,
-    })
-  }
-
-  render() {
-    const {
-      Line: {
-        createTemplateInProgress,
-        assetUploading,
-      } = {},
-      templateData,
-      params: {
-        id,
-      } = {},
-      isFullMode,
-    } = this.props;
-    const {
-      edit,
-      mode,
-      orgId,
-      isDefault,
-    } = templateData || {};
-    let loading = createTemplateInProgress || false;
-    loading = !!assetUploading;
-    if (!isDefault && (edit || mode === 'edit' || (orgId && id))) {
-      const {
-        base: {
-          'message-editor': msgEditor,
-          image: uploadedAsset,
-        } = {},
-        reUpload,
-      } = this.state.formData;
-      loading = typeof reUpload === 'undefined' ? !(msgEditor || uploadedAsset) : !reUpload;
-      if (templateData && !isFullMode) {
-        const { text, originalContentUrl } = get(templateData, "versions.base.content.messages[0]", {});
-        loading = !(text || originalContentUrl);
-      }
-    }
-    let tags =
-      this.props.metaEntities && this.props.metaEntities.tags
-        ? this.props.metaEntities.tags.standard
-        : [];
-    if (this.props.supportedTags) {
-      tags = this.props.supportedTags;
-    }
-    return (
-      <CapSpin spinning={loading}>
-        <CapRow>
-          <CapColumn>
-            <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}
-              capDrawerContent={this.getGalleryDrawerContent()}
-              isDrawerRequired={this.state.isDrawerRequired}
-              setDrawerVisibility={(drawervisibleFlag) =>
-                this.setState({ isDrawerRequired: drawervisibleFlag })
-              }
-              startValidation={this.state.startValidation}
-              stopValidation={this.stopValidation}
-            />
-          </CapColumn>
-        </CapRow>
-      </CapSpin>
-    );
-  }
-}
-
-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,
-  onCreateComplete: PropTypes.func,
-  isFullMode: PropTypes.bool,
-  saveMessage: PropTypes.func,
-  templateData: PropTypes.object,
-};
-
-const mapStateToProps = createStructuredSelector({
-  Line: makeSelectCreateLine(),
-  lineData: makeSelectLine(),
-  Templates: makeSelectTemplates(),
-  metaEntities: makeSelectMetaEntities(),
-  injectedTags: setInjectedTags(),
-});
-
-function mapDispatchToProps(dispatch) {
-  return {
-    actions: bindActionCreators(actions, dispatch),
-  };
-}
-
-export default withCreatives({
-  WrappedComponent: Line,
-  mapStateToProps,
-  mapDispatchToProps,
-  userAuth: true,
-});