spree_frontend 4.0.8 → 4.1.0.rc1

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

@@ -0,0 +1,18 @@
+<div class="border-bottom 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) %>.
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,26 @@
+<div class="mx-auto delete-address-popup">
+  <div class="d-flex delete-address-popup-icon js-delete-address-popup-close-button">
+    <%= inline_svg_tag "close.svg", class: "w-100 h-100" %>
+  </div>
+
+  <p class="delete-address-popup-header">
+    <%= Spree.t("address_action_popup.delete_title") %>
+  </p>
+
+  <p class='delete-address-popup-text'>
+    <%= Spree.t("address_action_popup.delete_text").html_safe %>
+  </p>
+
+  <div class="d-flex delete-address-popup-buttons">
+    <div class="btn bg-light-background text-primary border-2 border-primary text-uppercase font-weight-bold delete-address-popup-button js-delete-address-popup-close-button"><%= Spree.t(:cancel) %></div>
+    <a
+      id="delete-address-popup-confirm"
+      class="btn btn-primary text-uppercase font-weight-bold delete-address-popup-button"
+      data-method="delete"
+      rel="nofollow"
+      href="#"
+    >
+      <%= Spree.t("address_action_popup.delete_button") %>
+    </a>
+  </div>
+</div>

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

@@ -1,8 +1,6 @@
 <% if target && target.errors.any? %>
-  <div id="errorExplanation" class="alert alert-danger" data-hook>
-    <h3><%= Spree.t(:errors_prohibited_this_record_from_being_saved, count: target.errors.count) %>:</h3>
-    <p><%= Spree.t(:there_were_problems_with_the_following_fields) %>:</p>
-     <ul>
+  <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;">
        <% target.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>

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

@@ -0,0 +1,9 @@
+<% if flash.any? %>
+  <div id="flash">
+    <% flash.each do |key, value| %>
+      <p>
+        <%= value %>
+      </p>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,73 @@
+<% cache spree_nav_cache_key('footer') do %>
+  <footer id="footer" class="pt-2 mx-auto border-top footer-spree" data-turbolinks-permanent>
+    <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 %>
+            <div class="d-none d-xl-block pt-xl-2 footer-spree-info">
+              <%= current_store.meta_description %>
+            </div>
+          <% end %>
+        </div>
+        <div class="d-block flex-nowrap py-2 order-xl-last col-xl-3 offset-xl-1">
+          <% unless current_store.facebook.blank? && current_store.twitter.blank? && current_store.instagram.blank? %>
+            <div class="d-none d-xl-block pt-4 pb-3 pl-2 footer-spree-label">
+              <%= Spree.t(:follow_us) %>
+            </div>
+          <% end %>
+          <div class="d-flex d-xl-block justify-content-center mx-auto">
+            <div class="d-flex">
+              <%= spree_social_link('facebook') %>
+              <%= spree_social_link('twitter') %>
+              <%= spree_social_link('instagram') %>
+            </div>
+          </div>
+        </div>
+        <div class="py-xl-2 col-xl-3 offset-xl-1">
+          <div class="d-none d-xl-block pt-4 pb-3 footer-spree-label">
+            <%= Spree.t(:contact_us) %>
+          </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
+            </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>
+            <% 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="footer-spree-label">
+                <%= link_to root[:title], root[:url] %>
+              </div>
+              <% root[:items].each do |item| %>
+                <div class="pt-2"><%= link_to item[:title], item[:url] %></div>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+        <% if spree.respond_to?(:account_path) %>
+          <div class="col-3">
+            <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") %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <%= render 'spree/shared/copyright' %>
+  </footer>
+<% end %>

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

@@ -1,16 +1,11 @@
-<meta charset="utf-8">
 <title><%= title %></title>
-<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<%== meta_image_data_tag %>
 <%== meta_data_tags %>
 <%= canonical_tag(current_store.url) %>
 <%= favicon_link_tag 'favicon.ico' %>
-<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen' %>
+<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen', 'data-turbolinks-track': 'reload' %>
 <%= csrf_meta_tags %>
 <%= render 'spree/shared/paths' %>
-<%= javascript_include_tag 'spree/frontend/all' %>
-<!--[if lt IE 9]>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
-<![endif]-->
+<%= javascript_include_tag 'spree/frontend/all', defer: true, 'data-turbolinks-track': 'reload' %>
 <%= yield :head %>
