@oxyshop/admin 1.3.35 → 1.3.39

package/lib/index.js

@@ -25,6 +25,9 @@ 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';
@@ -1884,11 +1887,13 @@ $.fn.extend({
   },
 });
 
-$.fn.extend({
-  feedCategorySelect() {
-    const matchedElements = this;
+class FeedCategorySelect {
+  constructor(selector) {
+    this.selectSelector = selector;
+  }
 
-    Object.values(matchedElements).forEach((selectElement) => {
+  init() {
+    document.querySelectorAll(this.selectSelector).forEach((selectElement) => {
       const sourceCode = selectElement.getAttribute('data-source-code');
 
       $(selectElement).dropdown({
@@ -1899,8 +1904,154 @@ $.fn.extend({
         minCharacters: 2,
       });
     });
-  },
-});
+  }
+}
+
+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;
+
+    this.containerElement = null;
+    this.searchElement = null;
+    this.submitElement = null;
+  }
+
+  init() {
+    this.containerElement = document.querySelector(this.selector);
+    if (null === this.containerElement) {
+      return
+    }
+
+    const submitApiEndpoint = this.containerElement.getAttribute('data-assign-customers-url');
+    const redirectAfterUrl = this.containerElement.getAttribute('data-redirect-after-url');
+
+    this.searchElement = this.containerElement.querySelector(this.searchSelector);
+    const searchApiEndpoint = this.searchElement.getAttribute('data-customer-search-url');
+
+    $(this.searchElement).dropdown({
+      apiSettings: {
+        url: `${searchApiEndpoint}/{query}`,
+        cache: false,
+      },
+
+      minCharacters: 2,
+    });
+
+    this.submitElement = this.containerElement.querySelector(this.submitSelector);
+    this.submitElement.addEventListener('click', () => {
+      const selectedCustomersIds = this.getSelectValues(this.searchElement);
+      this.submitCustomers(submitApiEndpoint, selectedCustomersIds, redirectAfterUrl);
+    });
+  }
+
+  getSelectValues(selectElement) {
+    const selected = selectElement.querySelectorAll('option:checked');
+    return Array.from(selected).map((optionElement) => optionElement.value)
+  }
+
+  submitCustomers(apiEndpoint, selectedIds, redirectTo) {
+    this.submitElement.disabled = true;
+
+    axios
+      .post(apiEndpoint, { customers: selectedIds })
+      .then(() => {
+        window.location = redirectTo;
+      })
+      .catch((error) => {
+        console.error(error);
+      })
+      .finally(() => {
+        this.submitElement.disabled = false;
+      });
+  }
+}
 
 class TooltipHelpers {
   static init() {
@@ -1990,6 +2141,322 @@ class AdminSidebarScroller {
   }
 }
 
+class CustomerGroupingRuleConfiguration {
+  /**
+   * @param {string} groupingRuleSelectSelector
+   * @param {string} formGroupSelector
+   */
+  constructor(groupingRuleSelectSelector, formGroupSelector) {
+    this.groupingRuleSelectSelector = groupingRuleSelectSelector;
+    this.formGroupSelector = formGroupSelector;
+  }
+
+  init() {
+    // Event listener on dynamic elements
+    $(document).on('change', this.groupingRuleSelectSelector, (selectEvent) => {
+      this.toggleRuleConfigurationSection(selectEvent.target);
+    });
+
+    // Show all sections with selected value
+    document.querySelectorAll(this.groupingRuleSelectSelector).forEach((selectElement) => {
+      this.toggleRuleConfigurationSection(selectElement);
+    });
+  }
+
+  toggleRuleConfigurationSection(selectElement) {
+    const selectedRuleCode = selectElement.value;
+    const configurationGroup = selectElement.parentElement.parentElement;
+
+    configurationGroup.querySelectorAll(this.formGroupSelector).forEach((formGroup) => {
+      const groupRuleCode = formGroup.getAttribute('data-grouping-rule-code');
+      const toggleFunction = groupRuleCode === selectedRuleCode ? this.showElement : this.hideElement;
+
+      toggleFunction(formGroup);
+    });
+  }
+
+  /** @private */
+  hideElement(element) {
+    element.classList.add('d-none');
+  }
+
+  /** @private */
+  showElement(element) {
+    element.classList.remove('d-none');
+  }
+}
+
+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');
+    this.addSelectOptions(channelSelect, channels, 'Select channel');
+    channelSelect.addEventListener('change', onChannelSelect);
+
+    currencySelect.addEventListener('change', onCurrencySelect);
+
+    const customerSelect = document.createElement('select');
+    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,
+              },
+            },
+          ],
+        },
+      },
+    }
+  }
+}
+
 /**
  * CKEditor config
  */
