spree_frontend 4.1.0.rc2 → 4.1.0.rc3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 262122d44be5ba437437f0152a0fcb82223769278216335f195ed5453da9268a
-  data.tar.gz: db27b441b75b3dd5e12dd30044de2f2f2659700c494fe10494169d0f249ebc01
+  metadata.gz: 6300d485b7d4f5e1ceab8dc942affa9be2a7fcb0cca1e233837428e230d45742
+  data.tar.gz: b5c81d760faa402320a3f2298f9c4e22eef9ec08c63e938bae635b35c989e529
 SHA512:
-  metadata.gz: 2072e4e7335566c6a158cbb38a8e85b01821d80d4f07da17fc75325e5ae417de59c0dff4cee41ff3ecdc580515e9176feb2541bc7d28573d4ed1d4526717d5e0
-  data.tar.gz: aa9493dc137d0e17b7758aa055e979d62e71a2f1df64e6a0276e3600aa28151703342afaf178e30af92c8670106f7bdb8cc67f8bd192fac695c7429054a36e34
+  metadata.gz: dbdb68dfcc5c7a71b48e2e3777428e40bbbc7f86307d3fcf55fb8d5e15070414445ea372f647b3b60819f68adc0dc37bdf6de3fc3db4c45c5e424b5f6b6edb27
+  data.tar.gz: 748be2c488b297951807df6038a97f99f48efbe2b188d19117276eeee8f260ece52dfcf2bfd38dc9bc0b6e14ecbb755c63fa3e4a721563f1fe5230070ded6585

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

