@oxyshop/admin 1.3.38 → 1.3.39

package/lib/index.js

@@ -25,12 +25,14 @@ 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 { axios } from '@oxyshop/shop/lib/plugins/Axios';
 
 window.$ = $$1;
 window.jQuery = $$1;
@@ -1905,6 +1907,152 @@ class FeedCategorySelect {
   }
 }
 
+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() {
     TooltipHelpers.initSyliusShippingMethodTooltip();
@@ -2038,6 +2186,277 @@ class CustomerGroupingRuleConfiguration {
   }
 }
 
+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
  */
@@ -2331,63 +2750,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;
-
-    this.containerElement = null;
-    this.searchElement = null;
-    this.submitElement = null;
-  }
-
-  init() {
-    this.containerElement = document.querySelector(this.selector);
-    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;
-      });
-  }
-}
-
 // Scripts
 
 // Components initializations
@@ -2403,20 +2765,28 @@ $(document).ready(() => {
    */
   TooltipHelpers.init();
 
-  const feedCategorySelect = new FeedCategorySelect('.ng-feed-category-select');
-  feedCategorySelect.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/lib/style.css

@@ -1,3 +1,217 @@
+.sylius-filters {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -10px;
+  margin-right: -10px; }
+  .sylius-filters__field {
+    flex-grow: 1;
+    min-width: 360px;
+    margin-left: 10px;
+    margin-right: 10px; }
+  .sylius-filters .sylius-filters__group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start; }
+    .sylius-filters .sylius-filters__group > .field {
+      flex-grow: 1; }
+    .sylius-filters .sylius-filters__group > input {
+      flex-grow: 1;
+      width: auto !important; }
+    .sylius-filters .sylius-filters__group > .disabled.field {
+      flex-grow: 0; }
+      .sylius-filters .sylius-filters__group > .disabled.field input {
+        width: 40px !important;
+        background: #eeeeee;
+        text-align: center; }
+  .sylius-filters .field {
+    margin-bottom: 22px !important; }
+    .sylius-filters .field label {
+      font-weight: 700 !important; }
+
+.sylius-filters select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat !important;
+  background-size: 8px 12px !important;
+  background-position: calc(100% - 10px) calc(50% + 3px) !important; }
+
+.sylius-filters .sylius-filters__group input, .sylius-filters .sylius-filters__group select {
+  border-radius: 0 !important;
+  border-right-width: 0 !important; }
+
+.sylius-filters .sylius-filters__group .field:last-child input:last-child,
+.sylius-filters .sylius-filters__group .field:last-child select:last-child {
+  border-right-width: 1px !important;
+  border-radius: 0 .28571429rem .28571429rem 0 !important; }
+
+.sylius-filters .sylius-filters__group .field:first-child input:first-of-type,
+.sylius-filters .sylius-filters__group .field:first-child select:first-of-type {
+  border-radius: .28571429rem 0 0 .28571429rem !important; }
+
+.overflow-x-auto {
+  overflow-x: auto; }
+
+#wrapper {
+  padding: 54px 0 0 0; }
+
+#content {
+  padding: 1em; }
+
+#sidebar {
+  font-size: 1.1em;
+  padding-bottom: 30px; }
+
+#logo {
+  margin-bottom: 1em; }
+
+body.pushable .pusher {
+  background-color: #f9fAfb; }
+
+.ui.visible.left.sidebar ~ .fixed.menu,
+.ui.visible.left.sidebar ~ .pusher {
+  padding-right: 260px; }
+
+body.centered {
+  background-color: #f9fAfb; }
+  body.centered .grid {
+    height: 100%; }
+  body.centered .column {
+    padding: 1em;
+    max-width: 450px; }
+
+select.ui.dropdown[multiple="multiple"] {
+  height: 100px; }
+
+.ui.segments {
+  border: 0; }
+  .ui.segments .ui.segment {
+    border: 1px solid rgba(34, 36, 38, 0.15) !important; }
+
+.ui.breadcrumb {
+  margin-top: 1em;
+  margin-left: 1em;
+  margin-bottom: 1em; }
+
+th a {
+  color: rgba(0, 0, 0, 0.87); }
+
+th a:hover {
+  color: rgba(0, 0, 0, 0.87); }
+
+th a:visited {
+  color: rgba(0, 0, 0, 0.87); }
+
+.ui.compact.segment .inline.fields {
+  margin: 0; }
+
+.ui.hidden.element {
+  display: none; }
+
+.ui.monster.header {
+  font-size: 3em; }
+
+.ui.styled.header {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  background-color: #f9fAfb;
+  font-size: 0.9em;
+  padding-bottom: 7px; }
+
+.ui.input input[readonly] {
+  color: #aaa; }
+
+.field.loading.transition {
+  top: auto;
+  left: auto; }
+
+.ui.floated.dividing.empty {
+  top: 100%;
+  bottom: auto;
+  padding: 0;
+  margin: 0; }
+
+.ui.left.floated.dividing.empty ~ .ui.dropdown > .menu {
+  right: auto;
+  left: 0; }
+
+.ui.right.floated.dividing.empty ~ .ui.dropdown > .menu {
+  right: 0;
+  left: auto; }
+
+.sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__bulk,
+.sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__pagination,
+.sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__perpage {
+  padding-bottom: 1rem; }
+
+.sylius-grid-wrapper .sylius-grid-nav__bulk .ui.red.labeled.icon.button:disabled {
+  background: #b9babb !important; }
+
+.sylius-grid-wrapper .sylius-grid-table-wrapper {
+  overflow-x: auto;
+  margin-bottom: 1rem; }
+  .sylius-grid-wrapper .sylius-grid-table-wrapper .ui.buttons, .sylius-grid-wrapper .sylius-grid-table-wrapper .ui.label {
+    white-space: nowrap; }
+
+@media only screen and (min-width: 768px) {
+  .sylius-grid-wrapper .sylius-grid-nav {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: -1rem;
+    margin-right: -1rem; }
+    .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__bulk,
+    .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__pagination,
+    .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__perpage {
+      padding-left: 1rem;
+      padding-right: 1rem; }
+    .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__bulk {
+      display: flex; }
+      .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__bulk .button {
+        padding-top: 0.99em !important;
+        padding-bottom: 0.99em !important; }
+    .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__pagination {
+      flex-grow: 1; }
+  .sylius-grid-wrapper .pagination {
+    flex-wrap: wrap; } }
+
+#wrapper.full.height {
+  position: relative;
+  padding-bottom: 80px !important;
+  min-height: 100vh; }
+  #wrapper.full.height::after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 60px;
+    right: 30px;
+    width: calc(100% - 60px);
+    height: 1px;
+    background: #ebebeb; }
+  #wrapper.full.height .sylius-footer {
+    position: absolute;
+    bottom: 20px;
+    right: 40px;
+    font-size: 13px;
+    color: #9a9a9a; }
+
+input[type="color"] {
+  -webkit-appearance: none;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  width: 38px;
+  height: 38px;
+  padding: 3px;
+  border-radius: 99px; }
+
+input[type="color"]::-webkit-color-swatch,
+input[type="color"]::-webkit-color-swatch-wrapper {
+  border-radius: 99px;
+  border: 0;
+  padding: 3px; }
+
+input[type="color"]::-moz-color-swatch {
+  border-radius: 99px;
+  border: 0; }
+
 .sylius-tree.hidden {
   display: none; }
 
@@ -301,217 +515,3 @@ a {
 
 .promotion-disabled {
   color: #a0a0a0; }
-
-.sylius-filters {
-  display: flex;
-  flex-wrap: wrap;
-  margin-left: -10px;
-  margin-right: -10px; }
-  .sylius-filters__field {
-    flex-grow: 1;
-    min-width: 360px;
-    margin-left: 10px;
-    margin-right: 10px; }
-  .sylius-filters .sylius-filters__group {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start; }
-    .sylius-filters .sylius-filters__group > .field {
-      flex-grow: 1; }
-    .sylius-filters .sylius-filters__group > input {
-      flex-grow: 1;
-      width: auto !important; }
-    .sylius-filters .sylius-filters__group > .disabled.field {
-      flex-grow: 0; }
-      .sylius-filters .sylius-filters__group > .disabled.field input {
-        width: 40px !important;
-        background: #eeeeee;
-        text-align: center; }
-  .sylius-filters .field {
-    margin-bottom: 22px !important; }
-    .sylius-filters .field label {
-      font-weight: 700 !important; }
-
-.sylius-filters select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat !important;
-  background-size: 8px 12px !important;
-  background-position: calc(100% - 10px) calc(50% + 3px) !important; }
-
-.sylius-filters .sylius-filters__group input, .sylius-filters .sylius-filters__group select {
-  border-radius: 0 !important;
-  border-right-width: 0 !important; }
-
-.sylius-filters .sylius-filters__group .field:last-child input:last-child,
-.sylius-filters .sylius-filters__group .field:last-child select:last-child {
-  border-right-width: 1px !important;
-  border-radius: 0 .28571429rem .28571429rem 0 !important; }
-
-.sylius-filters .sylius-filters__group .field:first-child input:first-of-type,
-.sylius-filters .sylius-filters__group .field:first-child select:first-of-type {
-  border-radius: .28571429rem 0 0 .28571429rem !important; }
-
-.overflow-x-auto {
-  overflow-x: auto; }
-
-#wrapper {
-  padding: 54px 0 0 0; }
-
-#content {
-  padding: 1em; }
-
-#sidebar {
-  font-size: 1.1em;
-  padding-bottom: 30px; }
-
-#logo {
-  margin-bottom: 1em; }
-
-body.pushable .pusher {
-  background-color: #f9fAfb; }
-
-.ui.visible.left.sidebar ~ .fixed.menu,
-.ui.visible.left.sidebar ~ .pusher {
-  padding-right: 260px; }
-
-body.centered {
-  background-color: #f9fAfb; }
-  body.centered .grid {
-    height: 100%; }
-  body.centered .column {
-    padding: 1em;
-    max-width: 450px; }
-
-select.ui.dropdown[multiple="multiple"] {
-  height: 100px; }
-
-.ui.segments {
-  border: 0; }
-  .ui.segments .ui.segment {
-    border: 1px solid rgba(34, 36, 38, 0.15) !important; }
-
-.ui.breadcrumb {
-  margin-top: 1em;
-  margin-left: 1em;
-  margin-bottom: 1em; }
-
-th a {
-  color: rgba(0, 0, 0, 0.87); }
-
-th a:hover {
-  color: rgba(0, 0, 0, 0.87); }
-
-th a:visited {
-  color: rgba(0, 0, 0, 0.87); }
-
-.ui.compact.segment .inline.fields {
-  margin: 0; }
-
-.ui.hidden.element {
-  display: none; }
-
-.ui.monster.header {
-  font-size: 3em; }
-
-.ui.styled.header {
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  background-color: #f9fAfb;
-  font-size: 0.9em;
-  padding-bottom: 7px; }
-
-.ui.input input[readonly] {
-  color: #aaa; }
-
-.field.loading.transition {
-  top: auto;
-  left: auto; }
-
-.ui.floated.dividing.empty {
-  top: 100%;
-  bottom: auto;
-  padding: 0;
-  margin: 0; }
-
-.ui.left.floated.dividing.empty ~ .ui.dropdown > .menu {
-  right: auto;
-  left: 0; }
-
-.ui.right.floated.dividing.empty ~ .ui.dropdown > .menu {
-  right: 0;
-  left: auto; }
-
-.sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__bulk,
-.sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__pagination,
-.sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__perpage {
-  padding-bottom: 1rem; }
-
-.sylius-grid-wrapper .sylius-grid-nav__bulk .ui.red.labeled.icon.button:disabled {
-  background: #b9babb !important; }
-
-.sylius-grid-wrapper .sylius-grid-table-wrapper {
-  overflow-x: auto;
-  margin-bottom: 1rem; }
-  .sylius-grid-wrapper .sylius-grid-table-wrapper .ui.buttons, .sylius-grid-wrapper .sylius-grid-table-wrapper .ui.label {
-    white-space: nowrap; }
-
-@media only screen and (min-width: 768px) {
-  .sylius-grid-wrapper .sylius-grid-nav {
-    display: flex;
-    flex-wrap: wrap;
-    margin-left: -1rem;
-    margin-right: -1rem; }
-    .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__bulk,
-    .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__pagination,
-    .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__perpage {
-      padding-left: 1rem;
-      padding-right: 1rem; }
-    .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__bulk {
-      display: flex; }
-      .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__bulk .button {
-        padding-top: 0.99em !important;
-        padding-bottom: 0.99em !important; }
-    .sylius-grid-wrapper .sylius-grid-nav .sylius-grid-nav__pagination {
-      flex-grow: 1; }
-  .sylius-grid-wrapper .pagination {
-    flex-wrap: wrap; } }
-
-#wrapper.full.height {
-  position: relative;
-  padding-bottom: 80px !important;
-  min-height: 100vh; }
-  #wrapper.full.height::after {
-    content: '';
-    display: block;
-    position: absolute;
-    bottom: 60px;
-    right: 30px;
-    width: calc(100% - 60px);
-    height: 1px;
-    background: #ebebeb; }
-  #wrapper.full.height .sylius-footer {
-    position: absolute;
-    bottom: 20px;
-    right: 40px;
-    font-size: 13px;
-    color: #9a9a9a; }
-
-input[type="color"] {
-  -webkit-appearance: none;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  width: 38px;
-  height: 38px;
-  padding: 3px;
-  border-radius: 99px; }
-
-input[type="color"]::-webkit-color-swatch,
-input[type="color"]::-webkit-color-swatch-wrapper {
-  border-radius: 99px;
-  border: 0;
-  padding: 3px; }
-
-input[type="color"]::-moz-color-swatch {
-  border-radius: 99px;
-  border: 0; }

package/package.json

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

package/src/components/customerGroupClientAssigner.js

@@ -13,6 +13,10 @@ export default class CustomerGroupClientAssigner {
 
   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')
 

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

@@ -7,9 +7,12 @@ import 'sylius-bundle/AdminBundle/Resources/private/js/app'
 // Scripts - components
 import './components/taxonAttributes'
 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'
@@ -29,7 +32,6 @@ import '@oxyshop/admin/lib/style.css'
 // Images
 import '@oxyshop/admin/images/logo.png'
 import '@oxyshop/admin/images/admin-logo.svg'
-import CustomerGroupClientAssigner from './components/customerGroupClientAssigner'
 
 // Components initializations
 $(document).ready(() => {
@@ -44,20 +46,28 @@ $(document).ready(() => {
    */
   TooltipHelpers.init()
 
-  const feedCategorySelect = new FeedCategorySelect('.ng-feed-category-select')
-  feedCategorySelect.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()