spree_frontend 4.1.0 → 4.7.0

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

@@ -1,5 +1,5 @@
-<% cache [common_product_cache_keys, products&.maximum(:updated_at)&.to_i, id] do %>
-  <div id="<%= id %>-mobile" class="carousel slide d-md-none homepage-carousel" data-interval="false">
+<% cache [common_product_cache_keys, products&.except(:group, :order)&.maximum(:updated_at)&.to_i, id, products&.ids&.join(',')] do %>
+  <div id="<%= id.parameterize %>-mobile" class="carousel slide d-md-none homepage-carousel" data-interval="false">
     <div class="carousel-inner">
       <% products.each_slice(2).with_index do |sliced_items, index| %>
         <div class="carousel-item <%= 'active' if index == 0 %>">
@@ -18,10 +18,9 @@
     </div>
     <a
       class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--previous"
-      href="#<%= id %>-mobile"
+      href="#<%= id.parameterize %>-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',
@@ -33,10 +32,9 @@
 
     <a
       class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--next"
-      href="#<%= id %>-mobile"
+      href="#<%= id.parameterize %>-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',
@@ -47,30 +45,28 @@
     </a>
   </div>
 
-  <div id="<%= id %>-desktop" class="carousel slide d-none d-md-block homepage-carousel" data-interval="false">
+  <div id="<%= id.parameterize %>-desktop" class="carousel slide d-none d-md-block homepage-carousel" data-interval="false">
     <div class="carousel-inner carousel-inner-width">
       <% products.each_slice(4).with_index do |sliced_items, index| %>
         <div class="carousel-item <%= 'active' if index == 0 %>">
           <div class="container position-relative">
             <a
               class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--previous"
-              href="#<%= id %>-desktop"
+              href="#<%= id.parameterize %>-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>
 
             <div class="row carousel-items-container">
               <% sliced_items.each do |item| %>
-                <div class="col-3">
+                <div class="col-3 carouselItem">
                   <%= render 'spree/shared/product', product: item, image_class: 'w-100' %>
                 </div>
               <% end %>
@@ -78,16 +74,14 @@
 
             <a
               class="d-md-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--next"
-              href="#<%= id %>-desktop"
+              href="#<%= id.parameterize %>-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/_cart.html.erb

@@ -5,5 +5,5 @@
            width: size,
            height: size) %>
 
-  <div class="font-weight-medium cart-icon-count"><%= item_count %></div>
+  <span class="font-weight-medium cart-icon-count"><%= item_count %></span>
 <% end %>

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

@@ -1,27 +1,28 @@
 <div id="spree-header">
   <header id="header" class="d-flex align-items-center header-spree border-bottom">
-    <div class="container position-relative">
-      <div class="position-absolute checkout-header-link">
-        <%= link_to spree.cart_path, class: "d-none d-sm-inline text-uppercase", method: :get do %>
-          <%= icon(name: 'arrow-right',
-                   classes: 'spree-icon-arrow spree-icon-arrow-left',
-                   width: 7,
-                   height: 14) %>
-          <span class="checkout-header-link-text"><%= Spree.t('checkout_page.back_to_cart') %></span>
-        <% end %>
+    <div class="container" role="navigation" aria-label="<%= Spree.t('checkout_page.main_navigation') %>">
+      <div class="row">
+
+        <div class="col d-flex align-items-center truncate pr-0">
+          <%= link_to spree.cart_path, class: "text-uppercase truncate checkout-header-link-text", method: :get do %>
+            <%= icon(name: 'arrow-right',
+                     classes: 'spree-icon-arrow spree-icon-arrow-left',
+                     width: 14,
+                     height: 14) %>
+            <%= Spree.t('checkout_page.back_to_cart') %>
+          <% end %>
+        </div>
+
+        <div class="col-auto d-flex align-items-center justify-content-end justify-content-md-center">
+          <figure class="logo header-spree-fluid-logo m-0 p-0">
+            <%= logo(nil, {method: :get}) %>
+          </figure>
+        </div>
+
+        <div class="col-0 col-md">
+          <!-- spacer -->
+        </div>
 
