Reworking the checkout

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

@@ -3,10 +3,7 @@ Darkswarm.controller "CheckoutCtrl", ($scope, storage, CheckoutFormState, Order,
   storage.bind $scope, "Order.order", {storeName: "order_#{Order.order.id}"}
   $scope.order = Order.order # Ordering is important
 
-  if CurrentUser
-    $scope.enabled = true 
-  else
-    $scope.enabled = false 
+  $scope.enabled = if CurrentUser then true else false
 
   $scope.purchase = (event)->
     event.preventDefault()

app/views/checkout/_billing.html.haml

@@ -1,16 +1,21 @@
 %fieldset#billing
   %ng-form{"ng-controller" => "BillingCtrl", name: "billing"}
+
+    %legend{"ng-class" => "{valid: billing.$valid}"}
+      Billing 
+      %i.fi-x
+      %i.fi-check
+
     %accordion-group{"is-open" => "accordion.billing",
-      "ng-class" => "{valid: billing.$valid}"}
+      "ng-class" => "{valid: billing.$valid, open: accordion.billing}"}
       %accordion-heading
         .row
-          .large-6.columns
-            Billing
-            %i.fi-x
-            %i.fi-check
-          .large-6.columns.text-right
+          .large-12.columns
             {{ order.bill_address.address1 }}
             {{ order.bill_address.city }}
+
+            icon up / icon down
+
       = f.fields_for :bill_address, @order.bill_address do |ba|
         .row
           .large-12.columns
@@ -35,4 +40,4 @@
 
       .row
         .large-12.columns.text-right
-          %button{"ng-disabled" => "details.$invalid", "ng-click" => "next($event)"} Next
+          %button{"ng-disabled" => "billing.$invalid", "ng-click" => "next($event)"} Next

app/views/checkout/_details.html.haml

@@ -1,16 +1,21 @@
 %fieldset#details
   %ng-form{"ng-controller" => "DetailsCtrl", name: "details"}
+
+    %legend{"ng-class" => "{valid: details.$valid}"}
+      Customer Details
+      %i.fi-x
+      %i.fi-check
+
     %accordion-group{"is-open" => "accordion.details", 
-      "ng-class" => "{valid: details.$valid}"}
+      "ng-class" => "{valid: details.$valid, open: accordion.details}"}
       %accordion-heading
         .row
-          .large-6.columns
-            Customer Details
-            %i.fi-x
-            %i.fi-check
-          .large-6.columns.text-right
+          .large-12.columns
             {{ order.bill_address.firstname }}
             {{ order.bill_address.lastname }}
+            
+            icon up / icon down
+
       .row
         .large-6.columns
           = validated_input 'Email', 'order.email', type: :email, "ofn-focus" => "accordion['details']"

app/views/checkout/_order.rabl

@@ -6,7 +6,7 @@ node :display_total do
 end
 
 node :payment_method_id do
-  current_order.payments.first.andand.payment_method_id || current_order.distributor.payment_methods.first.andand.id
+  current_order.payments.first.andand.payment_method_id
 end
 
 child current_order.bill_address => :bill_address do

app/views/checkout/_payment.html.haml

@@ -1,20 +1,26 @@
 %fieldset#payment
   %ng-form{"ng-controller" => "PaymentCtrl", name: "payment"}
+
+    %legend{"ng-class" => "{valid: payment.$valid}"}
+      Payment 
+      %i.fi-x
+      %i.fi-check
+
     %accordion-group{"is-open" => "accordion.payment",
-      "ng-class" => "{valid: payment.$valid}"}
+      "ng-class" => "{valid: payment.$valid, open: accordion.payment}"}
       %accordion-heading
         .row
-          .large-6.columns
-            Payment Details 
-            %i.fi-x
-            %i.fi-check
-          .large-6.columns.text-right
+          .large-12.columns
             {{ Order.paymentMethod().name }}
+
+            icon up / icon down
+
       - current_order.available_payment_methods.each do |method|
         .row
           .large-12.columns
             %label
               = radio_button_tag "order[payments_attributes][][payment_method_id]", method.id, false,
+                required: true,
                 "ng-model" => "order.payment_method_id"
               = method.name
         .row{"ng-show" => "order.payment_method_id == #{method.id}"}

app/views/checkout/_shipping.html.haml

@@ -1,15 +1,19 @@
 %fieldset#shipping
   %ng-form{"ng-controller" => "ShippingCtrl", name: "shipping"}
+
+    %legend{"ng-class" => "{valid: shipping.$valid}"}
+      Shipping
+      %i.fi-x
+      %i.fi-check
+
     %accordion-group{"is-open" => "accordion.shipping",
-      "ng-class" => "{valid: shipping.$valid}"}
+      "ng-class" => "{valid: shipping.$valid, open: accordion.shipping}"}
       %accordion-heading
         .row
-          .large-6.columns
-            Shipping 
-            %i.fi-x
-            %i.fi-check
-          .large-6.columns.text-right
+          .large-12.columns
             {{ Order.shippingMethod().name }}
+            icon up / icon down
+
       - for ship_method, i in current_distributor.shipping_methods.uniq
         .row
           .large-12.columns
@@ -59,4 +63,4 @@
                 = validated_input "Phone", "order.ship_address.phone"
       .row
         .large-12.columns.text-right
-          %button{"ng-disabled" => "details.$invalid", "ng-click" => "next($event)", "ofn-focus" => "accordion['shipping']"} Next
+          %button{"ng-disabled" => "shipping.$invalid", "ng-click" => "next($event)", "ofn-focus" => "accordion['shipping']"} Next