Promotions UI: Make option value picker depend on product ID

When creating an option value condition, we only want to have option
values that fit the product in question. This commit makes it such that
the option value picker re-initializes when the selected product
changes.

Author: mamhoff

promotions/app/javascript/backend/solidus_promotions/controllers/product_option_values_controller.js

@@ -6,16 +6,13 @@ export default class extends Controller {
   connect() {
     this.wrapperClass =
       this.data.get("wrapperClass") || "promo-condition-option-value";
-
-    this.element.querySelectorAll("." + this.wrapperClass).forEach((element) => this.buildSelects(element))
   }
 
   add_row(event) {
     event.preventDefault();
 
     var content = this.templateTarget.innerHTML;
     this.linksTarget.insertAdjacentHTML("beforebegin", content);
-    this.buildSelects(this.linksTarget.previousElementSibling)
   }
 
   propagate_product_id_to_value_input(event) {
@@ -24,7 +21,9 @@ export default class extends Controller {
     // we first need to greedily match all other square brackets
     const regEx = /(\[.*\])\[.*?\]$/;
     let wrapper = event.target.closest("." + this.wrapperClass);
-    let optionValuesInput = wrapper.querySelector(".option-values-select[type='hidden']");
+    let optionValuesInput = wrapper.querySelector("[is=option-value-picker]");
+    optionValuesInput.dataset.productId = event.target.value;
+    optionValuesInput.value = "";
     optionValuesInput.name = optionValuesInput.name.replace(
       regEx,
       `$1[${event.target.value}]`
@@ -37,26 +36,4 @@ export default class extends Controller {
     let wrapper = event.target.closest("." + this.wrapperClass);
     wrapper.remove();
   }
-
-  // helper functions
-
-  buildSelects(wrapper) {
-    let productSelect = wrapper.querySelector(".product-select")
-    let optionValueSelect = wrapper.querySelector(".option-values-select[type='hidden']")
-    this.buildProductSelect(productSelect)
-    $(optionValueSelect).optionValueAutocomplete({ productSelect });
-  }
-
-  buildProductSelect(productSelect) {
-    var jQueryProductSelect = $(productSelect)
-    jQueryProductSelect.productAutocomplete({
-      multiple: false,
-    })
-    // capture the jQuery "change" event and re-emit it as DOM event "select2Change"
-    // so that Stimulus can capture it
-    jQueryProductSelect.on('change', function () {
-      let event = new Event('select2Change', { bubbles: true }) // fire a native event
-      productSelect.dispatchEvent(event);
-    });
-  }
 }

promotions/app/javascript/backend/solidus_promotions/web_components/option_value_picker.js

@@ -1,11 +1,9 @@
 $.fn.optionValueAutocomplete = function (options) {
-  'use strict';
+  "use strict";
 
   // Default options
-  options = options || {}
-  var multiple = typeof(options['multiple']) !== 'undefined' ? options['multiple'] : true;
-  var productSelect = options['productSelect'];
-
+  options = options || {};
+  var multiple = typeof options["multiple"] !== "undefined" ? options["multiple"] : true;
   function formatOptionValue(option_value) {
     return Select2.util.escapeMarkup(option_value.name);
   }
@@ -14,44 +12,58 @@ $.fn.optionValueAutocomplete = function (options) {
     minimumInputLength: 3,
     multiple: multiple,
     initSelection: function (element, callback) {
-      $.get(Spree.pathFor('api/option_values'), {
-        ids: element.val().split(','),
-        token: Spree.api_key
-      }, function (data) {
-        callback(multiple ? data : data[0]);
-      });
+      $.get(
+        Spree.pathFor("api/option_values"),
+        {
+          ids: element.val().split(","),
+          token: Spree.api_key,
+        },
+        function (data) {
+          callback(multiple ? data : data[0]);
+        }
+      );
     },
     ajax: {
-      url: Spree.pathFor('api/option_values'),
-      datatype: 'json',
+      url: Spree.pathFor("api/option_values"),
+      datatype: "json",
       data: function (term, page) {
-        var productId = typeof(productSelect) !== 'undefined' ? $(productSelect).select2('val') : null;
+        var productId = this[0].dataset.productId;
         return {
           q: {
             name_cont: term,
-            variants_product_id_eq: productId
+            variants_product_id_eq: productId,
           },
-          token: Spree.api_key
+          token: Spree.api_key,
         };
       },
       results: function (data, page) {
         return { results: data };
-      }
+      },
     },
     formatResult: formatOptionValue,
-    formatSelection: formatOptionValue
+    formatSelection: formatOptionValue,
   });
 };
 
 class OptionValuePicker extends HTMLInputElement {
   connectedCallback() {
-    const container = this.closest(".promo-condition-option-value");
-    const productPicker = container.querySelector('input[is="product-picker"]');
+    $(this).optionValueAutocomplete();
 
-    $(this).optionValueAutocomplete({
-      productSelect: productPicker,
+    this.observer = new MutationObserver((muts) => {
+      for (const m of muts) {
+        if (m.attributeName.startsWith("data-product-id")) {
+          this.restart();
+        }
+      }
     });
+
+    this.observer.observe(this, { attributes: true });
+  }
+
+  restart() {
+    $(this).select2("destroy");
+    $(this).optionValueAutocomplete();
   }
 }
 
-customElements.define('option-value-picker', OptionValuePicker, { extends: 'input' });
+customElements.define("option-value-picker", OptionValuePicker, { extends: "input" });

promotions/app/javascript/backend/solidus_promotions/web_components/product_picker.js

@@ -2,6 +2,10 @@ class ProductPicker extends HTMLInputElement {
   connectedCallback() {
     const multiple = this.dataset.multiple !== "false";
     $(this).productAutocomplete({ multiple });
+    $(this).on("change", (_) => {
+      let event = new Event('select2Change', { bubbles: true }) // fire a native event
+      this.dispatchEvent(event)
+    })
   }
 }
 

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

@@ -15,6 +15,7 @@
       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>