spree_frontend 4.1.0 → 4.7.0

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

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

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

@@ -0,0 +1,8 @@
+<script>
+  SpreePaths = <%==
+  {
+    mounted_at: Rails.application.routes.url_helpers.spree_path(trailing_slash: true),
+    admin: Spree.respond_to?(:admin_path) ? Spree.admin_path.gsub(/\A(\/)?(.*[^\/])(\/)?\z/, '\\2/') : '/admin'
+  }.to_json
+  %>
+</script>

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

@@ -6,7 +6,7 @@
       <%= Spree.t(:ending_in) %> <%= source.last_digits %>
     <% end %>
   </span>
-  <br />
+  <br>
   <span class="full-name"><%= source.name %></span>
 <% else %>
   <%= content_tag(:span, payment.payment_method.name) %>
@@ -14,4 +14,4 @@
 
 <span class="payment-amount">(<%= payment.display_amount %>)</span>
 
-<br />
+<br>

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

@@ -1,8 +1,8 @@
 <td>
   <% payment_sources.each do |payment_source| %>
     <%= payment_source.class.to_s.underscore.split('/').second.humanize.titleize %>
-    <br/>
+    <br>
     <%= payment_source.last_digits.rjust(16, '*') %>
-    <br/>
+    <br>
   <% end %>
 </td>

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

@@ -1,5 +1,5 @@
 <div class="modal product-added-modal" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog modal-lg" role="document" >
+  <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <div class="modal-header pb-0 px-4 pt-4 border-0">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -34,7 +34,7 @@
           </div>
           <div class="row pt-5 justify-content-center align-items-center product-added-modal-product">
             <div class="col-4 col-sm-2 product-added-modal-product-image-container">
-              <img class="product-added-modal-product-image-container-image" src="data:," alt="<%= @product.name %>">
+              <img class="product-added-modal-product-image-container-image" src="data:," alt="<%= @product&.name %>">
             </div>
             <div class="col-8 col-sm-6 col-lg-4 py-1 product-added-modal-product-details">
               <div class="product-added-modal-product-details-name"></div>
@@ -48,7 +48,7 @@
           <div class="row pb-4 justify-content-center">
             <div class="col-12 col-lg-8">
               <%= link_to spree.checkout_path, class: 'btn btn-primary w-100 font-weight-bold text-uppercase product-added-modal-button', method: :get do %>
-                <%= Spree.t('pdp.checkout') %>
+                <%= Spree.t(:checkout) %>
               <% end %>
             </div>
           </div>

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

@@ -0,0 +1,4 @@
+<% selected_properties = params.dig(:properties, "#{property.filter_param}")&.split(',') || [] %>
+<% property.uniq_values.each do |value| %>
+  <%= property_value_filter_link(property, value, permitted_params) %>
+<% end %>

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

@@ -1,6 +1,6 @@
 <%# TODO: Use in cart %>
-<div class="d-flex quantity-select mx-auto mx-md-0">
+<div class="d-inline-flex quantity-select">
   <%= button_tag '-', type: 'button', class: "border-right-0 flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-decrease" %>
-  <%= number_field_tag input_name, 1, min: 1, class: "p-0 flex-grow-1 flex-shrink-1 text-center form-control border-left-0 border-right-0 quantity-select-value", 'aria-label': Spree.t('pdp.quantity') %>
+  <%= number_field_tag input_name, 1, min: 1, max: maximum_quantity, class: "p-0 flex-grow-1 flex-shrink-1 text-center form-control border-left-0 border-right-0 quantity-select-value", 'aria-label': Spree.t('pdp.quantity') %>
   <%= button_tag '+', type: 'button', class: "border-left-0  flex-grow-0 flex-shrink-0 py-0 px-3 quantity-select-increase" %>
 </div>

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

@@ -1,19 +1,15 @@
-<%= form_tag spree.products_path, method: :get, class: "py-md-1 d-flex align-items-center" do %>
+<%= form_tag spree.products_path, method: :get, class: "py-md-1 d-flex align-items-center search-form" do %>
   <%= search_field_tag :keywords,
                        params[:keywords],
                        placeholder: Spree.t(:search),
+                       title: Spree.t(:search),
                        autofocus: true,
-                       class: " border-0 p-3"
-  %>
-  <label class="m-0">
-    <input type="submit">
+                       'aria-label': Spree.t(:search),
+                       class: " border-0 p-3" %>
+  <button type="submit" class="btn border-0 p-0" aria-label="Submit">
     <%= icon(name: 'search',
-             classes: 'd-md-none',
-             width: 20,
-             height: 20) %>
-    <%= icon(name: 'search',
-             classes: 'd-none d-md-inline',
-             width: 27,
-             height: 27) %>
-  </label>
+            classes: 'd-inline',
+            width: 27,
+            height: 27) %>
+  </button>
 <% end %>

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

