Adds clear all button to the Ships To field

Closes #1702

Author: jjeffryes

css/obBase.css

@@ -4977,6 +4977,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   background: none;
   box-shadow: none;
   border: none;
+  padding: 0;
 }
 
 #ov1 .overflowHidden {

js/languages/en-US.json

@@ -97,6 +97,7 @@
   "KeywordsHelperText": "Adding tags helps your listing to be discovered in the market. You can only have one of each tag, and a maximum of 10 tags, separated by commas or the enter key.",
   "ExpirationDateHelperText": "Set a date for the listing to automatically be pulled from your store.",
   "ClearExpirationDate": "Clear Expiration Date",
+  "ClearShippingLocations": "Clear All",
   "ReturnPolicy": "Return Policy",
   "TermsAndConditions": "Terms and Conditions",
   "Photos": "Photos",

js/templates/itemEdit.html

@@ -208,6 +208,10 @@ <h5><%= polyglot.t('Shipping') %></h5>
               <div class="flexCol-4 borderRight custCol-border">
                 <div class="fieldItem">
                   <label for="shipsTo"><%= polyglot.t('ShipsTo') %></label>
+                  <div>
+                    <a class="btn btn-txtOnly btn-small js-clearShipsTo">
+                      <%= polyglot.t('ClearShippingLocations') %></a>
+                  </div>
                 </div>
               </div>
               <div class="flexCol-8">

js/views/itemEditVw.js

@@ -27,7 +27,8 @@ module.exports = baseVw.extend({
     'blur textarea': 'validateInput',
     'focus #inputExpirationDate': 'addDefaultTime',
     'click .js-itemEditClearDate': 'clearDate',
-    'change #shipsToRegions': 'selectRegions'
+    'change #shipsToRegions': 'selectRegions',
+    'click .js-clearShipsTo': 'clearShipsTo'
   },
 
   MAX_PHOTOS: 10,
@@ -210,8 +211,6 @@ module.exports = baseVw.extend({
         saveOnBlur: true,
         placeholder: window.polyglot.t('KeywordsPlaceholder'),
         onBeforeTagAdd: (event, tag) => {
-          console.log(tag);
-          console.log(tag.length);
           if(tag.length > 40) {
             app.simpleMessageModal.open({
               title: window.polyglot.t('errorMessages.tagIsTooLongHeadline'),
@@ -302,6 +301,10 @@ module.exports = baseVw.extend({
     this.$('.chosenRegions').trigger('chosen:updated');
   },
 
+  clearShipsTo: function(){
+    this.$('#shipsTo').val("").trigger('chosen:updated');
+  },
+
   addDefaultTime: function(){
     var timeInput = this.$el.find('#inputExpirationDate'),
         currentValue = timeInput.val();
@@ -314,7 +317,8 @@ module.exports = baseVw.extend({
   shipsToChange: function(e){
     var newVal = $(e.target).val() || [],
         newSelection = __.difference(newVal, this.prevShipsToVal),
-        wwNewIndex = newVal.indexOf('ALL');
+        wwNewIndex = newVal.indexOf('ALL'),
+        $shipsToWrapper = this.$('.js-shipToWrapper');
 
     //is the new value different from ALL?
     if (newSelection[0] != "ALL"){
@@ -331,9 +335,9 @@ module.exports = baseVw.extend({
     this.prevShipsToVal = newVal;
 
     if (newVal.length) {
-      this.$('.js-shipToWrapper').removeClass('invalid');
+      $shipsToWrapper.removeClass('invalid');
     } else {
-      this.$('.js-shipToWrapper').addClass('invalid');
+      $shipsToWrapper.addClass('invalid');
     }
   },