@capillarytech/creatives-library 7.17.65 → 7.17.66-alpha.0

package/package.json

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

package/utils/common.js

@@ -166,7 +166,9 @@ export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails
     }
   });
   let combinedTags = result;
-  if (offerDetails.length) {
+  if (offerDetails.length && offerDetails[0].type === 'BADGES') {
+    combinedTags = transformBadgeTags(offerDetails, result);
+  } else {
     combinedTags = transformCouponTags(offerDetails, result);
   }
   return getTreeStructureData(combinedTags);
@@ -227,6 +229,44 @@ function transformCouponTags(offerDetails, allTags) {
   return allTags;
 }
 
+export function transformBadgeTags(badgeDetails, allTags) {
+  const badgeTags = {};
+  const badgeTagsKeys = Object.keys(_.get(allTags, 'Badge.subtags', []));
+  const withBadgeId = (obj, id) => {
+    const tempObj = {};
+    if (obj?.subtags) {
+      tempObj.subtags = _.mapValues(obj.subtags, (tag) => ({
+        ...withBadgeId(tag, id),
+      }));
+    }
+    return {
+      ...obj,
+      ...tempObj,
+      incentiveSeriesId: id,
+    };
+  };
+  badgeDetails.forEach((offer) => {
+    const { badgeId, badgeName } = offer;
+    const couponSubTags = {};
+    badgeTagsKeys.forEach((badgeTagKey) => {
+      const badgeSubTagsObj = withBadgeId(allTags?.Badge?.subtags[badgeTagKey], badgeId);
+      couponSubTags[badgeTagKey] = badgeSubTagsObj;
+    });
+    const key = badgeName || badgeId;
+    badgeTags[key] = {
+      'tag-header': true,
+      'name': badgeName,
+      'desc': badgeName,
+      'incentiveSeriesId': badgeId,
+      'subtags': couponSubTags,
+      'resolved': true,
+      'badgeTags': true,
+    };
+  });
+  // eslint-disable-next-line no-param-reassign
+  allTags.Badge.subtags = badgeTags;
+}
+
 function populateTagForChildren(targetTag, tagsObject, tagValue) {
   const tag = targetTag;
   if (tag && tag['tag-header'] && !tag.resolved) {

package/v2Components/CapTagList/index.js

@@ -202,9 +202,9 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         const temp = this.renderTags(val.subtags, '', disabled);
         const tagValue = (
           <CapTreeNode
-            title={disabled ? <CapTooltip title={loyaltyAttrDisableText}>{val.name}</CapTooltip> : val.name}
+            title={disabled ? <CapTooltip title={loyaltyAttrDisableText}>{val?.name}</CapTooltip> : val?.name}
             tag={val}
-            key={val.couponSeriesId ? `${key}(${val.couponSeriesId})` : `${key}`}
+            key={val?.incentiveSeriesId ? `${key}(${val?.incentiveSeriesId})` : `${key}`}
             disabled={disabled}
           >
             {temp}
@@ -223,7 +223,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
             title={childDisabled ? <CapTooltip title={key === CUSTOMER_BARCODE_TAG ? customerBarcodeDisableText : loyaltyAttrDisableText}>{val.desc || val.name}</CapTooltip> : (val.desc || val.name)}
             tag={val}
             isLeaf
-            key={val.couponSeriesId ? `${key}(${val.couponSeriesId})` : `${key}`}
+            key={val.incentiveSeriesId ? `${key}(${val.incentiveSeriesId})` : `${key}`}
             disabled={childDisabled}
           >
           </CapTreeNode>);

package/v2Containers/TagList/index.js

@@ -22,7 +22,7 @@ import './_tagList.scss';
 import { selectCurrentOrgDetails } from '../Cap/selectors';
 import { injectIntl } from 'react-intl';
 import { scope } from './messages';
-import { handleInjectedData, hasGiftVoucherFeature, hasPromoFeature, hasBadgesFeature } from '../../utils/common';
+import { handleInjectedData, hasGiftVoucherFeature, hasPromoFeature, hasBadgesFeature, transformBadgeTags } from '../../utils/common';
 import { GIFT_VOUCHER_RELATED_TAGS, PROMO_ENGINE_RELATED_TAGS, BADGES_RELATED_TAGS } from '../../containers/App/constants';
 
 const TreeNode = Tree.TreeNode;
@@ -50,14 +50,11 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       this.setState({loading: true});
     }
     if (!_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
-
       this.setState({loading: false});
     }
     if (!_.isEqual(nextProps.tags, this.props.tags)) {
-
       this.setState({loading: false});
     }
-
   }
   componentDidUpdate(prevProps) {
     if (this.props.tags !== prevProps.tags || this.props.injectedTags !== prevProps.injectedTags || this.props.selectedOfferDetails !== prevProps.selectedOfferDetails) {
@@ -89,8 +86,14 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     if (props.tags && props.tags.length > 0) {
       tags = this.populateTags(props.tags);
     }
+    console.log(`selected Badges: ${props.selectedOfferDetails}, ${JSON.stringify(tags)}`);
     if (props.selectedOfferDetails && !_.isEmpty(props.selectedOfferDetails) && (tags && tags.coupon)) {
-      this.transformCouponTags(props.selectedOfferDetails, tags);
+      console.log(`selected offers: ${JSON.stringify(props.selectedOfferDetails)}`);
+      if (props.selectedOfferDetails[0]?.type === 'BADGES') {
+        transformBadgeTags(props.selectedOfferDetails, tags);
+      } else {
+        this.transformCouponTags(props.selectedOfferDetails, tags);
+      }
     }
     this.setState({tags: _.merge( {}, tags, injectedTags)});
   }
@@ -120,8 +123,8 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       }
       if (!tag['tag-header']) {
         mainTags[tag.value] = {
-          "name": tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
-          "desc": tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
+          name: tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
+          desc: tag?.label[userLocale] ? tag?.label[userLocale] : tag?.label?.en,
         };
       } else if (tag['tag-header'] && mainTags[tag.value]) {
         mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
@@ -197,12 +200,12 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       return {
         ...obj,
         ...tempObj,
-        couponSeriesId: id,
+        incentiveSeriesId: id,
       };
     };
     offerDetails.forEach((offer) => {
-      const { id, couponName, description, couponSeriesId } = offer;
-      const couponId = id || couponSeriesId;
+      const { id, couponName, description, incentiveSeriesId } = offer;
+      const couponId = id || incentiveSeriesId;
       const couponSubTags = {};
       couponTagsKeys.forEach((couponTagKey) => {
         const couponSubTagsObj = withCouponId(allTags.coupon.subtags[couponTagKey], couponId);
@@ -214,7 +217,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
         'tag-header': true,
         'name': couponNameFinal || couponId,
         'desc': couponNameFinal || couponId,
-        'couponSeriesId': couponId,
+        'incentiveSeriesId': couponId,
         'subtags': couponSubTags,
         'resolved': true,
         'couponTags': true,
@@ -306,7 +309,7 @@ TagList.propTypes = {
   modalProps: PropTypes.any,
   currentOrgDetails: PropTypes.object,
   channel: PropTypes.string,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
 };
 
 const mapStateToProps = createStructuredSelector({