@@ -1,11 +1,12 @@
 <script>
-  window.addEventListener('turbolinks:load', function() {
+  window.addEventListener('turbo:load', function() {
       Spree.translations = <%==
-    {
-      coupon_code_applied: Spree.t(:coupon_code_applied),
-      coupon_code_removed: Spree.t(:coupon_code_removed),
-      coupon_code_error_icon: image_path('error.svg')
-    }.to_json
-  %>
+        {
+          coupon_code_applied: Spree.t(:coupon_code_applied),
+          coupon_code_removed: Spree.t(:coupon_code_removed),
+          coupon_code_error_icon: image_path('error.svg'),
+          credit_card_remove_confirmation: Spree.t(:credit_card_remove_confirmation)
+        }.to_json
+                           %>
   });
 </script>

data/app/views/spree/shared/carousel/_single.html.erb

@@ -4,15 +4,13 @@
   data-product-carousel-group-identifier="<%= group_id %>"
   data-variant-change-trigger-identifier="<%= trigger_id %>"
   data-interval="false"
-  data-hook
->
+  data-hook>
   <% if images.length > 1 %>
     <a
       class="d-none d-md-flex h-100 justify-content-center align-items-center product-carousel-control position-absolute product-carousel-control--previous"
       href="#<%= id %>"
       role="button"
-      data-slide="prev"
-    >
+      data-slide="prev">
       <span class="d-flex justify-content-center align-items-center product-carousel-control-rounded" aria-hidden="true">
         <%= icon(name: 'arrow-right',
                 classes: 'spree-icon-arrow spree-icon-arrow-left',
@@ -26,8 +24,7 @@
       class="d-none d-md-flex h-100 justify-content-center align-items-center product-carousel-control position-absolute product-carousel-control--next"
       href="#<%= id %>"
       role="button"
-      data-slide="next"
-    >
+      data-slide="next">
       <span class="d-flex justify-content-center align-items-center product-carousel-control-rounded" aria-hidden="true">
         <%= icon(name: 'arrow-right',
                 classes: 'spree-icon-arrow spree-icon-arrow-right',
@@ -46,18 +43,17 @@
     <% images.each_with_index do |image, imageIndex| %>
       <div
         class="carousel-item product-carousel-item<%= ' active' if imageIndex == 0 %>"
-        data-variant-is-master="<%= image.viewable_id == @product.master_id %>"
-        data-variant-id="<%= image.viewable_id %>"
-      >
+        data-variant-is-master="<%= image.viewable_id == @product.master.id %>"
+        data-variant-id="<%= image.viewable_id %>">
         <div class="product-carousel-item-squared <%= 'product-carousel-item-squared-only' if images.length == 1 %>">
           <% image_attrs = {
-            src: main_app.url_for(image.url(zoomed ? :zoomed : :large)),
+            src: main_app.cdn_image_url(image.url(zoomed ? :zoomed : :large)),
             alt: image.alt || @product.name,
             class: "d-block w-100",
             width: zoomed ? 650 : 475,
             height: zoomed ? 870 : 594
           } %>
-          <%= imageIndex.zero? ? image_tag(image_attrs.delete(:src), image_attrs) : lazy_image(image_attrs) %>
+          <%= imageIndex.zero? ? image_tag(image_attrs.delete(:src), image_attrs) : lazy_image(**image_attrs) %>
         </div>
       </div>
     <% end %>
@@ -68,10 +64,9 @@
       <li
         data-target="#<%= id %>"
         data-slide-to="<%= imageIndex %>"
-        class="product-carousel-indicators-indicator product-carousel-indicators-indicator--visible<%= ' active' if imageIndex == 0 %>"
-      >
+        class="product-carousel-indicators-indicator product-carousel-indicators-indicator--visible<%= ' active' if imageIndex == 0 %>">
         <%= lazy_image(
-          src: main_app.url_for(image.url(:pdp_thumbnail)),
+          src: main_app.cdn_image_url(image.url(:pdp_thumbnail)),
           class: 'd-block w-100',
           alt: image.alt || @product.name,
           width: image.style(:pdp_thumbnail)[:width],

data/app/views/spree/shared/carousel/_thumbnails.html.erb

@@ -6,29 +6,25 @@
   data-product-carousel-per-page="<%= per_page %>"
   data-product-carousel-is-slave="true"
   data-interval="false"
-  data-hook
->
+  data-hook>
   <div class="carousel-inner order-1 h-100">
   <% images.each_with_index do |image, image_index| %>
       <% if image_index % per_page == 0 %>
-        <div class="carousel-item product-thumbnails-carousel-item<%= ' active' if image_index == 0 %>">
+        <div class="carousel-item product-thumbnails-carousel-item h-100<%= ' active' if image_index == 0 %>">
         <div class="h-100 d-flex flex-column justify-content-center">
-            <div class="product-thumbnails-carousel-item-content py-1">
+            <div class="product-thumbnails-carousel-item-content py-1 h-100">
       <% end %>
               <div
                 class="product-thumbnails-carousel-item-single product-thumbnails-carousel-item-single--visible"
                 data-product-carousel-to-slide="<%= image_index %>"
-                data-variant-is-master="<%= image.viewable_id == @product.master_id %>"
-                data-variant-id="<%= image.viewable_id %>"
-              >
+                data-variant-is-master="<%= image.viewable_id == @product.master.id %>"
+                data-variant-id="<%= image.viewable_id %>">
                 <%= lazy_image(
-                  src: main_app.url_for(image.url(:pdp_thumbnail)),
+                  src: main_app.cdn_image_url(image.url(:pdp_thumbnail)),
                   class: 'd-block w-100',
                   alt: image.alt || @product.name,
                   width: 57,
-                  height: 70
-                )
-                %>
+                  height: 70) %>
               </div>
       <% if (image_index + 1) % per_page == 0 || (image_index + 1) == images.length %>
             </div>
@@ -37,32 +33,32 @@
       <% end %>
     <% end %>
   </div>
-  <a
-    class="d-none d-sm-flex order-0 justify-content-center w-100 product-thumbnails-carousel-previous"
-    href="#<%= id %>"
-    role="button"
-    data-slide="prev"
-  >
-    <span aria-hidden="true">
-      <%= icon(name: 'arrow-right',
-               classes: 'spree-icon-arrow spree-icon-arrow-up',
-               width: 16,
-               height: 16) %>
-    </span>
-    <span class="sr-only"><%= Spree.t(:previous) %></span>
-  </a>
-  <a
-    class="d-none d-sm-flex order-2 justify-content-center w-100 product-thumbnails-carousel-next"
-    href="#<%= id %>"
-    role="button"
-    data-slide="next"
-  >
-    <span aria-hidden="true">
-      <%= icon(name: 'arrow-right',
-               classes: 'spree-icon-arrow spree-icon-arrow-down',
-               width: 16,
-               height: 16) %>
-    </span>
-    <span class="sr-only"><%= Spree.t(:next) %></span>
-  </a>
+  <% if images.length > per_page %>
+    <a
+      class="d-none d-sm-flex order-0 justify-content-center w-100 product-thumbnails-carousel-previous"
+      href="#<%= id %>"
+      role="button"
+      data-slide="prev">
+      <span aria-hidden="true">
+        <%= icon(name: 'arrow-right',
+                classes: 'spree-icon-arrow spree-icon-arrow-up',
+                width: 16,
+                height: 16) %>
+      </span>
+      <span class="sr-only"><%= Spree.t(:previous) %></span>
+    </a>
+    <a
+      class="d-none d-sm-flex order-2 justify-content-center w-100 product-thumbnails-carousel-next"
+      href="#<%= id %>"
+      role="button"
+      data-slide="next">
+      <span aria-hidden="true">
+        <%= icon(name: 'arrow-right',
+                classes: 'spree-icon-arrow spree-icon-arrow-down',
+                width: 16,
+                height: 16) %>
+      </span>
+      <span class="sr-only"><%= Spree.t(:next) %></span>
+    </a>
+  <% end %>
 </div>

data/app/views/spree/shared/cms/pages/_edit_mode.html.erb

@@ -0,0 +1,13 @@
+<% if edit_mode %>
+  <div class="fixed-bottom text-center">
+    <div class="row">
+      <div id="draftNotice" class="col-12 d-flex w-100 p-4 justify-content-center align-items-center bg-dark">
+        <span class="text-white">
+          <h5 class="mb-0">
+            <%= Spree.t('draft_mode') %>
+          </h5>
+        </span>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/spree/shared/cms/sections/_featured_article.html.erb

@@ -0,0 +1,27 @@
+<% if section.gutters? %>
+  <% section_padding = 'px-3' %>
+<% else %>
+  <% section_padding = 'px-0' %>
+<% end %>
+
+<div class="col-12 <%= section_padding %>">
+  <div class="text-center homepage-fashion-trends-box">
+    <% if section.title.present? %>
+      <div class="homepage-fashion-trends-box-summer-text mb-1"><%= section.title %></div>
+    <% end %>
+
+    <% if section.subtitle.present? %>
+      <div class="homepage-fashion-trends-box-fashion-trends-text mb-2"><%= section.subtitle %></div>
+    <% end %>
+
+    <div class="homepage-fashion-trends-box-description-text text-center mb-3">
+      <div class="mb-3">
+        <%= raw section.rte_content %>
+      </div>
+
+      <% if section.button_text.present? && section.link.present? %>
+        <%= link_to section.button_text, spree_localized_link(section), class: 'btn text-center spree-btn btn-outline-primary w-75' %>
+      <% end %>
+    </div>
+  </div>
+</div>