spree_frontend 4.2.0.rc2 → 4.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 38163d04925f22790f12bdbbeb77beac79cdbd366c6ea04e065009b2fd9b82d1
-  data.tar.gz: b53af71727410e46e99acbbf972e13580fb3c41977508e41125c6b5718c8bfc4
+  metadata.gz: eb44ce8a344e6b78adcb87064ed90e0ec7f3f02cfc474dda6d16d41e1077e733
+  data.tar.gz: 7febb328e551e0396decabb7e357c626c39ab573d71895dc6e55d115bb9d6e7c
 SHA512:
-  metadata.gz: b8b342aa804b56453c2c7bc447cf52d664f097c16b04de44e5d0bd3c153314e9450806b167b3372b2483ebcd5ab312eac3c868ee6b852b03106aaa094e69794f
-  data.tar.gz: 2c2d42c10cbbd8e2dedd374693255c9c24044c84dcf2a3e641fe0aa57cadfe3552134139af193c35cd78b4f9ba2749072803d78bfc67775a8c6a4ecddccf1f58
+  metadata.gz: cd5453aa3218dbbedadfc27b7f3958b33560f0d8ec33d03aee58b1d22b3c255c6cded27469e2a1b6194fb73fd0e5c658545aeb90e6003dbc6355694457ec46be
+  data.tar.gz: 67815113708206d6f6bab183804c7005d8ccaa707005ff6392d38eebd4b9462951833d8507da6617011a6e4052c208c67bc3be49039f25c5b5cad9e3077b9c31

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
@@ -42,8 +44,39 @@
 
 Spree.routes.api_tokens = Spree.pathFor('api_tokens')
 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.pathFor('products/' + id + '/related') }
-Spree.routes.product_carousel = function (taxonId) { return Spree.pathFor('product_carousel/' + taxonId) }
+Spree.routes.api_v2_storefront_cart_apply_coupon_code = Spree.localizedPathFor('api/v2/storefront/cart/apply_coupon_code')
+Spree.routes.api_v2_storefront_cart_remove_coupon_code = function(couponCode) { return Spree.localizedPathFor('api/v2/storefront/cart/remove_coupon_code/' + couponCode) }
+Spree.routes.product = function(id) { return Spree.localizedPathFor('products/' + id) }
+Spree.routes.product_related = function(id) { return Spree.localizedPathFor('products/' + id + '/related') }
+Spree.routes.product_carousel = function (taxonId) { return Spree.localizedPathFor('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()
+}
+
+Spree.clearCache = function () {
+  if (!Turbolinks.supported) { return }
+
+  Turbolinks.clearCache()
+}
+
+Spree.setCurrency = function (currency) {
+  Spree.clearCache()
+
+  var params = (new URL(window.location)).searchParams
+  if (currency === SPREE_DEFAULT_CURRENCY) {
+    params.delete('currency')
+  } else {
+    params.set('currency', currency)
+  }
+  var queryString = params.toString()
+  if (queryString !== '') { queryString = '?' + queryString }
+
+  SPREE_CURRENCY = currency
+
+  Turbolinks.visit(window.location.pathname + queryString, { action: 'replace' })
+}

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

@@ -123,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

@@ -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),
     dataType: 'json',
     headers: {
       'X-Spree-Order-Token': SpreeAPI.orderToken

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

@@ -0,0 +1,43 @@
+document.addEventListener('turbolinks:load', function(event) {
+  // this condition checks if this is the first initial load of turbolinks application
+  if (!event.data.timing.visitStart) {
+    var currencySelect = document.querySelectorAll('select[name=switch_to_currency]')
+
+    if (currencySelect.length) {
+      currencySelect.forEach(function (element) {
+        element.addEventListener('change', function () {
+          Spree.showProgressBar()
+          var newCurrency = this.value
+
+          // we need to make AJAX call here to the backend to set currency in session
+          fetch(Spree.routes.set_currency(newCurrency), {
+            method: 'GET'
+          }).then(function (response) {
+            switch (response.status) {
+              case 200:
+                Spree.setCurrency(newCurrency)
+                document.getElementById('internationalization-options-desktop').classList.remove('show')
+                break
+            }
+          })
+        })
+      })
+    }
+  }
+})
+
+// fix back button issue with different currency set
+// invalidate page if cached page has different currency then the current one
+document.addEventListener('turbolinks:load', function(event) {
+  if (SPREE_CURRENCY === SPREE_DEFAULT_CURRENCY) {
+    var regexAnyCurrency = new RegExp('currency=')
+    if (event.data.url.match(regexAnyCurrency) && !event.data.url.match(SPREE_CURRENCY)) {
+      Spree.setCurrency(SPREE_CURRENCY)
+    }
+  } else {
+    var regex = new RegExp('currency=' + SPREE_CURRENCY)
+    if (!event.data.url.match(regex)) {
+      Spree.setCurrency(SPREE_CURRENCY)
+    }
+  }
+})

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

@@ -0,0 +1,13 @@
+document.addEventListener('turbolinks:load', function () {
+  var localeSelect = document.querySelectorAll('select[name=switch_to_locale]')
+
+  if (localeSelect.length) {
+    localeSelect.forEach(function (element) {
+      element.addEventListener('change', function () {
+        Spree.clearCache()
+        Spree.showProgressBar()
+        this.form.submit()
+      })
+    })
+  }
+})

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;