@capillarytech/creatives-library 7.9.11 → 7.9.12

package/package.json

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

package/utils/common.js

@@ -38,9 +38,11 @@ export const hasStore2DoorFeature = Auth.hasFeatureAccess.bind(
   STORE2DOOR_PLUS_ENABLED,
 );
 
-export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails = []}) {
+export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails = [], disableTagsDetails = {}}) {
   console.log('populating tags', (tagsList || []).length);
   const mainTags = {};
+  const { disableRelatedTags, childTagsToDisable, parentTagstoDisable} = disableTagsDetails;
+
 
   _.forEach(tagsList, (temp) => {
     const tag = temp.definition;
@@ -48,6 +50,7 @@ export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails
       mainTags[tag.value] = {
         name: tag.label[userLocale] || tag.label.en,
         value: tag.value,
+        disabled: disableRelatedTags ? childTagsToDisable.includes(tag.value) : false,
       };
     } else if (tag['tag-header'] && mainTags[tag.value]) {
       // to check it this tag header is already available in mainTags object,
@@ -60,6 +63,7 @@ export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails
         "name": tag.label[userLocale] || tag.label.en,
         "subtags": tag.subtags,
         "value": tag.value,
+        "disabled": disableRelatedTags ? parentTagstoDisable.includes(tag.value) : false,
       };
     }
   });
