_confirm.html.erb in spree_frontend-4.1.0.rc1

- old
+ new
@@ -1,18 +1,114 @@
-<div class="card" id="order_details" data-hook>
-  <div class="card-header">
-    <h3 class="card-title mb-0 h5"><%= Spree.t(:confirm) %></h3>
-  </div>
-  <div class="card-body">
-    <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
-  </div>
-</div>
-
-<div class="card text-right form-buttons mt-4" data-hook="buttons">
-  <div class="card-body">
-    <% if @order.using_store_credit? %>
-      <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
-    <% end %>
-    <%= submit_tag Spree.t(:place_order), class: 'btn btn-lg btn-success' %>
-    <script>Spree.disableSaveOnClick();</script>
+<div class="checkout-confirm" id="order_details" data-hook>
+  <p class="checkout-content-header">
+    <%= Spree.t(:summary).upcase %>
+  </p>
+  <div class='checkout-confirm-order-details d-flex flex-column flex-lg-wrap' id="order_summary" data-hook>
+    <div class="checkout-confirm-order-details-line-items d-flex flex-column align-items-center w-100 order-0 order-lg-1">
+      <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>
+        <% @order.line_items.each do |item| %>
+          <div class="checkout-confirm-order-details-line-items-line-item w-100 d-table-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">
+                <% if item.variant.images.length == 0 %>
+                  <%= link_to product_image(item.variant.product), item.variant.product %>
+                <% else %>
+                  <%= link_to image_tag(main_app.url_for(item.variant.images.first.url(:plp_and_carousel))), item.variant.product %>
+                <% end %>
+                <div class="d-flex flex-column mt-2 mt-lg-0">
+                  <div><%= item.name %></div>
+                  <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><%= "#{ov.option_type.presentation}: #{ov.name.titleize}" %></li>
+                    <% end %>
+                  </ul>
+                  <div class="d-lg-none">
+                    <div class="font-weight-bold"><%= item.single_money.to_html %></div>
+                  </div>
+                  <div class="d-lg-none">
+                    <span>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">
+              <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">
+              <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">
+              <div><%= item.display_total.to_s %></div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <div class="checkout-confirm-delivery-informations text-left mt-3 order-1 order-lg-0">
+      <div class="d-lg-none checkout-confirm-delivery-informations-header">
+        <%= 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>
+          <dd><%= @order.shipments.first.shipping_method&.name if @order.shipments.any? %></dd>
+        </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' %>
+            <% end %>
+          </dd>
+        </div>
+      </dl>
+    </div>
+    <div id="checkout-summary" class="w-100 order-2" 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>
 </div>