-<%= render 'spree/shared/translations' %>

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

@@ -1,15 +1,28 @@
-<div id="spree-header">
-  <header id="header" data-hook class="py-3">
-    <div class="container">
-      <div class="row">
-        <figure id="logo" class="col-3 col-md-4" data-hook>
-          <%= logo %>
-        </figure>
-        <%= render partial: 'spree/shared/nav_bar' %>
+<%# leaving #spree-header div for legacy support  %>
+<% cache spree_nav_cache_key('header') do %>
+  <div id="spree-header" data-turbolinks-permanent>
+    <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-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)  %>
+            </button>
+          </div>
+          <figure class="logo flex-grow-0 flex-xl-grow-1 order-xl-0 header-spree-fluid-logo">
+            <%= logo %>
+          </figure>
+          <div id="main-nav-bar" class="flex-grow-0 d-none d-xl-block h-100 header-spree-fluid-primary-navigation">
+            <%= render partial: 'spree/shared/main_nav_bar' %>
+          </div>
+          <div id="top-nav-bar" class="flex-grow-1 header-spree-fluid-secondary-navigation">
+            <%= render partial: 'spree/shared/nav_bar' %>
+          </div>
+          <%= render partial: 'spree/shared/mobile_navigation' %>
+        </div>
       </div>
-    </div>
-  </header>
-  <div class="container">
-    <%= render partial: 'spree/shared/main_nav_bar' %>
+    </header>
   </div>
-</div>
+<% end %>

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

@@ -0,0 +1,7 @@
+<% 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) %>
+<% 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) %>
+<% end %>

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

@@ -1 +1,2 @@
-<%= link_to_cart %>
+<%= render 'spree/shared/cart', class: 'd-none d-xl-inline-block cart-icon--xl', size: 36 %>
+<%= render 'spree/shared/cart', class: 'd-xl-none', size: 24 %>

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

@@ -1,19 +1,36 @@
-<%= form_for Spree::User.new, as: :spree_user, url: spree.create_new_session_path do |f| %>
-  <fieldset id="password-credentials">
-    <div class="form-group">
-      <%= f.email_field :email, class: 'form-control', tabindex: 1, placeholder: Spree.t(:email) %>
+<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| %>
+    <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 %>
+        </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 %>
+        </p>
+      </div>
     </div>
-    <div class="form-group">
-      <%= f.password_field :password, class: 'form-control', tabindex: 2, placeholder: Spree.t(:password) %>
+
+    <% 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.label :remember_me, '' %>
+        </div>
+
+        <%= f.label :remember_me, Spree.t(:remember_me), class: 'spree-checkbox-label' %>
+      </div>
+    <% end %>
+
+    <%= f.submit Spree.t(:log_in), class: 'btn btn-primary btn-block spree-btn mt-2', tabindex: 4 %>
+  <% end %>
+
+  <% if spree.respond_to?(:recover_password_path) %>
+    <div class="text-center forgot-password mb-4">
+      <%= link_to Spree.t(:forgot_password), spree.recover_password_path %>
     </div>
-    <div class="checkbox">
-      <label>
-        <%= f.check_box :remember_me %>
-        <%= f.label :remember_me, Spree.t(:remember_me) %>
-      </label>
-    </div>
-    <div class="form-group">
-      <%= f.submit Spree.t(:login), class: 'btn btn-lg btn-success btn-block', tabindex: 3 %>
-    </div>
-  </fieldset>
-<% end %>
+  <% end %>
+</div>

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

