spree_frontend 4.1.15 → 4.2.0.beta

data/app/assets/stylesheets/spree/frontend/views/spree/shared/main_nav_bar.scss

@@ -1,12 +1,10 @@
 .main-nav-bar {
-  @mixin active-category-button {
-    border-bottom-color: $header-font-color;
-  }
-
   &-item {
     text-transform: uppercase;
     font-size: 20px;
     font-weight: $font-weight-medium;
+    padding: 0 1.5rem;
+    height: 100%;
     a {
       color: theme-color('dark-text');
 
@@ -15,41 +13,49 @@
       }
     }
   }
-  &-dropdown {
-    &-toggle {
-      background: none;
-      border: none;
-      padding: 0;
-      margin: 0;
-      &:focus {
-        outline: none;
-      }
-    }
-  }
   &-category {
     $self: &;
-
+    display: flex;
     position: static;
 
-    &:hover {
-      #{$self}-dropdown {
-        display: block;
-      }
+    &:hover, &.show {
       #{$self}-button {
         color: $header-font-color;
         text-decoration: none;
-        @include active-category-button;
+        &:after {
+          border-bottom-color: $header-font-color;
+        }
+      }
+    }
+
+    .dropdown-item {
+      width: auto;
+      padding: 0;
+      background-color: transparent;
+      &:hover, &:focus {
+        background-color: transparent;
       }
     }
 
     &-button {
       background: none;
       border: none;
-      border-bottom: 3px solid transparent;
       color: $header-font-color;
       margin: 0;
-      &:focus {
-        outline: none;
+      display: flex;
+      align-items: center;
+      position: relative;
+      &:after {
+        content: '';
+        display: block;
+        width: calc(100% - 2rem);
+        position: absolute;
+        left: 1rem;
+        bottom: 0.75rem;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        border-bottom: 3px solid transparent;
       }
     }
 
@@ -64,7 +70,6 @@
       margin: 0;
       border: none;
       z-index: 1000;
-      display: none;
       background: $meganav-background;
       background-clip: padding-box;
       border-top: 1px solid $global-border-style;

data/app/assets/stylesheets/spree/frontend/views/spree/shared/mobile_navigation.scss

@@ -15,7 +15,8 @@
   &.shown {
     transform: translate(0);
   }
-  &-list, &-sublist {
+  &-list,
+  &-sublist {
     margin: 0;
     overflow-y: auto;
     overflow-x: hidden;
@@ -63,6 +64,17 @@
       border-bottom: 1px solid $global-border-style;
     }
   }
+
+  &-category-link {
+    svg {
+      width: 16px;
+      height: 16px;
+      @include media-breakpoint-up(sm) {
+        width: 14px;
+        height: 27px;
+      }
+    }
+  }
 }
 
 #mobile-navigation-close-button {
@@ -75,12 +87,18 @@
   .cls-3 {
     fill: theme-color("light-background");
   }
+  svg {
+    width: 17px;
+    height: 17px;
+    @include media-breakpoint-up(sm) {
+      width: 26px;
+      height: 26px;
+    }
+  }
 }
 
 #mobile-navigation-back-button {
   opacity: 0;
-  padding-left: 0;
-  padding-right: 0;
   transition: basic-transition(opacity);
   appearance: none;
   border: none;
@@ -89,4 +107,12 @@
   &.shown {
     opacity: 1;
   }
+  svg {
+    width: 18px;
+    height: 18px;
+    @include media-breakpoint-up(sm) {
+      width: 17px;
+      height: 28px;
+    }
+  }
 }

data/app/assets/stylesheets/spree/frontend/views/spree/shared/nav_bar.scss

