@capillarytech/creatives-library 6.10.5 → 6.11.0

package/components/FormBuilder/index.js

@@ -2912,7 +2912,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 langIndex = parseInt(val.id.replace('template-content', ''), 10) - 1;
               }
 
-              const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
+              const currentLang = ((!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage) || 'en';
               const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] ? this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] : '');
 
               if (this.state.formData[`${this.state.currentTab - 1}`][currentLang].is_drag_drop) {
@@ -2942,14 +2942,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 langTab = val.id.charAt(9);
               }
             }
-            const supportedLanguages = this.state.formData[this.state.currentTab - 1].selectedLanguages;
+            const supportedLanguages = (this.state.formData[this.state.currentTab - 1] || {}).selectedLanguages;
             // let langIndex = 0;
             // if (val.id.indexOf('edmeditor') > -1 && val.id !== 'edmeditorsrc') {
             //   const test = val.id.replace('src', '');
             //   langIndex = parseInt(test.replace('edmeditor', ''), 10) - 1;
             // }
             // const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
-            const currentLang = supportedLanguages[langTab - 1];
+            const currentLang = supportedLanguages && supportedLanguages[langTab - 1];
             const edmSrc = this.state.formData[`${this.state.currentTab - 1}`][currentLang] && this.state.formData[`${this.state.currentTab - 1}`][currentLang][`edmeditor${this.state.currentTab > 1 ? this.state.currentTab : ''}src`];
 
 

package/containers/Email/index.js

@@ -871,7 +871,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         const schema = _.cloneDeep(this.state.schema);
         const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
         console.log('edm trying to set data', langIndex, langId, formData[this.state.currentTab - 1].activeTab, apiLangId);
