Merge pull request #2613 from bigcommerce/BACK-471

feat(backorders): BACK-471 display backordered quantity message on PDP

Author: bc-apostoliuk

assets/js/theme/common/product-details-base.js

@@ -187,6 +187,7 @@ export default class ProductDetailsBase {
                 $container: $('.form-field--stock', $scope),
                 $input: $('[data-product-stock]', $scope),
             },
+            $backordered: $('[data-product-backordered]', $scope),
             sku: {
                 $label: $('dt.sku-label', $scope),
                 $value: $('[data-product-sku]', $scope),
@@ -220,6 +221,22 @@ export default class ProductDetailsBase {
         viewModel.priceWithoutTax.$div.hide();
     }
 
+    updateQtyBackorderedMessage(qty) {
+        const viewModel = this.getViewModel(this.$scope);
+
+        if (!viewModel.$backordered.length) return;
+
+        const onHand = parseInt(this.context.availableOnHand, 10) || 0;
+        const maxBackorder = parseInt(this.context.availableForBackorder, 10) || 0;
+        const backordered = Math.max(0, Math.min(qty - onHand, maxBackorder));
+
+        if (backordered > 0) {
+            viewModel.$backordered.text(`${backordered} will be backordered`).show();
+        } else {
+            viewModel.$backordered.hide();
+        }
+    }
+
     /**
      * Update the view of price, messages, SKU and stock options when a product option changes
      * @param  {Object} data Product attribute data

assets/js/theme/common/product-details.js

@@ -370,6 +370,7 @@ export default class ProductDetails extends ProductDetailsBase {
             this.addToCartValidator.performCheck();
 
             this.updateProductDetailsData();
+            this.updateQtyBackorderedMessage(qty);
         });
 
         // Prevent triggering quantity change when pressing enter
@@ -383,7 +384,10 @@ export default class ProductDetails extends ProductDetailsBase {
         });
 
         this.$scope.on('keyup', '.form-input--incrementTotal', () => {
+            const viewModel = this.getViewModel(this.$scope);
+            const qty = parseInt(viewModel.quantity.$input.val(), 10) || 0;
             this.updateProductDetailsData();
+            this.updateQtyBackorderedMessage(qty);
         });
     }
 

templates/components/products/product-view.html

@@ -1,4 +1,6 @@
 {{inject 'outOfStockDefaultMessage' (lang 'products.out_of_stock_default_message')}}
+{{inject 'availableOnHand' product.available_on_hand}}
+{{inject 'availableForBackorder' product.available_for_backorder}}
 
 <div class="productView"
     data-event-type="product"
@@ -249,6 +251,7 @@ <h2 class="productView-brand">
                         <span data-product-stock>{{product.stock_level}}</span>
                         {{> components/products/backorder-availability-prompt show_prompt=product.show_backorder_availability_prompt prompt=product.backorder_availability_prompt available_to_sell=product.available_to_sell available_for_backorder=product.available_for_backorder}}
                     </label>
+                    <p class="form-label form-label--alternate" data-product-backordered style="display:none;"></p>
                 </div>
                 {{> components/products/add-to-cart with_wallet_buttons=true}}
             </form>