spree_frontend 4.0.9 → 4.1.0.rc1

data/app/helpers/spree/frontend_helper.rb

@@ -1,39 +1,54 @@
 module Spree
   module FrontendHelper
+    include InlineSvg::ActionView::Helpers
+
     def body_class
       @body_class ||= content_for?(:sidebar) ? 'two-col' : 'one-col'
       @body_class
     end
 
-    def spree_breadcrumbs(taxon, separator = '')
+    def spree_breadcrumbs(taxon, separator = '', product = nil)
       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', 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', 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')
+        crumbs << taxon.ancestors.where.not(parent_id: nil).map { |ancestor| content_tag(:li, content_tag(:span, link_to(content_tag(:span, ancestor.name, itemprop: 'name'), seo_url(ancestor, params: permitted_product_params), 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, params: permitted_product_params), itemprop: 'url') + separator, itemprop: 'item'), class: 'breadcrumb-item', itemscope: 'itemscope', itemtype: 'https://schema.org/ListItem', itemprop: 'itemListElement')
+        crumbs << content_tag(:li, content_tag(:span, content_tag(:span, product.name) + separator), class: 'breadcrumb-item') if product
       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-12 mt-4', aria: { label: 'breadcrumb' })
+      content_tag(:nav, crumb_list, id: 'breadcrumbs', class: 'col-12 mt-1 mt-sm-3 mt-lg-4', aria: { label: 'breadcrumb' })
+    end
+
+    def class_for(flash_type)
+      {
+        success: 'success',
+        registration_error: 'danger',
+        error: 'danger',
+        alert: 'danger',
+        warning: 'warning',
+        notice: 'success'
+      }[flash_type.to_sym]
     end
 
     def checkout_progress(numbers: false)
-      states = @order.checkout_steps
+      states = @order.checkout_steps - ['complete']
       items = states.each_with_index.map do |state, i|
         text = Spree.t("order_state.#{state}").titleize
         text.prepend("#{i.succ}. ") if numbers
 
