spree_frontend 4.2.0.rc4 → 4.2.0.rc5

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

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

@@ -48,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/_change_store.html.erb

@@ -1,15 +1,15 @@
 <% if Spree::Config.show_store_selector && stores.size > 1 %>
   <li class="d-none d-xl-block change-store">
     <div class="dropdown navbar-right-dropdown">
-      <button id="stores-button" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle" aria-label="<%= Spree.t('nav_bar.change_country')%>">
+      <button id="stores-button" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle" aria-label="<%= Spree.t('nav_bar.change_country') %>">
         <%= icon(name: 'global',
                 classes: 'd-none d-xl-inline-block',
                 width: 41,
-                height: 36)  %>
+                height: 36) %>
         <%= icon(name: 'arrow-down',
                 classes: 'd-inline-block d-xl-none',
                 width: 15,
-                height: 15)  %>
+                height: 15) %>
       </button>
 
       <div id="stores_list" class="dropdown-menu dropdown-menu-right text-right">

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

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

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

@@ -48,7 +48,7 @@
                 </div>
               </div>
             </div>
-          <%end %>
+          <% end %>
         </li>
       <% end %>
     </ul>

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

@@ -1,7 +1,7 @@
 <% if stores.size > 1 %>
   <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
-    <span class="w-75"><%= Spree.t('nav_bar.change_country')%></span>
-    <a class="w-25 text-right mobile-navigation-category-link" data-category="countries" href="#" aria-label="<%= Spree.t('nav_bar.change_country')%>">
+    <span class="w-75"><%= Spree.t('nav_bar.change_country') %></span>
+    <a class="w-25 text-right mobile-navigation-category-link" data-category="countries" href="#" aria-label="<%= Spree.t('nav_bar.change_country') %>">
       <%= icon(name: 'arrow-right',
               classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-right',
               width: 16,
@@ -14,7 +14,7 @@
 
     <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="countries">
       <li class="text-center font-weight-bold mobile-navigation-sublist-header">
-        <%= Spree.t('nav_bar.change_country')%>
+        <%= Spree.t('nav_bar.change_country') %>
       </li>
       <% stores.each do |store| %>
         <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">

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

@@ -25,7 +25,7 @@
         <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
           <%= link_to root[:title], root[:url], class: 'w-75' %>
           <% 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')%>">
+            <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,

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

@@ -1,11 +1,11 @@
 <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')%>">
+      <button type="button" class="navbar-right-dropdown-toggle search-icons" aria-label="<%= Spree.t('nav_bar.show_search') %>">
         <%= icon(name: 'magnifying-glass',
                  classes: 'd-inline-block',
                  width: 36,
-                 height: 36)  %>
+                 height: 36) %>
       </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">
@@ -16,11 +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 account-icon" 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-inline-block',
                   width: 41.4,
-                  height: 36)  %>
+                  height: 36) %>
         </button>
 
         <div id="link-to-account" class="dropdown-menu dropdown-menu-right text-right">

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

@@ -1,5 +1,5 @@
 <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">
+  <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>
 

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

@@ -6,7 +6,7 @@
 
     <% 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), 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 %>
+      <% if color_option_type_name.present? && color_option_type_name.downcase == ot_downcase_name %>
 
         <span class="d-inline-block mb-1">
                         <%= render partial: 'spree/shared/color_select', locals: {

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

@@ -1,184 +1,127 @@
-<!-- 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)})", spree.checkout_state_path(:address) unless order.completed? %>
-      </h4>
-      <%= render 'spree/shared/address', address: order.bill_address %>
+<div class='checkout-confirm-order-details w-100 d-flex flex-wrap' data-hook>
+  <div class="checkout-confirm-delivery-informations text-left mt-3">
+    <div class="d-lg-none checkout-confirm-delivery-informations-header">
+      <%= Spree.t(:delivery_information) %>
     </div>
-
-    <% 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)})", 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)})", spree.checkout_state_path(:delivery) unless order.completed? %>
-        </h4>
-        <div class="delivery">
-          <% order.shipments.each do |shipment| %>
-            <div>
-              <%= Spree.t(:shipment_details, stock_location: shipment.stock_location.name, shipping_method: shipment.selected_shipping_rate.name) %>
-            </div>
+    <dl>
+      <% if order.has_step?("address") %>
+        <div data-hook="order-ship-address">
+          <dt class="text-uppercase">
+            <%= Spree.t(:shipping_address) %>
+            <%= checkout_edit_link %>
+          </dt>
+          <%= render 'spree/shared/address', address: order.ship_address %>
+        </div>
+        <div data-hook="order-bill-address">
+          <dt class="text-uppercase">
+            <%= Spree.t(:billing_address) %>
+            <%= checkout_edit_link %>
+          </dt>
+          <%= render 'spree/shared/address', address: order.bill_address %>
+        </div>
+      <% end %>
+      <% if order.has_step?("delivery") %>
+        <div data-hook="order-shipment">
+          <dt class="text-uppercase">
+            <%= Spree.t(:shipping) %>
+            <%= checkout_edit_link('delivery') %>
+          </dt>
+          <% @order.shipments.valid.each do |shipment| %>
+            <dd><%= shipment.shipping_method&.name %> </dd>
           <% end %>
