From 8a069787d1fa2d8beb0c83bc4bb661b137cdfd1a Mon Sep 17 00:00:00 2001
From: Matt-Yorkley <9029026+Matt-Yorkley@users.noreply.github.com>
Date: Mon, 5 Aug 2019 21:04:54 +0100
Subject: [PATCH] Cart dropdown now closes when clicking outside it.

---
 .../directives/cart_popover.js.coffee         |  8 --------
 .../directives/cart_toggle.js.coffee          | 19 +++++++++++++++++++
 app/views/shared/menu/_cart.html.haml         |  2 +-
 .../consumer/shopping/shopping_spec.rb        |  1 +
 4 files changed, 21 insertions(+), 9 deletions(-)
 delete mode 100644 app/assets/javascripts/darkswarm/directives/cart_popover.js.coffee
 create mode 100644 app/assets/javascripts/darkswarm/directives/cart_toggle.js.coffee

diff --git a/app/assets/javascripts/darkswarm/directives/cart_popover.js.coffee b/app/assets/javascripts/darkswarm/directives/cart_popover.js.coffee
deleted file mode 100644
index 1ef1b3f9c3..0000000000
--- a/app/assets/javascripts/darkswarm/directives/cart_popover.js.coffee
+++ /dev/null
@@ -1,8 +0,0 @@
-Darkswarm.directive "cart", ->
-  # Toggles visibility of the "cart" popover
-  restrict: 'A'
-  link: (scope, elem, attr)->
-    scope.open = false
-    elem.bind 'click', ->
-      scope.$apply ->
-        scope.open = !scope.open
diff --git a/app/assets/javascripts/darkswarm/directives/cart_toggle.js.coffee b/app/assets/javascripts/darkswarm/directives/cart_toggle.js.coffee
new file mode 100644
index 0000000000..cb7e574d87
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/cart_toggle.js.coffee
@@ -0,0 +1,19 @@
+Darkswarm.directive "cartToggle", ($document) ->
+  # Toggles visibility of the "cart" popover
+  restrict: 'A'
+  link: (scope, elem, attr)->
+    scope.open = false
+
+    $document.bind 'click', (event) ->
+      cart_button = elem[0]
+      element_and_parents = [event.target, event.target.parentElement, event.target.parentElement.parentElement]
+      cart_button_clicked = (element_and_parents.indexOf(cart_button) != -1)
+
+      if cart_button_clicked
+        scope.$apply ->
+          scope.open = !scope.open
+      else
+        scope.$apply ->
+          scope.open = false
+
+      return
diff --git a/app/views/shared/menu/_cart.html.haml b/app/views/shared/menu/_cart.html.haml
index 865ceb4074..be7d5bf5fe 100644
--- a/app/views/shared/menu/_cart.html.haml
+++ b/app/views/shared/menu/_cart.html.haml
@@ -1,5 +1,5 @@
 %span.cart-span{"ng-controller" => "CartCtrl", "ng-class" => "{ dirty: Cart.dirty || Cart.empty(), 'pure-dirty': Cart.dirty }"}
-  %a#cart.icon{cart: true}
+  %a#cart.icon{"cart-toggle" => true}
     %span
       = t '.cart'
     %span.count
diff --git a/spec/features/consumer/shopping/shopping_spec.rb b/spec/features/consumer/shopping/shopping_spec.rb
index 3c95fec9c2..2fd36ea299 100644
--- a/spec/features/consumer/shopping/shopping_spec.rb
+++ b/spec/features/consumer/shopping/shopping_spec.rb
@@ -112,6 +112,7 @@ feature "As a consumer I want to shop with a distributor", js: true do
             # that we are not filling in the quantity on the outgoing row
             page.should_not have_selector "tr.product-cart"
             within('product:not(.ng-leave)') { fill_in "variants[#{variant.id}]", with: 1 }
+            show_cart
             within("li.cart") { page.should have_content with_currency(19.99) }
           end