Merge pull request #8004 from jibees/split-checkout-step-3

Split checkout step 3

app/assets/images/edit-with-pen.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.08646 2.11037L11.1222 4.40105C11.208 4.49756 11.208 4.65501 11.1222 4.75151L6.19306 10.2979L4.09861 10.5595C3.81875 10.595 3.58177 10.3284 3.61337 10.0135L3.84583 7.65677L8.775 2.11037C8.86076 2.01387 9.00069 2.01387 9.08646 2.11037ZM12.7427 1.52881L11.6413 0.28951C11.2983 -0.0965032 10.7408 -0.0965032 10.3955 0.28951L9.59653 1.18851C9.51076 1.28502 9.51076 1.44247 9.59653 1.53897L11.6323 3.82965C11.7181 3.92616 11.858 3.92616 11.9438 3.82965L12.7427 2.93065C13.0858 2.5421 13.0858 1.91483 12.7427 1.52881ZM8.66667 8.78941V11.3747H1.44444V3.2481H6.6309C6.70312 3.2481 6.77083 3.21508 6.82274 3.15921L7.72552 2.14339C7.89705 1.95038 7.77517 1.62278 7.53368 1.62278H1.08333C0.485243 1.62278 0 2.16878 0 2.84177V11.781C0 12.454 0.485243 13 1.08333 13H9.02778C9.62587 13 10.1111 12.454 10.1111 11.781V7.77359C10.1111 7.50186 9.81997 7.36726 9.64844 7.55773L8.74566 8.57355C8.69601 8.63196 8.66667 8.70815 8.66667 8.78941Z" fill="#4CB5C5"/>
+</svg>

app/assets/stylesheets/darkswarm/split-checkout.scss

@@ -4,7 +4,7 @@
   flex-direction: column;
   justify-content: center;
 
-  span {
+  span, span > a {
     font-size: 1.3rem;
     @include headingFont;
   }
@@ -13,7 +13,7 @@
     background-color: $white;
     border-bottom: 5px solid $min-accessible-grey;
 
-    span {
+    span, span > a {
       color: $min-accessible-grey;
     }
   }
@@ -21,11 +21,30 @@
   &.selected {
     background-color: $ofn-brand;
 
-    span {
+    span, span > a {
       color: $white;
       text-decoration: underline;
     }
   }
+
+  &.success {
+    border-bottom: 5px solid $clr-turquoise-bright;
+
+    span {
+      &:after {
+        content: '✓';
+        background-color: $clr-turquoise-bright;
+        color: $white;
+        border-radius: 50%;
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+        display: inline-block;
+        font-family: $base-font-family;
+        margin-left: 10px;
+      }
+    }
+  }
 }
 
 .checkout-step {
@@ -43,7 +62,7 @@
   }
 
   .checkout-title {
-    font-size: 1.1rem;
+    font-size: 1.06rem;
     @include headingFont;
     font-weight: $font-weight-bold;
     text-decoration: underline;
@@ -94,6 +113,11 @@
         white-space: pre-wrap;
       }
     }
+    
+    a {
+      color: $teal-400;
+      text-decoration: underline;
+    }
   }
 
   .checkout-submit {
@@ -115,3 +139,34 @@
     }
   }
 }
+
+.summary {
+  margin-bottom: 2px;
+  font-size: 0.875rem;
+
+  .summary-label {
+    font-weight: bold;
+  }
+
+  .summary-value {
+
+  }
+
+  .summary-edit {
+    color: $teal-400;
+    text-decoration: underline;
+    display: block;
+    margin-top: 5px;
+    &:after {
+      background-image: image-url("edit-with-pen.svg");
+      content: " ";
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      margin-left: 5px;
+      line-height: 1em;
+      position: relative;
+      top: 2px;
+    }
+  }
+}

app/controllers/split_checkout_controller.rb

@@ -32,6 +32,7 @@ class SplitCheckoutController < ::BaseController
   before_action :enable_embedded_shopfront
 
   helper 'spree/orders'
+  helper OrderHelper
 
   def edit
     return handle_redirect_from_stripe if valid_payment_intent_provided?
