spree_frontend 4.1.15 → 4.2.0.beta

data/app/views/spree/shared/_mobile_navigation.html.erb

@@ -1,36 +1,22 @@
 <% if spree_navigation_data.any? %>
-  <div class="position-fixed text-uppercase d-xl-none mobile-navigation">
-    <div class="d-flex align-items-center header-spree" data-hook>
-      <div class="container-fluid header-spree-fluid">
-        <div class="d-flex flex-nowrap align-items-center">
-          <div class="d-xl-none flex-grow-1">
-            <button id="mobile-navigation-back-button" aria-label="<%= Spree.t('nav_bar.go_to_previous_menu') %>">
-              <%= icon(name: 'arrow-right',
-                      classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-left',
-                      width: 18,
-                      height: 18) %>
-              <%= icon(name: 'arrow-right',
-                      classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-left',
-                      width: 17,
-                      height: 28) %>
-            </button>
-          </div>
-          <figure class="logo flex-grow-0 flex-xl-grow-1 order-xl-0 header-spree-fluid-logo" data-hook>
-            <%= logo %>
-          </figure>
-          <div id="top-nav-bar-mobile" class="text-right flex-grow-1 header-spree-fluid-secondary-navigation" data-hook>
-            <button id="mobile-navigation-close-button" aria-label="<%= Spree.t('nav_bar.close_menu') %>">
-              <%= icon(name: 'close',
-                      classes: 'd-sm-none',
-                      width: 17,
-                      height: 17) %>
-              <%= icon(name: 'close',
-                      classes: 'd-none d-sm-inline',
-                      width: 26,
-                      height: 26) %>
-            </button>
-          </div>
-        </div>
+  <div class="position-fixed text-uppercase d-xl-none mobile-navigation" role="navigation" aria-label="<%= Spree.t('nav_bar.mobile') %>">
+    <div class="container d-flex align-items-center justify-content-between header-spree" data-hook>
+      <button class="m-0 p-0" id="mobile-navigation-back-button" aria-label="<%= Spree.t('nav_bar.go_to_previous_menu') %>">
+        <%= icon(name: 'arrow-right',
+                classes: 'd-inline spree-icon-arrow spree-icon-arrow-left',
+                width: 26,
+                height: 26) %>
+      </button>
+      <figure class="logo header-spree-fluid-logo" data-hook>
+        <%= logo %>
+      </figure>
+      <div id="top-nav-bar-mobile" class="m-0 p-0 header-spree-fluid-secondary-navigation" data-hook>
+        <button id="mobile-navigation-close-button" aria-label="<%= Spree.t('nav_bar.close_menu') %>">
+          <%= icon(name: 'close',
+                  classes: 'd-inline',
+                  width: 26,
+                  height: 26) %>
+        </button>
       </div>
     </div>
 
@@ -38,20 +24,14 @@
       <% spree_navigation_data.each do |root| %>
         <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
           <%= link_to root[:title], root[:url], class: 'w-75' %>
-
-          <a class="w-25 text-right mobile-navigation-category-link" data-category="<%= root[:title].parameterize %>" href="#" aria-label="<%= Spree.t('go_to_category')%>">
-            <%= icon(name: 'arrow-right',
-                    classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-right',
-                    width: 16,
-                    height: 16) %>
-            <%= icon(name: 'arrow-right',
-                    classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-right',
-                    width: 14,
-                    height: 27) %>
-          </a>
-
-          <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="<%= root[:title].parameterize %>">
-            <% if root[:items].present? %>
+          <% if root[:items].present? %>
+            <a class="w-25 text-right mobile-navigation-category-link" data-category="<%= root[:title].parameterize %>" href="#" aria-label="<%= Spree.t('go_to_category')%>">
+              <%= icon(name: 'arrow-right',
+                       classes: 'd-inline spree-icon-arrow spree-icon-arrow-right',
+                       width: 14,
+                       height: 27) %>
+            </a>
+            <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="<%= root[:title].parameterize %>">
               <li class="text-center font-weight-bold mobile-navigation-sublist-header">
                 <%= root[:title] %>
               </li>
@@ -60,14 +40,11 @@
                   <%= link_to item[:title], item[:url], class: 'w-75' %>
                 </li>
               <% end %>
-            <% else %>
-              <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
-                <%= link_to root[:title], root[:url], class: 'w-75' %>
-              </li>
-            <% end %>
-          </ul>
+            </ul>
+          <% end %>
         </li>
       <% end %>
+      <%= render partial: 'spree/shared/mobile_change_store' %>
     </ul>
   </div>
 <% end %>

data/app/views/spree/shared/_nav_bar.html.erb

