spree_frontend 4.2.0.rc4 → 4.2.0.rc5

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

@@ -5,7 +5,7 @@
     <div class="col-12 mb-4">
       <div class="form-group checkout-content-inner-field has-float-label">
         <%= form.email_field :email, class: 'required spree-flat-input', required: true, placeholder: Spree.t(:email) %>
-        <%= form.label :email, class: 'text-uppercase'%>
+        <%= form.label :email, class: 'text-uppercase' %>
       </div>
     </div>
   </div>
@@ -51,7 +51,7 @@
         </div>
         <% end %>
         <%= form.fields_for address_name do |address_form| %>
-          <div class="inner checkout-content-inner" data-hook=<%="#{address_type}_inner" %>>
+          <div class="inner checkout-content-inner" data-hook='<%= "#{address_type}_inner" %>'>
             <%= render partial: 'spree/addresses/form', locals: {
               address_name: address_name,
               address_form: address_form,

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

@@ -2,37 +2,5 @@
   <p class="checkout-content-header">
     <%= Spree.t(:summary).upcase %>
   </p>
-  <div class='checkout-confirm-order-details' id="order_summary" data-hook>
-    <%= render partial: 'spree/checkout/delivery_informations', locals: { class_name: 'd-none d-lg-block' } %>
-    <div class="checkout-confirm-order-details-line-items d-flex flex-column align-items-center w-100">
-      <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 w-100">
-        <div class="d-none d-lg-table-row text-secondary text-uppercase">
-          <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>
-        <%= render partial: 'spree/shared/line_item', collection: @order.line_items, cached: true %>
-      </div>
-    </div>
-    <%= render partial: 'spree/checkout/delivery_informations', locals: { class_name: 'd-lg-none' } %>
-    <div id="checkout-summary" class="w-100" data-hook="checkout_summary_box">
-      <%= render partial: 'spree/checkout/summary', locals: { order: @order } %>
-      <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>
-    </div>
-  </div>
+  <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
 </div>

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

@@ -1,6 +1,6 @@
-<div id="<%= dom_id(card,'spree')%>" class="payment-sources-list-item">
+<div id="<%= dom_id(card,'spree') %>" class="payment-sources-list-item">
   <label class="form-check-label spree-radio-label">
-    <%= radio_button_tag "order[existing_card]", card.id, (card == @payment_sources.first), { class: "existing-cc-radio" }  %>
+    <%= radio_button_tag "order[existing_card]", card.id, (card == @payment_sources.first), { class: "existing-cc-radio" } %>
     <span class="spree-radio-label-custom-input"></span>
     <%= credit_card_icon(card.cc_type) %>
     <span>****<%= card.last_digits %>,&nbsp</span>

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

@@ -3,42 +3,49 @@
     <%= Spree.t(:delivery_information) %>
   </div>
   <dl>
-    <div>
-      <dt class="text-uppercase">
-        <%= Spree.t(:shipping_address) %>
-        <%= checkout_edit_link %>
-      </dt>
-      <dd><%= sanitize @order.ship_address.to_s, tags: %w[br] %></dd>
-    </div>
-    <div>
-      <dt class="text-uppercase">
-        <%= Spree.t(:billing_address) %>
-        <%= checkout_edit_link %>
-      </dt>
-      <dd><%= sanitize @order.bill_address.to_s, tags: %w[br] %></dd>
-    </div>
-    <div>
-      <dt class="text-uppercase">
-        <%= Spree.t(:shipping) %>
-        <%= checkout_edit_link('delivery') %>
-      </dt>
-      <% @order.shipments.pending.each do |shipment| %>
-        <dd><%= shipment.shipping_method&.name %> </dd>
-      <% end %>
-    </div>
-    <div>
-      <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.using_store_credit? %>
-          <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
+    <% 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 %>
-      </dd>
-    </div>
+        <%= render 'spree/shared/shipment_tracking', order: order if order.shipped? %>
+      </div>
+    <% end %>
+    <% 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.using_store_credit? %>
+            <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
+          <% end %>
+        </dd>
+      </div>
+    <% end %>
   </dl>
 </div>

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

@@ -26,6 +26,6 @@
     <%= 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,7 +27,7 @@
   <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">
-        <% if should_display_compare_at_price %>
+        <% 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 %>">
@@ -56,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 %>