More structured layout for Tag Rules UI

app/assets/javascripts/admin/tag_rules/directives/tag_rules/discount_order.js.coffee

@@ -1,4 +0,0 @@
-angular.module("admin.tagRules").directive "discountOrder", ->
-  restrict: "E"
-  replace: true
-  templateUrl: "admin/tag_rules/discount_order.html"

app/assets/javascripts/admin/tag_rules/directives/tag_rules/filter_order_cycles.js.coffee

@@ -1,4 +0,0 @@
-angular.module("admin.tagRules").directive "filterOrderCycles", ->
-  restrict: "E"
-  replace: true
-  templateUrl: "admin/tag_rules/filter_order_cycles.html"

app/assets/javascripts/admin/tag_rules/directives/tag_rules/filter_payment_methods.js.coffee

@@ -1,4 +0,0 @@
-angular.module("admin.tagRules").directive "filterPaymentMethods", ->
-  restrict: "E"
-  replace: true
-  templateUrl: "admin/tag_rules/filter_payment_methods.html"

app/assets/javascripts/admin/tag_rules/directives/tag_rules/filter_products.js.coffee

@@ -1,4 +0,0 @@
-angular.module("admin.tagRules").directive "filterProducts", ->
-  restrict: "E"
-  replace: true
-  templateUrl: "admin/tag_rules/filter_products.html"

app/assets/javascripts/admin/tag_rules/directives/tag_rules/filter_shipping_methods.js.coffee

@@ -1,4 +0,0 @@
-angular.module("admin.tagRules").directive "filterShippingMethods", ->
-  restrict: "E"
-  replace: true
-  templateUrl: "admin/tag_rules/filter_shipping_methods.html"

app/assets/javascripts/admin/tag_rules/directives/tag_rules/tag_rule.js.coffee

@@ -0,0 +1,41 @@
+angular.module("admin.tagRules").directive "tagRule", ->
+  restrict: "C"
+  templateUrl: "admin/tag_rules/tag_rule.html"
+  link: (scope, element, attrs) ->
+    scope.opt =
+      "TagRule::FilterShippingMethods":
+         textTop: "Shipping methods tagged"
+         textBottom: "are:"
+         taggable: "shipping_method"
+         tagsAttr: "shipping_method_tags"
+         tagListAttr: "preferred_shipping_method_tags"
+         inputTemplate: "admin/tag_rules/filter_shipping_methods_input.html"
+         tagListFor: (rule) ->
+          rule.preferred_shipping_method_tags
+      "TagRule::FilterPaymentMethods":
+         textTop: "Payment methods tagged"
+         textBottom: "are:"
+         taggable: "payment_method"
+         tagsAttr: "payment_method_tags"
+         tagListAttr: "preferred_payment_method_tags"
+         inputTemplate: "admin/tag_rules/filter_payment_methods_input.html"
+         tagListFor: (rule) ->
+          rule.preferred_payment_method_tags
+      "TagRule::FilterOrderCycles":
+         textTop: "Order Cycles tagged"
+         textBottom: "are:"
+         taggable: "exchange"
+         tagsAttr: "exchange_tags"
+         tagListAttr: "preferred_exchange_tags"
+         inputTemplate: "admin/tag_rules/filter_order_cycles_input.html"
+         tagListFor: (rule) ->
+           rule.preferred_exchange_tags
+      "TagRule::FilterProducts":
+         textTop: "Inventory variants tagged"
+         textBottom: "are:"
+         taggable: "variant"
+         tagsAttr: "variant_tags"
+         tagListAttr: "preferred_variant_tags"
+         inputTemplate: "admin/tag_rules/filter_products_input.html"
+         tagListFor: (rule) ->
+           rule.preferred_variant_tags

app/assets/javascripts/templates/admin/tag_rules/discount_order.html.haml

