spree_frontend 4.0.9 → 4.1.0.rc1

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

@@ -1,68 +1,75 @@
 <% @addresses = try_spree_current_user ? try_spree_current_user.addresses : [] %>
 
+<% if !try_spree_current_user || try_spree_current_user.email.blank? %>
+  <div class="row">
+    <div class="col-12 mb-4">
+      <p class="form-group checkout-content-inner-field">
+        <%= form.label :email, class: 'text-uppercase' %>
+        <span class="required">*</span>
+        <br />
+        <%= form.email_field :email, class: 'required spree-flat-input', required: true %>
+      </p>
+    </div>
+  </div>
+<% end %>
+
 <div class="row">
   <% ['billing', 'shipping'].each do |address_type|
     address_name = "#{address_type[0...4]}_address" %>
-    <div class="col-12 col-md-6 mb-4" data-hook="<%= address_type %>_fieldset_wrapper">
-      <div class="card card-default" id="<%= address_type %>" data-hook>
-        <div class="card-header">
-          <h5 class="mb-0">
-            <%= Spree.t(address_type + '_address') %>
-          </h5>
-        </div>
-        <div class="card-body">
-          <% if address_type == 'shipping' %>
-            <div class="mb-0 form-check" data-hook="use_billing">
-              <%= label_tag :order_use_billing, id: 'use_billing' do %>
-                <%= check_box_tag 'order[use_billing]', '1', @order.shipping_eq_billing_address?, { class: 'form-check-input'} %>
-                <%= Spree.t(:use_billing_address) %>
-              <% end %>
-            </div>
-          <% end %>
-          <% if @addresses.present? %>
-          <div class="select_address">
-            <div class="form-group">
-              <% @addresses.each_with_index do |address, idx| %>
-              <span class="d-block mb-2" id="<%= [address_type, dom_id(address)].join('_') %>">
-                <label class="form-check-label">
-                  <%= form.radio_button "#{address_name}_id", address.id, checked: (address.id == try_spree_current_user["#{address_name}_id"] || idx == 0) %> <%= address.to_s.html_safe %>
-                </label>
-                <a class="mb-3" href="<%= edit_address_path(address) %>" data-hook="edit_address"><%= Spree.t(:edit) %></a>
-              </span>
-              <% end %>
-              <div class="form-check">
-                <label class="form-check-label">
-                  <%= form.radio_button "#{address_name}_id", 0, class: 'form-check-input' %> <%= Spree.t('address_book.other_address') %>
-                </label>
-              </div>
+    <div class="col-12 mb-4" data-hook="<%= address_type %>_fieldset_wrapper">
+      <div id="<%= address_type %>" data-hook>
+        <h5 class="text-uppercase checkout-content-header">
+          <%= Spree.t(address_type + '_address') %>
+        </h5>
+        <% if address_type == 'shipping' %>
+          <div class="spree-checkbox-container checkout-content-billing-checkbox" data-hook="use_billing">
+            <div class="spree-checkbox">
+              <%= check_box_tag 'order[use_billing]', '1', @order.shipping_eq_billing_address?, { class: 'form-check-input'} %>
+              <%= label_tag :order_use_billing, nil, id: 'use_billing' %>
             </div>
+            <%= label_tag :order_use_billing, Spree.t(:use_billing_address), class: 'spree-checkbox-label' %>
+          </div>
+        <% end %>
+        <% if @addresses.present? %>
+        <div class="select_address">
+          <div class="form-group">
+            <% @addresses.each_with_index do |address, idx| %>
+            <span class="d-block mb-2" id="<%= [address_type, dom_id(address)].join('_') %>">
+              <label class="form-check-label spree-radio-label">
+                <%= form.radio_button "#{address_name}_id", address.id, checked: (address.id == try_spree_current_user["#{address_name}_id"] || idx == 0) %>
+                <span class="spree-radio-label-custom-input"></span>
+                <span class="d-inline-block align-top">
+                  <%= render "spree/users/address", address: address %>
+                </span>
+              </label>
+            </span>
+            <% end %>
+            <label class="form-check-label spree-radio-label">
+              <%= form.radio_button "#{address_name}_id", 0, class: 'form-check-input' %> <%= Spree.t('address_book.other_address') %>
+              <span class="spree-radio-label-custom-input"></span>
+            </label>
           </div>