-        <%= link_to spree.cart_path, class: "d-sm-none text-uppercase", method: :get do %>
-          <%= icon(name: 'arrow-right',
-                   classes: 'spree-icon-arrow spree-icon-arrow-left',
-                   width: 7,
-                   height: 14) %>
-          <span class="checkout-header-link-text"><%= Spree.t('back') %></span>
-        <% end %>
-      </div>
-      <div class="d-flex flex-nowrap align-items-center justify-content-center">
-        <figure class="logo flex-grow-0 flex-xl-grow-0 order-xl-0 header-spree-fluid-logo m-0">
-        <%= logo(Spree::Config[:logo], method: :get) %>
-        </figure>
       </div>
     </div>
   </header>

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/_copyright.html.erb

@@ -1,17 +1,8 @@
 <div class="border-top footer-spree-copyright">
   <div class="container">
     <div class="d-flex flex-column flex-lg-row align-items-center justify-content-center py-3 footer-spree-copyright-content">
-      <div>Designed and developed by</div>
-      <div class="mb-1 mb-lg-0">
-        <%= link_to 'https://sparksolutions.co/', target: :blank, 'aria-label': 'Go to Spark Solutions', rel: :follow do %>
-          <%= image_tag 'spark-logo@3x.png', class: 'footer-spree-copyright-logo-spark mx-2', alt: 'Spree Commerce & Ruby on Rails developers', title: 'Spree Commerce & Ruby on Rails developers' %>
-        <% end %>
-      </div>
-      <div class="d-none d-lg-inline-block mr-2">|</div>
       <div>
-        © <%= Time.current.year %>
-        <%= link_to current_store.name, "https://#{current_store.url}" %>.
-        <%= Spree.t(:all_rights_reserved) %>.
+        Designed and developed by <%= link_to 'Spark Solutions', 'https://sparksolutions.co/', target: :_blank, 'aria-label': 'Go to Spark Solutions', rel: :follow %> | © <%= Time.current.year %> <%= link_to current_store.name, current_store.formatted_url %>. <%= Spree.t(:all_rights_reserved) %>.
       </div>
     </div>
   </div>

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

@@ -1,14 +1,14 @@
-<% cache spree_nav_cache_key('footer') do %>
-  <footer id="footer" class="pt-2 mx-auto border-top footer-spree" data-turbolinks-permanent>
+<% cache spree_menu_cache_key('footer') do %>
+  <footer id="footer" class="pt-2 mx-auto border-top footer-spree">
     <div class="container">
       <div class="row d-xl-flex justify-content-xl-around pb-xl-5">
         <div class="d-flex d-xl-block flex-xl-grow-0 col-xl-4">
           <figure class="logo mx-auto mx-xl-0 pt-xl-2 pb-xl-1">
             <%= logo %>
           </figure>
-          <% if current_store.meta_description %>
+          <% if current_store.description %>
             <div class="d-none d-xl-block pt-xl-2 footer-spree-info">
-              <%= current_store.meta_description %>
+              <%= current_store.description %>
             </div>
           <% end %>
         </div>
@@ -32,39 +32,49 @@
           </div>
           <div class="d-flex flex-column align-items-center align-items-xl-start pb-3 flex-grow-2 footer-spree-contact-note">
             <div>
-              <%= current_store.name %>,
-              2382 Locust Ave<br/>
-              Long Beach, CA 90806, USA
+              <strong><%= current_store.name %></strong>
+              <br>
+              <% if current_store.address %>
+                <%= current_store.address.html_safe %>
+              <% end %>
             </div>
-            <div>Call us now: 760-673-8590</div>
-            <% if current_store.mail_from_address %>
-              <div><%= Spree.t(:email) %>: <%= current_store.mail_from_address %></div>
+            <% if current_store.contact_phone&.present? %>
+              <div><%= Spree.t(:call_us_now) %><%= current_store.contact_phone %></div>
+            <% end %>
+            <% if current_store.customer_support_email&.present? %>
+              <div><%= Spree.t(:email) %>: <%= current_store.customer_support_email %></div>
             <% end %>
           </div>
         </div>
       </div>
