spree_frontend 4.2.0.rc1 → 4.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e6310325fadb8490372ab3956820adacc3f2863efafc90657479af4154fecf2c
-  data.tar.gz: fc6a855e4f78e5f08dd5e1df605199a1ca3cdef09e7f3e62daf41f532c825f15
+  metadata.gz: b202f99393b22f252f8c79ce9dbb68bdb3886df0095db558b7aeb54649d7442a
+  data.tar.gz: b6bf3f9b0dff2c97e90773fe58113d589711bb830ce921211b447b73b1a24631
 SHA512:
-  metadata.gz: dad2b913fb4f1ac3ec06fc49586c1918b5a3fe68393b65231ac7f52348b74cd6b9ea083890afa857a85bbe7f94a59dd4a379bc5b4b146a3dd6a3eb6b2b9201f4
-  data.tar.gz: bc89753cb7503a7823d1ac2af023f23bdd1d9a022d8351393967e878845faa8ce8ee6bbc82510278b2454d795cb804c2aa236e9b730b1ce78864f373ab133419
+  metadata.gz: 6ca9c497131e513e80a043e7dae75e7e3dacff782fc0d4111fa1c4883c68db5db58f351a734065accb375855cb3e05ec3d080453777865cf5a51d81507fa103a
+  data.tar.gz: 459e4adc0b271ee193f9e99c7bec8b044d45ffc94449e897fcdc8ca1d1a2c696f13bc7adda5be001e59eaf5f3fdd07647c8a6b45890b1539990a5633393205da

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

@@ -15,6 +15,8 @@
 //= require spree/frontend/api_tokens
 //= require spree/frontend/carousel-noconflict
 //= require spree/frontend/cart
+//= require spree/frontend/locale
+//= require spree/frontend/currency
 //= require spree/frontend/checkout
 //= require spree/frontend/checkout/address
 //= require spree/frontend/checkout/address_book
@@ -45,5 +47,13 @@ Spree.routes.ensure_cart = Spree.pathFor('ensure_cart')
 Spree.routes.api_v2_storefront_cart_apply_coupon_code = Spree.pathFor('api/v2/storefront/cart/apply_coupon_code')
 Spree.routes.api_v2_storefront_cart_remove_coupon_code = Spree.pathFor('api/v2/storefront/cart/remove_coupon_code')
 Spree.routes.product = function(id) { return Spree.pathFor('products/' + id) }
-Spree.routes.product_related = function(id) { return Spree.routes.product(id) + '/related' }
+Spree.routes.product_related = function(id) { return Spree.pathFor('products/' + id + '/related') }
 Spree.routes.product_carousel = function (taxonId) { return Spree.pathFor('product_carousel/' + taxonId) }
+Spree.routes.set_locale = function(locale) { return Spree.pathFor('locale/set?switch_to_locale=' + locale) }
+Spree.routes.set_currency = function(currency) { return Spree.pathFor('currency/set?switch_to_currency=' + currency) }
+
+Spree.showProgressBar = function () {
+  if (!Turbolinks.supported) { return }
+  Turbolinks.controller.adapter.progressBar.setValue(0)
+  Turbolinks.controller.adapter.progressBar.show()
+}

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

