[SLWP] Add js to add message dependent on item count

Keeps running total of items selected and warns of cost change

https://3.basecamp.com/4020879/buckets/33314444/todos/6618280655

templates/web/base/waste/bulky/items.html

@@ -9,7 +9,16 @@
 [% IF property %]
   [% INCLUDE 'waste/_address_display.html' %]
 [% END %]
-
+[% IF cobrand.moniker == 'sutton' || cobrand.moniker == 'kingston' %]
+[% SET cfg = c.cobrand.wasteworks_config %]
+<div
+  data-base-price="[% cfg.base_price %]"
+  data-band1-price="[% cfg.band1_price %]"
+  data-band1-max="[% cfg.band1_max %]"
+  data-items-per-collection-max="[% cfg.items_per_collection_max %]"
+  id="band_pricing_data">
+</div>
+[% END %]
 <div class="govuk-warning-text due" style="max-width:550px">
   <div class="govuk-warning-text__img">
     <span class="govuk-warning-text__icon" aria-hidden="true">i</span>
@@ -95,6 +104,9 @@
     <hr>
   </div>
   [% END %]
+  [% IF c.cobrand.moniker == 'kingston' OR c.cobrand.moniker == 'sutton' %]
+  <p id="band-pricing-info"></p>
+  [% END %]
   <button type="button" id="add-new-item" class="btn-secondary govuk-!-margin-bottom-3" aria-label="Add item">+
     [% IF c.cobrand.moniker == 'kingston' OR c.cobrand.moniker == 'sutton' ~%]
       Add another item

web/js/waste.js

@@ -125,6 +125,35 @@ $(function() {
         }
     }
 
+    function display_band_pricing() {
+        var band_pricing = $('#band_pricing_data');
+
+        if (!band_pricing) {
+            return;
+        } else {
+            var base_price = band_pricing.data('base-price') / 100;
+            var base_max = band_pricing.data('items-per-collection-max');
+            var band1_max = band_pricing.data('band1-max');
+            var message = '';
+            var current_selection = $('.bulky-item-wrapper:visible').length;
+            if (current_selection && current_selection < band1_max) {
+                message = current_selection + ' ' + (current_selection === 1 ? 'item' : 'items') + ' selected - you can add up to ' +
+                (base_max - current_selection) + ' more items. Adding another item will not increase the cost';
+            } else if (current_selection && current_selection === band1_max) {
+                message = current_selection + ' items selected - you can add up to ' +
+                (base_max - current_selection) + ' more items. Adding another item will increase the cost to £' +
+                base_price.toFixed(2);
+            } else if (current_selection && (current_selection > band1_max && current_selection <= base_max)) {
+                message = current_selection + ' items selected - you can add up to ' +
+                (base_max - current_selection) + ' more items.';
+            }
+            else {
+                message = '';
+            }
+            $('#band-pricing-info').text(message);
+        }
+    }
+
     $(function() {
         maxNumItems = $('.bulky-item-wrapper').length;
 
@@ -134,6 +163,7 @@ $(function() {
             // To display message if option has a data-extra message
             update_extra_message($this);
             updateTotal();
+            display_band_pricing();
         });
 
         // Add items
@@ -155,6 +185,7 @@ $(function() {
             $wrapper.find('select.js-autocomplete').val('');
             disableAddItemButton();
             updateTotal();
+            display_band_pricing();
         });
     });
 
@@ -180,6 +211,7 @@ $(function() {
         });
 
         updateTotal();
+        display_band_pricing();
         disableAddItemButton();
     });
 })();