-      <div class="row d-none d-xl-flex border-top py-5 text-uppercase footer-spree-menu-links">
-        <% if spree_navigation_data.any? %>
-          <% spree_navigation_data.first(3).each do |root| %>
-            <div class="col-3">
+      <div class="row d-none d-xl-flex border-top pt-5 text-uppercase footer-spree-menu-links">
+
+        <% if spree_menu('footer').present? %>
+          <% spree_menu('footer').children.each do |parent| %>
+            <div class="col-3 mb-5">
               <div class="footer-spree-label">
-                <%= link_to root[:title], root[:url] %>
-              </div>
-              <% if  root[:items].present? %>
-                <% root[:items].each do |item| %>
-                  <div class="pt-2"><%= link_to item[:title], item[:url] %></div>
+                <% if parent.container? %>
+                  <%= parent.name %>
+                <% else %>
+                  <%= spree_nav_link_tag(parent) %>
                 <% end %>
+              </div>
+              <% parent.children.each do |child| %>
+                <div class="pt-2">
+                  <%= spree_nav_link_tag(child) %>
+                </div>
               <% end %>
             </div>
           <% end %>
         <% end %>
+
         <% if spree.respond_to?(:account_path) %>
-          <div class="col-3">
+          <div class="col-3 mb-5">
             <div class="footer-spree-label">
               <%= 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/_get_started.html.erb

@@ -0,0 +1,32 @@
+<!-- Styles And Script In A View Partial
+  If this view partial is removed from the spree_application.html.erb layout file, the storefront
+  will instantly snap back to the original look and feel with no hangover CSS or JavaScript related
+  to this partial.
+
+  Please do not transfer styles and JavaScript found here
+  into the main stylesheets or JavaScript files.
+-->
+<style>
+  #getStartedBar {
+    background: #33ba6f;
+    color: white;
+    z-index: 10;
+  }
+
+  #getStartedBar svg {
+    vertical-align: text-top;
+  }
+</style>
+
+<div id="getStartedBar" class="d-flex justify-content-center align-items-center p-1">
+  <div class="row">
+    <div class="col-12 text-center">
+      <h5 class="m-0">
+        <span style="font-weight: 200;">Create your own Spree project</span> <a href="https://spreecommerce.org/contact/" class="btn btn-outline-light btn-sm m-2" style="font-size: 1em; font-weight:800;">Get Started
+             <%= icon(name: 'arrow-right-circle-fill',
+                      width: 22,
+                      height: 22) %></a>
+      </h5>
+    </div>
+  </div>
+</div>

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

@@ -1,11 +1,14 @@
 <title><%= title %></title>
-<meta name="viewport" content="width=device-width, initial-scale=1" />
-<%== meta_image_data_tag %>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<%== og_meta_data_tags %>
 <%== meta_data_tags %>
+<%== meta_robots %>
 <%= canonical_tag(current_store.url) %>
-<%= favicon_link_tag 'favicon.ico' %>
-<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen', 'data-turbolinks-track': 'reload' %>
+<%= favicon_link_tag(spree_favicon_path) %>
+<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen', data: { turbo_track: 'reload' } %>
 <%= csrf_meta_tags %>
 <%= render 'spree/shared/paths' %>
-<%= javascript_include_tag 'spree/frontend/all', defer: true, 'data-turbolinks-track': 'reload' %>
+<%= render 'spree/shared/locale_and_currency' %>
+<%= javascript_include_tag "application", defer: true, data: { turbo_track: 'reload' } %>
+<%= javascript_include_tag 'spree/frontend/all', defer: true, data: { turbo_track: 'reload' } %>
 <%= yield :head %>

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

@@ -1,14 +1,14 @@
 <%# leaving #spree-header div for legacy support  %>
