Add new step, second one: payment method

Add payment method form

- select the right form depending on the path

app/views/split_checkout/_form.html.haml

@@ -6,5 +6,7 @@
 = 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
+    - if current_page?(checkout_your_details_path)
+      = render 'split_checkout/your_details', f: f
+    - elsif current_page?(checkout_payment_method_path)
+      = render "split_checkout/payment_method", f: f

app/views/split_checkout/_payment_method.html.haml

@@ -0,0 +1,22 @@
+%div.checkout-substep{"data": {"controller": "paymentmethod"}}
+  %div.checkout-title
+    = t("split_checkout.step2.payment_method.title")
+  - available_payment_methods.each do |payment_method| 
+    %div.checkout-input
+      = f.radio_button :payment_method_id, payment_method.id,
+        id: "payment_method_#{payment_method.id}",
+        "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 }
+
+  %div
+    .panel{"data-paymentmethod-target": "panel", style: "display: none"} 
+      
+
+%div.checkout-substep
+  = t("split_checkout.step2.explaination")
+
+%div.checkout-submit
+  = f.submit t("split_checkout.step2.submit"), class: "button primary", disabled: @terms_and_conditions_accepted == false || @platform_tos_accepted == false
+  %a.button.cancel{href: main_app.checkout_your_details_path}
+    = t("split_checkout.step2.cancel")

app/webpacker/controllers/paymentmethod_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "stimulus";
+export default class extends Controller {
+  static targets = ["panel"];
+
+  selectPaymentMethod(event) {
+    this.panelTarget.innerHTML = `<span>${event.target.dataset.paymentmethodDescription}</span>`;
+    this.panelTarget.style.display = "block";
+  }
+}

config/locales/en.yml

@@ -1661,6 +1661,12 @@ en:
           title: Delivery address
       submit: Next - Payment method
       cancel: Back to Edit basket
+    step2:
+      payment_method:
+        title: Payment method
+      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
     errors:
       required: Field cannot be blank
       invalid_number: "Please enter a valid phone number"