@capillarytech/creatives-library 6.9.7 → 6.9.9

package/containers/TagList/index.js

@@ -71,10 +71,9 @@ 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[userLocale] ? tag.label[userLocale] : tag.label.en,
+          name: tag.label[this.props.userLocale] ? tag.label[this.props.userLocale] : tag.label.en,
           desc: tag.desc ? tag.desc : tag.label.en,
         };
       } else if (tag['tag-header'] && mainTags[tag.value]) {
@@ -83,7 +82,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[userLocale] ? tag.label[userLocale] : tag.label.en,
+          "name": tag.label[this.props.userLocale] ? tag.label[this.props.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.7",
+  "version": "6.9.9",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/BeeEditor/index.js

@@ -40,7 +40,12 @@ function BeeEditor(props) {
   const {formatMessage} = intl;
   const UNSUBSCRIBE = 'unsubscribe';
   let beePluginInstance = null;
-  const categoryOptions = [];
+  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({});
@@ -77,16 +82,21 @@ function BeeEditor(props) {
           },
         },
         mergeTags: {
-          label: 'search',
+          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({});
@@ -94,8 +104,9 @@ function BeeEditor(props) {
                 }
               }, 2000);
             });
+            // once prmise will resolve , pass the resolve data to handler to show tags in bee edior
             const result = await promise;
-            resolve(result); // "done!"
+            resolve(result);
           },
         },
         saveRow: {
@@ -131,9 +142,9 @@ 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);
+        // will use this function on save row feature
+      onSaveRow: (rowJSON, rowHTML, pageJSON) => {
+        console.log('bee-plugin-container onSaveRows', rowJSON, rowHTML, pageJSON);
       },
     };
     window.BeePlugin.create(tokenData, beeConfig, (instance) => {
@@ -183,15 +194,12 @@ function BeeEditor(props) {
   const onRowChange = useCallback((e) => {
     setRowName(e.target.value);
   });
-  // will use this function on save row feature
   const onChangeCategoy = (e) => {
-    console.log('onChangeCategoy', e);
+    setRowCategory(e);
   };
-
   const onTagChange = (e) => {
     setRowTags(e.target.value);
   };
-
   const contentSection = <>
     <CapInput
       label={<FormattedMessage {...messages.rowName} />}

package/v2Components/BeeEditor/messages.js

@@ -44,4 +44,28 @@ export default defineMessages({
     id: `${prefix}.tagPlaceHolder`,
     defaultMessage: 'Enter tags',
   },
+  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',
+  },
 });

package/v2Components/FormBuilder/index.js

@@ -3221,7 +3221,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             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') {
@@ -3333,7 +3332,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       }
 
     });
-    if(!this.props.isEmailLoading && !fields.length) {
+    if(!this.props.isEmailLoading && this.props.schema.channel.toUpperCase() === 'EMAIL' && !fields.length) {
       return (
         <div style={{ textAlign: 'center' }}>
           <CapSpin spinning />

package/v2Containers/App/constants.js

@@ -46,3 +46,4 @@ export const CHANNEL_EDIT_TRACK_MAPPING = {
   line: TRACK_EDIT_LINE,
 };
 export const GTM_TRACKING_ID = 'UA-110024621-2';
+export const BEE_PLUGIN = 'BEE_PLUGIN';

package/v2Containers/Email/index.js

@@ -31,7 +31,7 @@ import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
 import { EMAIL } from '../CreativesContainer/constants';
 import { GA } from '@capillarytech/cap-ui-utils';
-import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL } from '../App/constants';
+import { TRACK_CREATE_EMAIL, TRACK_EDIT_EMAIL, BEE_PLUGIN } from '../App/constants';
 import { FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
 const {CapCustomCardList} = CapCustomCard;
 export class Email extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -189,9 +189,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         this.setState({isDragDrop: true});
       }
       if (this.props.params.id) {
-        this.props.actions.getCmsSetting('BEE', this.props.Templates.BEETemplate._id, 'open', undefined, isBEESupport);
+        this.props.actions.getCmsSetting(BEE_PLUGIN, this.props.Templates.BEETemplate._id, 'open', undefined, isBEESupport);
       } else if (this.props.location.query.module !== "library" || (this.props.location.query.module === "library" && !this.props.templateData)) {
-        this.props.actions.getCmsSetting('BEE', this.props.Templates.BEETemplate._id, 'create', undefined, isBEESupport);
+        this.props.actions.getCmsSetting(BEE_PLUGIN, this.props.Templates.BEETemplate._id, 'create', undefined, isBEESupport);
       }
     }
     this.setState({ content: (this.props.Templates.selectedEmailLayout ? this.props.Templates.selectedEmailLayout : ''), formData});
@@ -706,7 +706,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         if (!isNaN(index)) {
           _.forEach(val.selectedLanguages, (language) => {
             if (val[language].is_drag_drop) {
-              that.props.actions.getCmsData('BEE', id, language);
+              that.props.actions.getCmsData(BEE_PLUGIN, id, language);
             }
           });
         }
@@ -914,7 +914,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         //   formData.base.activeTab = language;
         // }
         if (language && editData.versions.base[language].is_drag_drop) {
-          this.props.actions.getCmsSetting('BEE', editData._id, 'open', language, isBEESupport);
+          this.props.actions.getCmsSetting(BEE_PLUGIN, editData._id, 'open', language, isBEESupport);
         }
       });
 
