spree_frontend 4.2.0.beta → 4.2.0.rc5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 011aa871d742c968b59dd68ce90f5833e27d2c78173292aadba241054e7bbf89
-  data.tar.gz: e1383ff17f1496fb69ecaa5ce6ad1a60c9f45792cc7cafc106f6c46f66f04b35
+  metadata.gz: 4c687a751a5affd4522bc602689a69466af4401bcda69b405b419dda929e737d
+  data.tar.gz: c8e4dbc7e128ab9d655ba9afdb60891d700224a9a5a8e62ab1f7d9720b30a9b2
 SHA512:
-  metadata.gz: 8409e99f4ed56c23070669d26c81d710a997bcc46067fc6ced9691f3ab6790ceedfc35a91bcf4b5f64afedbb6701e6aca5bcf29638a0781db9e12dfe2863826f
-  data.tar.gz: b51eae7f43fde751a3279f567ad1c4836ced9da3dbd33e6fa4e38d1038b79d262aafc6d878306a3eb9c34c4f8d465b918089acd43d7c6acac02138d0f06e1f58
+  metadata.gz: 238f9fb68b0c36b60aee012683d1d33854fc1c9ed28fefc94e080fb194974b8a75d9c91b2634be22b98efac96cf136a4a34228658844aec166d117c1d0d062d1
+  data.tar.gz: c34ae40194f58f11d2dfdf1b8f89dc57c61b84e97cc2a13b18e1f8670ce841e0c9d2e87d65e780936912bd2ef478d933de50e019830332bc57ec53bfffa46ede

data/app/assets/images/info.svg

@@ -0,0 +1,7 @@
+<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g id="MiMedia---iOS-Android" serif:id="MiMedia---iOS/Android">
+        <g id="icon32pt_info" fill="currentColor">
+            <path id="Oval-58" d="M50,94C74.301,94 94,74.301 94,50C94,25.699 74.301,6 50,6C25.699,6 6,25.699 6,50C6,74.301 25.699,94 50,94ZM50,86C69.882,86 86,69.882 86,50C86,30.118 69.882,14 50,14C30.118,14 14,30.118 14,50C14,69.882 30.118,86 50,86ZM57,31.013C57,32.671 56.431,34.085 55.286,35.248C54.145,36.417 52.769,37 51.161,37C49.547,37 48.168,36.417 47.013,35.248C45.861,34.085 45.283,32.671 45.283,31.013C45.283,29.359 45.861,27.942 47.013,26.764C48.165,25.586 49.547,25 51.161,25C52.769,25 54.145,25.589 55.286,26.764C56.431,27.942 57,29.359 57,31.013ZM56.427,70.466C54.71,71.292 53.336,71.919 52.314,72.352C51.291,72.785 50.101,73 48.746,73C46.666,73 45.047,72.381 43.892,71.149C42.738,69.913 42.161,68.345 42.161,66.445C42.161,65.709 42.203,64.952 42.29,64.181C42.377,63.41 42.516,62.539 42.707,61.567L44.856,52.321C45.047,51.436 45.21,50.596 45.339,49.802C45.471,49.014 45.535,48.289 45.535,47.635C45.535,46.454 45.334,45.629 44.934,45.165C44.533,44.7 43.77,44.465 42.637,44.465C42.081,44.465 41.51,44.574 40.928,44.783C40.344,44.993 40,42.534 40,42.534C41.407,41.837 42.752,41.241 44.039,40.745C45.325,40.249 46.541,40 47.691,40C49.757,40 51.352,40.608 52.471,41.823C53.591,43.038 54.151,44.614 54.151,46.558C54.151,46.959 54.114,47.667 54.036,48.678C53.958,49.693 53.814,50.622 53.605,51.467L51.465,60.679C51.291,61.418 51.133,62.264 50.996,63.215C50.855,64.161 50.787,64.883 50.787,65.368C50.787,66.591 51.011,67.425 51.461,67.87C51.913,68.314 52.693,68.535 53.8,68.535C54.321,68.535 54.912,68.423 55.57,68.202C56.227,67.982 56.427,70.466 56.427,70.466Z"/>
+        </g>
+    </g>
+</svg>

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