@@ -1,37 +0,0 @@
-%div
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_id",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][id]",
-    ng: { value: "rule.id" } }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_type",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][type]",
-    value: "TagRule::DiscountOrder" }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_customer_tags",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_customer_tags]",
-    ng: { value: "rule.preferred_customer_tags" } }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_calculator_type",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][calculator_type]",
-    value: "Spree::Calculator::FlatPercentItemTotal" }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_calculator_attributes_id",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][calculator_attributes][id]",
-    ng: { value: "rule.calculator.id" } }
-
-  %input{ type: "hidden",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][calculator_attributes][preferred_flat_percent]",
-    ng: { value: "rule.calculator.preferred_flat_percent" } }
-
-  %span.text-normal {{ $index + 1 }}. Orders are discounted by
-  %input{ type: "number",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_calculator_attributes_preferred_flat_percent",
-    min: -100,
-    max: 100,
-    ng: { model: "rule.calculator.preferred_flat_percent" }, 'invert-number' => true }
-  %span.text-normal %

app/assets/javascripts/templates/admin/tag_rules/discount_order_input.html.haml

@@ -0,0 +1,7 @@
+%div
+  %input{ type: "number",
+    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_calculator_attributes_preferred_flat_percent",
+    min: -100,
+    max: 100,
+    ng: { model: "rule.calculator.preferred_flat_percent" }, 'invert-number' => true }
+  %span.text-normal %

app/assets/javascripts/templates/admin/tag_rules/filter_order_cycles.html.haml

@@ -1,27 +0,0 @@
-%div
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_id",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][id]",
-    ng: { value: "rule.id" } }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_type",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][type]",
-    value: "TagRule::FilterOrderCycles" }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_customer_tags",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_customer_tags]",
-    ng: { value: "rule.preferred_customer_tags" } }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_exchange_tags",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_exchange_tags]",
-    ng: { value: "rule.preferred_customer_tags" } }
-
-  %span.text-normal {{ $index + 1 }}. Order Cycles with matching tags are
-  %input.light.ofn-select2{ id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_matched_order_cycles_visibility",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_matched_order_cycles_visibility]",
-    ng: { model: "rule.preferred_matched_order_cycles_visibility"},
-    data: 'visibilityOptions', "min-search" => 5 }
-  -# %tags-with-translation{ object: "rule", "tags-attr" => "shipping_method_tags", "tag-list-attr" => "preferred_shipping_method_tags" }

app/assets/javascripts/templates/admin/tag_rules/filter_order_cycles_input.html.haml

@@ -0,0 +1,4 @@
+%input.fullwidth.light.ofn-select2{ id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_matched_order_cycles_visibility",
+  name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_matched_order_cycles_visibility]",
+  ng: { model: "rule.preferred_matched_order_cycles_visibility"},
+  data: 'visibilityOptions', "min-search" => 5 }

app/assets/javascripts/templates/admin/tag_rules/filter_payment_methods.html.haml

@@ -1,27 +0,0 @@
-%div
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_id",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][id]",
-    ng: { value: "rule.id" } }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_type",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][type]",
-    value: "TagRule::FilterPaymentMethods" }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_customer_tags",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_customer_tags]",
-    ng: { value: "rule.preferred_customer_tags" } }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_payment_method_tags",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_payment_method_tags]",
-    ng: { value: "rule.preferred_customer_tags" } }
-
-  %span.text-normal {{ $index + 1 }}. Payment methods with matching tags are
-  %input.light.ofn-select2{ id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_matched_payment_methods_visibility",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_matched_payment_methods_visibility]",
-    ng: { model: "rule.preferred_matched_payment_methods_visibility"},
-    data: 'visibilityOptions', "min-search" => 5 }
-  -# %tags-with-translation{ object: "rule", "tags-attr" => "payment_method_tags", "tag-list-attr" => "preferred_payment_method_tags" }

app/assets/javascripts/templates/admin/tag_rules/filter_payment_methods_input.html.haml