@@ -175,17 +179,19 @@ function populateTagForChildren(targetTag, tagsObject, tagValue) {
 function getTreeStructureData(data) {
   const result = [];
   _.forOwn(data, (mainTag) => {
-    const { name, value, subtags = [] } = mainTag;
+    const { name, value, subtags = [], disabled } = mainTag;
     if (!mainTag['tag-header']) {
       result.push({
         title: name,
         value: `{{${value}}}`,
+        disabled,
       });
     } else {
       const obj = {
         title: name,
         value: `{{${value}}}`,
         selectable: false,
+        disabled,
       };
       obj.children = getSubTags(subtags);
       result.push(obj);
@@ -197,17 +203,19 @@ function getTreeStructureData(data) {
 function getSubTags(subtagsParam) {
   const result = [];
   _.forOwn(subtagsParam, (subTag) => {
-    const { name, value, subtags = [] } = subTag;
+    const { name, value, subtags = [], disabled } = subTag;
     if (_.isEmpty(subtags)) {
       result.push({
         title: name,
         value: `{{${value}}}`,
+        disabled,
       });
     } else {
       const obj = {
         title: name,
         value: `{{${value}}}`,
         selectable: false,
+        disabled,
       };
       obj.children = getSubTags(subtags);
       result.push(obj);

package/v2Components/CapTagList/index.js

@@ -8,16 +8,18 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 // import styled from 'styled-components';
-import { CapSpin, CapModal, CapButton, CapPopover, CapInput, CapTree, CapSelect } from '@capillarytech/cap-ui-library';
+import { CapSpin, CapModal, CapButton, CapPopover, CapInput, CapTree, CapSelect, CapTooltip } from '@capillarytech/cap-ui-library';
 
 import _ from 'lodash';
-import { injectIntl, intlShape } from 'react-intl';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
 import messages from './messages';
+import { makeSelectLoyaltyPromotionDisplay } from '../../v2Containers/Cap/selectors';
+import withCreatives from '../../hoc/withCreatives';
 
 const {Search} = CapInput;
 const {CapTreeNode} = CapTree;
 class CapTagList extends React.Component { // eslint-disable-line react/prefer-stateless-function
-
   constructor(props) {
     super(props);
     this.state = {
@@ -132,23 +134,39 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
   };
 
   renderTags(tags, searchString = '') {
+    const { disableRelatedTags, childTagsToDisable, parentTagstoDisable} = this.props.disableTagsDetails;
     const list = [];
+    const loyaltyAttrDisableText = <FormattedMessage {...messages.loyaltyAttributeDisable} />;
     _.forEach(tags, (val = '', key) => {
       let supportedTagsString = '';
       _.forEach(val.supportedTags, (supportedTag) => {
         supportedTagsString += `${supportedTag} ,`;
       });
       supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
-      
       if (_.has(val, 'subtags')) {
-        const temp = this.renderTags(val.subtags);
+        const disabled = disableRelatedTags ? parentTagstoDisable.includes(key) : false;
+        const temp = this.renderTags(val.subtags, '', disabled);
         list.push((
-          <CapTreeNode title={val.name} tag={val} key={val.couponSeriesId ? `${key}(${val.couponSeriesId})` : `${key}`}>
+          <CapTreeNode
+            title={disabled ? <CapTooltip title={loyaltyAttrDisableText}>{val.name}</CapTooltip> : val.name}
+            tag={val}
+            key={val.couponSeriesId ? `${key}(${val.couponSeriesId})` : `${key}`}
+            disabled={disabled}
+          >
             {temp}
           </CapTreeNode>
         ));
       } else if (searchString === '' || !searchString || ((val.name || '').toLowerCase().indexOf(searchString.toLowerCase()) !== -1)) {
-        const tempNode = (<CapTreeNode title={val.desc || val.name} tag={val} isLeaf key={val.couponSeriesId ? `${key}(${val.couponSeriesId})` : `${key}`}></CapTreeNode>);
+        const childDisabled = disableRelatedTags ? childTagsToDisable.includes(key) : false;
+        const tempNode = (
+          <CapTreeNode
+            title={childDisabled ? <CapTooltip title={loyaltyAttrDisableText}>{val.desc || val.name}</CapTooltip> : (val.desc || val.name)}
+            tag={val}
+            isLeaf
+            key={val.couponSeriesId ? `${key}(${val.couponSeriesId})` : `${key}`}
+            disabled={childDisabled}
+          >
+          </CapTreeNode>);
         list.push(tempNode);
       }
     });
@@ -253,10 +271,27 @@ CapTagList.propTypes = {
   visibleTaglist: PropTypes.bool,
   hidePopover: PropTypes.bool,
   modalProps: PropTypes.any,
+  disableTagsDetails: PropTypes.object,
 };
 
 CapTagList.defaultValue = {
   hidePopover: false,
 };
 
-export default injectIntl(CapTagList);
+function mapDispatchToProps() {
+  return {
+  };
+}
+
+const mapStateToProps = createStructuredSelector({
+  disableTagsDetails: makeSelectLoyaltyPromotionDisplay(),
+});
+
+export default withCreatives({
+  WrappedComponent: CapTagList,
+  mapStateToProps,
+  mapDispatchToProps,
+  suserAuth: true,
+});
+
+// export default injectIntl(CapTagList);

package/v2Components/CapTagList/messages.js

@@ -42,4 +42,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.CapTagList.search',
     defaultMessage: 'Search',
   },
+  "loyaltyAttributeDisable": {
+    id: `creatives.componentsV2.CapTagList.loyaltyAttributeDisable`,
+    defaultMessage: 'You won’t be able to add loyalty related attributes since the loyalty program/ card series is None.',
+  },
 });

package/v2Components/Ckeditor/index.js

@@ -205,7 +205,27 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
     //this.editorInstance.name = this.id;
 
     //Register listener for custom events if any
-    this.editorInstance.on('change', this.handleContentChange);
+    // this.editorInstance.on('change', this.handleContentChange);
+
+    // mode event is fired whenever mode is toggled from normal to source mode or vice versa
+    // change event works only in wysiwyg(non-source) mode, key event works in both source & wysiwyg(non-source) mode but, 
+    // key event doesn't get fired up while setting text to bold,italic etc..
+    this.editorInstance.on('mode',()=>{
+      if(this.editorInstance.mode==="source"){
+        this.editorInstance.on('key',this.handleContentChange)
+      }
+      else{
+        if(this.editorInstance.hasListeners("key")){
+          /*Removing the 'key' listener is necessary. If not removed and the mode is switched in the following manner :
+          source mode -> Non-source mode -> source mode,
+          then under this scenario both 'key' and 'change' listener will get fired on entering text. Except that 'key' listener will not get fired when setting text to 'bold', 'italic' etc.  
+          */
+          this.editorInstance.removeListener("key",this.handleContentChange)
+        }
+        this.editorInstance.on('change',this.handleContentChange)
+      }
+    })
+
     _.forEach(this.props.events, (event, index) => {
       this.editorInstance.on(index, event);
     });

package/v2Containers/Cap/constants.js

@@ -11,9 +11,9 @@ export const LOGOUT_SUCCESS_V2 = 'cap/LOGOUT_SUCCESS_V2';
 export const LOGOUT_FAILURE_V2 = 'cap/LOGOUT_FAILURE_V2';
 export const ADD_MESSAGE = 'cap/ADD_MESSAGE';
 export const REMOVE_MESSAGE = 'cap/REMOVE_MESSAGE';
-export const GET_USER_DATA_REQUEST = 'cap/GET_USER_DATA_REQUEST';
-export const GET_USER_DATA_SUCCESS = 'cap/GET_USER_DATA_SUCCESS';
-export const GET_USER_DATA_FAILURE = 'cap/GET_USER_DATA_FAILURE';
+export const GET_USER_DATA_REQUEST = 'cap/GET_USER_DATA_REQUEST_V2';
+export const GET_USER_DATA_SUCCESS = 'cap/GET_USER_DATA_SUCCESS_V2';
+export const GET_USER_DATA_FAILURE = 'cap/GET_USER_DATA_FAILURE_V2';
 
 export const GET_SCHEMA_FOR_ENTITY_FAILURE = 'cap/GET_SCHEMA_FOR_ENTITY_FAILURE';
 export const GET_SCHEMA_FOR_ENTITY_REQUEST = 'cap/GET_SCHEMA_FOR_ENTITY_REQUEST';
@@ -28,6 +28,8 @@ export const GET_TOPBAR_MENU_DATA_SUCCESS = 'creatives/cap/GET_TOPBAR_MENU_DATA_
 export const GET_TOPBAR_MENU_DATA_FAILURE = 'creatives/cap/GET_TOPBAR_MENU_DATA_FAILURE';
 export const CLEAR_TOPBAR_MENU_DATA = 'creatives/cap/CLEAR_TOPBAR_MENU_DATA';
 
+export const SET_LOYALTY_PROMOTION_RELATED_CREATIVE_TAGS_DISPLAY = 'SET_LOYALTY_PROMOTION_RELATED_CREATIVE_TAGS_DISPLAY';
+
 export const CAMPAIGN_SETTINGS_URL = '/creatives/settings/message';
 export const ORG_SETTINGS_URL = '/org/index';
 export const HELP_URL = 'https://support.capillarytech.com/en/support/solutions/4000007853';

package/v2Containers/Cap/reducer.js

@@ -82,7 +82,6 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('fetchingSchema', false);
     case types.GET_SCHEMA_FOR_ENTITY_SUCCESS: {
       const stateMeta = state.get('metaEntities');
-      
       return state
         .set('fetchingSchema', false)
         .set('metaEntities', {
@@ -117,6 +116,11 @@ function capReducer(state = fromJS(initialState.cap), action) {
         );
     case types.CLEAR_TOPBAR_MENU_DATA:
       return state.set('topbarMenuData', fromJS({}));
+    case types.SET_LOYALTY_PROMOTION_RELATED_CREATIVE_TAGS_DISPLAY: {
+      return state.set('disableLoyaltyPromotionRelatedTags', action.disable)
+        .set('tagsToDisable', action.tagsToDisable)
+        .set('parentTagsToDisable', action.parentTagsToDisable);
+    }
     default:
       return state;
   }

package/v2Containers/Cap/selectors.js

@@ -31,7 +31,6 @@ const setInjectedTags = () => createSelector(
     const { tags } = metaEntities;
     const customTags = tags && (tags.custom || {});
     const extendedTags = tags && (tags.extended || {});
-    
     return (injectedTags = _.merge({}, injectedTags, customTags, extendedTags));
   }
 );
@@ -74,6 +73,15 @@ const makeSelectFetchingSchema = () => createSelector(
   (globalState) => globalState.get('fetchingSchema')
 );
 
+const makeSelectLoyaltyPromotionDisplay = () => createSelector(
+  selectCapDomain,
+  (globalState) => ({
+    disableRelatedTags: globalState.get('disableLoyaltyPromotionRelatedTags'),
+    childTagsToDisable: globalState.get('tagsToDisable') || [],
+    parentTagstoDisable: globalState.get('parentTagsToDisable') || [],
+  }),
+);
+
 export {
   makeSelectLocationState,
   makeSelectAuthenticated,
@@ -85,4 +93,5 @@ export {
   isLoadingMetaEntities,
   makeSelectFetchingSchema,
   setInjectedTags,
+  makeSelectLoyaltyPromotionDisplay,
 };

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -214,14 +214,15 @@ function SlideBoxContent(props) {
           stickerId,
           packageId,
           baseUrl,
-          video: {
+          video,
+          template,
+        }) => {
+          const {
             originalContentUrl,
             externalLink: {
               linkUri,
             } = {},
-          } = {},
-          template,
-        }) => {
+          } = video || {};
           const previewContent = {};
           previewContent.messageContent = text;
           previewContent.previewImageUrl = previewImageUrl;

package/v2Containers/Email/index.js

@@ -2179,7 +2179,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     } else {
       this.setState({injectedTags: data.tags});
     }
-    data.tags && this.props.globalActions.setInjectedTags(data.tags);
+    this.props.globalActions.setInjectedTags(data.tags);
   }
 
   startLoading = (ifEdit) => {

package/v2Containers/FTP/index.js

@@ -25,7 +25,7 @@ import { FONT_SIZE_L } from '@capillarytech/cap-ui-library/styled/variables';
 import { find, cloneDeep, findIndex, isEmpty, isEqual, filter, flattenDeep, replace } from 'lodash';
 import * as actions from './actions';
 import { makeSelectFTP, makeSelectMetaEntities } from './selectors';
-import { setInjectedTags } from '../Cap/selectors';
+import { makeSelectLoyaltyPromotionDisplay, setInjectedTags } from '../Cap/selectors';
 import withCreatives from '../../hoc/withCreatives';
 import messages from './messages';
 import './_FTP.scss';
@@ -132,7 +132,11 @@ export class FTP extends React.Component {
       ) || !isEqual(injectedTags, thisInjectedTags)
     ) {
       const tags = _.concat(
-        getTreeStructuredTags({ tagsList: ((metaEntities.tags || {}).standard || []), offerDetails: selectedOfferDetails }),
+        getTreeStructuredTags({
+          tagsList: ((metaEntities.tags || {}).standard || []),
+          offerDetails: selectedOfferDetails,
+          disableTagsDetails: this.props.disableTagsDetails,
+        }),
         this.getTreeStructuredInjectedTags(injectedTags)
       );
       this.setState({ tagsTree: tags}, () => this.disableUsedColumns());
@@ -491,9 +495,13 @@ export class FTP extends React.Component {
 
   disableUsedColumns = () => {
     const { headerTagList = [] } = this.state;
-    const { selectedOfferDetails = [], metaEntities = {}, injectedTags } = this.props;
+    const { selectedOfferDetails = [], metaEntities = {}, injectedTags, disableTagsDetails } = this.props;
     const tags = _.concat(
-      getTreeStructuredTags({ tagsList: ((metaEntities.tags || {}).standard || []), offerDetails: selectedOfferDetails }),
+      getTreeStructuredTags({
+        tagsList: ((metaEntities.tags || {}).standard || []),
+        offerDetails: selectedOfferDetails,
+        disableTagsDetails,
+      }),
       this.getTreeStructuredInjectedTags(injectedTags)
     );
     const clonnedTagsTree = cloneDeep(tags);
@@ -636,6 +644,7 @@ FTP.propTypes = {
   contents: PropTypes.array,
   metaEntities: PropTypes.object,
   selectedOfferDetails: PropTypes.array,
+  disableTagsDetails: PropTypes.func,
 };
 
 
@@ -650,6 +659,7 @@ const mapStateToProps = createStructuredSelector({
   FTP: makeSelectFTP(),
   metaEntities: makeSelectMetaEntities(),
   injectedTags: setInjectedTags(),
+  disableTagsDetails: makeSelectLoyaltyPromotionDisplay(),
 });
 
 export default withCreatives({

package/v2Containers/Templates/index.js

@@ -207,26 +207,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
-    if ((['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill'].includes((this.state.channel || '').toLowerCase())) || ((['wechat', 'mobilepush'].includes(this.state.channel.toLowerCase()) && !isEmpty(this.props.Templates.selectedWeChatAccount)))) {
+    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill'].includes((this.state.channel || '').toLowerCase())) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
       };
-      if (this.state.channel.toLowerCase() === 'wechat' && get(this.props, 'Templates.selectedWeChatAccount.configs', false)) {
-        queryParams.wecrmId = this.props.Templates.selectedWeChatAccount.configs.wecrm_app_id;
-        queryParams.wecrmToken = this.props.Templates.selectedWeChatAccount.configs.wecrm_token;
-        queryParams.originalId = this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier;
-      }
-      if (this.state.channel.toLowerCase() === "mobilepush" && !isEmpty(this.props.Templates.selectedWeChatAccount)) {
-        const account = this.props.Templates.selectedWeChatAccount;
-        queryParams.accountId = account.id;
-        const isAndroidSupported = get(account, "configs.android") === '1';
-        const isIosSupported = get(account, "configs.ios") === '1';
-        if (!(isAndroidSupported || isIosSupported)) {
-          this.props.actions.resetAccount();
-          return;
-        }
-      }
       queryParams.page = this.state.page;
       queryParams.perPage = this.state.perPageLimit;
       const channel = this.state.channel;
@@ -810,7 +795,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       { [WECHAT, MOBILE_PUSH].includes(currentChannel) && this.showAccountName() }
       {filterContent}
       <CapSpin spinning={isLoading} tip={loadingTip} style={{width: '100%'}}>
-        {!isLoading && <div>
+        {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
             <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : "pagination-container"}>
               <CapCustomCardList
@@ -821,7 +806,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 fbType={"list"}
                 />
             </div>)
-            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
+            : ['sms', "email"].includes(this.state.channel.toLowerCase()) && !isLoading && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
           }
 
           {(this.state.selectedAccount === '' && isEmpty(this.props.Templates.selectedWeChatAccount)) && (this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === "mobilepush") &&