-<% cache spree_nav_cache_key('header') do %>
-  <div id="spree-header" data-turbolinks-permanent>
+<% cache spree_menu_cache_key('header') do %>
+  <div id="spree-header">
     <header id="header" class="d-flex align-items-center header-spree border-bottom">
       <div class="container-fluid h-100 header-spree-fluid">
-        <div class="d-flex flex-nowrap align-items-center h-100">
+        <div class="d-flex flex-nowrap align-items-center h-100 px-2">
           <div class="d-xl-none flex-grow-1 header-spree-fluid-mobile-menu-toggler">
             <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,14 +1,14 @@
 <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>
             <% # TODO: rework option values so options_text method can be used here %>
-            <%= "#{ov.option_type.presentation}: #{ov.name.titleize}" %>
+            <%= "#{ov.option_type.presentation}: #{ov.presentation}" %>
           </li>
         <% end %>
         </ul>

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

@@ -1,7 +1,10 @@
 <% 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.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) %>
+  <% if spree.respond_to?(:admin_orders_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) %>
+  <% end %>
+  <%= 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/_link_to_cart.html.erb

@@ -1,5 +1,4 @@
 <% item_count = simple_current_order&.item_count || 0 %>
 <% cache [base_cache_key, 'cart-indicator', item_count] do %>
-  <%= render 'spree/shared/cart', class: 'd-none d-xl-inline-block cart-icon--xl', size: 36, item_count: item_count %>
-  <%= render 'spree/shared/cart', class: 'd-xl-none', size: 24, item_count: item_count %>
+  <%= render 'spree/shared/cart', class: 'd-inline-block cart-icon', size: 36, item_count: item_count %>
 <% end %>

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

@@ -0,0 +1,6 @@
+<script>
+  var SPREE_LOCALE = '<%= I18n.locale %>'
+  var SPREE_CURRENCY = '<%= current_currency %>'
+  var SPREE_DEFAULT_CURRENCY = '<%= current_store.default_currency %>'
+  var SPREE_DEFAULT_LOCALE = '<%= current_store.default_locale %>'
+</script>

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 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 %>

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

@@ -1,15 +1,15 @@
 <div class="col-lg-11 mx-auto">
   <h3 class="spree-mb-large spree-mt-large spree-header"><%= Spree.t(:log_in_to_continue) %></h3>
-  <%= form_for Spree.user_class.new, as: :spree_user, url: spree_login_path do |f| %>
+  <%= form_for Spree.user_class.new, as: :spree_user, url: spree_login_path, data: { turbo: false } do |f| %>
     <div id="password-credentials" class="mb-4">
       <div class="form-group mb-4">
         <p class="form-group checkout-content-inner-field">
-          <%= f.email_field :email, class: 'spree-flat-input', placeholder: Spree.t(:email), autofocus: true %>
+          <%= f.email_field :email, class: 'spree-flat-input', placeholder: Spree.t(:email), value: params.dig(:spree_user, :email) %>
         </p>
       </div>
       <div class="form-group mb-4">
         <p class="form-group checkout-content-inner-field">
-          <%= f.password_field :password, class: 'spree-flat-input', placeholder: Spree.t(:password), autofocus: true %>
+          <%= f.password_field :password, class: 'spree-flat-input', placeholder: Spree.t(:password) %>
         </p>
       </div>
     </div>
@@ -17,7 +17,7 @@
     <% if Spree::Frontend::Config[:remember_me_enabled] %>
       <div class="spree-checkbox-container mt-4 mt-sm-5 mt-lg-4 spree-mb-medium">
         <div class="spree-checkbox">
-          <%= f.check_box :remember_me, tabindex: 3 %>
+          <%= f.check_box :remember_me %>
           <%= f.label :remember_me, '' %>
         </div>
 
@@ -25,7 +25,7 @@
       </div>
     <% end %>
 
-    <%= f.submit Spree.t(:log_in), class: 'btn btn-primary btn-block spree-btn mt-2', tabindex: 4 %>
+    <%= f.submit Spree.t(:login), class: 'btn btn-primary btn-block spree-btn mt-2' %>
   <% end %>
 
   <% if spree.respond_to?(:recover_password_path) %>