@@ -0,0 +1,4 @@
+%input.fullwidth.light.ofn-select2{ id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_matched_payment_methods_visibility",
+  name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_matched_payment_methods_visibility]",
+  ng: { model: "rule.preferred_matched_payment_methods_visibility"},
+  data: 'visibilityOptions', "min-search" => 5 }

app/assets/javascripts/templates/admin/tag_rules/filter_products.html.haml

@@ -1,27 +0,0 @@
-%div
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_id",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][id]",
-    ng: { value: "rule.id" } }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_type",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][type]",
-    value: "TagRule::FilterProducts" }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_customer_tags",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_customer_tags]",
-    ng: { value: "rule.preferred_customer_tags" } }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_variant_tags",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_variant_tags]",
-    ng: { value: "rule.preferred_customer_tags" } }
-
-  %span.text-normal {{ $index + 1 }}. Variants with matching tags are
-  %input.light.ofn-select2{ id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_matched_variants_visibility",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_matched_variants_visibility]",
-    ng: { model: "rule.preferred_matched_variants_visibility"},
-    data: 'visibilityOptions', "min-search" => 5 }
-  -# %tags-with-translation{ object: "rule", "tags-attr" => "shipping_method_tags", "tag-list-attr" => "preferred_shipping_method_tags" }

app/assets/javascripts/templates/admin/tag_rules/filter_products_input.html.haml

@@ -0,0 +1,4 @@
+%input.fullwidth.light.ofn-select2{ id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_matched_variants_visibility",
+  name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_matched_variants_visibility]",
+  ng: { model: "rule.preferred_matched_variants_visibility"},
+  data: 'visibilityOptions', "min-search" => 5 }

app/assets/javascripts/templates/admin/tag_rules/filter_shipping_methods.html.haml

@@ -1,27 +0,0 @@
-%div
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_id",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][id]",
-    ng: { value: "rule.id" } }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_type",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][type]",
-    value: "TagRule::FilterShippingMethods" }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_customer_tags",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_customer_tags]",
-    ng: { value: "rule.preferred_customer_tags" } }
-
-  %input{ type: "hidden",
-    id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_shipping_method_tags",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_shipping_method_tags]",
-    ng: { value: "rule.preferred_customer_tags" } }
-
-  %span.text-normal {{ $index + 1 }}. Shipping methods with matching tags are
-  %input.light.ofn-select2{ id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_matched_shipping_methods_visibility",
-    name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_matched_shipping_methods_visibility]",
-    ng: { model: "rule.preferred_matched_shipping_methods_visibility"},
-    data: 'visibilityOptions', "min-search" => 5 }
-  -# %tags-with-translation{ object: "rule", "tags-attr" => "shipping_method_tags", "tag-list-attr" => "preferred_shipping_method_tags" }

app/assets/javascripts/templates/admin/tag_rules/filter_shipping_methods_input.html.haml

@@ -0,0 +1,4 @@
+%input.fullwidth.light.ofn-select2{ id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_matched_shipping_methods_visibility",
+  name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_matched_shipping_methods_visibility]",
+  ng: { model: "rule.preferred_matched_shipping_methods_visibility"},
+  data: 'visibilityOptions', "min-search" => 5 }

app/assets/javascripts/templates/admin/tag_rules/tag_rule.html.haml

