From 57d719133262a4a374ddca948602dfb4ed39cdc0 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 1 Jul 2021 15:03:18 +0200
Subject: [PATCH] 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 +++--
 .../split_checkout/_payment_method.html.haml  | 22 +++++++++++++++++++
 .../controllers/paymentmethod_controller.js   |  9 ++++++++
 config/locales/en.yml                         |  6 +++++
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 app/views/split_checkout/_payment_method.html.haml
 create mode 100644 app/webpacker/controllers/paymentmethod_controller.js

diff --git a/app/views/split_checkout/_form.html.haml b/app/views/split_checkout/_form.html.haml
index 7c8ebf418d..f60493a1c1 100644
--- a/app/views/split_checkout/_form.html.haml
+++ b/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
diff --git a/app/views/split_checkout/_payment_method.html.haml b/app/views/split_checkout/_payment_method.html.haml
new file mode 100644
index 0000000000..4a5308ba8e
--- /dev/null
+++ b/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")
diff --git a/app/webpacker/controllers/paymentmethod_controller.js b/app/webpacker/controllers/paymentmethod_controller.js
new file mode 100644
index 0000000000..ac1c9dff60
--- /dev/null
+++ b/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";
+  }
+}
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 77abd79bcb..3112ac9da4 100644
--- a/config/locales/en.yml
+++ b/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"