spree_frontend 4.2.0.rc1 → 4.2.0

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

@@ -25,7 +25,7 @@
       </div>
     <% end %>
 
-    <%= f.submit Spree.t(:log_in), class: 'btn btn-primary btn-block spree-btn mt-2' %>
+    <%= f.submit Spree.t(:login), class: 'btn btn-primary btn-block spree-btn mt-2' %>
   <% end %>
 
   <% if spree.respond_to?(:recover_password_path) %>

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

@@ -48,7 +48,7 @@
                 </div>
               </div>
             </div>
-          <%end %>
+          <% end %>
         </li>
       <% end %>
     </ul>

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

@@ -0,0 +1,37 @@
+<% if (defined?(should_render_store_chooser?) && should_render_store_chooser?) || (defined?(should_render_internationalization_dropdown?) && should_render_internationalization_dropdown?) %>
+  <% link_title = "#{Spree.t(:choose_currency)} / #{Spree.t('i18n.language')}" %>
+
+  <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+    <span class="w-75"><%= link_title %></span>
+    <a class="w-25 text-right mobile-navigation-category-link" data-category="internationalization" href="#" aria-label="<%= link_title %>">
+      <%= icon(name: 'arrow-right',
+              classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-right',
+              width: 16,
+              height: 16) %>
+      <%= icon(name: 'arrow-right',
+              classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-right',
+              width: 14,
+              height: 27) %>
+    </a>
+
+    <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="internationalization">
+      <li class="text-center font-weight-bold mobile-navigation-sublist-header">
+        <%= Spree.t(:internationalization) %>
+      </li>
+      <% if (defined?(should_render_store_chooser?) && should_render_store_chooser?) %>
+        <% stores.each do |store| %>
+          <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+            <%= country_flag_icon(store_country_iso(store)) %>
+            <%= store_link(store, class: "dropdown-item text-uppercase d-flex #{'font-weight-bold' if current_store == store}") %>
+          </li>
+        <% end %>
+      <% else %>
+        <div class="mt-4 pt-4">
+          <%= render 'spree/shared/locale_dropdown' %>
+          <div class="dropdown-divider mt-4 pb-4"></div>
+          <%= render 'spree/shared/currency_dropdown' %>
+        </div>
+      <% end %>
+    </ul>
+  </li>
+<% end %>

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

@@ -7,11 +7,8 @@
                 width: 26,
                 height: 26) %>
       </button>
-      <figure class="logo header-spree-fluid-logo" data-hook>
-        <%= logo %>
-      </figure>
       <div id="top-nav-bar-mobile" class="m-0 p-0 header-spree-fluid-secondary-navigation" data-hook>
-        <button id="mobile-navigation-close-button" aria-label="<%= Spree.t('nav_bar.close_menu') %>">
+        <button id="mobile-navigation-close-button" aria-label="<%= Spree.t(:close) %>">
           <%= icon(name: 'close',
                   classes: 'd-inline',
                   width: 26,
@@ -25,7 +22,7 @@
         <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
           <%= link_to root[:title], root[:url], class: 'w-75' %>
           <% if root[:items].present? %>
-            <a class="w-25 text-right mobile-navigation-category-link" data-category="<%= root[:title].parameterize %>" href="#" aria-label="<%= Spree.t('go_to_category')%>">
+            <a class="w-25 text-right mobile-navigation-category-link" data-category="<%= root[:title].parameterize %>" href="#" aria-label="<%= Spree.t('go_to_category') %>">
               <%= icon(name: 'arrow-right',
                        classes: 'd-inline spree-icon-arrow spree-icon-arrow-right',
                        width: 14,
@@ -44,7 +41,7 @@
           <% end %>
         </li>
       <% end %>
-      <%= render partial: 'spree/shared/mobile_change_store' %>
+      <%= render partial: 'spree/shared/mobile_internationalization_options' %>
     </ul>
   </div>
 <% end %>

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

@@ -1,11 +1,11 @@
 <ul id="nav-bar" class="nav align-items-center d-flex flex-nowrap justify-content-end navbar-right">
   <li>
     <div class="navbar-right-search-menu">
-      <button type="button" class="navbar-right-dropdown-toggle search-icons" aria-label="<%= Spree.t('nav_bar.show_search')%>">
+      <button type="button" class="navbar-right-dropdown-toggle search-icons" aria-label="<%= Spree.t('nav_bar.show_search') %>">
         <%= icon(name: 'magnifying-glass',
                  classes: 'd-inline-block',
                  width: 36,
-                 height: 36)  %>
+                 height: 36) %>
       </button>
 
       <div id="search-dropdown" class="p-0 px-md-4 py-md-2 w-100 shadow navbar-right-search-menu-dropdown hide-on-esc">
@@ -16,11 +16,11 @@
   <% if defined?(spree.account_link_path) %>
     <li>
       <div class="dropdown navbar-right-dropdown">
-        <button id="account-button" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle account-icon" aria-label="<%= Spree.t('nav_bar.show_user_menu')%>">
+        <button id="account-button" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle account-icon" aria-label="<%= Spree.t('nav_bar.show_user_menu') %>">
           <%= icon(name: 'person',
                   classes: 'd-inline-block',
                   width: 41.4,
-                  height: 36)  %>
+                  height: 36) %>
         </button>
 
         <div id="link-to-account" class="dropdown-menu dropdown-menu-right text-right">
@@ -31,5 +31,5 @@
   <li id="link-to-cart">
     <%= render 'spree/shared/cart', class: 'd-inline-block cart-icon', size: 36, item_count: 0 %>
   </li>
-  <%= render partial: 'spree/shared/change_store' %>
+  <%= render partial: 'spree/shared/internationalization_options' %>
 </ul>

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

@@ -1,5 +1,5 @@
 <div class="p-0 justify-content-around mx-auto no-product-available">
-  <div id= "no-product-available-close-button" class="d-flex no-product-available-icon">
+  <div id="no-product-available-close-button" class="d-flex no-product-available-icon">
     <%= inline_svg_tag "close.svg", class: "w-100 h-100" %>
   </div>
 

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

@@ -6,7 +6,7 @@
 
     <% option_value_param = (selected_option_values.include?(id) ? selected_option_values - [id] : selected_option_values + [id]).join(',') %>
     <%= link_to permitted_params.merge(ot_downcase_name => option_value_param, menu_open: 1), data: { params: permitted_params.merge(ot_downcase_name => option_value_param, menu_open: 1), id: id, filter_name: ot_downcase_name, multiselect: true } do %>
-      <% if Spree::OptionType.color&.name&.downcase == ot_downcase_name %>
+      <% if color_option_type_name.present? && color_option_type_name.downcase == ot_downcase_name %>
 
         <span class="d-inline-block mb-1">
                         <%= render partial: 'spree/shared/color_select', locals: {

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.name.titleize}" %>
+                    </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.complete? %>
+      <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/_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>