@@ -80,7 +81,8 @@ class SplitCheckoutController < ::BaseController
     params.require(:order).permit(
       :email, :shipping_method_id, :special_instructions,
       bill_address_attributes: PermittedAttributes::Address.attributes,
-      ship_address_attributes: PermittedAttributes::Address.attributes
+      ship_address_attributes: PermittedAttributes::Address.attributes,
+      payments_attributes: [:payment_method_id]
     )
   end
 

app/views/split_checkout/_details.html.haml

@@ -74,6 +74,7 @@
         = shipping_method_form.radio_button :name, shipping_method.id,
           id: "shipping_method_#{shipping_method.id}",
           checked: (shipping_method.id == selected_shipping_method),
+          name: "shipping_method_id",
           "data-description": shipping_method.description,
           "data-action": "toggle#toggle shippingmethod#selectShippingMethod",
           "data-toggle-show": shipping_method.require_ship_address

app/views/split_checkout/_form.html.haml

@@ -1,5 +1,4 @@
 - content_for :injection_data do
-  = inject_available_payment_methods
   = inject_saved_credit_cards
 
 %div.checkout-step.medium-6

app/views/split_checkout/_payment.html.haml

@@ -1,10 +1,14 @@
-%div.checkout-substep{"data": {"controller": "paymentmethod"}}
+%div.checkout-substep{"data-controller": "paymentmethod"}
   %div.checkout-title
     = t("split_checkout.step2.payment_method.title")
+  - selected_payment_method = @order.payments&.with_state(:checkout)&.first&.payment_method_id
   - available_payment_methods.each do |payment_method| 
     %div.checkout-input
       = f.radio_button :payment_method_id, payment_method.id,
+        name: "order[payments_attributes][][payment_method_id]",
         id: "payment_method_#{payment_method.id}",
+        name: "order[payments_attributes][][payment_method_id]",
+        checked: (payment_method.id == selected_payment_method),
         "data-action": "paymentmethod#selectPaymentMethod",
         "data-paymentmethod-description": "#{payment_method.description}"
       = f.label payment_method.id, "#{payment_method.name} (#{payment_method_price(payment_method, @order)})", {for: "payment_method_" + payment_method.id.to_s }

app/views/split_checkout/_summary.html.haml