-          <% end %>
-          <%= form.fields_for address_name do |address_form| %>
-            <div class="inner" data-hook=<%="#{address_type}_inner" %>>
-              <%= render partial: 'spree/addresses/form', locals: {
-                address_name: address_name,
-                address_form: address_form,
-                address_type: address_type,
-                address: Spree::Address.default
-              } %>
-            </div>
-          <% end %>
         </div>
+        <% end %>
+        <%= form.fields_for address_name do |address_form| %>
+          <div class="inner checkout-content-inner" data-hook=<%="#{address_type}_inner" %>>
+            <%= render partial: 'spree/addresses/form', locals: {
+              address_name: address_name,
+              address_form: address_form,
+              address_type: address_type,
+              address: Spree::Address.default,
+              form: form
+            } %>
+            <p class="text-right text-uppercase checkout-content-inner-field">*<%= Spree.t(:required_fields) %></p>
+          </div>
+        <% end %>
       </div>
     </div>
   <% end %>
+
+  <%= hidden_field_tag 'save_user_address', true, data: { hook: "save_user_address" } %>
 </div>
 
-<div class="card text-right form-buttons my-4" data-hook="buttons">
-  <div class="card-body">
-    <%= submit_tag Spree.t(:save_and_continue), class: 'btn btn-lg btn-success' %>
-    <% if try_spree_current_user %>
-      <span data-hook="save_user_address" class='save-user-address-wrapper'>
-        &nbsp; &nbsp;
-        <%= check_box_tag 'save_user_address', '1', try_spree_current_user.respond_to?(:persist_order_address) %>
-        <%= label_tag :save_user_address, Spree.t(:save_my_address) %>
-      </span>
-    <% end %>
-  </div>
+<div id="delete-address-popup" class="delete-address-popup-dropdown hide-on-esc">
+  <%= render 'spree/shared/delete_address_popup' %>
 </div>

data/app/views/spree/checkout/_confirm.html.erb

@@ -1,18 +1,114 @@
-<div class="card" id="order_details" data-hook>
-  <div class="card-header">
-    <h3 class="card-title mb-0 h5"><%= Spree.t(:confirm) %></h3>
-  </div>
-  <div class="card-body">
-    <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
-  </div>
-</div>
-
-<div class="card text-right form-buttons mt-4" data-hook="buttons">
-  <div class="card-body">
-    <% if @order.using_store_credit? %>
-      <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
-    <% end %>
-    <%= submit_tag Spree.t(:place_order), class: 'btn btn-lg btn-success' %>
-    <script>Spree.disableSaveOnClick();</script>
+<div class="checkout-confirm" id="order_details" data-hook>
+  <p class="checkout-content-header">
+    <%= Spree.t(:summary).upcase %>
+  </p>
+  <div class='checkout-confirm-order-details d-flex flex-column flex-lg-wrap' id="order_summary" data-hook>
+    <div class="checkout-confirm-order-details-line-items d-flex flex-column align-items-center w-100 order-0 order-lg-1">
+      <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 w-100">
+        <div class="d-none d-lg-table-row text-secondary text-uppercase">
+          <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">
+            <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">
+                <% if item.variant.images.length == 0 %>
+                  <%= link_to product_image(item.variant.product), item.variant.product %>
+                <% else %>
+                  <%= link_to image_tag(main_app.url_for(item.variant.images.first.url(:plp_and_carousel))), item.variant.product %>
+                <% end %>
+                <div class="d-flex flex-column mt-2 mt-lg-0">
+                  <div><%= item.name %></div>
+                  <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><%= "#{ov.option_type.presentation}: #{ov.name.titleize}" %></li>
+                    <% end %>
+                  </ul>
+                  <div class="d-lg-none">
+                    <div class="font-weight-bold"><%= item.single_money.to_html %></div>
+                  </div>
+                  <div class="d-lg-none">
+                    <span>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">
+              <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">
+              <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">
+              <div><%= item.display_total.to_s %></div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <div class="checkout-confirm-delivery-informations text-left mt-3 order-1 order-lg-0">
+      <div class="d-lg-none checkout-confirm-delivery-informations-header">
+        <%= Spree.t(:delivery_information) %>
+      </div>
+      <dl>
+        <div>
+          <dt class="text-uppercase">
+            <%= Spree.t(:shipping_address) %>
+            <%= checkout_edit_link %>
+          </dt>
+          <dd><%= sanitize @order.ship_address.to_s, tags: %w[br] %></dd>
+        </div>
+        <div>
+          <dt class="text-uppercase">
+            <%= Spree.t(:billing_address) %>
+            <%= checkout_edit_link %>
+          </dt>
+          <dd><%= sanitize @order.bill_address.to_s, tags: %w[br] %></dd>
+        </div>
+        <div>
+          <dt class="text-uppercase">
+            <%= Spree.t(:shipping) %>
+            <%= checkout_edit_link('delivery') %>
+          </dt>
+          <dd><%= @order.shipments.first.shipping_method&.name if @order.shipments.any? %></dd>
+        </div>
+        <div>
+          <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.using_store_credit? %>
+              <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
+            <% end %>
+          </dd>
+        </div>
+      </dl>
+    </div>
+    <div id="checkout-summary" class="w-100 order-2" data-hook="checkout_summary_box">
+      <%= render partial: 'spree/checkout/summary', locals: { order: @order } %>
+      <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>
+    </div>
   </div>
 </div>

