@capillarytech/creatives-library 6.13.1 → 6.13.3

package/v2Containers/Line/Create/index.js

@@ -0,0 +1,1112 @@
+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,
+});