spree_frontend 3.7.14.1 → 4.0.0.beta

data/app/controllers/spree/products_controller.rb

@@ -11,7 +11,7 @@ module Spree
       @searcher = build_searcher(params.merge(include_images: true))
       @products = @searcher.retrieve_products
       @products = @products.includes(:possible_promotions) if @products.respond_to?(:includes)
-      @taxonomies = Spree::Taxonomy.includes(root: :children)
+      @taxonomies = load_taxonomies
     end
 
     def show
@@ -58,5 +58,9 @@ module Spree
         redirect_to url_for(params), status: :moved_permanently
       end
     end
+
+    def load_taxonomies
+      Spree::Taxonomy.includes(root: :children)
+    end
   end
 end

data/app/controllers/spree/store_controller.rb

@@ -3,7 +3,7 @@ module Spree
     include Spree::Core::ControllerHelpers::Order
 
     skip_before_action :set_current_order, only: :cart_link
-    skip_before_action :verify_authenticity_token, only: :ensure_cart, raise: false
+    skip_before_action :verify_authenticity_token, only: :ensure_cart
 
     def forbidden
       render 'spree/shared/forbidden', layout: Spree::Config[:layout], status: 403

data/app/helpers/spree/addresses_helper.rb

@@ -0,0 +1,36 @@
+# https://github.com/spree-contrib/spree_address_book/blob/master/app/helpers/spree/addresses_helper.rb
+module Spree
+  module AddressesHelper
+    def address_field(form, method, address_id = 'b', &handler)
+      content_tag :div, id: [address_id, method].join, class: 'form-group' do
+        if handler
+          yield
+        else
+          is_required = Spree::Address.required_fields.include?(method)
+          separator = is_required ? '<span class="required">*</span><br />' : '<br />'
+          form.label(method) + separator.html_safe +
+            form.text_field(method, class: [is_required ? 'required' : nil, 'form-control'].compact, required: is_required)
+        end
+      end
+    end
+
+    def address_state(form, country, _address_id = 'b')
+      country ||= Spree::Country.find(Spree::Config[:default_country_id])
+      have_states = country.states.any?
+      state_elements = [
+        form.collection_select(:state_id, country.states.order(:name),
+                              :id, :name,
+                              { include_blank: true },
+                               class: have_states ? 'form-control' : 'hidden',
+                               disabled: !have_states) +
+          form.text_field(:state_name,
+                          class: !have_states ? 'form-control' : 'hidden',
+                          disabled: have_states)
+      ].join.tr('"', "'").delete("\n")
+
+      form.label(:state, Spree.t(:state)) + '<span class="req">*</span><br />'.html_safe +
+        content_tag(:noscript, form.text_field(:state_name, class: 'required form-control')) +
+        javascript_tag("document.write(\"#{state_elements.html_safe}\");")
+    end
+  end
+end

data/app/helpers/spree/frontend_helper.rb

@@ -5,20 +5,20 @@ module Spree
       @body_class
     end
 
-    def spree_breadcrumbs(taxon, separator = ' ')
+    def spree_breadcrumbs(taxon, separator = '')
       return '' if current_page?('/') || taxon.nil?
 
       separator = raw(separator)
