@capillarytech/creatives-library 7.17.21-alpha.0 → 7.17.21-alpha.1

package/package.json

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

package/v2Containers/TagList/index.js

@@ -30,6 +30,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     super(props);
     this.state = {
       loading: false,
+      tags: []
     };
     this.renderTags = this.renderTags.bind(this);
     this.populateTags = this.populateTags.bind(this);
@@ -42,6 +43,34 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.tags !== prevProps.tags || this.props.injectedTags !== prevProps.injectedTags || this.props.selectedOfferDetails !== prevProps.selectedOfferDetails) {
+      this.setState({
+        tags: this.calculateTags(this.props),
+      });
+    }
+  }
+
+  calculateTags(props) {
+    let tags = {};
+    let injectedTags = {};
+    if (props.injectedTags && !_.isEmpty(props.injectedTags)) {
+      const formattedInjectedTags = handleInjectedData(
+        props.injectedTags,
+        scope
+      );
+      injectedTags = this.transformInjectedTags(formattedInjectedTags);
+    }
+    if (props.tags && props.tags.length > 0) {
+      tags = this.populateTags(props.tags);
+      console.log('populating tags', Object.keys(tags || {}).length);
+    }
+    if (props.selectedOfferDetails && !_.isEmpty(props.selectedOfferDetails) && (tags && tags.coupon)) {
+      this.transformCouponTags(props.selectedOfferDetails, tags);
+    }
+    return _.merge( {}, tags, injectedTags);
+  }
+
   componentWillReceiveProps(nextProps) {
     if (_.isEmpty(this.props.injectedTags) && _.isEmpty(this.props.tags)) {
       this.setState({loading: true});
@@ -54,6 +83,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       
       this.setState({loading: false});
     }
+
   }
 
   onSelect = (selectedKeys) => {
@@ -225,29 +255,29 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   }
 
   render() {
-    let tags = {};
-    let injectedTags = {};
-    if (this.props.injectedTags && !_.isEmpty(this.props.injectedTags)) {
-      const formattedInjectedTags = handleInjectedData(
-        this.props.injectedTags,
-        scope
-      );
-      injectedTags = this.transformInjectedTags(formattedInjectedTags);
-    }
-    if (this.props.tags && this.props.tags.length > 0) {
-      tags = this.populateTags(this.props.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', Object.keys(tags || {}).length);
+    // let tags = {};
+    // let injectedTags = {};
+    // if (this.props.injectedTags && !_.isEmpty(this.props.injectedTags)) {
+    //   const formattedInjectedTags = handleInjectedData(
+    //     this.props.injectedTags,
+    //     scope
+    //   );
+    //   injectedTags = this.transformInjectedTags(formattedInjectedTags);
+    // }
+    // if (this.props.tags && this.props.tags.length > 0) {
+    //   tags = this.populateTags(this.props.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', Object.keys(tags || {}).length);
     return (
       <div className={this.props.className ? this.props.className : ''}>
         <CapTagList
           loading={this.state.loading}
-          tags={tags}
+          tags={this.state.tags}
           onSelect={this.onSelect}
           label={this.props.label}
           visibleTaglist={this.props.visibleTaglist}