@@ -1,16 +1,42 @@
-<nav id="main-nav-bar" class="navbar">
-  <ul class="nav" data-hook>
-    <li id="home-link" class="nav-item" data-hook>
-      <%= link_to Spree.t(:home), spree.root_path, class: 'nav-link' %>
-    </li>
+<% if spree_navigation_data.any? %>
+  <ul class="nav h-100 main-nav-bar">
+    <% spree_navigation_data.each do |root| %>
+      <li class="navbar main-nav-bar-dropdown main-nav-bar-category">
+        <%= link_to root[:title], root[:url], class: 'p-2 main-nav-bar-item main-nav-bar-category-button' %>
+        <div class="w-100 shadow main-nav-bar-category-dropdown">
+          <div class="container p-0 d-flex justify-content-xl-around mx-auto">
+            <div class="row">
+              <div class="category-links">
+                <div class="category-links-header text-uppercase">
+                  <%= root[:subtitle] %>
+                </div>
+                <ul class="pl-0">
+                  <% root[:items].each do |item| %>
+                    <li>
+                      <%= link_to item[:title], item[:url], class: 'text-uppercase' %>
+                    </li>
+                  <% end %>
+                </ul>
+              </div>
+              <% root[:promo_banners].each do |promo_banner| %>
+                <%= link_to promo_banner[:url] do %>
+                  <div class="category-image category-image text-center mx-3">
+                    <%= main_nav_image(promo_banner[:image], promo_banner[:title]) %>
+                    <div class="category-box">
+                      <div class="category-box-small-text">
+                        <%= promo_banner[:subtitle] %>
+                      </div>
+                      <div class="category-box-big-text">
+                        <%= promo_banner[:title] %>
+                      </div>
+                    </div>
+                  </div>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      </li>
+    <% end %>
   </ul>
-  <ul class="nav navbar-right" data-hook>
-    <li id="link-to-cart" class="nav-item" data-hook>
-      <noscript>
-        <%= link_to_cart %>
-      </noscript>
-      &nbsp;
-    </li>
-    <script>Spree.fetch_cart()</script>
-  </ul>
-</nav>
+<% end %>

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

@@ -0,0 +1,68 @@
+<% 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>
+    </div>
+
+    <ul class="list-unstyled position-relative h-100 mobile-navigation-list">
+      <% 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].downcase %>" 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].downcase %>">
+            <li class="text-center font-weight-bold mobile-navigation-sublist-header">
+              <%= root[:title] %>
+            </li>
+
+            <% root[:items].each do |item| %>
+              <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+                <%= link_to item[:title], item[:url], class: 'w-75' %>
+              </li>
+            <% end %>
+          </ul>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

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

@@ -1,7 +1,53 @@
-<nav class="navbar navbar-dark col-md-8 col-sm-9" id="top-nav-bar">
-  <ul id="nav-bar" class="nav align-items-center d-flex flex-column flex-sm-row navbar-right w-100 justify-content-start justify-content-md-end" data-hook>
-    <li id="search-bar" data-hook>
-      <%= render partial: 'spree/shared/search' %>
+<ul id="nav-bar" class="nav align-items-center d-flex 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',
+                 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">
+        <%= render partial: 'spree/shared/search' %>
+      </div>
+    </div>
+  </li>
+  <% if defined?(spree.account_link_path) %>
+    <li>
+      <div class="dropdown navbar-right-dropdown">
+        <button type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle" aria-label="<%= Spree.t('nav_bar.show_user_menu')%>">
+          <%= icon(name: 'person',
+                  classes: 'd-none d-xl-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">
+        </div>
+      </div>
     </li>
-  </ul>
-</nav>
+  <% end %>
+  <li id="link-to-cart">
+    <span class="d-none d-xl-inline-block cart-icon--xl">
+      <%= icon(name: 'bag',
+               width: 41.8,
+               height: 36)  %>
+    </span>
+    <span class="d-xl-none">
+      <%= icon(name: 'bag',
+               width: 27.8,
+               height: 24)  %>
+    </span>
+  </li>
+</ul>

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

@@ -0,0 +1,23 @@
+<div class="p-0 justify-content-around mx-auto no-product-available">
+  <div id= "no-product-available-close-button" class="d-flex no-product-available-icon">
+    <%= inline_svg_tag "close.svg", class: "w-100 h-100" %>
+  </div>
+
+  <p class="no-product-available-header">
+    <%= Spree.t('no_product_available.opps') %>
+  </p>
+
+  <p class='no-product-available-text'>
+    <% if flash[:error].present? %>
+      <%= flash[:error] %>
+    <% else %>
+      <%= Spree.t('no_product_available.for_this_quantity') %>
+    <% end %>
+  <p>
+
+  <div class="btn btn-primary text-uppercase font-weight-bold d-flex no-product-available-button" id="no-product-available-hide-button">
+    <p class="d-flex m-auto no-product-available-button-text">
+      <%= Spree.t(:ok) %>
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+<% cache base_cache_key + [ot_downcase_name, params_ot_downcase_name, permitted_params, @taxon] do %>
+  <% selected_option_values = params_ot_downcase_name&.split(',')&.map(&:to_i) || [] %>
+  <% option_type.option_values.each do |option_value| %>
+    <% id = option_value.id %>
+    <% 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' %>
+
+        <span class="d-inline-block mb-1">
+                        <%= render partial: 'spree/shared/color_select', locals: {
+                          color: option_value.presentation,
+                          selected: selected_option_values.include?(id)
+                        } %>
+                      </span>
+      <% else %>
+        <div class="d-inline-block py-1 px-2 m-1 plp-overlay-card-item <%= 'plp-overlay-card-item--selected' if selected_option_values.include?(id) %>">
+          <%= name %>
+        </div>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -1,8 +1,9 @@
+<!-- FIXME: Should be removed if it is not used anywhere? -->
 <div class="row steps-data">
   <% if order.has_step?("address") %>
     <div class="col-md-3 col-6 mb-3" data-hook="order-bill-address">
       <h4 class="h5">
-        <%= Spree.t(:billing_address) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:address) unless order.completed? %>
+        <%= Spree.t(:billing_address) %> <%= link_to "(#{Spree.t(:edit)})", spree.checkout_state_path(:address) unless order.completed? %>
       </h4>
       <%= render 'spree/shared/address', address: order.bill_address %>
     </div>
