@capillarytech/creatives-library 3.9.21 → 3.10.0

package/v2Containers/Line/Create/index.js

@@ -1,66 +1,62 @@
 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 { Row, Col, Spin, Breadcrumb } from 'antd';
 import _ from 'lodash';
-import { CapSpin, CapHeading, CapRow, CapColumn } 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 {makeSelectCreateLine} 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';
 
+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,
       },
-      'message-editor': {
+      "cancel-button": {
+        cancelTemplate: this.cancelTemplate,
+      },
+      "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,
@@ -74,21 +70,13 @@ 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,
-      startValidation: false,
     };
   }
 
@@ -96,7 +84,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});
     }
   }
 
@@ -104,60 +92,47 @@ 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: {} });
-    }
-    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' });
+      this.setState({modeType, schema: {}});
+      //console.log("ooo", this.state.schema);
     }
-    if (templateData && templateData.edit) {
-      this.setEditState(templateData);
+    if (nextProps.isGetFormData) {
+      nextProps.getFormLibraryData(this.getFormData());
     }
     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 }, () => {
+      console.log("modeType", this.state.modeType);
+      const {textSchema, imageSchema} = layouts[0].definition;
+      const schema = (modeType === "text" || editModeType === 'edit_text') ? textSchema : imageSchema;
+      this.setState({schema}, () => {
         // Once schema is ready and set, then inject the available events from the schema
         if (!_.isEmpty(this.state.schema)) {
           this.injectEvents(this.state.schema);
@@ -166,188 +141,118 @@ export class Line extends Component {
         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',
+          context: 'outbound',
+          embedded: this.props.location.query.type === 'embedded' ? this.props.location.query.type : 'full',
         };
         if (this.props.getDefaultTags) {
           getTagsQuery.context = this.props.getDefaultTags;
         }
-        if (!Object.keys(tags || {}).length && modeType !== 'image') {
+        if (tags === undefined && modeType !== 'image') {
           this.props.globalActions.fetchSchemaForEntity(getTagsQuery);
         } else {
-          this.setState({ isReady: true });
+          this.setState({isReady: true});
+        }
+        if (this.props.location.query.type === 'embedded') {
+          this.showNext();
         }
       });
     }
 
-    const lineTemplateId = get(nextProps, 'Line.response.templateId', '');
-    if (lineTemplateId) {
+    if ( nextProps.Line && (nextProps.Line.response && nextProps.Line.response.templateId) ) {
+      console.log('create response', nextProps.Line);
       this.discardValues();
-      const message = getMessageObject(
-        'success',
-        this.props.intl.formatMessage(
-          messages.lineTemplateCreatedSuccessfully
-        ),
-        true
-      );
+      const message = getMessageObject('success', this.props.intl.formatMessage(messages["Line Template Created Successfully"]), true);
       this.props.globalActions.addMessageToQueue(message);
       this.props.actions.clearCreateResponse();
+      const type = this.props.location.query.type;
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      this.props.router.push({
+        pathname: `/line/`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
     }
 
-    if (
-      nextProps.Line.createTemplateError &&
-      !_.isEqual(
-        nextProps.Line.createTemplateError,
-        this.props.Line.createTemplateError
-      )
-    ) {
-      const {
-        Line: {
-          createTemplateErrorMessage,
-        },
-      } = nextProps;
-      const message = getMessageObject(
-        'error',
-        createTemplateErrorMessage || this.props.intl.formatMessage(messages.somethingWentWrong),
-        true
-      );
+    if (nextProps.Line.createTemplateError && !_.isEqual(nextProps.Line.createTemplateError, this.props.Line.createTemplateError)) {
+      const message = getMessageObject('error', (nextProps.Line.createTemplateErrorMessage && nextProps.Line.createTemplateErrorMessage !== '') ? nextProps.Line.createTemplateErrorMessage : this.props.intl.formatMessage(messages.somethingWentWrong), true);
       this.props.globalActions.addMessageToQueue(message);
     }
 
     //// Edit Template Logic ////
-    const isEdit =
-      this.state.isEdit &&
-      this.props.params.id &&
-      (this.props.route.name === 'edit_text' ||
-        this.props.route.name === 'edit_image') &&
-      this.props.Line.templateDetails &&
-      this.props.Line.templateDetails.versions;
+
+    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();
     }
 
-    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
-      );
+    const isEditSucceed = (this.state.isEdit && nextProps.Line && nextProps.Line.editResponse && nextProps.Line.editResponse.templateId);
+    if (isEditSucceed) {
+      this.setState({formData: {} });
+      const message = getMessageObject('success', this.props.intl.formatMessage(messages['Line Template Edited Successfully']), true);
       this.props.globalActions.addMessageToQueue(message);
+      this.props.actions.clearEditResponse();
+      const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+      const type = this.props.location.query.type;
+      this.props.router.push({
+        pathname: `/line/`,
+        query: type === 'embedded' ? {type: 'embedded', module} : {module},
+      });
     }
 
-    if (
-      nextProps.Line.uploadAssetSuccess &&
-      nextProps.Line.uploadedAssetData
-    ) {
+    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 });
+      formData[this.state.currentTab - 1].image = nextProps.Line.uploadedAssetData.metaInfo.secure_file_path;
+      formData[this.state.currentTab - 1].imagePreview = nextProps.Line.uploadedAssetData.metaInfo.secure_file_path_preview;
+      console.log("before 2", formData[this.state.currentTab - 1].image);
+      this.setState({formData});
+      console.log("ooo", this.state.formData);
       this.props.actions.clearAsset();
     }
   }
 
-  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 } = 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;
-    }
-    const formData = {
-      0: retrievedData,
-      base: retrievedData,
-    };
-    this.setState({ formData });
-  }
-
   componentWillUnmount() {
-    window.removeEventListener('message', this.handleFrameTasks);
+    console.log('removed listener templates');
+    window.removeEventListener("message", this.handleFrameTasks);
   }
 
   onTagSelect(data, currentTab) {
+    console.log('parent data tag', data, currentTab);
     const editorId = 'message-editor';
-    this.insertAtCursor(
-      document.getElementById(editorId),
-      `{{${data}}}`,
-      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) => {
-    this.setState({ formData: { ...formData } });
-    if (tabCount) {
-      this.setState({ tabCount });
-    }
+    console.log('Form data changed is ', formData, tabCount, currentTab);
+    this.setState({formData, 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: [],
         },
       },
@@ -357,7 +262,7 @@ export class Line extends Component {
     obj.definition = {
       mode: modeType,
     };
-    if (modeType && modeType !== undefined) {
+    if ( modeType && modeType !== undefined) {
       msgData.type = modeType;
     }
     if (modeType === 'text') {
@@ -382,6 +287,15 @@ 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;
       }
@@ -390,7 +304,7 @@ export class Line extends Component {
     return obj;
   };
 
-  getEditTransformedData = ({ name, versions }) => {
+  getEditTransformedData = ({name, versions}) => {
     const modeType = this.state.modeType;
     const obj = {};
     obj['0'] = {};
@@ -399,39 +313,33 @@ 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') {
-      const {
-        base: {
-          content: {
-            messages: [{
-              originalContentUrl,
-              previewImageUrl,
-            }],
-          },
-        },
-      } = versions;
-      obj.base.image = originalContentUrl;
-      obj['0'].image = originalContentUrl;
-      obj['0'].imagePreview = previewImageUrl;
-      obj.base.imagePreview = previewImageUrl;
+      obj.base.image = versions.base.content.messages[0].originalContentUrl;
+      obj['0'].image = versions.base.content.messages[0].originalContentUrl;
+      obj['0'].imagePreview = versions.base.content.messages[0].previewImageUrl;
+      obj.base.imagePreview = versions.base.content.messages[0].previewImageUrl;
     }
+
+    console.log("getEditTransformedData", obj);
     return obj;
   };
 
   setFormValidity = (isFormValid) => {
-    this.setState({ isFormValid });
+    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',
@@ -441,12 +349,13 @@ 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);
     }
@@ -456,79 +365,56 @@ 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;
     });
-    this.setState({ schema, isSchemaChanged: true }, () => {
+    console.log('final injected schema', schema);
+    this.setState({schema, isSchemaChanged: true}, () => {
       this.removeStandAlone();
     });
+    console.log('final returned schema', this.state.schema);
     return schema;
   };
 
   saveFormData = (formData) => {
+    console.log("ccc", this.props);
+    console.log('Saving form data of LINE @@@', formData, this.state.tabCount);
     const obj = this.getTransformedData(formData);
+    console.log('obj final@@@', obj);
     if (obj === 'IMAGE_ERROR') {
-      const message = getMessageObject(
-        'error',
-        this.props.intl.formatMessage(
-          messages['Please upload an image to proceed']
-        ),
-        true
-      );
+      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 (obj !== 'IMAGE_ERROR' && obj.versions.base.content.messages[0].type === 'text') {
+      const charCount = obj.versions.base.content.messages[0].text.length;
       if (charCount > 1600) {
-        const message = getMessageObject(
-          'error',
-          this.props.intl.formatMessage(
-            messages['Maximum characters length exceeds']
-          ),
-          true
-        );
+        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,
-      }, () => {
-        const {
-          isFullMode,
-          saveMessage,
-          actions,
-          onCreateComplete,
-        } = this.props;
-        if (!isFullMode) {
-          saveMessage();
-        } else if (this.state.isEdit) {
-          actions.editTemplate(obj, () => {
-            this.setEditSuccessMessage();
-            onCreateComplete();
-          });
-        } else {
-          actions.createTemplate(
-            obj,
-            onCreateComplete
-          );
-        }
-      });
+    if (this.state.isEdit) {
+      console.log("Inside edit line template@@");
+      this.props.actions.editTemplate(obj);
+    } else {
+      this.props.actions.createTemplate(obj);
     }
   };
 
+  cancelTemplate = () => {
+    const type = this.props.location.query.type;
+    const module = this.props.location.query.module ? this.props.location.query.module : 'default';
+    this.props.router.push({
+      pathname: `/LINE/`,
+      query: type === 'embedded' ? {type: 'embedded', module} : {module},
+    });
+  };
+
   injectSections = (sections) => {
     _.forEach(sections, (section) => {
       let temp = section;
@@ -548,28 +434,24 @@ 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) => {
-          temp.injectedEvents[event] = this.getMappedEvent(
-            col.id,
-            event
-          );
+          console.log('injected event for ', col, event, this.getMappedEvent(col.id, event));
+          temp.injectedEvents[event] = this.getMappedEvent(col.id, event);
         });
         return true;
       });
@@ -578,18 +460,13 @@ 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;
       });
