@capillarytech/creatives-library 6.9.1 → 6.9.5

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 { CapSpin, CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon} from '@capillarytech/cap-ui-library';
+import { 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,7 +21,6 @@ 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';
@@ -276,6 +275,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   onEdit() {
 
   }
+
   getModal = () => {
     let modal;
     if (this.state.modal) {
@@ -925,10 +925,7 @@ 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'];
-            if (!content) {
-              return false;
-            }
-            const tagValidationResponse = this.validateTags(content, tags, injectedTags);;
+            const tagValidationResponse = this.validateTags(content, tags, injectedTags);
             if (errorData[index][currentLang] === undefined) {
               errorData[index][currentLang] = {};
             }
@@ -2956,28 +2953,24 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (channel === 'EMAIL') {
               moduleFilterEnabled = this.props.isFullMode;
             }
-            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>
-              );
-            }
+            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') {
@@ -3198,92 +3191,38 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             }
           }
             break;
-          // 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": {
+          case "edmeditor": {
+            // if (!this.state.formData[`${this.state.currentTab - 1}`]) {
+            //   return true;
+            // }
             let langTab = 1;
-            if (val.id.match(/BEEeditor/g)) {
+            if (val.id.match(/edmeditor/g)) {
               if (val.id.length > 9 && val.id.charAt(9)) {
                 langTab = val.id.charAt(9);
               }
             }
-            const { currentTab, formData } = this.state;
-            const supportedLanguages = formData[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 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`];
 
-            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) {
+
+            if (!edmSrc) {
               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}>
-                <BeeEditor
-                  uid={uuid}
-                  tokenData={beeToken}
+                <EDMEditor
                   id={val.id}
-                  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}
+                  getEditorInstanse={this.getEditorInstanse}
+                  edmSrc={edmSrc}
                 />
               </CapColumn>
             );
@@ -3324,9 +3263,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         </CapRow>
       );
-      if (columns.length) {
-        fields.push(row);
-      }
+      fields.push(row);
     });
 
     _.forEach(section.actionFields, (field) => {
@@ -3366,18 +3303,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
         </CapRow>
       );
-      if (columns.length) {
-        fields.push(row);
-      }
-
+      fields.push(row);
     });
-    if(!this.props.isEmailLoading && !fields.length) {
-      return (
-        <div style={{ textAlign: 'center' }}>
-          <CapSpin spinning />
-        </div>
-      );
-    }
     return fields;
   }
 
@@ -3611,7 +3538,6 @@ FormBuilder.propTypes = {
   setDrawerVisibility: PropTypes.bool,
   capDrawerContent: PropTypes.array,
   isFullMode: PropTypes.bool,
-
 };
 
 export default injectIntl(FormBuilder);

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -1,152 +1,152 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.shell-lock-screen-android .main-screen-preview .wechatMsgContainer{
-  position: absolute;
-  left: 53.5%;
-  top:28%;
-  background: white;
-  width: 19.5%;
-  text-align: left;
-  height: fit-content;
-  border-radius: 0.285rem;
-}
-
-.shell-lock-screen-android .lock-screen-preview{
-  .wechat-android-sender-id{
-    position: absolute;
-    top: 46%;
-    font-size: 10px;
-    left: 28%;
-  }
-  .wechat-android-title{
-    position: absolute;
-    top: 49%;
-    font-size: 10px;
-    left: 28%;
-    color: #5e6c84;
-  }
-  .wechat-android-action-buttons{
-    position: absolute;
-    left: 28%;
-    top: 53%;
-    font-size: 10px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-  .wechat-ios-sender-id{
-    position: absolute;
-    top: 44%;
-    font-size: 10px;
-    left: 28.5%;
-  }
-  .wechat-ios-title{
-    position: absolute;
-    top: 47%;
-    font-size: 10px;
-    left: 28.5%;
-    color: #5e6c84;
-  }
-  .wechat-ios-action-reply{
-    position: absolute;
-    left: 35%;
-    top: 59%;
-    font-size: 12px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-  .wechat-ios-action-cancel{
-    position: absolute;
-    left: 34.5%;
-    top: 66%;
-    font-size: 12px;
-    color: #3861ca;
-    font-weight: 500;
-  }
-}
-
-.wechatMsgContainer{
-    position: absolute;
-    left: 30%;
-    top: 20%;
-    background: white;
-    width: 40%;
-    text-align: left;
-    height: fit-content;
-    border-radius: $CAP_SPACE_04;
-    .richmedia-template {
-        .richmedia-image-container {
-          width: 100%;
-          height: 102px;
-          position: relative;
-          img {
-            border-top-left-radius: 4px;
-            border-top-right-radius: 4px;
-          }
-        }
-        .name-container-with-abstract {
-          padding: $CAP_SPACE_12;
-          height: 68px;
-        }
-        .name-container {
-          position: absolute;
-          bottom: 0px;
-          height: 44px;
-          padding-top: 16px;
-          padding-left: 12px;
-          color: $CAP_WHITE;
-          opacity: 0.7;
-          width: 100%;
-          background-image: linear-gradient(to top,black 0% ,transparent 100%);
-        }
-        .additional-richmedia-container {
-          display: flex;
-          justify-content: space-between;
-          margin: 8px;
-          padding-bottom: 8px;
-          img {
-            border-radius: 4px;
-          }
-        }
-        .additional-richmedia-container:not(:last-child) {
-            border-bottom: 1px solid #dfe2e7;
-          }
-        div {
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-        }
-      }
-}
-.wechatMsgContainerOutbound{
-    position: absolute;
-    left: 35%;
-    top: 20%;
-    background: white;
-    width: 30%;
-    text-align: left;
-}
-.wechatMsgContainerCardLayout {
-    position: absolute;
-    left: 20%;
-    top: 20%;
-    background: white;
-    width: 60%;
-    text-align: left;
-}
-.overflow-handle-preview {
-    overflow-y: auto;
-}
-.overflow-handle-preview-outbound {
-    height: 330px;
-    overflow-y: auto;
-}
-.preview-overflow-wrap-fields {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    overflow-wrap: break-word;
-    display: -webkit-box !important;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    text-align: left;
-    width: 200px;
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.shell-lock-screen-android .main-screen-preview .wechatMsgContainer{
+  position: absolute;
+  left: 53.5%;
+  top:28%;
+  background: white;
+  width: 19.5%;
+  text-align: left;
+  height: fit-content;
+  border-radius: 0.285rem;
+}
+
+.shell-lock-screen-android .lock-screen-preview{
+  .wechat-android-sender-id{
+    position: absolute;
+    top: 46%;
+    font-size: 10px;
+    left: 28%;
+  }
+  .wechat-android-title{
+    position: absolute;
+    top: 49%;
+    font-size: 10px;
+    left: 28%;
+    color: #5e6c84;
+  }
+  .wechat-android-action-buttons{
+    position: absolute;
+    left: 28%;
+    top: 53%;
+    font-size: 10px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+  .wechat-ios-sender-id{
+    position: absolute;
+    top: 44%;
+    font-size: 10px;
+    left: 28.5%;
+  }
+  .wechat-ios-title{
+    position: absolute;
+    top: 47%;
+    font-size: 10px;
+    left: 28.5%;
+    color: #5e6c84;
+  }
+  .wechat-ios-action-reply{
+    position: absolute;
+    left: 35%;
+    top: 59%;
+    font-size: 12px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+  .wechat-ios-action-cancel{
+    position: absolute;
+    left: 34.5%;
+    top: 66%;
+    font-size: 12px;
+    color: #3861ca;
+    font-weight: 500;
+  }
+}
+
+.wechatMsgContainer{
+    position: absolute;
+    left: 30%;
+    top: 20%;
+    background: white;
+    width: 40%;
+    text-align: left;
+    height: fit-content;
+    border-radius: $CAP_SPACE_04;
+    .richmedia-template {
+        .richmedia-image-container {
+          width: 100%;
+          height: 102px;
+          position: relative;
+          img {
+            border-top-left-radius: 4px;
+            border-top-right-radius: 4px;
+          }
+        }
+        .name-container-with-abstract {
+          padding: $CAP_SPACE_12;
+          height: 68px;
+        }
+        .name-container {
+          position: absolute;
+          bottom: 0px;
+          height: 44px;
+          padding-top: 16px;
+          padding-left: 12px;
+          color: $CAP_WHITE;
+          opacity: 0.7;
+          width: 100%;
+          background-image: linear-gradient(to top,black 0% ,transparent 100%);
+        }
+        .additional-richmedia-container {
+          display: flex;
+          justify-content: space-between;
+          margin: 8px;
+          padding-bottom: 8px;
+          img {
+            border-radius: 4px;
+          }
+        }
+        .additional-richmedia-container:not(:last-child) {
+            border-bottom: 1px solid #dfe2e7;
+          }
+        div {
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+      }
+}
+.wechatMsgContainerOutbound{
+    position: absolute;
+    left: 35%;
+    top: 20%;
+    background: white;
+    width: 30%;
+    text-align: left;
+}
+.wechatMsgContainerCardLayout {
+    position: absolute;
+    left: 20%;
+    top: 20%;
+    background: white;
+    width: 60%;
+    text-align: left;
+}
+.overflow-handle-preview {
+    overflow-y: auto;
+}
+.overflow-handle-preview-outbound {
+    height: 330px;
+    overflow-y: auto;
+}
+.preview-overflow-wrap-fields {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    display: -webkit-box !important;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-align: left;
+    width: 200px;
   }

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js

@@ -1,33 +1,33 @@
-/*
- * WechatRichmediaTemplatePreview Messages
- *
- * This contains all the text for the WechatRichmediaTemplatePreview component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  header: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.header',
-    defaultMessage: 'This is the WechatRichmediaTemplatePreview component !',
-  },
-  select: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.select',
-    defaultMessage: 'Select',
-  },
-  edit: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.edit',
-    defaultMessage: 'Edit',
-  },
-  MarkAsRead: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.MarkAsRead',
-    defaultMessage: 'Mark as read',
-  },
-  reply: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.reply',
-    defaultMessage: 'Reply',
-  },
-  cancel: {
-    id: 'creatives.components.WechatRichmediaTemplatePreview.cancel',
-    defaultMessage: 'Cancel',
-  },
-});
+/*
+ * WechatRichmediaTemplatePreview Messages
+ *
+ * This contains all the text for the WechatRichmediaTemplatePreview component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.header',
+    defaultMessage: 'This is the WechatRichmediaTemplatePreview component !',
+  },
+  select: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.select',
+    defaultMessage: 'Select',
+  },
+  edit: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.edit',
+    defaultMessage: 'Edit',
+  },
+  MarkAsRead: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.MarkAsRead',
+    defaultMessage: 'Mark as read',
+  },
+  reply: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.reply',
+    defaultMessage: 'Reply',
+  },
+  cancel: {
+    id: 'creatives.components.WechatRichmediaTemplatePreview.cancel',
+    defaultMessage: 'Cancel',
+  },
+});

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/tests/index.test.js

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

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -44,6 +44,7 @@
     }
     &.line-preview {
       margin-left: $CAP_SPACE_16;
+      width: 40%;
 
       .message-pop {
         width: 80%;