data/app/views/spree/checkout/_credit_card.html.erb

@@ -0,0 +1,9 @@
+<div id="<%= dom_id(card,'spree')%>" class="payment-sources-list-item">
+  <label class="form-check-label spree-radio-label">
+    <%= radio_button_tag "order[existing_card]", card.id, (card == @payment_sources.first), { class: "existing-cc-radio" }  %>
+    <span class="spree-radio-label-custom-input"></span>
+    <%= credit_card_icon(card.cc_type) %>
+    <span>****<%= card.last_digits %>,&nbsp</span>
+    <span><%= card.name %></span>
+  </label>
+</div>

data/app/views/spree/checkout/_delivery.html.erb

@@ -1,99 +1,31 @@
-<div class="card" id='shipping_method' data-hook>
-  <div class="card-header">
-    <h3 class="card-title mb-0 h5"><%= Spree.t(:delivery) %></h3>
-  </div>
-  <div class="card-body" data-hook="shipping_method_inner">
+<div id="shipping-method" data-hook>
+  <div data-hook="shipping_method_inner">
     <div id="methods">
       <%= form.fields_for :shipments do |ship_form| %>
         <div class="shipment">
-          <h4 class="stock-location h5" data-hook="stock-location">
-            <%= Spree.t(:package_from) %>
-            <strong class="stock-location-name" data-hook="stock-location-name">
-              <%= ship_form.object.stock_location.name %>
-            </strong>
-          </h4>
-
-          <table class="table stock-contents" data-hook="stock-contents">
-            <colgroup>
-              <col style="width: 10%;" />
-              <col style="width: 60%;" />
-              <col style="width: 10%;" />
-              <col style="width: 20%;" />
-            </colgroup>
-            <thead>
-              <tr class="active">
-                <th></th>
-                <th align='left'><%= Spree.t(:item) %></th>
-                <th><%= Spree.t(:qty) %></th>
-                <th><%= Spree.t(:price) %></th>
-              </tr>
-            </thead>
-            <tbody>
-              <% ship_form.object.manifest.each do |item| %>
-                <tr class="stock-item">
-                  <td class="item-image"><%= mini_image(item.variant) %></td>
-                  <td class="item-name"><%= item.variant.name %></td>
-                  <td class="item-qty"><%= item.quantity %></td>
-                  <td class="item-price"><%= display_price(item.variant) %></td>
-                </tr>
-              <% end %>
-            </tbody>
-          </table>
-
-          <h4 class="stock-shipping-method-title h5">
-            <%= Spree.t(:shipping_method) %>
+          <h4 class="text-uppercase checkout-content-header checkout-content-shipping-methods-header">
+            <%= Spree.t('checkout_page.delivery_method') %>
           </h4>
 
-          <ul class="list-group shipping-methods">
+          <ul class="checkout-content-shipping-methods-list">
             <% ship_form.object.shipping_rates.each do |rate| %>
-              <li class="list-group-item shipping-method">
-                <label>
+              <li class="shipping-method">
+                <label class="spree-radio-label">
                   <%= ship_form.radio_button :selected_shipping_rate_id,
                     rate.id,
                     data: {
                       behavior: 'shipping-method-selector',
                       cost: rate.display_cost
-                  } %>
+                    } %>
+                  <span class="spree-radio-label-custom-input"></span>
                   <span class="rate-name"><%= rate.name %></span>
-                  <span class="badge badge-secondary rate-cost"><%= rate.display_cost %></span>
+                  <p class="rate-cost"><%= rate.display_cost %></p>
                 </label>
               </li>
             <% end %>
           </ul>
         </div>
       <% end %>
