spree_frontend 4.2.0.beta → 4.2.0.rc5

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

@@ -20,8 +20,7 @@
            data-non-shipment-tax='<%= adjustments.reject{ |adj| adj.adjustable_type== 'Spree::Shipment'}.sum(&:amount) %>'
            thousands-separator='<%= tax_total.thousands_separator %>'
            decimal-mark='<%= tax_total.decimal_mark %>'
-           precision='<%= Money::Currency.find(order.currency).exponent %>'
-      >
+           precision='<%= Money::Currency.find(order.currency).exponent %>'>
         <%= tax_total.to_html %>
       </div>
     <% end %>
@@ -29,7 +28,7 @@
     <% if order.passed_checkout_step?("address") && order.shipments.any? %>
       <% if order.has_free_shipping? %>
         <div class="d-table-cell"><%= Spree.t(:shipping) %>:</div>
-        <div class="d-table-cell text-right"><%= Spree.t(:free) %></div>
+        <div class="d-table-cell text-right" data-hook="is-free-shipping"><%= Spree.t(:free) %></div>
       <% else %>
         <div class="d-table-cell"><%= Spree.t(:shipping) %>:</div>
         <% shipping_total = Spree::Money.new(order.shipments.to_a.sum(&:cost), currency: order.currency) %>
@@ -38,8 +37,7 @@
             data-currency='<%= Money::Currency.find(order.currency).symbol %>'
             thousands-separator='<%= shipping_total.thousands_separator %>'
             decimal-mark='<%= shipping_total.decimal_mark %>'
-            precision='<%= Money::Currency.find(order.currency).exponent %>'
-        >
+            precision='<%= Money::Currency.find(order.currency).exponent %>'>
           <%= shipping_total.to_html %>
         </div>
 

data/app/views/spree/checkout/payment/_gateway.html.erb

@@ -11,7 +11,7 @@
       <% options_hash = Rails.env.production? ? {autocomplete: 'off'} : {} %>
       <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(id: 'card_number', class: 'spree-flat-input cardNumber', size: 19, maxlength: 19, autocomplete: "off", placeholder: Spree.t(:card_number)) %>
       <span id="card_type" style="display:none;">
-        ( <span id="looks_like" ><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
+        ( <span id="looks_like"><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
           <span id="unrecognized"><%= Spree.t(:unrecognized_card_type) %></span>
         )
       </span>

data/app/views/spree/home/index.html.erb

@@ -4,14 +4,14 @@
   <img class="lazyload hero-image position-absolute"
     data-src="<%= asset_path('homepage/main_banner.jpg') %>"
     data-srcset="<%= image_source_set('homepage/main_banner') %>"
-    alt="<%= Spree.t('homepage.summer_collection')%>" />
+    alt="Summer Collection">
 
   <div class="hero-content">
     <div class="homepage-hero-image-text mb-2 mx-auto pb-3 pb-md-4">
-      <%= Spree.t('homepage.summer_collection') %>
+      Summer Collection
     </div>
     <div>
-      <%= link_to Spree.t('homepage.shop_now'), spree.products_path, class: 'btn btn-primary spree-btn px-5' %>
+      <%= link_to 'SHOP NOW', spree.products_path, class: 'btn btn-primary spree-btn px-5' %>
     </div>
   </div>
 </div>
@@ -24,10 +24,10 @@
         <img class="w-100 lazyload"
           data-src="<%= asset_path('homepage/category_banner_upper.jpg') %>"
           data-srcset="<%= image_source_set('homepage/category_banner_upper') %>"
-          alt="<%= Spree.t('homepage.men')%>" />
+          alt="Men">
 
         <div class="homepage-taxon-box-text">
-          <h3><%= Spree.t('homepage.men') %></h3>
+          <h3>Men</h3>
         </div>
       <% end %>
 
@@ -35,10 +35,10 @@
         <img class="w-100 lazyload"
           data-src="<%= asset_path('homepage/category_banner_lower.jpg') %>"
           data-srcset="<%= image_source_set('homepage/category_banner_lower') %>"
-          alt="<%= Spree.t('homepage.sportswear')%>" />
+          alt="Sportswear">
 
-        <div class="homepage-taxon-box-text" role="img" aria-label="<%= Spree.t('homepage.sportswear') %>">
-          <h3><%= Spree.t('homepage.sportswear') %></h3>
+        <div class="homepage-taxon-box-text" role="img" aria-label="Sportswear">
+          <h3>Sportswear</h3>
         </div>
       <% end %>
 
@@ -50,10 +50,10 @@
         <img class="w-100 lazyload"
           data-src="<%= asset_path('homepage/big_category_banner.jpg') %>"
           data-srcset="<%= image_source_set('homepage/big_category_banner') %>"
-          alt="<%= Spree.t('homepage.women')%>" />
+          alt="Women">
 
         <div class="homepage-taxon-box-text">
-          <h3><%= Spree.t('homepage.women') %></h3>
+          <h3>Women</h3>
         </div>
       <% end %>
 
@@ -65,16 +65,15 @@
 
 <div class="homepage-fashion-trends-box mb-3">
   <div class="text-center">
-    <div class="homepage-fashion-trends-box-summer-text mb-1"><%= Spree.t('homepage.summer_2020') %></div>
-    <div class="homepage-fashion-trends-box-fashion-trends-text mb-2"><%= Spree.t('homepage.fashion_trends') %></div>
+    <div class="homepage-fashion-trends-box-summer-text mb-1">Summer 2021</div>
+    <div class="homepage-fashion-trends-box-fashion-trends-text mb-2">FASHION TRENDS</div>
     <div class="homepage-fashion-trends-box-description-text text-center mb-3">
-      <%= Spree.t('homepage.fashion_trends_note') %>
+      Want to rock this season’s hottest trend in style? These are the top fashion from Summer 2020 Fashion Weeks that are coming our way this season.
     </div>
-    <%= link_to Spree.t('homepage.read_more'), spree.nested_taxons_path('trending'), class: 'btn px-5 spree-btn btn-outline-primary' %>
+    <%= link_to 'READ MORE', spree.nested_taxons_path('trending'), class: 'btn px-5 spree-btn btn-outline-primary' %>
   </div>
 </div>
 
-
 <div data-product-carousel data-product-carousel-taxon-id='trending' class="mb-3"></div>
 
 <div class="container">
@@ -85,14 +84,14 @@
           <img class="w-100 lazyload"
             data-src="<%= asset_path('homepage/promo_banner_left.jpg') %>"
             data-srcset="<%= image_source_set('homepage/promo_banner_left') %>"
-            alt="<%= Spree.t('homepage.new_collection')%>" />
+            alt="NEW COLLECTION">
 
-          <div class="homepage-bottom-box-inner" role="img" aria-label="<%= Spree.t('homepage.new_collection') %>">
+          <div class="homepage-bottom-box-inner" role="img" aria-label="New Collection">
             <div class="homepage-bottom-box-inner-small-text">
-              <%= Spree.t('homepage.new_collection') %>
+              New Collection
             </div>
             <div class="homepage-bottom-box-inner-big-text">
-              <%= Spree.t('homepage.streetstyle') %>
+              Streetstyle
             </div>
           </div>
         </div>
@@ -105,14 +104,14 @@
           <img class="w-100 lazyload"
             data-src="<%= asset_path('homepage/promo_banner_right.jpg') %>"
             data-srcset="<%= image_source_set('homepage/promo_banner_right') %>"
-            alt="<%= Spree.t('homepage.summer_sale')%>" />
+            alt="Summer Sale">
 
           <div class="homepage-bottom-box-inner">
             <div class="homepage-bottom-box-inner-small-text">
-              <%= Spree.t('homepage.summer_sale') %>
+              Summer Sale
             </div>
             <div class="homepage-bottom-box-inner-big-text">
-              <%= Spree.t('homepage.up_to_60') %>
+              Up To 60%
             </div>
           </div>
         </div>

data/app/views/spree/orders/_coupon_code.html.erb

@@ -12,11 +12,10 @@
     <div class="input-group">
       <%= order_form.text_field :applied_coupon_code, name: '', size: '30', class: 'form-control border-right-0 disabled',
         value: Spree.t(:promotion_label, name: promotion.name),
-        data: { code: promotion.code }
-      %>
+        data: { code: promotion.code } %>
       <div class="input-group-append">
         <%= button_tag name: '', id: 'shopping-cart-remove-coupon-code-button', class: 'btn border-left-0 remove' do %>
-          <%= icon(name: 'close', width: 15, height: 14)  %>
+          <%= icon(name: 'close', width: 15, height: 14) %>
         <% end %>
       </div>
     </div>

data/app/views/spree/orders/_line_item.html.erb

@@ -9,7 +9,7 @@
       <h2 class="item-title"><%= link_to line_item.name, spree.product_path(variant.product) %></h2>
       <% if line_item.insufficient_stock? %>
         <span class="out-of-stock">
-          <%= Spree.t(:out_of_stock) %>&nbsp;&nbsp;<br />
+          <%= Spree.t(:out_of_stock) %>&nbsp;&nbsp;<br>
         </span>
       <% end %>
       <ul class="item-details-list" data-hook="line_item_description">

data/app/views/spree/orders/_line_item_data.html.erb

@@ -22,10 +22,10 @@
 <% end %>
 
 <div class="shopping-cart-item-delete <%= additional_classes %>" data-hook="cart_item_delete">
-  <%= link_to '#', class: 'delete', id: "delete_#{dom_id(line_item)}", data: { turbolinks: false }, aria: { label: Spree.t('cart_page.remove_from_cart') } do %>
+  <%= link_to '#', class: 'delete', id: "delete_#{dom_id(line_item)}", data: { turbolinks: false, id: dom_id(line_item), variant_sku: line_item.sku, variant_name: line_item.name, variant_price: line_item.price, variant_options: line_item.options_text }, aria: { label: Spree.t('cart_page.remove_from_cart') } do %>
     <%= icon(name: 'garbage',
              classes: 'shopping-cart-item-delete-icon',
              width: 18.9,
-             height: 17)  %>
+             height: 17) %>
   <% end %>
 </div>

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

@@ -12,7 +12,7 @@
           <%= icon(name: 'empty-cart',
                    classes: 'shopping-cart-empty-image',
                    width: 83,
-                   height: 83)  %>
+                   height: 83) %>
 
           <p class="text-center shopping-cart-empty-info"><%= Spree.t('cart_page.empty_info').html_safe %></p>
         </div>
@@ -57,8 +57,7 @@
               <%= render 'coupon_code',
                 promotion: @order.valid_coupon_promotions.first,
                 order_form: order_form,
-                classes: ''
-              %>
+                classes: '' %>
             <% end %>
 
             <div class="text-right shopping-cart-total d-lg-none">

data/app/views/spree/orders/show.html.erb

@@ -15,75 +15,5 @@
   <p class="order-show-number text-uppercase w-100 text-center">
     <%= accurate_title %> / <%= pretty_date(@order.completed_at) %>
   </p>
-  <dl class="w-100 d-lg-flex justify-content-lg-between">
-    <div>
-      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:shipping_address) %></dt>
-      <dd class="text-center text-lg-left">
-        <%= render 'spree/shared/address', address: @order.ship_address %>
-      </dd>
-    </div>
-    <div>
-      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:billing_address) %></dt>
-      <dd class="text-center text-lg-left">
-        <%= render 'spree/shared/address', address: @order.bill_address %>
-      </dd>
-    </div>
-    <div>
-      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:shipping) %></dt>
-      <% @order.shipments.valid.each do |shipment| %>
-        <dd class="text-center text-lg-left">
-          <%= shipment.shipping_method.name %>
-          <%= link_to_tracking(shipment) if shipment.shipped? %>
-        </dd>
-      <% end %>
-    </div>
-    <div>
-      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:payment) %></dt>
-      <dd class="text-center text-lg-left">
-        <%= render collection: @order.payments.valid, partial: 'spree/shared/payment' %>
-      </dd>
-    </div>
-  </dl>
-  <hr class="w-100 mt-0 mb-4 d-sm-none" />
-  <div class="order-show-line-items d-flex flex-column align-items-center">
-    <% @order.line_items.each do |item| %>
-      <div class="order-show-line-items-line-item d-flex w-100">
-        <%= link_to product_image(item.variant), item.product %>
-        <div class="order-show-line-items-line-item-desc w-100">
-          <span class="order-show-line-items-line-item-desc-name">
-            <%= item.name %>
-          </span>
-          <span class="order-show-line-items-line-item-desc-subtitle text-break text-uppercase">
-            <ul class="list-unstyled mb-0">
-              <% item.variant.option_values.sort { |ov| ov.option_type.position }.each do |ov| %>
-                <li><%= "#{ov.option_type.presentation}: #{ov.name.titleize}" %></li>
-              <% end %>
-            </ul>
-          </span>
-          <div class="order-show-line-items-line-item-desc-price">
-            <div class="order-show-line-items-line-item-desc-price-attr-name d-inline d-lg-block">
-              <span><%= Spree.t(:price) %></span>
-            </div>
-            <span class="font-weight-bold"><%= item.single_money.to_html %></span>
-          </div>
-          <div class="order-show-line-items-line-item-desc-quantity">
-            <div class="order-show-line-items-line-item-desc-quantity-attr-name d-inline d-lg-block">
-              <span><%= Spree.t(:quantity) %></span>
-            </div>
-            <span class="order-show-line-items-line-item-desc-quantity-val d-lg-block"><%= item.quantity %></span>
-          </div>
-          <div class="order-show-line-items-line-item-desc-total">
-            <div class="order-show-line-items-line-item-desc-total-attr-name d-inline d-lg-block">
-              <span><%= Spree.t(:total) %></span>
-            </div>
-            <span class="font-weight-bold d-lg-block"><%= item.display_total.to_s %></span>
-          </div>
-        </div>
-      </div>
-    <% end %>
-  </div>
-  <hr class="w-100 mt-4 mb-0 d-sm-none" />
-  <div id="checkout-summary" class="w-100" data-hook="checkout_summary_box">
-    <%= render partial: 'spree/checkout/summary', locals: { order: @order } %>
-  </div>
+  <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
 </div>