@@ -0,0 +1,40 @@
+%div{ id: "tr_{{tagGroup.startIndex + $index}}" }
+  %table
+    %colgroup
+      %col.text{ width: "35%" }
+      %col.inputs{ width: "55%" }
+      %col.actions{ width: "10%" }
+    %tr
+      %td
+        %input{ type: "hidden",
+          id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_id",
+          name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][id]",
+          ng: { value: "rule.id" } }
+
+        %input{ type: "hidden",
+          id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_type",
+          name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][type]",
+          ng: { value: "rule.type" } }
+
+        %input{ type: "hidden",
+          id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_customer_tags",
+          name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_customer_tags]",
+          ng: { value: "rule.preferred_customer_tags" } }
+
+        %input{ type: "hidden",
+          id: "enterprise_tag_rules_attributes_{{tagGroup.startIndex + $index}}_preferred_{{opt[rule.type].taggable}}_tags",
+          name: "enterprise[tag_rules_attributes][{{tagGroup.startIndex + $index}}][preferred_{{opt[rule.type].taggable}}_tags]",
+          ng: { value: "opt[rule.type].tagListFor(rule)" } }
+
+        %span.text-normal {{ opt[rule.type].textTop }}
+      %td
+        %tags-with-translation{ object: "rule", "tags-attr" => "{{opt[rule.type].tagsAttr}}", "tag-list-attr" => "{{opt[rule.type].tagListAttr}}" }
+      %td.actions{ rowspan: 2 }
+        %a{ ng: { click: "deleteTagRule(tagGroup, rule)" }, :class => "delete-tag-rule icon-trash no-text" }
+    %tr
+      %td
+        %span.text-normal {{ opt[rule.type].textBottom }}
+      %td
+        %div{ ng: { include: "opt[rule.type].inputTemplate"} }
+
+  %hr

app/assets/stylesheets/admin/tag_rules.css.scss

@@ -33,22 +33,30 @@
     font-weight: bold;
   }
 