-
-      <% if @differentiator.try(:missing?) %>
-        <div class="shipment unshippable">
-          <h3 class="stock-location mb-0 h5" data-hook="stock-location">
-            <%= Spree.t(:unshippable_items) %>
-          </h3>
-          <table class="table stock-contents" data-hook="stock-missing">
-            <colgroup>
-              <col style="width: 10%;" />
-              <col style="width: 60%;" />
-              <col style="width: 10%;" />
-              <col style="width: 20%;" />
-            </colgroup>
-            <thead>
-              <th></th>
-              <th align='left'><%= Spree.t(:item) %></th>
-              <th><%= Spree.t(:qty) %></th>
-              <th><%= Spree.t(:price) %></th>
-            </thead>
-            <tbody>
-              <% @differentiator.missing.each do |variant, quantity| %>
-                <tr class="stock-item">
-                  <td class="item-image"><%= mini_image(variant) %></td>
-                  <td class="item-name"><%= variant.name %></td>
-                  <td class="item-qty"><%= quantity %></td>
-                  <td class="item-price"><%= display_price(variant) %></td>
-                </tr>
-              <% end %>
-            </tbody>
-          </table>
-        </div>
-      <% end %>
     </div>
     <% if Spree::Config[:shipping_instructions] %>
       <p id="minstrs" data-hook>
@@ -105,11 +37,3 @@
     <% end %>
   </div>
 </div>
-
-<div class="card my-4 text-right form-buttons" data-hook="buttons">
-  <div class="card-body">
-    <%= submit_tag Spree.t(:save_and_continue), class: 'btn btn-lg btn-success' %>
-  </div>
-</div>
-
-<%= javascript_include_tag 'spree/frontend/checkout/shipment' %>

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

@@ -1,79 +1,54 @@
-<div class="card" id="payment" data-hook>
-  <div class="card-header">
-    <h3 class="card-title mb-0 h5">
-      <%= Spree.t(:payment_information) %>
-    </h3>
-  </div>
-
-  <div class="card-body" data-hook="checkout_payment_step">
-    <% if @payment_sources.present? %>
-      <div class="card_options">
-        <%= radio_button_tag 'use_existing_card', 'yes', true %>
-        <label for="use_existing_card_yes">
-          <%= Spree.t(:use_existing_cc) %>
-        </label>
-        <%= radio_button_tag 'use_existing_card', 'no' %>
-        <label for="use_existing_card_no">
-          <%= Spree.t(:use_new_cc_or_payment_method) %>
-        </label>
-      </div>
+<div id="payment" data-hook>
+  <p class="payment-type checkout-content-header">
+    <%= Spree.t(:payment_type).upcase %>
+  </p>
 
-      <div id="existing_cards">
-        <p class="form-group" data-hook="existing_cards">
-          <table class="existing-credit-card-list">
-            <tbody>
-              <% @payment_sources.each do |card| %>
-                <tr id="<%= dom_id(card,'spree')%>" class="<%= cycle('even', 'odd') %>">
-                  <td>
-                    <%= radio_button_tag "order[existing_card]", card.id, (card == @payment_sources.first), { class: "existing-cc-radio" }  %>
-                  </td>
-                  <td><%= card.name %></td>
-                  <td><%= card.display_number %></td>
-                  <td><%= card.month %> / <%= card.year %></td>
-                </tr>
-              <% end %>
-            </tbody>
-          </table>
-        </p>
-      </div>
-    <% end %>
+  <div data-hook="checkout_payment_step">
 
     <%= render partial: 'spree/checkout/payment/storecredit' %>
 
-    <ul class="list-group" id="payment-method-fields" data-hook>
+    <ul id="payment-method-fields" class="list-unstyled position-relative" data-hook>
       <% @order.available_payment_methods.each do |method| %>
-        <li class="list-group-item radio">
-          <label>
+        <li class="radio">
+          <%= label_tag '', class: "form-check-label spree-radio-label payment-option", data: { type: method.id == @payment_sources&.first&.payment_method_id ? 'card' : nil } do %>
             <%= radio_button_tag "order[payments_attributes][][payment_method_id]", method.id, method == @order.available_payment_methods.first %>
+            <span class="spree-radio-label-custom-input"></span>
             <%= Spree.t(method.name, scope: :payment_methods, default: method.name) %>
-          </label>
+          <% end %>
         </li>
       <% end %>
     </ul>
 
