spree_frontend 4.2.0.rc1 → 4.2.0

data/app/views/spree/products/_cart_form.html.erb

@@ -16,7 +16,6 @@
 
 <% is_product_available_in_currency = product_available_in_currency? %>
 <% default_variant = default_variant(@variants, @product) %>
-<% should_display_compare_at_price = default_variant.compare_at_price.present? && default_variant.compare_at_price > default_variant.price %>
 
 <%= form_for :order, html: {
     id: 'add-to-cart-form',
@@ -28,11 +27,9 @@
   <div id="inside-product-cart-form" data-hook="inside_product_cart_form">
     <% if is_product_available_in_currency %>
       <div id="product-price" class="mb-2 text-center text-md-left add-to-cart-form-price" data-hook="product_price">
-        <span class="compare-at-price">
-          <% if should_display_compare_at_price %>
-            <span class="mr-3"><%= display_compare_at_price(default_variant) %></span>
-          <% end %>
-        </span>
+        <% if should_display_compare_at_price?(default_variant) %>
+          <span class="compare-at-price mr-3"><%= display_compare_at_price(default_variant) %></span>
+        <% end %>
         <span class="price selling" content="<%= @product_price.to_d %>">
           <%= display_price(default_variant) %>
         </span>
@@ -58,7 +55,7 @@
       <ul id="product-variants" class="product-variants">
         <% used_variants_options(@variants, @product).each_with_index do |option_type, index| %>
           <li>
-            <% if Spree::OptionType.color&.name == option_type[:name] %>
+            <% if color_option_type_name.present? && color_option_type_name == option_type[:name] %>
               <%= render "color_option_type", option_type: option_type, index: index %>
             <% else %>
               <%= render "option_type", option_type: option_type, index: index %>

data/app/views/spree/products/_color_option_type.html.erb

@@ -9,7 +9,7 @@
         <li>
           <%= label_tag "variant_option_value_id_#{option_type[:id]}_#{option_value[:id]}",
             class: "m-1 m-sm-2 m-md-1 color-select-label",
-            title: option_value[:name],
+            title: option_value[:name]&.humanize,
             data: { toggle: "tooltip", placement: "bottom" } do %>
 
             <%= radio_button_tag "variant_option_value_id_#{option_type[:id]}",
@@ -22,8 +22,7 @@
                 "presentation" => option_value[:presentation],
                 "variant-id" => option_value[:variant_id],
                 "is-color" => true
-              }
-            %>
+              } %>
 
             <%= render partial: "spree/shared/color_select", locals: {
               color: option_value[:presentation],

data/app/views/spree/products/_filters_desktop.html.erb

@@ -24,8 +24,7 @@
                 params_ot_downcase_name: params[ot_downcase_name],
                 option_type: option_type,
                 permitted_params: permitted_params,
-                ot_downcase_name: ot_downcase_name
-              %>
+                ot_downcase_name: ot_downcase_name %>
             </div>
           </div>
         </div>

data/app/views/spree/products/_gallery.html.erb

@@ -2,16 +2,15 @@
   <% if @product_images.size > 0 %>
     <div
       class="w-100 d-flex align-self-start justify-content-between product-details-images"
-      data-hook="product_left_part_wrap"
-    >
+      data-hook="product_left_part_wrap">
+
       <div class="d-none d-md-block product-details-thumbnails" data-hook="product_thumbnails">
         <%= render 'spree/shared/carousel/thumbnails',
                   images: @product_images,
                   group_id: 'main-product-carousel',
                   id: 'productThumbnailsCarousel',
                   trigger_id: 'productCarousel',
-                  per_page: 5
-        %>
+                  per_page: 5 %>
       </div>
       <div class="product-details-single" data-hook="product_images">
         <%= render 'spree/shared/carousel/single',
@@ -19,8 +18,7 @@
                   group_id: 'main-product-carousel',
                   id: 'productCarousel',
                   trigger_id: 'productCarousel',
-                  zoomed: false
-        %>
+                  zoomed: false %>
       </div>
     </div>
   <% end %>

data/app/views/spree/products/_gallery_modal.html.erb

@@ -1,5 +1,5 @@
 <% if @product_images.size > 0 %>
-  <div class="modal fade" id="picturesModal" tabindex="-1" role="dialog" >
+  <div class="modal fade" id="picturesModal" tabindex="-1" role="dialog">
     <div class="modal-dialog--zoom modal-dialog mw-100 vh-100 mt-0 mb-0" role="document">
       <div class="modal-content h-100">
         <div class="modal-body h-100">
@@ -23,8 +23,7 @@
                             group_id: 'main-product-modal-carousel',
                             id: 'productModalThumbnailsCarousel',
                             trigger_id: 'productCarousel',
-                            per_page: 4
-                %>
+                            per_page: 4 %>
               </div>
             <% end %>
             <div class="product-details-single">
@@ -33,8 +32,7 @@
                           group_id: 'main-product-modal-carousel',
                           id: 'productModalCarousel',
                           trigger_id: 'productCarousel',
-                          zoomed: true
-              %>
+                          zoomed: true %>
             </div>
           </div>
         </div>

data/app/views/spree/products/_option_type.html.erb

@@ -15,8 +15,7 @@
               "option-type-index" => index,
               "presentation" => option_value[:presentation],
               "variant-id" => option_value[:variant_id]
-            }
-          %>
+            } %>
 
           <%= label_tag "variant_option_value_id_#{option_type[:id]}_#{option_value[:id]}",
             class: "m-1 select-label",