@@ -2288,7 +2755,6 @@ vendorDescriptionElements.forEach((element) => {
 // Components initializations
 $(document).ready(() => {
   $('.ng-taxon-attr-dropdown').taxonAttributes();
-  $('.ng-feed-category-select').feedCategorySelect();
 
   $(document).previewUploadedImage('#sylius_payment_method_images');
   $(document).previewUploadedImage('#sylius_shipping_method_images');
@@ -2299,8 +2765,29 @@ $(document).ready(() => {
    */
   TooltipHelpers.init();
 
+  const customerGroupingRuleConfiguration = new CustomerGroupingRuleConfiguration(
+    'select.ng-grouping-rule-select',
+    '.ng-grouping-rule-configuration'
+  );
+  customerGroupingRuleConfiguration.init();
+
+  const feedCategorySelect = new FeedCategorySelect('.ng-feed-category-select');
+  feedCategorySelect.init();
+
   // Admin sidebar scroller
   const adminSidebarElement = document.getElementById('sidebar');
   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();
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyshop/admin",
-  "version": "1.3.35",
+  "version": "1.3.39",
   "author": "oXy Online s.r.o. <info@oxyshop.cz>",
   "main": "lib/index.js",
   "sass": "scss/main.scss",

package/scss/main.scss

@@ -1,3 +1,7 @@
 @import 'Form/main';
 @import 'Logo/main';
 @import 'PickupPoint/main';
+
+.d-none {
+    display: none !important;
+}

package/src/components/customerGroupClientAssigner.js

@@ -0,0 +1,62 @@
+import { axios } from '@oxyshop/shop/lib/plugins/Axios'
+
+export default class CustomerGroupClientAssigner {
+  constructor(selector, searchSelector = '.ng-client-search-select', submitSelector = '.ng-client-assign-submit') {
+    this.selector = selector
+    this.searchSelector = searchSelector
+    this.submitSelector = submitSelector
+
+    this.containerElement = null
+    this.searchElement = null
+    this.submitElement = null
+  }
+
+  init() {
+    this.containerElement = document.querySelector(this.selector)
+    if (null === this.containerElement) {
+      return
+    }
+
+    const submitApiEndpoint = this.containerElement.getAttribute('data-assign-customers-url')
+    const redirectAfterUrl = this.containerElement.getAttribute('data-redirect-after-url')
+
+    this.searchElement = this.containerElement.querySelector(this.searchSelector)
+    const searchApiEndpoint = this.searchElement.getAttribute('data-customer-search-url')
+
+    $(this.searchElement).dropdown({
+      apiSettings: {
+        url: `${searchApiEndpoint}/{query}`,
+        cache: false,
+      },
+
+      minCharacters: 2,
+    })
+
+    this.submitElement = this.containerElement.querySelector(this.submitSelector)
+    this.submitElement.addEventListener('click', () => {
+      const selectedCustomersIds = this.getSelectValues(this.searchElement)
+      this.submitCustomers(submitApiEndpoint, selectedCustomersIds, redirectAfterUrl)
+    })
+  }
+
+  getSelectValues(selectElement) {
+    const selected = selectElement.querySelectorAll('option:checked')
+    return Array.from(selected).map((optionElement) => optionElement.value)
+  }
+
+  submitCustomers(apiEndpoint, selectedIds, redirectTo) {
+    this.submitElement.disabled = true
+
+    axios
+      .post(apiEndpoint, { customers: selectedIds })
+      .then(() => {
+        window.location = redirectTo
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+      .finally(() => {
+        this.submitElement.disabled = false
+      })
+  }
+}

package/src/components/customerGroupingRuleConfiguration.js

@@ -0,0 +1,44 @@
+export default class CustomerGroupingRuleConfiguration {
+  /**
+   * @param {string} groupingRuleSelectSelector
+   * @param {string} formGroupSelector
+   */
+  constructor(groupingRuleSelectSelector, formGroupSelector) {
+    this.groupingRuleSelectSelector = groupingRuleSelectSelector
+    this.formGroupSelector = formGroupSelector
+  }
+
+  init() {
+    // Event listener on dynamic elements
+    $(document).on('change', this.groupingRuleSelectSelector, (selectEvent) => {
+      this.toggleRuleConfigurationSection(selectEvent.target)
+    })
+
+    // Show all sections with selected value
+    document.querySelectorAll(this.groupingRuleSelectSelector).forEach((selectElement) => {
+      this.toggleRuleConfigurationSection(selectElement)
+    })
+  }
+
+  toggleRuleConfigurationSection(selectElement) {
+    const selectedRuleCode = selectElement.value
+    const configurationGroup = selectElement.parentElement.parentElement
+
+    configurationGroup.querySelectorAll(this.formGroupSelector).forEach((formGroup) => {
+      const groupRuleCode = formGroup.getAttribute('data-grouping-rule-code')
+      const toggleFunction = groupRuleCode === selectedRuleCode ? this.showElement : this.hideElement
+
+      toggleFunction(formGroup)
+    })
+  }
+
+  /** @private */
+  hideElement(element) {
+    element.classList.add('d-none')
+  }
+
+  /** @private */
+  showElement(element) {
+    element.classList.remove('d-none')
+  }
+}

package/src/components/feedCategorySelect.js

@@ -1,8 +1,10 @@
-$.fn.extend({
-  feedCategorySelect() {
-    const matchedElements = this
+export default class FeedCategorySelect {
+  constructor(selector) {
+    this.selectSelector = selector
+  }
 
-    Object.values(matchedElements).forEach((selectElement) => {
+  init() {
+    document.querySelectorAll(this.selectSelector).forEach((selectElement) => {
       const sourceCode = selectElement.getAttribute('data-source-code')
 
       $(selectElement).dropdown({
@@ -13,5 +15,5 @@ $.fn.extend({
         minCharacters: 2,
       })
     })
-  },
-})
+  }
+}

package/src/components/productVariantPricingGraph.js

@@ -0,0 +1,86 @@
+import Chart from 'chart.js'
+
+export default 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(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})`
+  }
+}

package/src/components/productVariantPricingSimulation.js

@@ -0,0 +1,273 @@
+import axios from 'axios'
+import Chart from 'chart.js'
+
+export default 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
+        .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')
+    this.addSelectOptions(channelSelect, channels, 'Select channel')
+    channelSelect.addEventListener('change', onChannelSelect)
+
+    currencySelect.addEventListener('change', onCurrencySelect)
+
+    const customerSelect = document.createElement('select')
+    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(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,
+              },
+            },
+          ],
+        },
+      },
+    }
+  }
+}

package/src/index.js

@@ -6,9 +6,13 @@ import 'sylius-bundle/AdminBundle/Resources/private/js/app'
 
 // Scripts - components
 import './components/taxonAttributes'
-import './components/feedCategorySelect'
+import FeedCategorySelect from './components/feedCategorySelect'
+import ProductVariantPricingGraph from './components/productVariantPricingGraph'
+import CustomerGroupClientAssigner from './components/customerGroupClientAssigner'
 import TooltipHelpers from './components/tooltipHelpers'
 import AdminSidebarScroller from './components/adminSidebarScroller'
+import CustomerGroupingRuleConfiguration from './components/customerGroupingRuleConfiguration'
+import ProductVariantPricingSimulation from './components/productVariantPricingSimulation'
 
 // Scripts - plugin
 import './plugins/ckeditor/index'
@@ -32,7 +36,6 @@ import '@oxyshop/admin/images/admin-logo.svg'
 // Components initializations
 $(document).ready(() => {
   $('.ng-taxon-attr-dropdown').taxonAttributes()
-  $('.ng-feed-category-select').feedCategorySelect()
 
   $(document).previewUploadedImage('#sylius_payment_method_images')
   $(document).previewUploadedImage('#sylius_shipping_method_images')
@@ -43,8 +46,29 @@ $(document).ready(() => {
    */
   TooltipHelpers.init()
 
+  const customerGroupingRuleConfiguration = new CustomerGroupingRuleConfiguration(
+    'select.ng-grouping-rule-select',
+    '.ng-grouping-rule-configuration'
+  )
+  customerGroupingRuleConfiguration.init()
+
+  const feedCategorySelect = new FeedCategorySelect('.ng-feed-category-select')
+  feedCategorySelect.init()
+
   // Admin sidebar scroller
   const adminSidebarElement = document.getElementById('sidebar')
   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()
 })