From 35b4e8c4d161b18fffb985e1b25ce85cc9984072 Mon Sep 17 00:00:00 2001
From: Maikel Linke <maikel@email.org.au>
Date: Wed, 6 Jan 2021 11:10:48 +1100
Subject: [PATCH] Allow editing of invalid quantities

If the user entered an invalid quantity, Angular set the model to
undefined and we removed the input field to show the add button. That
makes it impossible for a user to see what the maximum quantity to enter
would be. For example:

- The variant has a stock level of 5.
- The user enters 7.
- Angular sets it to undefined.
- The input field disappears.
- The user is startled and doesn't know how to proceed.

But now we hide the input only if it's deliberately set to zero.
---
 .../controllers/shop_variant_controller.js.coffee          | 2 ++
 .../templates/partials/shop_variant_no_group_buy.html.haml | 6 +++---
 .../checkout/shop_variant_controller_spec.js.coffee        | 7 +++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee
index 4b5b3e6a6e..94e2686c3e 100644
--- a/app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/shop_variant_controller.js.coffee
@@ -6,6 +6,8 @@ Darkswarm.controller "ShopVariantCtrl", ($scope, $modal, Cart) ->
     return if old_value[0] == null && new_value[0] == null
     Cart.adjust($scope.variant.line_item)
 
+  $scope.variant.line_item.quantity ||= 0
+
   if $scope.variant.product.group_buy
     $scope.$watch "variant.line_item.quantity", ->
       item = $scope.variant.line_item
diff --git a/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml b/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml
index bec3b64fdc..e0f6d16aae 100644
--- a/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml
+++ b/app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml
@@ -1,11 +1,11 @@
 .small-5.medium-3.large-3.columns.variant-quantity-column.text-right{"ng-if" => "::!variant.product.group_buy"}
 
-  .variant-quantity-inputs{ng: {if: "!variant.line_item.quantity"}}
+  .variant-quantity-inputs{ng: {if: "variant.line_item.quantity == 0"}}
     %button.add-variant{type: "button", ng: {click: "add(1)", disabled: "!canAdd(1)"}}
       {{ "js.shopfront.variant.add_to_cart" | t }}
 
-  .variant-quantity-inputs{ng: {if: "variant.line_item.quantity"}}
-    %button.variant-quantity{type: "button", ng: {click: "add(-1)"}}>
+  .variant-quantity-inputs{ng: {if: "variant.line_item.quantity != 0"}}
+    %button.variant-quantity{type: "button", ng: {click: "add(-1)", disabled: "!canAdd(-1)"}}>
       -# U+FF0D Fullwidth Hyphen-Minus
       －
     %input.variant-quantity{type: "number", min: "0", max: "{{ available() }}", ng: {model: "variant.line_item.quantity"}}>
diff --git a/spec/javascripts/unit/darkswarm/controllers/checkout/shop_variant_controller_spec.js.coffee b/spec/javascripts/unit/darkswarm/controllers/checkout/shop_variant_controller_spec.js.coffee
index c1d459dabf..3ca2e6394a 100644
--- a/spec/javascripts/unit/darkswarm/controllers/checkout/shop_variant_controller_spec.js.coffee
+++ b/spec/javascripts/unit/darkswarm/controllers/checkout/shop_variant_controller_spec.js.coffee
@@ -12,12 +12,15 @@ describe "ShopVariantCtrl", ->
         on_demand: true
         product: {group_buy: true}
         line_item: {
-          quantity: 0
-          max_quantity: 0
+          quantity: undefined
+          max_quantity: undefined
         }
       }
       ctrl = $controller 'ShopVariantCtrl', {$scope: scope, $modal: $modal, Cart: null}
 
+  it "initializes the quantity for shop display", ->
+    expect(scope.variant.line_item.quantity).toEqual 0
+
   it "adds an item to the cart", ->
     scope.add 1
     expect(scope.variant.line_item.quantity).toEqual 1