@oxyshop/admin 1.3.49 → 1.3.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyshop/admin",
-  "version": "1.3.49",
+  "version": "1.3.51",
   "author": "oXy Online s.r.o. <info@oxyshop.cz>",
   "main": "lib/index.js",
   "sass": "scss/main.scss",
@@ -19,15 +19,15 @@
   },
   "dependencies": {
     "@oxyshop/core": "^1.3.0",
-    "chart.js": "~2.9.0",
+    "chart.js": "~3.7.0",
     "jquery.dirtyforms": "~2.0.0",
     "lightbox2": "~2.11.0",
-    "semantic-ui-css": "~2.4.0",
+    "semantic-ui-css": "~2.5.0",
     "slick-carousel": "~1.8.0"
   },
   "devDependencies": {
-    "@rollup/plugin-alias": "~3.1.0",
-    "rollup": "~2.42.0",
-    "rollup-plugin-scss": "~2.6.0"
+    "@rollup/plugin-alias": "~4.0.0",
+    "rollup": "~2.79.0",
+    "rollup-plugin-scss": "~4.0.0"
   }
 }

package/src/components/article-slug.js

@@ -0,0 +1,65 @@
+;(function ($) {
+  'use strict'
+
+  $.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)

package/src/components/blog-category-slug.js

@@ -0,0 +1,71 @@
+;(function ($) {
+  'use strict'
+
+  $.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)

package/src/components/blog-slug.js

@@ -0,0 +1,65 @@
+;(function ($) {
+  'use strict'
+
+  $.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)

package/src/components/documentUploadInput.js

@@ -0,0 +1,33 @@
+export default 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)
+    })
+  }
+}

package/src/components/feedCategorySelect.js

@@ -13,7 +13,13 @@ export default 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)
     })
   }
 }

package/src/components/imageInput.js

@@ -0,0 +1,41 @@
+export default 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])
+  }
+}

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,276 @@
+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')
+    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(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,
+              },
+            },
+          ],
+        },
+      },
+    }
+  }
+}