@oxyshop/admin 1.3.50 → 1.3.51

package/lib/index.js

@@ -24,14 +24,16 @@ import 'semantic-ui-css/components/video';
 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.js/dist/chart.min';
+import { Chart as 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;
@@ -396,6 +398,7 @@ $$1.fn.extend({
           search: 250,
         },
         forceSelection: false,
+        saveRemoteData: false,
         apiSettings: {
           dataType: 'JSON',
           cache: false,
@@ -406,12 +409,21 @@ $$1.fn.extend({
             return settings;
           },
           onResponse(response) {
+            let results = response.map(item => ({
+              name: item[choiceName],
+              value: item[choiceValue],
+            }));
+
+            if (!element.hasClass('multiple')) {
+              results.unshift({
+                name: ' ',
+                value: '',
+              });
+            }
+
             return {
               success: true,
-              results: response.map(item => ({
-                name: item[choiceName],
-                value: item[choiceValue],
-              })),
+              results: results,
             };
           },
         },
@@ -436,13 +448,12 @@ $$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 +484,12 @@ const controlAttributesList = function controlAttributesList() {
 };
 
 const modifyAttributesListOnSelectorElementDelete = function modifyAttributesListOnSelectorElementDelete(removedValue) {
-  $$1(`#attributesContainer .attribute[data-id="${removedValue}"]`).remove();
+  $$1(`#attributesContainer .attributes-group[data-attribute-code="${removedValue}"]`).remove();
 };
 
 const modifySelectorOnAttributesListElementDelete = function modifySelectorOnAttributesListElementDelete() {
-  $$1('.attribute button').off('click').on('click', (event) => {
-    const attributeId = $$1(event.currentTarget).parents('.attribute').attr('data-id');
+  $$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('div#attributeChoice > .ui.dropdown.search').dropdown('remove selected', attributeId);
     modifyAttributesListOnSelectorElementDelete(attributeId);
@@ -507,6 +518,35 @@ 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 if (input.nodeName === 'SELECT') {
+          for (let x = 0; x < $inputs[i].length; x++) {
+            input[x].selected = $masterAttributeInputs[i][x].selected;
+          }
+        } else {
+          input.value = $masterAttributeInputs[i].value;
+        }
+      });
+    });
+  });
+};
+
 const setAttributeChoiceListener = function setAttributeChoiceListener() {
   const $attributeChoice = $$1('#attributeChoice');
   $attributeChoice.find('button').on('click', (event) => {
@@ -539,8 +579,8 @@ const setAttributeChoiceListener = function setAttributeChoiceListener() {
         const attributeFormElements = modifyAttributeFormElements($$1(response));
 
         attributeFormElements.each((index, element) => {
-          const localeCode = $$1(element).find('input[type="hidden"]').last().val();
-          $$1(`#attributesContainer > div[data-tab="${localeCode}"]`).append(element);
+          $$1(element).find('input[type="hidden"]').last().val();
+          $$1(`#attributesContainer > div`).append(element);
         });
 
         $$1('#sylius_product_attribute_choice').val('');
@@ -567,6 +607,7 @@ $$1.fn.extend({
 
     controlAttributesList();
     modifySelectorOnAttributesListElementDelete();
+    copyValueToAllLanguages();
   },
 });
 
@@ -701,6 +742,83 @@ $$1.fn.handlePrototypes = function handlePrototypes(method, ...args) {
   return undefined;
 };
 
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Paweł Jędrzejewski
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+$$1.fn.extend({
+  loadCatalogPromotionActionConfiguration(target) {
+    if (target == null || target.querySelector('#sylius_catalog_promotion_actions select[name*="type"]') == null) {
+      return;
+    }
+
+    target.querySelector('#sylius_catalog_promotion_actions select[name*="type"]').onchange = function () {
+      const parent = this.parentElement;
+      const newConfig = document.createElement('div');
+      newConfig.innerHTML = this.selectedOptions[0].getAttribute('data-configuration');
+      const oldConfig = parent.nextElementSibling;
+
+      parent.parentElement.replaceChild(newConfig, oldConfig);
+
+      const oldConfigInputName = oldConfig.querySelector('input').getAttribute('name');
+      let newConfigInputs = newConfig.querySelectorAll('input');
+
+      newConfigInputs.forEach(element => {
+        let newConfigInputName = element.getAttribute('name');
+
+        newConfigInputName = oldConfigInputName.replace(
+          oldConfigInputName.substring(oldConfigInputName.indexOf('[configuration]') + 15),
+          newConfigInputName.substring(newConfigInputName.indexOf('configuration') + 13),
+        );
+
+        $$1(element).attr('name', newConfigInputName);
+      });
+    };
+  },
+});
+
+/*
+ * This file is part of the Sylius package.
+ *
+ * (c) Paweł Jędrzejewski
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+$$1.fn.extend({
+  loadCatalogPromotionScopeConfiguration(target) {
+    if (target == null || target.querySelector('#sylius_catalog_promotion_scopes select[name*="type"]') == null) {
+      return;
+    }
+
+    target.querySelector('#sylius_catalog_promotion_scopes select[name*="type"]').onchange = function () {
+      const parent = this.parentElement;
+      const newConfig = document.createElement('div');
+      newConfig.innerHTML = this.selectedOptions[0].getAttribute('data-configuration');
+      const oldConfig = parent.nextElementSibling;
+
+      parent.parentElement.replaceChild(newConfig, oldConfig);
+
+      const oldConfigInputName = oldConfig.querySelector('input').getAttribute('name');
+      let newConfigInputName = newConfig.querySelector('input').getAttribute('name');
+
+      newConfigInputName = oldConfigInputName.replace(
+        oldConfigInputName.substring(oldConfigInputName.lastIndexOf('[') + 1, oldConfigInputName.lastIndexOf(']')),
+        newConfigInputName.substring(newConfigInputName.indexOf('[') + 1, newConfigInputName.lastIndexOf(']')),
+      );
+
+      $$1(newConfig).find('input').attr('name', newConfigInputName);
+      $$1(newConfig).find('.sylius-autocomplete').autoComplete();
+    };
+  },
+});
+
 /*
  * This file is part of the Sylius package.
  *
@@ -1390,8 +1508,10 @@ const drawChart = function drawChart(canvas, labels = [], values = [], currency)
       },
       responsive: true,
       maintainAspectRatio: false,
-      legend: {
-        display: false,
+      plugins: {
+        legend: {
+          display: false,
+        },
       },
     },
   });
@@ -1770,18 +1890,26 @@ $$1(document).ready(() => {
   $$1('#sylius_shipping_method_calculator').handlePrototypes({
     prototypePrefix: 'sylius_shipping_method_calculator_calculators',
     containerSelector: '.configuration',
+  }).change(() => {
+    $$1('.ui.tabular.menu .item').tab();
   });
+  setTimeout(() => {
+    $$1('.ui.tabular.menu .item').tab();
+  }, 50);
 
-  $$1('#actions a[data-form-collection="add"]').on('click', () => {
+  $$1('#sylius_promotion_actions > a[data-form-collection="add"]').on('click', () => {
     setTimeout(() => {
       $$1('select[name^="sylius_promotion[actions]"][name$="[type]"]').last().change();
     }, 50);
   });
-  $$1('#rules a[data-form-collection="add"]').on('click', (event) => {
-    const name = $$1(event.target).closest('form').attr('name');
-
+  $$1('#sylius_promotion_rules > a[data-form-collection="add"]').on('click', () => {
+    setTimeout(() => {
+      $$1('select[name^="sylius_promotion[rules]"][name$="[type]"]').last().change();
+    }, 50);
+  });
+  $$1('#sylius_shipping_method_rules > a[data-form-collection="add"]').on('click', () => {
     setTimeout(() => {
-      $$1(`select[name^="${name}[rules]"][name$="[type]"]`).last().change();
+      $$1('select[name^="sylius_shipping_method[rules]"][name$="[type]"]').last().change();
     }, 50);
   });
 
@@ -1791,6 +1919,18 @@ $$1(document).ready(() => {
         $$1(element).autoComplete();
       }
     });
+
+    if ($$1('#sylius_catalog_promotion_scopes').length > 0) {
+      $$1(document).loadCatalogPromotionScopeConfiguration(
+        document.querySelector('#sylius_catalog_promotion_scopes [data-form-collection="item"]:last-child')
+      );
+    }
+
+    if ($$1('#sylius_catalog_promotion_actions').length > 0) {
+      $$1(document).loadCatalogPromotionActionConfiguration(
+        document.querySelector('#sylius_catalog_promotion_actions [data-form-collection="item"]:last-child')
+      );
+    }
   });
   $$1(document).on('collection-form-update', () => {
     $$1('.sylius-autocomplete').each((index, element) => {
@@ -1809,12 +1949,21 @@ $$1(document).ready(() => {
   $$1(document).taxonSlugGenerator();
   $$1(document).previewUploadedImage('#sylius_product_images');
   $$1(document).previewUploadedImage('#sylius_taxon_images');
+  if ($$1('#sylius_catalog_promotion_actions').length > 0) {
+    $$1(document).loadCatalogPromotionActionConfiguration(document.querySelector('#sylius_catalog_promotion_actions'));
+  }
+  if ($$1('#sylius_catalog_promotion_scopes').length > 0) {
+    $$1(document).loadCatalogPromotionScopeConfiguration(document.querySelector('#sylius_catalog_promotion_scopes'));
+  }
 
   $$1(document).previewUploadedImage('#add-avatar');
 
   $$1('body').on('DOMNodeInserted', '[data-form-collection="item"]', (event) => {
-    if ($$1(event.target).find('.accordion').length > 0) {
-      $$1(event.target).find('.accordion').accordion();
+    if ($$1(event.target).find('.ui.accordion').length > 0) {
+      $$1(event.target).find('.ui.accordion').accordion();
+    }
+    if ($$1(event.target).find('.ui.tabular.menu').length > 0) {
+      $$1(event.target).find('.ui.tabular.menu .item').tab();
     }
   });
 
@@ -1901,9 +2050,154 @@ 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 {
@@ -2039,6 +2333,557 @@ 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
  */
@@ -2132,6 +2977,35 @@ 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({
@@ -2141,6 +3015,12 @@ vendorDescriptionElements.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({
@@ -2190,6 +3070,12 @@ vendorDescriptionElements.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({
@@ -2201,7 +3087,7 @@ vendorDescriptionElements.forEach((element) => {
                     if (callback !== undefined) {
                         callback();
                     }
-                    
+
                     var actionButton = $(this);
                     var form = actionButton.closest('form');
                     var url = actionButton.data('url');
@@ -2253,6 +3139,12 @@ vendorDescriptionElements.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({
@@ -2319,6 +3211,12 @@ vendorDescriptionElements.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();
@@ -2332,60 +3230,6 @@ vendorDescriptionElements.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
@@ -2415,7 +3259,21 @@ $(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();
 });