-        css_classes = ['nav-item']
+        css_classes = ['text-uppercase 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), class: 'nav-link'
+          link_content = content_tag :span, nil, class: 'checkout-progress-steps-image checkout-progress-steps-image--full'
+          link_content << text
+          text = link_to(link_content, spree.checkout_state_path(state), class: 'd-flex flex-column align-items-center', method: :get)
         end
 
         css_classes << 'next' if state_index == current_index + 1
@@ -45,19 +60,32 @@ module Spree
         if state_index < current_index
           content_tag('li', text, class: css_classes.join(' '))
         else
-          content_tag('li', content_tag('a', text, class: "nav-link #{'active text-white' if state == @order.state}"), class: css_classes.join(' '))
+          link_content = if state == @order.state
+                           content_tag :span, nil, class: 'checkout-progress-steps-image checkout-progress-steps-image--full'
+                         else
+                           inline_svg_tag 'circle.svg', class: 'checkout-progress-steps-image'
+                         end
+          link_content << text
+          content_tag('li', content_tag('a', link_content, class: "d-flex flex-column align-items-center #{'active' 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 flex-column flex-md-row', id: "checkout-step-#{@order.state}")
+      content = content_tag('ul', raw(items.join("\n")), class: 'nav justify-content-between checkout-progress-steps', id: "checkout-step-#{@order.state}")
+      content << content_tag('div', raw('<hr /><hr /><hr />'), class: "checkout-progress-steps-line state-#{@order.state}")
     end
 
     def flash_messages(opts = {})
-      ignore_types = ['order_completed'].concat(Array(opts[:ignore_types]).map(&:to_s) || [])
+      flashes = ''
+      excluded_types = opts[:excluded_types].to_a.map(&:to_s)
+
+      flash.to_h.except('order_completed').each do |msg_type, text|
+        next if msg_type.blank? || excluded_types.include?(msg_type)
 
-      flash.each do |msg_type, text|
-        concat(content_tag(:div, text, class: "alert alert-#{msg_type}")) unless ignore_types.include?(msg_type)
+        flashes << content_tag(:div, class: "alert alert-#{class_for(msg_type)} mb-0") do
+          content_tag(:button, '&times;'.html_safe, class: 'close', data: { dismiss: 'alert', hidden: true }) +
+            content_tag(:span, text)
+        end
       end
-      nil
+      flashes.html_safe
     end
 
     def link_to_cart(text = nil)
@@ -76,6 +104,71 @@ module Spree
       link_to text.html_safe, spree.cart_path, class: "cart-info nav-link #{css_class}"
     end
 
+    def asset_exists?(path)
+      if Rails.env.production?
+        Rails.application.assets_manifest.find_sources(path).present?
+      else
+        Rails.application.assets.find_asset(path).present?
+      end
+    end
+
+    def plp_and_carousel_image(product, image_class = '')
+      image = default_image_for_product_or_variant(product)
+      image_url = image&.plp_url || asset_path('noimage/plp.png')
+      image_style = image&.style(:plp)
+
+      lazy_image(
+        src: image_url,
+        srcset: carousel_image_source_set(image),
+        alt: product.name,
+        width: image_style&.dig(:width) || 278,
+        height: image_style&.dig(:height) || 371,
+        class: "product-component-image d-block mw-100 #{image_class}"
+      )
+    end
+
+    def lazy_image(src:, alt:, width:, height:, srcset: '', **options)
+      # We need placeholder image with the correct size to prevent page from jumping
+      placeholder = "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20#{width}%20#{height}'%3E%3C/svg%3E"
+
+      image_tag placeholder, data: { src: src, srcset: srcset }, class: "#{options[:class]} lazyload", alt: alt
+    end
+
+    def permitted_product_params
+      product_filters = available_option_types.map(&:name)
+      params.permit(product_filters << :sort_by)
+    end
+
+    def carousel_image_source_set(image)
+      return '' unless image
+
+      widths = { lg: 1200, md: 992, sm: 768, xs: 576 }
+      set = []
+      widths.each do |key, value|
+        file = main_app.url_for(image.url("plp_and_carousel_#{key}"))
+
+        set << "#{file} #{value}w"
+      end
+      set.join(', ')
+    end
+
+    def image_source_set(name)
+      widths = {
+        desktop: '1200',
+        tablet_landscape: '992',
+        tablet_portrait: '768',
+        mobile: '576'
+      }
+      set = []
+      widths.each do |key, value|
+        filename = key == :desktop ? name : "#{name}_#{key}"
+        file = asset_path("#{filename}.jpg")
+
+        set << "#{file} #{value}w"
+      end
+      set.join(', ')
+    end
+
     def taxons_tree(root_taxon, current_taxon, max_level = 1)
       return '' if max_level < 1 || root_taxon.leaf?
 
@@ -91,5 +184,66 @@ module Spree
     def set_image_alt(image)
       return image.alt if image.alt.present?
     end
+
+    def icon(name:, classes: '', width:, height:)
+      inline_svg_tag "#{name}.svg", class: "spree-icon #{classes}", size: "#{width}px*#{height}px"
+    end
+
+    def price_filter_values
+      [
+        "#{I18n.t('activerecord.attributes.spree/product.less_than')} #{formatted_price(50)}",
+        "#{formatted_price(50)} - #{formatted_price(100)}",
+        "#{formatted_price(101)} - #{formatted_price(150)}",
+        "#{formatted_price(151)} - #{formatted_price(200)}",
+        "#{formatted_price(201)} - #{formatted_price(300)}"
+      ]
+    end
+
+    def filtering_params
+      static_filters = %w(keywords price sort_by)
+
+      available_option_types.map(&:filter_param).concat(static_filters)
+    end
+
+    def available_option_types
+      @available_option_types ||= Rails.cache.fetch('available-option-types', expires_in: 3.minutes) do
+        Spree::OptionType.includes(:option_values).to_a
+      end
+      @available_option_types
+    end
+
+    def spree_social_link(service)
+      return '' if current_store.send(service).blank?
+
+      link_to "https://#{service}.com/#{current_store.send(service)}", target: :blank, rel: 'nofollow noopener' do
+        content_tag :gigure, id: service, class: 'px-2' do
+          icon(name: service, width: 22, height: 22)
+        end
+      end
+    end
+
+    private
+
+    def formatted_price(value)
+      Spree::Money.new(value, currency: current_currency, no_cents_if_whole: true).to_s
+    end
+
+    def credit_card_icon(type)
+      available_icons = %w[visa american_express diners_club discover jcb maestro master]
+
+      if available_icons.include?(type)
+        image_tag "credit_cards/icons/#{type}.svg", class: 'payment-sources-list-item-image'
+      else
+        image_tag 'credit_cards/icons/generic.svg', class: 'payment-sources-list-item-image'
+      end
+    end
+
+    def checkout_edit_link(step = 'address')
+      classes = 'align-text-bottom checkout-confirm-delivery-informations-link'
+
+      link_to spree.checkout_state_path(step), class: classes, method: :get do
+        inline_svg_tag 'edit.svg'
+      end
+    end
   end
 end

data/app/helpers/spree/navigation_helper.rb

@@ -0,0 +1,34 @@
+require 'digest'
+
+module Spree
+  module NavigationHelper
+    def spree_navigation_data
+      SpreeStorefrontConfig.dig(current_store.code, :navigation) || SpreeStorefrontConfig.dig(:default, :navigation) || []
+    # safeguard for older Spree installs that don't have spree_navigation initializer
+    # or spree.yml file present
+    rescue
+      []
+    end
+
+    def spree_nav_cache_key(section = 'header')
+      base_cache_key + [current_store, spree_navigation_data_cache_key, Spree::Config[:logo], section]
+    end
+
+    def main_nav_image(image_path, title = '')
+      image_url = asset_path(asset_exists?(image_path) ? image_path : 'noimage/plp.png')
+
+      lazy_image(
+        src: image_url,
+        alt: title,
+        width: 350,
+        height: 234
+      )
+    end
+
+    private
+
+    def spree_navigation_data_cache_key
+      @spree_navigation_data_cache_key ||= Digest::MD5.hexdigest(spree_navigation_data.to_s)
+    end
+  end
+end

data/app/helpers/spree/structured_data_helper.rb

@@ -13,7 +13,7 @@ module Spree
     private
 
     def structured_product_hash(product)
-      Rails.cache.fetch("spree/structured-data/#{product.cache_key}") do
+      Rails.cache.fetch(common_product_cache_keys + ["spree/structured-data/#{product.cache_key_with_version}"]) do
         {
           '@context': 'https://schema.org/',
           '@type': 'Product',
@@ -25,7 +25,7 @@ module Spree
           sku: product.sku,
           offers: {
             '@type': 'Offer',
-            price: product.price,
+            price: product.price_in(current_currency).amount,
             priceCurrency: current_currency,
             availability: product.in_stock? ? 'InStock' : 'OutOfStock',
             url: spree.product_url(product),
@@ -36,7 +36,7 @@ module Spree
     end
 
     def structured_images(product)
-      image = product.variant_images.first
+      image = product.default_variant.images.first
 
       return '' unless image
 

data/app/helpers/spree/taxons_helper.rb

@@ -4,6 +4,10 @@ module Spree
     # that we can use configurations as well as make it easier for end users to override this determination.  One idea is
     # to show the most popular products for a particular taxon (that is an exercise left to the developer.)
     def taxon_preview(taxon, max = 4)
+      ActiveSupport::Deprecation.warn(<<-DEPRECATION, caller)
+        TaxonsHelper is deprecated and will be removed in Spree 4.2.
+        Please remove any `helper 'spree/taxons'` from your controllers.
+      DEPRECATION
       products = taxon.active_products.distinct.select('spree_products.*, spree_products_taxons.position').limit(max)
       if products.size < max
         products_arel = Spree::Product.arel_table

data/app/models/spree/frontend_configuration.rb

@@ -2,5 +2,6 @@ module Spree
   class FrontendConfiguration < Preferences::Configuration
     preference :coupon_codes_enabled, :boolean, default: true # Determines if we show coupon code form at cart and checkout
     preference :locale, :string, default: Rails.application.config.i18n.default_locale
+    preference :remember_me_enabled, :boolean, default: true
   end
 end

data/app/views/kaminari/twitter-bootstrap-4/_first_page.html.erb

@@ -8,6 +8,6 @@
 -%>
 <% unless current_page.first? %>
   <li class="first page-item">
-    <%= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote, class: 'page-link' %>
+    <%= link_to_unless current_page.first?, inline_svg_tag('pagination-double-arrow-right.svg', size: '13px*16px', class: 'spree-icon-arrow-left'), url, remote: remote, class: 'page-link' %>
   </li>
 <% end %>

data/app/views/kaminari/twitter-bootstrap-4/_gap.html.erb

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

data/app/views/kaminari/twitter-bootstrap-4/_last_page.html.erb

@@ -8,6 +8,6 @@
 -%>
 <% unless current_page.last? %>
   <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' %>
+    <%= link_to_unless current_page.last?, inline_svg_tag('pagination-double-arrow-right.svg', size: '13px*16px'), url, remote: remote, class: 'page-link' %>
   </li>
 <% end %>

data/app/views/kaminari/twitter-bootstrap-4/_next_page.html.erb

@@ -8,6 +8,6 @@
 -%>
 <% unless current_page.last? %>
   <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' %>
+    <%= link_to_unless current_page.last?, inline_svg_tag('pagination-arrow-right.svg', size: '13px*16px'), url, rel: 'next', remote: remote, class: 'page-link' %>
   </li>
 <% end %>

data/app/views/kaminari/twitter-bootstrap-4/_prev_page.html.erb

@@ -8,6 +8,6 @@
 -%>
 <% unless current_page.first? %>
   <li class="prev page-item">
-    <%= link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote, class: 'page-link' %>
+    <%= link_to_unless current_page.first?, inline_svg_tag('pagination-arrow-right.svg', size: '13px*16px', class: 'spree-icon-arrow-left'), url, rel: 'prev', remote: remote, class: 'page-link' %>
   </li>
 <% end %>

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

@@ -1,52 +1,51 @@
 <% address_id = address_type.chars.first %>
 
 <div class="inner" data-hook=<%="#{address_type}_inner" %>>
-  <div class="form-group" id=<%="#{address_id}firstname" %>>
+  <p 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 %>
-  </div>
-  <div class="form-group" id=<%="#{address_id}lastname" %>>
+  </p>
+  <p 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 %>
-  </div>
+  </p>
   <% if Spree::Config[:company] %>
-    <div class="form-group" id=<%="#{address_id}company" %>>
+    <p class="form-group" id=<%="#{address_id}company" %>>
       <%= form.label :company, Spree.t(:company) %>
       <%= form.text_field :company, class: 'form-control' %>
-    </div>
+    </p>
   <% end %>
-  <div class="form-group" id=<%="#{address_id}address1" %>>
+  <p 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' %>
-  </div>
-  <div class="form-group" id=<%="#{address_id}address2" %>>
+  </p>
+  <p class="form-group" id=<%="#{address_id}address2" %>>
     <%= form.label :address2, Spree.t(:street_address_2) %>
     <%= form.text_field :address2, class: 'form-control' %>
-  </div>
-  <div class="form-group" id=<%="#{address_id}city" %>>
+  </p>
+  <p 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 %>
-  </div>
-
-  <div class="form-group" id=<%="#{address_id}country" %>>
+  </p>
+  <p 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>
-  </div>
+  </p>
 
   <% if Spree::Config[:address_requires_state] %>
-    <div class="form-group" id=<%="#{address_id}state" %>>
+    <p 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>
@@ -56,39 +55,37 @@
          form.collection_select(:state_id, address.country.states,
                             :id, :name,
                             {include_blank: true},
-                            {class: have_states ? 'form-control' : 'hidden',
+                            {class: have_states ? 'form-control' : 'form-control hidden',
                             required: have_states,
                             disabled: !have_states}) +
          form.text_field(:state_name,
-                            class: !have_states ? 'form-control' : 'hidden',
+                            class: !have_states ? 'form-control' : 'form-control hidden',
                             required: !have_states,
                             disabled: have_states)
          ].join.gsub('"', "'").gsub("\n", "")
       %>
-    </div>
+    </p>
       <noscript>
         <%= form.text_field :state_name, class: 'form-control', required: true %>
       </noscript>
   <% end %>
 
-  <div class="form-group" id=<%="#{address_id}zipcode" %>>
+  <p 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? %>
-  </div>
-
-
-  <div class="form-group" id=<%="#{address_id}phone" %>>
+  </p>
+  <p 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? %>
-  </div>
+  </p>
   <% if Spree::Config[:alternative_shipping_phone] %>
-    <div class="form-group" id=<%="#{address_id}altphone" %>>
+    <p class="form-group" id=<%="#{address_id}altphone" %>>
       <%= form.label :alternative_phone, Spree.t(:alternative_phone) %>
       <%= form.phone_field :alternative_phone, class: 'form-control' %>
-    </div>
+    </p>
   <% end %>
 </div>

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

@@ -2,17 +2,22 @@
 
 <% 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'} %>
+    <p class="form-group checkout-content-inner-field" id="<%= "#{address_id}country" %>">
+      <span id="<%= "#{address_id}country-selection" %>" class="d-block position-relative">
+        <%= address_form.collection_select :country_id, available_countries, :id, :name,
+                                           { prompt: Spree.t(:country).upcase },
+                                           { class: 'required form-control spree-flat-select'} %>
+        <%= image_tag 'arrow.svg', class: 'position-absolute spree-flat-select-arrow' %>
       </span>
-    </div>
+    </p>
   <% elsif field == "state" %>
-    <%= address_field(address_form, :state, address_id) { address_state(address_form, address.country, address_id)} if Spree::Config[:address_requires_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>
   <% 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 %>
+    <div class="form-group mb-4">
+      <%= address_field(address_form, field.to_sym, address_id) %>
+    </div>  <% end %>
 <% end %>

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

@@ -1,23 +1,13 @@
+<%= render 'spree/shared/error_messages', target: @address %>
 <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>
+  <h3 class="spree-header spree-mb-large spree-mt-large"><%= t(:edit_shipping_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' %>
+  <% end %>
 </div>

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

@@ -1,23 +1,13 @@
+<%= render 'spree/shared/error_messages', target: @address %>
 <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>
+  <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| %>
+    <%= render 'spree/addresses/form',
+      address_name: 'address',
+      address_form: f,
+      address_type: 'shipping',
+      address: @address
+    %>
+    <%= f.submit t(:save, scope: :address_book), class: 'btn btn-primary btn-block spree-btn mb-5' %>
+  <% end %>
 </div>