+          <%= render 'spree/shared/shipment_tracking', order: order if order.shipped? %>
         </div>
-        <%= render 'spree/shared/shipment_tracking', order: order if order.shipped? %>
-      </div>
-    <% end %>
-  <% end %>
-
-  <% 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)})", spree.checkout_state_path(:payment) unless order.completed? %>
-      </h4>
-      <div class="payment-info">
-        <%= render collection: order.payments.valid, partial: 'spree/shared/payment' %>
-      </div>
-    </div>
-  <% end %>
-</div>
-
-<div class="table-responsive">
-  <table id='line-items' class="table mt-4" data-hook="order_details">
-    <col width="15%" valign="middle" halign="center">
-    <col width="70%" valign="middle">
-    <col width="5%" valign="middle" halign="center">
-    <col width="5%" valign="middle" halign="center">
-    <col width="5%" valign="middle" halign="center">
-
-    <thead data-hook>
-      <tr class="active" data-hook="order_details_line_items_headers">
-        <th colspan="2"><%= Spree.t(:item) %></th>
-        <th class="price"><%= Spree.t(:price) %></th>
-        <th class="qty"><%= Spree.t(:qty) %></th>
-        <th class="total"><span><%= Spree.t(:total) %></span></th>
-      </tr>
-    </thead>
-
-    <tbody data-hook>
-      <% order.line_items.each do |item| %>
-        <tr data-hook="order_details_line_item_row">
-          <td data-hook="order_item_image">
-            <%= link_to small_image(line_item.variant), line_item.product %>
-          </td>
-          <td data-hook="order_item_description">
-            <h4><%= item.name %></h4>
-            <p>
-              <%= truncate(item.description, length: 100) %>
-              <%= "(" + item.variant.options_text + ")" unless item.variant.option_values.empty? %>
-            </p>
-          </td>
-          <td data-hook="order_item_price" class="lead text-primary price">
-            <span><%= item.single_money.to_html %></span>
-          </td>
-          <td data-hook="order_item_qty" class="order-qty">
-            <%= item.quantity %>
-          </td>
-          <td data-hook="order_item_total" class="lead text-primary total">
-            <span><%= item.display_amount.to_html %></span>
-          </td>
-        </tr>
       <% end %>
-    </tbody>
-    <tfoot id="order-total" data-hook="order_details_total">
-      <tr class="table-warning total">
-        <td colspan="4" align="right">
-          <strong><%= Spree.t(:order_total) %>:</strong>
-        </td>
-        <td class="total">
-          <span id="order_total" class="lead text-primary">
-            <%= order.display_total.to_html %>
-          </span>
-        </td>
-      </tr>
-    </tfoot>
-
-    <tfoot id="subtotal" data-hook="order_details_subtotal">
-      <tr class="total" id="subtotal-row">
-        <td colspan="4">
-          <strong><%= Spree.t(:subtotal) %>:</strong>
-        </td>
-        <td class="total">
-          <span><%= order.display_item_total.to_html %></span>
-        </td>
-      </tr>
-    </tfoot>
-
-    <% if order.line_item_adjustments.exists? %>
-      <% if order.line_item_adjustments.promotion.eligible.exists? %>
-        <tfoot id="price-adjustments" data-hook="order_details_price_adjustments">
-          <% order.line_item_adjustments.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
-          <tr class="total">
-            <td colspan="4">
-              <%= Spree.t(:promotion) %>: <strong><%= label %></strong>
-            </td>
-            <td class="total">
-              <span>
-                <%= Spree::Money.new(
-                  adjustments.sum(&:amount), currency: order.currency
-                ) %>
-              </span>
-            </td>
-          </tr>
-        <% end %>
-      </tfoot>
+      <% if order.has_step?("payment") %>
+        <div data-hook="order-payment">
+          <dt class="text-uppercase">
+            <%= Spree.t(:payment) %>
+            <%= checkout_edit_link('payment') %>
+          </dt>
+          <dd>
+            <%= render collection: @order.payments.valid, partial: 'spree/shared/payment' %>
+          </dd>
+          <dd>
+            <% if !@order.complete? && @order.using_store_credit? %>
+              <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
+            <% end %>
+          </dd>
+        </div>
       <% end %>
-    <% end %>
+    </dl>
+  </div>
 