@@ -0,0 +1,115 @@
+%div.checkout-substep
+  %div.checkout-title
+    = t("split_checkout.step3.your_details.title")
+
+  %div.summary
+    %span.summary-label
+      = t("split_checkout.step1.your_details.first_name.label")
+    %span.summary-value
+      = @order.bill_address.firstname
+
+  %div.summary
+    %span.summary-label
+      = t("split_checkout.step1.your_details.last_name.label")
+    %span.summary-value
+      = @order.bill_address.lastname
+
+  %div.summary
+    %span.summary-label
+      = t("split_checkout.step1.your_details.email.label")
+    %span.summary-value
+      = @order.user.email
+  
+  %div.summary
+    %span.summary-label
+      = t("split_checkout.step1.your_details.phone.label")
+    %span.summary-value
+      = @order.bill_address.phone
+
+%div.checkout-substep
+  %div.checkout-title
+    = t("split_checkout.step3.billing_address.title")
+  
+  %div.summary
+    %span.summary-label
+      = t("split_checkout.step1.billing_address.address1.label")
+    %span.summary-value
+      = @order.bill_address.address1
+  
+  - unless @order.bill_address.address2.blank?
+    %div.summary
+      %span.summary-label
+        = t("split_checkout.step1.billing_address.address2.label")
+      %span.summary-value
+        = @order.bill_address.address2
+
+  %div.summary
+    %span.summary-label
+      = t("split_checkout.step1.billing_address.city.label")
+    %span.summary-value
+      = @order.bill_address.city
+
+  %div.summary
+    %span.summary-label
+      = t("split_checkout.step1.billing_address.state_id.label")
+    %span.summary-value
+      = @order.bill_address.state
+
+  %div.summary
+    %span.summary-label
+      = t("split_checkout.step1.billing_address.zipcode.label")
+    %span.summary-value
+      = @order.bill_address.zipcode
+
+  %div.summary
+    %span.summary-label
+      = t("split_checkout.step1.billing_address.country.label")
+    %span.summary-value
+      = @order.bill_address.country
+
+%div.checkout-substep
+  %div.checkout-title
+    = t("split_checkout.step3.delivery_info.title")
+
+  %div.summary
+    %span.summary-label
+      = t("split_checkout.step1.delivery_address.title")
+    %span.summary-value
+      = @order.shipping_method.name
+    %div
+    = @order.shipping_method.description
+  
+    %a.summary-edit{href: main_app.checkout_step_path(:details)}
+      = t("split_checkout.step3.your_details.edit")
+
+%div.checkout-substep
+  %div.checkout-title
+    = t("split_checkout.step3.payment_method.title")
+
+  %div.summary
+    %span.summary-value
+      = last_payment_method(@order)&.name
+      %p.text-small.text-skinny.pre-line
+        %em= last_payment_method(@order)&.description
+    %a.summary-edit{href: main_app.checkout_step_path(:payment)}
+      = t("split_checkout.step3.payment_method.edit")
+
+
+%div.checkout-substep
+  %div.checkout-title
+    = t("split_checkout.step3.order.title")
+  
+  = render 'spree/orders/summary', order: @order
+
+%div.checkout-substep
+  %div.checkout-input
+    = f.check_box :accept_terms, {id: 'accept_terms', "checked": "#{all_terms_and_conditions_already_accepted?}"}
+    = f.label :accept_terms, 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.url, target: '_blank'), tos_link: link_to_platform_terms), {for: "accept_terms"}
+
+  %div.checkout-input
+  = t("split_checkout.step3.agree")
+
+%div.checkout-submit
+  = f.submit t("split_checkout.step3.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.step3.cancel")

app/views/split_checkout/_tabs.html.haml

@@ -1,10 +1,12 @@
 %div.flex
-  %div.columns.three.text-center.checkout-tab{"class": ("selected" if @checkout_step == "details")}
+  %div.columns.three.text-center.checkout-tab{"class": [("selected" if @checkout_step == "details"), ("success" unless @checkout_step == "details")]}
     %span
-      = t("split_checkout.your_details")
-  %div.columns.three.text-center.checkout-tab{"class": ("selected" if @checkout_step == "payment")}
+      = link_to_if (@checkout_step != "details"), t("split_checkout.your_details"), main_app.checkout_step_path(:details), {} do
+        = t("split_checkout.your_details")
+  %div.columns.three.text-center.checkout-tab{"class": [("selected" if @checkout_step == "payment"), ("success" if @checkout_step == "summary")]}
     %span
-      = t("split_checkout.payment_method")
+      = link_to_if (@checkout_step != "payment"), t("split_checkout.payment_method"), main_app.checkout_step_path(:payment), {} do
+        = t("split_checkout.payment_method")
   %div.columns.three.text-center.checkout-tab{"class": ("selected" if @checkout_step == "summary")}
     %span
       = t("split_checkout.order_summary")      

app/views/split_checkout/edit.html.haml

@@ -1,10 +1,6 @@
 - 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

config/locales/en.yml

@@ -1667,6 +1667,25 @@ en:
       explaination: You can review and confirm your order in the next step which includes the final costs.
       submit: Next - Order summary
       cancel: Back to Your details
+    step3:
+      your_details:
+        title: Your details
+        edit: Edit your details
+      billing_address:
+        title: Billing address
+      delivery_info:
+        title: Delivery info
+      payment_method:
+        title: Payment method
+        edit: Edit payment method
+      order:
+        title: Order total
+      terms_and_conditions:
+        message_html: "I agree to the seller's %{terms_and_conditions_link}."
+        link_text: "Terms and Conditions"
+      agree: By clickin 'Complete order' you agree to your order being processed.
+      submit: Complete order
+      cancel: Back to Payment method
     errors:
       required: Field cannot be blank
       invalid_number: "Please enter a valid phone number"