From f7ee01b9f8f1d1539a14b0ea7d937ddabc1c16bd Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Wed, 8 Mar 2023 14:35:12 +1100
Subject: [PATCH] Add voucher input on checkout payment's step

Voucher input is displayed  only if the distributor has any voucher
---
 app/views/split_checkout/_payment.html.haml   | 10 ++++++++
 .../css/darkswarm/split-checkout.scss         | 21 ++++++++++++++++
 config/locales/en.yml                         |  4 ++++
 spec/system/consumer/split_checkout_spec.rb   | 24 +++++++++++++++++++
 4 files changed, 59 insertions(+)

diff --git a/app/views/split_checkout/_payment.html.haml b/app/views/split_checkout/_payment.html.haml
index 0e98fe6df4..6c743a33cd 100644
--- a/app/views/split_checkout/_payment.html.haml
+++ b/app/views/split_checkout/_payment.html.haml
@@ -1,5 +1,15 @@
 .medium-6
   %div.checkout-substep{"data-controller": "paymentmethod"}
+    - if @order.distributor.vouchers.present?
+      .checkout-title
+        = t("split_checkout.step2.voucher.apply_voucher")
+
+      .checkout-input.voucher
+        .two-columns-inputs.voucher
+          = f.text_field :voucher_code, { placeholder: t("split_checkout.step2.voucher.placeholder"), class: "voucher" }
+          - # TODO: enable button when code entered
+          = f.submit t("split_checkout.step2.voucher.apply"), class: "button cancel voucher", disabled: true 
+        
     %div.checkout-title
       = t("split_checkout.step2.payment_method.title")
 
diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss
index 96c351e198..259a9bbfa4 100644
--- a/app/webpacker/css/darkswarm/split-checkout.scss
+++ b/app/webpacker/css/darkswarm/split-checkout.scss
@@ -404,6 +404,22 @@
   gap: 1rem;
   justify-content: space-between;
 
+  &.voucher {
+    justify-content: normal;
+
+    input {
+      width: 50%;
+    }
+
+    .button {
+      &.cancel {
+        width: 30%;
+        border-radius: 0.5em;
+        padding:0;
+      }
+    }
+  }
+
   > .checkout-input {
     flex: 1;
   }
@@ -418,6 +434,11 @@
     &:last-child > .checkout-input {
       margin-bottom: 1.5rem;
     }
+
+    &.voucher {
+      flex-direction: row;
+      gap: 1rem;
+    }
   }
 }
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index c8a9ab96fc..993f2f8406 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2055,6 +2055,10 @@ 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
+      voucher:
+        apply_voucher: Apply voucher 
+        apply: Apply 
+        placeholder: Enter voucher code
     step3:
       delivery_details:
         title: Delivery details
diff --git a/spec/system/consumer/split_checkout_spec.rb b/spec/system/consumer/split_checkout_spec.rb
index e114184a0e..d274bafd7a 100644
--- a/spec/system/consumer/split_checkout_spec.rb
+++ b/spec/system/consumer/split_checkout_spec.rb
@@ -708,6 +708,30 @@ describe "As a consumer, I want to checkout my order" do
         end
       end
 
+      describe "vouchers" do
+        context "with no voucher available" do
+          before do
+            visit checkout_step_path(:payment)
+          end
+
+          it "doesn't show voucher input" do
+            expect(page).not_to have_content "Apply voucher"
+          end
+        end
+
+        context "with voucher available" do
+          let!(:voucher) { Voucher.create(code: 'some_code', enterprise: distributor) }
+
+          before do
+            visit checkout_step_path(:payment)
+          end
+
+          it "shows voucher input" do
+            expect(page).to have_content "Apply voucher"
+          end
+        end
+      end
+
       describe "choosing" do
         shared_examples "different payment methods" do |pay_method|
           context "checking out with #{pay_method}", if: pay_method.eql?("Stripe SCA") == false do