@oxyshop/admin 1.3.48 → 1.3.49

package/lib/index.js

@@ -25,14 +25,13 @@ import 'semantic-ui-css/components/visibility';
 import 'semantic-ui-css/components/visit';
 import 'jquery.dirtyforms/jquery.dirtyforms';
 import 'chart.js/dist/Chart.min';
-import Chart$1 from 'chart.js';
-import { axios } from '@oxyshop/shop/lib/plugins/Axios';
-import axios$1 from 'axios';
 import 'semantic-ui-css/semantic.css';
 import '@oxyshop/admin/scss/main.scss';
 import '@oxyshop/admin/lib/style.css';
 import '@oxyshop/admin/images/logo.png';
 import '@oxyshop/admin/images/admin-logo.svg';
+import '@oxyshop/admin/images/50x50.png';
+import { axios } from '@oxyshop/shop/lib/plugins/Axios';
 
 window.$ = $$1;
 window.jQuery = $$1;
@@ -437,12 +436,13 @@ $$1.fn.extend({
                 $$1(`<div class="item" data-value="${item[choiceValue]}">${item[choiceName]}</div>`)
               ));
             });
-
-            element.dropdown('refresh');
-            element.dropdown('set selected', element.find('input.autocomplete').val().split(',').filter(String));
           },
         });
       }
+
+      window.setTimeout(() => {
+        element.dropdown('set selected', element.find('input.autocomplete').val().split(',').filter(String));
+      }, 5000);
     });
   },
 });