@@ -1,9 +1,9 @@
 .navbar-right {
-  li+li {
+  li + li {
     margin-left: calc-spacer(2);
   }
   @include media-breakpoint-up(xl) {
-    li+li {
+    li + li {
       margin-left: calc-spacer(4);
     }
   }
@@ -14,18 +14,35 @@
       padding: 0;
       margin: 0;
       color: $header-font-color;
-      &:focus {
-        outline: none;
-      }
     }
     .dropdown-menu {
       border-color: $global-border-style;
     }
   }
+  .account-icon {
+    svg {
+      width: 27.6px;
+      height: 24px;
+      @include media-breakpoint-up(xl) {
+        width: 41.4px;
+        height: 36px;
+      }
+    }
+  }
+  .search-icons {
+    svg {
+      width: 24px;
+      height: 24px;
+      @include media-breakpoint-up(xl) {
+        width: 36px;
+        height: 36px;
+      }
+    }
+  }
   &-search-menu {
     position: static;
     &-dropdown {
-      background-color: theme-color('light-background');
+      background-color: theme-color("light-background");
       visibility: hidden;
       opacity: 0;
       z-index: 4;
@@ -44,7 +61,7 @@
       }
 
       form {
-        input#keywords{
+        input#keywords {
           background: transparent;
           color: $meganav-font-color;
           font-size: font-px-to-rem(14px);

data/app/assets/stylesheets/spree/frontend/views/spree/shared/quantity_select.scss

@@ -1,42 +1,39 @@
 .quantity-select {
-  width: 136px;
-  height: 45px;
-  @include media-breakpoint-up(sm) {
-    width: 174px;
-    height: 58px;
-  }
-  @include media-breakpoint-up(md) {
-    width: 136px;
-    height: 45px;
-  }
   &-decrease, &-increase {
+    width: 45px;
     border-radius: 0;
     font-size: font-px-to-rem(20px);
     font-weight: 500;
     background-color: theme-color("light-background");
     border: 1px solid theme-color("borders");
     @include media-breakpoint-up(sm) {
+      width: 58px;
       font-size: font-px-to-rem(30px);
       border: 2px solid theme-color("borders");
     }
     @include media-breakpoint-up(md) {
+      width: 45px;
       font-size: font-px-to-rem(20px);
       border: 1px solid theme-color("borders");
     }
   }
   &-value {
-    width: 100%;
+    width: 46px;
+    height: 45px;
     font-size: font-px-to-rem(20px);
     font-weight: 500;
     border-radius: 0;
     border: 1px solid theme-color('borders');
-    height: auto;
     z-index: 1;
     @include media-breakpoint-up(sm) {
+      width: 58px;
+      height: 58px;
       font-size: font-px-to-rem(28px);
       border: 2px solid theme-color("borders");
     }
     @include media-breakpoint-up(md) {
+      width: 46px;
+      height: 45px;
       font-size: font-px-to-rem(20px);
       border: 1px solid theme-color("borders");
     }

data/app/assets/stylesheets/spree/frontend/views/spree/shared/search_form.scss

@@ -0,0 +1,12 @@
+.search-form {
+  button {
+    svg {
+      width: 20px;
+      height: 20px;
+      @include media-breakpoint-up(md) {
+        width: 27px;
+        height: 27px;
+      }
+    }
+  }
+}

data/app/controllers/concerns/spree/checkout/address_book.rb

@@ -32,23 +32,21 @@ module Spree
       end
 
       def normalize_addresses
-        return unless params[:state] == 'address' && @order.bill_address_id
+        return unless params[:state] == 'address' && @order.bill_address_id && @order.ship_address_id
 
-        if @order.checkout_steps.include?('delivery')
-          return unless @order.ship_address_id
-        end
+        # ensure that there is no validation errors and addresses were saved
+        return unless @order.bill_address && @order.ship_address
 
         bill_address = @order.bill_address
         ship_address = @order.ship_address
-
-        if params[:save_user_address].present? && try_spree_current_user.present?
-          [bill_address, ship_address].each { |address| address&.update_attribute(:user_id, try_spree_current_user&.id) }
-        end
-
         if @order.bill_address_id != @order.ship_address_id && bill_address == ship_address
           @order.update_column(:bill_address_id, ship_address.id)
           bill_address.destroy
+        elsif params[:save_user_address]
+          bill_address.update_attribute(:user_id, try_spree_current_user&.id)
         end
+
+        ship_address.update_attribute(:user_id, try_spree_current_user&.id) if params[:save_user_address]
       end
     end
   end

data/app/controllers/spree/addresses_controller.rb

@@ -37,7 +37,6 @@ module Spree
       else
         new_address = @address.clone
         new_address.attributes = address_params
-        new_address.user_id = @address.user_id
         @address.update_attribute(:deleted_at, Time.current)
         if new_address.save
           flash[:notice] = Spree.t(:successfully_updated, scope: :address_book)

data/app/controllers/spree/currency_controller.rb

@@ -0,0 +1,17 @@
+module Spree
+  class CurrencyController < StoreController
+    def set
+      @currency = supported_currencies.find { |currency| currency.iso_code == params[:currency] }
+      # Make sure that we update the current order, so the currency change is reflected.
+      current_order&.update_attributes!(currency: @currency.iso_code)
+      session[:currency] = params[:currency] if Spree::Config[:allow_currency_change]
+      respond_to do |format|
+        format.json { render json: !@currency.nil? }
+        format.html do
+          # We want to go back to where we came from!
+          redirect_back_or_default(root_path)
+        end
+      end
+    end
+  end
+end

data/app/controllers/spree/products_controller.rb

@@ -9,7 +9,7 @@ module Spree
     respond_to :html
 
     def index
-      @searcher = build_searcher(params.merge(include_images: true))
+      @searcher = build_searcher(params.merge(include_images: true, current_store_id: current_store.id))
       @products = @searcher.retrieve_products
 
       last_modified = @products.maximum(:updated_at)&.utc if @products.respond_to?(:maximum)

data/app/controllers/spree/store_controller.rb

@@ -39,6 +39,10 @@ module Spree
       Spree::Frontend::Config[:locale]
     end
 
+    def store_locale
+      current_store.default_locale
+    end
+
     def store_etag
       [
         current_store,

data/app/helpers/spree/addresses_helper.rb

@@ -2,7 +2,7 @@
 module Spree
   module AddressesHelper
     def address_field(form, method, address_id = 'b', &handler)
-      content_tag :p, id: [address_id, method].join, class: 'form-group checkout-content-inner-field' do
+      content_tag :div, id: [address_id, method].join, class: 'form-group checkout-content-inner-field has-float-label' do
         if handler
           yield
         else
@@ -12,22 +12,52 @@ module Spree
           form.text_field(method,
                           class: [is_required ? 'required' : nil, 'spree-flat-input'].compact,
                           required: is_required,
-                          placeholder: is_required ? "#{method_name} #{required}" : method_name)
+                          placeholder: is_required ? "#{method_name} #{required}" : method_name,
+                          aria: { label: method_name }) +
+            form.label(method_name,
+                       is_required ? "#{method_name} #{required}" : method_name,
+                       class: 'text-uppercase')
         end
       end
     end
 
-    def address_state(form, country, _address_id = 'b')
+    def address_zipcode(form, country, address_id = 'b')
+      country ||= Spree::Country.default
+      is_required = country.zipcode_required?
+      method_name = Spree.t(:zipcode)
+      required = Spree.t(:required)
+      form.text_field(:zipcode,
+                      class: [is_required ? 'required' : nil, 'spree-flat-input'].compact,
+                      required: is_required,
+                      placeholder: is_required ? "#{method_name} #{required}" : method_name,
+                      aria: { label: Spree.t(:zipcode) }) +
+        form.label(:zipcode,
+                   is_required ? "#{method_name} #{required}" : method_name,
+                   class: 'text-uppercase',
+                   id: address_id + '_zipcode_label')
+    end
+
+    def address_state(form, country, address_id = 'b')
       country ||= Spree::Country.find(Spree::Config[:default_country_id])
       have_states = country.states.any?
       state_elements = [
         form.collection_select(:state_id, country.states.order(:name),
                               :id, :name,
-                               { prompt: Spree.t(:state).upcase },
-                               class: have_states ? 'required form-control spree-flat-select' : 'hidden',
+                               { prompt: Spree.t(:state) },
+                               class: [have_states ? 'required' : 'hidden', 'spree-flat-select'].compact,
+                               aria: { label: Spree.t(:state) },
                                disabled: !have_states) +
-          form.text_field(:state_name, class: !have_states ? 'required' : 'hidden', disabled: have_states) +
-          image_tag('arrow.svg', class: 'position-absolute spree-flat-select-arrow')
+          form.text_field(:state_name,
+                          class: [!have_states ? 'required' : 'hidden', 'spree-flat-input'].compact,
+                          aria: { label: Spree.t(:state) },
+                          disabled: have_states,
+                          placeholder: Spree.t(:state) + " #{Spree.t(:required)}") +
+          form.label(Spree.t(:state).downcase,
+                     raw(Spree.t(:state) + content_tag(:abbr, " #{Spree.t(:required)}")),
+                     class: [have_states ? 'state-select-label' : nil, ' text-uppercase'].compact,
+                     id: address_id + '_state_label') +
+          image_tag('arrow.svg',
+                    class: [!have_states ? 'hidden' : nil, 'position-absolute spree-flat-select-arrow'].compact)
       ].join.tr('"', "'").delete("\n")
 
       content_tag(:noscript, form.text_field(:state_name, class: 'required')) +

data/app/helpers/spree/frontend_helper.rb

@@ -7,6 +7,26 @@ module Spree
       @body_class
     end
 
+    def store_country_iso(store)
+      store ||= current_store
+      return unless store
+      return unless store.default_country
+
+      store.default_country.iso.downcase
+    end
+
+    def stores
+      @stores ||= Spree::Store.includes(:default_country)
+    end
+
+    def store_currency_symbol(store)
+      store ||= current_store
+      return unless store
+      return unless store.default_currency
+
+      ::Money::Currency.find(store.default_currency).symbol
+    end
+
     def spree_breadcrumbs(taxon, _separator = '', product = nil)
       return '' if current_page?('/') || taxon.nil?
 
@@ -51,7 +71,7 @@ module Spree
         ) << content_tag(:meta, nil, itemprop: 'position', content: '1'), class: 'active', itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement')
       end
       crumb_list = content_tag(:ol, raw(crumbs.flatten.map(&:mb_chars).join), class: 'breadcrumb', itemscope: 'itemscope', itemtype: 'https://schema.org/BreadcrumbList')
-      content_tag(:nav, crumb_list, id: 'breadcrumbs', class: 'col-12 mt-1 mt-sm-3 mt-lg-4', aria: { label: 'breadcrumb' })
+      content_tag(:nav, crumb_list, id: 'breadcrumbs', class: 'col-12 mt-1 mt-sm-3 mt-lg-4', aria: { label: Spree.t(:breadcrumbs) })
     end
 
     def class_for(flash_type)
@@ -261,13 +281,17 @@ module Spree
     def spree_social_link(service)
       return '' if current_store.send(service).blank?
 
-      link_to "https://#{service}.com/#{current_store.send(service)}", target: :blank, rel: 'nofollow noopener' do
+      link_to "https://#{service}.com/#{current_store.send(service)}", target: :blank, rel: 'nofollow noopener', 'aria-label': service do
         content_tag :figure, id: service, class: 'px-2' do
           icon(name: service, width: 22, height: 22)
         end
       end
     end
 
+    def checkout_available_payment_methods
+      @order.available_payment_methods(current_store)
+    end
+
     private
 
     def formatted_price(value)

data/app/helpers/spree/navigation_helper.rb

@@ -11,7 +11,10 @@ module Spree
     end
 
     def spree_nav_cache_key(section = 'header')
-      base_cache_key + [current_store, spree_navigation_data_cache_key, Spree::Config[:logo], section]
+      @spree_nav_cache_key = begin
+        keys = base_cache_key + [current_store, spree_navigation_data_cache_key, Spree::Config[:logo], stores&.cache_key, section]
+        Digest::MD5.hexdigest(keys.join('-'))
+      end
     end
 
     def main_nav_image(image_path, title = '')

data/app/views/kaminari/twitter-bootstrap-4/_first_page.html.erb

@@ -8,6 +8,6 @@
 -%>
 <% unless current_page.first? %>
   <li class="first page-item">
-    <%= link_to_unless current_page.first?, inline_svg_tag('pagination-double-arrow-right.svg', size: '13px*16px', class: 'spree-icon-arrow-left'), url, remote: remote, class: 'page-link' %>
+    <%= link_to_unless current_page.first?, inline_svg_tag('pagination-double-arrow-right.svg', size: '13px*16px', class: 'spree-icon-arrow-left'), url, remote: remote, class: 'page-link', 'aria-label': 'First page' %>
   </li>
 <% end %>

data/app/views/kaminari/twitter-bootstrap-4/_last_page.html.erb

@@ -8,6 +8,6 @@
 -%>
 <% unless current_page.last? %>
   <li class="last next page-item"><%# "next" class present for border styling in twitter bootstrap %>
-    <%= link_to_unless current_page.last?, inline_svg_tag('pagination-double-arrow-right.svg', size: '13px*16px'), url, remote: remote, class: 'page-link' %>
+    <%= link_to_unless current_page.last?, inline_svg_tag('pagination-double-arrow-right.svg', size: '13px*16px'), url, remote: remote, class: 'page-link', 'aria-label': 'Last page' %>
   </li>
 <% end %>

data/app/views/kaminari/twitter-bootstrap-4/_next_page.html.erb

@@ -8,6 +8,6 @@
 -%>
 <% unless current_page.last? %>
   <li class="next_page page-item">
-    <%= link_to_unless current_page.last?, inline_svg_tag('pagination-arrow-right.svg', size: '13px*16px'), url, rel: 'next', remote: remote, class: 'page-link' %>
+    <%= link_to_unless current_page.last?, inline_svg_tag('pagination-arrow-right.svg', size: '13px*16px'), url, rel: 'next', remote: remote, class: 'page-link', 'aria-label': 'Next page' %>
   </li>
 <% end %>

data/app/views/kaminari/twitter-bootstrap-4/_prev_page.html.erb

@@ -8,6 +8,6 @@
 -%>
 <% unless current_page.first? %>
   <li class="prev page-item">
-    <%= link_to_unless current_page.first?, inline_svg_tag('pagination-arrow-right.svg', size: '13px*16px', class: 'spree-icon-arrow-left'), url, rel: 'prev', remote: remote, class: 'page-link' %>
+    <%= link_to_unless current_page.first?, inline_svg_tag('pagination-arrow-right.svg', size: '13px*16px', class: 'spree-icon-arrow-left'), url, rel: 'prev', remote: remote, class: 'page-link', 'aria-label': 'Previous page' %>
   </li>
 <% end %>

data/app/views/spree/address/_form.html.erb

@@ -1,51 +1,51 @@
 <% address_id = address_type.chars.first %>
 
 <div class="inner" data-hook=<%="#{address_type}_inner" %>>
-  <p class="form-group" id=<%="#{address_id}firstname" %>>
+  <div class="form-group" id=<%="#{address_id}firstname" %>>
     <%= form.label :firstname do %>
       <%= Spree.t(:first_name) %><abbr class="required" title="required">*</abbr>
     <% end %>
     <%= form.text_field :firstname, class: 'form-control', required: true %>
-  </p>
-  <p class="form-group" id=<%="#{address_id}lastname" %>>
+  </div>
+  <div class="form-group" id=<%="#{address_id}lastname" %>>
     <%= form.label :lastname do %>
       <%= Spree.t(:last_name) %><abbr class="required" title="required">*</abbr>
     <% end %>
     <%= form.text_field :lastname, class: 'form-control', required: true %>
-  </p>
+  </div>
   <% if Spree::Config[:company] %>
-    <p class="form-group" id=<%="#{address_id}company" %>>
+    <div class="form-group" id=<%="#{address_id}company" %>>
       <%= form.label :company, Spree.t(:company) %>
       <%= form.text_field :company, class: 'form-control' %>
-    </p>
+    </div>
   <% end %>
-  <p class="form-group" id=<%="#{address_id}address1" %>>
+  <div class="form-group" id=<%="#{address_id}address1" %>>
     <%= form.label :address1 do %>
       <%= Spree.t(:street_address) %><abbr class="required" title="required">*</abbr>
     <% end %>
     <%= form.text_field :address1, class: 'form-control required' %>
-  </p>
-  <p class="form-group" id=<%="#{address_id}address2" %>>
+  </div>
+  <div class="form-group" id=<%="#{address_id}address2" %>>
     <%= form.label :address2, Spree.t(:street_address_2) %>
     <%= form.text_field :address2, class: 'form-control' %>
-  </p>
-  <p class="form-group" id=<%="#{address_id}city" %>>
+  </div>
+  <div class="form-group" id=<%="#{address_id}city" %>>
     <%= form.label :city do %>
       <%= Spree.t(:city) %><abbr class="required" title="required">*</abbr>
     <% end %>
     <%= form.text_field :city, class: 'form-control', required: true %>
-  </p>
-  <p class="form-group" id=<%="#{address_id}country" %>>
+  </div>
+  <div class="form-group" id=<%="#{address_id}country" %>>
     <%= form.label :country_id do %>
       <%= Spree.t(:country) %><abbr class="required" title="required">*</abbr>
     <% end %>
     <span id=<%="#{address_id}country-selection" %>>
       <%= form.collection_select :country_id, available_countries, :id, :name, {}, { class: 'form-control', required: true } %>
     </span>
-  </p>
+  </div>
 
   <% if Spree::Config[:address_requires_state] %>
-    <p class="form-group" id=<%="#{address_id}state" %>>
+    <div class="form-group" id=<%="#{address_id}state" %>>
       <% have_states = !address.country.states.empty? %>
       <%= form.label :state do %>
         <%= Spree.t(:state) %><abbr class='required' title="required" id=<%="#{address_id}state-required"%>>*</abbr>
@@ -64,28 +64,28 @@
                             disabled: have_states)
          ].join.gsub('"', "'").gsub("\n", "")
       %>
-    </p>
+    </div>
       <noscript>
         <%= form.text_field :state_name, class: 'form-control', required: true %>
       </noscript>
   <% end %>
 
-  <p class="form-group" id=<%="#{address_id}zipcode" %>>
+  <div class="form-group" id=<%="#{address_id}zipcode" %>>
     <%= form.label :zipcode do %>
       <%= Spree.t(:zip) %><% if address.require_zipcode? %><abbr class="required" title="required">*</abbr><% end %>
     <% end %>
     <%= form.text_field :zipcode, class: 'form-control', required: address.require_zipcode? %>
-  </p>
-  <p class="form-group" id=<%="#{address_id}phone" %>>
+  </div>
+  <div class="form-group" id=<%="#{address_id}phone" %>>
     <%= form.label :phone do %>
       <%= Spree.t(:phone) %><% if address.require_phone? %><abbr class="required" title="required">*</abbr><% end %>
     <% end %>
     <%= form.phone_field :phone, class: 'form-control', required: address.require_phone? %>
-  </p>
+  </div>
   <% if Spree::Config[:alternative_shipping_phone] %>
-    <p class="form-group" id=<%="#{address_id}altphone" %>>
+    <div class="form-group" id=<%="#{address_id}altphone" %>>
       <%= form.label :alternative_phone, Spree.t(:alternative_phone) %>
       <%= form.phone_field :alternative_phone, class: 'form-control' %>
-    </p>
+    </div>
   <% end %>
 </div>