From 1ea9c15bb8bae698e3ee61b70d9c026bba083e39 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 9 Jan 2023 18:17:03 +0100 Subject: [PATCH] Put total on the summary box on the right --- app/views/split_checkout/_summary.html.haml | 26 +++++++++-- .../css/darkswarm/split-checkout.scss | 46 +++++++++++++++++++ config/locales/en.yml | 1 + spec/system/consumer/split_checkout_spec.rb | 8 ++-- .../split_checkout_tax_not_incl_spec.rb | 3 +- 5 files changed, 74 insertions(+), 10 deletions(-) diff --git a/app/views/split_checkout/_summary.html.haml b/app/views/split_checkout/_summary.html.haml index 571e0a2079..49deca3c95 100644 --- a/app/views/split_checkout/_summary.html.haml +++ b/app/views/split_checkout/_summary.html.haml @@ -60,14 +60,32 @@ %div.checkout-substep %div.checkout-title = t("split_checkout.step3.order.title") + %a.summary-edit{href: main_app.cart_path} + = t("split_checkout.step3.order.edit") = render 'spree/orders/summary', order: @order, display_footer: false .summary-right - - if any_terms_required?(@order.distributor) - = render partial: "terms_and_conditions", locals: { f: f } + .summary-right-line.total + .summary-right-line-label= t :order_total_price + .summary-right-line-value#order_total= @order.display_total.to_html + + .summary-right-line + .summary-right-line-label= t :order_produce + .summary-right-line-value= display_checkout_subtotal(@order) + + - checkout_adjustments_for(@order, exclude: [:line_item]).reject{ |a| a.amount == 0 }.reverse_each do |adjustment| + .summary-right-line + .summary-right-line-label= adjustment.label + .summary-right-line-value= adjustment.display_amount.to_html + + - if @order.total_tax > 0 + .summary-right-line + .summary-right-line-label= t :order_includes_tax + .summary-right-line-value#tax-row= display_checkout_tax_total(@order) + .checkout-submit + - if any_terms_required?(@order.distributor) + = render partial: "terms_and_conditions", locals: { f: f } = f.submit t("split_checkout.step3.submit"), name: "confirm_order", class: "button primary", disabled: @terms_and_conditions_accepted == false || @platform_tos_accepted == false - %a.button.cancel{href: main_app.checkout_step_path(:payment)} - = t("split_checkout.step3.cancel") diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index 2f4459cb00..7727779bc1 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -263,6 +263,10 @@ .checkout-substep { font-size: 0.875rem; margin-top: 1rem; + + &:first-child { + margin-top: 20px; + } .two-columns { display: grid; @@ -328,7 +332,49 @@ border-right: 1px solid #DDD; } } +} +.summary-right { + padding-top: 40px; + + .checkout-submit { + margin-top: 40px; + + .button.primary { + background-color: $clr-turquoise; + &:hover { + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + } + } + } +} + +.summary-right-line { + display: flex; + justify-content: space-between; + margin-bottom: 10px; + + .summary-right-line-label { + font-size: 0.875rem; + } + + .summary-right-line-value { + font-size: 0.875rem; + text-align: right; + } + + &.total { + margin-bottom: 20px; + @include headingFont; + + .summary-right-line-label { + font-weight: bold; + font-size: 1.06rem; + } + .summary-right-line-value { + font-size: 1.06rem; + } + } } #line-items { diff --git a/config/locales/en.yml b/config/locales/en.yml index 369200d5cb..5e19e4f547 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1984,6 +1984,7 @@ en: instructions: Instructions order: title: Order details + edit: Edit terms_and_conditions: message_html: "I agree to the seller's %{terms_and_conditions_link}." link_text: "Terms and Conditions" diff --git a/spec/system/consumer/split_checkout_spec.rb b/spec/system/consumer/split_checkout_spec.rb index 86dde4650a..88e3caca77 100644 --- a/spec/system/consumer/split_checkout_spec.rb +++ b/spec/system/consumer/split_checkout_spec.rb @@ -455,7 +455,7 @@ describe "As a consumer, I want to checkout my order", js: true do shared_examples "displays the shipping fee" do |checkout_page| it "on the #{checkout_page} page" do - within "#line-items" do + within ".summary-right" do expect(page).to have_content("Shipping #{with_currency(4.56)}") end if checkout_page.eql?("order confirmation") @@ -588,7 +588,7 @@ describe "As a consumer, I want to checkout my order", js: true do shared_examples "displays the transaction fee" do |checkout_page| it "on the #{checkout_page} page" do - within "#line-items" do + within ".summary-right" do expect(page).to have_content("Transaction fee #{with_currency(1.23)}") end if checkout_page.eql?("order confirmation") @@ -760,10 +760,10 @@ describe "As a consumer, I want to checkout my order", js: true do end describe "navigation available" do - it "redirect to Payment method step by clicking on 'Back to payment method' button" do + it "redirect to Payment method step by clicking on 'Payment method' link" do visit checkout_step_path(:summary) - click_on "Back to Payment method" + click_link "Payment method" expect(page).to have_content "You can review and confirm your order in the next step which includes the final costs." end diff --git a/spec/system/consumer/split_checkout_tax_not_incl_spec.rb b/spec/system/consumer/split_checkout_tax_not_incl_spec.rb index 340063c0fd..435d02d658 100644 --- a/spec/system/consumer/split_checkout_tax_not_incl_spec.rb +++ b/spec/system/consumer/split_checkout_tax_not_incl_spec.rb @@ -216,8 +216,7 @@ describe "As a consumer, I want to see adjustment breakdown" do expect(page).to have_selector('#order_total', text: with_currency(10.00)) # customer goes back from Summary to Details step, to change Delivery - click_on "Back to Payment method" - click_on "Back to Your details" + click_on "Your details" end it "should re-calculate the tax accordingly" do