spree_frontend 4.1.10 → 4.2.0.rc2

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

@@ -28,22 +28,24 @@ Spree.ready(function ($) {
       }
 
       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')
         }
       }
 
@@ -54,6 +56,8 @@ Spree.ready(function ($) {
         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) {
@@ -68,6 +72,7 @@ Spree.ready(function ($) {
           })
           stateSelect.prop('required', false)
           stateSelect.prop('disabled', false).show()
+          stateLabel.addClass('state-select-label')
           stateInput.hide().prop('disabled', true)
           statePara.show()
           stateSpanRequired.hide()
@@ -75,6 +80,7 @@ Spree.ready(function ($) {
 
           if (statesRequired) {
             stateSelect.addClass('required')
+            stateSelectImg.show()
             stateSpanRequired.show()
             stateSelect.prop('required', true)
           }
@@ -82,9 +88,12 @@ Spree.ready(function ($) {
           stateInput.removeClass('required')
         } else {
           stateSelect.hide().prop('disabled', true)
+          stateLabel.removeClass('state-select-label')
+          stateSelectImg.hide()
           stateInput.show()
           if (statesRequired) {
             stateSpanRequired.show()
+            stateLabel.removeClass('state-select-label')
             stateInput.addClass('required form-control')
           } else {
             stateInput.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 ? '<span class="mr-3">' + variant.display_compare_at_price + '</span>' : ''
+    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()
+  })
 })

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

@@ -1,15 +1,15 @@
-Spree.ready(function($) {
-  $('#sort-by-overlay-show-button').click(function() {
+Spree.ready(function ($) {
+  $('#sort-by-overlay-show-button').click(function () {
     $('#sort-by-overlay').show();
   });
-  $('#sort-by-overlay-hide-button').click(function() {
+  $('#sort-by-overlay-hide-button').click(function () {
     $('#sort-by-overlay').hide();
   });
 
-  $('#filter-by-overlay-show-button').click(function() {
+  $('#filter-by-overlay-show-button').click(function () {
     $('#filter-by-overlay').show();
   });
-  $('#filter-by-overlay-hide-button').click(function() {
+  $('#filter-by-overlay-hide-button').click(function () {
     $('#filter-by-overlay').hide();
   });
 
@@ -21,21 +21,91 @@ Spree.ready(function($) {
   $('#no-product-available-close-button').click(closeNoProductModal);
   $('#no-product-available-hide-button').click(closeNoProductModal);
 
-  $('.plp-overlay-card-item').click(function() {
+  function customEncodeURI(value) {
+    return encodeURI(
+      value.replace(/\s/g, '+').replace(/'/g, '%27').replace(/\$/g, '%24')
+    ).replace(/%25/g, '%');
+  }
+
+  function setNewUrl(searchParams) {
+    history.replaceState(
+      {},
+      '',
+      location.pathname +
+        '?' +
+        customEncodeURI(decodeURIComponent(searchParams.toString()))
+    );
+    Turbolinks.visit(location);
+  }
+
+  function updateFilters(event, $this, removeValue) {
+    event.preventDefault();
+    var data = $this.closest('a[data-params]').data();
+    var searchParams = new URLSearchParams(location.search);
+    var key = data.filterName;
+    var value = data.params[key].toString();
+
+    searchParams.delete('page');
+    if (!searchParams.has('menu_open') && data.params['menu_open']) {
+      searchParams.set('menu_open', data.params['menu_open']);
+    } else if (searchParams.has('menu_open') && !data.params['menu_open']) {
+      searchParams.delete('menu_open');
+    }
+
+    if (searchParams.get(key) === null || !data.multiselect) {
+      searchParams.set(key, value);
+    } else {
+      var arr = searchParams.get(key).toString().split(',');
+      var index = arr.indexOf(data.id.toString());
+
+      if (index > -1 && removeValue) {
+        arr.splice(index, 1);
+      } else {
+        arr.push(data.id.toString());
+      }
+
+      searchParams.set(key, arr.join(','));
+    }
+
+    setNewUrl(searchParams);
+  }
+
+  $('.plp-overlay-card-item').click(function (event) {
+    if (window.URLSearchParams) {
+      updateFilters(
+        event,
+        $(this),
+        $(this).hasClass('plp-overlay-card-item--selected')
+      );
+    }
     $(this).toggleClass('plp-overlay-card-item--selected');
   });
 
-  $('#filters-accordion .color-select, #plp-filters-accordion .color-select').click(function() {
-    $(this).find('.plp-overlay-color-item').toggleClass('color-select-border--selected')
+  $(
+    '#filters-accordion .color-select, #plp-filters-accordion .color-select'
+  ).click(function (event) {
+    var colorItem = $(this).find('.plp-overlay-color-item');
+    if (window.URLSearchParams) {
+      updateFilters(
+        event,
+        $(this),
+        colorItem.hasClass('color-select-border--selected')
+      );
+    }
+    colorItem.toggleClass('color-select-border--selected');
   });
 
   $('.plp-overlay-ul-li').click(function() {
-    $('.plp-overlay-ul-li--active')
-      .removeClass('plp-overlay-ul-li--active')
-      .addClass('plp-overlay-ul-li');
+    $('.plp-overlay-ul-li').removeClass('plp-overlay-ul-li--active')
+    $(this).addClass('plp-overlay-ul-li--active');
+  });
 
-    $(this)
-      .removeClass('plp-overlay-ul-li')
-      .addClass('plp-overlay-ul-li--active');
+  $('.plp-overlay-buttons .done-btn').click(function (event) {
+    if (window.URLSearchParams) {
+      event.preventDefault();
+      var searchParams = new URLSearchParams(location.search);
+      searchParams.delete('menu_open');
+      setNewUrl(searchParams);
+    }
   });
 });