spree_frontend 4.1.0 → 4.7.0

data/app/views/spree/address/_form.html.erb

@@ -1,54 +1,54 @@
 <% address_id = address_type.chars.first %>
 
-<div class="inner" data-hook=<%="#{address_type}_inner" %>>
-  <p class="form-group" id=<%="#{address_id}firstname" %>>
+<div class="inner" data-hook='<%= "#{address_type}_inner" %>'>
+  <div class="form-group" id='<%= "#{address_id}firstname" %>'>
     <%= form.label :firstname do %>
       <%= Spree.t(:first_name) %><abbr class="required" title="required">*</abbr>
     <% end %>
     <%= form.text_field :firstname, class: 'form-control', required: true %>
-  </p>
-  <p class="form-group" id=<%="#{address_id}lastname" %>>
+  </div>
+  <div class="form-group" id='<%= "#{address_id}lastname" %>'>
     <%= form.label :lastname do %>
       <%= Spree.t(:last_name) %><abbr class="required" title="required">*</abbr>
     <% end %>
     <%= form.text_field :lastname, class: 'form-control', required: true %>
-  </p>
+  </div>
   <% if Spree::Config[:company] %>
-    <p class="form-group" id=<%="#{address_id}company" %>>
+    <div class="form-group" id='<%= "#{address_id}company" %>'>
       <%= form.label :company, Spree.t(:company) %>
       <%= form.text_field :company, class: 'form-control' %>
-    </p>
+    </div>
   <% end %>
-  <p class="form-group" id=<%="#{address_id}address1" %>>
+  <div class="form-group" id='<%= "#{address_id}address1" %>'>
     <%= form.label :address1 do %>
       <%= Spree.t(:street_address) %><abbr class="required" title="required">*</abbr>
     <% end %>
     <%= form.text_field :address1, class: 'form-control required' %>
-  </p>
-  <p class="form-group" id=<%="#{address_id}address2" %>>
+  </div>
+  <div class="form-group" id='<%= "#{address_id}address2" %>'>
     <%= form.label :address2, Spree.t(:street_address_2) %>
     <%= form.text_field :address2, class: 'form-control' %>
-  </p>
-  <p class="form-group" id=<%="#{address_id}city" %>>
+  </div>
+  <div class="form-group" id='<%= "#{address_id}city" %>'>
     <%= form.label :city do %>
       <%= Spree.t(:city) %><abbr class="required" title="required">*</abbr>
     <% end %>
     <%= form.text_field :city, class: 'form-control', required: true %>
-  </p>
-  <p class="form-group" id=<%="#{address_id}country" %>>
+  </div>
+  <div class="form-group" id='<%= "#{address_id}country" %>'>
     <%= form.label :country_id do %>
       <%= Spree.t(:country) %><abbr class="required" title="required">*</abbr>
     <% end %>
-    <span id=<%="#{address_id}country-selection" %>>
+    <span id='<%= "#{address_id}country-selection" %>'>
       <%= form.collection_select :country_id, available_countries, :id, :name, {}, { class: 'form-control', required: true } %>
     </span>
-  </p>
+  </div>
 
   <% if Spree::Config[:address_requires_state] %>
-    <p class="form-group" id=<%="#{address_id}state" %>>
+    <div class="form-group" id='<%= "#{address_id}state" %>'>
       <% have_states = !address.country.states.empty? %>
       <%= form.label :state do %>
-        <%= Spree.t(:state) %><abbr class='required' title="required" id=<%="#{address_id}state-required"%>>*</abbr>
+        <%= Spree.t(:state) %><abbr class='required' title="required" id='<%= "#{address_id}state-required" %>'>*</abbr>
       <% end %>
 
       <%== state_elements = [
@@ -62,30 +62,29 @@
                             class: !have_states ? 'form-control' : 'form-control hidden',
                             required: !have_states,
                             disabled: have_states)
-         ].join.gsub('"', "'").gsub("\n", "")
-      %>
-    </p>
+         ].join.gsub('"', "'").gsub("\n", "") %>
+    </div>
       <noscript>
         <%= form.text_field :state_name, class: 'form-control', required: true %>
       </noscript>
   <% end %>
 
-  <p class="form-group" id=<%="#{address_id}zipcode" %>>
+  <div class="form-group" id='<%= "#{address_id}zipcode" %>'>
     <%= form.label :zipcode do %>
       <%= Spree.t(:zip) %><% if address.require_zipcode? %><abbr class="required" title="required">*</abbr><% end %>
     <% end %>
     <%= form.text_field :zipcode, class: 'form-control', required: address.require_zipcode? %>