@@ -1,16 +1,11 @@
-<ul id="nav-bar" class="nav align-items-center d-flex justify-content-end navbar-right">
+<ul id="nav-bar" class="nav align-items-center d-flex flex-nowrap justify-content-end navbar-right">
   <li>
     <div class="navbar-right-search-menu">
       <button type="button" class="navbar-right-dropdown-toggle search-icons" aria-label="<%= Spree.t('nav_bar.show_search')%>">
         <%= icon(name: 'magnifying-glass',
-                 classes: 'd-none d-xl-inline-block',
+                 classes: 'd-inline-block',
                  width: 36,
                  height: 36)  %>
-
-        <%= icon(name: 'magnifying-glass',
-                 classes: 'd-xl-none',
-                 width: 24,
-                 height: 24)  %>
       </button>
 
       <div id="search-dropdown" class="p-0 px-md-4 py-md-2 w-100 shadow navbar-right-search-menu-dropdown hide-on-esc">
@@ -21,16 +16,11 @@
   <% if defined?(spree.account_link_path) %>
     <li>
       <div class="dropdown navbar-right-dropdown">
-        <button id="account-button" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle" aria-label="<%= Spree.t('nav_bar.show_user_menu')%>">
+        <button id="account-button" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle account-icon" aria-label="<%= Spree.t('nav_bar.show_user_menu')%>">
           <%= icon(name: 'person',
-                  classes: 'd-none d-xl-inline-block',
+                  classes: 'd-inline-block',
                   width: 41.4,
                   height: 36)  %>
-
-          <%= icon(name: 'person',
-                  classes: 'd-xl-none',
-                  width: 27.6,
-                  height: 24)  %>
         </button>
 
         <div id="link-to-account" class="dropdown-menu dropdown-menu-right text-right">
@@ -39,7 +29,7 @@
     </li>
   <% end %>
   <li id="link-to-cart">
-    <%= render 'spree/shared/cart', class: 'd-none d-xl-inline-block cart-icon--xl', size: 36, item_count: 0 %>
-    <%= render 'spree/shared/cart', class: 'd-xl-none', size: 24, item_count: 0 %>
+    <%= render 'spree/shared/cart', class: 'd-inline-block cart-icon', size: 36, item_count: 0 %>
   </li>
+  <%= render partial: 'spree/shared/change_store' %>
 </ul>

data/app/views/spree/shared/_option_values.html.erb

@@ -5,8 +5,8 @@
     <% name = option_value.name %>
 
     <% option_value_param = (selected_option_values.include?(id) ? selected_option_values - [id] : selected_option_values + [id]).join(',') %>
-    <%= link_to permitted_params.merge(ot_downcase_name => option_value_param, menu_open: 1) do %>
-      <% if ot_downcase_name == 'color' %>
+    <%= link_to permitted_params.merge(ot_downcase_name => option_value_param, menu_open: 1), data: { params: permitted_params.merge(ot_downcase_name => option_value_param, menu_open: 1), id: id, filter_name: ot_downcase_name, multiselect: true } do %>
+      <% if Spree::OptionType.color&.name&.downcase == ot_downcase_name %>
 
         <span class="d-inline-block mb-1">
                         <%= render partial: 'spree/shared/color_select', locals: {

data/app/views/spree/shared/_quantity_select.html.erb

@@ -1,5 +1,5 @@
 <%# TODO: Use in cart %>
-<div class="d-flex quantity-select mx-auto mx-md-0">
+<div class="d-inline-flex quantity-select">
   <%= button_tag '-', type: 'button', class: "border-right-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-decrease" %>
   <%= number_field_tag input_name, 1, min: 1, max: maximum_quantity, class: "p-0 flex-grow-1 flex-shrink-1 text-center form-control border-left-0 border-right-0 quantity-select-value", 'aria-label': Spree.t('pdp.quantity') %>
   <%= button_tag '+', type: 'button', class: "border-left-0  flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-increase" %>

data/app/views/spree/shared/_search.html.erb

@@ -1,19 +1,16 @@
-<%= form_tag spree.products_path, method: :get, class: "py-md-1 d-flex align-items-center" do %>
+<%= form_tag spree.products_path, method: :get, class: "py-md-1 d-flex align-items-center search-form" do %>
   <%= search_field_tag :keywords,
                        params[:keywords],
                        placeholder: Spree.t(:search),
+                       title: Spree.t(:search),
                        autofocus: true,
+                       'aria-label': Spree.t(:search),
                        class: " border-0 p-3"
   %>
-  <label class="m-0">
-    <input type="submit">
+  <button type="submit" class="btn border-0 p-0" aria-label="Submit">
     <%= icon(name: 'search',
-             classes: 'd-md-none',
-             width: 20,
-             height: 20) %>
-    <%= icon(name: 'search',
-             classes: 'd-none d-md-inline',
-             width: 27,
-             height: 27) %>
-  </label>
+            classes: 'd-inline',
+            width: 27,
+            height: 27) %>
+  </button>
 <% end %>

