spree_frontend 4.1.15 → 4.2.0.beta

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

@@ -1,3 +1,8 @@
+/* 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 () {
@@ -22,20 +27,40 @@ Spree.ready(function ($) {
           $('#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 () {
+        Spree.enableSave()
         if ($('#payment_method_' + this.value).find('fieldset').children().length == 0) {
           $('.payment-sources').hide()
         } else {

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/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/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);
+    }
   });
 });

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

@@ -26,3 +26,10 @@ Spree.showProductAddedModal = function(product, variant) {
 
   $modal.modal()
 }
+
+Spree.hideProductAddedModal = function() {
+  var modalSelector = '.product-added-modal'
+  var $modal = $(modalSelector)
+
+  $modal.modal('hide')
+}

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

@@ -0,0 +1,93 @@
+var getQueryString = window.location.search
+var urlParams = new URLSearchParams(getQueryString)
+var variantIdFromUrl = urlParams.get('variant')
+
+this.initializeQueryParamsCheck = function () {
+  if (urlParams.has('variant')) verifyVariantIdMatch()
+}
+
+function verifyVariantIdMatch() {
+  this.variants.forEach(function(variant) {
+    if (parseInt(variant.id) === parseInt(variantIdFromUrl)) this.urlQueryMatchFound = true
+  })
+}
+
+this.setSelectedVariantFromUrl = function () {
+  this.selectedOptions = []
+
+  this.getVariantOptionsById(variantIdFromUrl)
+  this.sortArrayByOptionTypeIndex(this.selectedOptions)
+  this.clickListOptions(this.selectedOptions)
+  this.updateStructuredData()
+}
+
+this.getVariantOptionsById = function(variantIdFromUrl) {
+  this.variants.forEach(function(variant) {
+    if (parseInt(variant.id) === parseInt(variantIdFromUrl)) this.sortOptionValues(variant.option_values)
+  })
+}
+
+this.sortOptionValues = function(optVals) {
+  optVals.forEach(buildArray)
+}
+
+function buildArray(item) {
+  var container = document.querySelector('ul#product-variants')
+  var target = container.querySelectorAll('.product-variants-variant-values-radio')
+
+  target.forEach(function(inputTag) {
+    if (parseInt(inputTag.value) === item.id && inputTag.dataset.presentation === item.presentation) {
+      this.selectedOptions.push(inputTag)
+    }
+  })
+}
+
+this.sortArrayByOptionTypeIndex = function (arrayOfOptions) {
+  arrayOfOptions.sort(function (a, b) {
+    return a.dataset.optionTypeIndex > b.dataset.optionTypeIndex ? 1 : -1;
+  })
+}
+
+this.clickListOptions = function(list) {
+  list.forEach(function (item) {
+    item.checked = true
+    var $optionListItem = $(item)
+    this.applyCheckedOptionValue($optionListItem)
+  })
+}
+
+this.updateStructuredData = function() {
+  var variant = this.selectedVariant()
+  var host = window.location.host
+  var schemaData = document.body.querySelector("script[type='application/ld+json']")
+  var obj = JSON.parse(schemaData.firstChild.nodeValue)
+  var firstLayer = obj[0]
+  var offers = obj[0].offers
+
+  if (variant.purchasable) {
+    offers.availability = 'InStock'
+  } else {
+    offers.availability = 'OutOfStock'
+  }
+
+  if (variant.sku.length > 1) {
+    firstLayer.sku = variant.sku
+  }
+
+  firstLayer.url = window.location.href
+  offers.url = window.location.href
+  offers.price = variant.price.amount
+
+  if (Array.isArray(variant.images) && (variant.images.length)) {
+    firstLayer.image = host + variant.images[0].url_product
+  }
+
+  schemaData.firstChild.nodeValue = JSON.stringify(obj)
+}
+
+this.initializeColorVarianTooltip = function() {
+  var colorVariants = $('.color-select-label[data-toggle="tooltip"]')
+  colorVariants.tooltip({
+    placement: 'bottom'
+  })
+}

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

@@ -3,6 +3,7 @@
 //= require popper
 //= require bootstrap
 //= require jquery.payment
+//= require cleave
 //= require spree
 //= require polyfill.min
 //= require fetch.umd
@@ -36,6 +37,8 @@
 //= require spree/frontend/views/spree/shared/product_added_modal
 //= require spree/frontend/views/spree/shared/quantity_select
 //= require spree/frontend/turbolinks_scroll_fix
+//= require spree/frontend/main_nav_bar
+//= require spree/frontend/login
 
 Spree.routes.api_tokens = Spree.pathFor('api_tokens')
 Spree.routes.ensure_cart = Spree.pathFor('ensure_cart')

data/app/assets/stylesheets/spree/frontend/application.scss

@@ -8,6 +8,7 @@
 @import "spree/frontend/mixins";
 @import "spree/frontend/functions";
 @import "spree/frontend/margins";
+@import "spree/frontend/flags/flag-icon";
 
 @import "spree/frontend/components-bootstrap/carousel";
 @import "spree/frontend/components-bootstrap/button";
@@ -25,11 +26,13 @@
 @import "spree/frontend/views/spree/shared/header";
 @import "spree/frontend/views/spree/shared/login";
 @import "spree/frontend/views/spree/shared/nav_bar";
+@import "spree/frontend/views/spree/shared/search_form";
 @import "spree/frontend/views/spree/shared/order_details";
 @import "spree/frontend/views/spree/shared/main_nav_bar";
 @import "spree/frontend/views/spree/errors/not_found";
 @import "spree/frontend/views/spree/shared/carousel/thumbnails";
 @import "spree/frontend/views/spree/shared/carousel/single";
+@import "spree/frontend/views/spree/shared/change_store";
 @import "spree/frontend/views/spree/home/index";
 @import "spree/frontend/views/spree/user_passwords/user_passwords";
 @import "spree/frontend/views/spree/user_sessions/new";
@@ -37,6 +40,7 @@
 @import "spree/frontend/components-custom/headers";
 @import "spree/frontend/components-custom/inputs";
 @import "spree/frontend/views/spree/checkout/registration";
+@import "spree/frontend/views/spree/checkout/delivery";
 @import "spree/frontend/views/spree/checkout/confirm";
 @import "spree/frontend/views/spree/checkout/payment";
 @import "spree/frontend/views/spree/orders/edit";

data/app/assets/stylesheets/spree/frontend/components-bootstrap/carousel.scss

@@ -15,6 +15,10 @@
   }
   &-vertically-animated {
     // Source: https://stackoverflow.com/questions/42910076/bootstrap-4-alpha-6-vertical-carousel
+    .carousel-item {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
     .carousel-item-next.carousel-item-left,
     .carousel-item-prev.carousel-item-right {
       -webkit-transform: translate3d(0, 0, 0);