data/app/views/spree/products/_sort_mobile.html.erb

@@ -8,7 +8,7 @@
   <div class="plp-overlay-header-border"></div>
   <ul class="pt-1 plp-overlay-ul">
     <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by].blank? %>">
-      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: nil)) %>" >
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: nil)) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>
@@ -16,7 +16,7 @@
       </a>
     </li>
     <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'newest-first' %>">
-      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'newest-first')) %>" >
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'newest-first')) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>
@@ -24,7 +24,7 @@
       </a>
     </li>
     <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'price-high-to-low' %>">
-      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-high-to-low')) %>" >
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-high-to-low')) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>
@@ -32,7 +32,7 @@
       </a>
     </li>
     <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'price-low-to-high' %>">
-      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-low-to-high')) %>" >
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-low-to-high')) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>

data/app/views/spree/products/related.html.erb

@@ -1,8 +1,14 @@
-<% if related_products.any? %>
+<% if product_relation_types.any? %>
   <div id="related-products">
-    <div class="product-details-related">
-      <p class="font-weight-bold text-center text-uppercase product-details-carousel-text"><%= Spree.t('pdp.you_may_also_like') %></p>
-      <%= render 'spree/shared/carousel_4_products', id: 'related-products-carousel', products: @related_products %>
-    </div>
+    <% product_relation_types.each do |relation_type| %>
+      <% products = product_relations_by_type(relation_type) %>
+
+      <% if products.any? %>
+        <div class="product-details-related" id="product-details-related-<%= relation_type.id %>">
+          <p class="font-weight-bold text-center text-uppercase product-details-carousel-text"><%= relation_type.name %></p>
+          <%= render 'spree/shared/carousel_4_products', id: "related-products-carousel-#{relation_type.id}", products: products %>
+        </div>
+      <% end %>
+    <% end %>
   </div>
 <% end %>

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

@@ -9,9 +9,6 @@
     <div class="row" data-hook="product_show">
       <%= render partial: 'gallery' %>
       <div class="col-12 col-md-5" data-hook="product_right_part">
-        <% if @product.respond_to?(:vendor) %>
-          <%= render partial: 'vendor_info' %>
-        <% end %>
         <div id="product-description" data-hook="product_right_part_wrap">
           <h1 class="mt-3 mt-md-0 text-center text-md-left product-details-title">
             <%= @product.name %>
@@ -51,5 +48,4 @@
 <div
   data-related-products
   data-related-products-id="<%= @product.slug %>"
