From 3ce7e967772946728422d3e4e68fde1efd7ab778 Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 20 Apr 2020 21:22:18 +0200
Subject: [PATCH] Add some debounce and an onwheel hack to product add to
 basket field

Debounce ensures we don't get a million requests if the up/down buttons are clicked rapidly. The onwheel hack adds some protection against scrolling triggering the quantity up/down. See: https://stackoverflow.com/a/51076231
---
 .../partials/shop_variant_no_group_buy.html.haml  |  2 ++
 .../shop_variant_with_group_buy.html.haml         |  4 ++++
 spec/features/consumer/shopping/shopping_spec.rb  | 15 +++++++++++----
 3 files changed, 17 insertions(+), 4 deletions(-)

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 2e7e49a0ca..8ba787f20b 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
@@ -6,6 +6,8 @@
   min: 0,
   placeholder: "0",
   "ofn-disable-scroll" => true,
+  "ng-debounce" => "500",
+  onwheel: "this.blur()",
   "ng-model" => "variant.line_item.quantity",
   "ofn-on-hand" => "{{variant.on_demand && 9999 || variant.on_hand }}",
   "ng-disabled" => "!variant.on_demand && variant.on_hand == 0",
diff --git a/app/assets/javascripts/templates/partials/shop_variant_with_group_buy.html.haml b/app/assets/javascripts/templates/partials/shop_variant_with_group_buy.html.haml
index 169b33391c..c0cc46ac13 100644
--- a/app/assets/javascripts/templates/partials/shop_variant_with_group_buy.html.haml
+++ b/app/assets/javascripts/templates/partials/shop_variant_with_group_buy.html.haml
@@ -9,6 +9,8 @@
       "ng-model" => "variant.line_item.quantity",
       placeholder: "{{::'shop_variant_quantity_min' | t}}",
       "ofn-disable-scroll" => true,
+      "ng-debounce" => "500",
+      onwheel: "this.blur()",
       "ofn-on-hand" => "{{variant.on_demand && 9999 || variant.on_hand }}",
       name: "variants[{{::variant.id}}]", id: "variants_{{::variant.id}}"}
     %span.bulk-input
@@ -19,6 +21,8 @@
       "ng-model" => "variant.line_item.max_quantity",
       placeholder: "{{::'shop_variant_quantity_max' | t}}",
       "ofn-disable-scroll" => true,
+      "ng-debounce" => "500",
+      onwheel: "this.blur()",
       min: "{{variant.line_item.quantity}}",
       name: "variant_attributes[{{::variant.id}}][max_quantity]",
       id: "variants_{{::variant.id}}_max"}
diff --git a/spec/features/consumer/shopping/shopping_spec.rb b/spec/features/consumer/shopping/shopping_spec.rb
index b8a6727727..432f750f17 100644
--- a/spec/features/consumer/shopping/shopping_spec.rb
+++ b/spec/features/consumer/shopping/shopping_spec.rb
@@ -246,24 +246,25 @@ feature "As a consumer I want to shop with a distributor", js: true do
         before do
           add_variant_to_order_cycle(exchange, variant)
           set_order_cycle(order, oc1)
+          set_order(order)
           visit shop_path
         end
 
         it "should save group buy data to the cart and display it on shopfront reload" do
           # -- Quantity
           fill_in "variants[#{variant.id}]", with: 6
+          wait_for_debounce
           expect(page).to have_in_cart product.name
           wait_until { !cart_dirty }
 
-          li = Spree::Order.order(:created_at).last.line_items.order(:created_at).last
-          expect(li.quantity).to eq(6)
+          expect(order.reload.line_items.first.quantity).to eq(6)
 
           # -- Max quantity
           fill_in "variant_attributes[#{variant.id}][max_quantity]", with: 7
+          wait_for_debounce
           wait_until { !cart_dirty }
 
-          li = Spree::Order.order(:created_at).last.line_items.order(:created_at).last
-          expect(li.max_quantity).to eq(7)
+          expect(order.reload.line_items.first.max_quantity).to eq(7)
 
           # -- Reload
           visit shop_path
@@ -536,4 +537,10 @@ feature "As a consumer I want to shop with a distributor", js: true do
     expect(page).to have_no_content "This shop is for customers only."
     expect(page).to have_content product.name
   end
+
+  def wait_for_debounce
+    # The auto-submit on these specific form elements (add to cart) now has a small built-in
+    # waiting period before submitting the data...
+    sleep 0.6
+  end
 end