-    <tfoot id='shipment-total'>
-      <% order.shipments.group_by { |s| s.selected_shipping_rate.name }.each do |name, shipments| %>
-        <tr class="total" data-hook='shipment-row'>
-          <td colspan="4" align="right" class="text-muted">
-            <%= Spree.t(:shipping) %>: <strong><%= name %></strong>
-          </td>
-          <td class="total">
-            <span>
-              <%= Spree::Money.new(
-                shipments.sum(&:discounted_cost), currency: order.currency
-              ).to_html %>
-            </span>
-          </td>
-        </tr>
+  <div class="checkout-confirm-order-details-line-items d-flex flex-column mt-5 mr-md-4">
+    <div class="checkout-confirm-order-details-line-items-header d-none d-sm-block d-lg-none align-self-start mb-3">
+      <%= Spree.t(:products) %>
+    </div>
+    <div class="d-table" data-hook="order_details">
+      <div class="d-none d-lg-table-row text-secondary text-uppercase" data-hook="order_details_line_items_headers">
+        <p class="d-table-cell pb-1">
+          <%= Spree.t(:product) %>
+        </p>
+        <p class="d-table-cell pb-1">
+          <%= Spree.t(:price) %>
+        </p>
+        <p class="d-table-cell pb-1">
+          <%= Spree.t(:quantity) %>
+        </p>
+        <p class="d-table-cell pb-1">
+          <%= Spree.t(:total) %>
+        </p>
+      </div>
+      <% @order.line_items.each do |item| %>
+        <div class="checkout-confirm-order-details-line-items-line-item w-100 d-table-row" data-hook="order_details_line_item_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">
+              <div class="checkout-confirm-order-details-line-items-line-item-name-image" data-hook="order_item_image">
+                <%= link_to product_image(item.variant), item.product %>
+              </div>
+              <div class="d-flex flex-column mt-2 mt-lg-0" data-hook="order_item_description">
+                <div data-hook="order_item_name">
+                  <%= link_to item.name, item.product, class: 'checkout-confirm-order-details-line-items-line-item-name-link' %>
+                </div>
+                <% unless item.variant.is_master? %>
+                  <ul class="checkout-confirm-order-details-line-items-line-item-name-options text-uppercase list-unstyled mb-0">
+                    <% 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}" %>
+                    </li>
+                  <% end %>
+                  </ul>
+                <% end %>
+                <div class="d-lg-none" data-hook="order_item_price">
+                  <div class="font-weight-bold"><%= item.single_money.to_html %></div>
+                </div>
+                <div class="d-lg-none" data-hook="order_item_qty">
+                  <span><%= Spree.t(:quantity) %>:</span>
+                  <span class="font-weight-bold"><%= item.quantity %></span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="checkout-confirm-order-details-line-items-line-item-price d-none d-lg-table-cell align-middle py-4" data-hook="order_item_price">
+            <div><%= item.single_money.to_html %></div>
+          </div>
+          <div class="checkout-confirm-order-details-line-items-line-item-quantity d-none d-lg-table-cell align-middle py-4" data-hook="order_item_qty">
+            <span class="checkout-confirm-order-details-line-items-line-item-quantity-val d-lg-block"><%= item.quantity %></span>
+          </div>
+          <div class="checkout-confirm-order-details-line-items-line-item-total d-none d-lg-table-cell align-middle py-4" data-hook="order_item_total">
+            <div><%= item.display_total.to_s %></div>
+          </div>
+        </div>
       <% end %>
-    </tfoot>
+    </div>
+  </div>
 
-    <% if order.all_adjustments.tax.exists? %>
-      <tfoot id="tax-adjustments" data-hook="order_details_tax_adjustments">
-        <% order.all_adjustments.tax.group_by(&:label).each do |label, adjustments| %>
-          <tr class="total">
-            <td colspan="4" align="right" class="text-muted">
-              <%= Spree.t(:tax) %>: <strong><%= label %></strong>
-            </td>
-            <td class="total">
-              <span>
-                <%= Spree::Money.new(
-                  adjustments.sum(&:amount), currency: order.currency
-                ) %>
-              </span>
-            </td>
-          </tr>
-        <% end %>
-      </tfoot>
+  <div class="mt-5" id="checkout-summary" data-hook="checkout_summary_box">
+    <%= render partial: 'spree/checkout/summary', locals: { order: @order } %>
+    <% unless @order.complete? %>
+      <div data-hook="buttons">
+        <% submit_label_key = @order.confirm? ? :place_order : :save_and_continue %>
+        <%= submit_tag Spree.t(submit_label_key), class: 'btn btn-primary text-uppercase font-weight-bold w-100 checkout-content-save-continue-button' %>
+      </div>
     <% end %>
-
-    <tfoot id="order-charges" data-hook="order_details_adjustments">
-      <% order.adjustments.eligible.each do |adjustment| %>
-        <% next if (adjustment.source_type == 'Spree::TaxRate') and (adjustment.amount == 0) %>
-        <tr class="total">
-          <td colspan="4" align="right">
-            <strong><%= adjustment.label %></strong>
-          </td>
-          <td class="total">
-            <span><%= adjustment.display_amount.to_html %></span>
-          </td>
-        </tr>
-      <% end %>
-    </tfoot>
-  </table>
+  </div>
 </div>