-        const temp = schema.containers[this.state.currentTab - 1];
+        const temp = (schema.containers || {})[this.state.currentTab - 1];
         if (baseLanguage === langId && (apiLangId === "undefined" || apiLangId === formData[this.state.currentTab - 1].activeTab)) {
           temp.tabBarExtraContent.sections[0].inputFields[0].cols[4].content.sections[0].inputFields[2].cols[0].style = {display: "none"};
         } else if (apiLangId === "undefined" || apiLangId === formData[this.state.currentTab - 1].activeTab) {

package/containers/Templates/index.js

@@ -191,8 +191,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({ channel }, () => {
         if (this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill' || (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount))) {
           if (this.state.channel.toLowerCase() === 'wechat' && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
-            params.wecrmId = nextProps.Templates.selectedWeChatAccount.configs.wecrm_app_id;
-            params.wecrmToken = nextProps.Templates.selectedWeChatAccount.configs.wecrm_token;
+            params.wecrmId = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_app_id;
+            params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
             params.originalId = nextProps.Templates.selectedWeChatAccount.sourceAccountIdentifier;
           }
           if (this.state.channel.toLowerCase() === "mobilepush" && !_.isEmpty(nextProps.Templates.selectedWeChatAccount)) {
@@ -203,8 +203,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     }
     if (this.state.channel.toLowerCase() === 'wechat' && nextProps.Templates.selectedWeChatAccount) {
-      params.wecrmId = nextProps.Templates.selectedWeChatAccount.configs.wecrm_app_id;
-      params.wecrmToken = nextProps.Templates.selectedWeChatAccount.configs.wecrm_token;
+      params.wecrmId = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_app_id;
+      params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
       params.originalId = nextProps.Templates.selectedWeChatAccount.sourceAccountIdentifier;
     }
     if (this.state.channel.toLowerCase() === "mobilepush" && nextProps.Templates.selectedWeChatAccount) {
@@ -1536,7 +1536,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.channel.toLowerCase() === 'ebill') {
       htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base['ebill-editor'];
     } else if (this.state.channel.toLowerCase() === 'email') {
-      htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base[this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en']['template-content'];
+      htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && (this.state.previewTemplate.versions.base[this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en'] || {})['template-content'];
     }
 
     const templateList = this.populateTemplatesList(this.props.TemplatesList, true);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.10.5",
+  "version": "6.11.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/reducers.js

@@ -8,6 +8,7 @@ import { fromJS } from 'immutable';
 import { LOCATION_CHANGE } from 'react-router-redux';
 
 import languageProviderReducer from 'v2Containers/LanguageProvider/reducer';
+import beeEditorReducer from 'v2Containers/BeeEditor/reducer';
 import capReducer from 'containers/Cap/reducer';
 import appReducer from 'containers/App/reducer';
 import createSmsReducer from 'containers/Sms/Create/reducer';
@@ -60,6 +61,7 @@ export default function createReducer(asyncReducers) {
     tagList: tagsReducer,
     email: emailReducer,
     ebill: ebillReducer,
+    beeEditor: beeEditorReducer,
     ...asyncReducers,
   });
 }

package/routes.js

@@ -12,6 +12,7 @@ import * as emailSagas from 'containers/Email/sagas';
 import * as templateSagas from 'containers/Templates/sagas';
 import * as lineSagas from 'containers/Line/Create/sagas';
 import * as languageSaga from './v2Containers/LanguageProvider/sagas';
+
 import {updateCharCount} from './utils/smsCharCountV2';
 const errorLoading = (err) => {
   console.error('Dynamic page loading failed', err); // eslint-disable-line no-console
@@ -614,6 +615,7 @@ export default function createRoutes(store) {
           import('v2Containers/Sms/Edit/sagas'),
           import('v2Containers/Email/reducer'),
           import('v2Containers/Email/sagas'),
+          import('v2Containers/BeeEditor/sagas'),
           import('v2Containers/CallTask/reducer'),
           import('v2Containers/CallTask/sagas'),
           import('v2Containers/MobilePush/Create/sagas'),
@@ -642,6 +644,7 @@ export default function createRoutes(store) {
           creativesContainerReducer,
           smsCreateReducer, smsCreateSaga, smsEditReducer, smsEditSaga,
           emailReducer, emailSaga,
+          BeeEditorSaga,
           callTaskReducer, callTaskSagas,
           mpushCreateSagas, mpushCreateReducer,
           mpushEditSagas, mpushEditReducer,
@@ -673,6 +676,7 @@ export default function createRoutes(store) {
           injectSagas(smsCreateSaga.default);
           injectSagas(smsEditSaga.default);
           injectSagas(emailSaga.default);
+          injectSagas(BeeEditorSaga.default);
           injectSagas(callTaskSagas.default);
           injectSagas(mpushCreateSagas.default);
           injectSagas(mpushEditSagas.default);

package/services/api.js

@@ -386,3 +386,9 @@ export const getMarketingObjectives = (channel) =>
 
 export const getAllLineStickers = () =>
   request(`${API_ENDPOINT}/meta/sticker`, getAPICallObject('GET'));
+
+
+export const createCustomRow = (data) => {
+  const url = `${API_ENDPOINT}/cms/saveRows`;
+  return request(url, getAPICallObject('POST', data));
+};

package/translations/en.json

@@ -86,6 +86,21 @@
   "creatives.components.WechatRichmediaTemplatePreview.header": "This is the WechatRichmediaTemplatePreview component !",
   "creatives.components.WechatRichmediaTemplatePreview.reply": "Reply",
   "creatives.components.WechatRichmediaTemplatePreview.select": "Select",
+  "creatives.componentsV2.BeeEditor.addLabel": "Add label",
+  "creatives.componentsV2.BeeEditor.cancel": "Cancel",
+  "creatives.componentsV2.BeeEditor.cta": "CTA",
+  "creatives.componentsV2.BeeEditor.customRows": "Custom rows",
+  "creatives.componentsV2.BeeEditor.footer": "Footer",
+  "creatives.componentsV2.BeeEditor.header": "Header",
+  "creatives.componentsV2.BeeEditor.others": "Others",
+  "creatives.componentsV2.BeeEditor.rowName": "Row name",
+  "creatives.componentsV2.BeeEditor.rowPlaceHolder": "Enter Row name",
+  "creatives.componentsV2.BeeEditor.save": "Save",
+  "creatives.componentsV2.BeeEditor.select": "Select",
+  "creatives.componentsV2.BeeEditor.selectCategoyPlaceholder": "Select category",
+  "creatives.componentsV2.BeeEditor.socialPlatform": "Social platform",
+  "creatives.componentsV2.BeeEditor.tagPlaceHolder": "Enter tags",
+  "creatives.componentsV2.BeeEditor.tags": "Tags (optional)",
   "creatives.componentsV2.BreadCrumbs.header": "This is the BreadCrumbs component !",
   "creatives.componentsV2.CallTaskPreview.header": "This is the CallTaskPreview component !",
   "creatives.componentsV2.CapTagList.Cancel": "Cancel",
@@ -1452,8 +1467,10 @@
   "creatives.containersV2.Templates.creativesTemplatesSave": "Done",
   "creatives.containersV2.Templates.deleteButton": "Delete",
   "creatives.containersV2.Templates.deletedSuccssfully": "Template deleted successfully",
+  "creatives.containersV2.Templates.deletingTemplate": "Deleting template...",
   "creatives.containersV2.Templates.deletionFailed": "Template deletion failed",
   "creatives.containersV2.Templates.duplicateButton": "Duplicate",
+  "creatives.containersV2.Templates.duplicatingTemplate": "Duplicating template...",
   "creatives.containersV2.Templates.ebillHeader": "Ebill",
   "creatives.containersV2.Templates.ebillPreview": "Ebill preview",
   "creatives.containersV2.Templates.editButton": "Edit",

package/translations/zh.json

@@ -86,6 +86,21 @@
   "creatives.components.WechatRichmediaTemplatePreview.header": "",
   "creatives.components.WechatRichmediaTemplatePreview.reply": "",
   "creatives.components.WechatRichmediaTemplatePreview.select": "",
+  "creatives.componentsV2.BeeEditor.addLabel": "",
+  "creatives.componentsV2.BeeEditor.cancel": "",
+  "creatives.componentsV2.BeeEditor.cta": "",
+  "creatives.componentsV2.BeeEditor.customRows": "",
+  "creatives.componentsV2.BeeEditor.footer": "",
+  "creatives.componentsV2.BeeEditor.header": "",
+  "creatives.componentsV2.BeeEditor.others": "",
+  "creatives.componentsV2.BeeEditor.rowName": "",
+  "creatives.componentsV2.BeeEditor.rowPlaceHolder": "",
+  "creatives.componentsV2.BeeEditor.save": "",
+  "creatives.componentsV2.BeeEditor.select": "",
+  "creatives.componentsV2.BeeEditor.selectCategoyPlaceholder": "",
+  "creatives.componentsV2.BeeEditor.socialPlatform": "",
+  "creatives.componentsV2.BeeEditor.tagPlaceHolder": "",
+  "creatives.componentsV2.BeeEditor.tags": "",
   "creatives.componentsV2.BreadCrumbs.header": "",
   "creatives.componentsV2.CallTaskPreview.header": "",
   "creatives.componentsV2.CapTagList.Cancel": "",
@@ -1452,8 +1467,10 @@
   "creatives.containersV2.Templates.creativesTemplatesSave": "",
   "creatives.containersV2.Templates.deleteButton": "",
   "creatives.containersV2.Templates.deletedSuccssfully": "",
+  "creatives.containersV2.Templates.deletingTemplate": "",
   "creatives.containersV2.Templates.deletionFailed": "",
   "creatives.containersV2.Templates.duplicateButton": "",
+  "creatives.containersV2.Templates.duplicatingTemplate": "",
   "creatives.containersV2.Templates.ebillHeader": "",
   "creatives.containersV2.Templates.ebillPreview": "",
   "creatives.containersV2.Templates.editButton": "",

package/v2Components/EmailPreview/_emailPreview.scss

@@ -1,9 +1,6 @@
 .modal-emailPreivew-wrapper {
   width: 100vw;
   height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
   background: rgba(0,0,0,0.56);
   z-index: 10002;
 

package/v2Components/FormBuilder/index.js

@@ -21,7 +21,7 @@ import SlideBox from '../SlideBox';
 import CardGrid from '../CardGrid';
 import CKEditor from "../Ckeditor/";
 import EDMEditor from "../Edmeditor";
-import BeeEditor from '../BeeEditor';
+import BeeEditor from '../../v2Containers/BeeEditor';
 import CustomPopOver from '../CustomPopOver';
 import messages from './messages';
 import './_formBuilder.scss';
@@ -3178,7 +3178,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 langIndex = parseInt(val.id.replace('template-content', ''), 10) - 1;
               }
               console.log('CKEditor Data 2', this.state.formData, this.state.formData[`${this.state.currentTab - 1}`], val, this.state.currentTab, this.state.currentLangTab, langIndex);
-              const currentLang = (!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage;
+              const currentLang = ((!_.isEmpty(this.state.formData) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`]) && !_.isEmpty(this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages) && this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex]) ? this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages[langIndex] : this.props.baseLanguage) || 'en';
               const content = (!_.isEmpty(this.state.formData) && this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] ? this.state.formData[`${this.state.currentTab - 1}`][currentLang]['template-content'] : '');
               console.log('ckeditor current lang', currentLang, content);
               if (this.state.formData[`${this.state.currentTab - 1}`][currentLang].is_drag_drop) {
@@ -3330,9 +3330,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       if (columns.length) {
         fields.push(row);
       }
-
     });
-    if(!this.props.isEmailLoading && this.props.schema.channel.toUpperCase() === 'EMAIL' && !fields.length) {
+    if (!this.props.isEmailLoading && this.props.schema.channel.toUpperCase() === 'EMAIL' && !fields.length) {
       return (
         <div style={{ textAlign: 'center' }}>
           <CapSpin spinning />

package/v2Containers/BeeEditor/actions.js

@@ -0,0 +1,12 @@
+import {
+    CREATE_CUSTOM_ROW_REQUEST,
+} from './constants';
+
+export function createCustomRow(data, callback) {
+  return {
+    type: CREATE_CUSTOM_ROW_REQUEST,
+    data,
+    callback,
+  };
+}
+

package/v2Containers/BeeEditor/constants.js

@@ -0,0 +1,5 @@
+const prefix = 'APP/V2CONTAINER/BEEEDITOR';
+export const CREATE_CUSTOM_ROW_REQUEST = `${prefix}/CREATE_CUSTOM_ROW_REQUEST`;
+export const CREATE_CUSTOM_ROW_SUCCESS = `${prefix}/CREATE_CUSTOM_ROW_SUCCESS`;
+export const CREATE_CUSTOM_ROW_FAILURE = `${prefix}/CREATE_CUSTOM_ROW_FAILURE`;
+

package/v2Containers/BeeEditor/index.js

@@ -0,0 +1,329 @@
+/**
+*
+* Beeeditor
+*
+*/
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import { connect } from 'react-redux';
+import TagList from '../TagList';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import makeSelectBEE from './selectors';
+import { UserIsAuthenticated } from '../../utils/authWrapper';
+import config from '../../config/app';
+import { loadItem } from 'services/localStorageApi';
+import './index.scss';
+import {
+  CapModal,
+  CapButton,
+  CapInput,
+  CapSelect,
+  CapSpin,
+  CapNotification,
+}
+from '@capillarytech/cap-ui-library';
+import messages from './messages';
+import * as beeActions from './actions';
+function BeeEditor(props) {
+  const {
+    uid,
+    beeJson,
+    tokenData,
+    id,
+    location = {},
+    moduleFilterEnabled,
+    label,
+    className,
+    userLocale,
+    selectedOfferDetails,
+    tags,
+    injectedTags,
+    saveBeeInstance,
+    saveBeeData,
+    intl,
+    onContextChange,
+    actions,
+    BEESelect,
+  } = props;
+  const { saveRowRequest } = BEESelect;
+  const {formatMessage} = intl;
+  const UNSUBSCRIBE = 'unsubscribe';
+  let beePluginInstance = null;
+  const categoryOptions = [{key: 'cta', value: 'cta', label: formatMessage(messages.cta)},
+  {key: 'footer', value: 'footer', label: formatMessage(messages.footer)},
+  {key: 'header', value: 'header', label: formatMessage(messages.header)},
+  {key: 'sp', value: 'sp', label: formatMessage(messages.socialPlatform)},
+  {key: 'others', value: 'others', label: formatMessage(messages.others)},
+  ];
+  const [visibleTaglist, setVisibleTaglist] = useState(false);
+  const [showRowMetaModal, setRowMetaModal] = useState(false);
+  const [selectedTag, setSelectedTag] = useState({});
+  const [rowMetaInfo, setRowMetaInfo] = useState({});
+  const [rowName, setRowName] = useState('');
+  const [rowCategory, setRowCategory] = useState('');
+  let API_ENDPOINT = config.development.api_endpoint;
+  if (process.env.NODE_ENV === 'production') {
+    API_ENDPOINT = `${window.location.origin}${config.production.api_endpoint}`;
+  }
+  const savedCallback = useRef();
+  const filteredTags = (tags || []).filter((obj) => obj.definition.value !== UNSUBSCRIBE);
+  let intervalTimer;
+
+  const DEFAULT_LOCALE = 'en';
+  const MAPPED_LOCALE = {
+    'en': 'en',
+    'zh-cn': 'zh',
+    'zh': 'zh',
+  };
+  const user = localStorage.getItem('user');
+  let locale = 'en';
+  if (user && JSON.parse(user).lang) {
+    locale = JSON.parse(user).lang;
+  }
+  const defaultFormattedUrl = locale !== DEFAULT_LOCALE && ['zh-cn', 'zh'].includes(locale)
+      ? `${API_ENDPOINT}/common/getBEECustomLangunage?langid=${MAPPED_LOCALE[locale]}`
+      : "";
+  useEffect(() => {
+    savedCallback.current = Object.keys(selectedTag).length > 0 ? selectedTag : rowMetaInfo;
+  }, [selectedTag, rowMetaInfo]);
+
+  const getExternalContentURLs = () => {
+    const externalContentURLs = categoryOptions.map((obj) => ({name: obj.label, value: `${API_ENDPOINT}/common/getCustomRows?category=${obj.value}&orgid=${loadItem('orgID')}`}));
+    return externalContentURLs;
+  };
+  useEffect(() => {
+    const beeConfig = {
+      uid,
+      container: 'bee-plugin-container',
+      translationsUrl: defaultFormattedUrl,
+      rowsConfiguration: {
+        emptyRows: true,
+        defaultRows: true,
+        externalContentURLs: getExternalContentURLs(),
+      },
+      contentDialog: {
+        specialLinks: {
+          label: UNSUBSCRIBE,
+          handler(resolve) {
+            resolve({
+              type: 'custom',
+              label: UNSUBSCRIBE,
+              link: `{{${UNSUBSCRIBE}}}`,
+            });
+          },
+        },
+        mergeTags: {
+          label: formatMessage(messages.addLabel),
+          handler: async (resolve, reject) => {
+            // this will open tag modal
+            await setVisibleTaglist(true);
+            // until tag modal will not open promise will not execute
+            // once tag modal is opened it will start 2 sec interval to wait use has selected any tag or cancel the tag selection
+            const promise = new Promise((resolveP) => {
+              intervalTimer = setInterval(() => {
+                // this will execute, if user cancel the tag selection
+                if ((savedCallback.current || {}).close === true) {
+                  reject();
+                  clearInterval(intervalTimer);
+                  return;
+                }
+                // this block is checking use has selected any tag or not
+                if (Object.keys(savedCallback.current || {}).length > 0) {
+                  resolveP(savedCallback.current);
+                  setSelectedTag({});
+                  clearInterval(intervalTimer);
+                }
+              }, 2000);
+            });
+            // once prmise will resolve , pass the resolve data to handler to show tags in bee edior
+            const result = await promise;
+            resolve(result);
+          },
+        },
+        saveRow: {
+          handler: async (resolve, reject) => {
+            await setRowMetaModal(true);
+            const promise = new Promise((resolveP) => {
+              intervalTimer = setInterval(() => {
+                if ((savedCallback.current || {}).close === true) {
+                  reject();
+                  clearInterval(intervalTimer);
+                  setRowMetaInfo({});
+                  setRowName('');
+                  setRowCategory('');
+                  return;
+                }
+                if (Object.keys(savedCallback.current || {}).length > 0) {
+                  resolveP(savedCallback.current);
+                }
+              }, 2000);
+            });
+            const result = await promise;
+            resolve(result); // "done!"
+            setRowMetaInfo({});
+            setRowName('');
+            setRowCategory('');
+            clearInterval(intervalTimer);
+          },
+        },
+      },
+      onSave: (jsonFile, htmlFile) => {
+        saveBeeData(jsonFile, htmlFile);
+      },
+      onSaveRow: (rowJSON) => {
+        actions.createCustomRow(JSON.parse(rowJSON), callbackSaveRow);
+      },
+    };
+    window.BeePlugin.create(tokenData, beeConfig, (instance) => {
+      beePluginInstance = instance;
+      const parseJson = JSON.parse(beeJson);
+      beePluginInstance.start(parseJson);
+      saveBeeInstance(beePluginInstance);
+    });
+    return () => clearInterval(intervalTimer);
+  }, []);
+  const callbackSaveRow = (status, errorMsg) => {
+    if (status === 'success') {
+      CapNotification.success({message: formatMessage(messages.rowCreationSuccessMgs), key: 'create-custom-row-success'});
+    } else {
+      CapNotification.error({message: errorMsg || formatMessage(messages.rowCreationFailureMgs), key: 'create-custom-row-failure'});
+    }
+  };
+
+  const onTagSelect = (result) => {
+    const msg = {
+      name: result,
+      value: `{{${result}}}`,
+    };
+    setSelectedTag(msg);
+    setVisibleTaglist(false);
+  };
+
+  const onCancelTagList = () => {
+    setVisibleTaglist(false);
+    setSelectedTag({close: true});
+  };
+
+  const onCustomRowCancel = () => {
+    setRowMetaModal(false);
+    setRowCategory('');
+    setRowName('');
+    setRowMetaInfo({close: true});
+  };
+
+  const onCustomRowSave = () => {
+    const rowInfo = {};
+    if (rowCategory !== '') {
+      rowInfo.category = rowCategory;
+    }
+    setRowMetaInfo({
+      name: rowName,
+      ...rowInfo,
+    });
+    setRowMetaModal(false);
+    setRowCategory('');
+    setRowName('');
+  };
+
+  const isDisableSave = () => rowName === '' || rowCategory === '';
+
+  const onRowChange = useCallback((e) => {
+    setRowName(e.target.value);
+  });
+  const onChangeCategoy = (e) => {
+    setRowCategory(e);
+  };
+  const contentSection = <>
+    <CapInput
+      label={<FormattedMessage {...messages.rowName} />}
+      placeholder={formatMessage(messages.rowPlaceHolder)}
+      onChange={onRowChange}
+      value={rowName}
+      maxLength={50}
+      style={{ width: 324, paddingBottom: 21 }}
+    />
+    <CapSelect
+      label="Category"
+      style={{ width: 324, paddingBottom: 24}}
+      options={categoryOptions}
+      value={rowCategory || undefined}
+      placeholder={<FormattedMessage {...messages.selectCategoyPlaceholder} />}
+      onChange={onChangeCategoy}
+    />
+
+  </>;
+  return (
+    <CapSpin spinning={saveRowRequest || false}>
+      <div id="bee-plugin-container" style={{ height: '500px'}}>
+      </div>
+      <TagList
+        moduleFilterEnabled={moduleFilterEnabled}
+        label={label}
+        onTagSelect={onTagSelect}
+        location={location}
+        tags={filteredTags}
+        injectedTags={injectedTags}
+        className={className}
+        id={id}
+        userLocale={userLocale}
+        selectedOfferDetails={selectedOfferDetails}
+        visibleTaglist={visibleTaglist}
+        hidePopover
+        modalProps={{
+          onCancel: onCancelTagList,
+          style: { left: 135, top: 250 },
+          className: "bee-editor-tag-list",
+        }}
+        onContextChange={onContextChange}
+      />
+      <CapModal
+        className="custom-row-modal"
+        visible={showRowMetaModal}
+        onCancel={onCustomRowCancel}
+        title={formatMessage(messages.customRows)}
+        style={{width: 372, height: 296, left: 135, top: 300}}
+        footer={[
+          <CapButton key="submit" type="primary" id="delete-version" onClick={onCustomRowSave} disabled={isDisableSave()}>
+            {formatMessage(messages.done)}
+          </CapButton>,
+        ]}
+          >
+        {contentSection}
+      </CapModal>
+    </CapSpin>
+  );
+}
+
+BeeEditor.propTypes = {
+  beeJson: PropTypes.object.isRequired,
+  tokenData: PropTypes.object.isRequired,
+  uid: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+  actions: PropTypes.object.isRequired,
+  BEESelect: PropTypes.object,
+  id: PropTypes.string,
+  location: PropTypes.object,
+  moduleFilterEnabled: PropTypes.bool,
+  label: PropTypes.string,
+  className: PropTypes.string,
+  tags: PropTypes.array,
+  saveBeeData: PropTypes.func,
+  saveBeeInstance: PropTypes.func,
+  injectedTags: PropTypes.object,
+  onContextChange: PropTypes.func,
+  userLocale: PropTypes.string,
+};
+
+const mapStateToProps = () => createStructuredSelector({
+  BEESelect: makeSelectBEE(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(beeActions, dispatch),
+  };
+}
+
+export default UserIsAuthenticated(connect(mapStateToProps, mapDispatchToProps)(injectIntl(BeeEditor)));

package/v2Containers/BeeEditor/index.scss

@@ -0,0 +1,6 @@
+.custom-row-modal {
+    .ant-modal-footer {
+        text-align: left;
+        padding-left: 24px;
+    }
+}

package/v2Containers/BeeEditor/messages.js

@@ -0,0 +1,67 @@
+/*
+ * BeeEditor Messages
+ *
+ * This contains all the text for the BeeEditor component.
+ */
+import { defineMessages } from 'react-intl';
+
+const prefix = 'creatives.containersV2.BeeEditor';
+
+export default defineMessages({
+  done: {
+    id: `${prefix}.done`,
+    defaultMessage: 'Done',
+  },
+  rowPlaceHolder: {
+    id: `${prefix}.rowPlaceHolder`,
+    defaultMessage: 'Enter Row name',
+  },
+  rowName: {
+    id: `${prefix}.rowName`,
+    defaultMessage: 'Row name',
+  },
+  select: {
+    id: `${prefix}.select`,
+    defaultMessage: 'Select',
+  },
+  customRows: {
+    id: `${prefix}.customRows`,
+    defaultMessage: 'Create new row',
+  },
+  selectCategoyPlaceholder: {
+    id: `${prefix}.selectCategoyPlaceholder`,
+    defaultMessage: 'Select category',
+  },
+  addLabel: {
+    id: `${prefix}.addLabel`,
+    defaultMessage: 'Add label',
+  },
+  cta: {
+    id: `${prefix}.cta`,
+    defaultMessage: 'CTA',
+  },
+  header: {
+    id: `${prefix}.header`,
+    defaultMessage: 'Header',
+  },
+  footer: {
+    id: `${prefix}.footer`,
+    defaultMessage: 'Footer',
+  },
+  others: {
+    id: `${prefix}.others`,
+    defaultMessage: 'Others',
+  },
+  socialPlatform: {
+    id: `${prefix}.socialPlatform`,
+    defaultMessage: 'Social platform',
+  },
+  rowCreationSuccessMgs: {
+    id: `${prefix}.rowCreationSuccessMgs`,
+    defaultMessage: 'Row created successfully',
+  },
+  rowCreationFailureMgs: {
+    id: `${prefix}.rowCreationFailureMgs`,
+    defaultMessage: 'Error in row creation',
+  },
+});

package/v2Containers/BeeEditor/reducer.js

@@ -0,0 +1,25 @@
+import { fromJS } from 'immutable';
+import {
+  CREATE_CUSTOM_ROW_REQUEST,
+  CREATE_CUSTOM_ROW_SUCCESS,
+  CREATE_CUSTOM_ROW_FAILURE,
+} from './constants';
+
+const initialState = fromJS({
+  saveRowRequest: false,
+});
+
+function beeEditorReducer(state = initialState, action) {
+  switch (action.type) {
+    case CREATE_CUSTOM_ROW_REQUEST:
+      return state.set('saveRowRequest', true);
+    case CREATE_CUSTOM_ROW_SUCCESS:
+      return state.set('saveRowRequest', false);
+    case CREATE_CUSTOM_ROW_FAILURE:
+      return state.set('saveRowRequest', false);
+    default:
+      return state;
+  }
+}
+
+export default beeEditorReducer;

package/v2Containers/BeeEditor/sagas.js

@@ -0,0 +1,33 @@
+import { take, cancel, call, put, takeLatest } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+import * as types from './constants';
+
+export function* createCustomRow({data, callback}) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createCustomRow, data);
+    const code = result.status ? result.status.code : '';
+    if (!result.success || code === 500) {
+      errorMsg = result.message;
+      yield put({ type: types.CREATE_CUSTOM_ROW_FAILURE, errorMsg });
+      callback('failed', code !== 500 ? errorMsg : '');
+    } else {
+      yield put({ type: types.CREATE_CUSTOM_ROW_SUCCESS, data: result.response, statusCode: code, errorMsg });
+      callback('success');
+    }
+  } catch (error) {
+    yield put({ type: types.CREATE_CUSTOM_ROW_FAILURE, error, errorMsg });
+  }
+}
+
+function* watchCreateCustomRow() {
+  const watcher = yield takeLatest(types.CREATE_CUSTOM_ROW_REQUEST, createCustomRow);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
+// All sagas to be loaded
+export default [
+  watchCreateCustomRow,
+];

package/v2Containers/BeeEditor/selectors.js

@@ -0,0 +1,17 @@
+import { createSelector } from 'reselect';
+import { fromJS } from 'immutable';
+/**
+ * Direct selector to the email state domain
+ */
+const selectBEEDomain = () => (state) => state.get('beeEditor');
+
+/**
+ * Default selector used by beeEditor
+ */
+
+const makeSelectBEE = () => createSelector(
+    selectBEEDomain(),
+  (substate = fromJS({})) => substate.toJS()
+);
+
+export default makeSelectBEE;

package/v2Containers/BeeEditor/tests/index.test.js

@@ -0,0 +1,10 @@
+// import React from 'react';
+// import { shallow } from 'enzyme';
+
+// import Beeeditor from '../index';
+
+describe('<Beeeditor />', () => {
+  it('Expect to have unit tests specified', () => {
+    expect(true).toEqual(false);
+  });
+});

package/v2Containers/CreativesContainer/index.js

@@ -224,12 +224,10 @@ class Creatives extends React.Component {
           const { messages = '[]' } = additionalProperties;
           const messagesDefinition = JSON.parse(messages);
           let lineContent = JSON.parse(messageBody || '{}').messages || [{}];
-          lineContent = lineContent.map((content, index) => {
-            return {
+          lineContent = lineContent.map((content, index) => ({
               ...content,
               ...(messagesDefinition[index] || {})
-            };
-          })
+            }));
           creativesTemplateData = {
             type: constants.LINE,
             isDefault,
@@ -318,10 +316,10 @@ class Creatives extends React.Component {
         if (template.value) {
           const { versions } = template.value;
           const { Templates, templateData: templateDataProps } = this.props;
-          const { accountDetails: selectedAccountDetails } = templateDataProps || {};
+          const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
           const selectedLineAccount = Templates && Templates.selectedLineAccount;
-          const accountDetails = !!selectedLineAccount ? JSON.stringify(selectedLineAccount) : (selectedAccountDetails || '');
-          const accountId = !!selectedLineAccount ? selectedLineAccount.id : '';
+          const accountDetails = selectedAccountDetails || (selectedLineAccount ? JSON.stringify(selectedLineAccount) : '');
+          const accountId = selectedAccountId || (selectedLineAccount ? selectedLineAccount.id : '');
           templateData = {
             channel,
             accountId,

package/v2Containers/Email/index.js

@@ -346,7 +346,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         const schema = _.cloneDeep(this.state.schema);
         const langIndex = formData[this.state.currentTab - 1].selectedLanguages.indexOf(langId);
 
-        const temp = schema.containers[this.state.currentTab - 1];
+        const temp = (schema.containers || {})[this.state.currentTab - 1];
 
         const { currentTab } = this.state;
         if (nextProps.Email.CmsSettings.isDragDrop) {
@@ -696,10 +696,10 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   getValidationData = () => {
     const that = this;
     let id = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate._id', '');
+    const formData = _.cloneDeep(this.state.formData);
     if (!id) {
       id = _.get(formData, `base[${formData.base.activeTab}].id`, '');
     }
-    const formData = _.cloneDeep(this.state.formData);
     if (!this.props.Email.fetchingCmsData) {
       // checking wheather getCmsData in progress or not cuz getValidationData gets called multiple times from handleEdmSave
       _.forEach(formData, (val, index) => {
@@ -1851,7 +1851,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       action: "showNext",
       value: true,
     };
-
   }
 
   moveToTemplates = () => {
@@ -2745,7 +2744,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           isLoading={this.props.Email.fetchingAllAssets}
           size="size-xl"
         />
-        {/* <div id="bee-plugin-container" style={{ height: '600px'}}></div> */}
         {this.state.showConfirmationModal && this.renderConfirmationModal()}
       </div>
     );

package/v2Containers/Templates/index.js

@@ -248,8 +248,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({ channel }, () => {
         if ((this.state.channel.toLowerCase() === 'line' || this.state.channel.toLowerCase() === 'sms' || this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill') || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
           if (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount)) {
-            params.wecrmId = nextProps.Templates.selectedWeChatAccount.configs.wecrm_app_id;
-            params.wecrmToken = nextProps.Templates.selectedWeChatAccount.configs.wecrm_token;
+            params.wecrmId = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_app_id;
+            params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
             params.originalId = nextProps.Templates.selectedWeChatAccount.sourceAccountIdentifier;
           }
           if (this.state.channel.toLowerCase() === "mobilepush" && !isEmpty(nextProps.Templates.selectedWeChatAccount)) {
@@ -260,8 +260,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       });
     }
     if ((this.state.channel || '').toLowerCase() === 'wechat' && nextProps.Templates.selectedWeChatAccount) {
-      params.wecrmId = nextProps.Templates.selectedWeChatAccount.configs.wecrm_app_id;
-      params.wecrmToken = nextProps.Templates.selectedWeChatAccount.configs.wecrm_token;
+      params.wecrmId = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_app_id;
+      params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
       params.originalId = nextProps.Templates.selectedWeChatAccount.sourceAccountIdentifier;
     }
     if ((this.state.channel || '').toLowerCase() === "mobilepush" && nextProps.Templates.selectedWeChatAccount) {
@@ -1855,7 +1855,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.state.channel.toLowerCase() === 'ebill') {
       htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base['ebill-editor'];
     } else if (this.state.channel.toLowerCase() === 'email') {
-      htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && this.state.previewTemplate.versions.base[this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en']['template-content'];
+      htmlPreviewContent = this.state.previewTemplate && this.state.previewTemplate.versions && this.state.previewTemplate.versions.base && (this.state.previewTemplate.versions.base[this.props.Global.currentOrgDetails.basic_details.base_language ? this.props.Global.currentOrgDetails.basic_details.base_language : 'en'] || {})['template-content'];
     }