Adding alert to order summary, notifying user of remaining time to make changes

app/assets/stylesheets/darkswarm/checkout.css.sass

@@ -6,23 +6,25 @@
   background-color: #e1f0f5
   padding: 1em
   width: 100%
+  border: none
+  color: inherit
 
 checkout
   display: block
 
-  @media all and (max-width: 640px) 
-    &.row .row 
+  @media all and (max-width: 640px)
+    &.row .row
       margin-left: 0
       margin-right: 0
-  
+
   orderdetails
     .button, table
       width: 100%
-    @media all and (max-width: 640px) 
+    @media all and (max-width: 640px)
       form.edit_order
         border: 1px solid $disabled-bright
         margin-bottom: 2rem
-  
+
   #details, #billing, #shipping, #payment
     border: 0
     margin: 1em 0
@@ -34,20 +36,20 @@ checkout
     margin: 0
     padding: 0.65em
     background: #f7f7f7
-  
-    .label 
+
+    .label
       font-size: 1em
       padding: 0.3rem 0.35rem 0.275rem
 
     // Logic to turn on & off the alerts for success against each fieldset
 
-    label, label.alert, label.success, &.valid label.alert, &.dirty label.success 
+    label, label.alert, label.success, &.valid label.alert, &.dirty label.success
       display: none
 
-    &.dirty label.alert 
+    &.dirty label.alert
       display: inline
-    &.dirty.valid label.alert 
-      display: none 
+    &.dirty.valid label.alert
+      display: none
     &.valid label.success
       display: inline
 
@@ -60,7 +62,7 @@ checkout
     text-align: left
 
   // Logic to swap out up / down accordion icons
-  //Foundation overrides 
+  //Foundation overrides
   dd > a
     @include csstrans
     background: $disabled-light !important
@@ -68,7 +70,7 @@ checkout
   dd > a:hover
     background: $disabled-v-dark !important
     color: white
-  
+
   dd
     span.accordion-up
       display: none
@@ -79,4 +81,3 @@ checkout
         display: inline
       span.accordion-down
         display: none
-

app/helpers/spree/orders_helper.rb

@@ -35,7 +35,7 @@ module Spree
         path: changeable_orders_link_path,
         order: changeable_orders.first.number,
         shop: current_distributor.name,
-        oc_close: l(current_order_cycle.orders_close_at, format: :long))
+        oc_close: l(current_order_cycle.orders_close_at, format: "%b %d, %Y %H:%M"))
     end
   end
 end

app/views/spree/shared/_order_details.html.haml

@@ -86,6 +86,11 @@
 %br
 .row
   .columns.large-12
+    - if order.changes_allowed?
+      .alert-box.order-summary{ "ofn-inline-alert" => true, "ng-show" => "visible" }
+        = t(:orders_changeable_orders_alert_html, oc_close: l(order.order_cycle.orders_close_at, format: "%b %d, %Y %H:%M"))
+        %a.close{ "ng-click" => "close()" } ×
+
     = form_for order, html: {id: 'update-order', name: 'update_order_form' } do |order_form|
       - if order.changes_allowed?
         = render 'spree/orders/form', order_form: order_form

config/locales/en.yml

@@ -898,6 +898,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
   shop_changeable_orders_alert_html:
     one: Your order with <a href='%{path}' target='_blank'>%{shop} / %{order}</a> is open for review. You can make changes until %{oc_close}.
     other: You have <a href='%{path}' target='_blank'>%{count} orders with %{shop}</a> currently open for review.
+  orders_changeable_orders_alert_html: This order has been confirmed, but you can make changes until <strong>%{oc_close}</strong>.
 
   products_clear_all: Clear all
   products_showing: "Showing:"