@capillarytech/creatives-library 6.8.8 → 6.9.0

package/v2Components/CapTagList/index.js

@@ -156,50 +156,72 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   }
 
   render() {
-    const tg = this.props.tags;
+    const { hidePopover = false, tags = {}, intl = {}, moduleFilterEnabled, label, modalProps } = this.props;
+    const tg = tags;
+    const {formatMessage} = intl;
+    const { tagValue, expandedKeys, autoExpandParent, searchValue, visible } = this.state;
     const options = [
       {
         value: "All",
-        label: this.props.intl.formatMessage(messages.all),
+        label: formatMessage(messages.all),
         key: 'all',
       },
       {
         value: "Outbound",
-        label: this.props.intl.formatMessage(messages.outbound),
+        label: formatMessage(messages.outbound),
         key: 'outbound',
       },
       {
         value: "Loyalty",
-        label: this.props.intl.formatMessage(messages.loyalty),
+        label: formatMessage(messages.loyalty),
         key: 'loyalty',
       },
     ];
+    const contentSection = (<div>
+      <CapSpin tip={formatMessage(messages.gettingTags)} spinning={this.props.loading}>
+        <Search
+          style={{ marginBottom: 8, width: '250px'}}
+          placeholder={formatMessage(messages.search)}
+          onChange={this.onChange} />
+        {moduleFilterEnabled ?
+          <CapSelect
+            getPopupContainer={(triggerNode) => triggerNode.parentNode}
+            style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}}
+            onChange={this.props.onContextChange}
+            defaultValue={formatMessage(messages.all)}
+            options={options}>
+          </CapSelect> : ''}
+        <CapTree
+          styling={{height: '350px', overflow: 'auto'}}
+          onSelect={this.handleOnSelect}
+          selectedKeys={tagValue}
+          expandedKeys={expandedKeys}
+          autoExpandParent={autoExpandParent}
+          onExpand={this.onExpand}
+      >
+          {this.renderTags(tg, searchValue)}
+        </CapTree>
+      </CapSpin>
+    </div>);
     return (
-      <div>
+      <>
+        {hidePopover ? <CapModal
+          visible={this.props.visibleTaglist}
+          footer={[]}
+          {...modalProps}
+          >
+          {contentSection}
+        </CapModal> :
         <CapPopover
-          visible={this.state.visible}
+          visible={visible}
           onVisibleChange={this.togglePopoverVisibility}
-          content={<div>
-            <CapSpin tip={this.props.intl.formatMessage(messages.gettingTags)} spinning={this.props.loading}>
-              <Search style={{ marginBottom: 8, width: '250px'}} placeholder={this.props.intl.formatMessage(messages.search)} onChange={this.onChange} />
-              {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue={this.props.intl.formatMessage(messages.all)} options={options}>
-              </CapSelect> : ''}
-              <CapTree
-                styling={{height: '350px', overflow: 'auto'}}
-                onSelect={this.handleOnSelect}
-                selectedKeys={this.state.tagValue}
-                expandedKeys={this.state.expandedKeys}
-                autoExpandParent={this.state.autoExpandParent}
-                onExpand={this.onExpand}
-              >
-                {this.renderTags(tg, this.state.searchValue)}
-              </CapTree>
-            </CapSpin>
-          </div>}
+          content={contentSection}
           trigger="click"
-          placement="bottomRight">
-          <CapButton isAddBtn type="flat">{this.props.label !== '' ? this.props.label : ''}</CapButton>
+          placement="topLeft"
+          >
+          <CapButton isAddBtn type="flat">{label || ''}</CapButton>
         </CapPopover>
+        }
         <CapModal
           visible={this.state.showModal}
           title={this.props.intl.formatMessage(messages["Dynamic Days before Expiry"])}
@@ -215,7 +237,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           <p>{this.props.intl.formatMessage(messages.numberOfDaysBeforeExpiry)}</p>
           <CapInput onChange={this.handleDynamicDateChange} value={this.state.dynamicDateValue} size="default"></CapInput>
         </CapModal>
-      </div>
+      </>
     );
   }
 }
@@ -228,6 +250,13 @@ CapTagList.propTypes = {
   loading: PropTypes.bool,
   moduleFilterEnabled: PropTypes.bool,
   intl: intlShape.isRequired,
+  visibleTaglist: PropTypes.bool,
+  hidePopover: PropTypes.bool,
+  modalProps: PropTypes.any,
+};
+
+CapTagList.defaultValue = {
+  hidePopover: false,
 };
 
 export default injectIntl(CapTagList);

