Fix appearance and specs for option value condition

Author: mamhoff

promotions/config/locales/en.yml

@@ -210,7 +210,7 @@ en:
       solidus_promotions/conditions/one_use_per_user: One Use Per User
       solidus_promotions/conditions/order_option_value: Order matches selected option values
       solidus_promotions/conditions/option_value: Order matches selected option values, restricts line items
-      solidus_promotions/conditions/line_item_option_value: Line Item variant matches options values
+      solidus_promotions/conditions/line_item_option_value: Line Item variant matches option values
       solidus_promotions/conditions/order_product: Order contains selected products
       solidus_promotions/conditions/product: Order contains selected products, restricts line items
       solidus_promotions/conditions/line_item_product: Line item has selected product

promotions/lib/views/backend/solidus_promotions/admin/condition_fields/_line_item_option_value.html.erb

@@ -5,19 +5,20 @@
 <div class="field promo-condition-option-values">
   <div class="param-prefix hidden" data-param-prefix="<%= param_prefix %>"></div>
   <div class="row">
-    <div class="col-6"><%= label_tag nil, Spree::Product.model_name.human %></div>
+    <div class="col-5"><%= label_tag nil, Spree::Product.model_name.human %></div>
     <div class="col-6"><%= label_tag nil, plural_resource_name(Spree::OptionValue) %></div>
+    <div class="col-1">&nbsp;</div>
   </div>
 
   <div class="form-group">
     <div data-controller="product-option-values">
       <template data-product-option-values-target="template">
-        <%= render "solidus_promotions/admin/condition_fields/line_item_option_value/option_value_fields", product_option_values: [nil, []], form: form %>
+        <%= render "solidus_promotions/admin/condition_fields/line_item_option_value/option_value_fields", product_option_values: [nil, []], form: form, index: 0 %>
       </template>
-      <% form.object.preferred_eligible_values.each do |product_option_values| %>
-        <%= render "solidus_promotions/admin/condition_fields/line_item_option_value/option_value_fields", product_option_values: product_option_values, form: form %>
+      <% form.object.preferred_eligible_values.each.with_index do |product_option_values, index| %>
+        <%= render "solidus_promotions/admin/condition_fields/line_item_option_value/option_value_fields", product_option_values:, form:, index: %>
       <% end %>
-      <div class="mb-3" data-product-option-values-target="links">
+      <div class="mt-3" data-product-option-values-target="links">
         <%= link_to t(:add_product, scope: [:solidus_promotions, :line_item_option_value_condition]), "#", class: "btn btn-outline-primary", data: { action: "click->product-option-values#add_row" } %>
       </div>
     </div>

promotions/lib/views/backend/solidus_promotions/admin/condition_fields/_option_value.html.erb

@@ -7,19 +7,20 @@
   <div class="field promo-condition-option-values">
     <div class="param-prefix hidden" data-param-prefix="<%= param_prefix %>"></div>
     <div class="row">
-      <div class="col-6"><%= label_tag nil, Spree::Product.model_name.human %></div>
+      <div class="col-5"><%= label_tag nil, Spree::Product.model_name.human %></div>
       <div class="col-6"><%= label_tag nil, plural_resource_name(Spree::OptionValue) %></div>
+      <div class="col-1">&nbsp;</div>
     </div>
 
     <div class="form-group">
       <div data-controller="product-option-values">
         <template data-product-option-values-target="template">
-          <%= render "solidus_promotions/admin/condition_fields/line_item_option_value/option_value_fields", product_option_values: [nil, []], form: form %>
+          <%= render "solidus_promotions/admin/condition_fields/line_item_option_value/option_value_fields", product_option_values: [nil, []], form:, index: 0 %>
         </template>
-        <% form.object.preferred_eligible_values.each do |product_option_values| %>
-          <%= render "solidus_promotions/admin/condition_fields/line_item_option_value/option_value_fields", product_option_values: product_option_values, form: form %>
+        <% form.object.preferred_eligible_values.each.with_index do |product_option_values, index| %>
+          <%= render "solidus_promotions/admin/condition_fields/line_item_option_value/option_value_fields", product_option_values:, form:, index: %>
         <% end %>
-        <div class="mb-3" data-product-option-values-target="links">
+        <div class="mt-3" data-product-option-values-target="links">
           <%= link_to t(:add_product, scope: [:solidus_promotions, :option_value_condition]), "#", class: "btn btn-outline-primary", data: { action: "click->product-option-values#add_row" } %>
         </div>
       </div>

promotions/lib/views/backend/solidus_promotions/admin/condition_fields/line_item_option_value/_option_value_fields.html.erb

@@ -1,23 +1,27 @@
-<div class="fullwidth promo-condition-option-value d-flex align-content-stretch mb-3">
-  <div class="mr-2" style="flex-grow: 1;">
+<div class="promo-condition-option-value row">
+  <div class="col-5">
     <input
       is="product-picker"
+      id="ov-product-picker-<%= index %>"
       class="w-100"
       data-action="select2Change->product-option-values#propagate_product_id_to_value_input"
       data-multiple="false"
       type="hidden"
       value="<%= product_option_values[0] %>"
     >
   </div>
-  <div class="mr-2 ml-2" style="flex-grow: 1;">
+  <div class="col-6">
     <input
       is="option-value-picker"
+      id="option-value-picker-<%= index %>"
       class="fullwidth"
       name="<%= form.object_name %>[preferred_eligible_values][<%= product_option_values[0] %>]"
       type="hidden"
       data-product-id="<%= product_option_values[0] %>"
       value="<%= product_option_values[1].join(",") %>"
     >
   </div>
-  <a class="fa fa-trash remove p-2" data-action="click->product-option-values#remove_row"></a>
+  <div class="col-1">
+    <a class="fa fa-trash remove p-2 float-right" data-action="click->product-option-values#remove_row"></a>
+  </div>
 </div>

promotions/spec/system/solidus_promotions/backend/promotions_spec.rb

@@ -168,20 +168,21 @@
     let!(:option_value) { create(:option_value) }
     let!(:variant) { create(:variant, product: product, option_values: [option_value]) }
 
-    it "allows adding a line_item_with_options condition", :js do
+    it "allows adding an option value condition", :js do
       visit solidus_promotions.edit_admin_promotion_path(promotion_with_benefit)
       click_link "Add Condition"
-      select("Line Item Option Value(s)", from: "Condition Type")
+      select("Line Item variant matches option values", from: "Condition Type")
       click_button "Add"
-      expect(page).to have_content("Line Item Option Value(s)")
+      expect(page).to have_content("Line Item variant matches option values")
       click_link "Add product"
       within(".promo-condition-option-value") do
-        # find('.select2-focusser').set(product.name)
-        # find('.select2-input').set(option_value.name)
+        targetted_select2_search(product.name, from: "#s2id_ov-product-picker-0")
+        targetted_select2_search(option_value.name, from: "#s2id_option-value-picker-0")
       end
       within("#benefits_adjust_line_item_#{promotion_with_benefit.benefits.first.id}_conditions") do
-        find('input[type="submit"]', wait: 5).click
+        click_button("Update")
       end
+      expect(page).to have_content("Condition has been successfully updated!")
     end
   end
 end