-    <ul id="payment-methods" class="list-unstyled position-relative" data-hook>
-      <% @order.available_payment_methods.each do |method| %>
-        <li id="payment_method_<%= method.id %>" class="<%= 'last' if method == @order.available_payment_methods.last %>" data-hook>
-          <fieldset>
-            <%= render partial: "spree/checkout/payment/#{method.method_type}", locals: { payment_method: method } %>
-          </fieldset>
-        </li>
+    <div class="payment-sources">
+      <% if @payment_sources.present? %>
+        <div id="existing_cards" class="payment-sources-existing-cards">
+          <%= radio_button_tag 'use_existing_card', 'yes', true, class: 'd-none' %>
+          <div class="form-group" data-hook="existing_cards">
+            <div class="d-flex flex-column payment-sources-list">
+              <% @payment_sources.each do |card| %>
+                <%= render partial: 'credit_card', locals: { card: card } %>
+              <% end %>
+              <div>
+                <label class="form-check-label spree-radio-label col-6 mb-2">
+                  <%= radio_button_tag 'use_existing_card', 'no' %>
+                  <span class="spree-radio-label-custom-input"></span>
+                  <span><%= Spree.t(:add_new_credit_card) %></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
       <% end %>
-    </ul>
-
-
-    <% if Spree::Frontend::Config[:coupon_codes_enabled] %>
-      <p class='field mb-0' data-hook='coupon_code'>
-        <%= form.label :coupon_code %>
-        <%= form.text_field :coupon_code, class: 'form-control' %>
-      </p>
-    <% end %>
-  </div>
-</div>
 
-<div class="card text-right form-buttons my-4" data-hook="buttons">
-  <div class="card-body">
-    <%= submit_tag Spree.t(:save_and_continue), class: 'btn btn-lg btn-success primary' %>
-    <script>Spree.disableSaveOnClick();</script>
+      <ul id="payment-methods" class="list-unstyled position-relative mb-0 payment-sources-add-form" data-hook>
+        <% @order.available_payment_methods.each do |method| %>
+          <li id="payment_method_<%= method.id %>" class="<%= 'last' if method == @order.available_payment_methods.last %>" data-hook>
+            <fieldset>
+              <%= render partial: "spree/checkout/payment/#{method.method_type}", locals: { payment_method: method } %>
+            </fieldset>
+          </li>
+        <% end %>
+      </ul>
+    </div>
   </div>
 </div>

data/app/views/spree/checkout/_summary.html.erb

@@ -1,79 +1,52 @@
-<h3><%= Spree.t(:order_summary) %></h3>
-
-<div class="table-responsive">
-  <table class="table" data-hook="order_summary">
-    <tbody>
-      <tr data-hook="item_total">
-        <td><strong><%= Spree.t(:item_total) %>:</strong></td>
-        <td><strong><%= order.display_item_total.to_html %></strong></td>
-      </tr>
-
-      <% if order.line_item_adjustments.nonzero.exists? %>
-        <tbody data-hook="order_details_promotion_adjustments">
-          <% order.line_item_adjustments.nonzero.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
-            <tr class="total">
-              <td><%= label %></td>
-              <td><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %></td>
-            </tr>
-          <% end %>
-        </tbody>
+<div class="checkout-content-summary">
+  <h3 class="text-uppercase text-center checkout-content-summary-header"><%= Spree.t(:order_summary) %></h3>
+  <div class="w-100 text-uppercase checkout-content-summary-table" data-hook="order_summary">
+    <div class="d-table-cell"><%= Spree.t(:item_total) %>:</div>
+    <div class="d-table-cell text-right"><%= order.display_item_total.to_html %></div>
+
+    <% if order.line_item_adjustments.nonzero.exists? %>
+      <% order.line_item_adjustments.nonzero.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
+        <div class="d-table-cell"><%= label %></div>
+        <div class="d-table-cell text-right"><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %></div>
       <% end %>
