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

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;

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;
+      }
+    }
+  }
+}

app/assets/stylesheets/darkswarm/typography.scss

@@ -132,7 +132,7 @@ ul.check-list {
 }
 
 .light-grey {
-  color: #666666;
+  color: $min-accessible-grey;
 }
 
 .pad {

app/views/checkout/edit.html.haml

@@ -33,5 +33,4 @@
       .small-12.medium-4.columns
         = render partial: "checkout/summary"
 
-
 = render partial: "shared/footer"

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

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")      

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")

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"

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