-  data-related-products-enabled="<%= @product.respond_to?(:has_related_products?) %>"
-/>
+  data-related-products-enabled="<%= @product.respond_to?(:has_related_products?) %>" />

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

@@ -20,8 +20,7 @@
       class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--previous"
       href="#<%= id %>-mobile"
       role="button"
-      data-slide="prev"
-    >
+      data-slide="prev">
       <span class="d-flex justify-content-center align-items-center carousel-icon-control-rounded" aria-hidden="true">
         <%= icon(name: 'arrow-right',
                 classes: 'spree-icon-arrow spree-icon-arrow-left',
@@ -35,8 +34,7 @@
       class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--next"
       href="#<%= id %>-mobile"
       role="button"
-      data-slide="next"
-    >
+      data-slide="next">
       <span class="d-flex justify-content-center align-items-center carousel-icon-control-rounded" aria-hidden="true">
         <%= icon(name: 'arrow-right',
                 classes: 'spree-icon-arrow spree-icon-arrow-right',
@@ -56,14 +54,12 @@
               class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--previous"
               href="#<%= id %>-desktop"
               role="button"
-              data-slide="prev"
-            >
+              data-slide="prev">
               <span class="d-flex justify-content-center align-items-center carousel-icon-control-rounded" aria-hidden="true">
                 <%= icon(name: 'arrow-right',
                         classes: 'spree-icon-arrow spree-icon-arrow-left',
                         width: 20,
-                        height: 20)
-                %>
+                        height: 20) %>
               </span>
               <span class="sr-only"><%= Spree.t(:previous) %></span>
             </a>
@@ -80,14 +76,12 @@
               class="d-md-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--next"
               href="#<%= id %>-desktop"
               role="button"
-              data-slide="next"
-            >
+              data-slide="next">
               <span class="d-flex justify-content-center align-items-center carousel-icon-control-rounded" aria-hidden="true">
                 <%= icon(name: 'arrow-right',
                         classes: 'spree-icon-arrow spree-icon-arrow-right',
                         width: 20,
-                        height: 20)
-                %>
+                        height: 20) %>
               </span>
               <span class="sr-only"><%= Spree.t(:next) %></span>
             </a>

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

@@ -1,9 +1,9 @@
 <svg class="color-select" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
   <g class="color-select-border" fill="none" fill-rule="evenodd">
-    <circle class="<%= 'color-select-border--selected' if selected %> plp-overlay-color-item" cx="16" cy="16" r="15" stroke-width="2"/>
+    <circle class="<%= 'color-select-border--selected' if selected %> plp-overlay-color-item" cx="16" cy="16" r="15" stroke-width="2" />
     <g transform="translate(2 2)">
-      <circle cx="14" cy="14" fill="<%= color %>" fill-rule="evenodd" r="12"/>
-      <circle cx="14" cy="14" r="13" stroke="#fff" stroke-width="2"/>
+      <circle cx="14" cy="14" fill="<%= color %>" fill-rule="evenodd" r="12" />
+      <circle cx="14" cy="14" r="13" stroke="#fff" stroke-width="2" />
     </g>
   </g>
 </svg>

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

@@ -0,0 +1,13 @@
+<% if defined?(should_render_currency_dropdown?) && should_render_currency_dropdown? %>
+  <%= form_tag spree.set_currency_path, method: :get, class: 'px-4 py-3 w-100', id: 'currency-select' do %>
+    <div class="form-group">
+      <label for="switch_to_currency" class="dropdown-header text-center">
+        <%= Spree.t(:choose_currency) %>
+      </label>
+      <%= select_tag(:switch_to_currency,
+        options_for_select(supported_currency_options, current_currency),
+        class: 'custom-select w-100') %>
+      <noscript><%= submit_tag %></noscript>
+    </div>
+  <% end %>
+<% end %>

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

@@ -18,8 +18,7 @@
       class="btn btn-primary text-uppercase font-weight-bold delete-address-popup-button"
       data-method="delete"
       rel="nofollow"
-      href="#"
-    >
+      href="#">
       <%= Spree.t("address_action_popup.delete_button") %>
     </a>
   </div>

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

@@ -1,10 +1,10 @@
 <% if target && target.errors.any? %>
   <div id="errorExplanation" class="alert alert-danger d-flex justify-content-center mb-0" data-hook>
-     <ul class="mb-0 pl-0"  style="list-style-type: none;">
+     <ul class="mb-0 pl-0" style="list-style-type: none;">
        <% target.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
-     <br/>
+     <br>
   </div>
 <% end %>

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

@@ -33,7 +33,7 @@
           <div class="d-flex flex-column align-items-center align-items-xl-start pb-3 flex-grow-2 footer-spree-contact-note">
             <div>
               <strong><%= current_store.name %></strong>
-              <br/>
+              <br>
               <% if current_store.address %>
                 <%= current_store.address.html_safe %>
               <% end %>
@@ -41,8 +41,8 @@
             <% if current_store.contact_phone&.present? %>
               <div><%= Spree.t(:call_us_now) %><%= current_store.contact_phone %></div>
             <% end %>
-            <% if current_store.contact_email&.present? %>
-              <div><%= Spree.t(:email) %>: <%= current_store.contact_email %></div>
+            <% if current_store.customer_support_email&.present? %>
+              <div><%= Spree.t(:email) %>: <%= current_store.customer_support_email %></div>
             <% end %>
           </div>
         </div>
@@ -68,7 +68,7 @@
               <%= Spree.t('nav_bar.my_account') %>
             </div>
             <div class="pt-2">
-              <%= link_to Spree.t('nav_bar.my_orders'), spree.account_path(anchor: "account-my-orders") %>
+              <%= link_to Spree.t(:my_orders).upcase, spree.account_path(anchor: "account-my-orders") %>
             </div>
           </div>
         <% end %>

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

@@ -1,5 +1,5 @@
 <title><%= title %></title>
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <%== og_meta_data_tags %>
 <%== meta_data_tags %>
 <%== meta_robots %>
@@ -8,5 +8,9 @@
 <%= stylesheet_link_tag 'spree/frontend/all', media: 'screen', 'data-turbolinks-track': 'reload' %>
 <%= csrf_meta_tags %>
 <%= render 'spree/shared/paths' %>
+<script>
+  var SPREE_LOCALE = '<%= I18n.locale %>'
+  var SPREE_CURRENCY = '<%= current_currency %>'
+</script>
 <%= javascript_include_tag 'spree/frontend/all', defer: true, 'data-turbolinks-track': 'reload' %>
 <%= yield :head %>

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

@@ -8,7 +8,7 @@
             <button class="navbar-toggler border-0 px-0 d-flex" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-label="<%= Spree.t('nav_bar.show_menu') %>">
               <%= icon(name: 'burger',
                       width: 18.5,
-                      height: 16)  %>
+                      height: 16) %>
             </button>
           </div>
           <figure class="logo flex-grow-0 flex-xl-grow-1 order-xl-0 header-spree-fluid-logo m-0">

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

@@ -0,0 +1,31 @@
+<% if (defined?(should_render_store_chooser?) && should_render_store_chooser?) || (defined?(should_render_internationalization_dropdown?) && should_render_internationalization_dropdown?) %>
+  <li class="d-none d-xl-block internationalization-options">
+    <div class="dropdown navbar-right-dropdown">
+      <button id="internationalization-button-desktop" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle" aria-label="<%= Spree.t(:internationalization) %>">
+        <%= icon(name: 'global',
+                classes: 'd-none d-xl-inline-block',
+                width: 41,
+                height: 36) %>
+        <%= icon(name: 'arrow-down',
+                classes: 'd-inline-block d-xl-none',
+                width: 15,
+                height: 15) %>
+      </button>
+
+      <div id="internationalization-options-desktop" class="dropdown-menu dropdown-menu-right text-left">
+        <% if (defined?(should_render_store_chooser?) && should_render_store_chooser?) %>
+          <% stores.each do |store| %>
+            <div class="pl-3 d-flex justify-content-between align-items-center stores-list">
+              <%= country_flag_icon(store_country_iso(store)) %>
+              <%= store_link(store, class: "dropdown-item text-uppercase #{'font-weight-bold' if current_store == store}") %>
+            </div>
+          <% end %>
+        <% else %>
+          <%= render 'spree/shared/locale_dropdown' %>
+          <div class="dropdown-divider"></div>
+          <%= render 'spree/shared/currency_dropdown' %>
+        <% end %>
+      </div>
+    </div>
+  </li>
+<% end %>

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