-  </p>
-  <p class="form-group" id=<%="#{address_id}phone" %>>
+  </div>
+  <div class="form-group" id='<%= "#{address_id}phone" %>'>
     <%= form.label :phone do %>
       <%= Spree.t(:phone) %><% if address.require_phone? %><abbr class="required" title="required">*</abbr><% end %>
     <% end %>
     <%= form.phone_field :phone, class: 'form-control', required: address.require_phone? %>
-  </p>
+  </div>
   <% if Spree::Config[:alternative_shipping_phone] %>
-    <p class="form-group" id=<%="#{address_id}altphone" %>>
+    <div class="form-group" id='<%= "#{address_id}altphone" %>'>
       <%= form.label :alternative_phone, Spree.t(:alternative_phone) %>
       <%= form.phone_field :alternative_phone, class: 'form-control' %>
-    </p>
+    </div>
   <% end %>
 </div>

data/app/views/spree/addresses/_form.html.erb

@@ -2,22 +2,31 @@
 
 <% Spree::Address::ADDRESS_FIELDS.each do |field| %>
   <% if field == "country" %>
-    <p class="form-group checkout-content-inner-field" id="<%= "#{address_id}country" %>">
-      <span id="<%= "#{address_id}country-selection" %>" class="d-block position-relative">
+    <div class="form-group checkout-content-inner-field" id="<%= "#{address_id}country" %>">
+      <div id="<%= "#{address_id}country-selection" %>" class="d-block position-relative has-float-label">
         <%= address_form.collection_select :country_id, available_countries, :id, :name,
                                            { prompt: Spree.t(:country).upcase },
-                                           { class: 'required form-control spree-flat-select'} %>
+                                           { class: 'form-control spree-flat-select',
+                                             aria: { label: Spree.t(:country) } } %>
         <%= image_tag 'arrow.svg', class: 'position-absolute spree-flat-select-arrow' %>
-      </span>
-    </p>
+        <%= address_form.label(Spree.t(:country), Spree.t(:country).upcase, class:'text-uppercase') %>
+      </div>
+    </div>
   <% elsif field == "state" %>
     <div class="form-group mb-4">
       <%= address_field(address_form, :state, address_id) { address_state(address_form, address.country, address_id) } if Spree::Config[:address_requires_state] %>
     </div>
+  <% elsif field == "zipcode" %>
+    <div class="form-group mb-4">
+      <%= address_field(address_form, :zipcode, address_id) { address_zipcode(address_form, address.country, address_id) } %>
+    </div>
   <% else %>
     <% next if field == "company" && !Spree::Config[:company] %>
     <% next if field == "alternative_#{address_id}_phone" && !Spree::Config["alternative_#{address_id}_phone"] %>
     <div class="form-group mb-4">
       <%= address_field(address_form, field.to_sym, address_id) %>
-    </div>  <% end %>
+    </div>
+  <% end %>
 <% end %>
+
+<p class="text-right text-uppercase mb-5 checkout-content-inner-field"><span id="required_marker"><%= Spree.t(:required) %></span> <%= Spree.t(:required_fields) %></p>

data/app/views/spree/addresses/edit.html.erb

@@ -1,13 +1,18 @@
 <%= render 'spree/shared/error_messages', target: @address %>
 <div class="col-lg-6 offset-lg-3">
-  <h3 class="spree-header spree-mb-large spree-mt-large"><%= t(:edit_shipping_address, scope: :address_book) %></h3>
+  <h3 class="spree-header spree-mb-large spree-mt-large"><%= Spree.t(:edit_address, scope: :address_book) %></h3>
   <%= form_for @address, html: { id: 'checkout_form_address' } do |f| %>
-    <%= render 'spree/addresses/form',
-      address_name: 'address',
-      address_form: f,
-      address_type: 'shipping',
-      address: @address
-    %>
-    <%= f.submit Spree.t(:update), class: 'btn btn-primary btn-block spree-btn mb-5' %>
+  <div class="form-group checkout-content-inner-field mb-5 has-float-label">
+    <%= f.text_field :label, class: 'spree-flat-input', placeholder: Spree.t(:address_name_placeholder, scope: :address_book) %>
+    <%= f.label :address_name, Spree.t(:label, scope: :address_book) %>
+  </div>
+
+  <%= render 'spree/addresses/form',
+    address_name: 'address',
+    address_form: f,
+    address_type: 'shipping',
+    address: @address %>
+
+  <%= f.submit Spree.t(:update), class: 'btn btn-primary btn-block spree-btn mb-5' %>
   <% end %>
 </div>

data/app/views/spree/addresses/new.html.erb

@@ -1,13 +1,17 @@
 <%= render 'spree/shared/error_messages', target: @address %>
 <div class="col-lg-6 offset-lg-3">
