@capillarytech/creatives-library 3.8.7 → 3.8.8

package/v2Containers/Line/Create/index.js

@@ -1,12 +1,15 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import get from 'lodash/get';
 import { bindActionCreators } from 'redux';
 import { intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
-import { Row, Col, Spin, Breadcrumb } from 'antd';
+import { Row, Col, Spin } from 'antd';
 import _ from 'lodash';
+import { CapHeading } 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} from './selectors';
@@ -16,47 +19,48 @@ import { makeSelectTemplates } from '../../Templates/selectors';
 import './_lineCreate.scss';
 import withCreatives from '../../../hoc/withCreatives';
 
-const BreadcrumbItem = Breadcrumb.Item;
-
 export class Line extends Component {
-
   constructor(props) {
     super(props);
     const map = {
-      "save-button": {
+      'save-button': {
         saveFormData: this.saveFormData,
       },
-      "template-name": {
+      'template-name': {
         onChange: this.onTemplateNameChange,
       },
-      "discard-button": {
+      'discard-button': {
         discardValues: this.discardValues,
       },
-      "cancel-button": {
-        cancelTemplate: this.cancelTemplate,
-      },
-      "message-editor": {
+      'message-editor': {
         onChange: this.onTemplateContentChange,
       },
-      "message-editor2": {
+      'message-editor2': {
         onChange: this.onTemplateContentChange,
       },
-      "message-tagList": {
+      'message-tagList': {
         onTagSelect: this.onTagSelect,
       },
-      "title-tagList": {
+      'title-tagList': {
         onTagSelect: this.onTagSelectTitle,
       },
-      "pane": {
+      pane: {
         onTabChange: this.onTabChange,
       },
-      "line-template": {
+      'line-template': {
         onSelect: this.onTemplateChange,
       },
-      "image-upload-line": {
+      'image-upload-line': {
         onUpload: this.uploadImage,
       },
+      tagList: {
+        onTagSelect: this.onTagSelect,
+      },
+      'line-editor': {
+        onChange: this.onTemplateContentChange,
+      },
     };
+
     this.state = {
       schema: {},
       isSchemaChanged: false,
@@ -70,13 +74,21 @@ export class Line extends Component {
       eventsMap: map,
       errorData: {},
       displayProps: {},
-      modalContent: {title: this.props.intl.formatMessage(messages.alertMessage), body: this.props.intl.formatMessage(messages.templateNotConfigured), type: 'confirm'},
+      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,
+      galleryPage: 1,
     };
   }
 
@@ -84,7 +96,7 @@ export class Line extends Component {
     if (this.props.params.id) {
       const editTemplateId = this.props.params.id;
       this.props.actions.getTemplateDetails(editTemplateId, 'LINE');
-      this.setState({isEdit: true});
+      this.setState({ isEdit: true });
     }
   }
 
@@ -92,47 +104,42 @@ export class Line extends Component {
     const getSchemaQuery = {
       layout: 'LINE',
       type: 'LAYOUT',
+      version: 'v2',
     };
     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 { 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') {
+    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);
+      this.setState({ modeType, 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}, () => {
+      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);
@@ -141,118 +148,172 @@ export class Line extends Component {
         const getTagsQuery = {
           layout: 'LINE',
           type: 'TAG',
-          context: 'outbound',
-          embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
+          context:
+            this.props.location.query.type === 'embedded'
+              ? this.props.location.query.module
+              : 'default',
+          embedded:
+            this.props.location.query.type === 'embedded'
+              ? this.props.location.query.type
+              : 'full',
         };
         if (this.props.getDefaultTags) {
           getTagsQuery.context = this.props.getDefaultTags;
         }
-        if (tags === undefined && modeType !== 'image') {
+        if (!Object.keys(tags || {}).length && modeType !== 'image') {
           this.props.globalActions.fetchSchemaForEntity(getTagsQuery);
         } else {
-          this.setState({isReady: true});
-        }
-        if (this.props.location.query.type === 'embedded') {
-          this.showNext();
+          this.setState({ isReady: true });
         }
       });
     }
 
-    if ( nextProps.Line && (nextProps.Line.response && nextProps.Line.response.templateId) ) {
-      console.log('create response', nextProps.Line);
+    const lineTemplateId = get(nextProps, 'Line.response.templateId', '');
+    if (lineTemplateId) {
       this.discardValues();
-      const message = getMessageObject('success', this.props.intl.formatMessage(messages["Line Template Created Successfully"]), true);
+      const message = getMessageObject(
+        'success',
+        this.props.intl.formatMessage(
+          messages.lineTemplateCreatedSuccessfully
+        ),
+        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);
+    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;
+    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});
+      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);
+    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.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);
+    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) {
+    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);
+      formData[this.state.currentTab - 1].image =
+        nextProps.Line.uploadedAssetData.metaInfo.secure_file_path;
+      formData[this.state.currentTab - 1].imagePreview =
+        nextProps.Line.uploadedAssetData.metaInfo.secure_file_path_preview;
+      this.setState({ formData });
       this.props.actions.clearAsset();
     }
   }
 
   componentWillUnmount() {
-    console.log('removed listener templates');
-    window.removeEventListener("message", this.handleFrameTasks);
+    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}}}`, currentTab);
+    this.insertAtCursor(
+      document.getElementById(editorId),
+      `{{${data}}}`,
+      currentTab
+    );
     document.getElementById(editorId).focus();
   }
 
   onTagSelectTitle(data, currentTab) {
-    console.log('parent data tag', data, currentTab);
     const editorId = 'message-title';
-    this.insertAtCursor(document.getElementById(editorId), `{{${data}}}`, currentTab);
+    this.insertAtCursor(
+      document.getElementById(editorId),
+      `{{${data}}}`,
+      currentTab
+    );
     document.getElementById(editorId).focus();
   }
 
   onFormDataChange = (formData, tabCount, currentTab) => {
-    console.log('Form data changed is ', formData, tabCount, currentTab);
-    this.setState({formData, tabCount});
+    this.setState({ formData });
+    if (tabCount) {
+      this.setState({ tabCount });
+    }
     if (currentTab) {
-      this.setState({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}}",
+          to: '{{line_id}}',
           messages: [],
         },
       },
@@ -262,7 +323,7 @@ export class Line extends Component {
     obj.definition = {
       mode: modeType,
     };
-    if ( modeType && modeType !== undefined) {
+    if (modeType && modeType !== undefined) {
       msgData.type = modeType;
     }
     if (modeType === 'text') {
@@ -287,15 +348,6 @@ export class Line extends Component {
           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;
       }
@@ -304,7 +356,7 @@ export class Line extends Component {
     return obj;
   };
 
-  getEditTransformedData = ({name, versions}) => {
+  getEditTransformedData = ({ name, versions }) => {
     const modeType = this.state.modeType;
     const obj = {};
     obj['0'] = {};
@@ -313,33 +365,39 @@ export class Line extends Component {
     };
     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;
+      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;
+      const {
+        base: {
+          content: {
+            messages: [{
+              originalContentUrl,
+              previewImageUrl,
+            }],
+          },
+        },
+      } = versions;
+      obj.base.image = originalContentUrl;
+      obj['0'].image = originalContentUrl;
+      obj['0'].imagePreview = previewImageUrl;
+      obj.base.imagePreview = previewImageUrl;
     }
-
-    console.log("getEditTransformedData", obj);
     return obj;
   };
 
   setFormValidity = (isFormValid) => {
-    this.setState({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',
@@ -349,13 +407,12 @@ export class Line extends Component {
   }
 
   getFormData = (e) => {
-    console.log('posting final result', this.state.formData);
     const response = {
-      action: "getFormData",
+      action: 'getFormData',
       value: this.getTransformedData(this.state.formData),
       validity: this.state.isFormValid,
     };
-    this.setState({checkValidation: true});
+    this.setState({ checkValidation: true });
     if (e) {
       e.source.postMessage(JSON.stringify(response), e.origin);
     }
@@ -365,56 +422,62 @@ export class Line extends Component {
   injectEvents = (schema) => {
     const temp = schema;
     if (temp.standalone) {
-      temp.standalone.sections = this.injectSections(temp.standalone.sections);
+      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.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);
+      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 (
+      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);
+        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);
+      this.props.actions.editTemplate(obj, this.props.onCreateComplete);
     } else {
-      this.props.actions.createTemplate(obj);
+      this.props.actions.createTemplate(
+        obj,
+        this.props.onCreateComplete
+      );
     }
   };
 
-  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;
@@ -434,24 +497,28 @@ export class Line extends Component {
       _.forEach(inputField.cols, (col) => {
         const temp = col;
         if (temp.type === 'popover') {
-          temp.content.sections = this.injectSections(temp.content.sections);
+          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 === 'discard-button') {
+          temp.colStyle = { ...temp.colStyle, display: 'none' };
         }
-        if (temp.id === "cancel-button") {
+        if (temp.id === 'cancel-button') {
           temp.offset = 11;
         }
-        if (temp.id === "line-push-preview") {
+        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);
+          temp.injectedEvents[event] = this.getMappedEvent(
+            col.id,
+            event
+          );
         });
         return true;
       });
@@ -460,13 +527,18 @@ export class Line extends Component {
       _.forEach(actionField.cols, (col) => {
         const temp = col;
         if (temp.type === 'popover') {
-          temp.content.sections = this.injectSections(temp.content.sections);
+          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);
+          temp.injectedEvents[event] = this.getMappedEvent(
+            col.id,
+            event
+          );
         });
         return true;
       });
@@ -478,26 +550,36 @@ export class Line extends Component {
     _.forEach(section.inputFields, (inputField) => {
       const temp = inputField;
       if (temp.type === 'popover') {
-        temp.content.sections = this.injectSections(temp.content.sections);
+        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);
+        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.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);
+        temp.injectedEvents[event] = this.getMappedEvent(
+          actionField.id,
+          event
+        );
       });
       return true;
     });
@@ -525,12 +607,17 @@ export class Line extends Component {
       myField.focus();
       const sel = document.selection.createRange();
       sel.text = myValue;
-    } else if (myField.selectionStart || myField.selectionStart === '0') { //MOZILLA and others
+    } 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.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 {
@@ -538,7 +625,7 @@ export class Line extends Component {
     }
     const formData = _.cloneDeep(this.state.formData);
     formData[currentTab - 1][field.id] = myField.value;
-    this.setState({formData});
+    this.setState({ formData });
   };
 
   startTemplateCreation = (data) => {
@@ -547,7 +634,6 @@ export class Line extends Component {
       type: 'LAYOUT',
     };
     this.props.globalActions.fetchSchemaForEntity(getSchemaQuery);
-    console.log('startTemplateCreation');
     const content = data.content;
     const obj = {};
     obj['0'] = {};
@@ -561,14 +647,17 @@ export class Line extends Component {
       obj.base.image = content;
       obj['0'].image = content;
     }
-    this.setState({formData: obj, loading: false, injectedTags: data.tags});
+    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});
+      this.setState({ loading: true });
     }
   };
 
@@ -581,7 +670,9 @@ export class Line extends Component {
       });
       _.forEach(temp.panes, (pane) => {
         const tempPane = pane;
-        tempPane.sectionsHeaders = this.injectSections(tempPane.sectionsHeaders);
+        tempPane.sectionsHeaders = this.injectSections(
+          tempPane.sectionsHeaders
+        );
         tempPane.sections = this.injectSections(tempPane.sections);
       });
     }
@@ -589,7 +680,11 @@ export class Line extends Component {
   };
 
   resetSchema = () => {
-    this.setState({ schema: this.state.initialState ? this.state.initialState : this.state.schema});
+    this.setState({
+      schema: this.state.initialState
+        ? this.state.initialState
+        : this.state.schema,
+    });
   };
 
   resetState = () => {
@@ -606,7 +701,6 @@ export class Line extends Component {
   };
 
   moveToTemplates() {
-    console.log('in move to Templates');
     const modalContent = {
       title: this.props.intl.formatMessage(messages.alertMessage),
       body: this.props.intl.formatMessage(messages.goBackTemporaryLost),
@@ -614,12 +708,12 @@ export class Line extends Component {
       id: 'template-back-confirm-modal',
       show: true,
     };
-    this.setState({modalContent, showModal: true});
+    this.setState({ modalContent, showModal: true });
   }
 
   showNext() {
     const response = {
-      action: "showNext",
+      action: 'showNext',
       value: true,
     };
     parent.postMessage(JSON.stringify(response), '*');
@@ -631,20 +725,17 @@ export class Line extends Component {
   };
 
   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":
+        case 'startTemplateCreation':
           this.startTemplateCreation(type.value);
           break;
-        case "startLoading":
+        case 'startLoading':
           this.startLoading(type.edit);
           break;
-        case "getCurrentWindow":
+        case 'getCurrentWindow':
           this.getCurrentWindow(type);
           break;
         default:
@@ -652,19 +743,16 @@ export class Line extends Component {
       }
     } else {
       switch (type) {
-        case "getFormData":
+        case 'getFormData':
           this.getFormData(e);
           break;
-        case "startTemplateCreation":
-          console.log('Starting to create template');
+        case 'startTemplateCreation':
           //this.getFormData(e);
           break;
-        case "moveToTemplates":
-          console.log('moving to templates');
+        case 'moveToTemplates':
           this.moveToTemplates();
           break;
-        case "validateContent":
-          console.log('validating Content');
+        case 'validateContent':
           this.validateContent(e);
           break;
         default:
@@ -675,10 +763,15 @@ export class Line extends Component {
 
   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') {
+    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') {
+    } 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);
@@ -687,74 +780,162 @@ export class Line extends Component {
   };
 
   validateContent = (e) => {
-    console.log('posting final validation result', this.state.isFormValid);
     const response = {
-      action: "validateContent",
+      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',
+      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);
+      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);
+      const newFile = new File(
+        [blob],
+        `${name[0]}${Date.now()}.${name[1]}`,
+        { type: 'image' }
+      );
+      this.props.actions.uploadAsset(
+        newFile,
+        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;
+  };
+
   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 loading = this.props.Line.createTemplateInProgress ? this.props.Line.createTemplateInProgress : false;
+    if (
+      this.state.formData &&
+      this.state.formData['0'] &&
+      this.state.formData['0'].image
+    ) {
+      console.log('before render@@@', this.state.formData['0'].image);
+    }
+    let loading = this.props.Line.createTemplateInProgress
+      ? this.props.Line.createTemplateInProgress
+      : false;
     if (this.props.Line.assetUploading) {
       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 : [];
+    let tags =
+      this.props.metaEntities && this.props.metaEntities.tags
+        ? this.props.metaEntities.tags.standard
+        : [];
     if (this.props.supportedTags) {
       tags = this.props.supportedTags;
     }
     return (
       <Spin 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"}
+              key={'form builder'}
               schema={this.state.schema}
               onSubmit={this.saveFormData}
               onChange={this.onFormDataChange}
@@ -763,7 +944,9 @@ export class Line extends Component {
               formData={_.cloneDeep(this.state.formData)}
               location={this.props.location}
               tags={tags}
-              injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+              injectedTags={
+                this.props.injectedTags ? this.props.injectedTags : {}
+              }
               onFormValidityChange={this.setFormValidity}
               usingTabContainer
               checkValidation={this.state.checkValidation}
@@ -777,6 +960,11 @@ export class Line extends Component {
               router={this.props.router}
               onContextChange={this.handleOnTagsContextChange}
               setModalContent={this.setModalContent}
+              capDrawerContent={this.getGalleryDrawerContent()}
+              isDrawerRequired={this.state.isDrawerRequired}
+              setDrawerVisibility={(drawervisibleFlag) =>
+                this.setState({ isDrawerRequired: drawervisibleFlag })
+              }
             />
           </Col>
         </Row>
@@ -799,6 +987,8 @@ Line.propTypes = {
   supportedTags: PropTypes.any,
   getDefaultTags: PropTypes.string,
   injectedTags: PropTypes.object,
+  onCreateComplete: PropTypes.func,
+  isFullMode: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({