@@ -4,8 +4,17 @@ Spree.ready(function ($) {
   var formUpdateCart = $('form#update-cart')
 
   if (formUpdateCart.length) {
+    var clearInvalidCouponField = function() {
+      var couponCodeField = $('#order_coupon_code');
+      var couponStatus = $('#coupon_status');
+      if (!!couponCodeField.val() && couponStatus.hasClass('alert-error')) {
+        couponCodeField.val('')
+      }
+    }
+
     $('form#update-cart a.delete').show().one('click', function () {
       $(this).parents('.shopping-cart-item').first().find('input.shopping-cart-item-quantity-input').val(0)
+      clearInvalidCouponField()
       $(this).parents('form').first().submit()
       return false
     })
@@ -17,6 +26,7 @@ Spree.ready(function ($) {
       $(targetInputs).val(newValue)
     })
     $('form#update-cart input.shopping-cart-item-quantity-input').on('change', function(e) {
+      clearInvalidCouponField()
       formUpdateCart.submit()
     })
     $('form#update-cart button.shopping-cart-item-quantity-decrease-btn').off('click').on('click', function() {
@@ -26,6 +36,7 @@ Spree.ready(function ($) {
 
       if (inputValue > 1) {
         $(input).val(inputValue - 1)
+        clearInvalidCouponField()
         formUpdateCart.submit()
       }
     })
@@ -35,6 +46,7 @@ Spree.ready(function ($) {
       var inputValue = parseInt($(input).val(), 10)
 
       $(input).val(inputValue + 1)
+      clearInvalidCouponField()
       formUpdateCart.submit()
     })
     $('form#update-cart button#shopping-cart-coupon-code-button').off('click').on('click', function(event) {

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

@@ -48,7 +48,7 @@ Spree.ready(function ($) {
       }
 
       Spree.fillStates = function (data, region) {
-        var selected, statesWithBlank
+        var selected
         var statesRequired = data.states_required
         var states = data.states
         var statePara = $('#' + region + 'state')
@@ -59,8 +59,7 @@ Spree.ready(function ($) {
         if (states.length > 0) {
           selected = parseInt(stateSelect.val())
           stateSelect.html('')
-          statesWithBlank = [{name: '', id: ''}].concat(states)
-          $.each(statesWithBlank, 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)

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

@@ -3,6 +3,8 @@ function ShippingTotalManager (input1) {
   this.input = input1
   this.shippingMethods = this.input.shippingMethods
   this.shipmentTotal = this.input.shipmentTotal
+  this.taxTotal = this.input.taxTotal
+  this.nonShipmentTax = $(this.taxTotal).data('non-shipment-tax')
   this.orderTotal = this.input.orderTotal
   this.formatOptions = {
     symbol: this.shipmentTotal.data('currency'),
@@ -15,20 +17,29 @@ function ShippingTotalManager (input1) {
 ShippingTotalManager.prototype.calculateShipmentTotal = function () {
   var checked = $(this.shippingMethods).filter(':checked')
   this.sum = 0
+  this.tax = this.parseCurrencyToFloat(this.nonShipmentTax)
   $.each(checked, function (idx, shippingMethod) {
     this.sum += this.parseCurrencyToFloat($(shippingMethod).data('cost'))
+    this.tax += this.parseCurrencyToFloat($(shippingMethod).data('tax'))
   }.bind(this))
-  return this.readjustSummarySection(this.parseCurrencyToFloat(this.orderTotal.html()), this.sum, this.parseCurrencyToFloat(this.shipmentTotal.html()))
+  return this.readjustSummarySection(
+    this.parseCurrencyToFloat(this.orderTotal.html()),
+    this.sum,
+    this.parseCurrencyToFloat(this.shipmentTotal.html()),
+    this.tax,
+    this.parseCurrencyToFloat(this.taxTotal.html())
+  )
 }
 
 ShippingTotalManager.prototype.parseCurrencyToFloat = function (input) {
   return accounting.unformat(input, this.formatOptions.decimal)
 }
 
-ShippingTotalManager.prototype.readjustSummarySection = function (orderTotal, newShipmentTotal, oldShipmentTotal) {
-  var newOrderTotal = orderTotal + (newShipmentTotal - oldShipmentTotal)
+ShippingTotalManager.prototype.readjustSummarySection = function (orderTotal, newShipmentTotal, oldShipmentTotal, newTaxTotal, oldTaxTotal) {
+  var newOrderTotal = orderTotal + (newShipmentTotal - oldShipmentTotal) + (newTaxTotal - oldTaxTotal)
+  this.taxTotal.html(accounting.formatMoney(newTaxTotal, this.formatOptions))
   this.shipmentTotal.html(accounting.formatMoney(newShipmentTotal, this.formatOptions))
-  return this.orderTotal.html(accounting.formatMoney(newOrderTotal, this.formatOptions))
+  return this.orderTotal.html(accounting.formatMoney(accounting.toFixed(newOrderTotal, 10), this.formatOptions))
 }
 
 ShippingTotalManager.prototype.bindEvent = function () {
@@ -40,6 +51,7 @@ ShippingTotalManager.prototype.bindEvent = function () {
 Spree.ready(function ($) {
   var input = {
     orderTotal: $('#summary-order-total'),
+    taxTotal: $('[data-hook="tax-total"]'),
     shipmentTotal: $('[data-hook="shipping-total"]'),
     shippingMethods: $('input[data-behavior="shipping-method-selector"]')
   }

data/app/assets/javascripts/spree/frontend/views/spree/layouts/spree_application.js

@@ -32,4 +32,34 @@ Spree.ready(function ($) {
       }
     }
   };
+
+  var searchDropdown = document.getElementById('search-dropdown')
+  var navBarCategoryLinks = document.getElementsByClassName('main-nav-bar-category-links')
+  var navBarCategoryButtons = document.getElementsByClassName('main-nav-bar-category-button')
+  var navBarCategoryImages = document.getElementsByClassName('category-image')
+  var navBarAccountIcon = [document.getElementById('account-button')]
+  var navBarCartIcon = [document.getElementById('link-to-cart')]
+  var spreeLogoImage = document.getElementsByClassName('header-spree-fluid-logo')
+  var spreeMobileNavs = document.getElementsByClassName('mobile-navigation-list-item')
+  var navbarLinks = [
+    navBarCategoryLinks,
+    navBarCategoryButtons,
+    navBarCategoryImages,
+    navBarAccountIcon,
+    navBarCartIcon,
+    spreeLogoImage,
+    spreeMobileNavs
+  ]
+
+  if (searchDropdown !== null) {
+    $.each(navbarLinks, function(index, navbarElements) {
+      $.each(navbarElements, function(index, navBarCategoryLink) {
+        navBarCategoryLink.addEventListener('click', function () {
+          document.getElementById('overlay').classList.remove('shown');
+          searchDropdown.classList.remove('shown');
+          document.querySelector('.header-spree').classList.remove('above-overlay')
+        });
+      });
+    });
+  };
 });

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

@@ -1,26 +1,44 @@
 Spree.ready(function($) {
-  var $modalCarousel = $('#productModalThumbnailsCarousel')
-  if ($modalCarousel.length) {
-    ThumbnailsCarousel($, $modalCarousel)
+  var modalCarousel = $('#productModalThumbnailsCarousel')
+  if (modalCarousel.length) {
+    ThumbnailsCarousel($, modalCarousel)
   }
 
   var activeSingleImageIndex = function(sourceWrappingClass) {
-    var $activeSingleImage = $('.' + sourceWrappingClass + ' .product-details-single [data-variant-id].active')
-    return $activeSingleImage.index()
+    var activeSingleImage = $('.' + sourceWrappingClass + ' .product-details-single [data-variant-id].active')
+    return activeSingleImage.index()
   }
 
-  var selectModalThumbnail = function(imgIndex) {
-    var $modalThumbnails = $('#productModalThumbnailsCarousel > div > div.carousel-item.product-thumbnails-carousel-item.active > div > div')
-    var $modalThumbnailsChildren = $modalThumbnails.children('[data-variant-id]')
-    if ($modalThumbnailsChildren.length > 0) {
-      $($modalThumbnailsChildren.get(imgIndex).getElementsByTagName('img')[0]).addClass('selected')
+  var selectThumbnail = function(imgIndex, carousel) {
+    var carouselPerPage = carousel.data('product-carousel-per-page')
+    var carouselItems = carousel.find('> div > div.carousel-item.product-thumbnails-carousel-item')
+    var carouselItem = carouselItems[Math.floor(imgIndex / carouselPerPage)]
+
+    carouselItems.removeClass('active')
+    $(carouselItems).find('img').removeClass('selected')
+    $(carouselItem).addClass('active')
+
+    var thumbnailsChildren = $(carouselItem).find('> div > div')
+      .children('.product-thumbnails-carousel-item-single--visible[data-variant-id]')
+    if (thumbnailsChildren.length > 0) {
+      $(thumbnailsChildren.get(imgIndex % carouselPerPage).getElementsByTagName('img')[0]).addClass('selected')
     }
   }
 
+  var selectModalThumbnail = function(imgIndex) {
+    selectThumbnail(imgIndex, modalCarousel)
+  }
+
+  var selectProductCarouselThumbnail = function() {
+    var imgIndex = activeSingleImageIndex('modal') - 1
+    var productCarousel = $('#productThumbnailsCarousel')
+    selectThumbnail(imgIndex, productCarousel)
+  }
+
   var activateModalSingleImg = function(imgIndex, targetWrappingClass) {
     $('.' + targetWrappingClass + ' .product-details-single [data-variant-id].active').removeClass('active')
-    var $modalActiveSingleImage = $($('.' + targetWrappingClass + ' .product-details-single [data-variant-id]').parent().children().get(imgIndex))
-    $modalActiveSingleImage.addClass('active')
+    var modalActiveSingleImage = $($('.' + targetWrappingClass + ' .product-details-single [data-variant-id]').parent().children().get(imgIndex))
+    modalActiveSingleImage.addClass('active')
   }
 
   $('#picturesModal').on('show.bs.modal', function() {
@@ -31,5 +49,6 @@ Spree.ready(function($) {
 
   $('#picturesModal').on('hide.bs.modal', function() {
     activateModalSingleImg(activeSingleImageIndex('modal'), 'row')
+    selectProductCarouselThumbnail()
   })
 })

data/app/assets/javascripts/spree/frontend/views/spree/shared/carousel/thumbnails.js

@@ -1,43 +1,83 @@
-function ThumbnailsCarousel($, $carousel) {
+function ThumbnailsCarousel($, carousel) {
   var VISIBLE_IMAGE_SELECTOR = '.product-thumbnails-carousel-item-single--visible img'
   var SELECTED_IMAGE_CLASS = 'selected'
   var self = this
+  var modalCarouselId = 'productModalThumbnailsCarousel'
+  var modalCarousel = $('#' + modalCarouselId)
+  var zoomClickObject = $('.product-carousel-overlay-modal-opener')
 
   this.constructor = function() {
     this.bindEventHandlers()
   }
 
   this.bindEventHandlers = function() {
-    $carousel.on('click', 'img', this.handleImageClick)
-    $carousel.on('thumbnails:ready', this.handleThumbnailsReady)
+    zoomClickObject.on('click', this.handleZoomClick)
+    carousel.on('click', 'img', this.handleImageClick)
+    carousel.on('thumbnails:ready', this.handleThumbnailsReady)
 
     $('body').on('single_carousel:slide', this.handleSingleCarouselSlide)
   }
 
   this.handleImageClick = function(event) {
-    self.selectImage($(event.target))
+    self.selectImage(event, $(event.target))
   }
 
-  this.handleThumbnailsReady = function(_event) {
-    var $image = $carousel.find(VISIBLE_IMAGE_SELECTOR).eq(0)
+  this.handleThumbnailsReady = function(event) {
+    var image = carousel.find(VISIBLE_IMAGE_SELECTOR).eq(0)
 
-    self.selectImage($image)
+    self.selectImage(event, image)
   }
 
-  this.handleSingleCarouselSlide = function(_event, imageIndex) {
-    var $image = $carousel.find('[data-product-carousel-to-slide=' + imageIndex + '] img')
+  this.handleSingleCarouselSlide = function(event, imageIndex) {
+    var image;
+    if (event.target.id === 'productModalCarousel') {
+      image = modalCarousel.find('[data-product-carousel-to-slide=' + imageIndex + '] img')
+      self.unselectModalImages()
+    } else {
+      image = carousel.find('[data-product-carousel-to-slide=' + imageIndex + '] img')
+      self.unselectThumbanilsImages()
+    }
+
+    image.addClass(SELECTED_IMAGE_CLASS)
+  }
+
+  this.selectImage = function(event, image) {
+    var clickedElement = event.target
+    var productModalThumbnailClicked = $(clickedElement).closest('.product-thumbnails-carousel').is('#' + modalCarouselId)
+
+    if (clickedElement.id === modalCarouselId || productModalThumbnailClicked) {
+      this.unselectModalImages()
+    } else {
+      this.unselectThumbanilsImages()
+    }
 
-    self.selectImage($image)
+    image.addClass(SELECTED_IMAGE_CLASS)
   }
 
-  this.selectImage = function($image) {
-    this.unselectImages()
+  this.unselectThumbanilsImages = function() {
+    carousel.find('img').removeClass(SELECTED_IMAGE_CLASS)
+  }
+
+  this.unselectModalImages = function() {
+    modalCarousel.find('img').removeClass(SELECTED_IMAGE_CLASS)
+  }
 
-    $image.addClass(SELECTED_IMAGE_CLASS)
+  this.handleZoomClick = function(event) {
+    var selectedImageId = self.getSelectedImageId()
+    var image = modalCarousel.find(VISIBLE_IMAGE_SELECTOR).eq(selectedImageId)
+    self.unselectModalImages()
+
+    image.addClass(SELECTED_IMAGE_CLASS)
   }
 
-  this.unselectImages = function() {
-    $carousel.find('img').removeClass(SELECTED_IMAGE_CLASS)
+  this.getSelectedImageId = function() {
+    var selectedImages = $('#productThumbnailsCarousel').find('img.d-block.w-100.lazyloaded.selected')
+
+    if (selectedImages.length > 1) {
+      return $(selectedImages[1]).parent()[0].dataset.productCarouselToSlide
+    } else {
+      return '0'
+    }
   }
 
   this.constructor()
@@ -61,7 +101,7 @@ Spree.ready(function($) {
       )
     }
 
-    Spree.showThumbnailsCarouselVariantImages = function($carousel, variantId) {
+    Spree.showThumbnailsCarouselVariantImages = function(carousel, variantId) {
       var carouselSlideSelector = '.product-thumbnails-carousel-item'
       var carouselSlideContainerSelector =
         '.product-thumbnails-carousel-item-content'
@@ -71,52 +111,52 @@ Spree.ready(function($) {
       var carouselPerPageAttributeName = 'data-product-carousel-per-page'
       var carouselEmptyClass = 'product-thumbnails-carousel--empty'
 
-      $carousel.carouselBootstrap4('dispose')
+      carousel.carouselBootstrap4('dispose')
       var qualifiedSlides = 0
-      var perPage = parseInt($carousel.attr(carouselPerPageAttributeName)) || 1
-      var $slides = $carousel.find(carouselSlideSelector)
+      var perPage = parseInt(carousel.attr(carouselPerPageAttributeName)) || 1
+      var slides = carousel.find(carouselSlideSelector)
 
-      $carousel
+      carousel
         .find(carouselItemSelector)
         .each(function(_itemIndex, slideElement) {
           // Switch item visibility in the carousel based on picked variant.
 
           var targetSlideIndex
-          var $slide = $(slideElement)
+          var slide = $(slideElement)
           var qualifies =
-            $slide.attr(variantIdAttributeName) === variantId ||
-            $slide.attr(isMasterVariantAttributeName) === 'true'
+            slide.attr(variantIdAttributeName) === variantId ||
+            slide.attr(isMasterVariantAttributeName) === 'true'
 
           if (qualifies) {
             qualifiedSlides += 1
-            $slide.attr(carouselToSlideAttributeName, qualifiedSlides - 1)
+            slide.attr(carouselToSlideAttributeName, qualifiedSlides - 1)
           }
 
           targetSlideIndex = Math.max(0, Math.ceil(qualifiedSlides / perPage) - 1)
-          $slide.detach()
-          $slides
+          slide.detach()
+          slides
             .eq(targetSlideIndex)
             .find(carouselSlideContainerSelector)
-            .append($slide)
-          $slide.toggleClass(enabledCarouselSingleClass, qualifies)
+            .append(slide)
+          slide.toggleClass(enabledCarouselSingleClass, qualifies)
         })
       var enabledSlidesCount = Math.ceil(qualifiedSlides / perPage)
-      $carousel
+      carousel
         .find(carouselSlideSelector)
         .each(function(slideIndex, slideElement) {
-          var $slide = $(slideElement)
-          $slide.toggleClass(
+          var slide = $(slideElement)
+          slide.toggleClass(
             enabledCarouselItemClass,
             slideIndex < enabledSlidesCount
           )
-          $slide.toggleClass(activeCarouselItemClass, slideIndex === 0)
+          slide.toggleClass(activeCarouselItemClass, slideIndex === 0)
         })
 
       // If there are no images to show after picking a variant, disable the carousel.
-      $carousel.toggleClass(carouselEmptyClass, enabledSlidesCount === 0)
+      carousel.toggleClass(carouselEmptyClass, enabledSlidesCount === 0)
 
-      $carousel.carouselBootstrap4()
-      $carousel.trigger('thumbnails:ready')
+      carousel.carouselBootstrap4()
+      carousel.trigger('thumbnails:ready')
     }
 
     $('#product-details').on('variant_id_change', function(options) {
@@ -130,8 +170,8 @@ Spree.ready(function($) {
       })
     })
 
-    var $carousel = $('#productThumbnailsCarousel')
+    var carousel = $('#productThumbnailsCarousel')
 
-    ThumbnailsCarousel($, $carousel)
+    ThumbnailsCarousel($, carousel)
   }
 })

data/app/assets/javascripts/spree/frontend/views/spree/shared/nav_bar.js

@@ -1,16 +1,25 @@
-Spree.ready(function() {
+$(document).ready(function() {
   var searchIcons = document.querySelectorAll('#nav-bar .search-icons')[0]
+  var searchDropdown = document.getElementById('search-dropdown')
 
   if (searchIcons !== undefined) {
     searchIcons.addEventListener(
       'click',
-      function() {
-        document.querySelector('.header-spree').classList.add('above-overlay')
-        document.getElementById('overlay').classList.add('shown')
-        document.getElementById('search-dropdown').classList.add('shown')
-        document.querySelector('#search-dropdown input').focus()
-      },
+      toggleSearchBar,
       false
     )
   }
+
+  function toggleSearchBar() {
+    if (searchDropdown.classList.contains('shown')) {
+      document.querySelector('.header-spree').classList.remove('above-overlay')
+      document.getElementById('overlay').classList.remove('shown')
+      searchDropdown.classList.remove('shown')
+    } else {
+      document.querySelector('.header-spree').classList.add('above-overlay')
+      document.getElementById('overlay').classList.add('shown')
+      searchDropdown.classList.add('shown')
+      document.querySelector('#search-dropdown input').focus()
+    }
+  }
 })

data/app/assets/javascripts/spree/frontend/views/spree/shared/product_added_modal.js

@@ -12,7 +12,7 @@ Spree.showProductAddedModal = function(product, variant) {
   var $modal = $(modalSelector)
 
   $modal.find(nameSelector).text(name)
-  $modal.find(priceSelector).text(price)
+  $modal.find(priceSelector).html(price)
 
   if (leadImage !== null) {
     $modal