@@ -1125,7 +1125,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       const currentTab = this.state.currentTab - 1;
       const baseLanguage = this.props.currentOrgDetails.basic_details.base_language ? this.props.currentOrgDetails.basic_details.base_language : 'en';
       if (formData[currentTab][baseLanguage].is_drag_drop) {
-        this.props.actions.getCmsSetting('BEE', formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport);
+        this.props.actions.getCmsSetting(BEE_PLUGIN, formData[currentTab][baseLanguage].drag_drop_id, 'duplicate', baseLanguage, isEdmSupport);
       }
     });
   }
@@ -1404,7 +1404,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       if (!id) {
         id = _.get(formData, `base[${formData.base.activeTab}].id`, '');
       }
-      this.props.actions.getCmsData('BEE', id);
+      this.props.actions.getCmsData(BEE_PLUGIN, id);
       if (this.state.mode === 'switchEditor') {
         let schema = _.cloneDeep(this.state.schema);
         _.forEach(schema.containers, (container, index) => {
@@ -2129,7 +2129,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
           };
           if (templates.drag_drop_id) {
             tempData.drag_drop_id = templates.drag_drop_id;
-            this.props.actions.getCmsSetting('BEE', tempData._id, 'open', tempData.iso_code, isEdmSupport);
+            this.props.actions.getCmsSetting(BEE_PLUGIN, tempData._id, 'open', tempData.iso_code, isEdmSupport);
           }
           // formData.usingTabContainer = true;
           // formData.tabCount = 1;
@@ -2155,7 +2155,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         // this.setState({tabKey: ''});
         _.forEach(formData[0].selectedLanguages, (language) => {
           if (formData[0][language].is_drag_drop) {
-            this.props.actions.getCmsSetting('BEE', formData[0][language].drag_drop_id, 'open', language, isEdmSupport);
+            this.props.actions.getCmsSetting(BEE_PLUGIN, formData[0][language].drag_drop_id, 'open', language, isEdmSupport);
           }
         });
       });
@@ -2493,7 +2493,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       // let getQuery = '';
       const isEdmSupport = (this.props.location.query.isEdmSupport !== "false") || false;
 
-      this.props.actions.getCmsSetting('BEE', data._id, 'create', this.state.formData[this.state.currentTab - 1].activeTab, isEdmSupport);
+      this.props.actions.getCmsSetting(BEE_PLUGIN, data._id, 'create', this.state.formData[this.state.currentTab - 1].activeTab, isEdmSupport);
       // this.props.templatesActions.setEdmTemplate(data);
       this.toggleEdmEmailTemplateSelection();
       // if (type && type.toLowerCase() === 'email') {

package/v2Containers/Line/Container/ImageCarousel/Content.js