-  <h3 class="spree-header spree-mb-large spree-mt-large"><%= t(:new_shipping_address, scope: :address_book) %></h3>
-  <%= form_for @address, html: { id: 'checkout_form_address' } do |f| %>
+  <h3 class="spree-header spree-mb-large spree-mt-large"><%= Spree.t(:new_address, scope: :address_book) %></h3>
+  <%= form_for @address, url: spree.addresses_path, html: { id: 'checkout_form_address' } do |f| %>
+  <div class="form-group checkout-content-inner-field mb-5 has-float-label">
+    <%= f.text_field :label, class: 'spree-flat-input', placeholder: Spree.t(:address_name_placeholder, scope: :address_book) %>
+    <%= f.label :address_name, Spree.t(:label, scope: :address_book) %>
+  </div>
     <%= render 'spree/addresses/form',
       address_name: 'address',
       address_form: f,
       address_type: 'shipping',
-      address: @address
-    %>
+      address: @address %>
+
     <%= f.submit t(:save, scope: :address_book), class: 'btn btn-primary btn-block spree-btn mb-5' %>
   <% end %>
 </div>

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

@@ -1,14 +1,10 @@
-<% @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">
+      <div class="form-group checkout-content-inner-field has-float-label">
+        <%= form.email_field :email, class: 'required spree-flat-input', required: true, placeholder: Spree.t(:email) %>
         <%= 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>
   </div>
 <% end %>
@@ -30,37 +26,37 @@
             <%= 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">
+        <% if user_available_addresses.present? %>
+        <div class="select_address mb-5">
+          <div class="form-group col">
+            <% user_available_addresses.each_with_index do |address, idx| %>
+            <div class="row mb-3" id="<%= [address_type, dom_id(address)].join('_') %>">
+              <label class="form-check-label spree-radio-label col-8">
                 <%= 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>
+              <%= render "spree/users/address_controls", address: address %>
+            </div>
             <% 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 class="row mb-3">
+              <label class="form-check-label spree-radio-label col">
+                <%= form.radio_button "#{address_name}_id", 0, class: 'form-check-input' %> <h4><%= Spree.t('address_book.other_address') %></h4>
+                <span class="spree-radio-label-custom-input"></span>
+              </label>
+            </div>
           </div>
         </div>
         <% end %>
         <%= form.fields_for address_name do |address_form| %>
-          <div class="inner checkout-content-inner" data-hook=<%="#{address_type}_inner" %>>
+          <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,
+              address: Spree::Address.new(country: current_store.default_country),
               form: form
             } %>
-            <p class="text-right text-uppercase checkout-content-inner-field">*<%= Spree.t(:required_fields) %></p>
           </div>
         <% end %>
       </div>

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

@@ -2,79 +2,5 @@
   <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>
-        <%= render partial: 'spree/shared/line_item', collection: @order.line_items, cached: true %>
-      </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>
-          <% @order.shipments.pending.each do |shipment| %>
-            <dd><%= shipment.shipping_method&.name %> </dd>
-          <% end %>
-        </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>
+  <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
 </div>

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

@@ -1,9 +1,10 @@
-<div id="<%= dom_id(card,'spree')%>" class="payment-sources-list-item">
+<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" }  %>
+    <%= 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>
+    <%= button_tag Spree.t(:remove), type: 'button', class: 'btn text-left d-block p-0 js-remove-credit-card', data: { id: card.id } %>
   </label>
 </div>

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

@@ -3,9 +3,15 @@
     <div id="methods">
       <%= form.fields_for :shipments do |ship_form| %>
         <div class="shipment">
-          <h4 class="text-uppercase checkout-content-header checkout-content-shipping-methods-header">
+          <h4 class="text-uppercase checkout-content-header checkout-content-shipping-methods-header mb-1">
             <%= Spree.t('checkout_page.delivery_method') %>
           </h4>
+          <div id="shipToLocation" class="mb-4 text-uppercase">
+            <%= Spree.t(:ship_to) %>
+            <span class="text-muted"><%= @order.shipping_address.address1 %></span> -
+              <% if @order.shipping_address.zipcode.present? %> <span class="text-muted"><%= @order.shipping_address.zipcode %></span> - <% end %>
+            <span class="text-muted"><%= @order.shipping_address.country_iso %></span>
+          </div>
 
           <ul class="checkout-content-shipping-methods-list">
             <% ship_form.object.shipping_rates.each do |rate| %>
@@ -28,13 +34,14 @@
         </div>
       <% end %>
     </div>
-    <% if Spree::Config[:shipping_instructions] %>
-      <p id="minstrs" data-hook>
+
+    <% if Spree::Frontend::Config[:shipping_instructions] %>
+      <div id="minstrs" data-hook>
         <h4 class="h5">
           <%= Spree.t(:shipping_instructions) %>
         </h4>
         <%= form.text_area :special_instructions, cols: 40, rows: 4, class: "form-control" %>
-      </p>
+      </div>
     <% end %>
   </div>
 </div>

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