-      crumbs = [content_tag(:li, content_tag(:span, link_to(content_tag(:span, Spree.t(:home), itemprop: 'name'), spree.root_path, itemprop: 'url') + separator, itemprop: 'item'), itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement')]
+      crumbs = [content_tag(:li, content_tag(:span, link_to(content_tag(:span, Spree.t(:home), itemprop: 'name'), spree.root_path, itemprop: 'url') + separator, itemprop: 'item'), itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement', class: 'breadcrumb-item')]
       if taxon
-        crumbs << content_tag(:li, content_tag(:span, link_to(content_tag(:span, Spree.t(:products), itemprop: 'name'), spree.products_path, itemprop: 'url') + separator, itemprop: 'item'), itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement')
-        crumbs << taxon.ancestors.collect { |ancestor| content_tag(:li, content_tag(:span, link_to(content_tag(:span, ancestor.name, itemprop: 'name'), seo_url(ancestor), itemprop: 'url') + separator, itemprop: 'item'), itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement') } unless taxon.ancestors.empty?
-        crumbs << content_tag(:li, content_tag(:span, link_to(content_tag(:span, taxon.name, itemprop: 'name'), seo_url(taxon), itemprop: 'url'), itemprop: 'item'), class: 'active', itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement')
+        crumbs << content_tag(:li, content_tag(:span, link_to(content_tag(:span, Spree.t(:products), itemprop: 'name'), spree.products_path, itemprop: 'url') + separator, itemprop: 'item'), itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement', class: 'breadcrumb-item')
+        crumbs << taxon.ancestors.collect { |ancestor| content_tag(:li, content_tag(:span, link_to(content_tag(:span, ancestor.name, itemprop: 'name'), seo_url(ancestor), itemprop: 'url') + separator, itemprop: 'item'), itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement', class: 'breadcrumb-item') } unless taxon.ancestors.empty?
+        crumbs << content_tag(:li, content_tag(:span, link_to(content_tag(:span, taxon.name, itemprop: 'name'), seo_url(taxon), itemprop: 'url'), itemprop: 'item'), class: 'active breadcrumb-item', itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement')
       else
         crumbs << content_tag(:li, content_tag(:span, Spree.t(:products), itemprop: 'item'), class: 'active', itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement')
       end
       crumb_list = content_tag(:ol, raw(crumbs.flatten.map(&:mb_chars).join), class: 'breadcrumb', itemscope: 'itemscope', itemtype: 'https://schema.org/BreadcrumbList')
-      content_tag(:nav, crumb_list, id: 'breadcrumbs', class: 'col-md-12')
+      content_tag(:nav, crumb_list, id: 'breadcrumbs', class: 'col-12 mt-4', aria: { label: 'breadcrumb' })
     end
 
     def checkout_progress(numbers: false)
@@ -27,13 +27,13 @@ module Spree
         text = Spree.t("order_state.#{state}").titleize
         text.prepend("#{i.succ}. ") if numbers
 
-        css_classes = []
+        css_classes = ['nav-item']
         current_index = states.index(@order.state)
         state_index = states.index(state)
 
         if state_index < current_index
           css_classes << 'completed'
-          text = link_to text, checkout_state_path(state)
+          text = link_to text, checkout_state_path(state), class: 'nav-link'
         end
 
         css_classes << 'next' if state_index == current_index + 1
@@ -45,10 +45,10 @@ module Spree
         if state_index < current_index
           content_tag('li', text, class: css_classes.join(' '))
         else
-          content_tag('li', content_tag('a', text), class: css_classes.join(' '))
+          content_tag('li', content_tag('a', text, class: "nav-link #{'active text-white' if state == @order.state}"), class: css_classes.join(' '))
         end
       end
-      content_tag('ul', raw(items.join("\n")), class: 'progress-steps nav nav-pills nav-justified', id: "checkout-step-#{@order.state}")
+      content_tag('ul', raw(items.join("\n")), class: 'progress-steps nav nav-pills nav-justified flex-column flex-md-row', id: "checkout-step-#{@order.state}")
     end
 
     def flash_messages(opts = {})
@@ -68,11 +68,12 @@ module Spree
         text = "<span class='glyphicon glyphicon-shopping-cart'></span> #{text}: (#{Spree.t('empty')})"
         css_class = 'empty'
       else
-        text = "<span class='glyphicon glyphicon-shopping-cart'></span> #{text}: (#{simple_current_order.item_count})  <span class='amount'>#{simple_current_order.display_total.to_html}</span>"
+        text = "<span class='glyphicon glyphicon-shopping-cart'></span> #{text}: (#{simple_current_order.item_count})
+                <span class='amount'>#{simple_current_order.display_total.to_html}</span>"
         css_class = 'full'
       end
 
-      link_to text.html_safe, spree.cart_path, class: "cart-info #{css_class}"
+      link_to text.html_safe, spree.cart_path, class: "cart-info nav-link #{css_class}"
     end
 
     def taxons_tree(root_taxon, current_taxon, max_level = 1)
@@ -80,15 +81,15 @@ module Spree
 
       content_tag :div, class: 'list-group' do
         taxons = root_taxon.children.map do |taxon|
-          css_class = current_taxon&.self_and_ancestors&.include?(taxon) ? 'list-group-item active' : 'list-group-item'
+          css_class = current_taxon&.self_and_ancestors&.include?(taxon) ? 'list-group-item list-group-item-action active' : 'list-group-item list-group-item-action'
           link_to(taxon.name, seo_url(taxon), class: css_class) + taxons_tree(taxon, current_taxon, max_level - 1)
         end
         safe_join(taxons, "\n")
       end
     end
 
-    def set_image_alt(image, size)
-      image.alt.present? ? image.alt : image_alt(main_app.url_for(image.url(size)))
+    def set_image_alt(image)
+      return image.alt if image.alt.present?
     end
   end
 end

data/app/views/kaminari/{twitter-bootstrap-3 → twitter-bootstrap-4}/_first_page.html.erb

@@ -7,7 +7,7 @@
     remote:        data-remote
 -%>
 <% unless current_page.first? %>
-  <li class="first">
-    <%= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote %>
+  <li class="first page-item">
+    <%= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote, class: 'page-link' %>
   </li>
 <% end %>

data/app/views/kaminari/{twitter-bootstrap-3 → twitter-bootstrap-4}/_gap.html.erb

@@ -5,4 +5,8 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<li class="page gap disabled"><a href="#" onclick="return false;"><%= raw(t 'views.pagination.truncate') %></a></li>
+<li class="page gap disabled page-item">
+  <a href="#" onclick="return false;" class="page-link">
+    <%= raw(t 'views.pagination.truncate') %>
+  </a>
+</li>

data/app/views/kaminari/{twitter-bootstrap-3 → twitter-bootstrap-4}/_last_page.html.erb

@@ -7,7 +7,7 @@
     remote:        data-remote
 -%>
 <% unless current_page.last? %>
-  <li class="last next"><%# "next" class present for border styling in twitter bootstrap %>
-    <%= link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {remote: remote} %>
+  <li class="last next page-item"><%# "next" class present for border styling in twitter bootstrap %>
+    <%= link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, remote: remote, class: 'page-link' %>
   </li>
 <% end %>

data/app/views/kaminari/{twitter-bootstrap-3 → twitter-bootstrap-4}/_next_page.html.erb

@@ -7,7 +7,7 @@
     remote:        data-remote
 -%>
 <% unless current_page.last? %>
-  <li class="next_page">
-    <%= link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, rel: 'next', remote: remote %>
+  <li class="next_page page-item">
+    <%= link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, rel: 'next', remote: remote, class: 'page-link' %>
   </li>
 <% end %>

data/app/views/kaminari/{twitter-bootstrap-3 → twitter-bootstrap-4}/_page.html.erb

@@ -7,6 +7,12 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<li class="page<%= ' active' if page.current? %>">
-  <%= link_to page, url, opts = {remote: remote, rel: page.next? ? 'next' : page.prev? ? 'prev' : nil} %>
+<li class="page<%= ' active' if page.current? %> page-item">
+  <%= link_to page,
+    url,
+    opts = {
+      remote: remote,
+      rel: page.next? ? 'next' : page.prev? ? 'prev' : nil,
+      class: 'page-link'
+    } %>
 </li>

data/app/views/kaminari/{twitter-bootstrap-3 → twitter-bootstrap-4}/_paginator.html.erb

@@ -9,7 +9,7 @@
 <% pagination_class ||= '' %>
 
 <%= paginator.render do %>
-  <ul class="pagination <%= pagination_class %>">
+  <ul class="pagination mt-4 <%= pagination_class %>">
     <%= first_page_tag unless current_page.first? %>
     <%= prev_page_tag unless current_page.first? %>
     <% each_page do |page| %>

data/app/views/kaminari/{twitter-bootstrap-3 → twitter-bootstrap-4}/_prev_page.html.erb

@@ -7,7 +7,7 @@
     remote:        data-remote
 -%>
 <% unless current_page.first? %>
-  <li class="prev">
-    <%= link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote %>
+  <li class="prev page-item">
+    <%= link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote, class: 'page-link' %>
   </li>
 <% end %>

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

@@ -1,51 +1,52 @@
 <% address_id = address_type.chars.first %>
 
 <div class="inner" data-hook=<%="#{address_type}_inner" %>>
-  <p class="form-group" id=<%="#{address_id}firstname" %>>
+  <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" %>>
       <%= 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>
@@ -55,37 +56,39 @@
          form.collection_select(:state_id, address.country.states,
                             :id, :name,
                             {include_blank: true},
-                            {class: have_states ? 'form-control' : 'form-control hidden',
+                            {class: have_states ? 'form-control' : 'hidden',
                             required: have_states,
                             disabled: !have_states}) +
          form.text_field(:state_name,
-                            class: !have_states ? 'form-control' : 'form-control hidden',
+                            class: !have_states ? 'form-control' : 'hidden',
                             required: !have_states,
                             disabled: have_states)
          ].join.gsub('"', "'").gsub("\n", "")
       %>
-    </p>
+    </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

@@ -0,0 +1,18 @@
+<% address_id = address_type.chars.first %>
+
+<% Spree::Address::ADDRESS_FIELDS.each do |field| %>
+  <% if field == "country" %>
+    <div class="form-group" id="<%= "#{address_id}country" %>">
+      <%= address_form.label :country_id, Spree.t(:country) %><span class="required">*</span><br />
+      <span id="<%= "#{address_id}country-selection" %>">
+        <%= address_form.collection_select :country_id, available_countries, :id, :name, {}, {:class => 'required form-control'} %>
+      </span>
+    </div>
+  <% elsif field == "state" %>
+    <%= address_field(address_form, :state, address_id) { address_state(address_form, address.country, address_id)} if Spree::Config[:address_requires_state] %>
+  <% else %>
+    <% next if field == "company" && !Spree::Config[:company] %>
+    <% next if field == "alternative_#{address_id}_phone" && !Spree::Config["alternative_#{address_id}_phone"] %>
+    <%= address_field(address_form, field.to_sym, address_id) %>
+  <% end %>
+<% end %>

data/app/views/spree/addresses/destroy.js.erb

@@ -0,0 +1,2 @@
+$("#billing_address_<%= @address.id %>").fadeOut();
+$("#shipping_address_<%= @address.id %>").fadeOut();

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

@@ -0,0 +1,23 @@
+<div class="col-lg-6 offset-lg-3">
+  <div class="card mb-3">
+    <div class="card-header">
+      <h3 class="card-title mb-0 h5"><%= t(:edit_shipping_address, scope: :address_book) %></h3>
+    </div>
+    <div class="card-body">
+      <%= render 'spree/shared/error_messages', target: @address %>
+      <%= form_for @address, html: { id: 'checkout_form_address' } do |f| %>
+        <fieldset>
+          <div class="inner">
+            <%= render 'spree/addresses/form',
+              address_name: 'address',
+              address_form: f,
+              address_type: 'shipping',
+              address: @address
+            %>
+          </div>
+          <%= f.submit Spree.t(:update), class: 'btn btn-primary' %>
+        </fieldset>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+<div class="col-lg-6 offset-lg-3">
+  <div class="card mb-3">
+    <div class="card-header">
+      <h3 class="card-title h5 mb-0"><%= t(:new_shipping_address, scope: :address_book) %></h3>
+    </div>
+    <div class="card-body">
+      <%= render 'spree/shared/error_messages', target: @address %>
+      <%= form_for @address, html: { id: 'checkout_form_address' } do |f| %>
+        <fieldset>
+          <div class="inner">
+            <%= render 'spree/addresses/form',
+              address_name: 'address',
+              address_form: f,
+              address_type: 'shipping',
+              address: @address
+            %>
+          </div>
+          <%= f.submit t(:save, scope: :address_book), class: 'btn btn-primary' %>
+        </fieldset>
+      <% end %>
+    </div>
+  </div>
+</div>

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

@@ -1,44 +1,68 @@
-<div class="row">
-  <div class="col-sm-6" data-hook="billing_fieldset_wrapper">
-    <div class="panel panel-default" id="billing" data-hook>
-      <%= form.fields_for :bill_address do |bill_form| %>
-        <div class="panel-heading">
-          <h3 class="panel-title"><%= Spree.t(:billing_address) %></h3>
-        </div>
-        <div class="panel-body">
-          <%= render partial: 'spree/address/form', locals: { form: bill_form, address_type: 'billing', address: @order.bill_address } %>
-        </div>
-      <% end %>
-    </div>
-  </div>
+<% @addresses = try_spree_current_user ? try_spree_current_user.addresses : [] %>
 
-  <div class="col-sm-6" data-hook="shipping_fieldset_wrapper">
-    <div class="panel panel-default" id="shipping" data-hook>
-      <%= form.fields_for :ship_address do |ship_form| %>
-        <div class="panel-heading">
-          <h3 class="panel-title"><%= Spree.t(:shipping_address) %></h3>
+<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="panel-body">
-          <p class="field checkbox" 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? %>
-              <%= Spree.t(:use_billing_address) %>
-            <% end %>
-          </p>
-          <%= render partial: 'spree/address/form', locals: { form: ship_form, address_type: 'shipping', address: @order.ship_address } %>
+        <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>
+          </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 %>
+      </div>
     </div>
-  </div>
+  <% end %>
 </div>
 
-<div class="well text-right form-buttons" data-hook="buttons">
-  <%= 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 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>

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

@@ -1,16 +1,18 @@
-<div class="panel panel-default" id="order_details" data-hook>
-  <div class="panel-heading">
-    <h3 class="panel-title"><%= Spree.t(:confirm) %></h3>
+<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="panel-body">
+  <div class="card-body">
     <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
   </div>
 </div>
 
-<div class="well text-right form-buttons" data-hook="buttons">
-  <% 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="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>
 </div>