From 52959a913f12fda05c01d6f9e6118a2a4baf40bc Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 9 Jan 2023 16:10:52 +0100 Subject: [PATCH 01/15] New step3: two columns, more condensed --- .../split_checkout/_already_ordered.html.haml | 2 +- app/views/split_checkout/_checkout.html.haml | 1 - app/views/split_checkout/_form.html.haml | 2 +- app/views/split_checkout/_summary.html.haml | 124 ++++++++---------- .../split_checkout/_summary_address.html.haml | 36 ----- .../_terms_and_conditions.html.haml | 2 +- .../css/darkswarm/split-checkout.scss | 104 ++++++++------- config/locales/en.yml | 17 +-- 8 files changed, 124 insertions(+), 164 deletions(-) diff --git a/app/views/split_checkout/_already_ordered.html.haml b/app/views/split_checkout/_already_ordered.html.haml index a5361811cf..f51a18f400 100644 --- a/app/views/split_checkout/_already_ordered.html.haml +++ b/app/views/split_checkout/_already_ordered.html.haml @@ -1,3 +1,3 @@ .already-ordered - .panel.medium-6 + .panel = t("split_checkout.already_ordered.message_html", cart: link_to(t('split_checkout.already_ordered.cart'), "#{main_app.cart_path}#bought-products")) diff --git a/app/views/split_checkout/_checkout.html.haml b/app/views/split_checkout/_checkout.html.haml index aa72ebc2f1..f26c8c4ca9 100644 --- a/app/views/split_checkout/_checkout.html.haml +++ b/app/views/split_checkout/_checkout.html.haml @@ -1,5 +1,4 @@ %checkout.row#checkout .small-12.medium-12.columns = render partial: "split_checkout/tabs" - = render partial: "split_checkout/already_ordered" if show_bought_items? && checkout_step?(:summary) = render partial: "split_checkout/form" diff --git a/app/views/split_checkout/_form.html.haml b/app/views/split_checkout/_form.html.haml index 49469f4e7d..0d32cac7c5 100644 --- a/app/views/split_checkout/_form.html.haml +++ b/app/views/split_checkout/_form.html.haml @@ -1,7 +1,7 @@ - content_for :injection_data do = inject_saved_credit_cards -%div.checkout-step +%div.checkout-step{"class": if checkout_step?(:summary) then "checkout-summary" end} = form_with url: checkout_update_path(checkout_step), model: @order, method: :put, data: { remote: "true" } do |form| diff --git a/app/views/split_checkout/_summary.html.haml b/app/views/split_checkout/_summary.html.haml index e2eb64022c..ae13d87367 100644 --- a/app/views/split_checkout/_summary.html.haml +++ b/app/views/split_checkout/_summary.html.haml @@ -1,68 +1,60 @@ -.medium-10 - %div.checkout-substep - %div.checkout-title - = t("split_checkout.step3.your_details.title") - - %div.summary - %span.summary-label - = t("split_checkout.step1.billing_address.first_name.label") - %span.summary-value - = @order.bill_address.firstname - - %div.summary - %span.summary-label - = t("split_checkout.step1.billing_address.last_name.label") - %span.summary-value - = @order.bill_address.lastname - - %div.summary - %span.summary-label - = t("split_checkout.step1.contact_information.email.label") - %span.summary-value - = @order.user ? @order.user.email : "Change me" - - %div.summary - %span.summary-label - = t("split_checkout.step1.contact_information.phone.label") - %span.summary-value - = @order.bill_address.phone - - %div.checkout-substep - %div.checkout-title - = t("split_checkout.step3.billing_address.title") - = render "summary_address", address: @order.bill_address - - %div.checkout-substep - %div.checkout-title - = t("split_checkout.step3.shipping_address.title") - = render "summary_address", address: @order.shipping_address - - %div.checkout-substep - %div.checkout-title - = t("split_checkout.step3.delivery_info.title") - - %div.summary - %span.summary-label - = t("split_checkout.step1.shipping_info.title") - %span.summary-value - = @order.shipping_method.name - %div.summary-description - = @order.shipping_method.description - +.summary-main + = render partial: "split_checkout/already_ordered" if show_bought_items? && checkout_step?(:summary) + .checkout-substep + .checkout-title + = t("split_checkout.step3.delivery_details.title") %a.summary-edit{href: main_app.checkout_step_path(:details)} - = t("split_checkout.step3.your_details.edit") + = t("split_checkout.step3.delivery_details.edit") - %div.checkout-substep - %div.checkout-title + .summary-subtitle + = @order.shipping_method.name + .two-columns + %div + .summary-subtitle + = t("split_checkout.step3.delivery_details.address") + %strong + = @order.bill_address.firstname + = @order.bill_address.lastname + %div + = @order.bill_address.phone + %div + = @order.user.email if @order.user + %br + %div + = @order.bill_address.address1 + - unless @order.bill_address.address2.blank? + %div + = @order.bill_address.address2 + %div + = @order.bill_address.city + %div + = @order.bill_address.state + %div + = @order.bill_address.zipcode + %div + = @order.bill_address.country + - if @order.shipping_method.description.present? + %div + .summary-subtitle + = t("split_checkout.step3.delivery_details.instructions") + %div + = @order.shipping_method.description + + %hr + + .checkout-substep + .checkout-title = t("split_checkout.step3.payment_method.title") - - %div.summary - %span.summary-value - = last_payment_method(@order)&.name - %div.summary-description - = last_payment_method(@order)&.description %a.summary-edit{href: main_app.checkout_step_path(:payment)} = t("split_checkout.step3.payment_method.edit") + .two-columns + %div + = last_payment_method(@order)&.name + %div + .summary-subtitle + = t("split_checkout.step3.payment_method.instructions") + %div + = last_payment_method(@order)&.description %div.checkout-substep @@ -71,11 +63,11 @@ = render 'spree/orders/summary', order: @order -.checkout-step3{"data-controller": "sticky", "data-sticky-target": "container"} + +.summary-right - if any_terms_required?(@order.distributor) = render partial: "terms_and_conditions", locals: { f: f } - .medium-6 - .checkout-submit - = 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") + .checkout-submit + = 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/views/split_checkout/_summary_address.html.haml b/app/views/split_checkout/_summary_address.html.haml index 4a717a899d..e69de29bb2 100644 --- a/app/views/split_checkout/_summary_address.html.haml +++ b/app/views/split_checkout/_summary_address.html.haml @@ -1,36 +0,0 @@ -%div.summary - %span.summary-label - = t("split_checkout.step1.address.address1.label") - %span.summary-value - = address.address1 - -- unless @order.bill_address.address2.blank? - %div.summary - %span.summary-label - = t("split_checkout.step1.address.address2.label") - %span.summary-value - = address.address2 - -%div.summary - %span.summary-label - = t("split_checkout.step1.address.city.label") - %span.summary-value - = address.city - -%div.summary - %span.summary-label - = t("split_checkout.step1.address.state_id.label") - %span.summary-value - = address.state - -%div.summary - %span.summary-label - = t("split_checkout.step1.address.zipcode.label") - %span.summary-value - = address.zipcode - -%div.summary - %span.summary-label - = t("split_checkout.step1.address.country_id.label") - %span.summary-value - = address.country diff --git a/app/views/split_checkout/_terms_and_conditions.html.haml b/app/views/split_checkout/_terms_and_conditions.html.haml index 6463df2053..d1d03fa582 100644 --- a/app/views/split_checkout/_terms_and_conditions.html.haml +++ b/app/views/split_checkout/_terms_and_conditions.html.haml @@ -1,4 +1,4 @@ -%div.checkout-substep.medium-6 +%div.checkout-substep %div.checkout-input - if platform_terms_required? && distributor_terms_required? = f.check_box :accept_terms, { name: "accept_terms", checked: all_terms_and_conditions_already_accepted? }, 1, nil diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index 16cb46c43a..2f4459cb00 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -62,8 +62,9 @@ } .already-ordered { + margin-left: 20px; + .panel { - margin-top: 3rem; background-color: $grey-250; border: 1px solid $tiny-blue; color: $grey-700; @@ -203,42 +204,7 @@ @include force-wrap; } - .checkout-step3 { - padding-left: 15px; - padding-right: 15px; - .checkout-submit { - margin-top: 0; - margin-bottom: 0; - padding-top: 2rem; - .button { - margin-bottom: 1rem; - } - } - - &.sticked { - background-color: $white; - box-shadow: 0 -6px 12px -6px rgba(0, 0, 0, 0.33); - border-left: 1px solid $light-grey; - border-right: 1px solid $light-grey; - border-top: 1px solid $light-grey; - } - - @media screen and (max-width: 700px) { - &.sticked { - width: auto; - margin-left: -15px; - margin-right: -15px; - box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.33); - - .checkout-submit { - width: 100%; - padding-left: 15px; - padding-right: 15px; - } - } - } - } .checkout-submit { margin-top: 5rem; @@ -291,24 +257,40 @@ } } -.summary { - margin-bottom: 2px; - font-size: 0.875rem; +.checkout-summary { + margin-top: 0; - .summary-label { - font-weight: bold; - } - - .summary-description { - @include force-wrap; - color: $min-accessible-grey; + .checkout-substep { + font-size: 0.875rem; + margin-top: 1rem; + + .two-columns { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 10px; + grid-row-gap: 0px; + } } .summary-edit { color: $teal-400; text-decoration: underline; - display: block; - margin-top: 5px; + display: inline-block; + margin-left: 15px; + font-size: 0.875rem; + font-weight: normal; + font-family: $body-font; + + &:hover { + color: $teal-500; + text-decoration: underline; + + &:after { + color: $teal-500; + } + } + &:after { background-image: url("../images/edit-with-pen.svg"); content: " "; @@ -321,6 +303,32 @@ top: 2px; } } + + .summary-subtitle { + font-weight: bold; + margin-bottom: 20px; + } +} + +.checkout-summary { + form { + display: flex; + justify-content: space-between; + + .summary-main { + width: 66.66%; + border-right: 1px solid #DDD; + padding-right: 20px; + padding-top: 20px; + } + .summary-right { + width: calc(33.33% - 20px); + padding-left: 20px; + padding-right: 20px; + border-right: 1px solid #DDD; + } + } + } #line-items { diff --git a/config/locales/en.yml b/config/locales/en.yml index 493ae5ad51..f9628fb33b 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1973,18 +1973,15 @@ en: submit: Next - Order summary cancel: Back to Your details step3: - your_details: - title: Your details - edit: Edit your details - billing_address: - title: Billing address - shipping_address: - title: Shipping address - delivery_info: - title: Delivery info + delivery_details: + title: Delivery details + edit: Edit + address: Delivery address + instructions: Instructions payment_method: title: Payment method - edit: Edit payment method + edit: Edit + instructions: Instructions order: title: Order total terms_and_conditions: From 99fcbad0f0f63131d97cdd086fe7f62cab513198 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 9 Jan 2023 17:43:51 +0100 Subject: [PATCH 02/15] On split checkout, do not display footer on order summary introduced via `display_footer` which is by default `true` --- app/views/split_checkout/_summary.html.haml | 2 +- app/views/spree/orders/_summary.html.haml | 65 +++++++++++---------- config/locales/en.yml | 2 +- 3 files changed, 36 insertions(+), 33 deletions(-) diff --git a/app/views/split_checkout/_summary.html.haml b/app/views/split_checkout/_summary.html.haml index ae13d87367..571e0a2079 100644 --- a/app/views/split_checkout/_summary.html.haml +++ b/app/views/split_checkout/_summary.html.haml @@ -61,7 +61,7 @@ %div.checkout-title = t("split_checkout.step3.order.title") - = render 'spree/orders/summary', order: @order + = render 'spree/orders/summary', order: @order, display_footer: false .summary-right diff --git a/app/views/spree/orders/_summary.html.haml b/app/views/spree/orders/_summary.html.haml index f1c25fea61..d828a989f1 100644 --- a/app/views/spree/orders/_summary.html.haml +++ b/app/views/spree/orders/_summary.html.haml @@ -1,3 +1,5 @@ +- display_footer = true if display_footer.nil? + %table#line-items{"data-hook" => "order_details"} %col{valign: "middle"}/ %col{halign: "center", valign: "middle", width: "5%"}/ @@ -26,36 +28,37 @@ %td.text-right.total{"data-hook" => "order_item_total"} %span= item.display_amount_with_adjustments.to_html - %tfoot - #subtotal{"data-hook" => "order_details_subtotal"} - %tr#subtotal-row.total - %td.text-right{colspan: "3"} - %strong - = t :order_produce - %td.text-right.total - %span= display_checkout_subtotal(order) - - #order-charges{"data-hook" => "order_details_adjustments"} - - checkout_adjustments_for(order, exclude: [:line_item]).reject{ |a| a.amount == 0 }.reverse_each do |adjustment| - %tr.total - %td.text-right{:colspan => "3"} - %strong - = adjustment.label - %td.text-right.total - %span= adjustment.display_amount.to_html - - #order-total{"data-hook" => "order_details_total"} - %tr.total - %td.text-right{colspan: "3"} - %h5 - = t :order_total_price - %td.text-right.total - %h5#order_total= order.display_total.to_html - - - if order.total_tax > 0 - #tax{"data-hook" => "order_details_tax"} - %tr#tax-row.total + - if display_footer + %tfoot + #subtotal{"data-hook" => "order_details_subtotal"} + %tr#subtotal-row.total %td.text-right{colspan: "3"} - = t :order_includes_tax + %strong + = t :order_produce %td.text-right.total - %span= display_checkout_tax_total(order) + %span= display_checkout_subtotal(order) + + #order-charges{"data-hook" => "order_details_adjustments"} + - checkout_adjustments_for(order, exclude: [:line_item]).reject{ |a| a.amount == 0 }.reverse_each do |adjustment| + %tr.total + %td.text-right{:colspan => "3"} + %strong + = adjustment.label + %td.text-right.total + %span= adjustment.display_amount.to_html + + #order-total{"data-hook" => "order_details_total"} + %tr.total + %td.text-right{colspan: "3"} + %h5 + = t :order_total_price + %td.text-right.total + %h5#order_total= order.display_total.to_html + + - if order.total_tax > 0 + #tax{"data-hook" => "order_details_tax"} + %tr#tax-row.total + %td.text-right{colspan: "3"} + = t :order_includes_tax + %td.text-right.total + %span= display_checkout_tax_total(order) diff --git a/config/locales/en.yml b/config/locales/en.yml index f9628fb33b..e606025268 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1983,7 +1983,7 @@ en: edit: Edit instructions: Instructions order: - title: Order total + title: Order details terms_and_conditions: message_html: "I agree to the seller's %{terms_and_conditions_link}." link_text: "Terms and Conditions" From cc838d2c88888170657f433cde311b2c09300564 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 9 Jan 2023 18:16:13 +0100 Subject: [PATCH 03/15] Remove sentence --- app/views/split_checkout/_terms_and_conditions.html.haml | 3 --- config/locales/en.yml | 1 - 2 files changed, 4 deletions(-) diff --git a/app/views/split_checkout/_terms_and_conditions.html.haml b/app/views/split_checkout/_terms_and_conditions.html.haml index d1d03fa582..0725b1415f 100644 --- a/app/views/split_checkout/_terms_and_conditions.html.haml +++ b/app/views/split_checkout/_terms_and_conditions.html.haml @@ -14,6 +14,3 @@ = t('split_checkout.step3.terms_and_conditions.message_html', terms_and_conditions_link: link_to( t("split_checkout.step3.terms_and_conditions.link_text"), @order.distributor.terms_and_conditions, target: '_blank')) = f.error_message_on :terms_and_conditions, standalone: true - - %div.checkout-input - = t("split_checkout.step3.agree") diff --git a/config/locales/en.yml b/config/locales/en.yml index e606025268..369200d5cb 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1992,7 +1992,6 @@ en: all_terms_and_conditions: message_html: "I agree to the seller's %{terms_and_conditions_link} and the platform %{tos_link}." terms_and_conditions: "Terms and Conditions" - agree: By clicking 'Complete order' you agree to your order being processed. submit: Complete order cancel: Back to Payment method errors: From 1ea9c15bb8bae698e3ee61b70d9c026bba083e39 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 9 Jan 2023 18:17:03 +0100 Subject: [PATCH 04/15] 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 From fa8e36fbebf7fffce17a058efed7c5ef68a70f19 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 9 Jan 2023 18:30:32 +0100 Subject: [PATCH 05/15] As this is used in a odd/even table, background needs to be transparent Otherwise, it's set via `checkout h5` --- app/views/spree/shared/_line_item_name.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/spree/shared/_line_item_name.html.haml b/app/views/spree/shared/_line_item_name.html.haml index 12a32772a4..2139532c23 100644 --- a/app/views/spree/shared/_line_item_name.html.haml +++ b/app/views/spree/shared/_line_item_name.html.haml @@ -1,4 +1,4 @@ -%h5.inline-header +%h5.inline-header{ style: "background-color: transparent" } = "#{raw(line_item.product.name)}" - unless line_item.product.name.include? line_item.name_to_display %span= "- #{raw(line_item.name_to_display)}" From ef572668d5e3482c7a61651b58365ede3279630a Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Mon, 9 Jan 2023 18:49:08 +0100 Subject: [PATCH 06/15] Let's keep fees next to the payment or shipping method --- app/views/split_checkout/_details.html.haml | 2 +- app/views/split_checkout/_payment.html.haml | 2 +- app/views/split_checkout/_summary.html.haml | 5 +++- .../css/darkswarm/split-checkout.scss | 26 ++++++++++--------- 4 files changed, 20 insertions(+), 15 deletions(-) diff --git a/app/views/split_checkout/_details.html.haml b/app/views/split_checkout/_details.html.haml index 4d82385aff..e81c8c08a7 100644 --- a/app/views/split_checkout/_details.html.haml +++ b/app/views/split_checkout/_details.html.haml @@ -89,7 +89,7 @@ "data-action": "toggle#toggle shippingmethod#selectShippingMethod", "data-toggle-show": shipping_method.require_ship_address = shipping_method_form.label shipping_method.id, shipping_method.name, {for: "shipping_method_" + shipping_method.id.to_s } - %em= payment_or_shipping_price(shipping_method, @order) + %em.fees= payment_or_shipping_price(shipping_method, @order) - display_ship_address = display_ship_address || (ship_method_is_selected && shipping_method.require_ship_address) %div.checkout-input{"data-shippingmethod-target": "shippingMethodDescription", "data-shippingmethodid": shipping_method.id , style: "display: #{ship_method_is_selected ? 'block' : 'none'}" } #distributor_address.panel diff --git a/app/views/split_checkout/_payment.html.haml b/app/views/split_checkout/_payment.html.haml index 69d55d6a0b..e1be8e9c05 100644 --- a/app/views/split_checkout/_payment.html.haml +++ b/app/views/split_checkout/_payment.html.haml @@ -15,7 +15,7 @@ "data-paymentmethod-id": "paymentmethod#{payment_method.id}", "data-paymentmethod-target": "input" = f.label :payment_method_id, "#{payment_method.name}", for: "payment_method_#{payment_method.id}" - %em=payment_or_shipping_price(payment_method, @order) + %em.fees=payment_or_shipping_price(payment_method, @order) .paymentmethod-container{"data-paymentmethod-id": "paymentmethod#{payment_method.id}", style: "display: #{payment_method.id == selected_payment_method ? "block" : "none"}"} - if payment_method.description && !payment_method.description.empty? diff --git a/app/views/split_checkout/_summary.html.haml b/app/views/split_checkout/_summary.html.haml index 49deca3c95..ce2b586372 100644 --- a/app/views/split_checkout/_summary.html.haml +++ b/app/views/split_checkout/_summary.html.haml @@ -8,6 +8,7 @@ .summary-subtitle = @order.shipping_method.name + %em.fees= payment_or_shipping_price(@order.shipping_method, @order) .two-columns %div .summary-subtitle @@ -49,7 +50,9 @@ = t("split_checkout.step3.payment_method.edit") .two-columns %div - = last_payment_method(@order)&.name + - payment_method = last_payment_method(@order) + = payment_method&.name + %em.fees=payment_or_shipping_price(payment_method, @order) %div .summary-subtitle = t("split_checkout.step3.payment_method.instructions") diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index 7727779bc1..543a6afb15 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -161,22 +161,24 @@ label { margin-top: 0.3rem; - & + em { - margin-left: -0.5rem; - font-size: 14px; // same as label - font-weight: bold; - // Add opening and closing parentheses - &:before { - content: "("; - } - &:after { - content: ")"; - } - } } } } + em.fees { + margin-left: -0.5rem; + font-size: 14px; // same as label + font-weight: bold; + margin-left: 10px; + // Add opening and closing parentheses + &:before { + content: "("; + } + &:after { + content: ")"; + } + } + .checkout-input span.formError, div.error.card-errors { background-color: rgba(193, 18, 43, 0.1); color: $red-700; From 53c701e04c6f0800d74f9b38870269d5fb4461d5 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 10 Jan 2023 15:27:17 +0100 Subject: [PATCH 07/15] In fact, it seems likely to be strictly less. --- app/webpacker/controllers/sticky_controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/webpacker/controllers/sticky_controller.js b/app/webpacker/controllers/sticky_controller.js index 1203df5b60..4c165bdd86 100644 --- a/app/webpacker/controllers/sticky_controller.js +++ b/app/webpacker/controllers/sticky_controller.js @@ -15,7 +15,7 @@ export default class extends Controller { this.containerTarget.style.bottom = "-1px"; const observer = new IntersectionObserver( ([e]) => { - e.target.classList.toggle("sticked", e.intersectionRatio <= 1); + e.target.classList.toggle("sticked", e.intersectionRatio < 1); }, { threshold: [1] } ); From 21b74386f9a67dcadeba69c4353c65023a85dbf8 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 10 Jan 2023 15:27:40 +0100 Subject: [PATCH 08/15] Introduce mobile view for summary step --- app/views/split_checkout/_summary.html.haml | 2 +- .../css/darkswarm/split-checkout.scss | 55 +++++++++++++++++++ 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/app/views/split_checkout/_summary.html.haml b/app/views/split_checkout/_summary.html.haml index ce2b586372..277760b31b 100644 --- a/app/views/split_checkout/_summary.html.haml +++ b/app/views/split_checkout/_summary.html.haml @@ -69,7 +69,7 @@ = render 'spree/orders/summary', order: @order, display_footer: false -.summary-right +.summary-right{ "data-controller": "sticky", "data-sticky-target": "container" } .summary-right-line.total .summary-right-line-label= t :order_total_price .summary-right-line-value#order_total= @order.display_total.to_html diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index 543a6afb15..8c5b8484e3 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -437,3 +437,58 @@ } } } + +// Handle the mobile view for the summary step +@media screen and (max-width: 800px) { + .checkout-summary form { + display: block; + } + + .checkout-summary form .summary-right { + width: calc(100% + 30px); + margin-left: -15px; + background-color: white; + border-right: none; + border-top: 1px solid #DDD; + + padding-top: 20px; + + &.sticked { + box-shadow: 0 -4px 10px #DDD; + } + + .summary-right-line.total { + margin-bottom: 10px; + } + + .checkout-submit { + margin-top: 10px; + + .checkout-input { + margin-bottom: 10px; + } + + .button { + margin-bottom: 10px; + } + } + } + + .checkout-summary form .summary-main { + width: 100%; + border-right: none; + } + + .checkout-summary .checkout-substep .two-columns { + // only one column actually + grid-template-columns: 1fr; + + > :nth-child(2) { + margin-top: 20px; + } + } + + .checkout-summary .summary-subtitle { + margin-bottom: 10px; + } +} From 37f359542e5f5ea001fd1a2f91c5dd408ba3f793 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Wed, 11 Jan 2023 10:59:33 +0100 Subject: [PATCH 09/15] Remove bold on firstname+lastname --- app/views/split_checkout/_summary.html.haml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/split_checkout/_summary.html.haml b/app/views/split_checkout/_summary.html.haml index 277760b31b..78d3189fa8 100644 --- a/app/views/split_checkout/_summary.html.haml +++ b/app/views/split_checkout/_summary.html.haml @@ -13,7 +13,7 @@ %div .summary-subtitle = t("split_checkout.step3.delivery_details.address") - %strong + %span = @order.bill_address.firstname = @order.bill_address.lastname %div From c99ec38c859d6491a375ac6ba464b5428b03f096 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 13 Jan 2023 09:02:55 +0100 Subject: [PATCH 10/15] By default, we reject all adjustements with amount equal to 0 --- app/helpers/checkout_helper.rb | 5 +++++ app/views/checkout/_summary.html.haml | 2 +- app/views/split_checkout/_summary.html.haml | 2 +- app/views/spree/admin/orders/_invoice_table.html.haml | 2 +- app/views/spree/admin/orders/_invoice_table2.html.haml | 2 +- app/views/spree/admin/orders/ticket.html.haml | 2 +- app/views/spree/order_mailer/_order_summary.html.haml | 2 +- app/views/spree/orders/_form.html.haml | 2 +- app/views/spree/orders/_summary.html.haml | 2 +- 9 files changed, 13 insertions(+), 8 deletions(-) diff --git a/app/helpers/checkout_helper.rb b/app/helpers/checkout_helper.rb index 4c8a2ea53e..f3b0ddeb54 100644 --- a/app/helpers/checkout_helper.rb +++ b/app/helpers/checkout_helper.rb @@ -11,6 +11,7 @@ module CheckoutHelper def checkout_adjustments_for(order, opts = {}) exclude = opts[:exclude] || {} + reject_zero_amount = opts.fetch(:reject_zero_amount, true) adjustments = order.all_adjustments.eligible.to_a @@ -32,6 +33,10 @@ module CheckoutHelper } end + if reject_zero_amount + adjustments.reject! { |a| a.amount == 0 } + end + adjustments end diff --git a/app/views/checkout/_summary.html.haml b/app/views/checkout/_summary.html.haml index fa3bd6f4ed..64103efd47 100644 --- a/app/views/checkout/_summary.html.haml +++ b/app/views/checkout/_summary.html.haml @@ -9,7 +9,7 @@ = t :checkout_cart_total %td.cart-total.text-right= display_checkout_subtotal(@order) - - checkout_adjustments_for(current_order, exclude: [:shipping, :payment, :line_item]).reject{ |a| a.amount == 0 }.each do |adjustment| + - checkout_adjustments_for(current_order, exclude: [:shipping, :payment, :line_item]).each do |adjustment| %tr.adjustment %th= adjustment.label %td.text-right= adjustment.display_amount.to_html diff --git a/app/views/split_checkout/_summary.html.haml b/app/views/split_checkout/_summary.html.haml index 78d3189fa8..48de1f1235 100644 --- a/app/views/split_checkout/_summary.html.haml +++ b/app/views/split_checkout/_summary.html.haml @@ -78,7 +78,7 @@ .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| + - checkout_adjustments_for(@order, exclude: [:line_item]).reverse_each do |adjustment| .summary-right-line .summary-right-line-label= adjustment.label .summary-right-line-value= adjustment.display_amount.to_html diff --git a/app/views/spree/admin/orders/_invoice_table.html.haml b/app/views/spree/admin/orders/_invoice_table.html.haml index 4b90522915..b824616b49 100644 --- a/app/views/spree/admin/orders/_invoice_table.html.haml +++ b/app/views/spree/admin/orders/_invoice_table.html.haml @@ -24,7 +24,7 @@ %td{:align => "right"} = item.display_amount_with_adjustments - - checkout_adjustments_for(@order, exclude: [:line_item]).reject{ |a| a.amount == 0 }.reverse_each do |adjustment| + - checkout_adjustments_for(@order, exclude: [:line_item]).reverse_each do |adjustment| - taxable = adjustment.adjustable_type == "Spree::Shipment" ? adjustment.adjustable : adjustment %tr %td diff --git a/app/views/spree/admin/orders/_invoice_table2.html.haml b/app/views/spree/admin/orders/_invoice_table2.html.haml index c9a19b7956..ff24582867 100644 --- a/app/views/spree/admin/orders/_invoice_table2.html.haml +++ b/app/views/spree/admin/orders/_invoice_table2.html.haml @@ -30,7 +30,7 @@ %td{:align => "right"} = display_line_item_tax_rates(item) - - checkout_adjustments_for(@order, exclude: [:line_item]).reject{ |a| a.amount == 0 }.reverse_each do |adjustment| + - checkout_adjustments_for(@order, exclude: [:line_item]).reverse_each do |adjustment| %tr %td %strong= "#{raw(adjustment.label)}" diff --git a/app/views/spree/admin/orders/ticket.html.haml b/app/views/spree/admin/orders/ticket.html.haml index d86ba0d1b6..ae5c375aa8 100644 --- a/app/views/spree/admin/orders/ticket.html.haml +++ b/app/views/spree/admin/orders/ticket.html.haml @@ -43,7 +43,7 @@ j(line_item.display_amount_with_adjustments.format(symbol: false, with_currency: false))] } .join('" + \'\x0A\' + "')}", '\x0A', - "#{checkout_adjustments_for(@order, exclude: [:line_item]) + "#{checkout_adjustments_for(@order, exclude: [:line_item], reject_zero_amount: false) .reject{ |a| a.amount == 0 } .reverse.map { |adjustment| '%5s %-27.27s%8.8s' % ["", diff --git a/app/views/spree/order_mailer/_order_summary.html.haml b/app/views/spree/order_mailer/_order_summary.html.haml index d3bcabfa76..af0ba5433a 100644 --- a/app/views/spree/order_mailer/_order_summary.html.haml +++ b/app/views/spree/order_mailer/_order_summary.html.haml @@ -40,7 +40,7 @@ = t :email_order_summary_subtotal %td{align: "right"} = display_checkout_subtotal(@order) - - checkout_adjustments_for(@order, exclude: [:line_item]).reject{ |a| a.amount == 0 }.reverse_each do |adjustment| + - checkout_adjustments_for(@order, exclude: [:line_item]).reverse_each do |adjustment| %tr %td{align: "right", colspan: "3"} = "#{raw(adjustment.label)}:" diff --git a/app/views/spree/orders/_form.html.haml b/app/views/spree/orders/_form.html.haml index 877d700dc4..e4465b9d4c 100644 --- a/app/views/spree/orders/_form.html.haml +++ b/app/views/spree/orders/_form.html.haml @@ -31,7 +31,7 @@ %span.order-total.item-total= display_checkout_subtotal(@order) %td - - checkout_adjustments_for(@order, exclude: [:line_item]).reject{ |a| a.amount == 0 }.reverse_each do |adjustment| + - checkout_adjustments_for(@order, exclude: [:line_item]).reverse_each do |adjustment| %tr.order-adjustment %td.text-right{:colspan => "3"} = adjustment.label diff --git a/app/views/spree/orders/_summary.html.haml b/app/views/spree/orders/_summary.html.haml index d828a989f1..b6e6c9c5df 100644 --- a/app/views/spree/orders/_summary.html.haml +++ b/app/views/spree/orders/_summary.html.haml @@ -39,7 +39,7 @@ %span= display_checkout_subtotal(order) #order-charges{"data-hook" => "order_details_adjustments"} - - checkout_adjustments_for(order, exclude: [:line_item]).reject{ |a| a.amount == 0 }.reverse_each do |adjustment| + - checkout_adjustments_for(order, exclude: [:line_item]).reverse_each do |adjustment| %tr.total %td.text-right{:colspan => "3"} %strong From c5d94d372f37e9386deef3ab3db04b857428761c Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 13 Jan 2023 09:21:15 +0100 Subject: [PATCH 11/15] Remove unnecessary `within` block --- spec/system/consumer/split_checkout_spec.rb | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/spec/system/consumer/split_checkout_spec.rb b/spec/system/consumer/split_checkout_spec.rb index 88e3caca77..f0b3f0446d 100644 --- a/spec/system/consumer/split_checkout_spec.rb +++ b/spec/system/consumer/split_checkout_spec.rb @@ -455,9 +455,8 @@ 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 ".summary-right" do - expect(page).to have_content("Shipping #{with_currency(4.56)}") - end + expect(page).to have_content("Shipping #{with_currency(4.56)}") + if checkout_page.eql?("order confirmation") expect(page).to have_content "Your order has been processed successfully" end @@ -588,9 +587,8 @@ 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 ".summary-right" do - expect(page).to have_content("Transaction fee #{with_currency(1.23)}") - end + expect(page).to have_content("Transaction fee #{with_currency(1.23)}") + if checkout_page.eql?("order confirmation") expect(page).to have_content "Your order has been processed successfully" end From 3e7e0e4d81026c0f00a4516b3a745fed791c0d37 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 13 Jan 2023 09:26:32 +0100 Subject: [PATCH 12/15] Instead of adding inline style, create a CSS rule --- app/views/spree/shared/_line_item_name.html.haml | 2 +- app/webpacker/css/darkswarm/split-checkout.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/app/views/spree/shared/_line_item_name.html.haml b/app/views/spree/shared/_line_item_name.html.haml index 2139532c23..12a32772a4 100644 --- a/app/views/spree/shared/_line_item_name.html.haml +++ b/app/views/spree/shared/_line_item_name.html.haml @@ -1,4 +1,4 @@ -%h5.inline-header{ style: "background-color: transparent" } +%h5.inline-header = "#{raw(line_item.product.name)}" - unless line_item.product.name.include? line_item.name_to_display %span= "- #{raw(line_item.name_to_display)}" diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index 8c5b8484e3..97622f7bb5 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -382,6 +382,10 @@ #line-items { display: block; overflow-x: auto; + + h5 { + background-color: transparent; + } } .two-columns-inputs { From b559171d0e72727421e41680f46adfd85dd68588 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 17 Jan 2023 15:00:45 +0100 Subject: [PATCH 13/15] Put order summary footer into its own file `_totals_footer.html.haml` --- app/views/spree/orders/_summary.html.haml | 35 +------------------ .../spree/orders/_totals_footer.html.haml | 33 +++++++++++++++++ 2 files changed, 34 insertions(+), 34 deletions(-) create mode 100644 app/views/spree/orders/_totals_footer.html.haml diff --git a/app/views/spree/orders/_summary.html.haml b/app/views/spree/orders/_summary.html.haml index b6e6c9c5df..dbb89c5035 100644 --- a/app/views/spree/orders/_summary.html.haml +++ b/app/views/spree/orders/_summary.html.haml @@ -28,37 +28,4 @@ %td.text-right.total{"data-hook" => "order_item_total"} %span= item.display_amount_with_adjustments.to_html - - if display_footer - %tfoot - #subtotal{"data-hook" => "order_details_subtotal"} - %tr#subtotal-row.total - %td.text-right{colspan: "3"} - %strong - = t :order_produce - %td.text-right.total - %span= display_checkout_subtotal(order) - - #order-charges{"data-hook" => "order_details_adjustments"} - - checkout_adjustments_for(order, exclude: [:line_item]).reverse_each do |adjustment| - %tr.total - %td.text-right{:colspan => "3"} - %strong - = adjustment.label - %td.text-right.total - %span= adjustment.display_amount.to_html - - #order-total{"data-hook" => "order_details_total"} - %tr.total - %td.text-right{colspan: "3"} - %h5 - = t :order_total_price - %td.text-right.total - %h5#order_total= order.display_total.to_html - - - if order.total_tax > 0 - #tax{"data-hook" => "order_details_tax"} - %tr#tax-row.total - %td.text-right{colspan: "3"} - = t :order_includes_tax - %td.text-right.total - %span= display_checkout_tax_total(order) + = render partial: "spree/orders/totals_footer", locals: { order: order } if display_footer diff --git a/app/views/spree/orders/_totals_footer.html.haml b/app/views/spree/orders/_totals_footer.html.haml new file mode 100644 index 0000000000..249b6c3527 --- /dev/null +++ b/app/views/spree/orders/_totals_footer.html.haml @@ -0,0 +1,33 @@ +%tfoot + #subtotal{"data-hook" => "order_details_subtotal"} + %tr#subtotal-row.total + %td.text-right{colspan: "3"} + %strong + = t :order_produce + %td.text-right.total + %span= display_checkout_subtotal(order) + + #order-charges{"data-hook" => "order_details_adjustments"} + - checkout_adjustments_for(order, exclude: [:line_item]).reverse_each do |adjustment| + %tr.total + %td.text-right{:colspan => "3"} + %strong + = adjustment.label + %td.text-right.total + %span= adjustment.display_amount.to_html + + #order-total{"data-hook" => "order_details_total"} + %tr.total + %td.text-right{colspan: "3"} + %h5 + = t :order_total_price + %td.text-right.total + %h5#order_total= order.display_total.to_html + + - if order.total_tax > 0 + #tax{"data-hook" => "order_details_tax"} + %tr#tax-row.total + %td.text-right{colspan: "3"} + = t :order_includes_tax + %td.text-right.total + %span= display_checkout_tax_total(order) From f8b8e7972521914c5caa604dbd6c944042de3242 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 20 Jan 2023 11:20:11 +0100 Subject: [PATCH 14/15] Specify a bit when T&Cs label is longer that summary width and therefore on two lines --- app/webpacker/css/darkswarm/split-checkout.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index 97622f7bb5..5bfa9a2201 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -379,6 +379,17 @@ } } +.summary-right { + .checkout-input:has(input[type=checkbox]) { + display: flex; + align-items: baseline; + + input[type=checkbox] + label { + margin-left: 1rem; + } + } +} + #line-items { display: block; overflow-x: auto; From 370e476fc531c29217c3ca5b529f10dc8c097006 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Fri, 20 Jan 2023 15:37:52 +0100 Subject: [PATCH 15/15] `has:()` relational pseudo class is not available for firefox cf. https://caniuse.com/css-has So be more generic, as the only `checkout-input` is for that checkbox for T&Cs --- app/webpacker/css/darkswarm/split-checkout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss index 5bfa9a2201..f26fe94822 100644 --- a/app/webpacker/css/darkswarm/split-checkout.scss +++ b/app/webpacker/css/darkswarm/split-checkout.scss @@ -380,7 +380,7 @@ } .summary-right { - .checkout-input:has(input[type=checkbox]) { + .checkout-input { display: flex; align-items: baseline;