Display remaining stock for variant in the shopfront

Display only if all conditions are met:
 - Variant is not a bulk buy
 - Shop preference is true for `preferred_product_stock_display`
 - Only 3 (or less) items are remaining in stock
 - No item for this variant is already to cart

app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee

@@ -1,4 +1,4 @@
-angular.module('Darkswarm').controller "ShopVariantCtrl", ($scope, $modal, Cart) ->
+angular.module('Darkswarm').controller "ShopVariantCtrl", ($scope, $modal, Cart, Shopfront) ->
   $scope.updateCart = (line_item) ->
     Cart.adjust($scope.variant.line_item)
 
@@ -69,3 +69,6 @@ angular.module('Darkswarm').controller "ShopVariantCtrl", ($scope, $modal, Cart)
   $scope.addBulk = (quantity) ->
     $scope.add(quantity)
     $modal.open(templateUrl: "bulk_buy_modal.html", scope: $scope, windowClass: "product-bulk-modal")
+
+  $scope.displayRemainingInStock = ->
+    Shopfront.shopfront.preferred_product_stock_display && $scope.available() <= 3 && !$scope.variant.line_item.quantity

app/serializers/api/enterprise_shopfront_serializer.rb

@@ -9,7 +9,7 @@ module Api
                :instagram, :linkedin, :twitter, :facebook, :is_primary_producer, :is_distributor,
                :phone, :visible, :email_address, :hash, :logo, :promo_image, :path, :category,
                :active, :producers, :orders_close_at, :hubs, :taxons, :supplied_taxons, :pickup,
-               :delivery
+               :delivery, :preferred_product_stock_display
 
     has_one :address, serializer: Api::AddressSerializer
     has_many :supplied_properties, serializer: Api::PropertySerializer

app/views/shop/products/_shop_variant_no_group_buy.html.haml

@@ -13,6 +13,8 @@
     %button.variant-quantity{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
       -# U+FF0B Fullwidth Plus Sign
       ＋
+  .variant-remaining-stock{ng: {if: "displayRemainingInStock()"}}
+    {{ "js.shopfront.variant.remaining_in_stock" | t:{quantity: available()} }}
   .variant-quantity-display{ng: {class: "{visible: variant.line_item.quantity}"}}
     {{ "js.shopfront.variant.quantity_in_cart" | t:{quantity: variant.line_item.quantity || 0} }}
   %input{type: :hidden,

app/webpacker/css/darkswarm/_shop-inputs.scss

@@ -71,12 +71,15 @@ button.variant-quantity {
   }
 }
 
-.variant-quantity-display {
-  display: inline-block;
+.variant-quantity-display, .variant-remaining-stock {
   font-size: 0.875em;
   margin-top: 0.25em;
   text-align: center;
   width: 7rem;
+  display: inline-block;
+}
+
+.variant-quantity-display {
   visibility: hidden;
 
   &.visible {
@@ -84,6 +87,10 @@ button.variant-quantity {
   }
 }
 
+.variant-remaining-stock {
+  color: $red-500;
+}
+
 button.bulk-buy.variant-quantity {
   background-color: transparent;
   border: .1em solid $grey-200;

config/locales/en.yml

@@ -3106,6 +3106,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
         add_to_cart: "Add"
         in_cart: "in cart"
         quantity_in_cart: "%{quantity} in cart"
+        remaining_in_stock: "Only %{quantity} left"
       bulk_buy_modal:
         min_quantity: "Min quantity"
         max_quantity: "Max quantity"