Rewriting shopfront alert regarding changeable orders to be dynamic

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

@@ -10,7 +10,7 @@ Darkswarm.controller "OrderCycleCtrl", ($scope, $timeout, OrderCycle) ->
       $("#order_cycle_id").trigger("openTrigger")
 
 
-Darkswarm.controller "OrderCycleChangeCtrl", ($scope, $timeout, OrderCycle, Products, Variants, Cart) ->
+Darkswarm.controller "OrderCycleChangeCtrl", ($scope, $timeout, OrderCycle, Products, Variants, Cart, ChangeableOrdersAlert) ->
   # Track previous order cycle id for use with revertOrderCycle()
   $scope.previous_order_cycle_id = OrderCycle.order_cycle.order_cycle_id
   $scope.$watch 'order_cycle.order_cycle_id', (newValue, oldValue)->
@@ -31,3 +31,4 @@ Darkswarm.controller "OrderCycleChangeCtrl", ($scope, $timeout, OrderCycle, Prod
     Cart.clear()
     Products.update()
     Cart.reloadFinalisedLineItems()
+    ChangeableOrdersAlert.reload()

app/assets/javascripts/darkswarm/directives/changeable_order_alert.js.coffee

@@ -0,0 +1,5 @@
+Darkswarm.directive "changeableOrdersAlert", (ChangeableOrdersAlert) ->
+  restrict: "C"
+  scope: true
+  link: (scope, element, attrs) ->
+    scope.alert = ChangeableOrdersAlert

app/assets/javascripts/darkswarm/services/changeable_orders_alert.js.coffee

@@ -0,0 +1,14 @@
+Darkswarm.factory 'ChangeableOrdersAlert', ($http) ->
+  new class ChangeableOrdersAlert
+    html: ''
+    visible: true
+
+    constructor: ->
+      @reload()
+
+    reload: ->
+      $http.get('/shop/changeable_orders_alert').then (response) =>
+        @html = response.data.trim()
+
+    close: =>
+      @visible = false

app/assets/stylesheets/darkswarm/shop.css.scss

@@ -110,6 +110,10 @@
     }
   }
 
+  .alert-box.changeable-orders-alert {
+    margin-bottom: 0px;
+  }
+
   .alert-box.shopfront-message {
     border: 2px solid $clr-turquoise;
     border-radius: 5px;

app/controllers/shop_controller.rb

@@ -37,6 +37,10 @@ class ShopController < BaseController
     end
   end
 
+  def changeable_orders_alert
+    render layout: false
+  end
+
   private
 
   def filtered_json(products_json)

app/helpers/spree/orders_helper.rb

@@ -19,9 +19,10 @@ module Spree
 
     def changeable_orders
       # Only returns open order for the current user + shop + oc combo
-      return [] unless spree_current_user && current_distributor && current_order_cycle
-      return [] unless current_distributor.allow_order_changes?
-      Spree::Order.complete.where(
+      return @changeable_orders unless @changeable_orders.nil?
+      return @changeable_orders = [] unless spree_current_user && current_distributor && current_order_cycle
+      return @changeable_orders = [] unless current_distributor.allow_order_changes?
+      @changeable_orders = Spree::Order.complete.where(
         state: 'complete',
         user_id: spree_current_user.id,
         distributor_id: current_distributor.id,
@@ -33,6 +34,7 @@ module Spree
     end
 
     def shop_changeable_orders_alert_html
+      return "" unless changeable_orders.any?
       t(:shop_changeable_orders_alert_html,
         count: changeable_orders.count,
         path: changeable_orders_link_path,

app/views/enterprises/shop.html.haml

@@ -8,10 +8,9 @@
 = inject_shop_enterprises
 
 %shop.darkswarm
-  - if changeable_orders.any?
-    .alert-box.info{ "ofn-inline-alert" => true, ng: { show: "visible" } }
-      = shop_changeable_orders_alert_html
-      %a.close{ ng: { click: "close()" } } ×
+  .alert-box.changeable-orders-alert.info.animate-show{ ng: { show: "alert.visible && alert.html" } }
+    %span{ ng: { bind: { html: "alert.html" } } }
+    %a.close{ ng: { click: "alert.close()" } } ×
 
   - content_for :order_cycle_form do
 

app/views/shop/changeable_orders_alert.html.haml

@@ -0,0 +1 @@
+= shop_changeable_orders_alert_html

config/routes.rb

@@ -28,6 +28,7 @@ Openfoodnetwork::Application.routes.draw do
     get :products
     post :order_cycle
     get :order_cycle
+    get :changeable_orders_alert
   end
 
   resources :producers, only: [:index] do