-
-      <tbody data-hook="order_details_tax_adjustments">
-        <% order.all_adjustments.nonzero.tax.eligible.group_by(&:label).each do |label, adjustments| %>
-          <tr class="total">
-            <td><%= label %></td>
-            <td><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %></td>
-          </tr>
+    <% end %>
+
+    <% order.all_adjustments.nonzero.tax.eligible.group_by(&:label).each do |label, adjustments| %>
+      <div class="d-table-cell"><%= label %></div>
+      <div class="d-table-cell text-right"><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %></div>
+    <% end %>
+
+    <% if order.passed_checkout_step?("address") && order.shipments.any? %>
+      <div class="d-table-cell"><%= Spree.t(:shipping) %>:</div>
+      <% shipping_total = Spree::Money.new(order.shipments.to_a.sum(&:cost), currency: order.currency) %>
+      <div class="d-table-cell text-right" data-hook='shipping-total' data-currency='<%= Money::Currency.find(order.currency).symbol %>' thousands-separator='<%= shipping_total.thousands_separator %>' decimal-mark='<%= shipping_total.decimal_mark %>' precision='<%= Money::Currency.find(order.currency).exponent %>'><%= shipping_total.to_html %></div>
+
+      <% if order.shipment_adjustments.nonzero.exists? %>
+        <% order.shipment_adjustments.nonzero.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
+          <div class="d-table-cell"><%= label %>:</div>
+          <div class="d-table-cell text-right"><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %></div>
         <% end %>
-      </tbody>
-
-      <% if order.passed_checkout_step?("address") && order.shipments.any? %>
-        <tr data-hook="shipping_total">
-          <td><%= Spree.t(:shipping_total) %>:</td>
-          <% shipping_total = Spree::Money.new(order.shipments.to_a.sum(&:cost), currency: order.currency) %>
-          <td data-hook='shipping-total' data-currency='<%= Money::Currency.find(order.currency).symbol %>' thousands-separator='<%= shipping_total.thousands_separator %>' decimal-mark='<%= shipping_total.decimal_mark %>'><%= shipping_total.to_html %></td>
-        </tr>
-
-        <% if order.shipment_adjustments.nonzero.exists? %>
-          <tbody data-hook="order_details_shipment_promotion_adjustments">
-            <% order.shipment_adjustments.nonzero.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
-              <tr class="total">
-                <td><%= label %>:</td>
-                <td><%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %></td>
-              </tr>
-            <% end %>
-          </tbody>
-        <% end %>
-      <% end %>
-
-      <% if order.adjustments.nonzero.eligible.exists? %>
-        <tbody id="summary-order-charges" data-hook>
-          <% order.adjustments.nonzero.eligible.each do |adjustment| %>
-          <% next if (adjustment.source_type == 'Spree::TaxRate') and (adjustment.amount == 0) %>
-            <tr class="total">
-              <td><%= adjustment.label %>:</td>
-              <td><%= adjustment.display_amount.to_html %></td>
-            </tr>
-          <% end %>
-        </tbody>
       <% end %>
+    <% end %>
 
-      <tr data-hook="order_total">
-        <td><strong><%= Spree.t(:order_total) %>:</strong></td>
-        <td>
-          <strong>
-            <span id='summary-order-total' class="lead text-primary" data-currency="<%= Money::Currency.find(order.currency).symbol %>"><%= order.display_total.to_html %></span>
-          </strong>
-        </td>
-      </tr>
-
-      <% if order.using_store_credit? %>
-        <tr data-hook="order_details_store_credit">
-          <td><strong><%= Spree.t(:store_credit_name) %>:</strong></td>
-          <td><span id='summary-store-credit'><%= order.display_total_applied_store_credit.to_html %></span></td>
-        </tr>
+    <% if order.adjustments.nonzero.eligible.exists? %>
+      <% order.adjustments.nonzero.eligible.each do |adjustment| %>
+        <% next if (adjustment.source_type == 'Spree::TaxRate') and (adjustment.amount == 0) %>
+        <div class="d-table-cell total"><%= adjustment.label %>:</div>
+        <div class="d-table-cell total text-right"><%= adjustment.display_amount.to_html %></div>
       <% end %>
-    </tbody>
-  </table>
+    <% end %>
+
+    <div class="checkout-content-summary-table-order-total">
+      <div class="d-table-cell"><%= Spree.t(:order_total) %>:</div>
+      <div class="d-table-cell text-right">
+        <span id='summary-order-total' data-currency="<%= Money::Currency.find(order.currency).symbol %>"><%= order.display_total.to_html %></span>
+      </div>
+    </div>
+
+    <% if order.using_store_credit? %>
+      <div class="d-table-cell"><%= Spree.t(:store_credit_name) %>:</div>
+      <div class="d-table-cell text-right"><span id='summary-store-credit'><%= order.display_total_applied_store_credit.to_html %></span></div>
+    <% end %>
+  </div>
 </div>