From 75b250d3fe70dce76234d6e1846756b6dc12df6a Mon Sep 17 00:00:00 2001
From: Rohan Mitchell <rohan@rohanmitchell.com>
Date: Thu, 6 Nov 2014 12:53:02 +1100
Subject: [PATCH] When submitting checkout, if field is invalid, show errors

---
 .../checkout/checkout_controller.js.coffee    |  4 ++-
 .../darkswarm/mixins/fieldset_mixin.js.coffee |  2 +-
 app/views/checkout/_billing.html.haml         |  2 +-
 app/views/checkout/_details.html.haml         |  2 +-
 app/views/checkout/_form.html.haml            |  3 +--
 app/views/checkout/_payment.html.haml         |  2 +-
 app/views/checkout/_shipping.html.haml        |  2 +-
 .../checkout_controller_spec.js.coffee        | 25 +++++++++++++++----
 8 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/darkswarm/controllers/checkout/checkout_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/checkout/checkout_controller.js.coffee
index 11f65fe358..2ab0da6ff6 100644
--- a/app/assets/javascripts/darkswarm/controllers/checkout/checkout_controller.js.coffee
+++ b/app/assets/javascripts/darkswarm/controllers/checkout/checkout_controller.js.coffee
@@ -1,5 +1,6 @@
 Darkswarm.controller "CheckoutCtrl", ($scope, storage, Checkout, CurrentUser, CurrentHub) ->
   $scope.Checkout = Checkout
+  $scope.submitted = false
 
   # Bind to local storage
   $scope.fieldsToBind = ["bill_address", "email", "payment_method_id", "shipping_method_id", "ship_address"]
@@ -19,4 +20,5 @@ Darkswarm.controller "CheckoutCtrl", ($scope, storage, Checkout, CurrentUser, Cu
 
   $scope.purchase = (event)->
     event.preventDefault()
-    $scope.Checkout.submit()
+    $scope.submitted = true
+    $scope.Checkout.submit() if $scope.checkout.$valid
diff --git a/app/assets/javascripts/darkswarm/mixins/fieldset_mixin.js.coffee b/app/assets/javascripts/darkswarm/mixins/fieldset_mixin.js.coffee
index b9f59e93a8..ee4058221c 100644
--- a/app/assets/javascripts/darkswarm/mixins/fieldset_mixin.js.coffee
+++ b/app/assets/javascripts/darkswarm/mixins/fieldset_mixin.js.coffee
@@ -20,7 +20,7 @@ window.FieldsetMixin = ($scope)->
     not ($scope.dirty(path) and $scope.invalid(path))
 
   $scope.dirty = (name)->
-    $scope.field(name).$dirty
+    $scope.field(name).$dirty || $scope.submitted
 
   $scope.invalid = (name)->
     $scope.field(name).$invalid
diff --git a/app/views/checkout/_billing.html.haml b/app/views/checkout/_billing.html.haml
index c052eb1b05..f9b42827db 100644
--- a/app/views/checkout/_billing.html.haml
+++ b/app/views/checkout/_billing.html.haml
@@ -1,7 +1,7 @@
 %fieldset#billing
   %ng-form{"ng-controller" => "BillingCtrl", name: "billing"}
 
-    %h5{"ng-class" => "{valid: billing.$valid, dirty: billing.$dirty}"}
+    %h5{"ng-class" => "{valid: billing.$valid, dirty: billing.$dirty || submitted}"}
       %span.right
         %label.label.round.alert.right
           %i.ofn-i_009-close
diff --git a/app/views/checkout/_details.html.haml b/app/views/checkout/_details.html.haml
index 6eb149804f..20407cbfd5 100644
--- a/app/views/checkout/_details.html.haml
+++ b/app/views/checkout/_details.html.haml
@@ -1,7 +1,7 @@
 %fieldset#details
   %ng-form{"ng-controller" => "DetailsCtrl", name: "details"}
 
-    %h5{"ng-class" => "{valid: details.$valid, dirty: details.$dirty}"}
+    %h5{"ng-class" => "{valid: details.$valid, dirty: details.$dirty || submitted}"}
       %span.right
         %label.label.round.alert.right
           %i.ofn-i_009-close
diff --git a/app/views/checkout/_form.html.haml b/app/views/checkout/_form.html.haml
index af81993fb0..4d7749760c 100644
--- a/app/views/checkout/_form.html.haml
+++ b/app/views/checkout/_form.html.haml
@@ -12,7 +12,6 @@
   = render "checkout/shipping", f: f
   = render "checkout/payment", f: f
   %p
-    %button.button.primary{type: :submit,
-    "ng-disabled" => "checkout.$invalid"}
+    %button.button.primary{type: :submit}
       Place order now
     / {{ checkout.$valid }}
diff --git a/app/views/checkout/_payment.html.haml b/app/views/checkout/_payment.html.haml
index 2ebc956b59..e58e014f50 100644
--- a/app/views/checkout/_payment.html.haml
+++ b/app/views/checkout/_payment.html.haml
@@ -1,7 +1,7 @@
 %fieldset#payment
   %ng-form{"ng-controller" => "PaymentCtrl", name: "payment"}
 
-    %h5{"ng-class" => "{valid: payment.$valid, dirty: payment.$dirty}"}
+    %h5{"ng-class" => "{valid: payment.$valid, dirty: payment.$dirty || submitted}"}
       %span.right
         %label.label.round.alert.right
           %i.ofn-i_009-close
diff --git a/app/views/checkout/_shipping.html.haml b/app/views/checkout/_shipping.html.haml
index b535908c53..9183f588f8 100644
--- a/app/views/checkout/_shipping.html.haml
+++ b/app/views/checkout/_shipping.html.haml
@@ -1,7 +1,7 @@
 %fieldset#shipping
   %ng-form{"ng-controller" => "ShippingCtrl", name: "shipping"}
 
-    %h5{"ng-class" => "{valid: shipping.$valid, dirty: shipping.$dirty}"}
+    %h5{"ng-class" => "{valid: shipping.$valid, dirty: shipping.$dirty || submitted}"}
       %span.right
         %label.label.round.alert.right
           %i.ofn-i_009-close
diff --git a/spec/javascripts/unit/darkswarm/controllers/checkout/checkout_controller_spec.js.coffee b/spec/javascripts/unit/darkswarm/controllers/checkout/checkout_controller_spec.js.coffee
index fdbc4742a3..9cd2c5a06c 100644
--- a/spec/javascripts/unit/darkswarm/controllers/checkout/checkout_controller_spec.js.coffee
+++ b/spec/javascripts/unit/darkswarm/controllers/checkout/checkout_controller_spec.js.coffee
@@ -33,13 +33,28 @@ describe "CheckoutCtrl", ->
         spyOn(storage, "bind").andCallThrough()
         scope = $rootScope.$new() 
         ctrl = $controller 'CheckoutCtrl', {$scope: scope, Checkout: Checkout, CurrentUser: {}}
-  
-    it "delegates to the service on submit", ->
+
+    describe "submitting", ->
       event = 
         preventDefault: ->
-      spyOn(Checkout, "submit")
-      scope.purchase(event)
-      expect(Checkout.submit).toHaveBeenCalled()
+
+      beforeEach ->
+        spyOn(Checkout, "submit")
+        scope.submitted = false
+
+      it "delegates to the service when valid", ->
+        scope.checkout =
+          $valid: true
+        scope.purchase(event)
+        expect(Checkout.submit).toHaveBeenCalled()
+        expect(scope.submitted).toBe(true)
+
+      it "does nothing when invalid", ->
+        scope.checkout =
+          $valid: false
+        scope.purchase(event)
+        expect(Checkout.submit).not.toHaveBeenCalled()
+        expect(scope.submitted).toBe(true)
 
     it "is enabled", ->
       expect(scope.enabled).toEqual true