Reworking our page structure to work better with Angular controllers

app/assets/javascripts/darkswarm/controllers/checkout_controller.js.coffee

@@ -2,5 +2,7 @@ angular.module("Checkout").controller "CheckoutCtrl", ($scope, $rootScope) ->
   $scope.require_ship_address = false
   $scope.shipping_method = -1
   $scope.payment_method = -1
+
   $scope.shippingMethodChanged = ->
    $scope.require_ship_address = $("#order_shipping_method_" + $scope.shipping_method).attr("data-require-ship-address")
+

app/assets/javascripts/darkswarm/controllers/summary_controller.js.coffee

@@ -0,0 +1,4 @@
+angular.module("Checkout").controller "SummaryCtrl", ($scope) ->
+  $scope.purchase = (event)->
+    event.preventDefault()
+    console.log "test"

app/views/shop/checkout/_form.html.haml

@@ -1,4 +1,4 @@
-%checkout{"ng-app" => "Checkout", "ng-controller" => "CheckoutCtrl"}
+%checkout{"ng-controller" => "CheckoutCtrl"}
   = form_for @order, url: "test" do |f|
     .large-12.columns
       %fieldset#details

app/views/shop/checkout/_summary.html.haml

@@ -1,27 +1,23 @@
-%form
-  %fieldset
-    %legend Your Order
-
-    %table
-      %tr
-        %th Cart subtotal
-        %td= @order.display_item_total
-
-      - checkout_adjustments_for_summary(@order).each do |adjustment|
+%orderdetails{"ng-controller" => "SummaryCtrl"}
+  = form_for @order, url: "#", html: {"ng-submit" => "purchase($event)"} do |f|
+    %fieldset
+      %legend Your Order
+      %table
         %tr
-          %th= adjustment.label 
-          %td= adjustment.display_amount.to_html
+          %th Cart subtotal
+          %td= @order.display_item_total
 
-      %tr
-        %th Cart total 
-        %td= @order.display_total.to_html
-    
-
-      - if @order.price_adjustment_totals.present?
-        - @order.price_adjustment_totals.each do |label, total|
+        - checkout_adjustments_for_summary(@order).each do |adjustment|
           %tr
-            %th= label
-            %td= total
-
-    %a.button Purchase
+            %th= adjustment.label 
+            %td= adjustment.display_amount.to_html
+        %tr
+          %th Cart total 
+          %td= @order.display_total.to_html
+        - if @order.price_adjustment_totals.present?
+          - @order.price_adjustment_totals.each do |label, total|
+            %tr
+              %th= label
+              %td= total
 
+      = f.submit "Purchase", class: "button"

app/views/shop/checkout/edit.html.haml

@@ -1,4 +1,4 @@
-%checkout.darkswarm
+.darkswarm
   - content_for :order_cycle_form do
     %strong.avenir
       Order ready on
@@ -6,22 +6,20 @@
 
   = render partial: "shop/details"
    
-  .row
-    .large-9.columns
-      - unless spree_current_user
+  %checkout{"ng-app" => "Checkout"}
+    .row
+      .large-9.columns
+        - unless spree_current_user
+          .row
+            %section#checkout_login
+              .large-6.columns
+                = render partial: "shop/checkout/login"
+            %section#checkout_signup
+              .large-6.columns
+                = render partial: "shop/checkout/signup"
         .row
-          %section#checkout_login
-            .large-6.columns
-              = render partial: "shop/checkout/login"
-          %section#checkout_signup
-            .large-6.columns
-              = render partial: "shop/checkout/signup"
+          = render partial: "shop/checkout/form"
 
-
-      .row
-        = render partial: "shop/checkout/form"
-
-
-    .large-3.columns
-      .row
-        = render partial: "shop/checkout/summary"
+      .large-3.columns
+        .row
+          = render partial: "shop/checkout/summary"

spec/features/consumer/shopping/checkout_spec.rb

@@ -147,17 +147,29 @@ feature "As a consumer I want to check out my cart", js: true do
       let(:pm1) { create(:payment_method, distributors: [distributor]) }
       let(:pm2) { create(:payment_method, distributors: [distributor]) }
 
-      it "shows all available payment methods" do
+      before do
         pm1 # Lazy evaluation of ze create()s
         pm2
         visit "/shop/checkout"
+      end
+
+      it "shows all available payment methods" do
         page.should have_content pm1.name
         page.should have_content pm2.name
       end
+
+      describe "Purchase" do
+        it "re-renders with errors when we submit the incomplete form" do
+          click_button "Purchase"
+          current_path.should == "/shop/checkout"
+          page.should have_content "We could not process your order"
+        end
+      end
     end
   end
 end
 
+
 def select_distributor
   visit "/"
   click_link distributor.name