Fix inventory notifications (#1736)

* add Inventory Status to childVariants

* add limited supply warning badge to top-level variants

* add sold out warning badge to child variants

* call inventoryAdjust

* update badge location on product grid

* commented out testing colors

* add logic to get variant inventory from grid page

* updating revision control for quantity

imports/plugins/core/revisions/server/hooks.js

@@ -3,6 +3,7 @@ import { diff } from "deep-diff";
 import { Products, Revisions, Tags, Media } from "/lib/collections";
 import { Logger } from "/server/api";
 import { RevisionApi } from "../lib/api";
+import { isEmpty } from "lodash";
 
 function convertMetadata(modifierObject) {
   const metadata = {};
@@ -462,6 +463,13 @@ Products.before.update(function (userId, product, fieldNames, modifier, options)
 
     modifier.$set = newSet;
     modifier.$inc = newInc;
+
+    // if (isEmpty(newSet) === false) {
+    //   Products.update(originalSelector, modifier, {
+    //     publish: true,
+    //     selector: options.selector
+    //   });
+    // }
   }
 
   // prevent the underlying document from being modified as it is in draft mode

imports/plugins/included/default-theme/client/styles/products/productGrid.less

@@ -356,3 +356,11 @@
   // border-radius: 5px;
   // box-shadow: 0 3px 6px rgba(0,0,0,0.2);
 }
+
+.product-grid-badges {
+  .badge {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+  }
+}

imports/plugins/included/default-theme/client/styles/variables.less

@@ -31,9 +31,13 @@
 
 // Brand
 @brand-primary-color: @reaction-brand;
-@brand-secondary-color: #ff00ff; //lighten(@brand-primary-color, 20); // old @brand-secondary-color: #4aa5bd;
-@brand-accent-color: #ffff00; //lighten(@brand-primary-color, 37); // old @brand-accent-color: #abe2e7;
-@brand-vivid-color: #00ff00; //lighten(@brand-primary-color, 20); // old @brand-vivid-color: #00dcdd;
+@brand-secondary-color: lighten(@brand-primary-color, 20); // old @brand-secondary-color: #4aa5bd;
+@brand-accent-color: lighten(@brand-primary-color, 37); // old @brand-accent-color: #abe2e7;
+@brand-vivid-color: lighten(@brand-primary-color, 20); // old @brand-vivid-color: #00dcdd;
+// For Ryan's use while testing, uncomment the following
+// @brand-secondary-color: #ff00ff;
+// @brand-accent-color: #ffff00;
+// @brand-vivid-color: #00ff00;
 
 @brand-light-highlight: @black02;
 @brand-light-color: #e3e3e3;

imports/plugins/included/product-detail-simple/client/components/childVariant.js

@@ -22,6 +22,32 @@ class ChildVariant extends Component {
     return null;
   }
 
+  renderInventoryStatus() {
+    const {
+      inventoryManagement,
+      inventoryPolicy
+    } = this.props.variant;
+
+    // If childVariant is sold out, show Sold Out badge
+    if (inventoryManagement && this.props.variant.inventoryQuantity <= 0) {
+      if (inventoryPolicy) {
+        return (
+          <span className="variant-qty-sold-out badge badge-danger">
+            <Translation defaultValue="Sold Out!" i18nKey="productDetail.soldOut" />
+          </span>
+        );
+      }
+
+      return (
+        <span className="variant-qty-sold-out badge badge-info">
+          <Translation defaultValue="Backorder" i18nKey="productDetail.backOrder" />
+        </span>
+      );
+    }
+
+    return null;
+  }
+
   renderDeletionStatus() {
     if (this.props.variant.isDeleted) {
       return (
@@ -68,6 +94,7 @@ class ChildVariant extends Component {
 
         <div className="variant-controls">
           {this.renderDeletionStatus()}
+          {this.renderInventoryStatus()}
           {this.props.visibilityButton}
           {this.props.editButton}
         </div>
@@ -81,6 +108,7 @@ ChildVariant.propTypes = {
   isSelected: PropTypes.bool,
   media: PropTypes.arrayOf(PropTypes.object),
   onClick: PropTypes.func,
+  soldOut: PropTypes.bool,
   variant: PropTypes.object,
   visibilityButton: PropTypes.node
 };

imports/plugins/included/product-detail-simple/client/components/variant.js

@@ -21,10 +21,11 @@ class Variant extends Component {
       inventoryPolicy
     } = this.props.variant;
 
+    // If variant is sold out, show Sold Out badge
     if (inventoryManagement && this.props.soldOut) {
       if (inventoryPolicy) {
         return (
-          <span className="variant-qty-sold-out badge badge-warning">
+          <span className="variant-qty-sold-out badge badge-danger">
             <Translation defaultValue="Sold Out!" i18nKey="productDetail.soldOut" />
           </span>
         );
@@ -37,6 +38,23 @@ class Variant extends Component {
       );
     }
 
+    // If Warning Threshold is met, show Limited Supply Badge
+    if (inventoryManagement && this.props.variant.lowInventoryWarningThreshold >= this.props.variant.inventoryTotal) {
+      if (inventoryPolicy) {
+        return (
+          <span className="variant-qty-sold-out badge badge-warning">
+            <Translation defaultValue="Limited Supply" i18nKey="productDetail.limitedSupply" />
+          </span>
+        );
+      }
+
+      return (
+        <span className="variant-qty-sold-out badge badge-info">
+          <Translation defaultValue="Backorder" i18nKey="productDetail.backOrder" />
+        </span>
+      );
+    }
+
     return null;
   }
 

imports/plugins/included/product-variant/client/templates/products/productGrid/notice.html

@@ -1,13 +1,15 @@
 <template name="gridNotice">
-  {{#if isSoldOut}}
-    {{#if isBackorder}}
-      <span class="variant-qty-sold-out badge" data-i18n="productDetail.backOrder">Backorder</span>
+  <div class="product-grid-badges">
+    {{#if isSoldOut}}
+      {{#if isBackorder}}
+        <span class="variant-qty-sold-out badge" data-i18n="productDetail.backOrder">Backorder</span>
+      {{else}}
+        <span class="variant-qty-sold-out badge badge-danger" data-i18n="productDetail.soldOut">Sold Out!</span>
+      {{/if}}
     {{else}}
-      <span class="variant-qty-sold-out badge" data-i18n="productDetail.soldOut">Sold Out!</span>
+      {{#if isLowQuantity}}
+        <div class="badge badge-low-inv-warning" title="" data-i18n="productDetail.limitedSupply">Limited Supply</div>
+      {{/if}}
     {{/if}}
-  {{else}}
-    {{#if isLowQuantity}}
-      <div class="badge badge-low-inv-warning" title="" data-i18n="productDetail.limitedSupply">Limited Supply</div>
-    {{/if}}
-  {{/if}}
+  </div>
 </template>

imports/plugins/included/product-variant/client/templates/products/productGrid/notice.js

@@ -1,12 +1,34 @@
+import { ReactionProduct } from "/lib/api";
+import { Catalog } from "/lib/api";
+
 /**
  * gridNotice helpers
  */
 Template.gridNotice.helpers({
   isLowQuantity: function () {
-    return this.isLowQuantity;
+    const topVariants = ReactionProduct.getTopVariants(this._id);
+
+    for (const topVariant of topVariants) {
+      const inventoryThreshold = topVariant.lowInventoryWarningThreshold;
+      const inventoryQuantity = ReactionProduct.getVariantQuantity(topVariant);
+
+      if(inventoryQuantity !== 0 && inventoryThreshold >= inventoryQuantity){
+        return true;
+      }
+    }
+    return false;
   },
   isSoldOut: function () {
-    return this.isSoldOut;
+    const topVariants = ReactionProduct.getTopVariants(this._id);
+
+    for (const topVariant of topVariants) {
+      const inventoryQuantity = ReactionProduct.getVariantQuantity(topVariant);
+
+      if(inventoryQuantity > 0){
+        return false;
+      }
+    }
+    return true;
   },
   isBackorder: function () {
     return this.isBackorder;

server/methods/core/cart.js

@@ -603,7 +603,7 @@ Meteor.methods({
 
     if (orderId) {
       // TODO: check for successful orders/inventoryAdjust
-      // Meteor.call("orders/inventoryAdjust", orderId);
+      Meteor.call("orders/inventoryAdjust", orderId);
       Collections.Cart.remove({
         _id: order.cartId
       });