From 49f026629ca0a3a25b73dad5e27d0d91a1df41cf Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 6 Jul 2021 11:17:02 +0200 Subject: [PATCH] Add tabs for the new split checkout + first step: your details - Add new split checkout for user with `split_checkout` feature - Add the first step: Your details - with 3 parts : Your details, Billing address and Delivery address --- .../stylesheets/darkswarm/branding.scss | 11 +- .../stylesheets/darkswarm/split-checkout.scss | 111 +++++++++++++++++ .../stylesheets/darkswarm/typography.scss | 2 +- app/views/checkout/edit.html.haml | 1 - app/views/split_checkout/_form.html.haml | 10 ++ app/views/split_checkout/_tabs.html.haml | 10 ++ .../split_checkout/_your_details.html.haml | 112 ++++++++++++++++++ app/views/split_checkout/edit.html.haml | 32 +++++ config/locales/en.yml | 45 +++++++ 9 files changed, 329 insertions(+), 5 deletions(-) create mode 100644 app/assets/stylesheets/darkswarm/split-checkout.scss create mode 100644 app/views/split_checkout/_form.html.haml create mode 100644 app/views/split_checkout/_tabs.html.haml create mode 100644 app/views/split_checkout/_your_details.html.haml create mode 100644 app/views/split_checkout/edit.html.haml diff --git a/app/assets/stylesheets/darkswarm/branding.scss b/app/assets/stylesheets/darkswarm/branding.scss index 1ca4224cee..467ff9979a 100644 --- a/app/assets/stylesheets/darkswarm/branding.scss +++ b/app/assets/stylesheets/darkswarm/branding.scss @@ -1,6 +1,7 @@ $ofn-brand: #f27052; -$distributor-header-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 8px 6px -6px rgba(0, 0, 0, 0.2); +$distributor-header-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), + 0 8px 6px -6px rgba(0, 0, 0, 0.2); // e.g. australia, uk, norway specific color @@ -36,8 +37,8 @@ $med-grey: #666; $med-drk-grey: #444; $dark-grey: #333; $light-grey: #ddd; -$light-grey-transparency: rgba(0, 0, 0, .1); -$very-light-grey-transparency: rgba(0, 0, 0, .05); +$light-grey-transparency: rgba(0, 0, 0, 0.1); +$very-light-grey-transparency: rgba(0, 0, 0, 0.05); $black: #000; $white: #fff; @@ -75,3 +76,7 @@ $social-facebook: #3b5998; $social-instagram: #e1306c; $social-linkedin: #0e76a8; $social-twitter: #00acee; + +// Typography +$min-accessible-grey: #666; +$darker-grey: #222; diff --git a/app/assets/stylesheets/darkswarm/split-checkout.scss b/app/assets/stylesheets/darkswarm/split-checkout.scss new file mode 100644 index 0000000000..a6a611e738 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/split-checkout.scss @@ -0,0 +1,111 @@ +.checkout-tab { + height: 4rem; + display: flex; + flex-direction: column; + justify-content: center; + + span { + font-size: 1.3rem; + @include headingFont; + } + + &:not(.selected) { + background-color: $white; + border-bottom: 5px solid $min-accessible-grey; + + span { + color: $min-accessible-grey; + } + } + + &.selected { + background-color: $ofn-brand; + + span { + color: $white; + text-decoration: underline; + } + } +} + +.checkout-step { + margin-right: auto; + margin-left: auto; + margin-top: 3rem; + + .checkout-substep { + margin-bottom: 1rem; + margin-top: 5rem; + + &:first-child { + margin-top: 3rem; + } + } + + .checkout-title { + font-size: 1.1rem; + @include headingFont; + font-weight: $font-weight-bold; + text-decoration: underline; + color: $darker-grey; + margin-bottom: 1.5rem; + } + + .checkout-input { + margin-bottom: 1.5rem; + + label { + margin-bottom: 0.3rem; + + &.error { + font-weight: $font-weight-bold; + color: $red-700; + } + } + + input, + select { + margin: 0; + + &.error { + border-color: $red-700; + } + } + + small.error { + background-color: rgba(193, 18, 43, 0.1); + color: $red-700; + font-style: normal; + margin: 0; + font-size: 0.8rem; + } + + #distributor_address.panel { + font-size: 0.875rem; + padding: 1rem; + + span { + white-space: pre-wrap; + } + } + } + + .checkout-submit { + margin-top: 5rem; + margin-bottom: 5rem; + + .button { + width: 100%; + margin-bottom: 2rem; + + &.primary { + background-color: $orange-500; + } + + &.cancel { + background-color: $grey-100; + color: $black; + } + } + } +} diff --git a/app/assets/stylesheets/darkswarm/typography.scss b/app/assets/stylesheets/darkswarm/typography.scss index f95de26a89..37d7c955c0 100644 --- a/app/assets/stylesheets/darkswarm/typography.scss +++ b/app/assets/stylesheets/darkswarm/typography.scss @@ -132,7 +132,7 @@ ul.check-list { } .light-grey { - color: #666666; + color: $min-accessible-grey; } .pad { diff --git a/app/views/checkout/edit.html.haml b/app/views/checkout/edit.html.haml index 9d85b3e8df..085542294a 100644 --- a/app/views/checkout/edit.html.haml +++ b/app/views/checkout/edit.html.haml @@ -33,5 +33,4 @@ .small-12.medium-4.columns = render partial: "checkout/summary" - = render partial: "shared/footer" diff --git a/app/views/split_checkout/_form.html.haml b/app/views/split_checkout/_form.html.haml new file mode 100644 index 0000000000..7c8ebf418d --- /dev/null +++ b/app/views/split_checkout/_form.html.haml @@ -0,0 +1,10 @@ +- content_for :injection_data do + = inject_available_shipping_methods + = inject_available_payment_methods + = inject_saved_credit_cards + += form_with url: update_checkout_path, model: @order, method: :put do |f| + + %div.checkout-step.medium-6 + - if true ## test step + = render "split_checkout/your_details", f: f diff --git a/app/views/split_checkout/_tabs.html.haml b/app/views/split_checkout/_tabs.html.haml new file mode 100644 index 0000000000..58097a7617 --- /dev/null +++ b/app/views/split_checkout/_tabs.html.haml @@ -0,0 +1,10 @@ +%div.flex + %div.columns.three.text-center.checkout-tab.selected + %span + = t("split_checkout.your_details") + %div.columns.three.text-center.checkout-tab + %span + = t("split_checkout.payment_method") + %div.columns.three.text-center.checkout-tab + %span + = t("split_checkout.order_summary") diff --git a/app/views/split_checkout/_your_details.html.haml b/app/views/split_checkout/_your_details.html.haml new file mode 100644 index 0000000000..2fd782c054 --- /dev/null +++ b/app/views/split_checkout/_your_details.html.haml @@ -0,0 +1,112 @@ +%div.checkout-substep + -# YOUR DETAILS + %div.checkout-title + = t("split_checkout.step1.your_details.title") + + %div.checkout-input + = fields_for :bill_address, @order.bill_address do |bill_address| + = bill_address.label :firstname, t("split_checkout.step1.your_details.first_name.label") + = bill_address.text_field :firstname, { placeholder: t("split_checkout.step1.your_details.first_name.placeholder") } + + %div.checkout-input + = fields_for :bill_address, @order.bill_address do |bill_address| + = bill_address.label :lastname, t("split_checkout.step1.your_details.last_name.label") + = bill_address.text_field :lastname, { placeholder: t("split_checkout.step1.your_details.last_name.placeholder") } + + %div.checkout-input + = f.label :email, t("split_checkout.step1.your_details.email.label") + = f.text_field :email, { placeholder: t("split_checkout.step1.your_details.email.placeholder") } + + %div.checkout-input + = fields_for :bill_address, @order.bill_address do |bill_address| + = bill_address.label :phone, t("split_checkout.step1.your_details.phone.label") + = bill_address.text_field :phone, { placeholder: t("split_checkout.step1.your_details.phone.placeholder") } + +%div.checkout-substep + -# BILLING ADDRESS + %div.checkout-title + = t("split_checkout.step1.billing_address.title") + + %div.checkout-input + = fields_for :bill_address, @order.bill_address do |bill_address| + = bill_address.label :address1, t("split_checkout.step1.billing_address.address1.label") + = bill_address.text_field :address1, { placeholder: t("split_checkout.step1.billing_address.address1.placeholder") } + + %div.checkout-input + = fields_for :bill_address, @order.bill_address do |bill_address| + = f.label :address2, t("split_checkout.step1.billing_address.address2.label") + = f.text_field :address2, { placeholder: t("split_checkout.step1.billing_address.address2.placeholder") } + + %div.checkout-input + = fields_for :bill_address, @order.bill_address do |bill_address| + = bill_address.label :city, t("split_checkout.step1.billing_address.city.label") + = bill_address.text_field :city, { placeholder: t("split_checkout.step1.billing_address.city.placeholder") } + + %div.checkout-input + = fields_for :bill_address, @order.bill_address do |bill_address| + = bill_address.label :state_id, t("split_checkout.step1.billing_address.state_id.label") + -# todo: get state // values: s.id as s.name for s in countriesById[order.bill_address.country_id].states // defaultvalue: {} + = bill_address.select :state_id, [] + + %div.checkout-input + = fields_for :bill_address, @order.bill_address do |bill_address| + = bill_address.label :zipcode, t("split_checkout.step1.billing_address.zipcode.label") + = bill_address.text_field :zipcode, { placeholder: t("split_checkout.step1.billing_address.zipcode.placeholder") } + + %div.checkout-input + = fields_for :bill_address, @order.bill_address do |bill_address| + = bill_address.label :country_id, t("split_checkout.step1.billing_address.country_id.label") + -# todo: get countries // values: c.id as c.name for c in countries // defaultvalue: order.bill_address.country_id = order.bill_address.country_id || #{DefaultCountry.id} + = bill_address.select :country_id, [] + + - if spree_current_user||true + %div.checkout-input + = f.check_box :checkout_default_bill_address + = f.label :checkout_default_bill_address, t(:checkout_default_bill_address) + + %div.checkout-substep + -# DELIVERY ADDRESS + %div.checkout-title + = t("split_checkout.step1.delivery_address.title") + + = for shipping_method in @shipping_methods + %div.checkout-input + = fields_for shipping_method do |shipping_method_form| + = shipping_method_form.check_box :name, {id: "shipping_method_" + shipping_method.id.to_s } + = shipping_method_form.label :name, shipping_method.name, {for: "shipping_method_" + shipping_method.id.to_s } + %em.light + -# todo: display method price | localizeCurrency // How to retrive shipping method price? + = if shipping_method.price && shipping_method.price != 0 + = method.price + - else + = t(:checkout_method_free) + + + - if true # todo: Checkout.requireShipAddress() // requireShipAddress: -> @shippingMethod()?.require_ship_address + %div.checkout-input + = f.check_box "Checkout.ship_address_same_as_billing", { id: "Checkout.ship_address_same_as_billing" } # "ng-model": "Checkout.ship_address_same_as_billing"}s + = f.label "Checkout.ship_address_same_as_billing", t(:checkout_address_same), { for: "Checkout.ship_address_same_as_billing" } + + - if spree_current_user || true # todo: && Checkout.requireShipAddress() // requireShipAddress: -> @shippingMethod()?.require_ship_address + %div.checkout-input + = f.check_box "Checkout.default_ship_address", { id: "Checkout.default_ship_address" } + = f.label "Checkout.default_ship_address", t(:checkout_default_ship_address), { for: "Checkout.default_ship_address" } + + - if true # todo: Checkout.shippingMethod().description + .div.checkout-input + #distributor_address.panel + %span{}{{ Checkout.shippingMethod().description }} + %br/ + %br/ + - if @order.order_cycle.pickup_time_for(@order.distributor) + = t :checkout_ready_for + = @order.order_cycle.pickup_time_for(@order.distributor) + + .div.checkout-input + = f.label :special_instructions, t(:checkout_instructions) + = f.text_area :special_instructions, size: "60x4" + + %div.checkout-submit + = f.submit t("split_checkout.step1.submit"), class: "button primary", disabled: @terms_and_conditions_accepted == false || @platform_tos_accepted == false + %a.button.cancel{href: main_app.cart_path} + = t("split_checkout.step1.cancel") diff --git a/app/views/split_checkout/edit.html.haml b/app/views/split_checkout/edit.html.haml new file mode 100644 index 0000000000..d56295b53e --- /dev/null +++ b/app/views/split_checkout/edit.html.haml @@ -0,0 +1,32 @@ +- content_for(:title) do + = t :checkout_title + +- content_for :injection_data do + = inject_enterprise_and_relatives + = inject_available_countries + +.darkswarm.footer-pad + - content_for :order_cycle_form do + %closing + = t :checkout_now + %p + = t :checkout_order_ready + %strong + = pickup_time current_order_cycle + + - content_for :ordercycle_sidebar do + .show-for-large-up.large-4.columns + = render partial: "shopping_shared/order_cycles" + + = render partial: "shopping_shared/header" + + .sub-header.show-for-medium-down + = render partial: "shopping_shared/order_cycles" + + %checkout.row + .small-12.medium-12.columns + = render partial: "split_checkout/tabs" + = render partial: "split_checkout/form" + + += render partial: "shared/footer" diff --git a/config/locales/en.yml b/config/locales/en.yml index d20f7e7c7e..77abd79bcb 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1620,6 +1620,51 @@ en: checkout_back_to_cart: "Back to Cart" cost_currency: "Cost Currency" + split_checkout: + your_details: 1 - Your details + payment_method: 2 - Payment method + order_summary: 3 - Order summary + step1: + your_details: + title: Your details + first_name: + label: First Name + placeholder: e.g. Jane + last_name: + label: Last Name + placeholder: e.g. Doe + email: + label: Email + placeholder: e.g. Janedoe@email.com + phone: + label: Phone number + placeholder: e.g. 07987654321 + billing_address: + title: Billing address + address1: + label: Address (Street + House Number) + placeholder: e.g. Flat 1 Elm apartments + address2: + label: Additional address info (optional) + placeholder: e.g. Cavalier avenur + city: + label: City + placeholder: e.g. London + state_id: + label: State + zipcode: + label: Postcode + placeholder: e.g. SW11 3QN + country_id: + label: Country + delivery_address: + title: Delivery address + submit: Next - Payment method + cancel: Back to Edit basket + errors: + required: Field cannot be blank + invalid_number: "Please enter a valid phone number" + invalid_email: "Please enter a valid email address" order_paid: PAID order_not_paid: NOT PAID order_total: Total order