@@ -1,9 +1,9 @@
 <div class="checkout-confirm-order-details-line-items-line-item w-100 d-table-row">
   <div class="checkout-confirm-order-details-line-items-line-item-name d-table-cell align-middle py-3 py-sm-4">
     <div class="d-flex align-items-lg-center">
-      <%= link_to product_image(line_item.variant), line_item.product %>
+      <%= link_to product_image(line_item.variant), spree.product_path(line_item.product) %>
       <div class="d-flex flex-column mt-2 mt-lg-0">
-        <div><%= link_to line_item.name, line_item.product %></div>
+        <div><%= link_to line_item.name, spree.product_path(line_item.product) %></div>
         <ul class="checkout-confirm-order-details-line-items-line-item-name-options text-uppercase list-unstyled mb-0">
           <% line_item.variant.option_values.sort { |ov| ov.option_type.position }.each do |ov| %>
           <li>

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

@@ -1,8 +1,8 @@
 <% if try_spree_current_user %>
-  <%= link_to Spree.t('nav_bar.my_account'), spree.account_path, class: 'dropdown-item' if spree.respond_to?(:account_path) %>
-  <%= link_to Spree.t('nav_bar.admin_panel'), spree.admin_orders_path, class: 'dropdown-item text-uppercase' if try_spree_current_user.has_spree_role?(:admin) %>
-  <%= link_to Spree.t('nav_bar.log_out'), spree_logout_path, class: 'dropdown-item', method: :get if defined?(spree_logout_path) %>
+  <%= link_to Spree.t(:my_account).upcase, spree.account_path, class: 'dropdown-item' if spree.respond_to?(:account_path) %>
+  <%= link_to Spree.t('nav_bar.admin_panel'), spree.admin_orders_path(locale: nil), class: 'dropdown-item text-uppercase' if try_spree_current_user.has_spree_role?(:admin) %>
+  <%= link_to Spree.t(:logout).upcase, spree_logout_path, class: 'dropdown-item', method: :get if defined?(spree_logout_path) %>
 <% else %>
-  <%= link_to Spree.t('nav_bar.log_in'), spree_login_path, class: 'dropdown-item' if defined?(spree_login_path) %>
-  <%= link_to Spree.t('nav_bar.sign_up'), spree_signup_path, class: 'dropdown-item' if defined?(spree_signup_path) %>
+  <%= link_to Spree.t(:login).upcase, spree_login_path, class: 'dropdown-item' if defined?(spree_login_path) %>
+  <%= link_to Spree.t(:sign_up).upcase, spree_signup_path, class: 'dropdown-item' if defined?(spree_signup_path) %>
 <% end %>

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

@@ -0,0 +1,13 @@
+<% if should_render_locale_dropdown? %>
+  <%= form_tag spree.set_locale_path, method: :get, class: 'px-4 py-3 w-100', id: 'locale-select' do %>
+    <div class="form-group">
+      <label for="switch_to_locale" class="dropdown-header text-center">
+        <%= Spree.t('i18n.language') %>
+      </label>
+      <%= select_tag(:switch_to_locale,
+        options_for_select(supported_locales_options, I18n.locale),
+        class: 'custom-select w-100') %>
+      <noscript><%= submit_tag %></noscript>
+    </div>
+  <% end %>
+<% end %>