@@ -1,6 +1,6 @@
 Spree.fetchAccount = function () {
   return $.ajax({
-    url: Spree.pathFor('account_link')
+    url: Spree.localizedPathFor('account_link')
   }).done(function (data) {
     Spree.accountFetched = true
     return $('#link-to-account').html(data)

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

@@ -3,6 +3,21 @@
 Spree.ready(function ($) {
   var formUpdateCart = $('form#update-cart')
 
+  function buildEventTriggerObject(dataset, quantity) {
+    if (!dataset || !quantity) return false
+
+    var triggerObject = {
+      type: 'product_remove_from_cart',
+      variant_sku: dataset.variantSku,
+      variant_name: dataset.variantName,
+      variant_price: dataset.variantPrice,
+      variant_options: dataset.variantOptions,
+      variant_quantity: quantity
+    }
+
+    return triggerObject
+  }
+
   if (formUpdateCart.length) {
     var clearInvalidCouponField = function() {
       var couponCodeField = $('#order_coupon_code');
@@ -12,9 +27,16 @@ Spree.ready(function ($) {
       }
     }
 
-    formUpdateCart.find('a.delete').show().one('click', function () {
+    formUpdateCart.find('a.delete').show().one('click', function (event) {
+      var itemId = $(this).attr('data-id')
+      var link = $(event.currentTarget);
+      var quantityInputs = $("form#update-cart input.shopping-cart-item-quantity-input[data-id='" + itemId + "']")
+      var quantity = $(quantityInputs).val()
       $(this).parents('.shopping-cart-item').first().find('input.shopping-cart-item-quantity-input').val(0)
       clearInvalidCouponField()
+      if (link[0] && link[0].dataset && quantity) {
+        link.trigger(buildEventTriggerObject(link[0].dataset, quantity))
+      }
       formUpdateCart.submit()
       return false
     })
@@ -101,7 +123,7 @@ Spree.ready(function ($) {
 
 Spree.fetchCart = function () {
   return $.ajax({
-    url: Spree.pathFor('cart_link')
+    url: Spree.localizedPathFor('cart_link')
   }).done(function (data) {
     Spree.cartFetched = true
     return $('#link-to-cart').html(data)

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.localizedPathFor('/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,7 +35,7 @@ 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')
@@ -49,7 +57,7 @@ Spree.ready(function ($) {
         }
       }
 
-      Spree.fillStates = function (data, region) {
+      Spree.fillStates = function(data, region) {
         var selected
         var statesRequired = data.states_required
         var states = data.states
@@ -63,64 +71,72 @@ Spree.ready(function ($) {
         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()
-          stateLabel.addClass('state-select-label')
-          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')
-            stateSelectImg.show()
-            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)
-          stateLabel.removeClass('state-select-label')
+          // 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()
-          stateInput.show()
+          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()
-            stateLabel.removeClass('state-select-label')
-            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)
@@ -130,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/shipment.js

@@ -3,6 +3,7 @@ function ShippingTotalManager (input1) {
   this.input = input1
   this.shippingMethods = this.input.shippingMethods
   this.shipmentTotal = this.input.shipmentTotal
+  this.isFreeShipping = this.input.isFreeShipping
   this.taxTotal = this.input.taxTotal
   this.nonShipmentTax = $(this.taxTotal).data('non-shipment-tax')
   this.orderTotal = this.input.orderTotal
@@ -35,8 +36,19 @@ ShippingTotalManager.prototype.parseCurrencyToFloat = function (input) {
   return accounting.unformat(input, this.formatOptions.decimal)
 }
 
+ShippingTotalManager.prototype.totalShipmentAmount = function (newShipmentTotal, oldShipmentTotal) {
+  var totalShipmentAmount = 0;
+  if (!this.isFreeShipping.html()) {
+    totalShipmentAmount = newShipmentTotal - oldShipmentTotal
+
+    return totalShipmentAmount
+  } else {
+    return totalShipmentAmount
+  }
+}
+
 ShippingTotalManager.prototype.readjustSummarySection = function (orderTotal, newShipmentTotal, oldShipmentTotal, newTaxTotal, oldTaxTotal) {
-  var newOrderTotal = orderTotal + (newShipmentTotal - oldShipmentTotal) + (newTaxTotal - oldTaxTotal)
+  var newOrderTotal = orderTotal + this.totalShipmentAmount(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(accounting.toFixed(newOrderTotal, 10), this.formatOptions))
@@ -53,7 +65,8 @@ Spree.ready(function ($) {
     orderTotal: $('#summary-order-total'),
     taxTotal: $('[data-hook="tax-total"]'),
     shipmentTotal: $('[data-hook="shipping-total"]'),
-    shippingMethods: $('input[data-behavior="shipping-method-selector"]')
+    shippingMethods: $('input[data-behavior="shipping-method-selector"]'),
+    isFreeShipping: $('[data-hook="is-free-shipping"]')
   }
   return new ShippingTotalManager(input).bindEvent()
 })

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

@@ -49,7 +49,7 @@ CouponManager.prototype.sendRequest = function () {
   return $.ajax({
     async: false,
     method: 'PATCH',
-    url: Spree.routes.api_v2_storefront_cart_apply_coupon_code,
+    url: Spree.routes.api_v2_storefront_cart_apply_coupon_code + '?locale=' + SPREE_LOCALE,
     dataType: 'json',
     headers: {
       'X-Spree-Order-Token': SpreeAPI.orderToken
@@ -74,7 +74,7 @@ CouponManager.prototype.sendRemoveRequest = function () {
   return $.ajax({
     async: false,
     method: 'DELETE',
-    url: Spree.routes.api_v2_storefront_cart_remove_coupon_code + '/' + this.couponCode,
+    url: Spree.routes.api_v2_storefront_cart_remove_coupon_code + '/' + this.couponCode + '?locale=' + SPREE_LOCALE,
     dataType: 'json',
     headers: {
       'X-Spree-Order-Token': SpreeAPI.orderToken

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

@@ -0,0 +1,11 @@
+Spree.ready(function ($) {
+  var currencySelect = $('#currency-select select')
+
+  if (currencySelect.length) {
+    currencySelect.on('change', function () {
+      currencySelect.attr('disabled')
+      Spree.showProgressBar()
+      window.location = Spree.routes.set_currency(this.value)
+    })
+  }
+})

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

@@ -0,0 +1,11 @@
+Spree.ready(function ($) {
+  var localeSelect = $('#locale-select select')
+
+  if (localeSelect.length) {
+    localeSelect.on('change', function () {
+      localeSelect.attr('disabled')
+      Spree.showProgressBar()
+      window.location = Spree.routes.set_locale(this.value)
+    })
+  }
+})

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

@@ -255,7 +255,7 @@ function CartForm($, $cartForm) {
 
     this.$price.html(variant.display_price)
 
-    var compareAtPriceContent = shouldDisplayCompareAtPrice ? '<span class="mr-3">' + variant.display_compare_at_price + '</span>' : ''
+    var compareAtPriceContent = shouldDisplayCompareAtPrice ? variant.display_compare_at_price : ''
     this.$compareAtPrice.html(compareAtPriceContent)
   }
 

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

@@ -1,6 +1,4 @@
 @import "spree/frontend/variables/variables";
-@import "spree/frontend/variables/bootstrap-overrides";
-@import "spree/frontend/variables/helper-variables";
 @import "bootstrap";
 @import "spree/frontend/bootstrap-patches";
 
@@ -32,7 +30,6 @@
 @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";

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

@@ -1,4 +1,5 @@
 $font-size-base-px: 16px; //assuming 16px is 1rem ($font-size-base: 1rem in Bootstrap 4)
+$x1: null;
 
 @function font-px-to-rem($target-font-size-px: $font-size-base-px) {
   @return $font-size-base * ( $target-font-size-px / $font-size-base-px );

data/app/assets/stylesheets/spree/frontend/variables/bootstrap-overrides.scss

@@ -1,3 +1,4 @@
+// we're keeping this file for legacy installations relying on it
 $grid-gutter-width: 19px;
 $body-color: $font-color;
 $theme-colors: (
@@ -35,6 +36,5 @@ $grid-breakpoints: (
 $container-max-widths: (
   sm: 768px,
   md: 992px,
-  lg: 1200px,
-  xl: 1200px
+  lg: 1200px
 );

data/app/assets/stylesheets/spree/frontend/variables/helper-variables.scss

@@ -1,3 +1,4 @@
+// we're keeping this file for legacy installations relying on it
 $container-padding: 17px;
 $photo-width-to-height-ratio: 30001/ 37500;
 $photo-width-to-height-ratio-zoom: 28015 / 37500;

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

@@ -1,3 +1,4 @@
+// main spree variables
 $primary-color: #0074c2;
 $secondary-color: #4c4c4c;
 $primary-background: #ffffff;
@@ -18,3 +19,56 @@ $spree-header-max-width: 1440px;
 $spree-header-mobile-height: 50px;
 $spree-header-tablet-height: 75px;
 $spree-header-desktop-height: 75px;
+
+// bootstrap overrides
+$grid-gutter-width: 19px;
+$body-color: $font-color;
+$theme-colors: (
+  // standard bootstrap colors
+  "primary": $primary-color,
+  "secondary": $secondary-color,
+  "danger": #f53737,
+  "info": #999999,
+  "warning": #ffc107,
+  "light-secondary": #999999,
+  "borders": $second-global-border,
+  "dark-borders": $global-border-style,
+  "light-background": $primary-background,
+  "dark-text": $font-color,
+  "overlay": rgba(76, 76, 76, 0.5),
+  "shadow": rgba(0, 0, 0, 0.16)
+);
+$enable-rounded: false;
+$enable-shadows: false;
+$enable-gradients: false;
+$font-family-sans-serif: $font-family;
+$font-weight-medium: 500;
+.font-weight-medium {
+  font-weight: $font-weight-medium;
+}
+$btn-border-width: 2px;
+$modal-dialog-margin: 0;
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+);
+$container-max-widths: (
+  sm: 768px,
+  md: 992px,
+  lg: 1200px
+);
+
+// helper variables
+$container-padding: 17px;
+$photo-width-to-height-ratio: 30001/ 37500;
+$photo-width-to-height-ratio-zoom: 28015 / 37500;
+$thumbnails-carousel-single-height: 100% / $photo-width-to-height-ratio;
+$thumbnails-carousel-single-height-zoom: 100% /
+  $photo-width-to-height-ratio-zoom;
+$zoom-height-breakpoint: calc(
+  650px / #{$photo-width-to-height-ratio-zoom} + 102px * 2
+);
+$spree-plp-filter-desktop-position: $spree-header-desktop-height + 77px;