data/app/views/spree/products/_cart_form.html.erb

@@ -16,7 +16,6 @@
 
 <% is_product_available_in_currency = product_available_in_currency? %>
 <% default_variant = default_variant(@variants, @product) %>
-<% should_display_compare_at_price = default_variant.compare_at_price.present? && default_variant.compare_at_price > default_variant.price %>
 
 <%= form_for :order, html: {
     id: 'add-to-cart-form',
@@ -28,11 +27,9 @@
   <div id="inside-product-cart-form" data-hook="inside_product_cart_form">
     <% if is_product_available_in_currency %>
       <div id="product-price" class="mb-2 text-center text-md-left add-to-cart-form-price" data-hook="product_price">
-        <span class="compare-at-price">
-          <% if should_display_compare_at_price %>
-            <span class="mr-3"><%= display_compare_at_price(default_variant) %></span>
-          <% end %>
-        </span>
+        <% if should_display_compare_at_price?(default_variant) %>
+          <span class="compare-at-price mr-3"><%= display_compare_at_price(default_variant) %></span>
+        <% end %>
         <span class="price selling" content="<%= @product_price.to_d %>">
           <%= display_price(default_variant) %>
         </span>
@@ -58,7 +55,7 @@
       <ul id="product-variants" class="product-variants">
         <% used_variants_options(@variants, @product).each_with_index do |option_type, index| %>
           <li>
-            <% if Spree::OptionType.color&.name == option_type[:name] %>
+            <% if color_option_type_name.present? && color_option_type_name == option_type[:name] %>
               <%= render "color_option_type", option_type: option_type, index: index %>
             <% else %>
               <%= render "option_type", option_type: option_type, index: index %>

data/app/views/spree/products/_color_option_type.html.erb

@@ -22,8 +22,7 @@
                 "presentation" => option_value[:presentation],
                 "variant-id" => option_value[:variant_id],
                 "is-color" => true
-              }
-            %>
+              } %>
 
             <%= render partial: "spree/shared/color_select", locals: {
               color: option_value[:presentation],

data/app/views/spree/products/_filters_desktop.html.erb

@@ -24,8 +24,7 @@
                 params_ot_downcase_name: params[ot_downcase_name],
                 option_type: option_type,
                 permitted_params: permitted_params,
-                ot_downcase_name: ot_downcase_name
-              %>
+                ot_downcase_name: ot_downcase_name %>
             </div>
           </div>
         </div>

data/app/views/spree/products/_gallery.html.erb

@@ -2,16 +2,15 @@
   <% if @product_images.size > 0 %>
     <div
       class="w-100 d-flex align-self-start justify-content-between product-details-images"
-      data-hook="product_left_part_wrap"
-    >
+      data-hook="product_left_part_wrap">
+
       <div class="d-none d-md-block product-details-thumbnails" data-hook="product_thumbnails">
         <%= render 'spree/shared/carousel/thumbnails',
                   images: @product_images,
                   group_id: 'main-product-carousel',
                   id: 'productThumbnailsCarousel',
                   trigger_id: 'productCarousel',
-                  per_page: 5
-        %>
+                  per_page: 5 %>
       </div>
       <div class="product-details-single" data-hook="product_images">
         <%= render 'spree/shared/carousel/single',
@@ -19,8 +18,7 @@
                   group_id: 'main-product-carousel',
                   id: 'productCarousel',
                   trigger_id: 'productCarousel',
-                  zoomed: false
-        %>
+                  zoomed: false %>
       </div>
     </div>
   <% end %>

data/app/views/spree/products/_gallery_modal.html.erb

@@ -1,5 +1,5 @@
 <% if @product_images.size > 0 %>
-  <div class="modal fade" id="picturesModal" tabindex="-1" role="dialog" >
+  <div class="modal fade" id="picturesModal" tabindex="-1" role="dialog">
     <div class="modal-dialog--zoom modal-dialog mw-100 vh-100 mt-0 mb-0" role="document">
       <div class="modal-content h-100">
         <div class="modal-body h-100">
@@ -23,8 +23,7 @@
                             group_id: 'main-product-modal-carousel',
                             id: 'productModalThumbnailsCarousel',
                             trigger_id: 'productCarousel',
-                            per_page: 4
-                %>
+                            per_page: 4 %>
               </div>
             <% end %>
             <div class="product-details-single">
@@ -33,8 +32,7 @@
                           group_id: 'main-product-modal-carousel',
                           id: 'productModalCarousel',
                           trigger_id: 'productCarousel',
-                          zoomed: true
-              %>
+                          zoomed: true %>
             </div>
           </div>
         </div>

data/app/views/spree/products/_option_type.html.erb

@@ -15,8 +15,7 @@
               "option-type-index" => index,
               "presentation" => option_value[:presentation],
               "variant-id" => option_value[:variant_id]
-            }
-          %>
+            } %>
 
           <%= label_tag "variant_option_value_id_#{option_type[:id]}_#{option_value[:id]}",
             class: "m-1 select-label",

data/app/views/spree/products/_sort_mobile.html.erb

@@ -8,7 +8,7 @@
   <div class="plp-overlay-header-border"></div>
   <ul class="pt-1 plp-overlay-ul">
     <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by].blank? %>">
-      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: nil)) %>" >
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: nil)) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>
@@ -16,7 +16,7 @@
       </a>
     </li>
     <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'newest-first' %>">
-      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'newest-first')) %>" >
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'newest-first')) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>
@@ -24,7 +24,7 @@
       </a>
     </li>
     <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'price-high-to-low' %>">
-      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-high-to-low')) %>" >
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-high-to-low')) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>
@@ -32,7 +32,7 @@
       </a>
     </li>
     <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'price-low-to-high' %>">
-      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-low-to-high')) %>" >
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-low-to-high')) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>