spree_frontend 4.1.0 → 4.7.0

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,91 +35,108 @@ 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')
         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')
         }
       }
 
-      Spree.fillStates = function (data, region) {
+      Spree.fillStates = function(data, region) {
         var selected
         var statesRequired = data.states_required
         var states = data.states
         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) {
-          selected = parseInt(stateSelect.val())
+          selected = stateSelect.val()
           stateSelect.html('')
-          $.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)) {
+          $.each(states, function(idx, state) {
+            var opt = $(document.createElement('option')).attr('value', state.id.toString()).html(state.name)
+            if (selected && selected.toString() === state.id.toString()) {
               opt.prop('selected', true)
             }
             stateSelect.append(opt)
           })
-          stateSelect.prop('required', false)
-          stateSelect.prop('disabled', false).show()
-          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')
-            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)
-          stateInput.show()
+          // 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()
+          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()
-            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)
@@ -121,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/address_book.js

@@ -1,56 +1,54 @@
-(function ($) {
-  $(document).ready(function () {
-    if ($('.select_address').length > 0) {
-      $('input#order_use_billing').unbind('change')
+Spree.ready(function ($) {
+  if ($('.select_address').length > 0) {
+    $('input#order_use_billing').unbind('change');
 
-      hide_address_form('billing')
-      hide_address_form('shipping')
+    hide_address_form('billing');
+    hide_address_form('shipping');
 
-      if ($('input#order_use_billing').is(':checked')) {
-        $('#shipping .select_address').hide()
-      }
-
-      $('input#order_use_billing').click(function () {
-        if ($(this).is(':checked')) {
-          $('#shipping .select_address').hide()
-          hide_address_form('shipping')
-        } else {
-          $('#shipping .select_address').show()
-          if ($("input[name='order[ship_address_id]']:checked").val() == '0') {
-            show_address_form('shipping')
-          } else {
-            hide_address_form('shipping')
-          }
-        }
-      })
-
-      $("input[name='order[bill_address_id]']:radio").change(function () {
-        if ($("input[name='order[bill_address_id]']:checked").val() == '0') {
-          show_address_form('billing')
-        } else {
-          hide_address_form('billing')
-        }
-      })
+    if ($('input#order_use_billing').is(':checked')) {
+      $('#shipping .select_address').hide()
+    }
 
-      $("input[name='order[ship_address_id]']:radio").change(function () {
+    $('input#order_use_billing').click(function () {
+      if ($(this).is(':checked')) {
+        $('#shipping .select_address').hide()
+        hide_address_form('shipping')
+      } else {
+        $('#shipping .select_address').show()
         if ($("input[name='order[ship_address_id]']:checked").val() == '0') {
           show_address_form('shipping')
         } else {
           hide_address_form('shipping')
         }
-      })
-    }
-  })
+      }
+    });
+
+    $("input[name='order[bill_address_id]']:radio").change(function () {
+      if ($("input[name='order[bill_address_id]']:checked").val() == '0') {
+        show_address_form('billing')
+      } else {
+        hide_address_form('billing')
+      }
+    });
+
+    $("input[name='order[ship_address_id]']:radio").change(function () {
+      if ($("input[name='order[ship_address_id]']:checked").val() == '0') {
+        show_address_form('shipping')
+      } else {
+        hide_address_form('shipping')
+      }
+    })
+  }
 
-  function hide_address_form (address_type) {
-    $('#' + address_type + ' .inner').hide()
+  function hide_address_form(address_type) {
+    $('#' + address_type + ' .inner').hide();
     $('#' + address_type + ' .inner input').prop('disabled', true)
     $('#' + address_type + ' .inner select').prop('disabled', true)
   }
 
-  function show_address_form (address_type) {
-    $('#' + address_type + ' .inner').show()
+  function show_address_form(address_type) {
+    $('#' + address_type + ' .inner').show();
     $('#' + address_type + ' .inner input').prop('disabled', false)
     $('#' + address_type + ' .inner select').prop('disabled', false)
   }
-})(jQuery)
+});

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

@@ -1,45 +1,85 @@
+/* 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) {
+        var cardCodeCleave;
+        var updateCardCodeCleave = function (length) {
+          if (cardCodeCleave) cardCodeCleave.destroy()
+
+          cardCodeCleave = new Cleave(CARD_CODE_SELECTOR, {
+            numericOnly: true,
+            blocks: [length]
+          })
+        }
+
+        updateCardCodeCleave(3)
+
+        /* eslint-disable no-new */
+        new Cleave(CARD_NUMBER_SELECTOR, {
+          creditCard: true,
+          onCreditCardTypeChanged: function (type) {
+            $('.ccType').val(type)
+
+            if (type === 'amex') {
+              updateCardCodeCleave(4)
+            } else {
+              updateCardCodeCleave(3)
+            }
+          }
+        })
+        /* eslint-disable no-new */
+        new Cleave(CARD_EXPIRATION_SELECTOR, {
+          date: true,
+          datePattern: ['m', 'Y']
+        })
+      }
+
       $('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/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/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 () {
@@ -59,3 +59,19 @@ Spree.ready(function () {
 
   return Spree.Checkout
 })
+
+$('.js-remove-credit-card').click(function() {
+  if (confirm(Spree.translations.credit_card_remove_confirmation)) {
+    return $.ajax({
+      async: false,
+      method: 'DELETE',
+      url: Spree.routes.api_v2_storefront_destroy_credit_card(this.dataset.id),
+      dataType: 'json',
+      headers: {
+        'Authorization': 'Bearer ' + SpreeAPI.oauthToken
+      }
+    }).done(function() {
+      location.reload();
+    })
+  }
+})

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,44 @@
+document.addEventListener('turbo:load', function(event) {
+  // this condition checks if this is the first initial load of turbo application
+  if (!event.detail.timing.visitStart) {
+    var currencySelect = document.querySelectorAll('select[name=switch_to_currency]')
+
+    if (currencySelect.length) {
+      currencySelect.forEach(function (element) {
+        element.addEventListener('change', function () {
+          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('turbo:load', function(event) {
+  if (typeof (SPREE_DEFAULT_CURRENCY) !== 'undefined' && typeof (SPREE_CURRENCY) !== 'undefined') {
+    if (SPREE_CURRENCY === SPREE_DEFAULT_CURRENCY) {
+      var regexAnyCurrency = new RegExp('currency=')
+      if (event.detail.url.match(regexAnyCurrency) && !event.detail.url.match(SPREE_CURRENCY)) {
+        Spree.setCurrency(SPREE_CURRENCY)
+      }
+    } else {
+      var regex = new RegExp('currency=' + SPREE_CURRENCY)
+      if (!event.detail.url.match(regex)) {
+        Spree.setCurrency(SPREE_CURRENCY)
+      }
+    }
+  }
+})

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

@@ -0,0 +1,12 @@
+document.addEventListener('turbo:load', () => {
+  const localeSelect = document.querySelectorAll('select[name=switch_to_locale]')
+
+  if (localeSelect.length) {
+    localeSelect.forEach((element) => {
+      element.addEventListener('change', () => {
+        Spree.clearCache()
+        element.form.submit()
+      })
+    })
+  }
+})

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.js

@@ -0,0 +1,78 @@
+//= require jsuri
+function Spree () {}
+
+Spree.ready = function (callback) {
+  return jQuery(document).on('page:load turbo:load', function () {
+    return callback(jQuery)
+  })
+}
+
+Spree.mountedAt = function () {
+  return window.SpreePaths.mounted_at
+}
+
+Spree.adminPath = function () {
+  return window.SpreePaths.admin
+}
+
+Spree.pathFor = function (path) {
+  var locationOrigin = (window.location.protocol + '//' + window.location.hostname) + (window.location.port ? ':' + window.location.port : '')
+
+  return this.url('' + locationOrigin + (this.mountedAt()) + path, this.url_params).toString()
+}
+
+Spree.localizedPathFor = function(path) {
+  if (typeof (SPREE_LOCALE) !== 'undefined' && typeof (SPREE_CURRENCY) !== 'undefined') {
+    var fullUrl = new URL(Spree.pathFor(path))
+    var params = fullUrl.searchParams
+    var pathName = fullUrl.pathname
+
+    params.set('currency', SPREE_CURRENCY)
+
+    if (pathName.match(/api\/v/)) {
+      params.set('locale', SPREE_LOCALE)
+    } else {
+      pathName = (this.mountedAt()) + SPREE_LOCALE + '/' + pathName
+    }
+    return fullUrl.origin + pathName + '?' + params.toString()
+  }
+  return Spree.pathFor(path)
+}
+
+Spree.adminPathFor = function (path) {
+  return this.pathFor('' + (this.adminPath()) + path)
+}
+
+Spree.url = function (uri, query) {
+  if (uri.path === void 0) {
+    // eslint-disable-next-line no-undef
+    uri = new Uri(uri)
+  }
+  if (query) {
+    $.each(query, function (key, value) {
+      return uri.addQueryParam(key, value)
+    })
+  }
+  return uri
+}
+
+Spree.ajax = function (urlOrSettings, settings) {
+  var url
+  if (typeof urlOrSettings === 'string') {
+    return $.ajax(Spree.url(urlOrSettings).toString(), settings)
+  } else {
+    url = urlOrSettings['url']
+    delete urlOrSettings['url']
+    return $.ajax(Spree.url(url).toString(), urlOrSettings)
+  }
+}
+
+Spree.routes = {
+  states_search: Spree.localizedPathFor('api/v1/states'),
+  apply_coupon_code: function (orderId) {
+    return Spree.localizedPathFor('api/v1/orders/' + orderId + '/apply_coupon_code')
+  },
+  cart: Spree.localizedPathFor('cart')
+}
+
+Spree.url_params = {}