@@ -367,8 +367,8 @@ export const LineImageCarouselContent = ({
 
   const updateActionLabelError = (value) => {
     if (value.length > MAX_ACTION_LABEL_LENGTH) {
-      updateActionLabelErrorMessage(formatMessage(messages.emptyActionContentErrorMessage));
-      return formatMessage(messages.emptyActionContentErrorMessage);
+      updateActionLabelErrorMessage(formatMessage(messages.maxActionLabelErrorMessage));
+      return formatMessage(messages.maxActionLabelErrorMessage);
     } else {
       updateActionLabelErrorMessage();
     }

package/v2Containers/Line/Container/ImageCarousel/constants.js

@@ -7,4 +7,4 @@ export const TEXT_ACTION_TYPE = 'text';
 export const MESSAGE_ACTION_TYPE = 'message';
 export const URL_ACTION_TYPE = 'uri';
 export const MAX_ACTION_LABEL_LENGTH = 12;
-export const MAX_ALLOWED_TITLE_LENGTH = 20;
+export const MAX_ALLOWED_TITLE_LENGTH = 100;

package/v2Containers/Line/Container/ImageCarousel/index.js

@@ -12,7 +12,7 @@ import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
 import LineDrawer from '../Drawer';
 import style from './style';
-import { CAP_G06, FONT_COLOR_01, FONT_COLOR_02, CAP_SPACE_08, CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_G06, FONT_COLOR_01, FONT_COLOR_02, CAP_SPACE_08, CAP_WHITE, CAP_SPACE_24, CAP_SPACE_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import withStyles from '../../../../hoc/withStyles';
 
 import LineImageCarouselContent from './Content';
@@ -122,7 +122,7 @@ export const LineImageCarousel = (props) => {
 		}) => {
 			isErrorIndex = (isErrorIndex !== undefined)
 				? isErrorIndex
-				: ((!originalContentUrl || !selectedActionType || actionContentErrorMessage || actionLabelErrorMessage) && activeIndex);
+				: ((!originalContentUrl || !selectedActionType || actionContentErrorMessage || actionLabelErrorMessage || !actionContent) && activeIndex);
 			columns.push({
 				imageUrl: originalContentUrl,
 				action: {
@@ -290,7 +290,10 @@ export const LineImageCarousel = (props) => {
 							borderRadius: '50%',
 							color: CAP_WHITE,
 							backgroundColor: !isSelected ? FONT_COLOR_02 : FONT_COLOR_01,
-							padding: '5px 10px',
+							height: CAP_SPACE_24,
+							width: CAP_SPACE_24,
+							textAlign: 'center',
+							paddingTop: 4,
 						}}
 					>
 						{index + 1}

package/v2Containers/Line/Container/_lineCreate.scss

@@ -3,6 +3,12 @@
 .line-row{
   margin-bottom: 16px;
 }
+
+.form-builder-dragger {
+  border-radius: $CAP_SPACE_04;
+  background: $CAP_G10;
+}
+
 .slidebox-content-container {
   overflow-x: hidden;
 }

package/v2Containers/TagList/index.js

@@ -66,24 +66,25 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   }
 
   populateTags(tagsList) {
-    console.log('populating tags', tagsList);
+    console.log('populating tags', (tagsList || []).length);
     const mainTags = {};
 
     //Form tags object with tag headers
     _.forEach(tagsList, (temp) => {
       const tag = temp.definition;
+      const { userLocale } = this.props;
       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]) {
         mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
       } else if (!mainTags[tag.value]) {
-        console.log('Inside ', tag.label);
+        // 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,
         };
@@ -228,13 +229,13 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     }
     if (this.props.tags && this.props.tags.length > 0) {
       tags = this.populateTags(this.props.tags);
-      console.log('populating tags', tags);
+      console.log('populating tags', Object.keys(tags || {}).length);
     }
     if (this.props.selectedOfferDetails && !_.isEmpty(this.props.selectedOfferDetails) && (tags && tags.coupon)) {
       this.transformCouponTags(this.props.selectedOfferDetails, tags);
     }
     tags = _.merge( {}, tags, injectedTags);
-    console.log('merged tags', tags);
+    console.log('merged tags', Object.keys(tags || {}).length);
     return (
       <div className={this.props.className ? this.props.className : ''}>
         <CapTagList