@@ -0,0 +1,51 @@
+<div class="checkout-confirm-delivery-informations text-left mt-3 <%= class_name %>">
+  <div class="d-lg-none checkout-confirm-delivery-informations-header">
+    <%= Spree.t(:delivery_information) %>
+  </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>
+    <% end %>
+    <% 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.using_store_credit? %>
+            <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
+          <% end %>
+        </dd>
+      </div>
+    <% end %>
+  </dl>
+</div>

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

@@ -4,16 +4,15 @@
   </p>
 
   <div data-hook="checkout_payment_step">
-
     <%= render partial: 'spree/checkout/payment/storecredit' %>
 
     <ul id="payment-method-fields" class="list-unstyled position-relative" data-hook>
-      <% @order.available_payment_methods.each do |method| %>
+      <% checkout_available_payment_methods.each do |method| %>
         <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.id == @order.payments.checkout.last&.payment_method_id || method == @order.available_payment_methods.first %>
+                                 method.id == @order.payments.checkout.last&.payment_method_id || method == checkout_available_payment_methods.first %>
             <span class="spree-radio-label-custom-input"></span>
             <%= Spree.t(method.name, scope: :payment_methods, default: method.name) %>
           <% end %>
@@ -22,29 +21,11 @@
     </ul>
 
     <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 %>
+      <%= render partial: 'payment_sources' if @payment_sources.present? %>
 
       <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>
+        <% checkout_available_payment_methods.each do |method| %>
+          <li id="payment_method_<%= method.id %>" class="<%= 'last' if method == checkout_available_payment_methods.last %>" data-hook>
             <fieldset>
               <%= render partial: "spree/checkout/payment/#{method.method_type}", locals: { payment_method: method } %>
             </fieldset>

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

@@ -0,0 +1,17 @@
+<div id="existing_cards" class="payment-sources-existing-cards" style="display:none;">
+  <%= 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>

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

@@ -20,31 +20,34 @@
            data-non-shipment-tax='<%= adjustments.reject{ |adj| adj.adjustable_type== 'Spree::Shipment'}.sum(&:amount) %>'
            thousands-separator='<%= tax_total.thousands_separator %>'
            decimal-mark='<%= tax_total.decimal_mark %>'
-           precision='<%= Money::Currency.find(order.currency).exponent %>'
-      >
+           precision='<%= Money::Currency.find(order.currency).exponent %>'>
         <%= tax_total.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.has_free_shipping? %>
+        <div class="d-table-cell"><%= Spree.t(:shipping) %>:</div>
+        <div class="d-table-cell text-right" data-hook="is-free-shipping"><%= Spree.t(:free) %></div>
+      <% else %>
+        <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>
+        <% 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 %>
         <% end %>
       <% end %>
     <% end %>

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

@@ -1,5 +1,25 @@
 <% @body_id = 'checkout-page' %>
 
+<%
+content_for :head do
+  agent = request.env['HTTP_USER_AGENT']
+  if agent =~ /Safari/ && !(agent =~ /Chrome/)
+%>
+  <script>
+    if (!!window.performance && window.performance.navigation.type === 2) {
+      window.location.reload();
+    }
+    window.onpageshow = function(event) {
+      if (event.persisted) {
+        window.location.reload()
+      }
+    }
+  </script>
+<%
+  end
+end
+%>
+
 <div id="checkout" class="container checkout" data-hook>
   <%= render partial: 'spree/shared/error_messages', locals: { target: @order } %>
 
@@ -7,13 +27,13 @@
     <div class="text-uppercase checkout-header-title">
       <h1 data-hook="checkout_title"><%= Spree.t('checkout_page.header') %></h1>
     </div>
-    <div class="checkout-progress" data-hook="checkout_progress">
+    <div class="checkout-progress" data-hook="checkout_progress" role="navigation" aria-label="<%= Spree.t('checkout_page.checkout_navigation') %>">
       <%= checkout_progress %>
     </div>
   </div>
 
   <div class="row checkout-content" data-hook="checkout_content">
-    <%= form_for @order, url: spree.update_checkout_path(@order.state), html: { id: "checkout_form_#{@order.state}", class: "w-100 d-lg-flex align-items-lg-baseline  flex-wrap position-relative" } do |form| %>
+    <%= form_for @order, url: spree.update_checkout_path(@order.state), html: { id: "checkout_form_#{@order.state}", class: "w-100 d-lg-flex align-items-lg-baseline  flex-wrap position-relative", data: { turbo: false } } do |form| %>
       <div class="<%= if @order.state != 'confirm' then 'col-lg-6' else 'col-md-12' end %>" data-hook="checkout_form_wrapper">
         <%= form.hidden_field :state_lock_version %>
         <%= render @order.state, form: form %>