@@ -473,12 +473,12 @@ const controlAttributesList = function controlAttributesList() {
 };
 
 const modifyAttributesListOnSelectorElementDelete = function modifyAttributesListOnSelectorElementDelete(removedValue) {
-  $$1(`#attributesContainer .attributes-group[data-attribute-code="${removedValue}"]`).remove();
+  $$1(`#attributesContainer .attribute[data-id="${removedValue}"]`).remove();
 };
 
 const modifySelectorOnAttributesListElementDelete = function modifySelectorOnAttributesListElementDelete() {
-  $$1('.attributes-group button[data-attribute="delete"]').off('click').on('click', (event) => {
-    const attributeId = $$1(event.currentTarget).parents('.attributes-group').attr('data-attribute-code');
+  $$1('.attribute button').off('click').on('click', (event) => {
+    const attributeId = $$1(event.currentTarget).parents('.attribute').attr('data-id');
 
     $$1('div#attributeChoice > .ui.dropdown.search').dropdown('remove selected', attributeId);
     modifyAttributesListOnSelectorElementDelete(attributeId);
@@ -507,31 +507,6 @@ const isInTheAttributesContainer = function isInTheAttributesContainer(attribute
   return result;
 };
 
-const copyValueToAllLanguages = function copyValueToAllLanguages() {
-  $$1('#attributesContainer').on('click', '.attribute [data-attribute="copy"]', (event) => {
-    event.preventDefault();
-
-    const $attributesContainer = $$1('#attributesContainer');
-    const $masterAttribute = $$1(event.currentTarget).closest('.attribute');
-    const attributeID = $masterAttribute.attr('data-id');
-    const $attributeCollection = $attributesContainer.find(`[data-id="${attributeID}"]`);
-
-    const $masterAttributeInputs = $masterAttribute.find('input:visible, select, textarea');
-
-    $attributeCollection.each((index, attr) => {
-      const $inputs = $$1(attr).find('input:visible, select, textarea');
-
-      $inputs.each((i, input) => {
-        if (input.getAttribute('type') === 'checkbox') {
-          input.checked = $masterAttributeInputs[i].checked;
-        } else {
-          input.value = $masterAttributeInputs[i].value;
-        }
-      });
-    });
-  });
-};
-
 const setAttributeChoiceListener = function setAttributeChoiceListener() {
   const $attributeChoice = $$1('#attributeChoice');
   $attributeChoice.find('button').on('click', (event) => {
@@ -564,8 +539,8 @@ const setAttributeChoiceListener = function setAttributeChoiceListener() {
         const attributeFormElements = modifyAttributeFormElements($$1(response));
 
         attributeFormElements.each((index, element) => {
-          $$1(element).find('input[type="hidden"]').last().val();
-          $$1(`#attributesContainer > div`).append(element);
+          const localeCode = $$1(element).find('input[type="hidden"]').last().val();
+          $$1(`#attributesContainer > div[data-tab="${localeCode}"]`).append(element);
         });
 
         $$1('#sylius_product_attribute_choice').val('');
@@ -592,7 +567,6 @@ $$1.fn.extend({
 
     controlAttributesList();
     modifySelectorOnAttributesListElementDelete();
-    copyValueToAllLanguages();
   },
 });
 
@@ -1839,8 +1813,8 @@ $$1(document).ready(() => {
   $$1(document).previewUploadedImage('#add-avatar');
 
   $$1('body').on('DOMNodeInserted', '[data-form-collection="item"]', (event) => {
-    if ($$1(event.target).find('.ui.accordion').length > 0) {
-      $$1(event.target).find('.ui.accordion').accordion();
+    if ($$1(event.target).find('.accordion').length > 0) {
+      $$1(event.target).find('.accordion').accordion();
     }
   });
 
@@ -1927,156 +1901,11 @@ class FeedCategorySelect {
           cache: false,
         },
         minCharacters: 2,
-        clearable: true,
       });
-
-      // Workaround for dropdown clear button not showing after loading initial value from the API
-      setTimeout(() => {
-        $(selectElement).dropdown('restore defaults');
-      }, 0);
     });
   }
 }
 
-class ProductVariantPricingGraph {
-  constructor(containerSelector) {
-    this.containerSelector = containerSelector;
-  }
-
-  init() {
-    document.querySelectorAll(this.containerSelector).forEach((componentContainer) => {
-      const graphsData = JSON.parse(componentContainer.getAttribute('data-graph'));
-
-      for (const currencyGraphIndex in graphsData) {
-        const currencyGraph = graphsData[currencyGraphIndex];
-
-        const currencyCodeHeader = document.createElement('h4');
-        currencyCodeHeader.classList.add('ui', 'header');
-        currencyCodeHeader.textContent = currencyGraph.currency;
-
-        const graphCanvas = document.createElement('canvas');
-        graphCanvas.width = 400;
-        graphCanvas.height = 200;
-
-        const graphContainer = document.createElement('div');
-        graphContainer.append(currencyCodeHeader);
-        graphContainer.append(graphCanvas);
-
-        componentContainer.append(graphContainer);
-
-        const graphConfig = this.getGraphConfig(currencyGraph.graph);
-        new Chart$1(graphCanvas.getContext('2d'), graphConfig);
-      }
-    });
-  }
-
-  /** @private */
-  getGraphConfig(rawGraphData) {
-    return {
-      type: 'line',
-      data: {
-        datasets: rawGraphData.datasets.map((rawDataset) => {
-          return {
-            label: rawDataset.label,
-            data: rawDataset.data,
-            borderColor: this.getRandomRgbColor(),
-            fill: false,
-            steppedLine: true,
-            pointRadius: 8,
-            pointHoverRadius: 10,
-          }
-        }),
-      },
-      options: {
-        maintainAspectRatio: true,
-        responsive: true,
-        scales: {
-          xAxes: [
-            {
-              type: 'linear',
-              position: 'bottom',
-              scaleLabel: {
-                display: true,
-                labelString: rawGraphData.xAxisLabel,
-              },
-            },
-          ],
-          yAxes: [
-            {
-              scaleLabel: {
-                display: true,
-                labelString: rawGraphData.yAxisLabel,
-              },
-            },
-          ],
-        },
-      },
-    }
-  }
-
-  /** @private */
-  getRandomRgbColor() {
-    const r = Math.floor(Math.random() * 255);
-    const g = Math.floor(Math.random() * 255);
-    const b = Math.floor(Math.random() * 255);
-    return `rgb(${r},${g},${b})`
-  }
-}
-
-class CustomerGroupClientAssigner {
-  constructor(selector, searchSelector = '.ng-client-search-select', submitSelector = '.ng-client-assign-submit') {
-    this.selector = selector;
-    this.searchSelector = searchSelector;
-    this.submitSelector = submitSelector;
-  }
-
-  init() {
-    document.querySelectorAll(this.selector).forEach((containerElement) => {
-      const submitApiEndpoint = containerElement.getAttribute('data-assign-customers-url');
-      const redirectAfterUrl = containerElement.getAttribute('data-redirect-after-url');
-
-      const searchElement = containerElement.querySelector(this.searchSelector);
-      const searchApiEndpoint = searchElement.getAttribute('data-customer-search-url');
-
-      $(searchElement).dropdown({
-        apiSettings: {
-          url: `${searchApiEndpoint}/{query}`,
-          cache: false,
-        },
-
-        minCharacters: 2,
-      });
-
-      const submitElement = containerElement.querySelector(this.submitSelector);
-      submitElement.addEventListener('click', () => {
-        const selectedCustomersIds = this.getSelectValues(searchElement);
-        this.submitCustomers(submitElement, submitApiEndpoint, selectedCustomersIds, redirectAfterUrl);
-      });
-    });
-  }
-
-  getSelectValues(selectElement) {
-    const selected = selectElement.querySelectorAll('option:checked');
-    return Array.from(selected).map((optionElement) => optionElement.value)
-  }
-
-  submitCustomers(submitElement, apiEndpoint, selectedIds, redirectTo) {
-    submitElement.disabled = true;
-
-    axios
-      .post(apiEndpoint, { customers: selectedIds })
-      .then(() => {
-        window.location = redirectTo;
-      })
-      .catch((error) => {
-        console.error(error);
-      })
-      .finally(() => {
-        submitElement.disabled = false;
-      });
-  }
-}
-
 class TooltipHelpers {
   static init() {
     TooltipHelpers.initSyliusShippingMethodTooltip();
@@ -2210,557 +2039,6 @@ class CustomerGroupingRuleConfiguration {
   }
 }
 
-class ImageInput {
-  constructor(selector) {
-    this.selector = selector;
-  }
-
-  init() {
-    document.querySelectorAll(this.selector).forEach((element) => {
-      element.querySelectorAll('input[type="file"]').forEach((input) => {
-        input.addEventListener('change', () => {
-          this.onImageInputChange(input);
-        });
-      });
-    });
-  }
-
-  onImageInputChange(input) {
-    if (!input.files || !input.files[0]) {
-      return
-    }
-
-    const reader = new FileReader();
-
-    reader.onload = (event) => {
-      const wrapperDiv = input.parentElement.parentElement;
-      const image = wrapperDiv.querySelector('.image');
-
-      if (null === image) {
-        const img = document.createElement('img');
-        img.setAttribute('class', 'ui small bordered image');
-        img.setAttribute('src', event.target.result);
-
-        const inputLabel = wrapperDiv.querySelector(':scope > label');
-        wrapperDiv.insertBefore(img, inputLabel.nextSibling);
-      } else {
-        image.setAttribute('src', event.target.result);
-      }
-    };
-
-    reader.readAsDataURL(input.files[0]);
-  }
-}
-
-class ProductVariantPricingSimulation {
-  constructor(selector) {
-    this.selector = selector;
-  }
-
-  init() {
-    document.querySelectorAll(this.selector).forEach((element) => {
-      const productVariantId = element.getAttribute('data-product-variant-id');
-      const channels = JSON.parse(element.getAttribute('data-channels'));
-      const searchApiEndpoint = element.getAttribute('data-customer-search-url');
-      const pricingApiEndpoint = element.getAttribute('data-pricing-url');
-
-      this.initElement(element, productVariantId, channels, searchApiEndpoint, pricingApiEndpoint);
-    });
-  }
-
-  initElement(parentElement, productVariantId, channels, searchApiEndpoint, pricingApiEndpoint) {
-    parentElement.innerHTML = '';
-
-    const simulationData = {
-      productVariantId: productVariantId,
-      channelId: null,
-      currencyId: null,
-      customerId: null,
-    };
-
-    const submitButton = document.createElement('button');
-    const currencySelect = document.createElement('select');
-
-    const onChannelSelect = (event) => {
-      const selectedChannelId = parseInt(event.target.value);
-      simulationData.channelId = selectedChannelId;
-      simulationData.currencyId = null;
-      submitButton.disabled = this.isSubmitButtonDisabled(simulationData);
-
-      const selectedChannel = channels.find((channel) => {
-        return channel.id === selectedChannelId
-      });
-
-      currencySelect.innerHTML = '';
-      this.addSelectOptions(currencySelect, selectedChannel.currencies, 'Select currency');
-    };
-
-    const onCurrencySelect = (event) => {
-      simulationData.currencyId = event.target.value;
-      submitButton.disabled = this.isSubmitButtonDisabled(simulationData);
-    };
-
-    const onCustomerSelect = (event) => {
-      simulationData.customerId = event.target.value;
-      submitButton.disabled = this.isSubmitButtonDisabled(simulationData);
-    };
-
-    const graphWrapper = this.createGraphWrapper();
-
-    const onSubmit = () => {
-      const pricingUrl = `${pricingApiEndpoint}?${this.serializeObjectToQuery(simulationData)}`;
-
-      axios$1
-        .get(pricingUrl)
-        .then((response) => {
-          const chartData = response.data;
-          graphWrapper.setAttribute('data-debug-chart', JSON.stringify(chartData)); // For e2e tests
-          this.renderGraph(graphWrapper, chartData);
-        })
-        .catch((error) => {
-          console.error(error);
-          graphWrapper.innerHTML = 'Pricing simulation error';
-        });
-    };
-
-    const wrapper = document.createElement('div');
-    wrapper.setAttribute('style', 'border: solid 1px #ddd; background-color: #fafafa;');
-
-    const filters = this.createFilters(
-      channels,
-      currencySelect,
-      onChannelSelect,
-      onCurrencySelect,
-      onCustomerSelect,
-      onSubmit,
-      submitButton,
-      searchApiEndpoint
-    );
-    filters.setAttribute(
-      'style',
-      'display: grid; grid-template-columns: 1fr 1fr 1fr 60px; grid-gap: 10px; ' +
-        'padding: 15px; border-bottom: solid 1px #ddd;'
-    );
-
-    const graphFiller = this.createGraphFiller();
-    graphWrapper.append(graphFiller);
-
-    wrapper.append(filters, graphWrapper);
-    parentElement.append(wrapper);
-  }
-
-  createFilters(
-    channels,
-    currencySelect,
-    onChannelSelect,
-    onCurrencySelect,
-    onCustomerSelect,
-    onSubmit,
-    submitButton,
-    searchApiEndpoint
-  ) {
-    const filtersWrapper = document.createElement('div');
-
-    const channelSelect = document.createElement('select');
-    channelSelect.classList.add('dirtyignore');
-    this.addSelectOptions(channelSelect, channels, 'Select channel');
-    channelSelect.addEventListener('change', onChannelSelect);
-
-    currencySelect.classList.add('dirtyignore');
-    currencySelect.addEventListener('change', onCurrencySelect);
-
-    const customerSelect = document.createElement('select');
-    customerSelect.classList.add('dirtyignore');
-    customerSelect.addEventListener('change', onCustomerSelect);
-
-    // this is delayed to avoid racing conditions
-    setTimeout(() => this.hookClientSearchOnSelect(customerSelect, searchApiEndpoint), 600);
-
-    submitButton.disabled = true;
-    submitButton.setAttribute('class', 'ui icon primary button');
-    submitButton.type = 'button';
-    submitButton.addEventListener('click', onSubmit);
-
-    const playIcon = document.createElement('i');
-    playIcon.setAttribute('class', 'icon play');
-    submitButton.append(playIcon);
-
-    filtersWrapper.append(channelSelect, currencySelect, customerSelect, submitButton);
-
-    return filtersWrapper
-  }
-
-  createGraphWrapper() {
-    const wrapper = document.createElement('div');
-    wrapper.setAttribute('style', 'padding: 15px;');
-
-    return wrapper
-  }
-
-  createGraphFiller() {
-    const filler = document.createElement('div');
-    filler.setAttribute(
-      'style',
-      'border-radius: 7px; background-color: #eee; height: 350px; display: flex; ' +
-        'justify-content: space-around; align-items: center; font-size: 4em;'
-    );
-
-    const chartIcon = document.createElement('i');
-    chartIcon.setAttribute('class', 'icon chart line');
-    filler.append(chartIcon);
-
-    return filler
-  }
-
-  addSelectOptions(select, choices, placeholder = null) {
-    if (placeholder !== null) {
-      const placeholderOption = document.createElement('option');
-      placeholderOption.innerHTML = placeholder;
-      placeholderOption.disabled = true;
-      placeholderOption.selected = true;
-      select.append(placeholderOption);
-    }
-
-    for (const property in choices) {
-      const choice = choices[property];
-
-      const channelOption = document.createElement('option');
-      channelOption.innerHTML = choice.name;
-      channelOption.setAttribute('value', choice.id);
-      select.append(channelOption);
-    }
-
-    return select
-  }
-
-  hookClientSearchOnSelect(selectElement, searchApiEndpoint) {
-    selectElement.setAttribute('class', `${selectElement.getAttribute('class')} search dropdown selection`);
-
-    $(selectElement).dropdown({
-      apiSettings: {
-        url: `${searchApiEndpoint}/{query}`,
-        cache: false,
-      },
-
-      minCharacters: 2,
-    });
-  }
-
-  isSubmitButtonDisabled(simulationData) {
-    return (
-      null === simulationData.productVariantId ||
-      null === simulationData.channelId ||
-      null === simulationData.currencyId ||
-      null === simulationData.customerId
-    )
-  }
-
-  serializeObjectToQuery(object) {
-    const query = [];
-
-    for (const part in object) {
-      if (Object.prototype.hasOwnProperty.call(object, part)) {
-        query.push(`${encodeURIComponent(part)}=${encodeURIComponent(object[part])}`);
-      }
-    }
-
-    return query.join('&')
-  }
-
-  renderGraph(graphWrapper, graphData) {
-    graphWrapper.innerHTML = '';
-
-    const graphCanvas = document.createElement('canvas');
-    graphCanvas.width = 600;
-    graphCanvas.height = 200;
-
-    graphWrapper.append(graphCanvas);
-
-    const graphConfig = this.getGraphConfig(graphData);
-    console.log('graphConfig', graphConfig);
-    new Chart$1(graphCanvas.getContext('2d'), graphConfig);
-  }
-
-  /** @private */
-  getGraphConfig(rawGraphData) {
-    return {
-      type: 'line',
-      data: {
-        datasets: rawGraphData.datasets.map((rawDataset) => {
-          return {
-            label: rawDataset.label,
-            data: rawDataset.data,
-            borderColor: '#0000ff',
-            fill: false,
-            steppedLine: true,
-            pointRadius: 8,
-            pointHoverRadius: 10,
-          }
-        }),
-      },
-      options: {
-        maintainAspectRatio: true,
-        responsive: true,
-        scales: {
-          xAxes: [
-            {
-              type: 'linear',
-              position: 'bottom',
-              scaleLabel: {
-                display: true,
-                labelString: rawGraphData.xAxisLabel,
-              },
-            },
-          ],
-          yAxes: [
-            {
-              scaleLabel: {
-                display: true,
-                labelString: rawGraphData.yAxisLabel,
-              },
-            },
-          ],
-        },
-      },
-    }
-  }
-}
-
-class DocumentUploadInput {
-  /** @param {string} documentUploadInputSelector */
-  constructor(documentUploadInputSelector) {
-    this.selector = documentUploadInputSelector;
-  }
-
-  init() {
-    const fileInputs = document.querySelectorAll(this.selector);
-
-    Array.prototype.forEach.call(fileInputs, (inputElement) => {
-      const fileUrl = inputElement.getAttribute('data-file-url');
-      const fileTitle = inputElement.getAttribute('data-file-name');
-      const downloadText = inputElement.getAttribute('data-download-translation');
-
-      const iconElement = document.createElement('i');
-      iconElement.classList.add('download', 'icon');
-
-      const buttonElement = document.createElement('button');
-      buttonElement.classList.add('ui', 'compact', 'labeled', 'icon', 'button');
-      buttonElement.setAttribute('type', 'button');
-      buttonElement.append(iconElement);
-      buttonElement.innerHTML += `${downloadText}: ${fileTitle}`;
-
-      const downloadLink = document.createElement('a');
-      downloadLink.setAttribute('style', 'display: inline-block; margin: -5px 0 25px 0;');
-      downloadLink.setAttribute('target', '_blank');
-      downloadLink.setAttribute('href', fileUrl);
-      downloadLink.append(buttonElement);
-
-      inputElement.parentNode.parentNode.append(downloadLink);
-    });
-  }
-}
-
-(function ($) {
-
-  $.fn.extend({
-    blogSlugGenerator: function () {
-      let timeout;
-
-      $('[name*="nextgen_cms_bundle_blog[translations]"][name*="[name]"]').on('input', function () {
-        clearTimeout(timeout);
-        let element = $(this);
-
-        timeout = setTimeout(function () {
-          updateSlug(element);
-        }, 1000);
-      });
-
-      $('.toggle-blog-slug-modification').on('click', function (e) {
-        e.preventDefault();
-        toggleSlugModification($(this), $(this).siblings('input'));
-      });
-
-      function updateSlug(element) {
-        let slugInput = element.parents('.content').find('[name*="[slug]"]');
-        let loadableParent = slugInput.parents('.field.loadable');
-
-        if ('readonly' === slugInput.attr('readonly')) {
-          return
-        }
-
-        loadableParent.addClass('loading');
-
-        $.ajax({
-          type: 'GET',
-          url: slugInput.attr('data-url'),
-          data: { name: element.val() },
-          dataType: 'json',
-          accept: 'application/json',
-          success: function (data) {
-            slugInput.val(data.slug);
-            if (slugInput.parents('.field').hasClass('error')) {
-              slugInput.parents('.field').removeClass('error');
-              slugInput.parents('.field').find('.sylius-validation-error').remove();
-            }
-            loadableParent.removeClass('loading');
-          },
-        });
-      }
-
-      function toggleSlugModification(button, slugInput) {
-        if (slugInput.attr('readonly')) {
-          slugInput.removeAttr('readonly');
-          button.html('<i class="unlock icon"></i>');
-        } else {
-          slugInput.attr('readonly', 'readonly');
-          button.html('<i class="lock icon"></i>');
-        }
-      }
-    },
-  });
-})(jQuery)
-;(function ($) {
-  $(document).ready(function () {
-    $(this).blogSlugGenerator();
-  });
-})(jQuery);
-
-(function ($) {
-
-  $.fn.extend({
-    articleSlugGenerator: function () {
-      let timeout;
-
-      $('[name*="nextgen_cms_bundle_article[translations]"][name*="[name]"]').on('input', function () {
-        clearTimeout(timeout);
-        let element = $(this);
-
-        timeout = setTimeout(function () {
-          updateSlug(element);
-        }, 1000);
-      });
-
-      $('.toggle-article-slug-modification').on('click', function (e) {
-        e.preventDefault();
-        toggleSlugModification($(this), $(this).siblings('input'));
-      });
-
-      function updateSlug(element) {
-        let slugInput = element.parents('.content').find('[name*="[slug]"]');
-        let loadableParent = slugInput.parents('.field.loadable');
-
-        if ('readonly' === slugInput.attr('readonly')) {
-          return
-        }
-
-        loadableParent.addClass('loading');
-
-        $.ajax({
-          type: 'GET',
-          url: slugInput.attr('data-url'),
-          data: { name: element.val() },
-          dataType: 'json',
-          accept: 'application/json',
-          success: function (data) {
-            slugInput.val(data.slug);
-            if (slugInput.parents('.field').hasClass('error')) {
-              slugInput.parents('.field').removeClass('error');
-              slugInput.parents('.field').find('.sylius-validation-error').remove();
-            }
-            loadableParent.removeClass('loading');
-          },
-        });
-      }
-
-      function toggleSlugModification(button, slugInput) {
-        if (slugInput.attr('readonly')) {
-          slugInput.removeAttr('readonly');
-          button.html('<i class="unlock icon"></i>');
-        } else {
-          slugInput.attr('readonly', 'readonly');
-          button.html('<i class="lock icon"></i>');
-        }
-      }
-    },
-  });
-})(jQuery)
-;(function ($) {
-  $(document).ready(function () {
-    $(this).articleSlugGenerator();
-  });
-})(jQuery);
-
-(function ($) {
-
-  $.fn.extend({
-    blogCategorySlugGenerator: function () {
-      let timeout;
-
-      $('[name*="nextgen_cms_bundle_blog_category[translations]"][name*="[name]"]').on('input', function () {
-        clearTimeout(timeout);
-        let element = $(this);
-
-        timeout = setTimeout(function () {
-          updateSlug(element);
-        }, 1000);
-      });
-
-      $('.toggle-blog-category-slug-modification').on('click', function (e) {
-        e.preventDefault();
-        toggleSlugModification($(this), $(this).siblings('input'));
-      });
-
-      function updateSlug(element) {
-        let slugInput = element.parents('.content').find('[name*="[slug]"]');
-        let loadableParent = slugInput.parents('.field.loadable');
-
-        if ('readonly' === slugInput.attr('readonly')) {
-          return
-        }
-
-        loadableParent.addClass('loading');
-
-        let data;
-        data = {
-          name: element.val(),
-          locale: element.closest('[data-locale]').data('locale'),
-        };
-
-        $.ajax({
-          type: 'GET',
-          url: slugInput.attr('data-url'),
-          data: data,
-          dataType: 'json',
-          accept: 'application/json',
-          success: function (data) {
-            slugInput.val(data.slug);
-            if (slugInput.parents('.field').hasClass('error')) {
-              slugInput.parents('.field').removeClass('error');
-              slugInput.parents('.field').find('.sylius-validation-error').remove();
-            }
-            loadableParent.removeClass('loading');
-          },
-        });
-      }
-
-      function toggleSlugModification(button, slugInput) {
-        if (slugInput.attr('readonly')) {
-          slugInput.removeAttr('readonly');
-          button.html('<i class="unlock icon"></i>');
-        } else {
-          slugInput.attr('readonly', 'readonly');
-          button.html('<i class="lock icon"></i>');
-        }
-      }
-    },
-  });
-})(jQuery)
-;(function ($) {
-  $(document).ready(function () {
-    $(this).blogCategorySlugGenerator();
-  });
-})(jQuery);
-
 /**
  * CKEditor config
  */
@@ -2854,35 +2132,6 @@ vendorDescriptionElements.forEach((element) => {
   CKEDITOR.replace(element.name, ckEditorOptions);
 });
 
-/**
- * Blog article
- */
-const articleAnnotationElements = document.querySelectorAll(
-  'form[name="nextgen_cms_bundle_article"] textarea[name$="[annotation]"]'
-);
-articleAnnotationElements.forEach((element) => {
-  // eslint-disable-next-line no-undef
-  CKEDITOR.replace(element.name, ckEditorOptions);
-});
-const articleContentElements = document.querySelectorAll(
-  'form[name="nextgen_cms_bundle_article"] textarea[name$="[content]"]'
-);
-articleContentElements.forEach((element) => {
-  // eslint-disable-next-line no-undef
-  CKEDITOR.replace(element.name, ckEditorOptions);
-});
-
-/**
- * Blog category
- */
-const categoryDescriptionElements = document.querySelectorAll(
-  'form[name="nextgen_cms_bundle_blog_category"] textarea[name$="[description]"]'
-);
-categoryDescriptionElements.forEach((element) => {
-  // eslint-disable-next-line no-undef
-  CKEDITOR.replace(element.name, ckEditorOptions);
-});
-
 (function ($) {
 	$(document).ready(function () {
 		$('#sylius_payment_method_calculator').handlePrototypes({
@@ -2892,12 +2141,6 @@ categoryDescriptionElements.forEach((element) => {
 	});
 })(jQuery);
 
-/*
- This file was created by developers working at BitBag
- Do you need more information about us and what we do? Visit our https://bitbag.io website!
- We are hiring developers from all over the world. Join us and start your new, exciting adventure and become part of us: https://bitbag.io/career
-*/
-
 (function ( $ ) {
 
     $.fn.extend({
@@ -2947,12 +2190,6 @@ categoryDescriptionElements.forEach((element) => {
     });
 })(jQuery);
 
-/*
- This file was created by developers working at BitBag
- Do you need more information about us and what we do? Visit our https://bitbag.io website!
- We are hiring developers from all over the world. Join us and start your new, exciting adventure and become part of us: https://bitbag.io/career
-*/
-
 (function ( $ ) {
 
     $.fn.extend({
@@ -2964,7 +2201,7 @@ categoryDescriptionElements.forEach((element) => {
                     if (callback !== undefined) {
                         callback();
                     }
-
+                    
                     var actionButton = $(this);
                     var form = actionButton.closest('form');
                     var url = actionButton.data('url');
@@ -3016,12 +2253,6 @@ categoryDescriptionElements.forEach((element) => {
     });
 })(jQuery);
 
-/*
- This file was created by developers working at BitBag
- Do you need more information about us and what we do? Visit our https://bitbag.io website!
- We are hiring developers from all over the world. Join us and start your new, exciting adventure and become part of us: https://bitbag.io/career
-*/
-
 (function ($) {
 
     $.fn.extend({
@@ -3088,12 +2319,6 @@ categoryDescriptionElements.forEach((element) => {
     });
 })(jQuery);
 
-/*
- This file was created by developers working at BitBag
- Do you need more information about us and what we do? Visit our https://bitbag.io website!
- We are hiring developers from all over the world. Join us and start your new, exciting adventure and become part of us: https://bitbag.io/career
-*/
-
 (function($) {
     $('.bitbag-cms-import input[type="text"]').click(function() {
         $(this).parent().find('input[type="file"]').click();
@@ -3107,6 +2332,60 @@ categoryDescriptionElements.forEach((element) => {
 
 })( jQuery );
 
+class CustomerGroupClientAssigner {
+  constructor(selector, searchSelector = '.ng-client-search-select', submitSelector = '.ng-client-assign-submit') {
+    this.selector = selector;
+    this.searchSelector = searchSelector;
+    this.submitSelector = submitSelector;
+  }
+
+  init() {
+    document.querySelectorAll(this.selector).forEach((containerElement) => {
+      const submitApiEndpoint = containerElement.getAttribute('data-assign-customers-url');
+      const redirectAfterUrl = containerElement.getAttribute('data-redirect-after-url');
+
+      const searchElement = containerElement.querySelector(this.searchSelector);
+      const searchApiEndpoint = searchElement.getAttribute('data-customer-search-url');
+
+      $(searchElement).dropdown({
+        apiSettings: {
+          url: `${searchApiEndpoint}/{query}`,
+          cache: false,
+        },
+
+        minCharacters: 2,
+      });
+
+      const submitElement = containerElement.querySelector(this.submitSelector);
+      submitElement.addEventListener('click', () => {
+        const selectedCustomersIds = this.getSelectValues(searchElement);
+        this.submitCustomers(submitElement, submitApiEndpoint, selectedCustomersIds, redirectAfterUrl);
+      });
+    });
+  }
+
+  getSelectValues(selectElement) {
+    const selected = selectElement.querySelectorAll('option:checked');
+    return Array.from(selected).map((optionElement) => optionElement.value)
+  }
+
+  submitCustomers(submitElement, apiEndpoint, selectedIds, redirectTo) {
+    submitElement.disabled = true;
+
+    axios
+      .post(apiEndpoint, { customers: selectedIds })
+      .then(() => {
+        window.location = redirectTo;
+      })
+      .catch((error) => {
+        console.error(error);
+      })
+      .finally(() => {
+        submitElement.disabled = false;
+      });
+  }
+}
+
 // Scripts
 
 // Components initializations
@@ -3136,21 +2415,7 @@ $(document).ready(() => {
   const adminSidebarScroller = new AdminSidebarScroller(adminSidebarElement, 'a.item');
   adminSidebarScroller.scrollToActiveLink();
 
-  const productVariantPricingGraph = new ProductVariantPricingGraph('.ng-product-variant-pricing-graph');
-  productVariantPricingGraph.init();
-
-  const productVariantPricingSimulation = new ProductVariantPricingSimulation(
-    '.ng-product-variant-pricing-simulation'
-  );
-  productVariantPricingSimulation.init();
-
   // Client search select
   const clientSearchSelect = new CustomerGroupClientAssigner('.ng-customer-group-client-assigner');
   clientSearchSelect.init();
-
-  const imageInput = new ImageInput('.ng-image-input');
-  imageInput.init();
-
-  const documentUploadInput = new DocumentUploadInput('input.ng-document-upload-input');
-  documentUploadInput.init();
 });