spree_frontend 4.1.13 → 4.2.0.rc4

data/app/assets/javascripts/spree/frontend/checkout.js

@@ -12,7 +12,7 @@ Spree.disableSaveOnClick = function () {
 }
 
 Spree.enableSave = function () {
-  $('form.edit_order').data('submitted', false).find(':submit, :image').attr('disabled', false).addClass('primary').removeClass('disabled')
+  $('#checkout form').data('submitted', false).find(':submit, :image').attr('disabled', false).addClass('primary').removeClass('disabled')
 }
 
 Spree.ready(function () {

data/app/assets/javascripts/spree/frontend/checkout/address.js

@@ -1,16 +1,24 @@
-Spree.ready(function ($) {
-  Spree.onAddress = function () {
+Spree.ready(function($) {
+  Spree.onAddress = function() {
     if ($('#checkout_form_address').length) {
-      Spree.updateState = function (region) {
+      Spree.updateState = function(region) {
         var countryId = getCountryId(region)
         if (countryId != null) {
           if (Spree.Checkout[countryId] == null) {
             $.ajax({
-              async: false, method: 'GET', url: Spree.pathFor('/api/v2/storefront/countries/' + countryId + '?include=states'), dataType: 'json'
-            }).done(function (data) {
-              var json = data.included; var xStates = []
+              async: false,
+              method: 'GET',
+              url: Spree.pathFor('/api/v2/storefront/countries/' + countryId + '?include=checkout_zone_applicable_states'),
+              dataType: 'json'
+            }).done(function(data) {
+              var json = data.included;
+              var xStates = [];
               for (var i = 0; i < json.length; i++) {
-                var obj = json[i]; xStates.push({ 'id': obj.id, 'name': obj.attributes.name })
+                var obj = json[i];
+                xStates.push({
+                  id: obj.id,
+                  name: obj.attributes.name
+                })
               }
               Spree.Checkout[countryId] = {
                 states: xStates,
@@ -27,91 +35,108 @@ Spree.ready(function ($) {
         }
       }
 
-      Spree.toggleZipcode = function (data, region) {
+      Spree.toggleZipcode = function(data, region) {
+        var requiredIndicator = $('span#required_marker').first().text()
         var zipcodeRequired = data.zipcode_required
         var zipcodePara = $('#' + region + 'zipcode')
         var zipcodeInput = zipcodePara.find('input')
-        var zipcodeSpanRequired = zipcodePara.find('abbr')
+        var zipcodeLabel = zipcodePara.find('label')
+        var zipcodeLabelText = zipcodeInput.attr('aria-label')
 
         if (zipcodeRequired) {
-          zipcodeInput.prop('required', true)
-          zipcodeSpanRequired.show()
-          // zipcodeInput.prop('disabled', false)
-          // zipcodePara.show()
+          var zipText = zipcodeLabelText + ' ' + requiredIndicator
+          zipcodeInput.prop('required', true).attr('placeholder', zipText)
+          zipcodeLabel.text('')
+          zipcodeLabel.text(zipText)
+          zipcodeInput.addClass('required')
         } else {
-          zipcodeInput.val('')
-          zipcodeInput.prop('required', false)
-          zipcodeSpanRequired.hide()
-          // zipcodeInput.prop('disabled', true)
-          // zipcodePara.hide()
+          zipcodeInput.prop('required', false).attr('placeholder', zipcodeLabelText)
+          zipcodeLabel.text('')
+          zipcodeLabel.text(zipcodeLabelText)
+          zipcodeInput.removeClass('required')
         }
       }
 
-      Spree.fillStates = function (data, region) {
+      Spree.fillStates = function(data, region) {
         var selected
         var statesRequired = data.states_required
         var states = data.states
         var statePara = $('#' + region + 'state')
         var stateSelect = statePara.find('select')
         var stateInput = statePara.find('input')
+        var stateLabel = statePara.find('label')
+        var stateSelectImg = statePara.find('img')
         var stateSpanRequired = statePara.find('abbr')
 
         if (states.length > 0) {
           selected = parseInt(stateSelect.val())
           stateSelect.html('')
-          $.each(states, function (idx, state) {
+          $.each(states, function(idx, state) {
             var opt = $(document.createElement('option')).attr('value', state.id).html(state.name)
             if (selected.toString(10) === state.id.toString(10)) {
               opt.prop('selected', true)
             }
             stateSelect.append(opt)
           })
-          stateSelect.prop('required', false)
-          stateSelect.prop('disabled', false).show()
-          stateInput.hide().prop('disabled', true)
-          statePara.show()
-          stateSpanRequired.hide()
-          stateSelect.removeClass('required')
+          // If States are listed for the Country selected kill the input field
+          stateInput.hide()
+            .prop('disabled', true)
+            .prop('required', false)
+            .val('')
 
-          if (statesRequired) {
-            stateSelect.addClass('required')
-            stateSpanRequired.show()
-            stateSelect.prop('required', true)
-          }
-          stateSelect.removeClass('hidden')
-          stateInput.removeClass('required')
+          // Activate the State select dropdown.
+          statePara.show()
+          stateSelect.prop('required', statesRequired)
+            .prop('disabled', false)
+            .show()
+          stateSelectImg.show()
+          stateLabel.addClass('state-select-label')
+          stateSpanRequired.toggle(statesRequired)
         } else {
-          stateSelect.hide().prop('disabled', true)
-          stateInput.show()
+          // If no States are listed in the database for the country selected
+          // and a State is not required => (United Kingdom).
+          // Kill the State selector and input field.
+          stateSelectImg.hide()
+          stateSelect.hide()
+            .prop('disabled', true)
+            .prop('required', false)
+            .find('option').remove()
+
+          stateInput.prop('disabled', true)
+            .prop('required', false)
+            .hide()
+
+          // Toggle visibility of States parent element based on State required.
+          statePara.toggle(statesRequired)
+
           if (statesRequired) {
+            // If a State is required, but none are listed in the database
+            // for the country selected => (Hong Kong)
+            // Enable the State input field, set it to required.
+            stateInput.show()
+              .prop('disabled', false)
+              .prop('required', true)
             stateSpanRequired.show()
-            stateInput.addClass('required form-control')
-          } else {
-            stateInput.val('')
-            stateSpanRequired.hide()
-            stateInput.removeClass('required')
+            stateLabel.removeClass('state-select-label') // required for floating label
           }
-          statePara.toggle(!!statesRequired)
-          stateInput.prop('disabled', !statesRequired)
-          stateInput.removeClass('hidden')
-          stateSelect.removeClass('required')
         }
       }
-      $('#bcountry select').change(function () {
+      $('#bcountry select').change(function() {
         Spree.updateState('b')
       })
-      $('#scountry select').change(function () {
+      $('#scountry select').change(function() {
         Spree.updateState('s')
       })
       Spree.updateState('b')
 
       var orderUseBilling = $('input#order_use_billing')
-      orderUseBilling.change(function () {
+      orderUseBilling.change(function() {
         updateShippingFormState(orderUseBilling)
       })
       updateShippingFormState(orderUseBilling)
     }
-    function updateShippingFormState (orderUseBilling) {
+
+    function updateShippingFormState(orderUseBilling) {
       if (orderUseBilling.is(':checked')) {
         $('#shipping .inner').hide()
         $('#shipping .inner input, #shipping .inner select').prop('disabled', true)
@@ -121,7 +146,8 @@ Spree.ready(function ($) {
         Spree.updateState('s')
       }
     }
-    function getCountryId (region) {
+
+    function getCountryId(region) {
       return $('#' + region + 'country select').val()
     }
   }

data/app/assets/javascripts/spree/frontend/checkout/payment.js

@@ -1,45 +1,72 @@
+/* global Cleave */
+var CARD_NUMBER_SELECTOR = '.cardNumber'
+var CARD_EXPIRATION_SELECTOR = '.cardExpiry'
+var CARD_CODE_SELECTOR = '.cardCode'
+
 //= require spree/frontend/coupon_manager
 Spree.ready(function ($) {
   Spree.onPayment = function () {
     if ($('#checkout_form_payment').length) {
       if ($('#existing_cards').length) {
-        $('#existing_cards').hide()
         $('#payment-methods').hide()
-        $("#payment-method-fields label[data-type='card']").click(function() {
-          $('#existing_cards').show()
-          $('.payment-sources').show()
-          $('.existing-cc-radio').first().prop('checked', true)
-        })
-        $("#payment-method-fields label:not([data-type='card'])").click(function() {
-          $('#existing_cards').hide()
-          $('#payment-methods').hide()
-          $('.payment-sources').hide()
-          $('.existing-cc-radio').prop('checked', false)
-          $('#use_existing_card_no').prop('checked', false)
-        })
         $('.existing-cc-radio').click(function () {
           $(this).prop('checked', true)
           $('#use_existing_card_no').prop('checked', false)
           $('#use_existing_card_yes').prop('checked', true)
           $('#payment-methods').hide()
+          Spree.enableSave()
         })
         $('#use_existing_card_no').click(function () {
           $('#payment-methods').show()
           $('.existing-cc-radio').prop('checked', false)
           $('#use_existing_card_yes').prop('checked', false)
+          Spree.enableSave()
         })
       }
-      $('.cardNumber').payment('formatCardNumber')
-      $('.cardExpiry').payment('formatCardExpiry')
-      $('.cardCode').payment('formatCardCVC')
-      $('.cardNumber').change(function () {
-        $(this).parent().siblings('.ccType').val($.payment.cardType(this.value))
-      })
+
+      if ($(CARD_NUMBER_SELECTOR).length > 0 &&
+          $(CARD_EXPIRATION_SELECTOR).length > 0 &&
+          $(CARD_CODE_SELECTOR).length > 0) {
+        /* eslint-disable no-new */
+        new Cleave(CARD_NUMBER_SELECTOR, {
+          creditCard: true,
+          onCreditCardTypeChanged: function (type) {
+            $('.ccType').val(type)
+          }
+        })
+        /* eslint-disable no-new */
+        new Cleave(CARD_EXPIRATION_SELECTOR, {
+          date: true,
+          datePattern: ['m', 'Y']
+        })
+        /* eslint-disable no-new */
+        new Cleave(CARD_CODE_SELECTOR, {
+          numericOnly: true,
+          blocks: [3]
+        })
+      }
+
       $('input[type="radio"][name="order[payments_attributes][][payment_method_id]"]').click(function () {
-        if ($('#payment_method_' + this.value).find('fieldset').children().length == 0) {
-          $('.payment-sources').hide()
-        } else {
-          $('.payment-sources').show()
+        $('#payment-methods').hide()
+        $('.payment-sources').hide()
+        Spree.enableSave()
+        if ($('#payment_method_' + this.value).find('fieldset').children().length !== 0) {
+          if (this.closest('label').dataset.type === 'card') {
+            if ($('#existing_cards').length) {
+              $('.existing-cc-radio').first().prop('checked', true);
+              $('#use_existing_card_no').prop('checked', false)
+              $('#use_existing_card_yes').prop('checked', true)
+              $('#existing_cards').show();
+              $('#payment-methods').hide();
+              $('.payment-sources').show()
+            }
+          } else {
+            $('.existing-cc-radio').prop('checked', false);
+            $('#use_existing_card_no').prop('checked', false);
+            $('#existing_cards').hide();
+            $('#payment-methods').show();
+            $('.payment-sources').show()
+          }
         }
         $('#payment-methods li').hide()
         if (this.checked) {

data/app/assets/javascripts/spree/frontend/login.js

@@ -0,0 +1,5 @@
+Spree.ready(function ($) {
+  $('#new_spree_user').on('submit', function() {
+    sessionStorage.setItem('page-invalidated', 'true')
+  })
+})

data/app/assets/javascripts/spree/frontend/main_nav_bar.js

@@ -0,0 +1,86 @@
+Spree.ready(function () {
+  var $navLinks = $('.main-nav-bar .nav-link.dropdown-toggle')
+  var $dropdownMenu = $('.main-nav-bar .dropdown-menu')
+  var SHOW_CLASS = 'show'
+  var DATA_TOGGLE_ATTR = 'data-toggle'
+  var DATA_TOGGLE_VALUE = 'dropdown'
+
+  function handleMouseInOutNavLinks(event) {
+    var $navLink = $(this)
+    var $parent = $navLink.parent()
+    var $dropdown = $navLink.next()
+    var eventType = event.type
+
+    if (eventType === 'mouseenter') {
+      $navLink.removeAttr(DATA_TOGGLE_ATTR)
+      $parent.addClass(SHOW_CLASS)
+      $dropdown.addClass(SHOW_CLASS)
+    } else if (eventType === 'mouseleave') {
+      var isDropdownHovered = $dropdown.filter(':hover').length
+      var isNavLinkHovered = $navLink.filter(':hover').length
+      if (isDropdownHovered || isNavLinkHovered) {
+        return
+      }
+      $navLink.attr(DATA_TOGGLE_ATTR, DATA_TOGGLE_VALUE)
+      $parent.removeClass(SHOW_CLASS)
+      $dropdown.removeClass(SHOW_CLASS)
+    }
+  }
+
+  function handleFocusinNavLink() {
+    var $navLink = $(this)
+    var $parent = $navLink.parent()
+    var $dropdown = $navLink.next()
+
+    $parent.addClass(SHOW_CLASS)
+    $dropdownMenu.removeClass(SHOW_CLASS)
+    $dropdown.addClass(SHOW_CLASS)
+  }
+
+  function handleFocusoutNavLink() {
+    var $navLink = $(this)
+    var $parent = $navLink.parent()
+    var $dropdown = $navLink.next()
+
+    setTimeout(function() {
+      var dropdownHasActiveElement = $.contains($dropdown[0], document.activeElement)
+
+      if (!dropdownHasActiveElement) {
+        $parent.removeClass(SHOW_CLASS)
+        $dropdown.removeClass(SHOW_CLASS)
+      }
+    }, 0)
+
+  }
+
+  function handleMouseleaveDropdown() {
+    var $dropdown = $(this)
+    var isDropdownHovered = $dropdown.filter(':hover').length
+    var isNavLinkHovered = $dropdown.prev().filter(':hover').length
+    if (isDropdownHovered || isNavLinkHovered) {
+      return
+    }
+    $dropdown.parent().removeClass(SHOW_CLASS)
+    $dropdown.removeClass(SHOW_CLASS)
+  }
+
+  function handleFocusoutDropdownItems() {
+    var $dropdownLink = $(this)
+    setTimeout(function() {
+      var $parentDropdown = $dropdownLink.parents('.dropdown-menu')
+      var $navLink = $parentDropdown.parent()
+      var parentHasActiveElement = $.contains($parentDropdown[0], document.activeElement)
+
+      if (!parentHasActiveElement) {
+        $navLink.removeClass(SHOW_CLASS)
+        $parentDropdown.removeClass(SHOW_CLASS)
+      }
+    }, 0)
+  }
+
+  $navLinks.on('mouseenter mouseleave', handleMouseInOutNavLinks);
+  $navLinks.on('focusin', handleFocusinNavLink)
+  $navLinks.on('focusout', handleFocusoutNavLink)
+  $dropdownMenu.on('mouseleave', handleMouseleaveDropdown)
+  $dropdownMenu.on('focusout', '.dropdown-item', handleFocusoutDropdownItems)
+})

data/app/assets/javascripts/spree/frontend/multi_currency.js

@@ -0,0 +1,13 @@
+Spree.ready(function () {
+  return $('#currency').on('change', function() {
+    return $.ajax({
+      type: 'GET',
+      url: $(this).data('href'),
+      data: {
+        currency: $(this).val()
+      }
+    }).done(function () {
+      window.location.reload()
+    })
+  })
+})

data/app/assets/javascripts/spree/frontend/views/spree/product/related.js

@@ -1,6 +1,6 @@
 //= require spree/frontend/viewport
 
-Spree.fetchRelatedProductcs = function (id, htmlContainer) {
+Spree.fetchRelatedProducts = function (id, htmlContainer) {
   return $.ajax({
     url: Spree.routes.product_related(id)
   }).done(function (data) {
@@ -21,7 +21,7 @@ document.addEventListener('turbolinks:load', function () {
     if (!relatedProductsFetched && relatedProductsContainer.length && relatedProductsEnabled && relatedProductsEnabled === 'true' && productId !== '') {
       $(window).on('resize scroll', function () {
         if (!relatedProductsFetched && relatedProductsContainer.isInViewport()) {
-          Spree.fetchRelatedProductcs(productId, relatedProductsContainer)
+          Spree.fetchRelatedProducts(productId, relatedProductsContainer)
           relatedProductsFetched = true
         }
       })

data/app/assets/javascripts/spree/frontend/views/spree/products/cart_form.js

@@ -1,5 +1,6 @@
 //= require spree/api/storefront/cart
 //= require ../shared/product_added_modal
+//= require ../shared/variant_select
 
 var ADD_TO_CART_FORM_SELECTOR = '.add-to-cart-form'
 var VARIANT_ID_SELECTOR = '[name="variant_id"]'
@@ -20,21 +21,36 @@ function CartForm($, $cartForm) {
   }
 
   this.initialize = function() {
+    this.urlQueryMatchFound = false
     this.selectedOptionValueIds = []
     this.variants = JSON.parse($cartForm.attr('data-variants'))
     this.withOptionValues = Boolean($cartForm.find(OPTION_VALUE_SELECTOR).length)
 
     this.$addToCart = $cartForm.find(ADD_TO_CART_SELECTOR)
     this.$price = $cartForm.find('.price.selling')
+    this.$compareAtPrice = $cartForm.find('.compare-at-price')
     this.$variantIdInput = $cartForm.find(VARIANT_ID_SELECTOR)
 
-    this.initializeForm()
+    this.initializeQueryParamsCheck()
+    this.initializeColorVarianTooltip()
+
+    if (this.urlQueryMatchFound) {
+      this.setSelectedVariantFromUrl()
+    } else {
+      this.initializeForm()
+    }
   }
 
   this.initializeForm = function() {
     if (this.withOptionValues) {
       var $optionValue = this.firstCheckedOptionValue()
       this.applyCheckedOptionValue($optionValue, true)
+      var singleOptionValues = this.getSingleOptionValuesFromEachOptionType()
+      if (singleOptionValues.length) {
+        singleOptionValues.forEach(function($value) {
+          this.applyCheckedOptionValue($value, true)
+        })
+      }
     } else {
       this.updateAddToCart()
       this.triggerVariantImages()
@@ -46,7 +62,9 @@ function CartForm($, $cartForm) {
   }
 
   this.handleOptionValueClick = function(event) {
-    this.applyCheckedOptionValue($(event.currentTarget))
+    var currentTarget = $(event.currentTarget)
+    this.applyCheckedOptionValue(currentTarget)
+    currentTarget.blur()
   }.bind(this)
 
   this.applyCheckedOptionValue = function($optionValue, initialUpdate) {
@@ -61,6 +79,8 @@ function CartForm($, $cartForm) {
     if (this.shouldTriggerVariantImage($optionValue)) {
       this.triggerVariantImages()
     }
+
+    if (initialUpdate) $optionValue.prop('checked', true)
   }
 
   this.saveCheckedOptionValue = function($optionValue) {
@@ -120,6 +140,17 @@ function CartForm($, $cartForm) {
     return $cartForm.find(OPTION_VALUE_SELECTOR + '[data-option-type-index=0]' + ':checked')
   }
 
+  this.getSingleOptionValuesFromEachOptionType = function() {
+    var singleOptionValues = []
+    this.optionTypes().each(function(_, optionType) {
+      var $optionValues = $(optionType).find(OPTION_VALUE_SELECTOR)
+      if ($optionValues.length === 1) {
+        singleOptionValues.push($optionValues.first())
+      }
+    })
+    return singleOptionValues
+  }
+
   this.shouldTriggerVariantImage = function($optionValue) {
     return $optionValue.data('is-color') || !this.firstCheckedOptionValue().data('is-color')
   }
@@ -220,7 +251,12 @@ function CartForm($, $cartForm) {
 
     if (!variant) return
 
+    var shouldDisplayCompareAtPrice = variant.should_display_compare_at_price
+
     this.$price.html(variant.display_price)
+
+    var compareAtPriceContent = shouldDisplayCompareAtPrice ? variant.display_compare_at_price : ''
+    this.$compareAtPrice.html(compareAtPriceContent)
   }
 
   this.updateVariantId = function() {
@@ -243,21 +279,24 @@ Spree.ready(function($) {
     )
   }
 
+  Spree.addToCartFormSubmissionOptions = function() {
+    return {};
+  }
+
   $('#product-details').on('submit', ADD_TO_CART_FORM_SELECTOR, function(event) {
-    var variantId
-    var quantity
-    var $cartForm = $(event.currentTarget)
-    var $addToCart = $cartForm.find(ADD_TO_CART_SELECTOR)
+    var $cartForm = $(event.currentTarget);
+    var $addToCart = $cartForm.find(ADD_TO_CART_SELECTOR);
+    var variantId = $cartForm.find(VARIANT_ID_SELECTOR).val();
+    var quantity = parseInt($cartForm.find('[name="quantity"]').val());
+    var options = Spree.addToCartFormSubmissionOptions();
 
     event.preventDefault()
-    $addToCart.prop('disabled', true)
-    variantId = $cartForm.find(VARIANT_ID_SELECTOR).val()
-    quantity = parseInt($cartForm.find('[name="quantity"]').val())
+    $addToCart.prop('disabled', true);
     Spree.ensureCart(function() {
       SpreeAPI.Storefront.addToCart(
         variantId,
         quantity,
-        {}, // options hash - you can pass additional parameters here, your backend
+        options, // options hash - you can pass additional parameters here, your backend
         // needs to be aware of those, see API docs:
         // https://github.com/spree/spree/blob/master/api/docs/v2/storefront/index.yaml#L42
         function(response) {
@@ -291,4 +330,8 @@ Spree.ready(function($) {
 
     CartForm($, $cartForm)
   })
+
+  document.addEventListener('turbolinks:request-start', function () {
+    Spree.hideProductAddedModal()
+  })
 })