Fix CSS/layout issues

app/controllers/voucher_adjustments_controller.rb

@@ -61,7 +61,14 @@ class VoucherAdjustmentsController < BaseController
     flash.now[:error] = @order.errors.full_messages.to_sentence
 
     render status: :unprocessable_entity, cable_ready: cable_car.
-      replace("#flashes", partial("shared/flashes", locals: { flashes: flash }))
+      replace("#flashes", partial("shared/flashes", locals: { flashes: flash })).
+      replace(
+        "#voucher-section",
+        partial(
+          "split_checkout/voucher_section",
+          locals: { order: @order, voucher_adjustment: @order.voucher_adjustments.first }
+        )
+      )
   end
 
   def voucher_params

app/views/split_checkout/_voucher_section.html.haml

@@ -1,19 +1,25 @@
 %div#voucher-section
   .checkout-title
     = t("split_checkout.step2.voucher.apply_voucher")
-  .checkout-input
-    .two-columns-inputs.voucher{"data-controller": "toggle-button-disabled"}
+  .checkout-input{"data-controller": "toggle-button-disabled"}
+    = form_with url: voucher_adjustments_path, model: @order, method: :post, data: { remote: true } do |form|
       - if voucher_adjustment.present?
-        %span.button.voucher-added
-          %i.ofn-i_051-check-big
-            = t("split_checkout.step2.voucher.voucher", voucher_amount: voucher_adjustment.originator.display_value)
-        = link_to t("split_checkout.step2.voucher.remove_code"), voucher_adjustment_path(id: voucher_adjustment.id), method: "delete", data: { confirm: t("split_checkout.step2.voucher.confirm_delete") }
-        - # This might not be true, ie payment method including a fee which wouldn't be covered by voucher or tax implication raising total to be bigger than the voucher amount ?
-        - if voucher_adjustment.originator.amount > order.total
-          .checkout-input
-            %span.formError.standalone
-              = t("split_checkout.step2.voucher.warning_forfeit_remaining_amount")
+        .two-columns-inputs.voucher
+          %span.button.voucher-added
+            %i.ofn-i_051-check-big
+              = t("split_checkout.step2.voucher.voucher", voucher_amount: voucher_adjustment.originator.display_value)
+          = link_to t("split_checkout.step2.voucher.remove_code"), voucher_adjustment_path(id: voucher_adjustment.id), method: "delete", data: { confirm: t("split_checkout.step2.voucher.confirm_delete") }
+
+          - # This might not be true, ie payment method including a fee which wouldn't be covered by voucher or tax implication raising total to be bigger than the voucher amount ?
+          - if voucher_adjustment.originator.amount > order.total
+            .checkout-input
+              %span.formError.standalone
+                = t("split_checkout.step2.voucher.warning_forfeit_remaining_amount")
       - else
-        = form_with url: voucher_adjustments_path, model: @order, method: :post, data: { remote: true } do |form|
-          = form.text_field :voucher_code, value: params.dig(:order, :voucher_code), data: { action: "input->toggle-button-disabled#inputIsChanged" }, placeholder: t("split_checkout.step2.voucher.placeholder"), class: "voucher"
-          = form.submit t("split_checkout.step2.voucher.apply"), disabled: true, class: "button cancel voucher", "data-disable-with": false, data: { "toggle-button-disabled-target": "button" }
+        .two-columns-inputs
+          %div.checkout-input
+            = form.text_field :voucher_code, value: params.dig(:order, :voucher_code), data: { action: "input->toggle-button-disabled#inputIsChanged" }, placeholder: t("split_checkout.step2.voucher.placeholder"), class: "voucher"
+            = form.error_message_on :voucher_code
+
+          %div.checkout-input
+            = form.submit t("split_checkout.step2.voucher.apply"), disabled: true, class: "button cancel voucher-button", "data-disable-with": false, data: { "toggle-button-disabled-target": "button" }

app/webpacker/css/darkswarm/split-checkout.scss

@@ -412,22 +412,18 @@
     justify-content: normal;
     align-items: center;
 
-    input {
-      width: 50%;
-    }
-
     a {
       color: inherit;
     }
+  }
 
-    .button {
-      &.cancel {
-        width: 30%;
-        border-radius: 0.5em;
-        padding:0;
-        height: 2.5em;
-        background-color: $teal-400
-      }
+  .voucher-button {
+    &.cancel {
+      width: 30%;
+      border-radius: 0.35em;
+      padding:0;
+      height: 2.5em;
+      background-color: $teal-400
     }
   }
   

spec/system/consumer/split_checkout_spec.rb

@@ -788,9 +788,10 @@ describe "As a consumer, I want to checkout my order" do
                 click_on "Remove code"
               end
 
-              within '.voucher' do
+              within '#voucher-section' do
                 expect(page).to have_button("Apply", disabled: true)
               end
+
               expect(order.voucher_adjustments.length).to eq(0)
             end
           end