data/app/views/spree/shared/_taxonomies.html.erb

@@ -1,6 +1,6 @@
 <% max_level = Spree::Config[:max_level_in_taxons_menu] || 1 %>
 
-<nav id="taxonomies" class="sidebar-item" data-hook arial->
+<nav id="taxonomies" class="sidebar-item" data-hook aria-label="taxonomies">
   <% @taxonomies.each do |taxonomy| %>
     <% cache [I18n.locale, taxonomy, max_level, @taxon] do %>
       <% if taxonomy.root.children.any? %>

data/app/views/spree/shared/carousel/_thumbnails.html.erb

@@ -11,9 +11,9 @@
   <div class="carousel-inner order-1 h-100">
   <% images.each_with_index do |image, image_index| %>
       <% if image_index % per_page == 0 %>
-        <div class="carousel-item product-thumbnails-carousel-item<%= ' active' if image_index == 0 %>">
+        <div class="carousel-item product-thumbnails-carousel-item h-100<%= ' active' if image_index == 0 %>">
         <div class="h-100 d-flex flex-column justify-content-center">
-            <div class="product-thumbnails-carousel-item-content py-1">
+            <div class="product-thumbnails-carousel-item-content py-1 h-100">
       <% end %>
               <div
                 class="product-thumbnails-carousel-item-single product-thumbnails-carousel-item-single--visible"
@@ -37,32 +37,34 @@
       <% end %>
     <% end %>
   </div>
-  <a
-    class="d-none d-sm-flex order-0 justify-content-center w-100 product-thumbnails-carousel-previous"
-    href="#<%= id %>"
-    role="button"
-    data-slide="prev"
-  >
-    <span aria-hidden="true">
-      <%= icon(name: 'arrow-right',
-               classes: 'spree-icon-arrow spree-icon-arrow-up',
-               width: 16,
-               height: 16) %>
-    </span>
-    <span class="sr-only"><%= Spree.t(:previous) %></span>
-  </a>
-  <a
-    class="d-none d-sm-flex order-2 justify-content-center w-100 product-thumbnails-carousel-next"
-    href="#<%= id %>"
-    role="button"
-    data-slide="next"
-  >
-    <span aria-hidden="true">
-      <%= icon(name: 'arrow-right',
-               classes: 'spree-icon-arrow spree-icon-arrow-down',
-               width: 16,
-               height: 16) %>
-    </span>
-    <span class="sr-only"><%= Spree.t(:next) %></span>
-  </a>
+  <% if images.length > per_page %>
+    <a
+      class="d-none d-sm-flex order-0 justify-content-center w-100 product-thumbnails-carousel-previous"
+      href="#<%= id %>"
+      role="button"
+      data-slide="prev"
+    >
+      <span aria-hidden="true">
+        <%= icon(name: 'arrow-right',
+                classes: 'spree-icon-arrow spree-icon-arrow-up',
+                width: 16,
+                height: 16) %>
+      </span>
+      <span class="sr-only"><%= Spree.t(:previous) %></span>
+    </a>
+    <a
+      class="d-none d-sm-flex order-2 justify-content-center w-100 product-thumbnails-carousel-next"
+      href="#<%= id %>"
+      role="button"
+      data-slide="next"
+    >
+      <span aria-hidden="true">
+        <%= icon(name: 'arrow-right',
+                classes: 'spree-icon-arrow spree-icon-arrow-down',
+                width: 16,
+                height: 16) %>
+      </span>
+      <span class="sr-only"><%= Spree.t(:next) %></span>
+    </a>
+  <% end %>
 </div>

data/app/views/spree/users/_address.html.erb

@@ -1,25 +1,21 @@
-<div class="row">
-  <address class="mb-0 col-10">
-    <span class="account-page-user-full-name">
-      <%= address.full_name %>
-    </span>
+<div class="d-flex align-items-start justify-content-between">
+  <div class="row">
+    <address class="mb-0 col-12">
+      <span class="account-page-user-full-name">
+        <%= address.full_name %>
+      </span>
 