@@ -601,36 +478,26 @@ 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;
     });
@@ -658,17 +525,12 @@ 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 {
@@ -676,7 +538,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) => {
@@ -685,6 +547,7 @@ export class Line extends Component {
       type: 'LAYOUT',
     };
     this.props.globalActions.fetchSchemaForEntity(getSchemaQuery);
+    console.log('startTemplateCreation');
     const content = data.content;
     const obj = {};
     obj['0'] = {};
@@ -698,17 +561,14 @@ 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});
     }
   };
 
@@ -721,9 +581,7 @@ 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);
       });
     }
@@ -731,11 +589,7 @@ 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 = () => {
@@ -752,6 +606,7 @@ 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),
@@ -759,12 +614,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), '*');
@@ -776,17 +631,20 @@ 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:
@@ -794,16 +652,19 @@ export class Line extends Component {
       }
     } else {
       switch (type) {
-        case 'getFormData':
+        case "getFormData":
           this.getFormData(e);
           break;
-        case 'startTemplateCreation':
+        case "startTemplateCreation":
+          console.log('Starting to create template');
           //this.getFormData(e);
           break;
-        case 'moveToTemplates':
+        case "moveToTemplates":
+          console.log('moving to templates');
           this.moveToTemplates();
           break;
-        case 'validateContent':
+        case "validateContent":
+          console.log('validating Content');
           this.validateContent(e);
           break;
         default:
@@ -814,24 +675,11 @@ export class Line extends Component {
 
   removeStandAlone = () => {
     const schema = _.cloneDeep(this.state.schema);
-    const {
-      location: {
-        query: {
-          type,
-          mode,
-          module,
-        },
-      },
-    } = this.props;
-    if (type === 'embedded' && module === 'loyalty') {
+    console.log("schema line", schema);
+    if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'loyalty') {
       schema.standalone.sections.splice(0, 1);
-    } else if (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 if (this.props.location.query.type === 'embedded' && typeof this.props.location.query.mode !== 'undefined') {
+      delete schema.standalone;
     } else {
       schema.standalone.sections.splice(1, 1);
     }
@@ -839,170 +687,74 @@ 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;
-      this.props.actions.uploadAsset(
-        data.file,
-        data.type,
-        data.fileParams,
-      );
+      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);
     }
   };
 
-  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() {
-    const {
-      Line: {
-        createTemplateInProgress,
-        assetUploading,
-      } = {},
-      templateData,
-      params: {
-        id,
-      } = {},
-    } = 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;
-    }
-    let tags =
-      this.props.metaEntities && this.props.metaEntities.tags
-        ? this.props.metaEntities.tags.standard
-        : [];
+    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.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 : [];
     if (this.props.supportedTags) {
       tags = this.props.supportedTags;
     }
     return (
-      <CapSpin spinning={loading}>
-        <CapRow>
-          <CapColumn>
+      <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}
@@ -1011,9 +763,7 @@ 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}
@@ -1027,16 +777,10 @@ 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 })
-              }
-              startValidation={this.state.startValidation}
             />
-          </CapColumn>
-        </CapRow>
-      </CapSpin>
+          </Col>
+        </Row>
+      </Spin>
     );
   }
 }
@@ -1055,15 +799,10 @@ Line.propTypes = {
   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(),