package/v2Components/CmsTemplatesComponent/index.js

@@ -7,23 +7,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 // import styled from 'styled-components';
-import {CapButton, CapCustomCard} from '@capillarytech/cap-ui-library';
+import {CapButton, CapCustomCard, CapSpin} from '@capillarytech/cap-ui-library';
 import { FormattedMessage } from 'react-intl';
 import messages from './messages';
 const {CapCustomCardList} = CapCustomCard;
 function CmsTemplatesComponent(props) {
-  const cardDataList = props.cmsTemplates.map((template) => (
+  const cardDataList = (props.cmsTemplates || []).map((template) => (
     {
       key: template.name,
       title: template.name,
       url: template.versions.base.preview_http_url,
       hoverOption: <CapButton onClick={() => props.handleEdmDefaultTemplateSelection(template._id)}><FormattedMessage {...messages.select}/></CapButton>,
     }));
-  return (<div>
+  return (<CapSpin spinning={props.cmsTemplatesLoader}>
     <div className="pagination-container">
       <CapCustomCardList cardList={cardDataList} type="Email" />
     </div>
-  </div>);
+  </CapSpin>);
 }
 
 CmsTemplatesComponent.propTypes = {

package/v2Components/Edmeditor/index.js

@@ -44,7 +44,7 @@ class Edmeditor extends React.Component { // eslint-disable-line react/prefer-st
     console.log('current language edm editor loading', this.props.id, this.props.edmSrc);
     return (
       this.props.edmSrc ?
-        (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%" style={{"height": "calc(100vh - 180px)"}}></iframe>)
+        (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%" style={{height: "calc(100vh - 180px)"}}></iframe>)
       : 'aaasass'
     );
   }

package/v2Components/FormBuilder/index.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { Tabs, Table, Modal} from 'antd';
-import { CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
+import { CapSpin, CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
 import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
@@ -21,6 +21,7 @@ import SlideBox from '../SlideBox';
 import CardGrid from '../CardGrid';
 import CKEditor from "../Ckeditor/";
 import EDMEditor from "../Edmeditor";
+import BeeEditor from '../BeeEditor';
 import CustomPopOver from '../CustomPopOver';
 import messages from './messages';
 import './_formBuilder.scss';
@@ -275,7 +276,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   onEdit() {
 
   }
-
   getModal = () => {
     let modal;
     if (this.state.modal) {
@@ -925,7 +925,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           for (var i = 0; i < data.selectedLanguages.length; i+= 1) {
             const currentLang = data.selectedLanguages[i];
             const content = data[currentLang]['template-content'];
-            const tagValidationResponse = this.validateTags(content, tags, injectedTags);
+            if (!content) {
+              return false;
+            }
+            const tagValidationResponse = this.validateTags(content, tags, injectedTags);;
             if (errorData[index][currentLang] === undefined) {
               errorData[index][currentLang] = {};
             }
@@ -2953,24 +2956,28 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (channel === 'EMAIL') {
               moduleFilterEnabled = this.props.isFullMode;
             }
-            columns.push(
-              <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
-                <TagList
-                  key={`input-${val.id}`}
-                  moduleFilterEnabled={moduleFilterEnabled}
-                  label={val.label ? val.label : ''}
-                  onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
-                  onContextChange={this.props.onContextChange}
-                  location={this.props.location}
-                  tags={this.props.tags ? this.props.tags : []}
-                  injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
-                  className={val.className ? val.className : ''}
-                  id={val.id}
-                  userLocale={this.props.userLocale}
-                  selectedOfferDetails={this.props.selectedOfferDetails}
-                />
-              </CapColumn>
-            );
+            const langIndex = 0;
+            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;
+            if (!(_.get(this.state, `formData[${this.state.currentTab - 1}][${currentLang}].is_drag_drop`, false)) || channel !== 'EMAIL') {
+              columns.push(
+                <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
+                  <TagList
+                    key={`input-${val.id}`}
+                    moduleFilterEnabled={moduleFilterEnabled}
+                    label={val.label ? val.label : ''}
+                    onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
+                    onContextChange={this.props.onContextChange}
+                    location={this.props.location}
+                    tags={this.props.tags ? this.props.tags : []}
+                    injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                    className={val.className ? val.className : ''}
+                    id={val.id}
+                    userLocale={this.props.userLocale}
+                    selectedOfferDetails={this.props.selectedOfferDetails}
+                  />
+                </CapColumn>
+              );
+            }
             break;
           case "button":
             if (styling === 'semantic' && val.metaType === 'submit-button') {
@@ -3191,38 +3198,92 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
             break;
-          case "edmeditor": {
-            // if (!this.state.formData[`${this.state.currentTab - 1}`]) {
-            //   return true;
-            // }
+          // once bee tested completely will remove this code
+          // case "edmeditor": {
+          //   // if (!this.state.formData[`${this.state.currentTab - 1}`]) {
+          //   //   return true;
+          //   // }
+          //   let langTab = 1;
+          //   if (val.id.match(/edmeditor/g)) {
+          //     if (val.id.length > 9 && val.id.charAt(9)) {
+          //       langTab = val.id.charAt(9);
+          //     }
+          //   }
+          //   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 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`];
+
+
+          //   if (!edmSrc) {
+          //     return false;
+          //   }
+
+
+          //   columns.push(
+          //     <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
+          //       <EDMEditor
+          //         id={val.id}
+          //         getEditorInstanse={this.getEditorInstanse}
+          //         edmSrc={edmSrc}
+          //       />
+          //     </CapColumn>
+          //   );
+          // }
+          //   break;
+          case "BEEeditor": {
             let langTab = 1;
-            if (val.id.match(/edmeditor/g)) {
+            if (val.id.match(/BEEeditor/g)) {
               if (val.id.length > 9 && val.id.charAt(9)) {
                 langTab = val.id.charAt(9);
               }
             }
-            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 { currentTab, formData } = this.state;
+            const supportedLanguages = formData[currentTab - 1].selectedLanguages;
             const currentLang = 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`];
-
 
-            if (!edmSrc) {
+            let beeJson = '',
+              beeToken = '',
+              uuid = '';
+            const data = formData[`${currentTab - 1}`][currentLang];
+            if (data) {
+              beeJson = data[`BEEeditor${currentTab > 1 ? currentTab : ''}json`];
+              beeToken = data[`BEEeditor${currentTab > 1 ? currentTab : ''}token`];
+               uuid = this.props.uuid;
+            }
+            if (!beeJson || !beeToken) {
               return false;
             }
-
-
+            console.log('beeJson', beeJson);
+            let isModuleFilterEnabled = _.get(this.props.location, 'query.type', '') !== 'embedded';
+            const schemaChannel = _.get(this.props.schema, 'channel', "");
+            if (schemaChannel === 'EMAIL') {
+              isModuleFilterEnabled = this.props.isFullMode;
+            }
             columns.push(
               <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width}>
-                <EDMEditor
+                <BeeEditor
+                  uid={uuid}
+                  tokenData={beeToken}
                   id={val.id}
-                  getEditorInstanse={this.getEditorInstanse}
-                  edmSrc={edmSrc}
+                  beeJson={beeJson}
+                  showTagsPopover={this.showTagsPopover}
+                  location={this.props.location}
+                  label={val.label || ''}
+                  className={val.className || ''}
+                  userLocale={this.props.userLocale}
+                  selectedOfferDetails={this.props.selectedOfferDetails}
+                  tags={this.props.tags || []}
+                  injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                  saveBeeInstance={this.props.saveBeeInstance}
+                  saveBeeData={this.props.saveBeeData}
+                  onContextChange={this.props.onContextChange}
+                  moduleFilterEnabled={isModuleFilterEnabled}
                 />
               </CapColumn>
             );
@@ -3263,7 +3324,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         </CapRow>
       );
-      fields.push(row);
+      if (columns.length) {
+        fields.push(row);
+      }
     });
 
     _.forEach(section.actionFields, (field) => {
@@ -3303,8 +3366,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         </CapRow>
       );
-      fields.push(row);
+      if (columns.length) {
+        fields.push(row);
+      }
+
     });
+    if(!this.props.isEmailLoading && !fields.length) {
+      return (
+        <div style={{ textAlign: 'center' }}>
+          <CapSpin spinning />
+        </div>
+      );
+    }
     return fields;
   }
 
@@ -3538,6 +3611,7 @@ FormBuilder.propTypes = {
   setDrawerVisibility: PropTypes.bool,
   capDrawerContent: PropTypes.array,
   isFullMode: PropTypes.bool,
+
 };
 
 export default injectIntl(FormBuilder);