@@ -45,5 +45,5 @@ 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) }

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
     })

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.pathFor('/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/payment.js

@@ -8,20 +8,7 @@ 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)
@@ -60,11 +47,26 @@ Spree.ready(function ($) {
       }
 
       $('input[type="radio"][name="order[payments_attributes][][payment_method_id]"]').click(function () {
+        $('#payment-methods').hide()
+        $('.payment-sources').hide()
         Spree.enableSave()
-        if ($('#payment_method_' + this.value).find('fieldset').children().length == 0) {
-          $('.payment-sources').hide()
-        } else {
-          $('.payment-sources').show()
+        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/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.css

@@ -1,6 +1,5 @@
 /*
 * This is a manifest file that includes stylesheets for spree_frontend
- *= require spree/frontend/address_book
  *= require spree/frontend/application
  *= require_self
 */

data/app/assets/stylesheets/spree/frontend/components-custom/inputs.scss

@@ -50,6 +50,12 @@
   }
 }
 
+.field_with_errors {
+  input{
+    border-color: $danger;
+  }
+}
+
 .spree-flat-label {
   color: theme-color("secondary");
   text-transform: uppercase;

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/helpers/spree/frontend_helper.scss

@@ -1,6 +1,7 @@
 #breadcrumbs {
   padding: 0;
 }
+
 .breadcrumb {
   background: none;
   padding: 0.5rem 0;
@@ -23,3 +24,9 @@
 .breadcrumb-product-name {
   padding-right: 9.5px;
 }
+
+.truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -35,6 +35,5 @@ $grid-breakpoints: (
 $container-max-widths: (
   sm: 768px,
   md: 992px,
-  lg: 1200px,
-  xl: 1200px
+  lg: 1200px
 );

data/app/assets/stylesheets/spree/frontend/views/spree/checkout/confirm.scss

@@ -2,11 +2,6 @@
   display: flex;
   flex-direction: column;
 
-  div:first-child {
-    -webkit-flex: 0;
-    flex-shrink: 0;
-  }
-
   &-order-details {
     padding-bottom: 40px;
     font-weight: 500;
@@ -36,6 +31,9 @@
     }
 
     &-line-items {
+      @include media-breakpoint-down(sm) {
+        flex-basis: 100%;
+      }
       @include media-breakpoint-up(lg) {
         border: none;
         flex: 1 1 0;
@@ -48,15 +46,6 @@
       &-line-item {
         $self: &;
 
-        a {
-          max-width: 50%;
-          margin-right: 20px;
-
-          @include media-breakpoint-up(lg) {
-            margin-right: 40px;
-          }
-        }
-
         img {
           width: 90px;
           height: auto;
@@ -73,14 +62,28 @@
         &-name {
           font-size: font-px-to-rem(14px);
           border-top: 1px solid $global-border-style;
+          margin-right: 20px;
 
-          @include media-breakpoint-up(sm) {
-            font-size: font-px-to-rem(27px);
+          &-image {
+            padding-right: 16px;
           }
 
-          @include media-breakpoint-up(lg) {
-            font-size: font-px-to-rem(22px);
-            width: 55%;
+          &-link {
+            max-width: 50%;
+
+            @include media-breakpoint-up(lg) {
+              margin-right: 40px;
+            }
+
+
+            @include media-breakpoint-up(sm) {
+              font-size: font-px-to-rem(27px);
+            }
+
+            @include media-breakpoint-up(lg) {
+              font-size: font-px-to-rem(22px);
+              width: 55%;
+            }
           }
 
           &-options {
@@ -185,6 +188,8 @@
   }
 
   &-delivery-informations {
+    flex-basis: 100%;
+
     div:first-child {
       flex-shrink: unset;
       -webkit-flex: unset;
@@ -253,13 +258,9 @@
   }
 
   #checkout-summary {
-    margin-top: 20px;
-    @include media-breakpoint-up(sm) {
-      margin-top: 70px;
-    }
-    @include media-breakpoint-up(lg) {
-      flex: 0 0 40%;
-      align-self: flex-start;
+    flex: 1 1 0;
+    @include media-breakpoint-down(sm) {
+      margin-top: 20px;
     }
   }
 }