-  table {
-    padding: 0px;
-    margin: 0px 0px 10px 0px;
-
-    tr.tag_rule {
-      border: none;
+  .tag_rule {
+    table {
       padding: 0px;
-      margin: 0px;
+      margin: 0px 0px 10px 0px;
 
-      td {
+      &:hover {
+        td {
+          background-color: #ebf3fb;
+        }
+      }
+
+      tr {
         border: none;
-        padding: 4px 10px 10px 10px;
+        padding: 0px;
         margin: 0px;
 
-        input {
-          width: auto;
+        td {
+          border: none;
+          padding: 2px 10px 2px 10px;
+          margin: 0px;
+
+          input {
+            width: auto;
+          }
         }
       }
     }

app/serializers/api/admin/tag_rule_serializer.rb

@@ -18,7 +18,7 @@ module Api::Admin::TagRule
   end
 
   class FilterShippingMethodsSerializer < BaseSerializer
-    attributes :preferred_matched_shipping_methods_visibility, :shipping_method_tags
+    attributes :preferred_matched_shipping_methods_visibility, :preferred_shipping_method_tags, :shipping_method_tags
 
     def shipping_method_tags
       object.preferred_shipping_method_tags.split(",")
@@ -26,7 +26,7 @@ module Api::Admin::TagRule
   end
 
   class FilterPaymentMethodsSerializer < BaseSerializer
-    attributes :preferred_matched_payment_methods_visibility, :payment_method_tags
+    attributes :preferred_matched_payment_methods_visibility, :preferred_payment_method_tags, :payment_method_tags
 
     def payment_method_tags
       object.preferred_payment_method_tags.split(",")
@@ -34,7 +34,7 @@ module Api::Admin::TagRule
   end
 
   class FilterProductsSerializer < BaseSerializer
-    attributes :preferred_matched_variants_visibility, :variant_tags
+    attributes :preferred_matched_variants_visibility, :preferred_variant_tags, :variant_tags
 
     def variant_tags
       object.preferred_variant_tags.split(",")
@@ -42,7 +42,7 @@ module Api::Admin::TagRule
   end
 
   class FilterOrderCyclesSerializer < BaseSerializer
-    attributes :preferred_matched_order_cycles_visibility, :exchange_tags
+    attributes :preferred_matched_order_cycles_visibility, :preferred_exchange_tags, :exchange_tags
 
     def exchange_tags
       object.preferred_exchange_tags.split(",")

app/views/admin/enterprises/form/_tag_rules.html.haml

@@ -20,16 +20,7 @@
 
         .no_rules{ ng: { show: "tagGroup.rules.length == 0" } }
           No rules apply to this tag yet
-        %table
-          %tr.tag_rule{ id: "tr_{{rule.id}}", ng: { repeat: "rule in tagGroup.rules" } }
-            %td
-              %discount-order{ ng: { if: "::rule.type == 'TagRule::DiscountOrder'" } }
-              %filter-shipping-methods{ ng: { if: "::rule.type == 'TagRule::FilterShippingMethods'" } }
-              %filter-products{ ng: { if: "::rule.type == 'TagRule::FilterProducts'" } }
-              %filter-payment-methods{ ng: { if: "::rule.type == 'TagRule::FilterPaymentMethods'" } }
-              %filter-order_cycles{ ng: { if: "::rule.type == 'TagRule::FilterOrderCycles'" } }
-            %td.actions
-              %a{ ng: { click: "deleteTagRule(tagGroup, rule)" }, :class => "delete-tag-rule icon-trash no-text" }
+        .tag_rule{ ng: { repeat: "rule in tagGroup.rules" } }
         .add_rule.text-center
           %input.button.icon-plus{ type: 'button', value: "+ Add A New Rule", "new-tag-rule-dialog" => true }
       .add_tag

spec/features/admin/tag_rules_spec.rb

@@ -26,25 +26,37 @@ feature 'Tag Rules', js: true do
       click_button '+ Add A New Rule'
       select2_select 'Show or Hide shipping methods at checkout', from: 'rule_type_selector'
       click_button "Add Rule"
-      select2_select "NOT VISIBLE", from: "enterprise_tag_rules_attributes_0_preferred_matched_shipping_methods_visibility"
+      within("#tr_0") do
+        find(:css, "tags-input .tags input").set "volunteers-only\n"
+        select2_select "NOT VISIBLE", from: "enterprise_tag_rules_attributes_0_preferred_matched_shipping_methods_visibility"
+      end
 
       # New FilterProducts Rule
       click_button '+ Add A New Rule'
       select2_select 'Show or Hide variants in my shop', from: 'rule_type_selector'
       click_button "Add Rule"
-      select2_select "VISIBLE", from: "enterprise_tag_rules_attributes_1_preferred_matched_variants_visibility"
+      within("#tr_1") do
+        find(:css, "tags-input .tags input").set "volunteers-only1\n"
+        select2_select "VISIBLE", from: "enterprise_tag_rules_attributes_1_preferred_matched_variants_visibility"
+      end
 
       # New FilterPaymentMethods Rule
       click_button '+ Add A New Rule'
       select2_select 'Show or Hide payment methods at checkout', from: 'rule_type_selector'
       click_button "Add Rule"
-      select2_select "VISIBLE", from: "enterprise_tag_rules_attributes_2_preferred_matched_payment_methods_visibility"
+      within("#tr_2") do
+        find(:css, "tags-input .tags input").set "volunteers-only2\n"
+        select2_select "VISIBLE", from: "enterprise_tag_rules_attributes_2_preferred_matched_payment_methods_visibility"
+      end
 
       # New FilterPaymentMethods Rule
       click_button '+ Add A New Rule'
       select2_select 'Show or Hide order cycles in my shopfront', from: 'rule_type_selector'
       click_button "Add Rule"
-      select2_select "NOT VISIBLE", from: "enterprise_tag_rules_attributes_3_preferred_matched_order_cycles_visibility"
+      within("#tr_3") do
+        find(:css, "tags-input .tags input").set "volunteers-only3\n"
+        select2_select "NOT VISIBLE", from: "enterprise_tag_rules_attributes_3_preferred_matched_order_cycles_visibility"
+      end
 
       # New DiscountOrder Rule
       # click_button '+ Add A New Rule'
@@ -60,32 +72,32 @@ feature 'Tag Rules', js: true do
 
       tag_rule = TagRule::FilterShippingMethods.last
       expect(tag_rule.preferred_customer_tags).to eq "volunteer"
-      expect(tag_rule.preferred_shipping_method_tags).to eq "volunteer"
+      expect(tag_rule.preferred_shipping_method_tags).to eq "volunteers-only"
       expect(tag_rule.preferred_matched_shipping_methods_visibility).to eq "hidden"
 
       tag_rule = TagRule::FilterProducts.last
       expect(tag_rule.preferred_customer_tags).to eq "volunteer"
-      expect(tag_rule.preferred_variant_tags).to eq "volunteer"
+      expect(tag_rule.preferred_variant_tags).to eq "volunteers-only1"
       expect(tag_rule.preferred_matched_variants_visibility).to eq "visible"
 
       tag_rule = TagRule::FilterPaymentMethods.last
       expect(tag_rule.preferred_customer_tags).to eq "volunteer"
-      expect(tag_rule.preferred_payment_method_tags).to eq "volunteer"
+      expect(tag_rule.preferred_payment_method_tags).to eq "volunteers-only2"
       expect(tag_rule.preferred_matched_payment_methods_visibility).to eq "visible"
 
       tag_rule = TagRule::FilterOrderCycles.last
       expect(tag_rule.preferred_customer_tags).to eq "volunteer"
-      expect(tag_rule.preferred_exchange_tags).to eq "volunteer"
+      expect(tag_rule.preferred_exchange_tags).to eq "volunteers-only3"
       expect(tag_rule.preferred_matched_order_cycles_visibility).to eq "hidden"
     end
   end
 
   context "updating" do
-    let!(:do_tag_rule) { create(:tag_rule, enterprise: enterprise, preferred_customer_tags: "member" ) }
-    let!(:fsm_tag_rule) { create(:filter_shipping_methods_tag_rule, enterprise: enterprise, preferred_matched_shipping_methods_visibility: "hidden", preferred_customer_tags: "member" ) }
-    let!(:fp_tag_rule) { create(:filter_products_tag_rule, enterprise: enterprise, preferred_matched_variants_visibility: "visible", preferred_customer_tags: "member" ) }
-    let!(:fpm_tag_rule) { create(:filter_payment_methods_tag_rule, enterprise: enterprise, preferred_matched_payment_methods_visibility: "hidden", preferred_customer_tags: "member" ) }
-    let!(:foc_tag_rule) { create(:filter_order_cycles_tag_rule, enterprise: enterprise, preferred_matched_order_cycles_visibility: "visible", preferred_customer_tags: "member" ) }
+    let!(:fsm_tag_rule) { create(:filter_shipping_methods_tag_rule, enterprise: enterprise, preferred_matched_shipping_methods_visibility: "hidden", preferred_customer_tags: "local", preferred_shipping_method_tags: "local" ) }
+    let!(:fp_tag_rule) { create(:filter_products_tag_rule, enterprise: enterprise, preferred_matched_variants_visibility: "visible", preferred_customer_tags: "member", preferred_variant_tags: "member" ) }
+    let!(:fpm_tag_rule) { create(:filter_payment_methods_tag_rule, enterprise: enterprise, preferred_matched_payment_methods_visibility: "hidden", preferred_customer_tags: "trusted", preferred_payment_method_tags: "trusted" ) }
+    let!(:foc_tag_rule) { create(:filter_order_cycles_tag_rule, enterprise: enterprise, preferred_matched_order_cycles_visibility: "visible", preferred_customer_tags: "wholesale", preferred_exchange_tags: "wholesale" ) }
+    # let!(:do_tag_rule) { create(:tag_rule, enterprise: enterprise, preferred_customer_tags: "member" ) }
 
     before do
       login_to_admin_section
@@ -95,56 +107,77 @@ feature 'Tag Rules', js: true do
     it "saves changes to rules of each type" do
       click_link "Tag Rules"
 
-      # Tag group exists
-      expect(first('.customer_tag .header')).to have_content "For customers tagged:"
-      expect(first('tags-input .tag-list ti-tag-item')).to have_content "member"
-      find(:css, "tags-input .tags input").set "volunteer\n"
-
-      # DiscountOrder rule
-      expect(page).to have_field "enterprise_tag_rules_attributes_0_calculator_attributes_preferred_flat_percent", with: '0'
-      fill_in "enterprise_tag_rules_attributes_0_calculator_attributes_preferred_flat_percent", with: 45
+      # Tag groups exist
+      expect(page).to have_selector '.customer_tag .header', text: "For customers tagged:", count: 4
+      expect(page).to have_selector '.customer_tag .header tags-input .tag-list ti-tag-item', text: "member", count: 1
+      expect(page).to have_selector '.customer_tag .header tags-input .tag-list ti-tag-item', text: "local", count: 1
+      expect(page).to have_selector '.customer_tag .header tags-input .tag-list ti-tag-item', text: "wholesale", count: 1
+      expect(page).to have_selector '.customer_tag .header tags-input .tag-list ti-tag-item', text: "trusted", count: 1
+      all(:css, ".customer_tag .header tags-input .tags input").each { |node| node.set "volunteer\n" }
 
       # FilterShippingMethods rule
-      expect(page).to have_select2 "enterprise_tag_rules_attributes_1_preferred_matched_shipping_methods_visibility", selected: 'NOT VISIBLE'
-      select2_select 'VISIBLE', from: "enterprise_tag_rules_attributes_1_preferred_matched_shipping_methods_visibility"
+      within "#tr_0" do
+        expect(first('tags-input .tag-list ti-tag-item')).to have_content "local"
+        find(:css, "tags-input .tags input").set "volunteers-only\n"
+        expect(page).to have_select2 "enterprise_tag_rules_attributes_0_preferred_matched_shipping_methods_visibility", selected: 'NOT VISIBLE'
+        select2_select 'VISIBLE', from: "enterprise_tag_rules_attributes_0_preferred_matched_shipping_methods_visibility"
+      end
 
       # FilterProducts rule
-      expect(page).to have_select2 "enterprise_tag_rules_attributes_2_preferred_matched_variants_visibility", selected: 'VISIBLE'
-      select2_select 'NOT VISIBLE', from: "enterprise_tag_rules_attributes_2_preferred_matched_variants_visibility"
+      within "#tr_1" do
+        expect(first('tags-input .tag-list ti-tag-item')).to have_content "member"
+        find(:css, "tags-input .tags input").set "volunteers-only1\n"
+        expect(page).to have_select2 "enterprise_tag_rules_attributes_1_preferred_matched_variants_visibility", selected: 'VISIBLE'
+        select2_select 'NOT VISIBLE', from: "enterprise_tag_rules_attributes_1_preferred_matched_variants_visibility"
+      end
 
       # FilterPaymentMethods rule
-      expect(page).to have_select2 "enterprise_tag_rules_attributes_3_preferred_matched_payment_methods_visibility", selected: 'NOT VISIBLE'
-      select2_select 'VISIBLE', from: "enterprise_tag_rules_attributes_3_preferred_matched_payment_methods_visibility"
+      within "#tr_2" do
+        expect(first('tags-input .tag-list ti-tag-item')).to have_content "trusted"
+        find(:css, "tags-input .tags input").set "volunteers-only2\n"
+        expect(page).to have_select2 "enterprise_tag_rules_attributes_2_preferred_matched_payment_methods_visibility", selected: 'NOT VISIBLE'
+        select2_select 'VISIBLE', from: "enterprise_tag_rules_attributes_2_preferred_matched_payment_methods_visibility"
+      end
 
-      # FilterPaymentMethods rule
-      expect(page).to have_select2 "enterprise_tag_rules_attributes_4_preferred_matched_order_cycles_visibility", selected: 'VISIBLE'
-      select2_select 'NOT VISIBLE', from: "enterprise_tag_rules_attributes_4_preferred_matched_order_cycles_visibility"
+      # FilterOrderCycles rule
+      within "#tr_3" do
+        expect(first('tags-input .tag-list ti-tag-item')).to have_content "wholesale"
+        find(:css, "tags-input .tags input").set "volunteers-only3\n"
+        expect(page).to have_select2 "enterprise_tag_rules_attributes_3_preferred_matched_order_cycles_visibility", selected: 'VISIBLE'
+        select2_select 'NOT VISIBLE', from: "enterprise_tag_rules_attributes_3_preferred_matched_order_cycles_visibility"
+      end
+
+      # # DiscountOrder rule
+      # within "#tr_2" do
+      #   expect(page).to have_field "enterprise_tag_rules_attributes_2_calculator_attributes_preferred_flat_percent", with: '0'
+      #   fill_in "enterprise_tag_rules_attributes_2_calculator_attributes_preferred_flat_percent", with: 45
+      # end
 
       click_button 'Update'
 
-      # DiscountOrder rule
-      expect(do_tag_rule.preferred_customer_tags).to eq "member,volunteer"
-      expect(do_tag_rule.calculator.preferred_flat_percent).to eq -45
-
       # FilterShippingMethods rule
-      expect(fsm_tag_rule.preferred_customer_tags).to eq "member,volunteer"
-      expect(fsm_tag_rule.preferred_shipping_method_tags).to eq "member,volunteer"
+      expect(fsm_tag_rule.preferred_customer_tags).to eq "local,volunteer"
+      expect(fsm_tag_rule.preferred_shipping_method_tags).to eq "local,volunteers-only"
       expect(fsm_tag_rule.preferred_matched_shipping_methods_visibility).to eq "visible"
 
       # FilterProducts rule
       expect(fp_tag_rule.preferred_customer_tags).to eq "member,volunteer"
-      expect(fp_tag_rule.preferred_variant_tags).to eq "member,volunteer"
+      expect(fp_tag_rule.preferred_variant_tags).to eq "member,volunteers-only1"
       expect(fp_tag_rule.preferred_matched_variants_visibility).to eq "hidden"
 
       # FilterPaymentMethods rule
-      expect(fpm_tag_rule.preferred_customer_tags).to eq "member,volunteer"
-      expect(fpm_tag_rule.preferred_payment_method_tags).to eq "member,volunteer"
+      expect(fpm_tag_rule.preferred_customer_tags).to eq "trusted,volunteer"
+      expect(fpm_tag_rule.preferred_payment_method_tags).to eq "trusted,volunteers-only2"
       expect(fpm_tag_rule.preferred_matched_payment_methods_visibility).to eq "visible"
 
       # FilterPaymentMethods rule
-      expect(foc_tag_rule.preferred_customer_tags).to eq "member,volunteer"
-      expect(foc_tag_rule.preferred_exchange_tags).to eq "member,volunteer"
+      expect(foc_tag_rule.preferred_customer_tags).to eq "wholesale,volunteer"
+      expect(foc_tag_rule.preferred_exchange_tags).to eq "wholesale,volunteers-only3"
       expect(foc_tag_rule.preferred_matched_order_cycles_visibility).to eq "hidden"
+
+      # DiscountOrder rule
+      # expect(do_tag_rule.preferred_customer_tags).to eq "member,volunteer"
+      # expect(do_tag_rule.calculator.preferred_flat_percent).to eq -45
     end
   end
 
@@ -159,13 +192,13 @@ feature 'Tag Rules', js: true do
     it "deletes rules from the database" do
       click_link "Tag Rules"
 
-      expect(page).to have_selector "#tr_#{tag_rule.id}"
+      expect(page).to have_selector "#tr_0"
 
       expect{
-        within "#tr_#{tag_rule.id}" do
+        within "#tr_0" do
           first("a.delete-tag-rule").click
         end
-        expect(page).to_not have_selector "#tr_#{tag_rule.id}"
+        expect(page).to_not have_selector "#tr_0"
       }.to change{TagRule.count}.by(-1)
     end
   end