@@ -10,14 +11,14 @@
     <% if order.has_step?("delivery") %>
       <div class="col-md-3 col-6 mb-3" data-hook="order-ship-address">
         <h4 class="h5">
-          <%= Spree.t(:shipping_address) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:address) unless order.completed? %>
+          <%= Spree.t(:shipping_address) %> <%= link_to "(#{Spree.t(:edit)})", spree.checkout_state_path(:address) unless order.completed? %>
         </h4>
         <%= render 'spree/shared/address', address: order.ship_address %>
       </div>
 
       <div class="col-md-3 col-6 mb-3" data-hook="order-shipment">
         <h4 class="h5">
-          <%= Spree.t(:shipments) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:delivery) unless order.completed? %>
+          <%= Spree.t(:shipments) %> <%= link_to "(#{Spree.t(:edit)})", spree.checkout_state_path(:delivery) unless order.completed? %>
         </h4>
         <div class="delivery">
           <% order.shipments.each do |shipment| %>
@@ -34,7 +35,7 @@
   <% if order.has_step?("payment") %>
     <div class="col-md-3 col-6 mb-3" data-hook="order-payment">
       <h4 class="h5">
-        <%= Spree.t(:payment_information) %> <%= link_to "(#{Spree.t(:edit)})", checkout_state_path(:payment) unless order.completed? %>
+        <%= Spree.t(:payment_information) %> <%= link_to "(#{Spree.t(:edit)})", spree.checkout_state_path(:payment) unless order.completed? %>
       </h4>
       <div class="payment-info">
         <%= render collection: order.payments.valid, partial: 'spree/shared/payment' %>

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

@@ -2,9 +2,6 @@
 
 <% if source.is_a?(Spree::CreditCard) %>
   <span class="cc-type">
-    <% unless (cc_type = source.cc_type).blank? %>
-      <%= image_tag "credit_cards/icons/#{cc_type}.png" %>
-    <% end %>
     <% if source.last_digits %>
       <%= Spree.t(:ending_in) %> <%= source.last_digits %>
     <% end %>

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

@@ -0,0 +1,8 @@
+<td>
+  <% payment_sources.each do |payment_source| %>
+    <%= payment_source.class.to_s.underscore.split('/').second.humanize.titleize %>
+    <br/>
+    <%= payment_source.last_digits.rjust(16, '*') %>
+    <br/>
+  <% end %>
+</td>

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

@@ -0,0 +1,12 @@
+<% url = spree.product_path(product, taxon_id: @taxon&.id) %>
+<%= link_to url, class: 'h-100 d-flex flex-column justify-content-between' do %>
+  <% cache [common_product_cache_keys, product] do %>
+    <%= plp_and_carousel_image(product, image_class) %>
+    <div>
+      <div class="product-component-name" title="<%= product.name %>">
+        <%= product.name %>
+      </div>
+      <div class="product-component-price"><%= display_price(product) %></div>
+    </div>
+  <% end %>
+<% end %>