@capillarytech/creatives-library 6.9.0 → 6.9.2

package/containers/TagList/index.js

@@ -71,9 +71,10 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     //Form tags object with tag headers
     _.forEach(tagsList, (temp) => {
       const tag = temp.definition;
+      const userLocale = this.props.userLocale;
       if (!tag['tag-header']) {
         mainTags[tag.value] = {
-          name: tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
+          name: tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
           desc: tag.desc ? tag.desc : tag.label.en,
         };
       } else if (tag['tag-header'] && mainTags[tag.value]) {
@@ -82,7 +83,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
         console.log('Inside ', tag.label);
         mainTags[tag.value] = {
           'tag-header': true,
-          "name": tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
+          "name": tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
           "desc": tag.desc ? tag.desc : tag.label.en,
           "subtags": tag.subtags,
         };

package/package.json

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

package/v2Components/BeeEditor/index.js

@@ -5,7 +5,6 @@
 */
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import get from 'lodash/get';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import TagList from '../../v2Containers/TagList';
 import
@@ -17,6 +16,7 @@ import
 }
 from '@capillarytech/cap-ui-library';
 import messages from './messages';
+import './index.scss';
 
 function BeeEditor(props) {
   const {
@@ -72,7 +72,7 @@ function BeeEditor(props) {
             resolve({
               type: 'custom',
               label: UNSUBSCRIBE,
-              link: `<a href='{{${UNSUBSCRIBE}}}'>unsubscribe</a>`,
+              link: `{{${UNSUBSCRIBE}}}`,
             });
           },
         },
@@ -131,13 +131,13 @@ function BeeEditor(props) {
       onSave: (jsonFile, htmlFile) => {
         saveBeeData(jsonFile, htmlFile);
       },
+      // will use this function on save row feature
       onSaveRows: (jsonFile, htmlFile) => {
         console.log('bee-plugin-container onSaveRows', jsonFile, htmlFile);
       },
     };
     window.BeePlugin.create(tokenData, beeConfig, (instance) => {
       beePluginInstance = instance;
-      console.log('bee instance', beePluginInstance);
       const parseJson = JSON.parse(beeJson);
       beePluginInstance.start(parseJson);
       saveBeeInstance(beePluginInstance);
@@ -150,7 +150,6 @@ function BeeEditor(props) {
       name: result,
       value: `{{${result}}}`,
     };
-
     setSelectedTag(msg);
     setVisibleTaglist(false);
   };
@@ -166,7 +165,6 @@ function BeeEditor(props) {
   };
 
   const handleOk = () => {
-    console.log('handleOk');
     const rowInfo = {};
     if (rowTags !== '') {
       rowInfo.tags = rowTags;
@@ -179,14 +177,13 @@ function BeeEditor(props) {
       ...rowInfo,
     });
     setRowMetaModal(false);
-    // set rowMetaInfo
   };
   const isDisableSave = () => rowName === '';
 
   const onRowChange = useCallback((e) => {
     setRowName(e.target.value);
   });
-
+  // will use this function on save row feature
   const onChangeCategoy = (e) => {
     console.log('onChangeCategoy', e);
   };
@@ -226,7 +223,6 @@ function BeeEditor(props) {
   return (
     <>
       <div id="bee-plugin-container" style={{ height: '500px'}}>
-
       </div>
       <TagList
         moduleFilterEnabled={moduleFilterEnabled}
@@ -241,7 +237,11 @@ function BeeEditor(props) {
         selectedOfferDetails={selectedOfferDetails}
         visibleTaglist={visibleTaglist}
         hidePopover
-        modalProps={{onCancel: onCancelTagList, style: { left: 200, top: 250 }}}
+        modalProps={{
+          onCancel: onCancelTagList,
+          style: { left: 135, top: 250 },
+          className: "bee-editor-tag-list",
+        }}
         onContextChange={onContextChange}
       />
       <CapModal

package/v2Components/BeeEditor/index.scss

@@ -0,0 +1,11 @@
+.cap-modal-v2.bee-editor-tag-list {
+  .ant-modal-content {
+    .ant-modal-body {
+      padding-top: 20px;
+      padding-bottom: 10px;
+    }
+    .ant-modal-footer {
+      display: none;
+    }
+  }
+}

package/v2Components/EmailPreview/_emailPreview.scss

@@ -9,8 +9,8 @@
 
   #emailPreivew-container {
     position: relative;
-    left: 20vw;
-    width: 80vw;
+    left: 18vw;
+    width: 82vw;
     height: 100vh;
     background: rgba(255,255,255,1);
     // padding: 0 24px 0 24px;

package/v2Components/FormBuilder/index.js

@@ -3198,44 +3198,6 @@ 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": {
             let langTab = 1;
             if (val.id.match(/BEEeditor/g)) {
@@ -3254,7 +3216,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (data) {
               beeJson = data[`BEEeditor${currentTab > 1 ? currentTab : ''}json`];
               beeToken = data[`BEEeditor${currentTab > 1 ? currentTab : ''}token`];
-               uuid = this.props.uuid;
+              uuid = this.props.uuid;
             }
             if (!beeJson || !beeToken) {
               return false;

package/v2Containers/Email/index.js

@@ -182,21 +182,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (this.props.location.query.module === "library" && this.props.templateData) {
       this.props.templatesActions.resetTemplateData();
     }
-    // const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
     const isBEESupport = (this.props.location.query.isBEESupport !== "false") || false;
 
-    //----------------commented by sakshi------------------------
-    // if (!_.isEmpty(this.props.Templates.edmTemplate)) {
-    //    if (this.props.Templates.edmTemplate.versions.base.is_drag_drop) {
-      //   this.setState({isDragDrop: true});
-      // }
-    //   if (this.props.params.id) {
-    //     this.props.actions.getCmsSetting('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id, 'open', undefined, isEdmSupport);
-    //   } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
-    //     this.props.actions.getCmsSetting('edm', this.props.Templates.edmTemplate.versions.base.drag_drop_id, 'create', undefined, isEdmSupport);
-    //   }
-    // }
-    // --------till here commented by sakshi------------------------
     if (!_.isEmpty(this.props.Templates.BEETemplate) ) {
       if (this.props.Templates.BEETemplate.versions.base.is_drag_drop) {
         this.setState({isDragDrop: true});
@@ -366,7 +353,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           const beeJson = `BEEeditor${currentTab > 1 ? currentTab : ''}json`;
           const beeToken = `BEEeditor${currentTab > 1 ? currentTab : ''}token`;
           let beeJsonValue = _.get(nextProps, 'Templates.BEETemplate.versions.base.json-content', '');
-          const selectedId = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate._id', '')
+          const selectedId = _.get(this.props, 'Email.templateDetails._id', '') || _.get(this.props, 'Templates.BEETemplate._id', '');
           if (this.state.isEdit) {
             if (this.props.location.query.module === "library") {
               beeJsonValue = _.get(this.state, `formData[${currentTab - 1}][${langId}].json-content`, '');
@@ -709,8 +696,8 @@ 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', '');
-    if(!id){
-      id = _.get(formData,`base[${formData.base.activeTab}].id`,'')
+    if (!id) {
+      id = _.get(formData, `base[${formData.base.activeTab}].id`, '');
     }
     const formData = _.cloneDeep(this.state.formData);
     if (!this.props.Email.fetchingCmsData) {
@@ -1024,18 +1011,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         //gets exicuted when ck editor is used
         this.startValidation(true);
       }
-      this.setState({targetSaveCount: saveCount, mode: "save", saveCount: 0, cmsDataCount: 0}, () => {
-        const data = this.state.formData[this.state.currentTab - 1];
-        // will remove once bee gets tested end to end
-        // _.forEach(data.selectedLanguages, (language, langIndex) => {
-          // if (data[language].is_drag_drop) {
-          //   const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-          //   win.postMessage("saveProject", '*');
-          // }
-          // if (data[language].is_drag_drop) {
-          // }
-        // });
-      });
+      this.setState({targetSaveCount: saveCount, mode: "save", saveCount: 0, cmsDataCount: 0});
     });
   }
 
@@ -1313,8 +1289,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         tmpData.lang_id = content.lang_id;
         tmpData.iso_code = content.iso_code;
         tmpData.language = content.language;
-        if (content.is_drag_drop) {
-          // tmpData.drag_drop_id = (content.drag_drop_id ? content.drag_drop_id : "");
+        if (content.id) {
           tmpData.id = content.id;
         }
 
@@ -1573,16 +1548,8 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   toggleEmailPreview = () => {
     const isDragDrop = this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].is_drag_drop;
     if (isDragDrop && !this.state.showEmailPreview) {
-        // will remove once bee gets tested end to end
-      // const activeLangTab = this.state.formData[`${this.state.currentTab - 1}`].activeTab;
-      // const langIndex = this.state.formData[`${this.state.currentTab - 1}`].selectedLanguages.indexOf(activeLangTab);
-      // const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-      // win && win.postMessage("saveProject", '*');
       this.handleEdmSave();
       this.setState({mode: "preview", gettingPreviewData: true});
-      // this.setState({gettingPreviewData: true}, () => {
-      //   this.props.actions.getCmsData('edm', this.state.formData[`${this.state.currentTab - 1}`][this.state.formData[`${this.state.currentTab - 1}`].activeTab].drag_drop_id);
-      // });
     } else if (this.state.showEmailPreview) {
       const formData = _.cloneDeep(this.state.formData);
       formData[`${this.state.currentTab - 1}`][formData[`${this.state.currentTab - 1}`].activeTab]['template-content'] = "";
@@ -1784,7 +1751,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         schema.containers[`${this.state.currentTab - 1}`].panes.push(firstPane);
         // schema.containers[0].tabContent.sections.push(tabContent);
       }
-      //this.props.templatesActions.getDefaultBeeTemplates();
       const container = schema.containers[this.state.currentTab - 1];
       const temp = container;
       if (this.state.addLanguageType === "upload") {
@@ -1885,8 +1851,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       action: "showNext",
       value: true,
     };
-    // will remove once bee gets tested end to end
-    // parent && parent.postMessage(JSON.stringify(response), '*');
+
   }
 
   moveToTemplates = () => {
@@ -2382,7 +2347,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
   }
 
   saveFormData = (passedData) => {
-
     //saveFormData gets called only when validation result is true
     if (this.state.gettingFormData && !this.props.isFullMode) {
       const response = {
@@ -2397,7 +2361,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if (this.props.location.query.module === 'library' && this.props.isGetFormData) {
         this.props.getFormSubscriptionData(response);
       }
-      // parent && parent.postMessage(JSON.stringify(response), "*");
       this.setState({gettingFormData: false, startValidation: false, loading: true});
       return;
     }
@@ -2475,8 +2438,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
 
     this.setState({mode: "switchEditor"}, () => {
       this.handleEdmSave();
-      // const win = document.getElementById(`edmeditor${(langIndex + 1) > 1 ? (langIndex + 1) : ''}`).contentWindow;
-      // win && win.postMessage("saveProject", '*');
     });
   }
 
@@ -2626,15 +2587,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       <div key="creatives-email-add-image-container">
         {this.getFilterContent()}
         <Pagination onPageChange={() => { this.fetchAllAssets({getNextPage: true}); }} paginationSelector="pagination-container">
-          {/* <CardGrid
-            listItem={this.prepareImageData()}
-            filterContent={filterContent}
-            onHoverItem={this.handleOnHoverItem}
-            onItemClick={this.handleOnItemClick}
-            colNumber={2}
-            enablePagination
-            isLoading={}
-          /> */}
           {(!fetchingAllAssets && (!fetchAllAssetSuccess || (fetchAllAssetSuccess && !assetList.length))) ? (
             <FormattedMessage {...messages.noImgInGallery}/>
           ) : this.getTemplateDataForGrid({
@@ -2791,7 +2743,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           show={this.state.showImageSelectionBox}
           handleClose={this.handleImagePreviewClose}
           isLoading={this.props.Email.fetchingAllAssets}
-          size="size-l"
+          size="size-xl"
         />
         {/* <div id="bee-plugin-container" style={{ height: '600px'}}></div> */}
         {this.state.showConfirmationModal && this.renderConfirmationModal()}

package/v2Containers/Email/initialSchema.js

@@ -380,7 +380,7 @@ export const response = {
                           styling: "semantic",
                           order: 3,
                           width: 2,
-                          offset: 1,
+                          offset: 4,
                           fluid: false,
                           onlyDisplay: true,
                           submitAction: "onTabOptionSelect",

package/v2Containers/EmailWrapper/index.js

@@ -214,6 +214,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                   value={templateName}
                   labelPosition="top"
                   size="default"
+                  style={{ width: '68%'}}
                 />
               }
               <CardContainer>

package/v2Containers/Templates/index.js

@@ -81,7 +81,7 @@ const LINE_FILTERS = {
   ALL: 'all',
   TEXT: 'text',
   IMAGE_VIDEO: 'image',
-  IMAGE_MAP: 'imagemap'
+  IMAGE_MAP: 'imagemap',
 };
 
 export class Templates extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -972,7 +972,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         break;
     }
   };
-  
+
   createTemplate(ev) {
     const type = this.props.location.query.type;
     const module = this.props.location.query.module ? this.props.location.query.module : 'default';
@@ -1164,7 +1164,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       let getQuery = '';
 
       this.props.actions.setEdmTemplate(data);
-      // this.props.actions.setBEETemplate(data);
       if (this.state.channel && this.state.channel.toLowerCase() === 'email') {
         getQuery = (type === 'embedded') ? {type: 'embedded', module, isLanguageSupport, isEdmSupport} : {module, isLanguageSupport, isEdmSupport};
       } else {
@@ -1387,7 +1386,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         //content = template.versions.base.messages[0].Text;
         const lineContent = template.versions.base.content;
         content = {
-          bodyText:lineContent && lineContent.messages[0].text ? lineContent.messages[0].text : '',
+          bodyText: lineContent && lineContent.messages[0].text ? lineContent.messages[0].text : '',
           bodyImage: lineContent && lineContent.messages[0].originalContentUrl ? lineContent.messages[0].originalContentUrl : '',
         };
         const modeType = lineContent && lineContent.messages[0].type;
@@ -1510,12 +1509,23 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
 
   isLoading = () => {
-    const lineLoader = (this.props.Templates.getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'line');
-    const smsLoader = (this.props.Templates.getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'sms');
-    const wechatLoader = (((this.state.selectedAccount !== '' && this.props.Templates.getAllTemplatesInProgress) || (this.props.Templates.fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
-    const mobilePushLoader = (((this.props.Templates.getAllTemplatesInProgress) || (this.props.Templates.fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
-    const emailLoader = ((this.props.Templates.getAllTemplatesInProgress || this.props.Templates.sendingFile) && this.state.channel.toLowerCase() === 'email');
-    const ebillLoader = ((this.props.Templates.getAllTemplatesInProgress || this.props.Templates.sendingFile) && this.state.channel.toLowerCase() === 'ebill');
+    const { EmailCreate, Templates } = this.props;
+    const {
+      getAllTemplatesInProgress,
+      deleteTemplateInProgress,
+      fetchingWeCrmAccounts,
+      sendingFile,
+    } = Templates;
+    const lineLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'line');
+    const smsLoader = (getAllTemplatesInProgress && this.state.channel.toLowerCase() === 'sms');
+    const wechatLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
+    const mobilePushLoader = (((getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
+    const emailLoader = (
+      (getAllTemplatesInProgress ||
+      sendingFile ||
+      deleteTemplateInProgress ||
+      EmailCreate.duplicateTemplateInProgress) && this.state.channel.toLowerCase() === 'email');
+    const ebillLoader = ((getAllTemplatesInProgress || sendingFile) && this.state.channel.toLowerCase() === 'ebill');
     const isLoading = ((wechatLoader !== undefined) ? wechatLoader : false) ||
       (smsLoader !== undefined ? smsLoader : false) ||
       (emailLoader !== undefined ? emailLoader : false) ||
@@ -1773,7 +1783,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         </CapRadio.CapRadioGroup>
       }
       {
-        channel.toUpperCase() === LINE && 
+        channel.toUpperCase() === LINE &&
           isFullMode
           ? (
             <CapRadio.CapRadioGroup className="line-filters" defaultValue={lineFilter} onChange={this.setLineFilter}>
@@ -1800,9 +1810,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               }
             </CapRadio.CapRadioGroup>
           )
-          : () => {
-            return null;
-          }
+          : () => null
       }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
         {isfilterContentVisisble && !isWechatEmbedded && <CapButton
@@ -1827,7 +1835,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const creativesParams = this.getCreativesParams();
     const templates = this.props.TemplatesList || [];
     const {route} = this.props;
-    const loadingTip = (this.props.Templates.sendingFile && (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill')) ? this.props.intl.formatMessage(messages.uploadingFile) : this.props.intl.formatMessage(messages.gettingAllTemplates);
+    const loadingTipMap = {
+      sendingFile: 'uploadingFile',
+      deleteTemplateInProgress: 'deletingTemplate',
+      duplicateTemplateInProgress: 'duplicatingTemplate',
+    };
+    const { sendingFile, deleteTemplateInProgress } = this.props.Templates;
+    const loadingTipIntl =
+        ((['email', 'ebill'].includes(this.state.channel.toLowerCase() === 'email')) && sendingFile && 'sendingFile') ||
+        (deleteTemplateInProgress && 'deletingTemplate') ||
+        (this.props.EmailCreate.duplicateTemplateInProgress && 'duplicatingTemplate');
+
+    const loadingTip = messages[loadingTipIntl] ? this.props.intl.formatMessage(messages[loadingTipIntl]) : this.props.intl.formatMessage(messages.gettingAllTemplates);
+
     return (
       <>
         {activeMode === ACCOUNT_CHANGE_MODE && this.renderAccountSelection()}

package/v2Containers/Templates/messages.js

@@ -350,4 +350,12 @@ export default defineMessages({
     id: `${scope}.richMediaTemplates`,
     defaultMessage: 'Rich media templates',
   },
+  deletingTemplate: {
+    id: `${scope}.deletingTemplate`,
+    defaultMessage: 'Deleting template...',
+  },
+  duplicatingTemplate: {
+    id: `${scope}.duplicatingTemplate`,
+    defaultMessage: 'Duplicating template...'
+  },
 });