-    <div><%= "#{address.address1} #{address.address2}" %>,</div>
-    <div><%= "#{address.city}, #{address.state&.abbr} #{address.zipcode}" %>,</div>
-    <div><%= address.country.name %></div>
-  </address>
-  <div class="col-2">
-    <div class="row">
-      <div class="col-5 offset-md-2 order-1">
-        <%= link_to spree.edit_address_path(address), method: :get, class: 'address-button', data: { hook: 'edit_address' } do %>
-          <%= inline_svg_tag 'edit.svg', class: "delete-address-img" %>
-        <% end %>
-      </div>
-      <div class="col-5 offset-2 offset-md-0 order-0">
-        <div class="bg-transparent border-0 p-0 m-0 address-button delete-button js-delete-address-link" data-address="<%= spree.address_path(address) %>">
-          <%= inline_svg_tag 'garbage_2.svg', class: "delete-address-img" %>
-        </div>
-      </div>
+      <div><%= "#{address.address1} #{address.address2}" %>,</div>
+      <div><%= "#{address.city}, #{address.state&.abbr} #{address.zipcode}" %>,</div>
+      <div><%= address.country.name %></div>
+    </address>
+  </div>
+  <div class="d-flex ml-2">
+    <div role="button" class="bg-transparent border-0 px-1 mr-1 address-button delete-button js-delete-address-link" data-address="<%= spree.address_path(address) %>">
+      <%= inline_svg_tag 'garbage_2.svg', class: "delete-address-img" %>
     </div>
+    <%= link_to spree.edit_address_path(address), method: :get, class: 'address-button px-1', role: 'button', data: { hook: 'edit_address' } do %>
+      <%= inline_svg_tag 'edit.svg', class: "delete-address-img" %>
+    <% end %>
   </div>
 </div>

data/app/views/spree/users/show.html.erb

@@ -4,7 +4,7 @@
   <div class="row">
     <div class="col-xs-12 col-lg-4">
       <dt class="text-uppercase account-page-user-info-item-title">
-        <%= Spree.t(:email) %>
+        <%= Spree.t(:account_info) %>
         <%= link_to spree.edit_user_path(@user), class: "account-page-user-info-item-title-edit" do %>
           <%= inline_svg_tag 'edit.svg', class: "account-page-user-info-item-title-edit-img" %>
         <% end %>
@@ -13,7 +13,7 @@
 
       <div class="d-lg-inline-block account-page-user-info-item-store-credits">
         <p class="my-0 text-uppercase text-center">
-          <%= Spree.t(:store_credit_name) %>: <b class="account-page-user-info-item-store-credits-amount"><%= Spree::Money.new(@user.total_available_store_credit).to_s.gsub('.00', '') %></b>
+          <%= Spree.t(:store_credit_name) %>: <b class="account-page-user-info-item-store-credits-amount"><%= Spree::Money.new(@user.total_available_store_credit(current_currency), currency: current_currency).to_s.gsub('.00', '') %></b>
         </p>
       </div>
     </div>

data/config/initializers/canonical_rails.rb

@@ -10,5 +10,5 @@ CanonicalRails.setup do |config|
   # Parameter spamming can cause index dilution by creating seemingly different URLs with identical or near-identical content.
   # Unless whitelisted, these parameters will be omitted
 
-  config.allowed_parameters = [:keywords, :page, :search, :taxon]
+  config.whitelisted_parameters = [:keywords, :page, :search, :taxon]
 end

data/config/routes.rb

@@ -35,4 +35,6 @@ Spree::Core::Engine.add_routes do
   get '/api_tokens', to: 'store#api_tokens'
   post '/ensure_cart', to: 'store#ensure_cart'
   get '/products/:id/related', to: 'products#related'
+
+  get '/currency/set', to: 'currency#set', defaults: { format: :json }, as: :set_currency
 end

data/spree_frontend.gemspec

@@ -5,11 +5,11 @@ Gem::Specification.new do |s|
   s.platform    = Gem::Platform::RUBY
   s.name        = 'spree_frontend'
   s.version     = Spree.version
-  s.author      = 'Sean Schofield'
-  s.email       = 'sean@spreecommerce.com'
+  s.authors     = ['Sean Schofield', 'Spark Solutions']
+  s.email       = 'hello@spreecommerce.org'
   s.summary     = 'Frontend e-commerce functionality for the Spree project.'
   s.description = s.summary
-  s.homepage    = 'http://spreecommerce.org'
+  s.homepage    = 'https://spreecommerce.org'
   s.license     = 'BSD-3-Clause'
 
   s.metadata = {
@@ -28,9 +28,9 @@ Gem::Specification.new do |s|
   s.add_dependency 'spree_api', s.version
   s.add_dependency 'spree_core', s.version
 
-  s.add_dependency 'bootstrap',       '~> 4.3.1'
+  s.add_dependency 'bootstrap',       '>= 4.3.1', '< 4.6.0'
   s.add_dependency 'glyphicons',      '~> 1.0.2'
-  s.add_dependency 'canonical-rails', '~> 0.2.10'
+  s.add_dependency 'canonical-rails', '~> 0.2.5'
   s.add_dependency 'inline_svg',      '~> 1.5'
   s.add_dependency 'jquery-rails',    '~> 4.3'
   s.add_dependency 'turbolinks',      '~> 5.2.0'