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: